vue
文章平均质量分 68
Shopee_Rex
学习ing
展开
-
6个用例快速理解vue3的watchEffect用法
用例1 – 单值、多值侦听const value1= ref(1)const value2 = ref(2)watchEffect(()=>{ const v = value1.value; console.log('watchEffect1', v)})watchEffect(()=>{const v = value2.value; console.log('watchEffect2', v )})// 2个值watchEffect(()=>{con原创 2021-11-29 00:27:58 · 1813 阅读 · 0 评论 -
vue2-ace-editor与el-dialog使用时,无法及时更新编辑器的内容
问题如果在el-dialog中使用vue2-ace-editor,在第二次弹出的时候,如果编辑器的内容发生了变化,但是编辑器并没有正确的更新,需要点击一下编辑器才能成功更新到。原因由于ace编辑器是jquery的库,它本身的库并不是根据数据驱动来设计,所以数据变化之后,编辑器不一定能正确出现,是因为库本身做了一些限制。所以,我们需要在源码上找到问题所在。el-dialog异常问题只有在弹框内使用,并且二次展示的时候才会出现异常。从经验分析,vue2-ace-editor应该是正确设置到值了,但原创 2021-06-28 14:46:03 · 1595 阅读 · 3 评论 -
vue/cli 构建typescript与eslint踩坑笔记
前提这里做下笔记,记录下项目中的typescript的类型写法,也分享给大家。使用ref调用element组件方法推荐使用断言,element-ui提供了类型文件,使用断言就可以解决这个问题案例:如使用组件form的validate的方法import { Form } from 'element-ui';export default class App extends Vue { (this.$refs.form as Form).validate((v) => { if原创 2021-02-25 16:44:45 · 2675 阅读 · 0 评论 -
移动端echarts设置dataZoom之后,滚动时隐藏tooltip
需求echart设置了datazoom同时也设置了tooltip的时候,左右滚动时候就会这样:产品提出需求说要滚动的时候隐藏tooltip,要这样:代码这里其实需要记录状态,记录tooltip是否允许显示,如果不允许就关闭tooltip的显示,反之同理。这里可以使用我上一篇文章提供的mixin的方法,可以阅读上一篇文章引入了一个变量HIDE_ALL_TOOLTIP,监听它 watch: { // 动态隐藏tooltip HIDE_ALL_TOOLTIP(v) {原创 2021-01-12 16:13:10 · 2774 阅读 · 1 评论 -
移动端echarts的tooltip点击图表外部隐藏
描述在移动端没有hover事件,所以触发echart的高亮事件只有点击事件,这个时候如果有页面滚动事件的时候,滚动的时候并不能隐藏tooltip。这个时候页面滚动是不会隐藏的。除此之外,如果页面同时多个图表,这个时候会出现多个tooltip,这个产品认为可能体验会比较不好,希望能够一个页面只高亮一个图表。方案需要做到跨图表状态管理,很明显选择使用vuex来存储状态是比较方便。所以这里使用vuex来存储图表直接是否存在高亮的属性。同时为了引入方便,这里使用mixin来专门处理这个属性值的变化。原创 2021-01-12 15:20:46 · 5736 阅读 · 4 评论 -
使用伪类将el-switch文字放在内部
前言由于switch是放在table里的,如果文字放在外面,样式会比较不好看。如果单独写一个浪费造轮子,我们直接动态添加类名,应该可以实现类似的效果,所以就可以使用伪类进行添加文字。效果源码 <el-switch :width="60" :value="getTaskSubscribeState(row)" active-color="#3399FF" inactive-color="#CCCC原创 2020-12-29 16:39:13 · 2418 阅读 · 2 评论 -
VUE中的watch支持数组函数
前言最近阅读VUE源码,发现watch对一个属性监听的时候,可以传入一个数组函数进行监听源码function initWatch (vm: Component, watch: Object) { for (const key in watch) { const handler = watch[key] // 可以为数组? if (Array.isArray(handler)) { for (let i = 0; i < handler.length; i+原创 2020-12-02 22:10:11 · 638 阅读 · 0 评论 -
elementUI富文本组件封装
富文本这里使用的是vue-quill-editor组件作为富文本功能。在VUE中使用vue-quill-editor非常方便,引入组件就可以马上使用,但是通常情况下,我们都需要进行一些自定义的功能,所以需要自己进行二次封装。初始化```javascript<template> <quillEditor class="ql-toolbar" v-model="content" ref="quillEditor" > </quillEd原创 2020-11-25 11:10:42 · 4198 阅读 · 1 评论 -
VUE中使用localStorage实现跨标签页面的通信
前言目前出现了一个需求,需要父页面打开新的子页面,子页面提交表单之后,关闭子页面,然后把数据返回给父页面。本来考虑使用sharedWorker,但是由于兼容性太差了,就弃用了。看到网上的介绍可以使用localStorage来实现,我就尝试了下。下面是一些具体的细节。开始整体流程如图所示:需求分析子页面需要知道自己的父页面对应的是谁,所以父页面打开子页面的时候需要传输一个父页面的KEY值由于表单是使用dialog来显示,需要注意避免出现事件重复注册的,及时销毁事件,保留监听事件的唯一。由于原创 2020-10-22 19:40:23 · 3366 阅读 · 0 评论 -
使用worker-loader在vue中使用worker,并且兼容ie11
worker多线程可以让网页进行大量数据处理的时候,避免UI渲染阻塞。我这次使用woker来进行数据的预先获取数据并且处理由于数据预计会比较多,如果一次性获取的话,UI渲染就会阻塞,导致用户体验下降。案例MDN上介绍以及非常详细由于woker不支持file路径,所以一般都是讲文件布置到服务器生成一个url,但是在开发过程中这样太不方便了,所以webpack上有一个loader:work...原创 2020-01-06 18:00:10 · 10286 阅读 · 2 评论 -
element-ui中的el-dialog关于slot懒加载的问题
问题描述由于使用的是dialog的slot,需要在dialog显示一个table但是在IE 11上遇到了一个问题在第一次打开的时候,table的宽度并不能正确的获取正常:问题分析element-ui设计是比较趋于完善的了,dialog的solt使用懒加载是处于性能优化的原因,官方也提供了回调事件去解决这个问题,比如需要在dialog获取到refDialog 的内容是懒渲染的,...原创 2020-01-03 17:22:06 · 8370 阅读 · 1 评论 -
element-ui中上传upload组件中的遇到的一些需求和解决方案
对于上传的钩子,想要传输自己的数据需求:需要检测上传的视频列表是否有重复的名字使用·before-upload·的钩子函数,在上传前去判断,如果存在则返回false <el-upload :ref="item.key" :data="{ classId, videoName: item...原创 2019-12-05 21:55:55 · 1511 阅读 · 0 评论