- 博客(23)
- 收藏
- 关注
RSS订阅原创 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...
2022-03-18 17:40:14
17980
原创 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
2022-03-11 16:01:21
3729
原创 vue on 监听多个事件
常规vue写法<el-input v-on="{ 'focus': onFocus, 'input': () => { console.log('触发input') }, }"></el-input>tsx vue写法<el-input { ...{ on: { 'input': onInput, 'focus': () =>
2022-01-11 17:13:45
384
原创 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
2022-01-10 17:57:47
2510
4
原创 动态计算一串字符串的宽度（一般用于动态计算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..
2022-01-10 17:41:58
402
原创 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()
2021-11-18 11:45:02
703
原创 highcharts去掉右上角和右下角
这里写自定义目录标题去掉右上角去掉右下角记录一下记录一下记录一下去掉右上角exporting: {enabled:false}去掉右下角credits: {enabled:false}记录一下记录一下记录一下
2021-06-22 15:10:34
521
2
原创 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
2020-08-27 12:05:57
409
原创 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’
2020-08-12 14:52:58
1430
原创 echarts在坐标线一端或两端加箭头
以下演示在横坐标线上加箭头xAxis:{ axisLine:{ lineStyle:{ color:'#7078FF', }, symbol:['none','arrow'],//箭头一端没效果,一端箭头 symbolSize:[7,10], symbolOffset:[0,8] }, },symbol值为’none’两端无箭头symbol值为[‘none’,‘a
2020-05-13 18:27:43
2704
原创 swiper写中间大两边小的轮播图
注：我是在vue项目中使用vue-awesome-swiper插件实现的 和swiper一样没有任何区别html:<swiper :options="swiperOption" > <swiper-slide></swiper-slide> <swiper-slide></swiper-slide> <s...
2020-01-21 16:28:27
4548
4
原创 在项目中使用rem自适应单位
// .js(function(doc,win){ let docEL = doc.documentElement let resize = 'orientationChange' in window?'orientationChange':'resize' docEL.style.fontSize = 20*docEL.clientWidth/640+'px' ...
2019-12-30 14:32:30
195
原创 小程序中使用函数动态定义标签类名
使用wxs模块动态定义类名1、使用wxs标签// wxml<text class="{{cm.style(status)}}">{{status==0?'审核中':status==1?'认证成功':status==2?'认证失败'}}</text><wxs module="cm"> var checkClass = function(status){...
2019-12-28 17:32:40
654
原创 在微信小程序中查看微信公众号
使用 official-account 标签实现小程序中点击查看微信公众号注意事项：1、需要小程序基础库版本2.3.0以上2、需前往小程序后台，在“设置”->“关注公众号”中设置要展示的公众号。注：设置的公众号需与小程序主体一致。3、场景值：（1）扫描二维码、扫描小程序码 （2）从聊天顶部场景打开wxml<official-account></offic...
2019-12-28 16:57:41
1134
原创 css-display/visibility
关于display:none与visibility:hidden的区别display:none和visibility:hidden的区别是：1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；2.使用visibility:hidden比display...
2019-12-18 15:54:58
161
原创 文档碎片的应用
文档碎片对浏览器性能的提升每次对dom的操作都会触发”重排”（重新渲染界面，发生重绘或回流），这严重影响到能耗，一般通常采取的做法是尽可能的减少 dom操作来减少”重排”一、向body中插入一百个元素这里我们用网上众所周知的插入100个元素的例子第一种方法：for(var i = 0;i < 100;i++){ let div = document.createElem...
2019-12-18 14:34:21
188
原创 promise
实现promise.all第一种实现：function all(promises){ return new Promise((resolve,reject)=>{ let arr = [];//用来存放每一次成功的promise let index = 0 let processdata=(i,key)=>{ ...
2019-12-18 14:24:37
190
原创 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' :...
2019-12-18 14:21:27
193
原创 关于js中的slice方法的使用以及封装
slice方法可以传入两个参数 slice(start,end)一 、当只有一个参数start的时候当只有一个参数的时候 数组从start位置开始截取到数组最后一位1、当start小于0let arr = [1,2,3,4,5,6]let newArr = arr.slice(-1)console.log(newArr) //6负数的意义为从slice(arr.length+(-1...
2019-11-15 17:56:53
667
原创 Vue中英文切换
Vue双语言切换一、下载依赖npm install vue-i18n –save二、文件目录assets├── lang├── ├──zh-CN.js├── ├──en.js//zh-CN.jsmodule.exports = { lang:{ helloworld:'你好世界' }}//en.jsmodule.exports = { ...
2019-11-04 16:02:03
247
原创 Vue生命周期简单真切解析
Vue生命周期简单真切解析<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src='node_modules/vue/dist/vue.js'></script...
2019-11-04 15:28:12
122
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人