- 博客(23)
- 收藏
- 关注
RSS订阅原创 vue2使用 tinymce富文本编辑器-图片上传、粘贴图片上传致服务器
vue2 - tinymce 富文本编辑使用，图片上传、粘贴图片上传致服务器
2023-07-10 10:58:15
3004
1
原创 vue项目-注册校验,校验密码长度不能小于8位且不能大于20位字符,必须包含大写字母、小写字母、数字和特殊符号
vue,注册校验,校验密码长度不能小于8位且不能大于20位字符,必须包含大写字母、小写字母、数字和特殊符号
2022-09-21 10:27:56
3626
原创 vue项目 v-for循环数据，鼠标移入移出改变颜色
// 1.data中声明变量// 2.通过对应下标给class类名// 3.鼠标移入把当前index赋值给data中声明的变量<template> <div v-for="(item,index) in orgSource" :key="item.code" > @click="lookorgDetail(item,index)" @mouseover="dowmloadover(index)" // 鼠标移入
2021-12-31 10:25:37
3091
原创 Ant Design vue之table表格序号自增-添加图标
<span slot="rowIndex" slot-scope="text, record, index"> <span>{{ rowIndex(text, record, index) }}</span> <img src="~@assets/fileimg/newActivity.png" alt=""> </span><script> columns3: [ { tit
2021-11-24 15:39:09
1514
原创 swiper和vue-awesome-swiper竖向滚动，自适应高度解决方案
vue-awesome-swiper 版本：4.1.1swiper版本：5.4.5需求：项目中需要竖向滚动文字，只显示1条，但是每条数据内容不一样，所以高度不能写死，需要自适应高度，进行循环滚动1.安装对应的版本2.在需要的组件里引入使用<template> <swiper :options="swiperOption2"> <swiper-slide> <p> 这是第一张图这是第一张图这是第一张图这是第一
2021-08-20 15:46:09
5308
原创 简洁js代码片段
空值合并运算符（??）如果没有定义左侧返回右侧，有，返回左侧 let may; if(may) { console.log(may) } else { console.log('123') } console.log(may ?? 'Nothing found')2.可选链（?.）在未定义属性时使用可选链运算符，undefined将返回而不是错误。这可以防止代码崩溃const student = { name:.
2021-08-05 10:33:29
115
原创 ant design vue日期选择器默认初始值加校验踩坑记录
项目需求：form表单提交日期选择器，开始日期默认初始值为当天，截止日期默认初始值为本月最后一天，且不可选择当日之前的时间，提交表单需要校验。// 正确代码<template> <a-form :form="form"> <a-form-item label="开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol" > <a-date-picker
2021-07-23 15:01:45
2801
原创 vue中插槽（匿名插槽、具名插槽、作用域插槽）
slot的理解：是‘占位符’，在组件模板中占好了位置，当使用该组件标签的时候，组件标签里面的内容就会自动填充（替换组件模板中的位置）首先准备两个组件：Father.vue和children.vue组件在Father.vue组件中引入children.vue组件<script>import Children from '../components/children.vue'export default { components:{ Children }}
2021-05-08 18:14:05
295
原创 防抖与节流
本质上防抖和节流都是优化高频率执行代码的一种手法如浏览器的resize、scroll、mousemove、keypress等事件在触发时，会不断的调用绑定在事件上的回调函数，极大的浪费资源，降低前端性能为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用throttle（节流）和debounce（防抖）的方式来减少调用频率节流：n秒内只运行一次，若n秒内重复触发，只有一次执行//节流 简单的代码实现//回调函数 以及时间 function throttle(fn,delay){
2021-05-06 20:27:03
100
原创 keep-alive缓存组件
keep-alive是一个抽象组件：他自身不会渲染一个DOM元素，也不会出现在父组件链中，使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们keep-alive的属性：include：包含，定义缓存白名单，该属性里定义的组件会被缓存exclude：定义缓存黑名单，该属性定义的组件将不会被缓存1.第一种写法<keep-alive include="artice,user" exclude="type"> <router-view></r
2021-04-28 11:40:16
253
原创 qrcode实现生成二维码
1.安装qrcodenpm install qrcode --save–dev2.在需要实现二维码的组件中或者main.js中引入<template> <canvas id="QRCode_header"></canvas></template><script>//引入qrcodeimport QRCode from 'qrcode'export default { data(){ return { QRCodeMs
2021-04-24 19:46:42
3519
原创 vue-router传参的四种方式
1.router-link1.不带参数<router-link :to="{name:'home'}"<router-link :to="{path:'/home'}"//router-link中链接如果是'/'开始就是从跟路由开始，如果开始不带'/',则从当前路由开始2.带参数<router-link :to="{name:'home',params:{id:1}}">//params传参数（类似post）//路由里面配置path:"/home/:id" 或者 pa
2021-04-23 17:10:43
9670
原创 axios请求后端数据（post请求）qs序列化
安装qsnpm install qs --save 命令进行安装1.qs.parse() 将url解析成对象的形式2.qs.stringify() 将对象序列化成url的形式，以&进行拼接qs.string() 和 JSON.stringify()的区别var a = { name:"小明", age:20}1.qs.stringify序列化结果： name=小明&age=20 2.JSON.stringify的结果是： "{"a":"小明","age":20}"
2021-04-22 14:37:46
2143
原创 vue使用vue-amap插件（高德地图插件实现定位、搜索、marker标记点）
实现简单功能记录一下，有问题的话麻烦指出谢谢！需求：进入地图定位当前位置，并标记，点击位置显示标记点，上一个标记点消失，搜索框输入地址，显示位置并标记。1.在高德开发者平台申请key；2.安装vue-amap；npm install vue-amap --save3.在项目main.js中引入vue-amapimport VueAMap from 'vue-amap'; //引入高德VueAMap.initAMapApiLoader({ key: '写入申请的key', //插
2021-04-20 19:24:35
14636
12
原创 vue实现数据双向绑定原理
MVVM：双向数据绑定，指数据层（Model）-视图层（View）-数据视图（ViewModel）的响应式原理。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数3、实现一个Watcher，作为连接Observer和Compi
2021-04-19 14:19:00
136
原创 柯里化函数
//柯里化函数//还不严谨function cc(){ let arr = [...arguments] function add(){ arr.push(...arguments) return add //需要返回值，调一次返回一次 }; //求值 add.toString= function (){ ret
2021-04-18 11:27:54
68
原创 封装微信小程序request请求
//创建一个js文件 抛出export const getRequest = (url, data = {}) => { wx.showLoading({ title: "加载中" }) return new Promise((resolve, reject) => { wx.request({ url, //仅为示例，并非真实的接口地址 data, //data为对象 method: "get", succe
2021-03-29 19:22:11
145
原创 es6 let命令和const命令
es6 let命令和const命令1.let和const声明的变量，只在声明所在的块级作用域{}内有效。for(let i = 0; i < 10; i++){console.log(i)//0,1,2,3,4,5,6,7,8,9} console.log(i) //Uncaught ReferenceError: i is not defined2.const声明一个只读的常量。一旦声明，常量的值就不能改变const a = 3console.log(a) //3a =
2020-10-29 20:29:25
228
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人