- 博客(27)
- 收藏
- 关注
RSS订阅原创 vue3.0自定义指令实现表格无限滚动
1.代码let Vue = createApp(App)Vue.directive('tableInfiniteScroll', { mounted(el, binding) { let tbody = el.querySelector(".el-table__body-wrapper"); el.tableInfiniteScrollFn = function () { if (this.scrollHeight - this.scrol
2021-12-06 19:25:04
981
原创 nextTick用于数据渲染完
1.判断dom上的数据有没有渲染完成,可以用nextTick来进行判断原理:实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM，...
2021-12-06 19:17:33
740
原创 改变element 的表格样式的滚动条
// 滚动条的宽度 .el-table__body-wrapper::-webkit-scrollbar { width: 6px; // 横向滚动条 height: 6px; // 纵向滚动条 必写 } // 滚动条的滑块 .el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #ddd; border-radius: 3px; }...
2021-10-28 13:50:41
137
原创 JS中filter()方法的使用
一、作用filter用于对数组进行过滤。它创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。注意：filter()不会对空数组进行检测、不会改变原始数组二、语法Array.filter(function(currentValue, indedx, arr), thisValue)其中，函数 function 为必须，数组中的每个元素都会执行这个函数。且如果返回值为 true，则该元素被保留；函数的第一个参数 currentValue 也为必须，代表当前元素的值。三、实例
2021-10-28 10:47:50
266
原创 Vue的nextTick详解
代码<template> <div> <ul> <li v-for="(item, index) in list1" :key="index">{{ item }}</li> </ul> <ul> <li v-for="(item, index) in list2" :key="index">{{ item }}</li> </ul&
2021-07-28 15:52:03
660
原创 vue自定义指令实现拖动div
directives: { drag: { // 指令的定义 bind: function (el) { let oDiv = el; //当前元素 let self = this; //上下文 //禁止选择网页上的文字 document.onselectstart = function () { return false; }; oDiv.onmousedow
2021-07-28 15:43:26
358
原创 vue自定义指令实现切换
1.html<div class="panel" v-SelectItem="{className:'panel-model',activeClass:'active-model',currentIndex:SelectIndex}"> <div class="panel-model" v-for="(item,index) in State" :key="index" @click="SelectIndexFun(index)"> <span>{{item.M
2021-07-01 10:47:15
180
原创 vue如何在require里面使用变量插入图片
1.看如下代码！for(let i=0;i<newV.length;i++){ this.XXX.push(require('@/assets/img/res/' + newV[i].number +'.png' ))}关键的是图片的路径一定不能写错 否则会报错！
2021-07-01 10:26:02
1587
1
原创 解决vue3.0中语法检出出现any等问题
1.解决在setup中使用props时出现如下图出现上面问题可以找到tsconfig.json文件里面的“strict”: true,这个代码改成false“strict”: false这个问题就可以解决…2.解决出现any语法等问题,找到tsconfig.json文件里面的"noImplicitAny"参数,如果没有就自己创建,然后设置“noImplicitAny”: false就可以解决出现any等的一些问题...
2021-06-30 17:08:25
3318
原创 vue3.0的mitt使用
1.安装依赖npm install --save mitt 2.在main.ts或者main.js同级目录下建立一个bus.js文件import mitt from "mitt";const bus = {};const emitter = mitt();bus.$on = emitter.on;bus.$off = emitter.off;bus.$emit = emitter.emit;export default bus3.在需要用bus.js的组件中引用<templ
2021-06-15 21:02:18
4013
2
原创 vue3.0父传子，父传孙，子传孙，孙传父，孙传子的传值
1.父组件<template> <div class="Parent" ref="Parent"> <el-button @click="Responsive">父组件执行方法</el-button> <Subcomponents></Subcomponents> </div></template><script lang="ts">import { defineCo
2021-06-15 20:53:31
2568
1
原创 element-ui自适应问题
1.因为px转rem的插件只能转换文件的px，不能转换内联的style，比如下面的就不能被转换<el-table-column prop="name" label="姓名" min-width="28%"> </el-table-column> <el-table-column prop="phoneNumber" label="手机号" width=120px></el-ta
2021-05-26 16:04:32
4455
原创 如何避免直接修改prop
1.父组件子组件派发事件<button @click="OnClick"></button>OnClick(){ this.$emit('add',1)}然后父组件接收事件<zi @add="Addage"></zi>Addage(number){ console.log(number)}这个时候传过来的number就是子组件传过来的1.所以最终输出就是1...
2021-05-26 14:37:31
316
原创 阻止按钮冒泡事件
1.冒泡事件<div id='div' onclick='alert("div");'> <ul onclick='alert("ul");'> <li onclick='alert("li");'>test</li> </ul></div>如果点击之后，会依次弹出"li"-“ul”-“div”,弹出是从里面往父级元素执行vue里面的div<div class="item-tip" @click="TipSho
2021-05-25 10:12:58
808
原创 渐变色字体有时候不显示问题
1.使用渐变色的字在经过插件px转rem之后，渐变色的字会出现不显示的问题用下面的代码解决 background: linear-gradient(0deg, #807de1 0%, #218cde 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;就可以解决转换rem之后渐变色字体就会正常显示了...
2021-05-24 20:21:45
1249
原创 如何Vue屏幕自适应
1.安装npm install lib-flexible --save-devnpm i postcss-px2rem --save2.引入在main.vue文件引入import 'lib-flexible'3.继续引入在vue.config文件写入(如果没有就创建一个)css: { loaderOptions: { css: {}, postcss: { plugins: [ require('postcss-px2r
2021-05-24 10:01:41
276
原创 如何vue自定义按钮组件
1.首先写个公共的button组件,我起的名字是MybuttonUI.vue,如下面代码<template> <div @click="handleClick" :class="type" class="btn" :style="buttonstyle">{{buttonname}}</div></template><script>export default { name: "MybuttonUI", components:
2021-05-21 20:21:33
1989
原创 关于Vue阿里云播放视频
首先,新建一个组件，名字随便取我取的是VueAliplayer.vue最后在别的组件引入这个组件就行,需要记住下面几个问题1.播放栏的一些按钮是下面的代码（比如暂停,全屏） skinLayout: { type: Array, default: function () { return [ { name: "bigPlayButton", align: "blabs", x: 30, y: 80 }, {
2021-05-21 20:13:11
1505
原创 数组深度克隆函数
如下面代码：function deepClone(source) { const targetObj = source.constructor === Array ? [] : {}; // 判断复制的目标是数组还是对象 for (const keys in source) { // 遍历目标 if (source.hasOwnProperty(keys)) { if (source[keys] && typeof source[ke
2021-05-21 20:03:49
111
原创 一些时间处理函数
将数据库传过来的数据进行处理第一种方式:function renderTime(date) { var dateee = new Date(date).toJSON(); return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')}第二种方式://new Date转化成时间格式function dateToForma
2021-05-21 20:02:49
54
原创 数组中indexOf的功能
主要是在vue中的使用<div class="CreateTask-fault-moder" v-for="(its, indexs) in AllTaskName" :key="indexs" :class="{'CreateTask-fault-active': faultSelect.indexOf(its)!=-1}" @click="GetClassfaultData(its,indexs)">js代码 var = faultSelect=[], Get
2021-05-21 19:53:28
174
原创 如何使用JavaScript获取和设置CSS变量值
1.CSS全局变量:root { --my-variable-name: #999999;}2.js代码获取css全局变量getComputedStyle(document.documentElement) .getPropertyValue('--my-variable-name'); // #9999993.js代码设置css全局变量document.documentElement.style .setProperty('--my-variable-name',
2021-05-21 09:25:08
916
原创 如何渐变色文字
1.Html代码<div class="div-code"> <span class="div-code-value">S545GQ</span></div>2.CSS重要代码.div-code-value{ background: linear-gradient(-90deg,#0974d8 0%,#3d8ef1 39.990234375%,#7c7ff8 100%); background-clip: text; -webkit-text
2021-05-18 10:46:15
76
原创 Vue生命周期
1、beforeCreate（创建前）表示实例完全被创建出来之前，vue 实例的挂载元素$el和数据对象 data 都为 undefined，还未初始化。2、created（创建后）数据对象 data 已存在，可以调用 methods 中的方法，操作 data 中的数据，但 dom 未生成，$el 未存在 。3、beforeMount（挂载前）vue 实例的 $el 和 data 都已初始化，挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。data.messa
2021-05-18 10:27:05
39
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人