- 博客(61)
- 收藏
- 关注
原创 Vuex —— mapState、mapMutations、mapActions的使用
【代码】Vuex —— mapState、mapMutations、mapActions的使用。
2023-03-06 11:04:09
525
原创 npm install 报错
安装依赖报错或者是报错python环境有误,解决:将npm 降级到6,node版本最好控制在14之下https://nodejs.org/download/release/v14.19.3/全局下,将npm降级npm install npm@6.14.10 -g查看版本node -vnpm -v
2022-05-30 12:43:24
289
原创 vue —— 在不安装脚手架情况下启动项目
vue —— 在不安装脚手架情况下启动项目要安装node.js可能会报错node-sass,如果是版本问题,下面操作可以解决,如果是node-sass版本与其他版本出现不适配的报错,主页其他文章中有解决方法1.切换到淘宝镜像npm install -g cnpm --registry=http://registry.npm.taobao.org2.初始化项目,生成node_modules文件告诉 NPM 忽略项目中引入的各个modules之间的相同modules但不同版本的问题并继续安装,保证各
2022-04-26 16:35:32
2483
原创 vue —— 项目启动时无法识别es6的扩展语法
启动项目报错解决ES6的拓展运算符报错1.切换淘宝镜像npm install -g cnpm --registry=http://registry.npm.taobao.orgcnpm install --legacy-peer-deps --save-dev babel-preset-stage-3cnpm install --legacy-peer-deps --save-dev babel-plugin-transform-object-rest-spread4.根目
2022-04-20 10:07:33
3771
原创 js —— 去重、排序基础总结
js去重、排序基础总结(持续更新)排序1)for循环排序——冒泡排序2)for循环排序——选择排序、相邻3)sort排序 —— 升降序排序去重1) for循环去重 —— splice()let arr = [1,4,2,2,8,4,5,9,10,8,4,6]2)indexOf去重3)es6 —— includes去重4)es6 ——set去重第一种,扩展运算符第二种,Array.from重点不可少...
2022-02-28 16:26:02
379
原创 vue —— 父组件同一时间多次调用子组件方法
子组件方法 child.vue<div>{{msg}}</div>props: { msg: { type: String, default: '' }},methods: { getData () { console.log(msg) }}父组件 fa.vue1.引入子组件import child from './child'data () { return { list: [ { msg: 'hhhh', in
2021-12-23 16:55:34
2634
原创 vue —— 火狐浏览器不支持时间格式
问题描述vue项目中出现路由跳转param传值,传的时间字符串,但是页面使用时this.$route.params取出时间字符串时,获得内容NAN,以为是火狐浏览器params传值不行,换成query传值也是不行的原因火狐浏览器时间字符串只支持yyyy/mm/dd格式,而我传的字符串是yyyy.mm.dd格式...
2021-12-14 14:22:51
1211
原创 vue —— async...await
async…awaitasync用于声明function 是异步的,await用于等待异步方法的执行完成单单使用async,return出的返回值是个Promise对象async Func () { return 'hello word'}Func().then(res => { console.log(res)} // hello word1)关于async…await 我自己的项目中经常用于接口调用时获取数据async Func () { const { data } =
2021-12-06 11:13:56
629
原创 vue —— api、axois封装
结构模块中各个api文件引用base.js、http.js中的方法api.js中引用模块中各个api文件,并使用exports导出base.jsvue代理路由地址// 接口域名管理const base = { apiUrl : 'http://192.100.100.135:1001'}export default basehttp.jsvue路由处理,axois封装、路由拦截器,使用了element UI中的全局loading方法,不加loading的也有import Vue
2021-11-04 10:01:04
262
原创 vue —— 调用浏览器复制方法
vue —— 调用浏览器复制方法原生<el-button type="text" @click="copy(‘里面传想要复制的内容’)">复制</el-button>// 复制 info 为传入的内容 copy (info) { let createInput = document.createElement('input') createInput.value = info document.body.appendChild(createInpu
2021-10-25 14:48:46
634
原创 vue——数字加逗号分隔
带小数的数字三位一分隔filters: { num: (val, fix = 2) => { val = val.toFixed(fix) // 保留小数2位 val = '' + val // 转换成字符串 let int = val.slice(0, fix * -1 - 1) // 获取整数 let ext = val.slice(fix * -1 - 1) // 获取到小数 int = int.split('').reverse().j
2021-10-18 09:34:37
4094
1
原创 vue——微信二维码显示vue-qr/qrcodejs2
微信二维码之vue-qr/qrcodejs2 区别vue-qr弊端:当后端微信返回二维码,不兼容IE浏览器npm install vue-qr --savemain.jsimport vueQr from 'vue-qr'Vue.use(vueQr)<vue-qr :text="qrCode" :margin="0" colorLight="#fff" :logoSrc="require('./../../assets/wpay.svg')" :logoScale="0.2" :si
2021-10-08 10:05:58
868
原创 swiper——异形swiper中最后一个元素无法使用点击事件
swiper——异性swiper中最后一个元素无法使用点击事件1.原因swiper异性中使用了loop:true属性,循环,但是元素总共就那几个,swiper循环时会复制前后元素,但是只复制元素,不复制事件,导致最后一个元素渲染成功,但是无法使用事件表现在:点击左边这个圆圈其实是切换到了最后一个轮播元素,点击事件失效,但是向右点击到该轮播元素点击事件正常2.解决因为渲染的元素存在,可以将事件绑定在dom节点上,而我使用的方法是比较笨的一种,但是很有效果,点击事件要加在图中按钮中,内容比较隐私,没什
2021-09-16 11:55:20
1719
原创 swiper——vue页面配合显示隐藏渲染两个轮播插件
swiper——vue页面配合显示隐藏渲染两个轮播插件问题:显示隐藏项目中使用vue v-show控制轮播盒子不同渲染,但是会出现第一次点击,轮播插件显示出现错误,具体表现为轮播子元素只剩下一个,且为缩小状态,需要多次切换显示轮播才能正常显示解决: this.$nextick()1.注意两个轮播盒子要使用不同的父元素,swiper-container不能用做最外层盒子2.切换显示隐藏方法需要调用加载swiper方法3.使用this.$nextTick()方法防止swiper方法初始化出现问题
2021-09-13 17:03:41
792
原创 element——vue封装弹窗及注意事项
element——vue封装弹窗及注意事项可在每页写单独样式或在封装文件中写统一样式1. 弹窗脚部取消按钮可隐藏,2. 按钮可实现loading效果,3. 弹窗标题、脚部按钮内容、弹窗宽度都可以自定义第一种方法弊端:弹窗插件点击确定会默认调取弹窗右上角关闭事件,所以有时候关闭方法中的内容会替换确定方法中的内容,导致确定方法中调取接口时数据错误1.1 封装<template> <div class="all-dialog2"> <el-dia
2021-09-08 10:41:02
1972
2
原创 Vuex——数据持久化
vuex-persistedstate1.终端安装插件npm install vuex-persistedstate --save2.store文件引入import Vue from 'vue'import Vuex from 'vuex'import app from './modules/app'import user from './modules/user'import tagsView from './modules/tagsView'import permission fro
2021-07-28 16:57:28
466
原创 js——正则归纳 (持续更新)
输入框只能输入正数和小数点<input @keyup="this.value = this.value.replace(/[^0-9.]/g, "").trim()">输入框只能输入正数或两位小数<input @keyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''">...
2021-07-21 14:04:13
127
原创 Vue——url下载图片文件(cavans)
Vue——url下载图片文件(cavans)记录项目中下载图片方式,这个方法不会在当前页打开而且兼容1.方法// 下载图片 phoneDown (imgsrc, name) { //下载图片地址和图片名 let image = new Image() // 解决跨域 Canvas 污染问题 image.setAttribute('crossOrigin', 'anonymous') image.onload = function() { let
2021-07-16 17:28:55
1751
1
原创 vue——scss变量全局使用
vue——scss变量全局使用1.终端安装sass-resources-loadernpm install sass-resources-loader --save2.vue.config.js注册最重要,不然报错SassError: Undefined variable.module.exports = { outputDir: 'ts-platform', css: { loaderOptions: { sass: { prependData: '
2021-07-12 11:22:48
624
原创 兼容ie——下载base64pdf格式文件
dataURLtoBlob (dataurl) { const bstr = atob(dataurl) let n = bstr.length const u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new Blob([u8arr], { type: 'pdf' }) },// 兼容ie浏览器写法const URL = this.dataU
2021-06-17 11:01:48
948
原创 Vue——按钮防抖
Vue——按钮防抖按钮多次点击,只执行点击动作完成的一次事件触发1.创建util/once.js文件export const Debounce = (fn, t) => { const delay = t || 500 let timeout return function () { const context = this const args = arguments if (!timeout) { timeout = setTimeout(()
2021-05-21 13:25:44
797
原创 vue——base64图片转网络URL
vue——png图片base64解码// dataurl: 'XXXXXXXX' // base64编码imgUrl: '' // 图片路径// methodsbase64ImgtoFile (dataurl, filename = 'file') { const arr = dataurl.split(',') const mime = arr[0].match(/:(.*?);/)[1] const suffix = mime.split('/')[1]
2021-04-26 13:04:26
7212
原创 vuex——计算属性获取的getter值需要刷新才能更新
vuex——计算属性获取的getter值需要刷新才能更新描述: // state state: { leader: null }, // getters getters: { getLead: state => state.leader } // mutations mutations: { setLead (state, data) { state.leader = data } },// 页面中赋值// 登录时改变state.le
2021-03-31 11:17:22
2197
原创 PC项目——vue 脚手架中实现阿里云人机滑动验证
转自๑柯帆๑找半天才找到这个可用的 vue 脚手架中实现阿里云人机滑动验证描述:照官网写的引入方式引入vue报错 AWSC is not define解决:.html文件引入script标签后<!-- 阿里滑块 --><script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>在使用滑块的页面中需要再引入一遍script,大概是在页面内容之前要先加载该功能的资源吧<script type
2021-03-26 15:06:25
1541
原创 js——纯js模拟双向数据绑定
js——纯js模拟双向数据绑定是不是很多人只是知道双向数据绑定的实现效果,并不知道其原理,或是知道其原理并不明白的,使用js模拟一个简单的双向数据绑定案例吧,就会变得容易理解Object.defineProperty()vue双向数据绑定的原理就是它了html:<div class='box'> // input输入框最能体现双向数据绑定的效果了 <input type='text' id='txt' /> // 输入内容会同步显示在这里 <p i
2021-03-19 15:31:42
927
原创 ie浏览器兼容——scrollTop
ie浏览器兼容——scrollTop报错无法获取未定义或 null 引用的属性“scrollTop”解决polyfill document.scrollingElement.jshttps://github.com/yangg/scrolling-elementnpm install scrolling-element --save页面或main.js中引入import 'scrolling-element'或.html文件引用<script src="scrolling-e
2021-03-16 11:49:25
487
原创 swiper——轮播slider最后一个元素显示不全
轮播slider最后一个元素显示不全,能拖出来,松手弹回去slidesPerView: ‘auto’,重要的属性设置,有的人说要给slider元素设置宽高,或者去掉所有的padding,但是slidesPerView: 'auto’设置过后会使轮播元素长度呈现一行无限滑动效果,最终在轮播初始化中设置固定宽度width,这个宽度要自己调试的,可能不是铺满。const swiper = new Swiper('.swiper-container', { slidesPerView: 'aut
2021-02-20 16:36:54
3150
原创 element——表单的复杂数组渲染
element——表单的数组渲染及校验(vue)常见表单渲染及校验<template> <div class='test'> <el-form ref="form" :model="form" :rules="rules"> <el-form-item label="活动名称" prop='name'> <el-input v-model="form.name"></el-input> </e
2021-02-08 16:31:41
813
原创 element——时间选择器当天之后,后一选择器时间不超过前时间选择器
element——时间选择器当天之后,后一选择器时间不超过前时间选择器 <el-date-picker type="date" placeholder="请选择" v-model="startTime" :picker-options="pickerOptions" value-format="yyyy-MM-dd"></el-date-picker> <el-date-picker type="date" placeholder="请选择"
2021-01-21 13:21:48
817
原创 elementui——带建议的输入框远程搜索
```javascript<el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect"></el-autocomplete><script> export default { data() { return { restaurants: [],.
2021-01-14 17:24:57
1148
原创 报错笔记——serve : “vue-cli-service serve“
报错笔记——serve:“vue-cli-service serve”项目运行编译时报错如图所示,网上搜的删除node_modules并重新npm install根本没有用;原因:node版本过高,出现不兼容解决办法:卸载当前node,并安装v10及以下版本,删除node_modules文件,命令行npm install 重新运行编译npm run serve即可所有node版本入口node版本入口下载msi版本可自动添加path配置...
2020-12-22 17:32:33
1461
原创 循环遍历的区别
循环遍历的区别forEach直接循环数组,没有返回值for循环数组,对数组的每一项进行加工,并返回一个新的数组filter循环并过滤数组,得到想要的内容let arr = [1,2,3,4,5,6,7,8,9];arr.filter((item,index)=>{ if(item % 2 == 0){ //偶数 retrun true //返回true(留下偶数) }else{ //奇数 return false
2020-10-27 14:41:24
1436
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人