随笔分类 - Element
摘要：需求描述： 原本的element中el-upload组件中的file-list中我们想去添加一个上传后显示上传文件的大小的效果，如图： 刚开始的思路是：这种思路也没啥问题，对了，上传按钮的位置和触发可以参考： 我这篇文章 后来一想，我们是不是可以找到element上传这一块的源码进行修改，项目中引入
阅读全文
摘要：效果：数据加载完成后，loading会取消 代码： let loadingInstance = null data() { return { loadComplete:false } }, watch: { loadComplete(val) { if (!val) { // 更多参数参考官网文档
阅读全文
摘要：工具方法：getStringlength.js // 统计输入字符长度 export const getStringLength = str => { let totalLength = 0 if (str) { const list = str.split('') for (let i = 0;
阅读全文
摘要：设置选中指定节点： this.$refs.treeRef.setCurrentKey('要设置节点对应的id'); 通常我们在设置完选中的节点的时候要触发这个节点的node-click事件，显示该节点对应的详情信息，要想调用handleClick事件，我们需要用： let node = this.$
阅读全文
摘要：需求： 点击列表中文字是文字的click事件，复选框是复选框的事件 核心代码： 完整需求：点击全选全选所有的，复选框选择后的数据会被收集到checkedArr这个数组中，进行批量下载；文件的点击事件根据文件类型去预览或者下载 需求分析：设计稿的全选并不是element的样子： 思路：我们可以把ele
阅读全文
摘要：正常情况下，我们在vue项目中路由切换为了视觉体验更好，我们会给路由增加切换的动画效果： 但是当我们某个路由内做了固定定位，那么在首次进入这个页面的时候就会因为动画效果造成“抖”一下的效果，没预先定位到我们想要的位置上。如图： 路由动画完成后： 为了解决这个问题，我们就想着要单独去掉这个路由的动画效
阅读全文
摘要：element默认上传成功和删除以及文件列表图标样式： UI需求样式： 首先我们需要更换文件列表样式： 我们选择看到：是用的伪类:content:"\e785" 第一种方法：这个我们在阿里图标库中可以下载想要的图标，把包引入到项目中，用字体图标css文件中的content中的去替换掉el-icon-
阅读全文
摘要：上传组件：组件效果 功能说明： 1. 上传为post请求，请求需要携带四个参数，其中有file上传的文件 2. 自定义上传时显示进度条，正在上传的文件删除要杀死当前这个请求，这里是用的file.uid进行的对号查找 3. 当有任务上传时，关闭或者刷新页面要杀死所有请求。 组件代码： <templat
阅读全文
摘要：需求：设计稿如下，上传按钮与上传列表不像element上传那种样式是左对齐的 代码结构： 用我们自己的按钮加上click事件之行： 核心代码： this.$refs['fileRefs'].$refs['upload-inner'].handleClick() 参考这篇文章
阅读全文
摘要：需求：我们有两个弹出框，这俩弹出框用的是一个组件（一个form表单），因为他们有相同的字段，可能A弹框的字段是最全的，B弹框是部分字段，通过v-if根据不同的弹框控制显示不同的字段 A弹框： B弹框 由于之前我们在一个form表单中通过: this.$refs.rulesFormRef.valida
阅读全文
摘要：需求： 1. 字段类型本身是有需要必选的校验，只有当且选择数据字典时，才会动态的触发来源字典的校验（必填），反之，去除来源字典的校验。 2. 当下拉框选择数据字典后，触发了来源字典的校验，这时候来源字典满足校验后，会移除错误提示信息，反之，没有输入任何内容失焦后又会重新触发校验；当下拉框切换为非数据
阅读全文
摘要：父组件中有一个表单校验，表单中引入了封装出去的下拉tree组件 由于要校验的input是在SelecTree组件中的，change事件父组件是无法知道有没有change，此时就需要子组件去处理： 子组件中的失焦事件中去告诉父组件 父组件：运用validateField()单独校验这个字段
阅读全文
摘要：示例组件： <template> <div class="detail_container"> <div class="opt_box"> <el-button size="small" type="primary" @click="addNodeFn">新增</el-button> <el-but
阅读全文
摘要：完整组件，作为路由可以直接看到效果： <template> <div class="box"> <div class="exam_structure"> <!-- <el-input v-model="filterText" placeholder="输入关键字进行过滤"> </el-input>
阅读全文
摘要：先看目标效果： （1）限制整个选择范围：当前日期之后都不能被选择，十年前的不能选择（十年内） （2）选中某个月后，第二次选择点击之前会自动会计算禁选前后一年之外 （最大能选择一年） 实现： 1. 安装dayjs 2. 组件内引入 import dayjs from 'dayjs' 3. 定义变量：
阅读全文
摘要：<el-date-picker v-model="expireDate" type="datetime" @change="handle" format='yyyy-MM-dd HH:mm:ss' value-format='yyyy-MM-dd HH:mm:ss' :picker-options=
阅读全文
浙公网安备 33010602011771号