- 博客(68)
- 收藏
- 关注
原创 element Notification 通知内的内容添加 Tooltip 文字提示
【代码】element Notification 通知内的内容添加 Tooltip 文字提示。
2023-08-04 16:45:58 241
原创 <el-upload>组件不限制上传文件时安卓手机在微信或浏览器直接打开文件夹,没有调起手机本身询问打开拍照还是文件的弹窗
组件不限制上传文件时安卓手机在微信或浏览器直接打开文件夹,没有调起手机本身询问打开拍照还是文件的弹窗
2022-06-15 09:55:10 935
原创 vue+elementUI MessageBox 弹框自定义弹窗样式
vue+elementUI MessageBox 弹框自定义弹窗样式vue+elementUI MessageBox 弹框自定义弹窗样式vue+elementUI MessageBox 弹框自定义弹窗样式效果:代码:beforeRouteLeave(to, from, next) { // 监听路由离开时弹出弹窗是否需要保存资料的功能 const h = this.$createElement; setTimeout(() => { // 这里加个定时器可以避
2022-03-21 11:29:33 2618
原创 标签拖拽功能vuedraggable
标签拖拽功能vuedraggable1安装npm i -S vuedraggable代码:<!-- 自定义导出 --><template> <div class="site-container ml-0"> <div class="main-site-card search-bar main-site-card-base"> <div class="top-bar"> <el-button p
2022-03-17 15:19:47 799
原创 VuePress + Github Pages 搭建静态博客页面
VuePress + Github Pages 搭建静态博客页面VuePress + Github Pages 搭建静态博客页面VuePress + Github Pages 搭建静态博客页面VuePress + Github Pages 搭建静态博客页面
2022-01-05 11:24:43 263
原创 vant 实现的步骤条
效果图:上代码: <div class="group-div-active"> <div class="item-group item-group-1"> <div class="icon-div"> <van-icon class="iconfont icon-wancheng" size="30" /> <van-progress
2021-12-24 12:09:54 2080 3
原创 vue 实现的图片上传裁剪功能
vue实现的图片上传裁剪功能vue实现的图片上传裁剪功能vue实现的图片上传裁剪功能效果图:代码:1.先安装:npm install vue-cropper 或者 yarn add vue-cropper2.组件代码:<!-- ImageCropper封面上传裁剪组件 --><template> <div> <div v-loading="loading"> <label> <slot
2021-12-24 10:39:05 636
原创 Element 修改el-tooltip样式和文字过长换行显示
Element 修改el-tooltip样式和文字过长换行显示Element 修改el-tooltip样式和文字过长换行显示Element 修改el-tooltip样式和文字过长换行显示 <el-tooltip placement="top" popper-class="new-tooltip"> <div slot="content">工程项目名称2很长很长很长很长很长很长很长很长很长很长很长很长很长很长</div> <
2021-11-19 11:11:14 1625
原创 Element UI简单修改主题色
Element UI简单修改主题色Element UI简单修改主题色Element UI简单修改主题色步骤:1.新建element-variables.scss 文件/*Write your variables here. All available variables can befound in element-plus/packages/theme-chalk/src/common/var.scss.For example, to overwrite the theme color:*
2021-11-19 10:57:57 1674
原创 Element 的Select 选择器根据选项内容自适应宽度
Element 的Select 选择器根据选项内容自适应宽度Element 的Select 选择器根据选项内容自适应宽度Element 的Select 选择器根据选项内容自适应宽度效果:选择前选择后:上代码: <el-select v-model="value" placeholder="请选择" :style="{width:minWidth+'px'}"> <el-option v-for="item in options" :key="i
2021-11-04 17:18:08 3039
原创 VUE+Vant实现的分享复制功能组件
VUE+Vant实现的分享复制功能组件VUE+Vant实现的分享复制功能组件VUE+Vant实现的分享复制功能组件<!-- PlatformShare调用平台分享功能 --><template> <div class="share-img" @click="shareFun"> <input type="text" id="copy" v-model="linkAdress" /> <img src="@/assets/imag
2021-10-29 10:32:18 1386
原创 Vant Ui遇到的问题总结
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2021-09-25 11:06:24 763
原创 Vue+element 关于表单的一些问题
Vue+element 关于表单的一些问题问题1:新增和编辑功能共用同一表单时,先编辑赋值回显,关闭表单后再打开新增时,会发现 this.$refs.[formName].resetFields()无效,即回显的内容在新增的表单内并没清空解决办法:在赋值的时候使用(赋值时注意深浅拷贝的问题) this.$nextTick(function() { //关键使用this.$nextTick this.Form = res //这里赋值 })或者使用 setTimeou
2021-08-28 10:48:06 177
原创 js对象数组(JSON) 根据某个共同字段 分组
这里写目录标题js对象数组(JSON) 根据某个共同字段 分组js对象数组(JSON) 根据某个共同字段 分组希望的是将下面的对象数组:[ {"id":"1001","name":"值1","value":"111"}, {"id":"1001","name":"值1","value":"11111"}, {"id":"1002","name":"值2","value":"25462"}, {"id":"1002","name":"值2","value":"23131
2021-05-06 18:16:21 300
原创 Vue项目打包后解决浏览器前端资源缓存的问题
Vue项目打包后解决浏览器前端资源缓存的问题Vue项目打包后解决浏览器前端资源缓存的问题解决方案:Vue项目打包后解决浏览器前端资源缓存的问题1.问题:造成资源缓存的问题是因为打包后的资源的文件名没有改变2.解决问题,每打包一次都修改一次文件名,每次保持唯一性的文件名,保证不与历史文件名重名解决方案:1.在build文件夹下的webpack.prod.conf.js添加:const version = new Date().getTime(); //声明一个时间戳的命名,保证唯一性2.将o
2021-04-06 19:05:30 1237
原创 Vue Element多层循环Form表单动态添加校验规则
Vue Element多层循环Form表单动态添加校验规则Vue Element多层循环Form表单动态添加校验规则Vue Element多层循环Form表单动态添加校验规则效果如下:校验效果:直接源码:(源码里样式自己重新写,该删删),主要是验证规则的写法:一级写法: :prop="‘levelOne.’+indexOne+ ‘.value’"二级写法: :prop="‘levelOne.’+indexOne+’.levelTwo.’+indexTwo + ‘.value’"配置的规则是
2021-03-10 16:32:59 1032
原创 vue ElementUI实现的记事日历
vue ElementUI Calendar calendar日历一.vue ElementUI实现的记事日历二.vue ElementUI实现的考勤日历
2021-01-27 18:15:29 4402
原创 ElementUI DateTimePicker 组件用法
ElementUI DateTimePicker 组件用法ElementUI DateTimePicker 日期时间选择器时间选择时间精确到时分,不要秒ElementUI DateTimePicker 日期时间选择器日期可用,限制时间选择选择范围ElementUI DateTimePicker 日期时间选择器时间选择时间精确到时分,不要秒效果如下:时间选择部分只选到时分,没有秒代码如下: <el-date-picker v-model="automaticFo
2021-01-15 15:51:23 3376
原创 ElementUI框架 el-input和el-select组件失焦问题
ElementUI框架 el-input和el-select组件失焦问题ElementUI框架 el-input和el-select组件失焦问题ElementUI框架 el-input和el-select组件失焦问题el-input,el-select添加filterable属性后,如果都是打开一个弹窗页面,这两个组件的焦点事件并没有取消,就会出现如下问题(就是选择的下拉框会和弹窗同在一个z-index上,都是因为没有失焦引起的,Bug重现步骤:el-select添加filterable属性,选择值后,
2021-01-08 16:14:56 6158 4
原创 vue element-ui项目icon有限,引入阿里矢量图标库icon图标并使用
vue element-ui项目icon有限,引入阿里矢量图标库icon图标并使用1.登录阿里矢量图标库https://www.iconfont.cn2.选择自己需要的icon图标,如果icon是自己需要的,但是颜色不是自己所需的,先不要慌,直接加入购物车先3.选完后点击右上角的购物车图标,会看到购物车内的所有icon4.点击“添加至项目”(选择已创建的项目或者新建)5.可以添加到已有的项目或自己新建的项目(这里演示新建的项目)。填写项目名称6.完成后可以在项目内看到刚添加的icon,而
2020-12-30 15:49:47 482
原创 vue element-ui表格的滚动条样式修改
vue element-ui表格的滚动条样式修改默认element-ui table固定表头或列时,当表列过多出现滚动时,滚动条效果如下,效果不是很好看(个人感觉)修改前效果:修改后效果:满意度加加直接加全局代码样式修改就可以了/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/::-webkit-scrollbar { width: 6px; /*滚动条宽度*/ height: 8px; /*滚动条高度*/ background-color: white;
2020-12-30 12:07:59 7447 4
原创 vue格式化数字为财务数字金额
vue格式化数字为财务数字金额效果1.在项目的src文件夹下新建filters文件夹,里面新建filters.js文件2.在filters.js添加如下代码function number_format(number, decimals, dec_point, thousands_sep) {decimals = 2;//这里默认设置保留两位小数,也可以注释这句采用传入的参数 /* 3 * 参数说明: 4 * number:要格式化的数字 5 * decimal
2020-12-15 11:35:31 4113 2
原创 vue 显示更多,收起功能
vue 显示更多,收起功能标签显示更多收起功能标签显示更多收起功能第一种:效果图:合起来时:展开时:上代码:<div class="demo-input-suffix" style="margin-bottom:30px;"> <el-collapse-transition> <div class="selectheader"> 达人分类: <div v-fo
2020-10-15 19:13:21 2747
原创 vue 下elementui轮播图自适应高度
vue 下elementui轮播图自适应高度vue 下elementui轮播图自适应高度vue 下elementui轮播图自适应高度设置autoHeight <el-carousel :height="autoHeight"> <el-carousel-item v-for="(item,index) in bannerList" :key="index"> <img :src="item.img" alt="图片" referrer="no-
2020-09-21 18:30:16 1323
原创 vue 使用剪切板功能功能vue-clipboard2
vue 使用剪切板功能功能vue-clipboard21.安装1. npm install --save vue-clipboard22.在main.js中引入import VueClipboard from 'vue-clipboard2' //复制粘贴功能VueClipboard.config.autoSetContainer = trueVue.use(VueClipboard)3.页面使用 <p>{{showtags}}</p> //展示拷贝的内容
2020-07-16 18:10:52 359
原创 vue Element下拉框滚动加载选项数据
vue Element下拉框滚动加载选项数据vue Element下拉框滚动加载选项数据(防止下拉框数据过多一次性请求过慢)vue Element下拉框滚动加载选项数据(防止下拉框数据过多一次性请求过慢)1,新建一个directives.js 文件import Vue from 'vue'// v-loadmore: 用于在element-ui的select下拉框加上滚动到底事件监听Vue.directive('loadmore', { bind(el, binding) { // 获
2020-07-06 11:45:42 4262 4
原创 vue 封装全局方法
vue 封装全局方法vue 封装全局方法vue 封装全局方法1,新建一个publicFun.js 文件export default { publicFun(data1,) { switch (data1) { case 1 : console.log("全局方法调用"+data1); break; case 2: console.log(data1); break; default: conso
2020-06-19 16:48:46 2053
原创 vue axios.CancelToken同一接口请求频繁时取消上一次请求
vue axios.CancelToken同一接口请求频繁时取消上一次请求vue axios.CancelToken同一接口请求频繁时取消上一次请求vue axios.CancelToken同一接口请求频繁时取消上一次请求问题:后台列表页面多条件查询列表数据时,同一接口由于多条件查询,请求参数不同,后台处理的结果时间不同,连续频繁变换不同的参数发起请求时会出现第一次发起的请求后获取响应的结果时间比第二次发起的慢,造成先发起的请求数据覆盖后发起的请求,页面渲染时出现查询条件与查询结果不符的问题,所以重新触
2020-06-16 16:44:12 1959
原创 vue cli项目防止表单提交暴力点击
vue cli项目防止表单提交暴力点击在utils文件新建plugins.js内容如下:import Vue from 'vue'Vue.directive('preventReClick', { inserted(el, binding) { el.addEventListener('click', () => { if (!el.disabled) { el.disabled = true; setTimeout(() => {
2020-05-28 19:03:00 206
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人