- 博客(56)
- 收藏
- 关注
RSS订阅原创 vue中bus.$on事件被多次绑定
办法二：注册的总线事件（Bus）要在组件销毁时(beforeDestroy/destroyed)卸载。办法一：在每次调用方法前先解绑事件( bus.
2023-07-21 18:05:17
1166
原创 vue 路由跳转
1:不带参数this.router.push(′/mine′)this.router.push('/mine') this.router.push(′/mine′)this.router.push({name:‘mine’})this.$router.push({path:’/mine’})2: query传参this.router.push(name:′mine′,query:id:′1′)this.router.push({name:'mine',query: {id:'1'}})
2021-12-17 15:24:32
129
原创 求最大值和最小值
var arr = [10,20,30,40,50]最大值：var test = arr.reduce(function(prev,cur){ return Math.max(prev,cur) },0) 最小值：var test = arr.reduce(function(prev,cur){ return Math.min(prev,cur) },0)
2021-09-24 14:06:02
142
原创 移动端兼容iphonex(h5和小程序都支持)
1:设置网页的头部标签（viewport-fit=cover"）<meta name="viewport" content="width=device-width, viewport-fit=cover">2:将页面主体设置在安全区域内（padding-bottom/bottom/margin-bottom）.footer{ padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-
2021-09-10 13:26:30
118
原创 vue 重置data的数据
一：重置所有数据Object.assign(this.$data, this.$options.data())二：重置个别数据Object.assign(this.$data.obj, this.$options.data().obj)
2021-09-08 16:11:50
279
原创 模拟触发一个按钮
vue方式1:给按钮添加一个ref<el-button size="small" type="primary" ref="savebtn">导入</el-button>2:事件触发this.$refs.savebtn.$el.click()原生js方式document.getElementById('demo').click();jquery方式 $(".demo").click(function(){ $(".btn").trigger('click')
2021-08-30 09:43:56
208
原创 uniapp编译小程序预览手机打开空白问题解决办法
1:微信开发者工具（详情-本地设置-勾选上传时进行代码保护）如果勾选了还是不行的话，在按照下面的步骤进行操作：1:查看微信开发者工具版本，可能是版本问题，建议下载稳定版本，下载链接：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html下载完uniapp重新编译（可能会有以下报错）解决办法：下载安装完需要配置Hbuilder工具-> 设置 -> 运行配置 -> 找到微信开发者工具路径配置
2021-08-11 10:27:32
3233
原创 find和findIndex用法
var arrDemo = [{ name:"xiaohong", age:10 },{ name:"xiaoli", age:11 },{ name:"xiaomei", age:12 },{ name:"xiaogao", age:13 },{ name:"xiaozhao", age:14
2021-06-30 17:04:38
283
原创 长方型形一圈虚线
<view class="demo"></view>.demo{ width: 600rpx; height: 300rpx; border: 2rpx dashed transparent; background: linear-gradient(white,white) padding-box,repeating-linear-gradient(-45deg,red 0, red 25rpx,white 0,white 45rpx); }
2021-05-26 16:42:26
75
原创 判断数组中是否存在某个对象
1：利用 indexOf ，不存在则返回-1var arr=[1,2,3,4]arr.indexOf(3) // 2arr.indexOf(5) // -12:利用somevar result = arr.some(item=>{ if(item.age=='10'){ return true } })console.log(result) // 如果arr数组对象中含有age:‘10’,就会返回true，否则返回false...
2021-05-18 10:18:44
1228
原创 vue 父子组件生命周期执行顺序
父子组件生命周期执行的先后顺序为父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
2021-05-07 14:25:49
70
原创 js 数组开头和结尾添加删除和删除元素
1:push为在最后添加元素mounted() { var arr = [ { name:"q", age:1 }, { name:"w", age:2 }, { name:"e", age:3 } ] arr.push( { name:"r", age:4 } ) console.log(arr) },结果为：2:uns
2021-04-13 11:22:09
695
原创 js 数组对象去重
第一种方式：mounted() { var arr = [{name: 'a',id: 1}, {name: 'a',id: 2}, {name: 'b',id: 3}, {name: 'c',id: 4}]; var newArr = this.deWeight(arr); console.log(newArr,888) },methods:{ deWeight(arr) { for (var i = 0; i < arr.length - 1; i
2021-04-02 15:25:02
69
原创 css hover控制同级 上级 子级
<div class="div"> <em class="em">m6</em></div>.div:hover .em{ color:#fff}上面父对子是指父元素触发hover事件，并且控制父元素中的子元素做出响应<div class="div"> <em class="em">m6</em></div>.em:hover ~ .div{ background-color: #f
2021-04-01 18:18:49
8228
5
原创 ES6 padStart()方法和padEnd()方法
padStart() 用于头部补全；padEnd() 用于尾部补全。举例如下：var aa = "1"aa.padStart(3,0) // 001aa.padStart(4,'123') // 1231aa.padEnd(3,0) // 100aa.padEnd(6,'2') //122222
2021-03-19 16:54:37
157
原创 es6模版字符串
let aa = "小红叫" + this.name + ", 今年" + this.age + "岁了"let aa = `小红叫${this.name}, 今年"${this.age}岁了`
2021-03-05 16:16:14
46
原创 解决NavigationDuplicated: Avoided redundant navigation to current location: 问题
在用vue-router 做单页应用的时候重复点击一个跳转的路由会出现报错这个报错是重复路由引起的只需在注册路由组建后使用下方重写路由就可以一般在router下面的index.js （有的会直接是router.js）里面加入：import Vue from 'vue';import Router from 'vue-router';Vue.use(Router);const originalPush = Router.prototype.push;Router.prototype.p
2021-03-02 17:29:33
291
原创 图片 img 自适应
1：图片等比例放大缩小<img src="../../assets/login-bg.jpg">img{ max-width: 200px; max-height: 200px;}2:对图片进行剪切，保留原始比例：img { width: 200px; height: 400px; object-fit: cover;}
2021-01-21 16:42:56
425
原创 uniapp 引入vantUI
1:安装Vant组件库npm i vant -S（cnpm i vant -S）2:安装官方给出的引入方式引入组件，一般我都是引入所有组件，在main.js里面添加import Vue from 'vue';import Vant from 'vant';import 'vant/lib/index.css';Vue.use(Vant);运行后会出现下图这种错误这是HBuild X的buy已经过了很多个版本都没有修复，出现这个是因为在main.js中引入vant样式import 'v
2020-11-27 16:39:36
6207
1
原创 js截取字符串某个字符串之前和之后的字符串
const aa="2020-10-10T12:00:21"console.log(aa.split("T")[0]) //T之前的字符串 结果为2020-10-10console.log(aa.split("T")[1]) //T之后的字符串 结果为12:00:21
2020-11-19 13:57:20
1481
原创 element 动态多选框
<el-checkbox-group v-model="riRate"> <el-checkbox v-for="(item, index) in riRateContent" :key="index" :label="item.value" >{{item.label}}</el-checkbox> </el-checkbox-group> export default { return { riRate.
2020-11-19 10:34:26
1031
原创 JS 快速将对象中所有键赋值为空
objDemo = { a : '1111', b : '2222', c : '33333'}Object.keys(objDemo).forEach(key=>{objDemo[key]=''})console.log(objDemo)
2020-11-19 10:26:14
3968
原创 查找对象数组中某属性的最大最小值
var array=[ { "name": "小红", "value": 100 }, { "name": "小军", "value": 20 }, { "name": "小李", "value": 70最大值：Math.max.apply(Math, array.map(fu.
2020-10-20 16:54:05
355
原创 echarts无法动态改变series问题
在option中设置series值为一个数组，通过动态改变series值来动态更新图表（发现打印出来数据变了，但是页面上还是老的数据）原因，Echarts会默认将更新的数据和之前数据合并解决办法vipChart.setOption(option,true)这样就可以了...
2020-09-25 13:39:47
2336
1
原创 css 修改滚动条样式
.treeView { width: 155px; position: fixed; overflow-y: auto; height: 400px; border:1px solid #f2f2f2;}.treeView::-webkit-scrollbar { width: 4px; }.treeView::-webkit-scrollbar-thumb { border-radius: 10px; background: #eee;}
2020-09-01 14:27:18
100
原创 splice详解
var arr = [1,2,3,4,5,6,7,8,9];var arr1 = [1,2,3,4,5,6,7,8,9];arr.splice(3,0,123); arr1.splice(4,1)console.log(arr) //[1,2,3,123,4,5,6,7,8,9]console.log(arr1) //[1,2,3,4,6,7,8,9]splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。arrayObject.splice(index,howmany,i
2020-08-13 15:12:13
797
原创 js 递归遍历json数据
var array = [ { id:1, children:[{ id:2, children:[] }] }, { id:3, children:[] }, { id:4, children:[ { id:5, childr
2020-08-13 10:40:08
756
原创 css3 filter 滤镜属性
<img src="../../../../common/receiveCoupon/images/receive_coupon.jpg" class="blur imgsrc"/> <img src="../../../../common/receiveCoupon/images/receive_coupon.jpg" class="brightness imgsrc"/> <img src="../../../../common/receiveCoupo
2020-08-10 15:14:09
93
原创 vue插件 环形进度条动画效果
1:首先安装插件 cnpm install vue-circleprogressbar<template> <div class="wrap-progress"> <circle-progressbar :id="1" barColor="#0000ff" backgroundColor="rgba(0,0,0,0.4)" :width="100"
2020-08-07 15:37:37
1498
1
原创 js 数组中找到第一改符合条件的元素
const content = [{ hobby:"write", show:false },{ hobby:"dance", show:true },{ hobby:"draw", show:true },{ hobby:"read", show:false }]const findItem = content.find(item => item.show == true) //返回数组中第一个show为tru
2020-08-06 10:48:32
1139
原创 Vue draggable实现从左到右拖拽功能
1:安装插件npm install vuedraggable2:在需要使用的组件中引入import draggable from ‘vuedraggable’3:注册组件components:{draggable}示例：<div style="height: 1000px;"> <div class="test-left"> <!-- 左侧按钮 --> <draggable v-model="lis.
2020-07-31 15:01:43
2142
1
原创 vue provide/inject理解
使用场景：也是组件传值，尤其是祖父组件–孙组件等有跨度的组件间传值，单向传值（由provide的组件传递给inject的组件）provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性inject 通常是一个字符串数组需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据父组件：<div> <div>this is a father<
2020-07-30 13:15:05
192
原创 css 类似于360安全体检的动画
<div class="containertj"> <div class="status-circle status-1"> <div class="circle rotary-circle"></div> <div class="circle content-circle"> <div class="circle detail-circle">体检中..</div>
2020-07-28 15:29:07
372
原创 vue 环形进度条（动态的效果）
<div class="percentloop"> <div class="circle-left"> <div ref="leftcontent"></div> </div> <div class="circle-right"> <div ref="rightcontent"></div> </div> <div class="n
2020-07-28 15:07:25
2080
原创 vue bus传参
新建一个js文件，命名为bus.js。bus.js文件的内容为：import Vue from 'vue'const bus = new Vue()export default bus 页面demo.vue包含两个组件 a.vue和b.vuea.vue执行一个事件，传递数据到b.vue 或者b.vue执行一个事件，传递数据到a.vue举例：a.vue执行事件传递数据到b.vue：首先：在a.vue和b.vue分别引入bus.js（例如：import bus from “@/util/bu
2020-07-14 10:55:17
1092
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人