js
关注
分享
扫一扫
Liang_Cheng_Jiu
这个作者很懒，什么都没留下…
展开
-
vue3 hooks element table 动态多列合并单元格
vue3 hooks element table 合并多列单元格函数原创 2022-08-19 14:21:32 · 1169 阅读 · 1 评论 -
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 · 615 阅读 · 0 评论 -
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 · 872 阅读 · 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 · 1983 阅读 · 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 · 1568 阅读 · 1 评论 -
vue3 封装文件上传组件
由于工作需要，项目中经常需要文件上传这个功能，根据业务的需求，使用vue3 简单封装通用型组件。作用：主要是用来上传图片的一个通用型组件，当然可以上传文件。支持校验 尺寸 ， 像素， 文件大小，可以多文件上传。在下面贴上组件代码：<template> <div class="upload-button"> <template v-if="multiple"> <input ref="input" type原创 2021-07-25 15:29:06 · 3049 阅读 · 0 评论 -
Element Select多选选中项溢出选项框
解决办法添加样式// courseIdClass 自己定义的类名/deep/ .courseIdClass .el-tag { height: 100%; white-space: normal;}这样完美解决 溢出问题。原创 2021-03-18 18:00:31 · 1154 阅读 · 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 · 4374 阅读 · 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 · 16453 阅读 · 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 · 4955 阅读 · 1 评论 -
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 · 2400 阅读 · 1 评论 -
前端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 · 750 阅读 · 0 评论 -
element ui实现自定义上传文件-以及解决已上传文件列表消失问题
自定义上传按钮，非自动上传，效果图action - 就是上传的接口地址accept - 是限制上传文件格式，设置后只能上传该格式文件，选取-选取按钮只是选择了文件 ，但是并没有上传 <el-upload class="upload-demo inline-block" :action="commonApi02" ref="upload02" :on-preview="handlePreview"原创 2021-01-13 21:32:15 · 6346 阅读 · 4 评论 -
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 · 1645 阅读 · 0 评论 -
JS函数简单的底层原理 -变量重复声明无效，隐式申明，变量提升，函数提升，以及堆栈内存的变化
JS函数简单的底层原理（个人理解）：已经使用var申明且赋值，若再次申明，则第二次申明无效。2.在同一个作用域下，只要是发生了同名，且变量完成赋值，后者会覆盖前者。存在两个相同的函数名的函数，后一个函数会覆盖前一个函数。用var声明的变量（需要赋值）亦是如此。3.js代码执行机制从上至下, 作用域查找机制 从里到外，就近原则。4.在预解析阶段,会给var申明的变量,和函数提升的函数,分配内存空间(堆内存或者是栈内容空间).这里注意this的指向问题.5.在函数中, 如果有 不用 任何声明符号声原创 2020-07-15 21:28:39 · 4861 阅读 · 0 评论 -
JS快速实现深拷贝--一行就搞定了
实现深拷贝的方式一：封装一个函数，判断数据类型，利用递归，实现深拷贝。 let obj = { name: '1张三丰', age: 22, messige: { sex: '男', score: 16 }, color: ['red', 'purple', 'qing'] } let.原创 2020-07-21 10:59:49 · 4844 阅读 · 0 评论 -
JS原生封装动画函数
封装一个简单的原生匀速动画函数/** * 匀速动画函数 * @param {位移的元素} elm * @param {位移的目标位置} target */function moveAnimation(elm, target) { clearInterval(elm.timeID); let position = elm.offsetLeft; let step = (target - position) > 0 ? 10 : -10; elm.timeI原创 2020-07-25 12:00:08 · 2125 阅读 · 0 评论 -
前端开发中使用mock模拟数据
使用mock进行模拟数据开发第一步：npm i mockjs -D 这里必须加-D，因为我们只是开发环境使用第二步：在 main.js 文件中引入mock：import ‘@/mock’第三步：创建mock文件夹，里面模拟自己需要调接口返回的假数据// 引入随机函数import { Random } from 'mockjs'// 引入Mockconst Mock = require('mockjs')const userListData = Mock.mock({ 'data|1原创 2020-07-25 11:35:42 · 2736 阅读 · 0 评论 -
原生实现随机点名
原生实现随机点名<!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> #name_box li {原创 2020-07-05 09:00:53 · 4191 阅读 · 0 评论 -
计算找到出现最多的数字和次数 ，实现数组去重 ，进行排序。
实现 1.计算找到出现最多的数字和次数 2. 实现数组去重 3. 进行排序<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></原创 2020-06-19 10:46:57 · 4874 阅读 · 0 评论 -
js 简单的数组去重13种方法
js 数组去重十几种数组去重的方法，有的去重构思可以大致相同。上篇数组去重的几种方法var arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5];var newArr = [];for (let i = 0; i < arr.length; i++) { if (newArr.indexOf(arr[i]) == -1) newArr.push(arr[i]);}for (let i = 0; i < arr.length; i++) { i原创 2020-06-02 23:42:40 · 4213 阅读 · 1 评论 -
四种简单的数组出重
数组出重的四种方法使用 indexOf 去重核心原理： indexOf 可以检测数组中有没有该项，没有就回 -1 let ar = '1216436494679790'; let arr = ar.match(/./g); //将字符串转换为数组 let array = []; for (let i = 0; i < arr.length; i++) { if (array.indexOf(arr[i]) == -原创 2020-06-01 22:50:33 · 4223 阅读 · 0 评论 -
JS 原生实现复选框全选反选功能
JS 原生实现复选框全选反选功能按钮功能实现思路：全选按钮： 直接将全选按钮的状态赋值给每一个 复选框。复选框：只有当所有的复选框选中时，全选按钮才能选中，所以每当复选框每点击一次就要检测所有的复选框有没有选中，本方法是设置一个开关flag ， 来筛选出复选框都选中的情况。反选按钮功能：直接将此时按钮的状态取反即可。<body> <input type="checkbox" id="checkbox">全选 <input type="button" id="bt原创 2020-05-23 22:51:08 · 5906 阅读 · 0 评论 -
JS原生封装时间函数 日期格式过滤
函数封装 - 日期格式化封装 // 函数封装 - 日期格式化封装 // 例：调用函数 formatDate()，返回结果为 "2020-xx-xx" // 函数名： formatDate // 参数： 没有 // 返回值： 有 function formatDate() { //创建一个日期对象 var date = new Date();原创 2020-07-25 12:26:42 · 2337 阅读 · 2 评论