- 博客(57)
- 收藏
- 关注
RSS订阅原创 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
503
原创 踩坑记录: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/[email protected] // 安装指定版本第二种方式在vscode终搜索0.0.0.0,然后修
2022-04-16 23:42:43
2467
3
原创 git 本地重新关联新的远程仓库命令/查看本地关联远程仓库
git remote -v // 查看本地已经关联的远程仓库git remote rm name // # 删除远程仓库git remote rename old_name new_name // # 修改仓库名git remote add name 远程仓库地址 // name 为要取的仓库名字 远程仓库地址 为要关联的远程仓库地址...
2021-11-06 17:48:17
2270
原创 nvm切换node版本基本操作篇
前提：由于某些原因需要切换 node版本，本人刚好使用的是nvm来管理node版本，一直使用的是14.11.0 node版本，至于nvm怎么安装，可以看我之前文章文章或百度。基础命令：所以我们要切换node版本可以使用 nrm list available,看看当前nvm支持的node版本.然后使用 nvm ls 查看本地已经安装的 node 版本须知：切换了node版本需要重新下载 nrm npm vue脚手架 或 react 等 然后使用，npm install vxxxx(版本号)这个命
2021-09-02 16:29:51
12915
原创 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
810
原创 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
1674
原创 多个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
1352
1
原创 vue3 封装文件上传组件
由于工作需要，项目中经常需要文件上传这个功能，根据业务的需求，使用vue3 简单封装通用型组件。作用：主要是用来上传图片的一个通用型组件，当然可以上传文件。支持校验 尺寸 ， 像素， 文件大小，可以多文件上传。在下面贴上组件代码：<template> <div class="upload-button"> <template v-if="multiple"> <input ref="input" type
2021-07-25 15:29:06
2923
原创 element from表单个别select 出现 一开始就校验了数据，且有数据还通不过校验，选中的项叉不掉问题。
问题1： element from表单个别select 出现 一开始就校验了数据，且有数据还通不过校验。前提条件： 校验规则都设置正确，都设置prop rules等情况下出现这个问题。下面是我设置的规则校验：出现原因： 在页面数据回显时的数据赋值方式不正确导致的（不一定是这个位置赋值导致的，也有可能是其他地方赋值导致的）。解决办法： 给深层次对象赋值时，使用this.$set来赋值。拿这个courses来说原本是 this.list.courseTimes = [...autoCourseT
2021-07-01 09:52:42
871
原创 element table 表格设置max-height 没有出现滚动条，多渲染了一列。
个人理解： 设置max-height后会多渲染一列，这一列应该是用来承载滚动条的，但是因为某种原因，滚动条没有被渲染出来，就出现了多渲染了一列，这一列里面没用任何东西。设置后效果图：样式代码：/deep/.el-table__body-wrapper { &::-webkit-scrollbar { /* 滚动条整体样式 */ width: 6px !important; /* 高宽分别对应横竖滚动条的尺寸 */ }}...
2021-06-04 18:58:30
3948
2
原创 根据条件动态修改element 组件深层次样式
开发前提： vue elementUI在开发中有时候 element 中我们使用的某个组件的样式不符合我们的需求，直接写行内样式，有时候会发现并不会生效，直接将样式写在 style 标签中虽然样式会生效，但是不符合我们动态修改样式的需求。因此可以考虑在给 使用的ui组件 动态添加一个类名，或套上一个 div ，动态在这div上添加类名，然后再下方 style对应类名下写 要修改的 组件样式。下面贴上我的代码： <div class="item"> <el-radio
2021-06-01 14:19:32
2199
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
3381
原创 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
1339
原创 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
505
原创 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
1428
原创 Element Select多选选中项溢出选项框
解决办法添加样式// courseIdClass 自己定义的类名/deep/ .courseIdClass .el-tag { height: 100%; white-space: normal;}这样完美解决 溢出问题。
2021-03-18 18:00:31
1089
原创 Element Select下拉框 选中后视图没有渲染等问题
Element Select下拉框 选中后视图没有渲染等问题解决办法：实质就是数据层级太深，当数据改变后，视图没有重新渲染，所以通过$forceUpdate() ，来强制刷新视图，重新渲染，这个比较消耗性能。也可以在 change事件中直接通过this.$forceUpdate()是一样的效果。select 选择项 已经选择值，也拿到选择的值了，但是就是没有通过 表单校验。我之前就是这个问题导致的原因是使用了Change来触发这个校验规则，把他修改为blur修改为： 就修改下触发方式就可以了
2021-03-18 17:47:57
2652
原创 手动清空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
3782
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
15105
原创 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
148
原创 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
4611
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
2719
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
676
原创 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
9607
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
2237
1
原创 解决select 下拉框选择器 input输入框 、时间日期选择器el-date-picker 赋值后，出现无法修改选中更改问题
ElementUI时间选择器,传入时间赋值后之后无法改变// ElementUI的表格组件 <el-date-picker size="mini" style="width: 180px" default-value @change="limit_search
2021-01-13 21:59:31
3275
7
原创 element ui实现自定义上传文件-以及解决已上传文件列表消失问题
自定义上传按钮，非自动上传，效果图action - 就是上传的接口地址accept - 是限制上传文件格式，设置后只能上传该格式文件，选取-选取按钮只是选择了文件 ，但是并没有上传 <el-upload class="upload-demo inline-block" :action="commonApi02" ref="upload02" :on-preview="handlePreview"
2021-01-13 21:32:15
5903
4
原创 uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏，portrait则是横屏。因为用户每旋转一次屏幕就会触发里面的onShow钩子，因此在页面显示或横竖屏变化都会触发这函数，来判断是否是横竖屏；onShow(){ uni.onWindowResize(res => { // portrait 竖屏 landscape 横屏 将状态值存储到这个this.landscape变量中 this.landscape = res.deviceOri
2020-11-25 15:58:02
6437
4
原创 uniapp H5页面嵌入微信小程序 ios 下 video组件 播放视频 设置 border-radius overflow:hidden 不生效
在ios 系统中， 设置border-radius 可能会不生效（安卓有效），直接给要设置的元素设置 border-radius属性，再添加下面的代码即可实现功能： -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0);下面贴上自己项目中这一部分代码：...
2020-11-18 14:13:44
2032
2
原创 uniapp h5 页面 解决 ios 长按无法保存图片问题（安卓支持此功能）--实现移动端长按保存图片
H5 页面 移动端实现长按保存图片以及图片显示异常问题uniapp 中的 一些小坑：image 标签中的 src 属性不支持 写 @uniapp 写 h5 页面 ， image 标签 在 ios 端 不支持 长按 保存图片，使用canvas 标签包裹img标签，然后将 image 标签更换为 img 标签，添加-webkit-touch-callout: default 即可，如下所示： <view class="linkreceive"> <
2020-11-06 20:40:16
3461
4
原创 uniapp h5页面 在移动端 使用clipboardone.js插件实现 写入剪切板 -- 安卓和ios安美适配（仅测试部分机型）
unipp 中的向 剪切板写入 内容的 api 不支持 h5页面，我们可以通过clipboardone.js 第三方插件来实现向 剪切板 写入内容下载包 npm npm install clipboard --save建立一个新的 js 文件 ，写入一下内容：import Clipboard from 'clipboard';export function handleClipboard(text, event, onSuccess, onError) { event = eve
2020-11-06 20:22:37
822
原创 uniapp h5 页面在移动端 遮罩层禁止滚动 --安卓和ios端完美适配（只是测试了部分机型）
使用unipp 写h5 页面，在移动端，禁止 遮罩层 出现 滚动问题。直接在标签上面写上这个就可以了 @touchmove.stop.prevent="moveHandle" ，然后编写一个对应空的事件即可。一般的 小程序 遮罩层禁止滚动可以直接在标签上面设置： catchtouchmove 即可...
2020-11-06 19:54:19
1003
原创 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
9716
8
原创 切换node版本 nvm 的基本使用 -- 以及安装公司特有的镜像源
我们在日常开发，或对现有产品进行迭代更新， 因为不同的项目可能依赖的node 版本 不一致，如果电脑上不安装对应版本的node,可能开发/迭代更新时，出现未知错误，因此我们开发/迭代更新项目时，经常要安装不同版本的node,这无疑是非常麻烦的。这个时候我们就需要借助nvm 来对 node 版本进行切换了，我来讲讲 nvm 日常操作吧。初步使用安装nvm卸载掉原有的 电脑上的 node （没有的话可以忽略这一步）2.去官网 下载 安装nvm ，然后选择 nvm-setup.zip 下载安装注
2020-09-26 17:08:38
433
原创 Git 命令大全整理
git是一个非常好用的分布式版本管理工具，功能比svn强大，与SVN不同点是Git去中心化，每一个分支都是一个中心，并且支持本地仓库存储，像如今很多大公司都用git做版本控制。话不多说，具体命令整理如下：git拉取远程代码git clone https://xxx.gitgit拉取远程指定分支下代码（-b 分支名称）git clone -b v2.8.1 https://xxx.git初始化一个本地仓库，在同级目录下会出现一个隐藏的.git文件git init查看git的配置信息gi
2020-08-26 20:13:17
146
原创 模块化封装 --- 双ToKen 实现免登录步骤详解
本文大概配置了下 双token免登录关于下文提到的store中封装的保存token的方法，请参考本链接：/** * 封装 axios 请求模块 */import axios from 'axios'import jsonBig from 'json-bigint'import store from '@/store' import router from '@/router' // 导入路由模块// 配置公共请求头const request = axios.create({ bas
2020-08-20 18:55:07
631
原创 axios 请求的配置选项
这些是创建请求时可以用的配置选项。只有url是必须的，如果没有指定method，请求将默认使用get方法。axios其他配置如请求拦截器响应拦截器 超时等{ // url 是用于请求的服务器 URL url: '/user', // method 是创建请求时使用的方法 method: 'get', // default // baseURL 将自动加在 url 前面，除非 url 是一个绝对 URL
2020-08-20 18:24:08
1000
原创 身份令牌toKen Vuex + localStorage结合存储
前提：我们都知道在登陆的时候后台会返回一串字符串，也就是token, 也是我们常说的身份令牌， 在后续的请求中只有在请求头中携带了token才会被允许访问后台数据，因此如何存储token就显得尤为重要。如果直接将 ToKen 存储在 Vuex容器中，好处： 1. 获取方便2.响应式缺点： 只要页面一刷新就数据了。为了持久化，还需要把 Token 放到本地存储（localStorage–除非手动清除，永久存在）持久化所以，我们采取 Vuex 和 本地存储相结合的方式 来存储 Token我们可
2020-08-17 23:42:08
945
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
1600
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人