Vue和Element笔记
Vue和Element笔记
嘉&年华
我的世界,我的嘉年华!
展开
-
【第016篇】使用iframe嵌入子页面,子页面传值给父页面
vue使用iframe嵌入html子页面,子页面传递信息给父页面。原创 2022-11-12 07:15:35 · 356 阅读 · 0 评论 -
【第015篇】基于vue+elementui的文件上传,以照片墙形式显示文件图标缩略图
如果上传的文件是图片格式,则缩略图回显成具体图片;如果上传的文件是PDF文件,则回显PDF的图标文件;如果上传的文件是WORD文件,则回显doc或docx图标文件;如果上传的文件是EXCEL文件,则回显xls或xlsx图标文件;...原创 2022-08-05 14:45:38 · 1948 阅读 · 0 评论 -
【第014篇】基于vue+elementui设计的在线预览文件(可预览图片、音频、视频、PDF、WORD、EXCEL文档)
vue+element,组件封装,预览文件。最后示例代码,文件上传支持文件图标缩略图,代码中如果是PDF文件,则回显PDF图标文件,如果是DOC文件,则回显DOC图标文件。原创 2022-08-05 14:33:05 · 3060 阅读 · 0 评论 -
【第013篇】基于vue+elementui设计的数字区间框组件
基于vue+elementui的数字区间组件代码及使用说明原创 2022-06-04 06:47:17 · 2308 阅读 · 0 评论 -
【第012篇】vue+elementui表格高亮显示
1、在表格上增加 :row-class-name=“tableRowClassName” 属性。<el-table v-loading="dataListLoading" max-height="550" :data="dataList" border @selection-change="dataListSelectionChangeHandle" :row-class-name="tableRowClassName" style="width: 100%;" size="small">原创 2022-04-29 11:27:47 · 859 阅读 · 0 评论 -
【第011篇】ElementUI的el-date-picker组件设置禁用日期范围(如流转期限,开始日期仅可以选择今天及之前,结束日期可以选择开始日期之后的日期)
ElementUI的el-date-picker组件设置禁用日期范围(如流转期限,开始日期尽可以选择今天及之前,结束日期可以选择开始日期之后的日子)原创 2022-01-14 22:44:30 · 1336 阅读 · 0 评论 -
【第010篇】vue表单验证之验证非空字符(空格等空白符)
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" :label-width="'120px'" size="small"> <el-form-item label="存档点名称" prop="name"> <el-input v-model="dataForm.name" placeholder="存档点名称" maxlength="60" show-word-limit clea原创 2021-12-30 10:02:38 · 5396 阅读 · 1 评论 -
【第009篇】基于vue为整个网站添加水印效果
// 为整个网站添加水印效果// 调用步骤:// (1)在需要使用的页面上引入脚本,一般是网站布局主页面:import Watermark from '@/utils/watermark'// (2)在脚本中增加mounted,并添加如下代码:// mounted () {// const remark = '测试水印'// Watermark.set(remark)// }const watermark = {}const se原创 2021-12-30 09:44:05 · 138 阅读 · 0 评论 -
【第008篇】基于vue为单个页面添加水印效果(不是整个网站)
// 为单页面添加水印,并不是为整个网站添加水印// 调用步骤:// (1)在需要使用的页面上引入脚本:import WatermarkSingle from '@/utils/watermarkSingle'// (2)在此页面中增加一个div标签,将页面内容包在此div标签内,并为此div设置ref,例如:<div ref="directrecordwp">这是页面的内容</div>// (3)在脚本中增加mounted,并添加如下代码:// 注意:this.$ref原创 2021-12-30 09:39:24 · 258 阅读 · 0 评论 -
【第007篇】vue工具脚本-数字日期转中文日期
/** * 数字日期转中文日期 * @param str * @returns {string} */export function numberDate2ChineseDate (str) { const chinese = ['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'] const numStr = str.replace(/[^0-9]+/g, '') const year = chinese[numStr[0]]原创 2021-12-28 09:14:07 · 630 阅读 · 0 评论 -
【第006篇】vue工具脚本-将日期对象转为字符串日期
/** * 将日期对象转为字符串日期 * @param times * @param pattern * @returns {string} */export function formatTimeToStr (times, pattern) { let date if (times === '' || times === null || times === undefined) { date = new Date() } else { date = new Date原创 2021-12-28 09:10:37 · 877 阅读 · 0 评论 -
【第005篇】vue工具脚本-校验身份证号码是否合法(不是简单验证身份证号码是否15或18位,而是包含了校验位)
/** * 校验身份证号码是否合法 * @param num * @returns {boolean} */export function isIdCard (num) { if (!num) { return false } num = num.toUpperCase() // 身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X。 if (!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test原创 2021-12-28 09:05:43 · 702 阅读 · 0 评论 -
【第004篇】基于vue实现只选择月日功能
公司最近有个需求,设置每年的某月某日迁移账单,因此需要设计界面让用户选择月和日。在网上找了找,很少有这种组件的。目前仅找到一个日期选择框,但是试用后发现存在问题,无法绑定默认值。最终换了一个思路,利用element的Cascader级联选择器实现了一个。请看下图:具体实现主要代码:<el-form-item> 每年 <el-cascader v-model="date" :options="options" separator="" :props="{ exp原创 2021-12-16 14:34:55 · 2808 阅读 · 0 评论 -
【第003篇】vue工具脚本-数字金额转大写(例如:3.14转成叁元壹角肆分)
utils/numToCny.js// 数字金额转大写export const numToCny = (money) => { // 汉字的数字 var cnNums = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'] // 基本单位 var cnIntRadice = ['', '拾', '佰', '仟'] // 对应整数部分扩展单位 var cnIntUnits = ['', '万', '亿', '兆'] //原创 2021-12-06 13:43:16 · 623 阅读 · 1 评论 -
【第002篇】vue工具脚本-阿拉伯数字转成中文大写(例如:3.14转成叁点壹肆)
在vue中使用此脚本可将阿拉伯数字转成大写,例如 3.14转成叁点壹肆原创 2021-12-06 13:39:22 · 720 阅读 · 1 评论 -
【第001篇】vue+element-ui中集成富文本编辑器(vue-quill-editor)
一、在项目中下载安装富文本编辑器npm install vue-quill-editor --save二、在项目中引入(我这里是在main.js中全局引用了)// 引入富文本组件import QuillEditor from 'vue-quill-editor'// 引入富文本组件样式import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'原创 2021-08-24 19:58:06 · 6241 阅读 · 0 评论