weixin_45121510的博客

父组件<template> <section> <div class="ruleBtn" @click="handleClick($event)">点击按钮</div> <RuleModal v-if="ruleModalVisible" ref="ruleModal" :modalConfig="modalConfig" @close="closeRuleModal" /

toText(html){ return html.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi,'').replace(/<[^>]+?>/g,'').replace(/\s+/g,' ').replace(/ /g,' ').replace(/>/g,' ');}效果如下：

<template> <div class="widget-table can-not-copy" > <div :class="{ letScroll: fixed }" ref="tableBox"> <table :key="keyCode" cellpadding="5" id="widget-table" width="100%" :border=.

const parmas = { moduleCode:this.moduleCode, code:this.keyCode, title:this.configData.twoPageConfig.title, orgCode:this.orgCode, hasKeys:JSON.stringify(this.hasKeys), mergeParmas:JSON.stringify(this.mer...

<div v-show="isShow" class="IT-support" ref='itSupport' @mousedown.capture="mouseDown" > <img class="ITImg" src="@/common/images/IT.png" @click.stop="showOrHideBar"> </div>data: startY:0,//初始移动位置 domBotto...

HTML5 WebSocketWebSocket 教程<template> <div id="app" class="mainContainer"> <div class="topSide"> <div class="topRight"> <span class="timeStr">{{formatTimeStr}}</span> <span class="secon.

效果：实现页面字幕从屏幕外向上缓缓移动的动效，动效完成后，实现下部分固定，上部分（为了观察效果，特意用粉色框圈住部分）可滚动scroll的效果。效果一览：难点：主要是字幕动效完成后，将文字部分压缩在content中时：需要始终保持字幕部分最后一行字：【贺卡】，保持它在动画最后一幕那个位置不变动。知识：Element.scrollTopElement.clientHeightCSS3 过渡 transition代码：<template> <div class="h

踩坑1：在某些手机型号下：我说你说他说大家说有咩有问题就算是一个完整的span标签的内容，也会重叠在一起解决：加上letter-spacing属性：.text {letter-spacing: 2px;}letter-spacing 属性增加或减少字符间的空白（字符间距）踩坑2：在iphone6s真机上，保存图片到本地，出现：页面除背景外的其他部分为空白的情况。其他手机型号没有这种情况。出现原因：排查后发现：是由于页面主体部分有显隐动画，且直接把动画写在css里导致的问题。原代

<template> <div class="page-home" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"> <!-- 头部 --> <nb-header :logo="logo" :hasMusic="active" ref="headerContainer"></nb-header> <!-- 改变的页面

子组件 ： loading文件：<template> <div class="nb-loading"> <div class="nb-loading-process"> <div class="process"> <img src="@/common/images/1-3@2x.png" /> <span>{{ process }}%</span>

nb-loading文件<template><!-- 1. 背景图 --> <div class="nb-loading"> <!-- 2. 滑动流星动画 --> <nbMeteor></nbMeteor> <!-- 3. loading加载百分比动效 --> <div class="nb-loading-process"> <div class="pr.

<template> <div class="nb-header"> <div class="nb-music" v-show="hasMusic != 0" :style="'backgroundImage: url('+((isXinghaiApp)? bg:'')+')'"> <!-- audio标签 --> <audio ref="audioPlayer" style="opacity: 0;" loop

<template> <div class="nb-header"> <div class="nb-logo" :style="'backgroundImage: url('+logo+') '"></div> <div class="nb-music" @click="click"> <img :src="status ? music : musicStop" alt="" /> </di

需求：在文件满足条件时直接上传，再次上传时若文件满足条件则覆盖之前的文件上传，否则则提示且不上传不满足条件的文件。<!-- :limit="1" --> // 注意：最大允许上传个数：这里不要置为1，置为1有个问题就是：无论怎么选择文件，页面上展示的始终是第一次选择的文件，这效果和我想的大相径庭。<el-upload ref="upload" :action="$config.baseURL + '/resource/upload/images'" :http-re

<van-field v-model.trim="submitParams.title" autocomplete="off" :rules="[{ required: true},{validator, message: '输入长度50字符以内'}]" /><van-field v-model.trim="submitParams.offset" type="digit" name="offset" :rules="[{ required: true},{valvalida

<div class="barBox"> <div class="colorBar" v-if="tabType=='bug'" :style="{width:computedBug(itemData,'finish')}"></div> <div class="colorBar" v-else :style="{width:computedWidth(itemData.estimate)}"></div></div>m.

<div>{{sync | my-filter}}</div><div>{{mg | ya("优雅地","如厕") | my-filter}}</div><script> Vue.filter('my-filter',function(value) { // 无参数 return value + '哈哈' }) Vue.filter('ya',function(value,arg1,arg2) { // 有参数 retu

<!-- 允许输入正整数，调起纯数字键盘 --><van-field v-model="digit" type="digit" label="整数" />有时设置了digit，但还是可以输入负数，可能是版本问题：vant文档申明：Tips: digit 类型从 2.4.2 版本开始支持这时我们可以和正则搭配使用：// 限制只能输入正整数'digit':function(v) { // 回填值是number类型的情况，做个判断 if(typeof v == 'nu

<!-- 地图区域 --><div class="map-box" > <div id="container"></div></div>//实现简单的通过经纬度定位位置，以及点标记的地图 // 加载地图 loadMap() { const that = this this.$nextTick(()=>{ // 创造Map类实例时，可通过传入地图初始化参数来设置地图的初始状态。 let confi

Tips: digit 类型从 2.4.2 版本开始支持// 限制只能输入正整数 (可以和digit配合使用)<van-field v-model.trim="submitParams.offset" type="digit" name="offset" autocomplete="off" " label="范围半径(米)" placeholder="输入范围(米)" :rules="[{ required: true}]"/>'submitParams.offset'.

原对象：let information = { address: "222" buInfo: "NH005-新希望服务" offset: "100" title: "名称"}如果你想剔除从这个对象里剔除buInfo这个字段1.deletedelet information.buInfoconsole.log(information)// information = { // 改变了information的值 address: "222" offset: "100" title

其他变量类型和Boolean类型的相互转化：0、-0、null、""、false、undefined 或者 NaN转化为false，其他为true比较! 和 !!1、！可做逻辑运算和类型判断：可将变量转换成boolean类型，null、undefined和空字符串取反都为true，其余都为false如：!null=true !0=true2、!! 常常用来做类型判断，在第一步!（变量）之后再做逻辑取反运算：简单来看：!!null=false !!(0)=false常用于：判断变量.

如果type传入tomorrow则获取明天的这个时候，否则则是现在：handleTime(new Date(), 'tomorrow')格式：YYYY-MM-DD hh:mm:ss （年-月-日 时：分：秒）function handleTime(time,type){ var d = new Date(time); if(type === 'tomorrow') { d.setDate(d.getDate()+1) // 默认是明天的这个时候 } let yea

截取数组前5个对象arr.slice(0,5)截取字符串后3位（保留除了最后3位前面的部分）val.substring(0,val.length-3)删除指定下标为index的对象arr.splice(index,1)使用map方法将数组处理成我们想要的样子 let arr = [ ] list.map(item => { arr.push({ userId: item.id, //用户id name: item.name,//姓名 }).

效果：<div class="imgs"> <!-- 背景图 --> <div class="background"> <img :src="item.voteTime ? imgSrc1:imgSrc2" width="100%" height="100%" alt="" /> </div> <!-- 文字 --> <div class="front"> <div v-if="

一般按照浏览器默认的换行规则：就只在汉字后进行换行，如果有英文单词，则会把英文单词整体移到下一行，在英文单词前则断开。如果希望让浏览器实现在任意位置的换行：可以通过 word-break 和 word-wrap 属性配合使用达到效果： .state-box { width: 181px; height: 100%; text-align: center; **word-break: break-all; word-w