LHC087-CSDN博客

vue+elementUI MessageBox 弹框自定义弹窗样式vue+elementUI MessageBox 弹框自定义弹窗样式vue+elementUI MessageBox 弹框自定义弹窗样式效果：代码：beforeRouteLeave(to, from, next) { // 监听路由离开时弹出弹窗是否需要保存资料的功能 const h = this.$createElement; setTimeout(() => { // 这里加个定时器可以避

2022-03-21 11:29:33 2524

原创标签拖拽功能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 775

原创 VuePress + Github Pages 搭建静态博客页面

VuePress + Github Pages 搭建静态博客页面VuePress + Github Pages 搭建静态博客页面VuePress + Github Pages 搭建静态博客页面VuePress + Github Pages 搭建静态博客页面

2022-01-05 11:24:43 260

原创 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 1915 3

原创 vue 实现的图片上传裁剪功能

vue实现的图片上传裁剪功能vue实现的图片上传裁剪功能vue实现的图片上传裁剪功能效果图：代码：1.先安装：npm install vue-cropper 或者 yarn add vue-cropper2.组件代码：<template> <div> <div v-loading="loading"> <label> <slot

2021-12-24 10:39:05 622

原创 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> &lt

2021-11-19 11:11:14 1528

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

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

原创 VUE+Vant实现的分享复制功能组件

VUE+Vant实现的分享复制功能组件VUE+Vant实现的分享复制功能组件VUE+Vant实现的分享复制功能组件<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 1325

原创 Vant Ui遇到的问题总结

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar

2021-09-25 11:06:24 656

原创 Vue+element 关于表单的一些问题

Vue+element 关于表单的一些问题问题1：新增和编辑功能共用同一表单时，先编辑赋值回显，关闭表单后再打开新增时，会发现 this.$refs.[formName].resetFields()无效，即回显的内容在新增的表单内并没清空解决办法：在赋值的时候使用（赋值时注意深浅拷贝的问题） this.$nextTick(function() { //关键使用this.$nextTick this.Form = res //这里赋值 })或者使用 setTimeou

2021-08-28 10:48:06 152

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

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

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

原创 vue ElementUI实现的记事日历

vue ElementUI Calendar calendar日历一.vue ElementUI实现的记事日历二.vue ElementUI实现的考勤日历

2021-01-27 18:15:29 4006

原创 ElementUI DateTimePicker 组件用法

ElementUI DateTimePicker 组件用法ElementUI DateTimePicker 日期时间选择器时间选择时间精确到时分，不要秒ElementUI DateTimePicker 日期时间选择器日期可用，限制时间选择选择范围ElementUI DateTimePicker 日期时间选择器时间选择时间精确到时分，不要秒效果如下：时间选择部分只选到时分，没有秒代码如下： <el-date-picker v-model="automaticFo

2021-01-15 15:51:23 3283

原创 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 6018 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 465

原创 vue element-ui表格的滚动条样式修改

vue element-ui表格的滚动条样式修改默认element-ui table固定表头或列时，当表列过多出现滚动时，滚动条效果如下，效果不是很好看（个人感觉）修改前效果：修改后效果：满意度加加直接加全局代码样式修改就可以了/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/::-webkit-scrollbar { width: 6px; /*滚动条宽度*/ height: 8px; /*滚动条高度*/ background-color: white;

2020-12-30 12:07:59 7383 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 4053 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 2373

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

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

原创 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 4225 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 2031

原创 vue axios.CancelToken同一接口请求频繁时取消上一次请求

vue axios.CancelToken同一接口请求频繁时取消上一次请求vue axios.CancelToken同一接口请求频繁时取消上一次请求vue axios.CancelToken同一接口请求频繁时取消上一次请求问题：后台列表页面多条件查询列表数据时，同一接口由于多条件查询，请求参数不同，后台处理的结果时间不同，连续频繁变换不同的参数发起请求时会出现第一次发起的请求后获取响应的结果时间比第二次发起的慢，造成先发起的请求数据覆盖后发起的请求，页面渲染时出现查询条件与查询结果不符的问题，所以重新触

2020-06-16 16:44:12 1949

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

原创 vue 表格过滤器处理转换后台返回的这种时间格式2020-04-16T08:22:25.000+0000

vue 表格过滤器处理转换后台返回的这种时间格式2020-04-16T08:22:25.000+0000将2020-04-16T08:22:25.000+0000转成2020-04-16 08:22:25export default { name: "CommissionRules", //注册局部过滤器 filters: { timefilters(val) { ...

2020-04-16 18:47:06 7920 3

空空如也

空空如也