苏七的猫-CSDN博客

js将大数字单位转化成千、万、千万、亿function transform(value: number) { let newValue = ['', '', '']; let fr = 1000; const ad = 1; let num = 3; const fm = 1; while (value / fr >= 1) { fr *= 10; num += 1; console.log('数字', val.

2022-05-20 20:00:19 277

原创 vue监听数组对象

1、要用computed2、watch要写在computed后面，不然监听不到3、要加deep:trueconst tag_list = ref([]); // 这是个数组对象const tagList = computed(()=>{ JSON.parse(JSON.stringify(tag_list.value)) })watch(tagList,(newList)=>{ console.log('qqqqqqq')}, {deep: true })...

2022-01-14 16:43:46 1158

原创多个请求时，想要请求异步执行，并且全部请求执行完再执行后面的代码 promise all

let res = new Promise((resolve,reject)=>{ axios.put(orginUrl, fileInfo.file, { headers: { 'Content-Type': 'multipart/form-data', Authorization: authorization,

2021-12-14 15:53:49 1112 1

原创 vue input框获取焦点选中文字

以 antd vue 为例主要就是这句代码： proxy.$refs.input.select();其实就是调用select()方法<template> <a-input ref="input" v-model:value="newFileName" /> <div class="add_file" @click="addNewFileFun">新建文件夹</div></template><script> impo.

2021-11-26 14:47:29 1619

原创 vue3 使用watch监听数组问题

最近使用vue3.0的watch监听数据时发现一些问题：监听数组时，用splice这种改变数组是正常的，但是如果数组直接置空，则监听失效const array = ref([1,2,3]);const changeArr = ()=>{ array.value = [];}watch(array.value,(now,old)=>{ console.log(now,old); // 触发changeArr的时候，监听不到})解决方案：watch(() => [ar

2021-09-15 10:52:20 7883 1

原创 echarts绘制图表，切换页面后返回，无刷新数据图表不显示问题

使用echarts图表时，会出现首次加载不出来，或者切换页面后，需要强刷新才能出来的问题；这个bug我在本地没有，发布线上才有，所以找到了以下解决方案：在初始化init之前，使用下方代码即可document.getElementById("myChart1").removeAttribute('_echarts_instance_');...

2021-08-05 21:06:19 3455 3

原创移动端js设置rem

750屏幕下：1rem = 20pxvar fun = function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; .

2021-05-13 14:35:11 408

原创 Antd vue table超出隐藏显示省略号

Column里面有个属性ellipsis可以设置超出隐藏，不过很不好用，并不会显示省略号，所以用下面的方法：1.columns:[ { title: '标题', dataIndex: 'name', width:'20%', key: 100, slots: { customRender: 'name' }, },]2.一定要有.ant-table table{table-layout: fixed;} 这一步&

2021-04-25 17:51:19 3673 1

原创 g2的repaint()方法报错

chart.repaint()这个方法被废弃了，要换成chart.render(true);

2021-04-22 19:29:15 334

原创 Antd vue 修改主题色

具体参考Antd vue 官网1.vue.config.js css: { loaderOptions: { less: { modifyVars: { //在此处设置，也可以设置直角、边框色、字体大小等 'primary-color': '#7c6dc5', }, javascriptEnabl.

2021-04-19 17:15:52 2161 1

原创 Antd vue 树形结构 tree组件的增删功能

效果展示：思路：右边的button用插槽的方式添加<template> <div class="m-page"> <div class="content"> <div class="menu-data"> <div class="header"> <span class="name">菜单配置</sp

2021-03-26 18:05:36 1901 9

原创 vue-element-admin 的动态路由权限管理和菜单渲染

最近整理了一下关于vue后台管理项目动态路由权限管理及菜单的渲染：环境：vue3.0+element-plus+vue-router4.0思路：router/index.js文件：配置路由，路由分为两部分：公共路由+动态路由（注意：配置不存在路由跳转到默认页面的代码，需要写在动态路由里，否则会造成刷新页面，跳转到默认页面）router/permission.js文件全局导航守卫，设置路由拦截（在main.js引入）store/modules/user.js 获取用户信息

2021-03-25 11:51:53 4991 3

原创 vue后台管理动态路由-页面刷新之后跳转到默认页面的问题

路由我们是用公共路由+动态路由，写的过程中发现，在动态路由的页面刷新页面后跳转到了默认页面，也就是我们设置的{ path: '/:pathMatch(.*)', redirect: '/dashboard', hidden: true }本来这行代码我是写到公共路由里面了，就会刷新跳到默认页面，解决方法：把这行代码放到动态路由里面去注意：这是vue3.0的写法...

2021-03-24 16:35:36 3572 1

原创 vue之watch监听对象，以及watch内调用methods方法

直接通过watch监听对象，对象的属性值变化并不会触发这个监听，所以通过属性deep:true，可以深入监听，data:{ return { myObj:{ name: 'lily', age: 12 } } }, watch: { myObj: { handler: (val, olVal) => {

2020-12-10 13:50:40 13465 4

原创浅谈React，关于react那些事儿

react是什么？为什么要使用它？React 是一个用于构建用户界面的 JavaScript 库优点：传统的js需要去手动的更新DOM，每次状态改变时，使用js重新渲染整个页面会非常慢，这归咎于读取和更新DOM的性能问题而react运用一个虚拟的DOM实现了非常强大的渲染系统，在react中对DOM只更新不读取。react以渲染函数为基础...

2020-10-10 21:15:53 347

原创腾讯视频播放器使用第二次进入视频不能展示问题

参考链接可见腾讯视频播放器文档使用过程官网很详细，就不写了，这里主要记录一个问题，就是第二次进入视频页面的时候，初始化有问题，所以这里我用了一个方法this.$nextTick(()=>{ 视频初始化})跟我猜测的一样，就是dom还未渲染就执行了视频初始化，所以这里把初始化放在dom渲染完成再执行...

2020-09-28 14:56:27 713

原创云点播使用方法

具体可参考云点播官方文档（1）.在页面中引入文件在合适的地方引入播放器样式文件与脚本文件：<link href="https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet"> <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频，需要在 tcplayer.v4.1.min.js 之前引入 hls.min.0.13.2m.js。-

2020-09-28 11:37:11 3899

原创 vue + antd vue + moment 日期选择器，选择范围限制

首先我们先把环境配置好1.安装antd vue（这里就不介绍了）2.安装moment.js步骤:（1）npm i moment（2)//main.jsimport moment from 'moment';Vue.prototype.$moment = moment;需求1：要求日期不可选择未来时间，日期范围不得超过半年<template> <a-range-picker @change="onChange" @calendarChange="handleCale

2020-09-28 11:00:37 4565

转载 js操作cookie

1.设置cookiefunction setCookie(name,value，Days) { var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();}2.如果过期时间设置为第二天凌晨function setCookieZero(name, va

2020-09-28 10:49:52 483

转载 JS实现HTML标签转义及反转义

将html标签转义function HTMLEncode(html) { var temp = document.createElement("div"); (temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html); var output = temp.innerHTML; temp = null; return output;}var tagText =

2020-09-22 14:38:28 186

原创 Vue之v-if和v-show的区别与应用场景，display：none和visible：hidden区别

区别：v-if 和 v-show 都是用来控制DOM的显示隐藏，但是而这却有很大的区别1. v-if是通过控制dom节点的存在与否，来控制元素的显隐，而v-show是通过设置dom的display：none；或者 display：block，来控制显隐2. v-if每次切换，都会重新创建或者销毁dom，比较消耗性能，如果初始条件为false，就不会创建标签，如果为true，才会创建标签；而v-show不管初始值为什么，都会创建标签，所以拥有较高的初始渲染耗能总结：如果频繁切换显隐，就用v-show

2020-09-21 17:40:09 1664

空空如也

空空如也