G_大侠-CSDN博客

原创 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 3257

原创 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 412

原创 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 263

原创 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 608

原创 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 643

原创 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 1143

原创 Vue 切换路由后的页面不在顶部

在App.vue中，添加watch事件，监听路由变化，使滚动条复位watch: '$route': (to, from) => document.body.scrollTop = 0 document.documentElement.scrollTop = 0

2020-08-28 15:58:39 333

原创 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 1733

原创 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 448

原创 iView中的DatePicker日期选择控件（开始时间和结束时间约束，结束时间加一天）

iView中的DatePicker日期选择控件（开始时间和结束时间约束）前言：最近做项目需要用到日期选择控件，来做个总结，其中包括开始时间和结束时间的约束，直接上代码（Vue项目）实现效果图：template：<span class="item"> 检测时间： <DatePicker type="date" :options="startTimeOptions" @on-change="startTimeChange" placeholde

2020-06-29 18:02:27 2069

原创 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 1867 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 812 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 1641

原创 vue监听scroll事件

很小的功能，记录一下mounted() { window.addEventListener('scroll', this.handleScroll, true)},methods: { handleScroll: function() { console.log(window.scrollY) }}

2019-05-05 17:37:17 3103

原创 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 164

原创 CSS - 点击导航滑动到对应div

直接跳转，无滑动效果document.getElementById('about').scrollIntoView(false) //跳转到div底部document.getElementById('about').scrollIntoView(true) //跳转到div顶部利用jquery实现，有缓慢滑动效果var scrollOffset = $('#about')....

2019-05-05 16:23:42 1622

原创 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 146

原创 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 1030

转载 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 2018

G_X73的博客