- 博客(37)
- 收藏
- 关注
RSS订阅原创 vue仿京东h5头图视频/图片轮播效果组件
<template> <div class="activity-rule"> <div v-if="videoUrl" style="position: relative;"> <!-- 视频和图片 --> <van-swipe class="my-swipe" indicator-color="#1989fa" :loop="false" :show-i
2022-05-06 20:53:37
1866
原创 背景色透明度影响字体的透明度
使用rgba div{ background-color: rgba(245, 34, 45, 0.1); span{ color: #F5222D; } }
2022-04-30 14:54:12
442
原创 前端技术文档及工具汇总
Vue Canvas Poster 添加链接描述 环信webim 添加链接描述 微信JS-SDK接口 添加链接描述 腾讯超级播放器TCPlayer 添加链接描述 Airbnb JavaScript Style Guide 添加链接描述 中 添加链接描述 英TGideas腾讯游戏前端规范文档 添加链接描述...
2022-03-09 15:34:39
1573
原创 取出对象数组中某个属性组成新的数组并去重
const arr = [ { name: '11', list: [111, 222, 333, 444] }, { name: '2222', list: [222, 333, 444] }, { name: '3333', list: [111, 666, 777] }]const newArr = arr.reduce((pre, cur) => Array.from(new Set([...pre.list || pre, ...cur.list])))
2021-09-24 16:24:50
1092
原创 input密码框password在ie/edge浏览器下默认的icon去除
问题如下/*ie*/input::-ms-reveal { display: none;}input::-ms-clear{ display: none;}/*edge*/input::-o-clear{ display: none;}
2021-07-15 10:36:56
1475
原创 节流和防抖 (总结)
节流: 多次操作,时间内只触发一次防抖: 连续操作,时间内只触发最后一次节流1 (时间戳) const throttle = (fn, delay) => { let last = 0; return (...arg) => { let now = new Date() if(now - last > delay) { fn.apply(this, arg) last = now
2020-11-23 16:11:23
111
原创 el-upload实现简单的图片上传组件(可预览,删除,下载)
父组件<ImgArr @updateData="updateData" :params="options"/>updateData (val) { this.imgArr = val},dara: { return { options: { imgArr: [] }, }}组件完整代码如下:<template> <div class="imgArr-component"> .
2020-08-31 17:28:41
1553
原创 记一次vue+axios配置代理
config.js proxy: { '/Admin': { target: 'http://159.138.36.95', // 跨域地址 changeOrigin: true, //是否跨域 secure: false, //是否使用https }, }axios配置拦截器等import axio...
2020-03-29 18:07:13
2196
原创 el-upload实现导入excel表格(formData)
需求如下:实现代码html<el-upload accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" action="" :before-upload="beforeUpload"> <el-bu...
2020-03-20 11:01:36
2745
原创 el-drawer内容太多显示滚动条
需求如下:<style lang="less">.el-drawer.rtl{ overflow: scroll;}// rtl : 从有右往左打开
2020-03-18 18:38:47
6421
原创 el-upload简单二次封装
代码如下<template><div class="portal-main-common g-main-upload" > <el-upload v-on="$listeners" v-loading="loading" v-bind="$attrs" class="avatar-uploader" :action="baseU...
2020-03-13 16:52:45
1425
原创 el-upload实现只上传一个文件且再次上传会覆盖前面的文件
需求: 只能上传一个文件,再次上传覆盖之前的文件代码如下:<el-upload multiple accept=".p12" :disabled="disabled.weAppPay" :action="baseUrl" :limit="1" :before-upload="beforeU...
2020-03-13 16:34:11
13244
1
原创 el-table中el-input超出显示省略号,hover显示所有且可复制(el-popover和el-tooltip)
需求如下:elementui提供了2种方式:实现代码如下:<el-tooltip class="item" effect="light" :content="scope.row.reqData" placement="top-start"> <div slot="content" style="width: 300px;">{{scope.row.reqD...
2020-03-11 17:43:00
9287
4
原创 el-cascader级联选择器选中任意一级去掉按钮
问题: elementui中,级联选择的样式有个按钮,产品要求去掉我想去掉按钮,把按钮事件在点击后面value对应的事件里触发就完事了.然而我想多了,翻遍了element的文档,就是没看到对应的事件,索性看下源码原来那个change事件就是在radio注册的事件而redio后面的这个span并没有注册事件.那就简单了,在这个span上注册事件去调用radio的事件就可以了 mo...
2020-01-16 17:16:07
5144
11
原创 数组循环相关方法
forfor循环的i是Number类型，开销较小,速度快let arr = [1,2,3]for(let i = 0; i < arr.length; i++){ console.log(arr[i]);}// 1// 2// 3forEachforEach() 数组的每一个元素执行一次提供的函数,没有返回值,不支持 return 和 breaklet arr =...
2020-01-16 11:26:40
122
原创 计算对象数组某个属性的和
let datalist = [ { 'skuId': 3333, 'skuName': 'test1', 'number': 11 }, { 'skuId': 4444, 'skuName': 'test2', 'number': 22 },]let price = datalist.reduce((sum, e) => sum + e.numb...
2020-01-15 17:25:07
3137
原创 两个数组合并成一个对象数组
let arr = [1000,1001,10002,1003]let arr1 = ['zs','ls','ww','zl']let newArr = arr.map((age, i) => ({age, name: arr1[i]}))console.log(newArr);
2020-01-15 17:06:51
4337
原创 对象数组去重(reduce)
var arr = [{ "name": "zs", "age": "11",}, { "name": "ls", "age": "22"}, { "name": "ww", "age": "33"}, { "name": "zs", "age": "11"}];var hash = {};arr = arr.reduce(function(acc, ...
2020-01-15 17:01:32
138
原创 比较两个数组,去除数组中一样的对象
let arr = [{id: 1},{id: 2},{id: 3},{id: 4}]let arr1 = [{id: 3},{id: 4},{id: 5},{id: 6}]arr = arr.filter(item => { let list = arr1.map(v => v.id); return !list.includes(item.id)})cons...
2020-01-15 16:57:05
405
原创 JS判断变量是否为空
export const isEmpty = function(val) { // null or undefined if (val == null) return true; if (typeof val === 'boolean') return false; if (typeof val === 'number') return !val; if (val ins...
2020-01-15 16:53:16
334
原创 JS判断变量类型
export function isString(obj) { return Object.prototype.toString.call(obj) === '[object String]';}export function isObject(obj) { return Object.prototype.toString.call(obj) === '[object Object]...
2020-01-15 16:40:50
105
原创 el-cascader级联选择器的搜索问题(有数据,但是没有搜索出来)
问题重现:当我搜索贵州的时候,并没有显示贵州的公司出现代码如下:然后查看elementui文档,一脸懵然后我就想通过自定义的搜索逻辑去看看,结果发现是一样的,还是没有。无奈之下,只能看源码了。原来是过滤掉了所以问题就出在这个checkStrictly,再回到elementui上在porps里加上这个checkStrictly属性,然后就出来了...
2020-01-15 16:26:06
6782
原创 事件、事件对象、事件流
事件用户点击页面上的某个元素,或者表单上的某个文本框获得焦点等等,这些都是事件事件对象当用户触发我们注册的事件之后,浏览器会创建一个事件对象,这个事件对象就包含了触发事件时的一些信息,比如时间戳,鼠标坐标,事件目标等等。然后浏览器会将这个事件对象,传递给事件处理函数,那么我们只需要在事件处理函数中申明一个形参,接收一下即可。//html<div id="box"></d...
2020-01-14 17:09:22
143
原创 上下文调用函数的三个方法
call方法作用: 调用该函数,并修改函数中this的指向语法: 函数名. call(对象,[实参]);参数详解:第一个参数: 要让函数中this指向谁,就写谁后面的参数: 被调用函数要传入的实参,以逗号分隔function fn(x, y){ console.log(this); // ['a','b','c'] console.log(x + y); //8}...
2020-01-14 16:44:36
352
原创 调用函数的几种方式
普通调用this – > windowfunction fn(){ console.log(this); // window}fn();对象调用this – > objfunction fn(){ console.log(this) // obj}var obj = { f : fn};obj.f();构造函数调用...
2020-01-14 16:41:55
3744
原创 构造函数、原型对象、实例对象关系及原型链
原型链function Person (name, age) { this.name = name; this.age = age;}var p1 = new Person();console.log(Person.prototype) // 指向Person的原型对象console.log(Person.prototype.__proto__.constructor) ...
2020-01-14 16:37:17
135
原创 MVVM和MVC
MVCMVC是一种软件架构模式，也有人叫做设计模式M: Model 数据模型（专门用来操作数据，数据的CRUD）V：View 视图（对于前端来说，就是页面）C：Controller 控制器（是视图和数据模型沟通的桥梁，用于处理业务逻辑）MVVMMVVM，一种更好的UI模式解决方案M：model数据模型V：view视图VM：ViewModel 视图模型MVC vs MVV...
2020-01-14 16:11:17
87
原创 var、let、const的区别
letES6 新增了let命令，用来声明变量。它的用法类似于var。let声明的变量只有在当前作用域有效{ let a = 10; var b = 1;}console.log(b)conosle.log(a)b // 1a // ReferenceError: conosle is not defined不存在变量提升// let 的情况console.l...
2020-01-14 15:58:09
97
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人