![](https://img-blog.csdnimg.cn/20200527115748771.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue.js
文章平均质量分 55
vue全家桶相关总结
清阿哥、
一个菜鸟的成长之路....
展开
-
vue2之 vue-i18n 插件报错-Uncaught TypeError: Cannot read properties of undefined (reading ‘0‘)
vue2 vue-i18n 插件报错 Uncaught TypeError: Cannot read properties of undefined (reading '0') 根本原因 _watchers[0].constructor _watchers undefined·导致开发环境页面白屏原创 2023-09-18 11:29:43 · 1746 阅读 · 0 评论 -
获取当天,本周,本月,本季度,本半年,本年时间
elemet-plus 组件库,日期选择器快捷使用选择本月,本季度时间原创 2022-11-16 15:41:57 · 544 阅读 · 2 评论 -
Elementui el-input 输入框校验以及表单校验
日常开发中输入框正则校验大全-------持续更新维护中.......原创 2021-03-25 22:06:40 · 50698 阅读 · 6 评论 -
js 合并两个二维数组成为数组对象
使用场景在使用element-ui的级联选择器展示省市区(多选),后端需要传递数组对象格式里面包含每个选中的省市区的name和code数据.但是只能直接取到选中的code,可以使用ref来拿到级联选择器的getCheckedNodes方法来获取当前选中的省市区name;最终将两个二维数组合成一个数组对象的格式传给后端,数据结构以及代码如下:模板代码 <el-cascader ref="serveArea" v-model="form.installServiceArea"原创 2022-01-23 18:54:53 · 2502 阅读 · 0 评论 -
vue 中使用节流和防抖
今天事情比较少,就特意研究了下在vue中如何使用节流和防抖,还有节流防抖我真的是傻傻的分不清楚,不知道什么时候使用节流,什么时候使用防抖…1. 节流-方法1在 utils.js 文件里面加入下面的方法// 节流export function _throttle(fn, wait = 200) { let last; timer; return function() { let th = this; let args = arguments; let now = +原创 2021-04-22 17:14:05 · 5137 阅读 · 6 评论 -
elementui el-pagination 分页组件封装
分页组件是比较常用的,有表格的地方基本上都存在分页,使用 elementui 里面的分页进行封装方便使用。一. 后端分页<template> <div class="pagination"> <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="currentPage" :page-sizes="propP原创 2021-04-20 12:02:11 · 914 阅读 · 0 评论 -
ElementUI upload 组件封装
开发中遇到了个上传合同的需求,使用的是 elementui 的上传组件,项目中使用比较多,进行了封装,开发完成后总结一下,供大家和自己使用时查看。上代码!1. 模板代码<template> <div class="uploadFile" style="margin-top:15px;"> <!-- 上传组件 --> <el-upload v-loading="loading" mult原创 2021-04-15 18:53:08 · 1204 阅读 · 0 评论 -
vue pdf 预览下载功能 vue-pdf
开发新项目的时候遇到了合同的预览下载功能,之前没有做过,实现之后记录一下,方便以后查阅。1. 下载 vue-pdf 插件npm install --save vue-pdf或者cnpm install --save vue-pdf2. 所需页面引入 vue-pdf我的 pdf 预览是在弹窗中展示, 根据自己的项目实际情况来展示<!-- 模板代码 --!><div class="pdfPreview"> <el-dialog :close-o原创 2021-04-05 15:56:29 · 2872 阅读 · 16 评论 -
vue使用 vue-qr 和 html2canvas 链接生成普通二维码和海报二维码
首先下载插件npm i vue-qr --savenpm i html2canvass --save链接生成二维码并下载到本地// 模板中的代码 <el-dialog :visible.sync="showDownloadDialog" title="测评下载" width="35%"> <div class="dialog-content"> <el-原创 2020-11-20 15:30:56 · 2220 阅读 · 3 评论 -
element tooltip组件在table组件中的使用
需求:在表格中超出两行后显示省略号,鼠标进入在tooltip框中显示文本信息,随后将tooltip封装成立组件使用。OverFlowText.vue<!-- 组件功能:文本溢出时,显示tooltip --><template> <el-tooltip manual v-model="isShow" :disabled="!isShow" :width="tableWidth"原创 2020-11-19 18:14:36 · 2669 阅读 · 2 评论 -
vue.js学习总结(持续更新)
一. vue.js教程总结1. Object.freeze()阻止 数据改变时,视图会进行重渲染的现象。2. vue暴露了一些有用的实例属性与方法,加上前缀 $vm.$data === data // => truevm.$el === document.getElementById('example') // => true// $watch 是一个实例方法vm.$watch('a', function (newValue, oldValue) { // 这个回调将在 `vm原创 2020-09-04 13:42:02 · 796 阅读 · 0 评论 -
element 上传组件使用
1. 单张图片上传第一次使用element的上传组件,总结一下希望能够帮助到大家,也便于自己以后使用。(大家可以根据自己所需来添加更改绑定的属性。)<el-upload class="avatar-uploader" accept="image/jpeg" :show-file-list="false" :headers="{ token: token}" :action="actionUrl" :on-success="handleAvatarSuccess" :be原创 2020-08-21 15:26:36 · 568 阅读 · 0 评论 -
element 开关组件显示开关文字总结
1. 显示开关文字表格中使用开关组件,官方例子的文字描述是显示在开关组件的后面,如何显示在组件上呢?废话不多说直接上教程。html<el-table-column label="是否显示"> <template v-slot="scope"> <el-switch v-model="scope.row.show" class="switchStyle" :active-value="1" :inactive-原创 2020-08-21 14:40:12 · 2653 阅读 · 2 评论 -
vue 路由拆分
1. 问题随着项目越来越大,路由会越来越多,如果路由都写在同一个文件中会显得页面混乱,可读性很差,不易查找维护。2. 解决方法拆分路由:在 router 文件夹中创建新的文件shoppingMallBusiness.js 文件里面还按照正常路由写法index.js 文件引入const router = new Router({ routes: [ ...shoppingMallBusiness, // 电商商户端 ],})...原创 2020-08-19 16:27:36 · 744 阅读 · 0 评论 -
vue使用vant的list组件使用
模板代码<van-list v-model="loading" :finished="finished" :finished-text="finishedText" @load="pullupLoadMore"> <ul v-for="(item,id) in allHouseDetail" :key="id" > <li @click="chooseRoom(item.roomAddress,item)">{{ ite原创 2020-05-26 17:21:46 · 3600 阅读 · 2 评论 -
vue移动端长按事件触发删除按钮
利用移动端的touchstart touchend touchmove 事件结合 实现长按事件的触发<div class="item" @touchstart="gtouchstart(item)" @touchmove="gtouchmove()" @touchend="gtouchend()" v-for="(item) in userHouseDetail" :key="item.id"><p class="cancel" v-sh原创 2020-05-25 17:32:02 · 2164 阅读 · 3 评论 -
vue输入框使用模糊搜索
实现原理:利用js的 indexOf 方法可返回某个指定的字符串值在字符串中首次出现的位置。模板中的代码<div class="search"><!--输入框使用的是vant的输入框组件--> <van-search @input="autoSearch" v-model="value" placeholder="请输入搜索关键词" style="width:90%; display:inline-block;"原创 2020-05-25 10:15:13 · 2699 阅读 · 0 评论 -
vue页面刷新文本框自动获取焦点
使用Vue.nextTick实现进入页面文本框自动获取焦点场景:页面加载时需要让文本框获取焦点用法:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM<input type="text" ref="inputs">mounted(){ //因为 mounted 阶段 dom 并未渲染完毕,所以需要$nextTick this.$nextTick(() => { this.$refs.inputs.focus() //原创 2020-05-15 17:27:33 · 1229 阅读 · 4 评论 -
vue.config.js 常用配置总结
第一次写博客,哈哈哈。。。1. publicPath部署应用包时的基本 URLpublicPath:' ' 或者 publicPath:'./'2. outputDir打包生成文件出口outputDir: 'dist'3. asstsDir放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。3. indexPath指定输出路径 相当于outputDir,绝对路径idnexPath: 'index.htnl'4. filenam原创 2020-05-13 14:28:28 · 2105 阅读 · 0 评论