coucouxie的博客

原创 vue2自定义指令实现权限控制

【代码】vue2自定义指令实现权限控制。

原创 vite中使用unplugin-vue-components插件的使用（无需自己引入组件）

注意还需要在tsconfig.json里面添加上刚刚自动生成的components.d.ts文件（不然自定义的组件会有错误提示找不到文件）插件会生成一个ui库组件以及指令路径components.d.ts文件。安装unplugin-vue-components。比如说Element Plus。

原创 通过v-model来自定义组件

prop: 表示父组件中v-model约定好的值 v-model = “selectedStations”model表示的是子组件需要通过什么事件和什么属性来进行双向绑定。在子组件中需要定义好model。通过自定义事件达到修改值的效果。

原创 el-table如何保存用户的选中状态

el-table中如何去保存用户选中的状态并且分页和搜索后仍然存在2.初始化的时候选中默认需要选中的节点getHasAssignCompany方法用于获取默认选中的节点关键需要判断用户的点击是选中还是取消选中可以通过用户当前点击的行row和点击后selection中是否包含当前行来判断如果是选中那么就往selectList中push当前row如果是取消选中那么就从selectList中剔除当前点击的行row......

原创 封装一个简单的本地存储工具

由于JSON.parse转化的时候如果遇到非标准JSON的时候经常会报错，所以封装一个工具来实现本地存储，并且封装好一个工具就不用频繁的去写JSON.parse和JSON.stringify来转化JSON和常用数据类型封装的过程其实就是对本地存储的数据进行判断并且捕获异常。export const setItem = (key: string, value: object | string | null) => { if(typeof value === 'object') { val

原创 前端实现密码强度组件

前端鉴别密码强度前端鉴别密码强度可以用到一个库”zxcvbn“由于是vue3+ts相关代码如下：由于是用到的vue3需要在计算出密码强度之后填充相应百分比的宽度和颜色，这里我们使用了vue3的新特性，将js变量和css进行绑定width: v-bind(barWidth);background-color: v-bind(barColor);审查了一下页面元素其实现是将js变量和css变量进行绑定:root{ --primary-color: red; --base-wid

原创 el-tree后端返回节点中包含父节点，回显时子节点全部选中问题

res.forEach(item => { var node = this.$refs.authorityTreeRefs.getNode(item); if(node.isLeaf){ this.$refs.authorityTreeRefs.setChecked(node, true); }});res为从后端拿到的节点数组[1,2,3,4,5]这种，判断是否是叶子节点，如果是叶子节点那么通过方法的形式选中该节点。...

转载 JS中如何快速将字符串的“true“和“false“转换成Bool类型

JSON.parse('true')JSON.parse('false')

原创 自定义指令处理图片加载失败

el,bi## Vue中的自定义指令在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令接下来我们就通过自定义指令的方式来处理图片加载失败或者加载未完成的状态imageOnerror.jsimport Vue from 'vue'Vue.directive('error-image', async (el, binding) => { let imgUrl = binding.value // 获取

原创 通过script标签注入的全局变量eslint报错未定义解决方案

通过script标签注入的全局变量eslint报错未定义解决方案如下通过script注入的全局变量在代码中是会提示如下错误的（eslint）我们需要在.eslintrc.js文件下配置globals配置项如下：module.exports = { root: true, env: { node: true }, extends: ["plugin:vue/recommended", "eslint:recommended"], parserOptions: { p

原创 vue3+ts使用过程中的小问题

vue3 中 setup 的使用问题想要在 setup 中使用 this.$message.success()想要在 setup 中拿到 this,或者说是拿到组件实例是行不通的由于在执行 setup 时，组件实例尚未被创建，因此在 setup 选项中没有 this。这意味着，除了 props 之外，你将无法访问组件中声明的任何属性——本地状态、计算属性或方法。解决1. 可以通过引入 elMessge 然后直接使用import {elMessage} from 'element-pl

原创 日期格式化时候yyyy-MM-dd HH:mm:ss大小写区分

为什么有的是大写有的是小写最近做项目的时候有用到moment.js对日期进行格式化，但是就有一点自己没掌握好的地方是，为什么格式化的时候yyyy-MM-dd HH:mm:ss有的大写有的小写呢？大写的MM是代表的月份，小写的mm是代表的分钟所以这里是为了区分月份和分钟而HH是大写是为了区分时区12小时还是24小时小写的h是12小时制，大写的H是24小时制。所以这里面还是有很多细节的，一开始就只管用没在意这些细节，这次又碰到了所以借此机会了解了一下。...

原创 vue中在scss中通过别名@的形式引入图片资源

如何在scss中通过别名引入图片资源.back { background: url('@/assets/back/1.png')}上面的写法是错误的，这样会报错正确的写法应该如下.back { background: url('~@/assets/back/1.png')}至于为什么下面的写法才是正确的，好像是和css-loader相关的，后面再去探究。...

原创 vuex的基本用法

平时的开发工程中经常会用到vuex但是每次用到都只能去翻阅官方文档看用法Mutation的用法更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：const store = new Vuex.Store({ state: { c

原创 vue中在scss中通过别名@的形式引入图片资源

如何在scss中通过别名引入图片资源.back { background: url('@/assets/back/1.png')}上面的写法是错误的，这样会报错正确的写法应该如下.back { background: url('~@/assets/back/1.png')}至于为什么下面的写法才是正确的，好像是和css-loader相关的，后面再去探究。...

原创 在vue中使用jsx

如何用jsx写vue组件下面是一个例子父组件 app.vue// 关键代码<Demo number="1">第一个</Demo><Demo number="2">第二个</Demo><Demo number="3">第三个</Demo>demo.jsx文件export default { props: ['number'], render(createElement){ let tagName = `h${th

原创 前端利用html2canvas生成图片并且下载

项目需求前端，以当前的某个dom节点为资源生成对应的图片并且下载代码如下<Button type="upload" text="导出公示牌" color="#0EA249" width="110px" @click="exportImage" />methods:{ dataURLToBlob(dataurl) { //ie 图片转格式 var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],

转载 前端工程化之(require.context)

require.context主要使用require.context实现前端工程化动他引入文件require.context(directory, useSubdirectories = false, regExp = /^.//)第一个参数目标文件夹是否查找子集 true | false正则匹配比如：require.context('./router',true,/\.routes\.js/可以理解为获取router文件下以.routes.js结尾的文件，知道这个以后，就可以在项目动态引

转载 vscode中无法使用yarn

由于vscode中的集成终端使用的是powershell，所以我们要设置一下powershell的执行权限。解决方法：进入C:\Windows\System32\WindowsPowerShell\v1.0目录，找到powershell.exe文件。右键该文件，以管理员权限执行。执行set-ExecutionPolicy RemoteSigned命令，并输入y选项。重启vscode...

转载 已知两个点的经纬度算两点之间的距离

如下： // 通过经纬度计算两个点距离的公式 function space(lat1, lng1, lat2, lng2) { var radLat1 = lat1 * Math.PI / 180.0; var radLat2 = lat2 * Math.PI / 180.0; var a = radLat1 - radLat2; var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;

原创 React中 withRouter的用法(将一个非路由组件变为一个路由组件)

withRouter的用法在状态组件中，我们习惯通过this.props.history.location.pathname的方式来拿到当前路由的名称，但是当一个组件不是路由组件的时候，this.props.history为undefined。因此不能拿到对应的数据。通过withRouter的方式将一个组件变为路由组件，也就是高阶组件import {withRouter} from 'react-router-dom'class Demo extends React.Component {re

原创 ./与../和/的区别

./ 当前目录…/ 父级目录/ 根目录

转载 eslint中报错Parsing error: Unexpected token : (或=或＜)

ESlint报错Parsing error: Unexpected token : Parsing error: Unexpected token = Parsing error: Unexpected token <原因：开发环境与ESLint当前的解析功能不兼容解决方案：使用babel-eslint解析安装babel-eslintnpm install babel-eslint --save-dev yarn add babel-eslint --dev在.eslint

原创 如何在react中使用和配置eslint

1.安装eslintyarn add eslint --s -d2.初始化配置文件npx eslint --init一开始使用eslint --init 会报错，未找到指令xxxx,估计是初始化.eslintrc.js的方式变了npx eslint --init 之后会有一系列的选择，选择Airbnb选择Airbnb会自动安装react相关的插件，包含eslint-plugin-react-hooks。安装完成之后就会出现一个.eslintrc.js文件module.exports

转载 彻底搞清楚javascript中的require、import和export

为什么有模块概念理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，在es6以前，它是不支持”类”（class），所以也就没有”模块”（module）了。require时代Javascript社区做了很多努力，在现有的运行环境中，实现”模块”的效果。原始写法模块就是实现特定功能的一组方法。只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。原始写法模块就是实现特定功能的一组方法。只要把不同的函数

转载 JS对象属性中get/set与getter/setter是什么

在js属性描述符这部分有几个较难理解的名词概念，本文旨在描述自己对它们的理解，主要包括:[[Get]]/[[Put]]、get/set、getter/setter几个概念的阐述，数据属性和访问器属性属性属性描述符用来描述属性特性的(只有在内部才能用的特性),配置属性是否可读，是否可写，是否可枚举，值是多少，读写。属性描述符对象Object.definePrOperty(obj,‘a’,{value:2,writable:true,configurable:true})第三个参数就是属性描述符对象 ，

原创 Jquery操作伪元素 before,after

没有修改之前会有一个content属性$('.tool-box>.fullscreen').append("<style>.tool-box>.fullscreen>.icon-quanping::before{content:none}</style>")加上之后伪元素的content内容为none

转载 CSS继承属性

有继承性的属性：1、字体系列属性：font：组合字体font-family：规定元素的字体系列font-weight：设置字体的粗细font-size：设置字体的尺寸font-style：定义字体的风格font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为font-stretch：允许你使文字变宽或变窄。所有主流浏览器都不支持font-size-adjust：为某个元素规定一个 aspect 值，字体的小写字母 “x” 的高度与 “font-size”

原创 记React中useState异步更新小坑

问题：在hooks中,修改状态的是通过useState返回的修改函数实现的.它的功能类似于class组件中的this.setState().而且,这两种方式都是异步的.可是this.setState()是有回调函数的,那useState()呢?问题点:它异步且没有回调函数const [count,setCount] = useState(1)useEffect(()=> { setCount(2,()=>{ console.log('测试hooks的回调');

转载 js导出json数据到excel 文件

导出json数据到excel文件，在网上查的方法。能导出。但是余留个问题，就是打开的excel的时候提示，文件名和扩展名不一致…查了半天资料，没有办法解决有的说： 返回xml格式的Excel数据，这种都会有提示的。你要没有提示，导出csv格式的数据或者服务器端用组件导出Excel才行。或者使用插件来解决，方法地址如下，还没验证，留个印儿，有时间再说。 <a id="exportBtn">导出</a> $("#exportBtn").click(function() {

转载 JavaScript根据对象的key重新排序

const sortArr=['aaa','bbb','ccc'];//指定排序顺序//未排序的对象const arr={ "aaa":{ "id":"a"}, "ccc":{"id":"c+"}, "bbb":{ "id":"b+"}}let getArr={}//接收新顺序sortArr.forEach(item => { Object.keys(arr).forEach(key=>{ if(item===key){

原创 react中使用useState修改对象或者数组的值无法改变视图

在react中使用useState无法改变视图，数据改变但是视图未改变未渲染的代码如下：const [needLists,setNeedLists]=useState([])const pressDownEnter=(e)=>{ if(e.keyCode===13){ needLists.push({ content:e.target.value, status:0 }) setNeedLists(needLists)

原创 webpack单独打包css文件使用extract-text-webpack-plugin报错。

如何使用webpack的时候将css文件打包成单独的文件一般单独的使用css-loader是将css代码打包到js文件中，而通过mini-css-extract-plugin可以实现打包出来的css是单独的文件const path=require('path')const MiniCssExtractPlugin =require('mini-css-extract-plugin')module.exports={ // mode:'development', entry: { pa

原创 csdn当作图床

原创 2021/3/24算法

归并两个有序数组思路：首先这是两个有序的数组，并且不能开辟额外的空间，所以可以依次从两个数组的末尾开始比较，并将较大的数字放在nums1的末尾，分别用m,n代表在nums1和nums2中指向各自当前元素的指针。方便取到对应的元素。我们也需要第三个指针pos，代表较大数字被放入的位置。伪代码就是。比较nums1[m-1]，nums2[n-1]将较大的值赋给nums1[pos]，pos的值等于m+n-1，也就是nums1[pos]=nums1[m-1]>nums2[n-1]?nums1[m-1]:

原创 Css中选择器~和选择器+的区别

最近在项目中发现自己的css比较的薄弱，所以就把自己的一些不理解或者不熟悉的地方进行巩固和了解。Css中选择器+的功能,可以用来选择出同级的相邻节点比如。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &

转载 github无法打开的解决方案

修改本机（windows操作系统）hosts文件步骤：1、打开hosts目录：C:\Windows\System32\drivers\etc2、复制hosts文件到桌面，添加下列信息：#github192.30.253.113 github.com151.101.185.194 github.global.ssl.fastly.net3、使用修改后的hosts文件覆盖原文件注意：每台机器在这两个网站上对应的IP可能不同，所以需要自行查询IP，而不是直接复制第二步的IP详细查询方法：1）

原创 通过js来实现数据结构中的链表。

最近又回到了数据结构与算法，发现差不多又忘了，但我觉得并没有什么大不了，学习不就是一个反复的过程吗。其实我还挺享受能够把一个知识点弄懂的感觉的。function LinkedList() { //节点的构造函数，可以用于实例化一个节点 function Node(data) { //节点的数据域 this.data = data //节点的指针域 this.next = null } //链表的头指针

原创 let 声明的变量顶层对象和全局变量的关系

顶层对象：在浏览器环境中，顶层对象就是window对象,在Node环境中顶层对象是global对象，在Es5时，顶层对象的属性和全局变量是等价的。window.a=1a//1a=2window.a//2在上面的代码中，顶层对象的属性赋值与全局变量的赋值是一样的。顶层对象的属性与全局变量挂钩，被认为是 JavaScript 语言最大的设计败笔之一。这样的设计带来了几个很大的问题，首先是没法在编译时就报出变量未声明的错误，只有运行时才能知道（因为全局变量可能是顶层对象的属性创造的，而属性的创造

原创 异步操作遇到的问题有关async和await

2020/12/22工作中遇到的问题问题记录：现在有一个父组件A，一个子组件B，子组件通过$emit触发父组件中的异步任务，并且需要在父组件中的方法拿到结果之后再进行下一步操作。这就是一个典型的需要控制异步任务顺序的问题，知道需要用到async,await来控制执行顺序，但是对其概念和用法太过含糊，所以特意学习了以下。async/await是写异步代码的新方式，再这之前处理异步的方式是通过promise和回调函数来实现。async会把一个普通函数变成一个异步函数，并且默认是返回一个promise对象，