- 博客(19)
- 收藏
- 关注
原创 el-dialog作为子组件使用,点击自带关闭按钮报错
el-dialog作为子组件使用时,点击dialog自带关闭按钮会报错:[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “dialogVis
2022-04-12 15:28:42 3314
原创 keep-alive 跳转页面后数据缓存不刷新
需求如下:列表页筛选数据后跳到详情页,再返回列表页后页面不能刷新,需保留之前筛选的数据router.js中添加meta属性,keepAlive标记是否开启缓存,isBack标记是否从详情页跳转返回{ path: '/map', name: 'map', component: () => import('@/views/map/index'), hidden: true, meta: { keepAlive: true, isBack: false }
2021-05-12 17:33:50 429
原创 Vue前端AES加密解密
在src/utils/aes.js中写加解密函数import CryptoJS from 'crypto-js'; export default { // 随机生成指定数量的16进制key generatekey(num) { let library = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; let key = ""; for (var i .
2021-05-08 15:00:26 294
原创 el-pagination分页用法总结
实现功能:对数据进行分页展示,active数据改变样式展示数据<div v-for="(v, k) in showNews" :key="k"> <div :class="[activeIndex == k ? 'active' : '', 'item']" @click="checkItem(k)"> {{v.date}} </div> </div> <el-pagination backgro
2021-02-25 17:52:43 619
原创 vuecli3中使用swiper6.0以上版本 vue-awesome-swiper4.0以上版本
因为swiper版本的升级,发现之前总结的方法有些不适用了,简单总结一下新版本用法。npm安装npm install swiper vue-awesome-swiper --savemain.js中全局引入import { Swiper as SwiperClass, Pagination, Mousewheel, Autoplay} from 'swiper/core'import getAwesomeSwiper from 'vue-awesome-swiper/d
2021-01-21 16:07:06 680
原创 echarts柱状图区域点击事件
只能点击数据不为0的区域myChart.on('click',function(params){ var name = params.name; var seriesType = params.seriesType; console.log(name+"\n"+seriesType); console.log(params) //你的具体逻辑流程 })所有区域均可点击myChart.getZr().on('click', params => .
2020-09-23 16:54:31 1192
原创 Vue 切换路由后的页面不在顶部
在App.vue中,添加watch事件,监听路由变化,使滚动条复位watch: '$route': (to, from) => document.body.scrollTop = 0 document.documentElement.scrollTop = 0
2020-08-28 15:58:39 348
原创 vue中checkbox实现单选效果,且同时禁用其他选项
主要是判断禁用条件:有一个选项被选了且不是被选项<q-checkbox v-model="item.answer" :disable="checkedIndex!=key && checkedIndex!='reset'" @input="choose(key)"></q-checkbox>data: -> checkedIndex: 'reset'methods: choose: (key)->
2020-07-30 14:47:00 1785
原创 js数组排序、乱序总结
arr.sort()默认升序,可接受两个参数,返回值为正数则交换位置// 升序,返回值为-1arr.sort((a,b) => { return a-b })// 降序,返回值为1 arr.sort((a,b) => { return b-a })// 对象中根据属性值排序var arr = [ {name:'zopp',age:0}, {name:'gpp',age:18}, {name:'yjj',age:8}]fun
2020-07-01 16:32:12 469
原创 iView中的DatePicker日期选择控件(开始时间和结束时间约束,结束时间加一天)
iView中的DatePicker日期选择控件(开始时间和结束时间约束)前言:最近做项目需要用到日期选择控件,来做个总结,其中包括开始时间和结束时间的约束,直接上代码(Vue项目)实现效果图:template:<span class="item"> 检测时间: <DatePicker type="date" :options="startTimeOptions" @on-change="startTimeChange" placeholde
2020-06-29 18:02:27 2094
原创 js 常用字符串操作方法总结
前言:刚刚把数组方法总结完,继续总结一下字符串方法,方便自己以后查看,也希望可以帮到其他小伙伴哟~字符方法:charAt(index) & charCodeAt(index)定义: 返回指定索引的字符/unicode编码var str="hello world"; console.log(str.charAt(1));//e console.log(str.charCode...
2019-05-23 15:45:16 1942 1
原创 js 常用数组操作方法总结
前言:每次需要用到数组方法时,总是需要去百度,因为一些方法在一段时间不用就忘记了,所以来做个总结,方便自己以后查找,顺便加深一下记忆。创建/声明数组:方式一:var array = [3, 5, 2]; // [3,5,2]方式二:var array = Array(4,5,2); // [4,5,2]改变原数组的方法:var a = [1,2,3];ES5:a.p...
2019-05-22 16:53:58 852 1
原创 css -文字自动换行、强制换行、不换行
英文字母和数字自动换行: width: 200px; word-wrap: break-word;强制英文单词换行(断行): width: 200px; word-break: break-all;强制不换行: width: 200px; white-space: nowrap;小提示: 英文单词和汉字会自动换行哦~~...
2019-05-06 18:20:23 1663
原创 vue监听scroll事件
很小的功能,记录一下mounted() { window.addEventListener('scroll', this.handleScroll, true)},methods: { handleScroll: function() { console.log(window.scrollY) }}
2019-05-05 17:37:17 3129
原创 vue项目中引入jquery
安装jquerynpm install jquery在webpack.base.conf.js中加入一行代码var webpack = require("webpack")在webpack.base.conf.js中module.exports的最后加入这行代码plugins: [ new webpack.optimize.CommonsChunkPlugin('co...
2019-05-05 16:34:31 196
原创 CSS - 点击导航滑动到对应div
直接跳转,无滑动效果document.getElementById('about').scrollIntoView(false) //跳转到div底部document.getElementById('about').scrollIntoView(true) //跳转到div顶部利用jquery实现,有缓慢滑动效果var scrollOffset = $('#about')....
2019-05-05 16:23:42 1648
原创 css - 超出的文本显示为省略号
单行文本超出width: 5.75rem; //设置宽度overflow: hidden; //超出部分隐藏white-space: nowrap; //溢出不换行text-overflow: ellipsis; //溢出用省略号表示多行文本超出overflow: hidden;text-overflow: ellipsis;display: -webkit-box; /...
2019-04-12 13:33:10 155
原创 Vue2.0中使用swiper插件 vue-awesome-swiper 指南
网站需要做简单轮播效果,实现之后来总结一下。先附上参考的官方文档链接:https://www.npmjs.com/package/vue-awesome-swiper#custom-swiper-pluginnpm安装npm install vue-awesome-swiper --save在vue项目中的main.js中添加:import 'swiper/dist/css...
2019-04-11 11:36:12 1071
转载 js自适应不同屏幕分辨率
js自适应不同屏幕分辨率/**代码如下*其中的参数1080根据自己的实际情况进行修改,这里的1080代表设计页面的原始宽度,可以参考psd的标准宽度,这是后字体使用rem也有了标准,psd上的字号如:40点 对应css中的rem的换算方式为40/100=0.4rem。*/(function (doc, win) { var docEl = doc.documentElement,...
2019-04-11 10:32:50 2047
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人