sunlihong123的博客

原创 element-ui 如何给el-select下拉框el-option选项添加点击事件

如何给el-select下拉框el-option选项添加点击事件

原创 map 方法

map使用方法

原创 promise 异步使用

promise异步

原创 vue provide和inject用法说明

provide和inject用法说明

原创 绑定值为对象时 value-key

当组件绑定值为对象时，需要加value-key作为value唯一标识的键名:value绑定item为对象value-key唯一标识<el-select v-model="name" value-key="code" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item..

原创 element-ui table表格自定义

1、如何在表达式中写三元表达式<el-table-column label="是否选中"> <template slot-scope="scope"> <span>{{scope.row.id== 1 ? '是' :'否'}}</span> </template></el-table-column>2、如何自定义索引 index：当前行号 从0开始<el-table-column type="i

原创 两个数组 转换成json格式

var names= ['张三','李四','王五'];var num = [18,19,20];转换成 var json={[ name:'张三' age:'18' ],[ name:'李四' age:'19' ],[ name:'王五' age:'20' ]} 解决方式如下：var names= ['张三','李四','王五'];var num = [18,19,20];var json = [];var array = {};for(va...

原创 element-ui步骤条自定义

使用插槽 slot<el-steps :active="1"> <el-step title="步骤 1">插入自定义div <template slot="description" > <img src=" "> </template>插入图片 <template slot="icon" > <img src=" "> </template&...

转载 如何判断对象是否为空

1、对象转化为字符串进行比较var a={}; var b=new Object();console.log(JSON.stringify(a)=="{}") //trueconsole.log(JSON.stringify(b)=="{}") //true2、for...in循环var a={};function isEmptyObject(obj){ for(var key in obj){ return false }; return...

转载 vue页面渲染成功 但是报undefined

将data里面声明的{} 改成 “”参考链接vue.js数据可以在页面上渲染成功却总是警告提示某个字段“undefined”未定义_weixin_33755554的博客-CSDN博客

原创 之前前端html的模板页面融合进vue项目中使用

放到static目录下面就可以跳转了

原创 vue倒计时跳转

watch监听时间

原创 微信小程序 生成图片分享到朋友圈

1、canvas2、painter插件 https://github.com/Kujiale-Mobile/Painter （git下载地址 可以去看详情）shareFriend(){var that = this;wx.showLoading({ title: '图片生成中'})this.setData({imgDraw: { width: '300px', height: '450px', background:"#fff",vi...

原创 微信小程序：padding无效问题

加入代码box-sizing:border-box;

原创 bootstrap 禁止响应

1、禁止响应的部分加上：min-width2、col-xs- 代替 col-md- col-lg-3、设置.container的固定大小宽度4、移除meta标签

原创 父组件调用子组件的方法

Vue：vue会给子组件添加一个ref属性，通过this.$refs.ref的值便可以获取到该子组件//子组件<bar ref="bar"></bar>//父组件this.$ref.bar.子组件的方法小程序：给子组件添加id或者class，然后通过this.selectComponent找到子组件//子组件<bar id="bar">&...

原创 小程序父子组件传值

父传子：直接将值赋值给一个变量父组件：<tab-bar currentpage="index"></tab-bar> “index”就是要向子组件传递的值子组件：properties中，接收传递的值properties: { currentpage: { // 属性名 type: String, ...

原创 js防抖

// 防抖 function debounce(fn,delay) { //默认300毫秒 var timer; return function () { var args = arguments; if (timer) { clearTimeout(timer); }...

原创 js转换emoji表情

// 将表情转为字符var str="表情????123456"function utf16toEntities(str) { var patt=/[\ud800-\udbff][\udc00-\udfff]/g; // 检测utf16字符正则 str = str.replace(patt, function(char){ var H, L, code; ...

原创 页面跳转，id有变化，但是页面没有刷新

使用activated()周期而不使用mounted()周期解决

原创 @keyup.enter 首次回车无效问题

@keyup.enter绑定在button上，需要点击一次，回车按键才响应。原因是：keyup 事件绑定在按钮上面，如果焦点不在按钮上，就无法响应这个事件了。点击之后，焦点就在按钮上，所以这时按回车键才有效。解决方法是：把 keyup 事件绑定在 document 上面。未把 keyup 事件绑定在 document 上面。无效！！！...

原创 vue单页面多路由区域操作

在一个页面里我们有2个以上<router-view>区域，我们通过配置路由的js文件，来操作这些区域的内容。如图：

原创 vue-router参数传递

1、{{ $route.name }} （不常用） name为在路由文件src/router/index.js里配置name属性。2、通过< router-link> 中的 to 进行传参，{{ $route.params.username }}进行接收 （常用）3、利用url传参在配置文件里以：冒号的形式传递参数，这就是对参数的绑定。在App.v...

原创 vue中slot的使用

在父组件引入的子组件的标签内写入标签，如果不使用slot，则显示不出来。1、匿名插槽与具名插槽2、作用域插槽 slot-scope。不使用其提供的数据，作用域插槽蜕变为匿名插槽父组件子组件3、v-slot从vue@2.6.x开始，slot和slot-scope弃用，引入v-slot...

转载 vue的单向数据流和双向数据绑定

单向数据流：指只能从一个方向修改数据如下图：一个父组件下有两个子组件1和子组件2，父组件可以向子组件传递数据。假如子组件都获取到了父组件的name，在子组件1中对name重新修改之后，子组件2和父组件中的值并不会发生改变，这正是因为Vue中的机制是单向数据流，子组件不能直接改变父组件的状态。但反过来，如果是父组件中的name修改了，当然两个子组件中的name也就改变了。 ...

原创 let与var的区别

let块级作用域（局部）。var全局作用域。varfor(var i=0;i<5;i++){ setTimeout(function(){ console.log(i) //5，5，5，5，5 },50)}console.log(i) // 5letfor(let i=0;i<5;i++){ setTimeout(fu...

原创 vue兄弟组件传值

1、子传父，父传子2、借助中央事件总线1）新建一个文件作为中央事件，引入vue,暴露出去2）父组件indexPage引用两个子组件hi1、hi23）在hi1子组件中引入中央文件，通过Bus.$emit('名称'，‘数据’),发送数据4）子组件hi2引入中央文件，通过Bus.$on('名称'，function() {})接收数据...

原创 IE11兼容vue

ie11打开vue2.0项目空白，有的浏览器不支持ES6,所以需要安装babel-polyfill来将ES6转换为浏览器可识别的ES5语法安装npm install --save-dev babel-polyfill在webpack.base.conf.js中module.exports下的entry中写入，如下图*如用到swiper插件，应该改为swiper3。swiper4...

原创 清除浮动的方法

1）添加额外标签通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，其他标签br等亦可2）父元素设置 overflow：hidden在IE6中还需要触发 hasLayout ，例如 zoom：1；3）使用:after 伪元素由于IE6-7不支持:after，使用 zoom:1...

原创 用CSS写一个三角

（1）.erweimaBox:after{ content: ' '; display: block; position: fixed; right:85px; top:590px; width: 20px; height: 20px; background: #ff...

原创 超出部分显示省略号

（1）一行width:300px;overflow:hidden;white-space:nowrap;text-overflow: ellipsis;（2）两行text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;...

原创 线（由深变浅）

.hotLineLeft{ width: 100px;height: 1px;display: inline-block;vertical-align: middle;background: linear-gradient(90deg,#fff,#b2aeae);-webkit-filter: progid:dximagetran...

原创 文本居中

上下左右居中（有宽高）1、position: absolute; width:200px;height:100px;border:1px solid black;top:50%;left:50%;margin-top:-50px;margin-left:-100px;2、width: ...

原创 截取数组

（1）返回新数组（去除截取掉的部分）截取最后一位var last= lsSplit00.substring(0,lsSplit00.length - 1)截取前五位var lsSlice = last.slice(5)（2）返回截取的部分截取前三位var three = lsSplit00.substring(0,3)var two = last.slice(2,4...

原创 获取地址栏参数

1、获取url地址问号后面部分function getQueryStringArgs() { var qs = location.search.length > 0 ? location.search.substring(1) : '',args = {},items = qs.length ? qs.split('&') : [],...

原创 本地存储

1、cookie：大小限制在4k，可以设置过期时间、路径、域和httpOnly等字段。如果设置了过期时间，cookie会保存在硬盘里，直 到 了设定的过期时间才会失效。若未设置过期时间，在浏览器窗口关闭时，cookie就失效了 $.cookie('username', msg.data.username, { ...

原创 多维数组变一维数组

二维数组变一维1、用apply的特性，将数组作为参数展开，concat接受单个值作为参数，所 以不需要识别。let data=[[1,2,3],[4,5,6]];res=[].concat.apply([],data);console.log(res) // 输出为： [1, 2, 3, 4, 5, 6]2、利用es6新增的扩展运算符将数组展开let data...

原创 将对象转化为数组中的对象

原创 判断数组中出现次数最多的字符和次数

原创 前端性能优化方法

1）减少http请求： 删除不必要的img css js,多余的插件 压缩img js css(gulp.js) 整合图片sprites：一些背景图片整合到一张图片文件2）减小资源体积：压缩图片3）减少Dom元素数量，4）使用CDN5) 配置Etag：是web服务器用于确认缓存组件的有效性的一种机制6) 减少DNS查询 DNS：负责将域名URL转化为...