![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
coucouxie
这个作者很懒,什么都没留下…
展开
-
通过v-model来自定义组件
prop: 表示父组件中v-model约定好的值 v-model = “selectedStations”model表示的是子组件需要通过什么事件和什么属性来进行双向绑定。在子组件中需要定义好model。通过自定义事件达到修改值的效果。原创 2022-08-15 14:43:14 · 356 阅读 · 0 评论 -
el-table如何保存用户的选中状态
el-table中如何去保存用户选中的状态并且分页和搜索后仍然存在2.初始化的时候选中默认需要选中的节点getHasAssignCompany方法用于获取默认选中的节点关键需要判断用户的点击是选中还是取消选中可以通过用户当前点击的行row和点击后selection中是否包含当前行来判断如果是选中那么就往selectList中push当前row如果是取消选中那么就从selectList中剔除当前点击的行row......原创 2022-06-13 13:33:51 · 1015 阅读 · 0 评论 -
前端实现密码强度组件
前端鉴别密码强度前端鉴别密码强度可以用到一个库”zxcvbn“由于是vue3+ts相关代码如下:由于是用到的vue3需要在计算出密码强度之后填充相应百分比的宽度和颜色,这里我们使用了vue3的新特性,将js变量和css进行绑定width: v-bind(barWidth);background-color: v-bind(barColor);审查了一下页面元素其实现是将js变量和css变量进行绑定:root{ --primary-color: red; --base-wid原创 2022-03-31 21:10:17 · 2119 阅读 · 3 评论 -
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]这种,判断是否是叶子节点,如果是叶子节点那么通过方法的形式选中该节点。...原创 2022-02-09 15:58:50 · 1178 阅读 · 0 评论 -
自定义指令处理图片加载失败
el,bi## Vue中的自定义指令在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令接下来我们就通过自定义指令的方式来处理图片加载失败或者加载未完成的状态imageOnerror.jsimport Vue from 'vue'Vue.directive('error-image', async (el, binding) => { let imgUrl = binding.value // 获取原创 2022-01-24 09:36:43 · 780 阅读 · 0 评论 -
通过script标签注入的全局变量eslint报错未定义解决方案
通过script标签注入的全局变量eslint报错未定义解决方案如下通过script注入的全局变量在代码中是会提示如下错误的(eslint)我们需要在.eslintrc.js文件下配置globals配置项如下:module.exports = { root: true, env: { node: true }, extends: ["plugin:vue/recommended", "eslint:recommended"], parserOptions: { p原创 2022-01-17 16:45:28 · 1535 阅读 · 0 评论 -
vue3+ts使用过程中的小问题
vue3 中 setup 的使用问题想要在 setup 中使用 this.$message.success()想要在 setup 中拿到 this,或者说是拿到组件实例是行不通的由于在执行 setup 时,组件实例尚未被创建,因此在 setup 选项中没有 this。这意味着,除了 props 之外,你将无法访问组件中声明的任何属性——本地状态、计算属性或方法。解决1. 可以通过引入 elMessge 然后直接使用import {elMessage} from 'element-pl原创 2022-01-14 13:19:20 · 1555 阅读 · 0 评论 -
vue中在scss中通过别名@的形式引入图片资源
如何在scss中通过别名引入图片资源.back { background: url('@/assets/back/1.png')}上面的写法是错误的,这样会报错正确的写法应该如下.back { background: url('~@/assets/back/1.png')}至于为什么下面的写法才是正确的,好像是和css-loader相关的,后面再去探究。...原创 2021-12-15 10:26:22 · 1048 阅读 · 0 评论 -
vuex的基本用法
平时的开发工程中经常会用到vuex但是每次用到都只能去翻阅官方文档看用法Mutation的用法更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:const store = new Vuex.Store({ state: { c原创 2021-12-15 10:25:19 · 188 阅读 · 0 评论 -
vue中在scss中通过别名@的形式引入图片资源
如何在scss中通过别名引入图片资源.back { background: url('@/assets/back/1.png')}上面的写法是错误的,这样会报错正确的写法应该如下.back { background: url('~@/assets/back/1.png')}至于为什么下面的写法才是正确的,好像是和css-loader相关的,后面再去探究。...原创 2021-12-15 10:23:06 · 935 阅读 · 0 评论 -
在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原创 2021-11-24 16:42:30 · 452 阅读 · 0 评论 -
前端利用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],原创 2021-11-11 16:28:11 · 1388 阅读 · 0 评论 -
前端工程化之(require.context)
require.context主要使用require.context实现前端工程化动他引入文件require.context(directory, useSubdirectories = false, regExp = /^.//)第一个参数目标文件夹是否查找子集 true | false正则匹配比如:require.context('./router',true,/\.routes\.js/可以理解为获取router文件下以.routes.js结尾的文件,知道这个以后,就可以在项目动态引转载 2021-09-30 00:28:59 · 175 阅读 · 0 评论 -
Vue的生命周期个数
一共有11个生命周期,后三个不常用beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyedactivateddeactivatederrorCaptured原创 2020-09-08 17:57:49 · 201 阅读 · 0 评论 -
Vue.js中插槽的使用
Vue.js中插槽的使用vue中插槽的基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src=原创 2020-09-03 22:22:11 · 323 阅读 · 0 评论 -
后台管理项目中的小问题解决
Cascader 高度过长问题解决方案F12检查页面找到这个部分对应的类,然后设置高度即可只需要在全局样式中添加.el-cascader-panel { height: 300px !important;}成功解决原创 2020-08-27 20:30:31 · 222 阅读 · 0 评论 -
Vue中插槽的使用
1、插槽内容1. 两个组件组件B:<template> <div> <h1>我是B组件的内容</h1> </div></template><script> export default { name: "testB" }</script><style scoped></style>组件A:<tem转载 2020-08-26 12:06:51 · 146 阅读 · 0 评论 -
vue项目中缺少async使用时需要用到的依赖This dependency was not found:@babel/runtime/helpers/esm/asyncToGenerator.js
This dependency was not found:core-js/modules/es.object.to-string in ./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.jsTo install it, you can run: npm install --save core-js/modules/es.object.to-string在经过大量尝试之后终于解决了,快吐了我们需要配置一个.babelrc文件配原创 2020-08-23 21:51:22 · 3221 阅读 · 0 评论 -
Vue中组件之间的传值
父子组件传值父子组件之间传值是通过props[ ]来实现的。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <scr原创 2020-08-14 09:20:46 · 115 阅读 · 0 评论