自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(27)
  • 收藏
  • 关注

原创 vite解决axios post 403错误

解决axios访问某些网站403的问题

2023-07-03 16:20:06 1259 1

原创 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 979

原创 nextTick用于数据渲染完

1.判断dom上的数据有没有渲染完成,可以用nextTick来进行判断原理:实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM,...

2021-12-06 19:17:33 734

原创 改变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 136

原创 JS中filter()方法的使用

一、作用filter用于对数组进行过滤。它创建一个新数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。注意:filter()不会对空数组进行检测、不会改变原始数组二、语法Array.filter(function(currentValue, indedx, arr), thisValue)其中,函数 function 为必须,数组中的每个元素都会执行这个函数。且如果返回值为 true,则该元素被保留;函数的第一个参数 currentValue 也为必须,代表当前元素的值。三、实例

2021-10-28 10:47:50 264

原创 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 658

原创 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 357

原创 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 3313

原创 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 4010 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 2566 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 4454

原创 如何避免直接修改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 315

原创 阻止按钮冒泡事件

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 1243

原创 如何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 1985

原创 关于Vue阿里云播放视频

首先,新建一个组件,名字随便取我取的是VueAliplayer.vue最后在别的组件引入这个组件就行,需要记住下面几个问题1.播放栏的一些按钮是下面的代码(比如暂停,全屏) skinLayout: { type: Array, default: function () { return [ { name: "bigPlayButton", align: "blabs", x: 30, y: 80 }, {

2021-05-21 20:13:11 1497

原创 数组深度克隆函数

如下面代码: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 173

原创 如何使用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 914

转载 超详细的flex布局介绍

下面是文章的介绍地址超详细的flex布局介绍

2021-05-18 11:03:44 89

转载 Vue各类组件之间传值的实现方式

下面链接的这一篇文章介绍的挺具体的Vue各类组件之间传值的实现方式

2021-05-18 11:00:12 57

原创 如何渐变色文字

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关注的人

提示
确定要删除当前文章?
取消 删除