js获取数组最后一位元素的四种方法 一、 利用lengthlet arr=[1,2,3];arr[arr.length-1] //3二、 数组pop方法let arr=[1,2,3];arr.pop() //3删除数组的最后一位 并返回 会修改原数组三、 数组slice方法let arr=[1,2,3];arr.slice(-1) //[3]返回值为包含最后一位元素的新数组四、 数组at方法（ES2022新特性）let arr=[1,2,3];arr.at(-1) //3...
drag拖拽事件 解决drop dragend无效问题 被拖拽元素<el-tag nativeOnDragstart={(e: DragEvent) => this.dragStart(e)} nativeOnDragend={() => console.log('拖拽结束')}></el-tag>注: 这里使用nativeOnDragstart是因为我再tsx中使用了elementui标签 常规vue可以使用@dragstart.native 不是element标签正常使用dragstart事件就可以. d
vue on 监听多个事件 常规vue写法<el-input v-on="{ 'focus': onFocus, 'input': () => { console.log('触发input') }, }"></el-input>tsx vue写法<el-input { ...{ on: { 'input': onInput, 'focus': () =>
tsx jsx 写vue时和 @事件.native 相同效果写法（如解决el-input绑定键盘事件无效问题） 常规vue写法由于element-ui把input进行了封装，input外面是多一层div的对于el-input，使用 @keyup.enter是无效的，需要加上native限制符。<el-input v-model="input" @keyup.native="inputSearch"></el-input>上面是看其他文章抄的TSX的vue写法<el-input v-model={this.input} nativeOnkeydo
动态计算一串字符串的宽度（一般用于动态计算input框宽度 input框宽度自适应） InputWidth() { const spanLable = document.createElement('span'); spanLable.innerHTML = content; spanLable.style.visibility = 'hidden'; spanLable.style.float = 'left'; spanLable.style.fontSize = '12px'; document.body.appendChild(sp..
tsx中使用vue路由钩子 import { Vue, Component } from 'vue-property-decorator';@Component({ name: 'ComponentA', components: {}, beforeRouteLeave(to: any) { }})export default class ComponentA extends Vue { //计算属性 get list() { return [] } //方法 getList()
highcharts去掉右上角和右下角 这里写自定义目录标题去掉右上角去掉右下角记录一下记录一下记录一下去掉右上角exporting: {enabled:false}去掉右下角credits: {enabled:false}记录一下记录一下记录一下
js判断移动端页面滚动方向 var startY = 0;var that = this; document.addEventListener("touchstart",function(e){ startY = e.changedTouches[0].pageY; },false); document.addEventListener("touchmove",function(e){ var endY = e.changedTouches[0].pageY; var changeVal = en
elementui从旧版本升级成新版本 1、npm uninstall element-ui2、npm i element-ui3 、找到main.js将theme-default 替换为theme-chalkimport 'element-ui/lib/theme-default/index.css’替换为import ‘element-ui/lib/theme-chalk/index.css’
echarts在坐标线一端或两端加箭头 以下演示在横坐标线上加箭头xAxis:{ axisLine:{ lineStyle:{ color:'#7078FF', }, symbol:['none','arrow'],//箭头一端没效果,一端箭头 symbolSize:[7,10], symbolOffset:[0,8] }, },symbol值为’none’两端无箭头symbol值为[‘none’,‘a
swiper写中间大两边小的轮播图 注：我是在vue项目中使用vue-awesome-swiper插件实现的 和swiper一样没有任何区别html:<swiper :options="swiperOption" > <swiper-slide></swiper-slide> <swiper-slide></swiper-slide> <s...
在项目中使用rem自适应单位 // .js(function(doc,win){ let docEL = doc.documentElement let resize = 'orientationChange' in window?'orientationChange':'resize' docEL.style.fontSize = 20*docEL.clientWidth/640+'px' ...
小程序中使用函数动态定义标签类名 使用wxs模块动态定义类名1、使用wxs标签// wxml<text class="{{cm.style(status)}}">{{status==0?'审核中':status==1?'认证成功':status==2?'认证失败'}}</text><wxs module="cm"> var checkClass = function(status){...
在微信小程序中查看微信公众号 使用 official-account 标签实现小程序中点击查看微信公众号注意事项：1、需要小程序基础库版本2.3.0以上2、需前往小程序后台，在“设置”->“关注公众号”中设置要展示的公众号。注：设置的公众号需与小程序主体一致。3、场景值：（1）扫描二维码、扫描小程序码 （2）从聊天顶部场景打开wxml<official-account></offic...
css-display/visibility 关于display:none与visibility:hidden的区别display:none和visibility:hidden的区别是：1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；2.使用visibility:hidden比display...
文档碎片的应用 文档碎片对浏览器性能的提升每次对dom的操作都会触发”重排”（重新渲染界面，发生重绘或回流），这严重影响到能耗，一般通常采取的做法是尽可能的减少 dom操作来减少”重排”一、向body中插入一百个元素这里我们用网上众所周知的插入100个元素的例子第一种方法：for(var i = 0;i < 100;i++){ let div = document.createElem...
promise 实现promise.all第一种实现：function all(promises){ return new Promise((resolve,reject)=>{ let arr = [];//用来存放每一次成功的promise let index = 0 let processdata=(i,key)=>{ ...
vue-swiper 关于在vue中使用swiper无法loop播放的问题<template> <div> <swiper :options="swiperOption" v-if='img.length>0'> <swiper-slide v-for="(slide, index) in img" class='swiper' :...
关注
