- 博客(28)
- 收藏
- 关注
RSS订阅原创 vue3 如何封装函数实现vuex的功能
vue3 如何封装函数实现vuex的功能1、首先封装一个ts文件，导出自定义的useMyStore方法，里面包含自定义的state和actionimport { reactive } from 'vue'interface stateInterface { font: string}// 定义state，存储变量const state = reactive<stateInterface>({ font: '111'})function updateFont(val:
2021-12-31 17:17:25
655
原创 webstorm控制台中文乱码解决
webstorm控制台中文乱码解决点击这里，会打开一个配置文件，在最下面加一行代码-Dfile.encoding=utf-8再重启webstorm就ok了
2021-07-12 15:30:33
3454
2
原创 axios如何取消已经发送的请求
axios如何取消已经发送的请求有时候接口请求很慢，会导致一些问题，比如想请求第四条数据的内容，但是请求回来的却是第一条数据，我们要把前三条请求停止axios文档给出了取消请求的方法import ax from 'axios'var CancelToken = ax.CancelTokenexport const searchInfo = (data) => { return axios.request({ url: baseUrl + 'dmErpFetchInfo/sea
2021-06-28 18:25:26
569
原创 Vue如何直接打开public文件下的pdf文件
Vue如何直接打开public文件下的pdf文件1、在vue.config.js里面配置module.exports = { outputDir: 'manager', // 构建输出目录 assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts) lintOnSave: false, // 关闭eslint productionSourceMap: true, publicPath: '/manager/', //public文件目录
2021-06-18 18:52:43
2061
2
原创 vue如何写一个宫格
vue如何写一个宫格实现一个简单的效果，点击哪个div就让他的边框变红<div class="test"> <div class="small" v-for="(item,index) in list" :key="index" :class="index===ind?'active':''" //被激活的div加上active样
2021-06-08 15:54:06
502
原创 vue实现一个简单的表情包组件
vue实现一个简单的表情包组件创建一个emoji的数组js文件，将这个数组导出，引入到vue组建中，本文最下面有完整的代码var emojiArr = [ { name: '热门', iconArr: [{ className: 'bg-1f4b0', icon: '????' }, { className: 'bg-1f604', icon: '????' }, { className:
2021-04-01 18:01:20
3414
1
原创 vue中双大括号替换的简单原理
Vue中双大括号解析的简单原理Vue中主要思路思路就是三步：获取所有节点找到所有 {{ }} 的节点替换 {{ }} 的内容我们这里就简单一点，替换一个节点就可以了，我们先定义一个类似Vue的data对象。<body><h1>{{user.name}}的数学成绩为{{user.test.math}}</h1><script> // 模仿Vue中的data属性，为一个对象 let data={ word:'he
2021-03-17 17:04:58
4435
原创 Vue如何阻止鼠标的滚动事件
Vue如何阻止鼠标的滚动事件preventMove（）{ let flag=true if (flag) { // 阻止滚轮滚动 document.addEventListener('mousewheel', this.hander, false) } // 取消滚轮禁止滚动 else { document.removeEventListener('mousewheel', this.hander, false)
2021-01-18 11:31:59
1833
原创 vue如何通过滚动条滚动来获取滚动的距离
vue如何通过滚动条滚动来获取滚动的距离 let element = document.getElementsByClassName('el-popper')[0] //根据类名来获取该节点 window.addEventListener('scroll', () => { let scrollTop = document.body.scrollTop //获取当前滚动条距离顶部的距离 console.log(scrollTop ) //
2021-01-15 11:39:06
2201
原创 iview的Select多选框选择“不限”清空其他选项
iview的Select多选框选择“不限”清空其他选项需求如下，当选择不显得时候，清空其他选项，只留下不限选项，选择其他选项的时候，删除不限选项，可多选。1、给下拉框绑定一个一个on-change事件...
2021-01-15 09:54:33
1342
1
原创 iview下拉框参数如何加入自定义参数
iview下拉框参数如何加入自定义参数 <Select v-model="adForm.fruits" class="adStyleLeft" @on-change="fruitsChange"> <Option value="0">香蕉</Option> <Option value="1">橘子</Option>
2021-01-12 18:10:09
804
原创 iview输入框如何防止输入框输入sql语句和Js语句
iview输入框如何防止输入框输入sql语句和Js语句<FormItem label="名称：" prop="name"> <Input v-model="adForm.name" placeholder="请输入名称" @on-blur="getBlurValue($event, 'name')"> </Input></FormItem>绑定一个on-bl
2021-01-12 16:22:02
333
原创 Vue如何监视屏幕尺寸变化
Vue如何监视屏幕尺寸变化1、在data中定义一个值记录屏幕尺寸data(){ return{ screenWidth: null, //屏幕尺寸 }}2、页面获取屏幕尺寸的值mounted () { this.screenWidth = document.body.clientWidth window.onresize = () => { //屏幕尺寸变化就重新赋值 return (() => { this.screenW
2021-01-11 09:42:12
5897
原创 js通过Moment.js让数值秒值和时分秒格式相互转化
js通过Moment.js让数值秒值和时分秒格式相互转化1、把时分秒格式转化为数值型的秒值<script src="https://momentjs.com/downloads/moment.js"></script><script> let time=moment.duration('01:01:01').as('seconds') console.log(time) //3661</script>2、把数值型的秒值转化为时分秒格式<
2021-01-08 11:55:22
12032
原创 iview表单验证动态删减表单项小红点的问题
iview表单验证动态删减表单项小红点的问题本身验证规则如上图，但是根据广告类型动态修改了表单项后会发现表单验证会出问题。我们会发现权重这一项前面莫名多了一个验证的小红点。解决办法很简单，给动态删减的表单项添加一个key属性即可，key的值随意，不重复就好 <FormItem label="创意类型：" key="ad1"> <Select v-model="adForm.creativeType"> <Option value=
2020-12-30 11:18:05
778
原创 VueX分了模块如何使用
VueX分了模块如何使用1、创建一个js文件，命名为ad的一个VueX的子模块import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const ad= ({ namespaced: true, //定义命名空间，防止冲突 state: { adStyleShow : true }, mutations: { setAdStyleShow (state,flag) { state.adStyl
2020-12-30 10:44:14
777
原创 iview如何在表单lable中添加icon图标
iview如何在表单lable中添加icon图标需求如下图，要在label后面加一个icon图标。首先查看iview中的icon，检查元素，可以看到 font-family: Ionicons 和content: “\F107”，等会儿要用。接下来可以用css的after选择器添加icon图标。<FormItem label="计划位置" class="labelIcon"> <Select> <Option value=
2020-12-24 10:50:45
2217
2
原创 day.js如何显示成中文格式的时间
day.js如何显示成中文格式的时间 let d=dayjs().format("YYYY[年]-MM[月]-DD[日]") //要自定义字符需要加中括号 console.log(d) //2020年-12月-14日
2020-12-14 20:18:13
4929
1
原创 微信小程序如何实现搜索框的防抖功能
微信小程序如何实现搜索框的防抖功能1、首先给输入框绑定一个bindinput事件，只要输入框内的值改变就会触发该函数 <input placeholder="请输入您要搜索的内容" bindinput="handleInput" > </input>2、定义一个变量timer，该值为定时器的返回值，作用是方便等会儿清除定时器。3、在handleInput函数中先清除定时器，然后再设置一个定时器，发送请求，就实现了防抖功能。timeId:0，//
2020-12-07 15:47:34
1333
1
原创 微信小程序如何使用async和await
微信小程序如何使用async和await首先微信小程序不支持ES7的语法，在新版的小程序开发工具中你需要勾选增强编译选项才可以使用。我想到的是直接在方法前面加一个async，然后await接受参数,打印参数试试。onLoad:async function () { const data=await wx.request( { url: 'url地址' } ) console.log(data)
2020-12-03 10:53:39
4065
原创 解决ElementUI动态编辑标签点击一个其他行的标签也展开的问题
解决ElementUI动态编辑标签点击一个其他行的标签也展开的问题我们发现在点击某一个New Tag 按钮的时候，所有行的New Tag都展开了，这是因为我们绑定的属性有问题。<template slot-scope="scope"><el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.en
2020-11-27 16:55:52
1068
5
原创 vue实现返回列表页面仍然在之前的位置
vue实现返回列表页面仍然在之前的位置1、使用Vue中的标签包裹列表组件。<div id="app"> <keep-alive> <router-view/> </keep-alive></div>因为我们在加载数据时一般都是在created生命周期函数中加载，所以只要重新回到列表页面就会触发created生命周期函数中的加载数据方法。<keep-alive> 包裹动态组件时，会缓存不活动的组
2020-11-24 14:04:09
822
原创 axios提交文件类型的参数
axios提交文件类型的参数如果后台接口要求 Content-Type 是 multipart/form-data，则一定要提交 FormData 数据对象，专门用于文件上传的。const fd = new FormData()fd.append(‘属性名’, 属性值)最后参数提交 axios.post(‘url地址’,fd)...
2020-11-23 19:38:17
779
原创 基于Vue实现头像选择预览
基于Vue实现头像选择预览需求是点击头像这一栏可以弹出选择文件的弹出框。1、首先添加一个input输入框，将其隐藏，设置一个accept属性，说明只选择图片，并且绑定ref属性方便原生dom操作<input type="file" hidden accept="image/*" ref="fileRef">2、在头像这一栏中添加一个点击事件，弹出选择文件的弹框<van-cell title="头像" is-link center @click="$refs.fileRe
2020-11-23 19:21:35
1336
原创 字符串中替换所有指定字符的方法
字符串的替换方法JS中字符串的替换方法：如果需要全局替换，使用正则表达式/g如果被替换的字符串是一个变量该如何使用正则表达式呢？若要使用变量，则需要创建一个正则表达式对象new RegExp（）JS中字符串的替换方法：let str = 'abcabcabc'str = str.replace('a', 'd')console.log(str)得到结果为 ‘dbcabcabc’，只将第一个a字母替换为了d。如果需要全局替换，使用正则表达式/glet str = 'abcabcabc'str
2020-11-19 20:41:24
15241
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人