- 博客(116)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 element文件的下载
实现效果点击下载按钮后实现下载文件实现步骤设置移入后展示的标签，绑定点击事件 handleDownload(file),file 是文件的相关信息<span class="el-upload-list__item-actions" style="font-size: 16px; padding: 0 10px"> <span v-if="!disabled" class="el-upload-list__item-download" style="margin
2022-03-14 15:32:40
2885
原创 时间选择器开始时间判断不能大于结束时间
预览效果实现过程<el-form-item label="申请日期" prop="applyTime"> <el-date-picker type="date" v-model="dataForm.applyTime" :disabled="disabled" value-format="yyyy-MM-dd" placeholder="申请日期" format="yyyy-MM-dd" :picker-options="s
2022-03-14 13:07:02
739
原创 elementUI 上传文件展示自定义的预览图
效果：展示自定义的预览图第一步：<div slot="file" slot-scope="{file}"> // 图片展示 <img src="" alt="" :src="file.url" class="el-upload-list__item-thumbnail" > // 文件名称 <p class="file-title" style="text-align: center;">{{f
2022-03-07 15:53:56
2799
1
原创 element文件的下载
实现效果点击下载按钮后实现下载文件实现步骤设置移入后展示的标签，绑定点击事件 handleDownload(file),file 是文件的相关信息<span class="el-upload-list__item-actions" style="font-size: 16px; padding: 0 10px"> <span v-if="!disabled" class="el-upload-list__item-download" style="margin
2022-03-07 15:53:37
2394
原创 Element下拉框选择后不显示勾选
bug样式问题出现的原因根据别人文档的了解，是由于弹出层中的数据是通过循环调用接口得到的，嵌套的层级过深导致，当点击选项数据后render 函数没有自动更新，通过手动的刷新可以解决问题我自己的解决方案借鉴的文档ElementUI 下拉选项框选择数据后不回显选中...
2022-02-24 17:06:22
1490
原创 element 表单各种正则校验
表单监听控制输入框长度userName: [ {required: true, message: '应急人员名称不能为空', trigger: 'blur'}, { min: 2, message: '长度不小于 2 个字符', trigger: 'blur' }, { max: 10, message: '长度不大于 10 个字符', trigger: ['blur', 'change'] }],监听手机号输入格式校验mobile: [ {required: true, mess
2022-02-24 16:14:22
2735
原创 element input限制只能输入数字
一、效果目前这个el-input 属性只能输入数字。二、参考资料以及理解参考资料操作思路：oninput：这是一个input 输入框在输入内容时会执行的事件（在输入框输入内容时就会触发 oninput）对输入框内容进行监听，监听输入内容的格式，这里使用正则进行限制操作blur: 监听输入框失去焦点当输入框失去焦点时，将输入框中的内容进行保存操作步骤：oninput="value=value.replace(/^\.+|[^\d.]/g,'')"@blur="salaryChan
2022-02-24 16:12:39
12010
1
原创 Duplicate keys detected: ‘xxx‘. This may cause an update error
当控制台出现提示 Duplicate keys detected: 'xxx'. This may cause an update error, 表示你的代码中某个 for 遍历数据时赋值key的值出现重复废话不多说，直接上我解决的方法借鉴大佬的文章大佬文章
2022-02-24 15:35:30
762
原创 根据字典表获取所有数字对应的数据
功能描述：此列中的数据是从字典表中获取的，但是获取的都是数字，而显然需要获取数字对应的文字信息，使用 下边这种方式获取数字对应的信息，可以实现对于单个数据的获取，但是对于，多个数字且要获取到对应的多个文字信息，使用下面的方式是无法实现的。<template slot-scope="scope"> <!--这种方式是直接获取字典表中此项数据对应的文字信息，存在局限性，对于多个数据的情况无法获取--> <span>{{ trans
2022-02-24 14:19:51
383
原创 element 表单校验
表单监听控制输入框长度userName: [ {required: true, message: '应急人员名称不能为空', trigger: 'blur'}, { min: 2, message: '长度不小于 2 个字符', trigger: 'blur' }, { max: 10, message: '长度不大于 10 个字符', trigger: ['blur', 'change'] }],监听手机号输入格式校验mobile: [ {required: true, mess
2022-02-23 15:58:43
110
原创 el-input 输入框无法输入内容
问题解决方案问题原因官方文档上有提示上面的这句 不支持 v-model修饰符 其实我乍一看也一蒙，仔仔细细看了几遍好像明白了什么。不支持 v-model 修饰符 =》 不支持 v-model的修饰符 =〉 v-model的修饰符（就是 :model）=>(v-model的简写 === :model)简单一句话就是，当不支持使用 v-model的简写时(:model),使用v-model:model和v-model的区别v-model：实现表单数据的双向绑定，还可
2022-02-23 15:57:33
4031
原创 async-validator: [‘contact is required’] 报错的处理
控制台出现提示async-validator: ['contact is required’]解决方案：确保验证的规则和名称都没有问题的情况下，检查 el-for 下的model 是怎样设置的。关于我为什么将:model="dataForm”改成 v-model="dataForm”， 这个问题是我上一篇文章中有讲到，总结一句话，是为了解决输入框无法输入内容情况而的更改，现在改回来了，输入框无法输入的问题目前没有出现。...
2022-02-23 15:57:04
11089
4
原创 Element实现省市区三级联动
一、实现效果二、参考数据el-cascader省市区三级联动 三、实现方法npm install element-china-area-data -S<template> <div id="app"> <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange">
2022-02-23 15:53:58
1684
1
原创 绑定事件监听
实现效果列表中的数据，点击哪一项哪一项改变颜色（样式）参考代码：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-sca
2021-12-28 17:58:40
81
原创 element 分页器数据不刷新bug解决方案
使用Element 分页器开发遇到的一个问题，这里记录下，也希望能帮到其他人问题描述例：在第一页中搜索’张三’，页面中展示4条数据，切换页码到第 5 页，搜索关键字 ‘张三’，页码显示 ‘共4条’ 但是在页面中没有数据展示，查看控制台，接口中也显示返回了4条数据。解决方法<el-button @click="pageIndex = 1;getDataList();">查询</el-button>只需要在 搜索 按钮上加上 pageIndex = 1;,注意，一定要加在调
2021-11-15 16:56:28
1859
原创 meta的使用
使用 meta 标签解决的问题例如：一个模块是公共的在所有页面都会显示，但是在某一些特殊的特面中不需要此模块显示，此时要对不需要展示此模块的页面路径中作 meta 的配置，当公共的模块检测到此页面的路径中存在 meta 配置，即不展示。...
2021-09-18 01:22:14
112
原创 声明式导航编程式导航
跳转路由的2种基本方式声明式导航: <router-link to="">编程式导航: this.$router.push()/replace() 编程式导航比声明式导航更加的灵活（内部可以加入自己的逻辑），在某些情况下效率会更好声明式导航写法编程式导航写法...
2021-09-18 01:20:54
138
原创 路由组件传参的过程
以下 尚硅谷Vue视频第 95章视频讲到的内容如何将数据从 Header页面 传入到 Search页面跳转路由携带参数的2种方式 params参数 属于路径的一部分，匹配的时候路由的path 当中要照顾到这个参数，需要在路径中占位 query参数 不属于路径的一部分，匹配的时候，路由的path 不需要照顾到这个参数无论是 params 还是 query 参数，最终匹配完成都会解析道当前这个路由对象中 params 和 query 属性当中显示路由的组件的时候，会把这个路由对象，传递
2021-09-18 01:16:34
221
原创 Vue路由非路由组件的使用
借鉴文章：路由组件的使用自己整理非路由组件使用定义 定义在 components文件夹中 -----components(里面的内容都是公共的)注册 注册在 App.vue 使用 在App 中书写组件标签路由组件的使用定义 定义在pages中 -------pages(是自定义的一个文件夹用于保存路由组件)注册 路由器相关配置 1.安装路由 npm i vue-router -S 2.引入并声明使用路由插件 3.向外暴露一个路由器的对象
2021-09-18 01:14:57
979
原创 Git基本操作
本方法仅供参考提交git代码步骤：终端切换到项目文件夹地址中，输入 git init 创建git 初始化环境在代码平台中创建一个仓库复制创建仓库中的链接 将代码粘贴到终端中运行，此时终端不会有任何打印在终端中输入 git add .(将所有文件放到暂存区)在终端中输入git commit -m ‘第一次提交代码’(将代码放到提交区)在终端中输入 git push origin master (将代码提交到仓库)以上步骤如果运行一切正常，此时刷新下线上仓库，应该能看到提交的数据了拉
2021-09-16 20:40:29
93
原创 项目中解决跨域的办法（仅供参考）
当运行项目出现报错提示检查是否出现跨域的问题了，无论是否出现跨域，先检查是否做有预防跨域情况的措施搜索进入 webpack 官网随意拷贝一条配置，进行解决跨域问题
2021-09-15 18:33:54
142
原创 XXXX Please verify that the package.json has a valid main entry
XXXX Please verify that the package.json has a valid “main” entry出现的报错提示问题解决方法删除项目文件中的 package-lock.json文件运行命令 npm install重新启动项目
2021-07-13 15:19:37
8058
5
原创 html4
html4注意：所有的标签都是由"<>"包裹元素内容存在于开始标签和结束标签中间的br标签属于单标签，建议直接在使用时写为 <br/>标签标题h1~h6hr ：定义水平线，也可以用于分隔内容 用于html的注释段落pbr : 用于换行链接 a普通的链接：<a href="http://www.example.com/">链接文本</a>图像链接： <a href="http://www.example.co
2021-02-19 22:12:38
311
原创 html布局
html布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
2021-02-18 23:55:17
88
原创 使用 iconfont 引入字体
使用 iconfont 引入字体1.第一步网址输入关键字 “iconfont” 进入官网2.第二步3.第三步4.第四步解压后，将解压文件移动至项目中5.第五步6.第六步使用方式有三种以下是参考代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w
2021-01-05 17:45:15
669
原创 Webkers 多线程
Webkers 多线程优点：在分线程加载代码，不会影响主线程上的浏览器操作，如果所有的代码都在主线程上加载，会影响用户体验缺点：加载缓慢，并且通过多线程的方式比直接在主线程运行程序更加的慢worker内代码不能访问DOM（更新UI）不是每个浏览器都支持这个新特性不能跨域加载JS不使用多线程计算斐波那契数列<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
2020-12-05 14:23:31
76
原创 flex布局的常见属性
flex布局的常见属性主轴与侧轴flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴y轴默认主轴的方向就是x轴方向，水平向右默认侧轴的方向就是y轴方向，水平向下单行情况使用align-items，多行情况下使用align-content常见的父项属性flex-direction:设置主轴的排列方向子元素事是跟着主轴来排列的row:默认值从左向右row-reverse:从右向左column:从上到下column-reverse:从下到上justify-
2020-11-15 10:37:00
601
原创 使用CSS3伪元素引入阿里巴巴的字体图标
使用CSS3伪元素引入阿里巴巴的字体图标<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 1.需要引入文件 -
2020-11-04 19:43:16
914
1
原创 CSS初始化
CSS初始化/* 把所有的标签内外边距清零 */* { margin: 0; padding: 0;}/* 让斜体的文字不倾斜 */em,i { font-style: normal;}/* 去除li的小圆点 */li { list-style: none;}img { /* 兼容低版本，图片外面包含了链接会有边框的问题 */ border: 0; /* 取消图片底侧的空白缝隙的问题 */ vertical-align
2020-11-04 17:25:10
249
原创 实现直角三角形
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1 { width: 0; height: 0; .
2020-11-04 16:46:18
253
原创 实现盒子上方显示小三角的样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { .
2020-11-03 23:32:40
493
原创 使用css实现小三角
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .class { .
2020-11-03 23:14:21
331
原创 精灵图的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { .
2020-11-03 19:47:20
172
原创 实现鼠标移入后显示遮罩和图标
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .tudo { .
2020-11-03 17:40:05
983
原创 元素的隐藏和显示
元素的隐藏和显示display属性display属性用于设置一个元素如何显示display:none; 用于隐藏元素，且不保留原来的位置display:block; 除了转换为块级元素外，同时还有显示元素的意思display隐藏元素后，不会占有原来的位置。visibility可见性visibility属性用于指定一个元素可见还是隐藏。visibility:visible; 元素可视visibility:hidden; 元素隐藏，并保留元素原来的位置visi
2020-11-03 17:07:43
365
原创 淘宝轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { m.
2020-11-03 12:05:24
231
html&css 网页练习作品.zip
2020-05-12
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人