![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
Liang_Cheng_Jiu
这个作者很懒,什么都没留下…
展开
-
v2 基于element封装公用组件select
<template> <el-select placeholder="请选择" clearable v-bind="$attrs" v-on="$listeners"> <el-option v-for="item in data" :key="item[option.key]" :label="option.isLabelFuc ? option.label(item) : item[option.label]" :原创 2022-04-20 21:23:44 · 547 阅读 · 0 评论 -
踩坑记录:vue-cli脚手架升到5.0.0版本后运行项目自动打开会报0.0.0.0:8080无法访问
踩坑记录:vue-cli脚手架升到5.0.0版本后运行项目自动打开会报0.0.0.0:8080无法访问vue-cli脚手架5.0版本及其以上设置运行项目后自动在浏览器中打开会出现解决办法:1.第一种解决办法回退vue脚手架版本,我直接回退到了4.5.0版本,再重新创建项目,就ok了 npm uninstall vue-cli -g // 卸载全局脚手架 npm install -g @vue/cli@4.5.0 // 安装指定版本第二种方式在vscode终搜索0.0.0.0,然后修原创 2022-04-16 23:42:43 · 2535 阅读 · 3 评论 -
vue js前端根据所需参数生成二维码并下载
需要一个插件 qrcodejs2, 使用 npm install qrcodejs2 --save 下载该依赖包。在vue中引入(我这边是vue2)。import QRCode from 'qrcodejs2';在计算属性中使用它。 computed: { QRCode, },在dom结构中设置一个容器来承载它,并设置一个id. <div id="qrcode" style="display: none"></div> // 如果要显示这个二维码.原创 2021-08-21 14:05:08 · 820 阅读 · 0 评论 -
js vue将后台返回的url图片地址以图片形式保存到本地
直接将下面函数复制到 项目中,传入要保存的 url, 以及要设置的文件名字,即可。 downloadByAxios(url, name) { // 图片地址 ,文件名 // 下载图片地址和图片名 const image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute('crossOrigin', 'anonymous'); image.onload = function () {原创 2021-08-21 13:55:10 · 1781 阅读 · 0 评论 -
多个video标签,控制最多只能一个同时播放
添加一个事件: @play="handlePlay(index)" <div v-for="(item, index) in videoUrlList" :key="index" :class="[ item.productSuffix.toLowerCase() === 'mp4' ? 'videoClass' : 'adeoClass', 'spaceClass', ]" .原创 2021-07-30 16:55:13 · 1427 阅读 · 1 评论 -
element from表单个别select 出现 一开始就校验了数据,且有数据还通不过校验,选中的项叉不掉问题。
问题1: element from表单个别select 出现 一开始就校验了数据,且有数据还通不过校验。前提条件: 校验规则都设置正确,都设置prop rules等情况下出现这个问题。下面是我设置的规则校验:出现原因: 在页面数据回显时的数据赋值方式不正确导致的(不一定是这个位置赋值导致的,也有可能是其他地方赋值导致的)。解决办法: 给深层次对象赋值时,使用this.$set来赋值。拿这个courses来说原本是 this.list.courseTimes = [...autoCourseT原创 2021-07-01 09:52:42 · 898 阅读 · 0 评论 -
element table 表格设置max-height 没有出现滚动条,多渲染了一列。
个人理解: 设置max-height后会多渲染一列,这一列应该是用来承载滚动条的,但是因为某种原因,滚动条没有被渲染出来,就出现了多渲染了一列,这一列里面没用任何东西。设置后效果图:样式代码:/deep/.el-table__body-wrapper { &::-webkit-scrollbar { /* 滚动条整体样式 */ width: 6px !important; /* 高宽分别对应横竖滚动条的尺寸 */ }}...原创 2021-06-04 18:58:30 · 4037 阅读 · 2 评论 -
根据条件动态修改element 组件深层次样式
开发前提: vue elementUI在开发中有时候 element 中我们使用的某个组件的样式不符合我们的需求,直接写行内样式,有时候会发现并不会生效,直接将样式写在 style 标签中虽然样式会生效,但是不符合我们动态修改样式的需求。因此可以考虑在给 使用的ui组件 动态添加一个类名,或套上一个 div ,动态在这div上添加类名,然后再下方 style对应类名下写 要修改的 组件样式。下面贴上我的代码: <div class="item"> <el-radio原创 2021-06-01 14:19:32 · 2247 阅读 · 2 评论 -
element el-popover 使用v-if 控制显示/隐藏,当条件变化时,里面有部分内容无法显示
先上效果图:贴上我的代码: <span v-if="!isBin" class="chat-btn"> <el-popover v-if="!isBin" v-model="popoverVisable" // 通过改变 v-model 绑定的属性值,来控制显示隐藏 placement="right" width="181" popper-class="bind-c原创 2021-05-31 14:34:05 · 3481 阅读 · 0 评论 -
img标签动态绑定本地图片地址不生效
如果一个img标签要根据图片变量来动态跟换src图片链接,如果src链接是远程的服务器图片地址都是没有问题的,但是如果是本地路径直接写,是不会生效的。解决办法:可以通过这种办法来解决-${require('@/assets/chat/file.png')}这里el-image标签和普通的img标签没差别什么差别。 <el-image lazy :class="[file.resourceType === 3 ? 'fileImg' :原创 2021-05-25 10:35:33 · 1409 阅读 · 0 评论 -
element Table表格实现前x行恒展示,不会被折叠,设置点击表头按钮排序。
table表格前X行恒展示不会被折叠。表头筛选按钮示意图:// data --渲染的数据(每一列每一行),请求回来的. 默认通过字段名和每一个headers对象中每一个prop来对应起来渲染数据的const header = [{prop:'if_book',name:'第一列'},{prop:'if_sss',name:'第二列'},]; // 定义每列列名,需要和接口获取的数据字段名对应起来才能正常展示。@sort-change // 点击对应表头触发事件,这里可以来实现点击表头筛选/排序数原创 2021-04-24 15:43:58 · 527 阅读 · 0 评论 -
element el-popover 要渲染较多内容,特定格式,以及在table 显示不完整。
效果图:公司项目,不方便展示,打了马赛克。对于一些格式的内容,就可以使用 <template solt="label"></template> 在里面定义我们需要展示的内容,// 记得需要去除 el-form-item 中的label标签// 可以通过 popper-class ,来设置类名 <el-form-item prop="courses" class="courseIdClass"> <template slot="原创 2021-03-19 09:51:44 · 1483 阅读 · 0 评论 -
Element Select多选选中项溢出选项框
解决办法添加样式// courseIdClass 自己定义的类名/deep/ .courseIdClass .el-tag { height: 100%; white-space: normal;}这样完美解决 溢出问题。原创 2021-03-18 18:00:31 · 1099 阅读 · 0 评论 -
Element Select下拉框 选中后视图没有渲染等问题
Element Select下拉框 选中后视图没有渲染等问题解决办法:实质就是数据层级太深,当数据改变后,视图没有重新渲染,所以通过$forceUpdate() ,来强制刷新视图,重新渲染,这个比较消耗性能。也可以在 change事件中直接通过this.$forceUpdate()是一样的效果。select 选择项 已经选择值,也拿到选择的值了,但是就是没有通过 表单校验。我之前就是这个问题导致的原因是使用了Change来触发这个校验规则,把他修改为blur修改为: 就修改下触发方式就可以了原创 2021-03-18 17:47:57 · 2716 阅读 · 0 评论 -
手动清空Element Select选择框内容 v-model 和 option下拉框选项 导致无法select选中,或者选中视图不渲染问题,
有时候一些需求,需要上下两个Select 进行联动,比如名称/id选择框的内容需要根据 科目选中后的内容,来进行搜索,所以当 科目清空后 名称/ID 需要清空 v-model 的值。以及 el-option下拉框的选项。可以通过 <template v-if=“依赖项的选择值v-model值”></template> 来动态实时清空下拉框。然后通过Change 事件 来清空 v-model 值,如果通过Change事件手动清空v-model 值后导致 该...原创 2021-03-18 17:32:58 · 4054 阅读 · 1 评论 -
Elementui select 设置点击事件,在Change事件前触发
想要在changge事件触发前,来触发一个事件,可以直接在 Select 选择器上面添加点击事件,但是这样点击事件是不会生效的,需要在点击事件后面加上native <el-select v-model="list.userJumpId" clearable placeholder="请选择二跳页名称/ID" style="width: 250px" :disabled="use原创 2021-03-18 17:08:40 · 15621 阅读 · 0 评论 -
element-ui中table表头错位问题
body .el-table th.gutter{ display: table-cell!important;} body .el-table colgroup.gutter{ display: table-cell!important;}重点:把这些样式添加到到index.html中、或者app.vue中(必须是入口文件,才能全局起作用!)例如我的项目是next框架搭建的项目,所以直接放在全局的样式文件中...原创 2021-03-18 16:49:51 · 169 阅读 · 0 评论 -
elementui select 赋值后,回显没有默认选中label,而是显示value值
bug示意图: 给 select 赋值,select 展示的却是value的数据, 不是我们想看到 label 对应的数据,而且在下方的选择列表中并没有选中传递过来的数据这个问题一般是 select v-model 所绑定的属性的数据类型和 可以选择列表中的value的数据类型不匹配造成的。比如: 我的 v-model 绑定的是 dialogData.weChatAutoSendMessageTaskDO.weChatRobotId ,回显就是自己主动给这个 v-model 赋值,如果你给这个 v-原创 2021-02-25 14:26:39 · 4774 阅读 · 1 评论 -
DateTimePicker 日期时间选择器报错 Cannot read property ‘getHours‘ of undefined, 无法选中`[__ob_: observer__]`时做判断
我在一次开发中遇到了这个情况:使用DateTimePicker 日期时间选择器,报错 Cannot read property ‘getHours’ of undefined,这个原因是,这个DateTimePicker 日期时间选择器 v-model 绑定的属性对应的数据类型,只能是 String() 类型的,其他数据类型均会报错,我这边是因为接口要求,改成了数组类型,所以报错了。这是个人的部分代码: <el-date-picker v-model="searchFo原创 2021-01-31 18:11:50 · 2819 阅读 · 2 评论 -
前端js vue遇到的一些简单的数据处理-持续更新
1. 数据处理: 直接从后台返回数据取出自己想要的属性,并将其修改成自己想要的属性名:list - 为需要处理的数组value label: 是想要需要的属性名item.nichname item.nickname,是上面需要被修改属性名背景:就是修改请求回来的数据中某些数据的字段名,修改成自己想要的字段名 const list007 = list.map((item) => { return { value: item.platformUid,原创 2021-01-20 14:51:22 · 701 阅读 · 0 评论 -
element 时间日期选择器el-date-picker点击清空按钮报错 Cannot read property ‘0‘ of null
在使用DatePicker日期选择器选择日期范围的时候,会用到一个属性clearable。这个属性是Boolean变量,用于决定是否显示清除按钮,默认为true。<el-date-picker v-model="value" type="daterange" :clearable="true" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-p原创 2021-01-13 22:44:53 · 9718 阅读 · 5 评论 -
element ui 组件踩坑记录--后台管理系统-最全
说明:很久没有开发过后台管理系统,elementui都好久没有用过了,踩了一些小坑,特意记录下:element 特点:a.组件的一般输入的值/可以选择的值,都是绑定在v-model 上面b. 在组件上面绑定值,一般来说需要 :属性名=属性值 ,这个写法c. 在组件上面设置 style=“width: 300px” 可以直接修改组件的宽度1. input 组件–输入框 ,防止用户输入空格-在v-model 后面加上 .trim: <el-form-item label="任务原创 2021-01-13 22:29:47 · 2299 阅读 · 1 评论 -
element ui实现自定义上传文件-以及解决已上传文件列表消失问题
自定义上传按钮,非自动上传,效果图action - 就是上传的接口地址accept - 是限制上传文件格式,设置后只能上传该格式文件,选取-选取按钮只是选择了文件 ,但是并没有上传 <el-upload class="upload-demo inline-block" :action="commonApi02" ref="upload02" :on-preview="handlePreview"原创 2021-01-13 21:32:15 · 6120 阅读 · 4 评论 -
vcode tsconfig.json 无故报错 -- 找不到任何输入
在项目中 tscofig.json 老是无故报错,如下在配置文件“e:/Hbuilder/work/03_ceshi02/tz-interact-v1.2.5/tsconfig.json”中找不到任何输入。指定的 "include" 路径为“["**/*"]”,"exclude" 路径为“[]”。解决办法如下:在项目根目录下建立一个 .ts 后缀名结尾的空文件然后在 tsconfig.json 文件中 添加一个键值对,键名: files ,值是一个数组,然后里面的内容是 刚才新建文件夹名字。如图原创 2020-10-15 10:34:42 · 9815 阅读 · 8 评论 -
身份令牌toKen Vuex + localStorage结合存储
前提:我们都知道在登陆的时候后台会返回一串字符串,也就是token, 也是我们常说的身份令牌, 在后续的请求中只有在请求头中携带了token才会被允许访问后台数据,因此如何存储token就显得尤为重要。如果直接将 ToKen 存储在 Vuex容器中,好处: 1. 获取方便2.响应式缺点: 只要页面一刷新就数据了。为了持久化,还需要把 Token 放到本地存储(localStorage–除非手动清除,永久存在)持久化所以,我们采取 Vuex 和 本地存储相结合的方式 来存储 Token我们可原创 2020-08-17 23:42:08 · 957 阅读 · 5 评论 -
axios 最全 请求拦截器 响应拦截器 配置公共请求头 超时时间 以及get delete post put 四种请求传参方式
axios 拦截器请求拦截器请求拦截器的作用是在请求发送前进行一些操作例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易响应拦截器响应拦截器的作用是在接收到响应后进行一些操作例如在服务器返回登录状态失效,需要重新登录的时候,跳转到登录页 # 1. 请求拦截器 axios.interceptors.request.use(function(config) { console.log(config.url) # 1.1 任原创 2020-08-17 23:05:23 · 1619 阅读 · 0 评论 -
Vue项目开发目录结构和引用调用关系
下图为Vue项目文件夹:以下就项目文件夹中的各文件的作用进行介绍:├── build/ # Webpack 配置目录├── dist/ # build 生成的生产环境下的项目├── config/ # Vue基本配置文件,可以设置监听端口,打包输出等├── node_modules/ # 依赖包,通常执行npm i会生成├── src/ # 源码目原创 2020-08-12 13:07:55 · 905 阅读 · 0 评论 -
Vue项目中一些常见的文件名及作用
总结了一些常见的项目文件名称-及其对应的作用常见的文件夹命名src解释:source的简写,指源代码。位置:一级目录。作用:存放源代码。lib/dep/plugins解释:library/dependence/plugins的简写,依赖工具库/框架。位置:二级目录。作用:存放依赖的第三方工具库/框架(如:jquery)。bin解释:binary的简写。位置:一级目录。作用:存放二进制文件(如:*.exe)。dist/build解释:distributi原创 2020-08-11 20:55:41 · 1868 阅读 · 0 评论 -
vue .prettierrc文件常见配置, 以及配置 Prettier - Code formatter 插件 格式化
使用vcode下载安装 Prettier - Code formatter然后在 .prettierrc 配置自己的代码格式{ //每行最多多少个字符换行 "printWidth": 100, // tab缩进大小,默认为2 "tabWidth": 4, // 使用tab缩进,默认false "useTabs": false, // 使用分号, 默认true "semi": false, // 使用单引号, 默认false(在jsx中配置无原创 2020-08-09 21:14:45 · 9565 阅读 · 0 评论