- 博客(53)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 element+vue表单校验
data(){callback()} else {callback(new Error('请输入字母或数字长度1-20组成的帐号'))return{form:{name:''},rules: {name: [{ required: true, message: "请填写账号名称", trigger: "blur" },],},适用二次填写确认密码data(){callback(new Error("请输入9位数或以上的密码"));=.*?
2021-12-24 14:42:30
2232
原创 缓存id路由页面返回，历史路由栈
返回是返回上一个历史路由，如果打开多个id详情页，并反复在两个详情页做切换操作，会导致在操作返回时看起来像是在详情页反复切换数据关闭不了，如下图。）生命周期只执行一次，使用变量状态，在进入方法时判断变量是否return，在接口完成（finally）更改变量。存储from历史路由，在标题组件返回方法里，对历史路由栈数据进行操作，获取历史有效路由使用。1.页面缓存会有初始化和组件激活访问生命周期调用数据接口过多，有性能损耗。），可根据id值打开多个编辑详情页，需要在页面操作返回时关闭面包屑页签。
2025-03-11 15:15:15
538
原创 根据指定日期自定义el-date-picker日期选择器样式
配置picker-options对象中的cellClassName属性，DatePicker日期选择器切换年份时做监听查询。功能需要在DatePicker日期选择器中，对有数据的日期下方添加小圆点提示样式，后台会返回按年份查询的日期数据。
2024-06-27 16:49:22
520
原创 管理node——NVM安装及使用
以下两张图是我当时第一次安装指定文件在原来node文件夹下，已经有nodev14.21.3版本了，没有卸载原来的node导致后面一顿踩坑，建议直接卸载干净再安装nvm，卸载过程已经在前文写过了，避免无限踩坑，可以看正常操作。
2024-05-28 16:59:02
1320
原创 contenteditable实现文本内容确认提示
若部分字符串有误，部分字符串需要变更字体颜色做提示，再次点击确认则对部分正确数据执行批量查询。若全部数据有误则变更字体颜色做提示，再次点击确认查询为空。：contenteditable为true可编辑元素内容。若全部数据正确则直接执行批量查询。一种为既没有通过校验又重复的数据。',无结果且数据重复'一种为未通过校验数据。
2023-10-23 10:09:08
489
原创 vue动态路由数据缓存
可以找个组件试一下，我这边已经实现了，效果可以自己去印证一下// 组件里一定要加上这个name，如果不需要缓存那就可以不要这个// 这个name一定要写对，要和定义的路由name一样// 如果不知道是什么可以在ADD_CACHED_VIEW打印一下view.name。
2023-09-14 17:40:06
812
原创 css实现按钮圆角渐变样式
最近项目数据大屏这个样式给我卡住了，起因是UI设计想要按钮边框渐圆角背景透明渐变，我查找了好多资料也在问答里提问，都没有实现初始样式。原因是如果想用渐变边框就会使用到属性border-image，这个属性有个bug就是不能和border-radius圆角一起使用。用过伪类和盒子的方法试了，如果想通过伪类或盒子去做，那么背景就不能是透明的。因此和UI设计商量了一手，改成了背景不透明的样式，我用的盒子。建议如果有我这种情况的，要么不要渐变边框不要圆角，要么渐变圆角边框不要透明背景。
2023-07-10 17:23:28
1431
原创 文件异步上传使用虚拟滚动el-table-virtual-scroll加载数据
最近在写一个批量导入数据的功能，需要通过上传文件异步导入调接口，将后台返回Excel文件里的数据不做分页用列表展示出来，再加上需要在列表嵌入输入框，所以加载大量数据渲染的时候要加载很久，需要用到虚拟滚动加载。这个插件用于虚拟滚动加载数据，仅支持vue2，具体使用参考下面地址，案例里也有源码示例，挺好用的，非常推荐！展示在列表，嵌入输入框可修改别名，后台返回的数据一次最少大约有2000条左右而且不做分页，需要使用虚拟滚动加载。进行删除覆盖可以保证获取到新上传的文件，每次点击导入就会通过。
2023-04-12 17:08:35
1747
6
原创 element DateTimePicker不允许选择当前日期时间之前的时间
element DateTimePicker不允许选择当前日期时间之前的时间
2023-02-17 11:13:25
1266
原创 rem适配计算
以移动端375px设计稿为例：新建variables.scss文件，在HTML页面中编写使用rem()需引用改文件@function rem($n){ @return $n/(200)+rem;}新建common.scss文件html{ font-size:calc(100vw/1.875)}这个表达式的理解： 100vw是设备视口的总宽度，18.75是计算1rem=400px，即750px/400px=1.875实际应用：html{ font-
2022-04-07 16:26:35
1729
原创 H5调用iOS和安卓方法
功能：安卓iOS中嵌入H5页面，实现右上角<返回按钮调用iOS和安卓的方法<van-button class="back" icon="arrow-left" size="normal" @click="back"></van-button>back () { if (window.webkit != undefined) { window.webkit.messageHandlers.goBackApp.postMessage(null); .
2022-03-26 16:27:38
4585
1
原创 Vue生成条形码jsbarcode
这里写目录标题安装依赖效果图展示代码jsbarcode的使用安装依赖npm install jsbarcode --save效果图展示代码<img id="barcode" />import JsBarcode from 'jsbarcode'mounted () { JsBarcode('#barcode', this.SNCode, { height: 65, fontSize: 13, });},jsbarcode的使用
2022-03-16 14:27:33
1904
原创 vue+element实现单选框嵌套输入框及动态校验
功能需求：生成ID的方式（两种方式做radio单选，选择方式切换显示内容，选择自定义时嵌套input对其校验）自动生成自定义填写ID代码：<el-form style="max-width: 550px" label-width="150px" :model="ruleForm" :rules="rules" ref="ruleForm"> <el-form-i
2022-03-01 16:20:29
5493
原创 vue组件之间的传值
赋值 let data = this.$refs.device.selectRowData。在实际的项目开发中暂时就学了这两种，以后学到了更多的再更新吧，陌生的朋友们，我们一起加油呀！定义并赋值 this.selectRowData = val。组件 :data=“thingDevice”组件 ref=“device”
2022-01-21 17:50:24
647
原创 在Vue中Promise.all的使用
一、Promise.all简述举例实战一、Promise.all简述Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。Promse.all在处理多个异步处理时非常有用，比如说一个页面上需要等两个或多个ajax的数据回来以后才正常显示，在此之前只显示loading图标。注意： Promise.all成功结果数组里的数据顺序和Promise.all接收.
2022-01-20 10:48:49
9991
原创 VUE插件vue-treeselect的使用
效果图：首先需要安装：npm install --save @riophae/vue-treeselect用法看代码注释： <template> <el-form ref="form" :model="searchForm" label-width="100px" :inline="true" :size="$formSize"> <el-form-item labe
2022-01-08 18:24:38
7626
10
原创 element+vue使用:formatter
效果图：1. 新建config.js文件export const deviceStatusList = [{ label: "未注册", value: "0", }, { label: "已注册", value: "1", }, { label: "已绑定", value: "2", },]export const onlineStatusList = [{
2022-01-04 15:50:56
1593
2
原创 VSCode扩展(前端Vue开发使用)
以下扩展是我编写当前项目代码使用到的，记录一下Debugger for ChromeVS中启动Chrome控制台Auto Rename Tag重命名一个HTML / XML标签时，自动重命名配对的HTML / XML标签background这个就是一个非常可爱的美化背景，我称它为“小可爱”，每次编程都会心情美好，有bug报红也不能生气，哈哈哈Beautify自动对html，js，css进行格式化对齐显示Bootstrap 3 Snipper.
2022-01-04 14:21:43
8454
1
原创 element+vue树添加删除
},methods: {areaAdd (isRoot) {this.isRoot = isRootthis.dialogVisible = true},onSubmit () {if (this.isRoot === 0) {const newChild = { id: testid++, label: ‘testtest’, children: [] };if (!this.cruData.children) {this.$set(this.cruDat...
2021-12-31 14:27:52
1104
2
原创 element步骤条steps配合标签页tabs使用
效果图：注意：activeIndex必须用"activeIndex - 0"来字符串转数字实现步骤：在第一个步骤标签页里的点击事件先让标签页跳转到第二个步骤，再用延时加载跳转第三个步骤的标签页最后主要就是样式的修改表单和列表具体实现展示就要自己进行数据绑定了<template> <div class="table-container-wapper"> <el-card> <el-steps :active="active
2021-12-28 17:58:59
2405
空空如也
前端数据打印获取问题
2023-07-26
el-select清空缓存重新渲染
2023-07-18
js从一个不规范的字符串中截取字符串
2023-07-14
el-button实现边框背景渐变样式圆角样式不生效
2023-07-06
ECharts的滑动条datazoom怎么设置圆角
2023-04-28
分页删除最后一页数据跳转页码问题
2023-04-17
按钮绑定禁用值变了，但是页面禁用效果不生效
2023-04-03
js获取元素宽高判断超出问题
2023-01-06
vue点击事件和移动事件冲突
2022-12-13
css样式问题,overflow有背景图的div
2022-12-08
npm install express 报错问题，如何解决？
2022-11-15
循环动态表单校验问题
2022-11-04
css多张背景图动态平铺
2022-10-10
弹窗对话框css样式设置问题
2022-10-09
div文本样式自适应
2022-09-15
关于#vue.js#的问题：vue双向绑定
2021-11-04
TA创建的收藏夹 TA关注的收藏夹
TA关注的人