Vue
文章平均质量分 67
白菜new
这个作者很懒,什么都没留下…
展开
-
在vue3.0的JSX语法下使用插槽
由于在vue2中JSX的语法在渲染和代码简洁度上有优化,偶尔也会用JSX的形式封装组件;新的项目里开始用vue3发现,以前丢插槽的两种方式行不通了,得想想办法才行。// vue2 插槽写法render (h) { const { $scopedSlots } = this // 第一种 const { title = () => h('p' , { style : 'margin-top: 0' } , this.title) , } = $scopedSlots原创 2021-12-23 18:06:39 · 2511 阅读 · 0 评论 -
在js中获取vue文件的style标签下的内容
前言:由于业务需求,将页面内容转成pdf,前端需要提供整个页面的dom元素提供给后端,但样式并不是在行内而是在<style>标签里。解决方案:通过原生属性 document.styleSheets 读取vue单页面组件加载过的所有css样式const cssBlock = document.styleSheets有了获取到的css样式表就能遍历去找到我需要的,由于是伪数组,我们先用ES6解构一下;点开可以发现他的顺序是从页面初始化开始,大概率我们需要的样式会在最后,所以我们用re原创 2021-08-06 09:48:35 · 2262 阅读 · 0 评论 -
Vue3 compile模块①——学习编写AST抽象语法树
文章目录前言一、AST抽象语法树是什么?二、看一眼AST语法树三、写一下AST语法树第1步、语义拆分,将标签拆分成数组第2步、数组转换成树,利用递归实现AST总结前言最近在看vue3.0的compile模块,用到了AST抽象语法树,在网上找资料发现国内比较缺乏相关内容,看到热门的是用一个插件去解析和操纵JavaScript版的AST语法树,但我想了解的是单页面应用里的标签是怎么形成语法树的,自己能否学着写一下。一、AST抽象语法树是什么?AST(Abstract Syntax Tree)是源代原创 2021-07-09 17:32:08 · 860 阅读 · 2 评论 -
轻松解决element UI 表单重置问题
三步解决前言一、从ui框架入手二、上手表单1.设置表单初始值2.表单初始化赋值以及一些通用参数3.给表单抽屉/弹窗设置open方法总结前言在后台管理系统中,最常见的业务就是CURD,对数据进行增删改,通常情况下新增与编辑我们会做成一个通用组件,我们在不使用v-if的情况下如何重置我们的表单呢?技术栈:vue3.0 + elementPlus一、从ui框架入手方法名说明resetFields对整个表单进行重置,将所有字段值重置为初始值并移除校验结果clearValida原创 2021-06-29 17:57:26 · 4095 阅读 · 4 评论 -
项目中遭遇监听input框操作报错 [object InputEvent]类型
发生场景在使用ant-design-vue的ui框架中,对查询表单做了个封装。希望在函数式组件监听input框修改内容时返回值。一开始是使用@input触发监听listeners[‘input’] (value)当输入内容时,便会报错[Vue warn]: Invalid prop: type check failed for prop “value”. Expected String, Number, got InputEvent 解决办法通过面向百度编程,我猜测由于vue双向绑定的关原创 2021-05-21 16:20:20 · 1317 阅读 · 0 评论 -
学会就能看懂vue源码(一)—— 数据属性、访问器属性、Object.defineProperty方法、Object.getOwnPropertyDescriptors方法
学会就能看懂vue源码(一)前言数据属性访问器属性Object.definePropertyObject.getOwnPropertyDescriptors测验前言了解vue2双向绑定原理,决定从源码入手,引申了不少基础知识,决定记录一下。相信学会这些就能看懂双向绑定原理的部分源码了数据属性包含的是一个数据值的位置,在这可以对数据值进行读写。数据属性的四个特性:configurable :表示能否删除从而重新配置定义其属性,能否修改属性的特性,默认为trueenumerable :表示能否通原创 2021-05-12 14:19:42 · 433 阅读 · 1 评论 -
Vue下实现element的select选择器下拉加载更多
select选择器实现下拉加载更多可以将此细分为,1.下拉到底部; 2.触发请求; 3.加载,难点便只是在下拉到底部。我们要想知道是否已经触底,首先找到拥有滚动条的元素在select 添加 ref<template> <el-select v-model="value" ref="select" placeholder="请选择" :loading="loading"> <el-option v-for="item in options"原创 2021-01-27 13:53:08 · 3074 阅读 · 7 评论 -
解决 el-form 异步校验导致重复校验的问题
解决 el-form 异步校验导致重复校验的问题业务逻辑最近项目上有个业务,确认表单,需要用到手机验证码,验证是否为本人操作。这挺常见的,但是需要用户填写完,输入框失去焦点时就将验证码发送后台进行验证,而且验证码只能输一次。触发场景若用户输入完验证码后,鼠标焦点并未离开,直接点击确认的话,因为 validator 异步的关系,鼠标离开焦点触发一次校验,确认也触发一次校验,导致 重复校验,用户体验极差解决办法用watch 动态监听 form 表单里验证码输入框的值,并进行相应判断,输入长度为6时自原创 2020-08-14 14:34:50 · 2702 阅读 · 0 评论 -
Vue2中如何使用函数式组件
Vue中如何使用函数式组件文章目录Vue中如何使用函数式组件**使用场景****什么是函数式组件****如何创建一个函数式组件****为什么使用函数式组件****简单的例子****业务场景下的函数式组件**使用场景Vue 推荐在绝大多数情况下使用 template 来创建你的HTML。但是现实的业务场景中经常会遇到根据用户权限判断,显示不同的按钮。接下来我们由浅入深,通过两个例子来了解。首先了解什么是函数式组件。什么是函数式组件函数式组件在 React 中非常流行,那在 Vue 中我们也可以玩原创 2020-08-11 14:36:44 · 3498 阅读 · 5 评论 -
超详细!在vue 中二次封装 wangEditor 富文本
在vue 中二次封装 wangEditor 富文本wangEditor真的非常简洁好用,而且一直有更新,缺点就是文档内容比较少。wangEditor文档链接看网上很多二次封装都把逻辑放到 mounted 中,对于新手的我不太友好,逻辑不太清晰。决定自己封装一个。将各配置以方法分割,在初始化调用。//以下是封装的组件 SimpleEditor<template> <div> <div ref="editor" style="text-align:原创 2020-07-02 17:52:55 · 1673 阅读 · 0 评论 -
Vue自定义函数挂载到全局方法
Vue自定义函数挂载到全局方法看了很多方法介绍,基本思路是,定义方法->在main.js中引入->就能全局使用,提高代码的复用性。我这里只写下工作中常见和常用的方法使用export default + install + Vue.prototype 方法写在哪,怎么写,一般按项目规则和个人习惯 我这里以$http为例1.创建request文件夹,创建index.js文件,...原创 2020-04-25 22:41:54 · 753 阅读 · 0 评论 -
Vue定义全局过滤器filter
Vue定义全局过滤器filter这里介绍的是多个过滤器一起添加到全局中1.创建方法首先src下新建plugin文件夹,用来存放插件。在plugin文件夹内新建filters.js,编写方法(如隐藏手机号码等等…)/** * 隐藏手机号码 * @param val {Number, String} 转换的字符串对象 * @param retain {Number} 保留位数 * @...原创 2020-04-23 23:01:08 · 687 阅读 · 0 评论