Vue
文章平均质量分 61
352328759
精通各类电子设备的开启和关闭功能
展开
-
el dialog 重复提交修复方案
element 虽好用, 但使用不当也容易导致一些奇怪的问题今天讲讲 “模态框中重复提交表单” 的问题问题描述有个模态框, 框里有个异步提交按钮没加锁可用重复点击加了锁 :loading=“queryParamsLock”在模态框消失前还能点击因为 “消失” 是一个动画网络上建议在 el-dialog.open 事件里解锁请求结束前, 重新打开模态框能点击解决方法把加锁条件改成这样:loading=“queryParamsLock || !dialogVisible”原创 2021-12-07 17:14:28 · 728 阅读 · 0 评论 -
el image-viewer 图片预览组件
Element UI(2.15.6) 的 el-image 组件有一个图片预览功能这个功能其实是调用内部组件 ImageViewer 实现的一般情况直接用 el-image 里的预览足够了但有一种情况, el-image 不能简单实现那就是 :src 展示的地址, 不在 :preview-src-list 预览图片列表里( src 是缩略图, preview-src-list 是原图)这个情况下, preview-src-list 中找不到当前图片地址, 就会从第0张开始预览不能从指定图片开始预原创 2021-11-04 10:52:16 · 1555 阅读 · 0 评论 -
Vue router 正则表达式限制路由传参
今天梅子问我Vue router 里 path: “/redirect/:path(.*)” 是什么意思?认真看了下, 有 “path:” 和 “/:” 应该是动态路由可 (.*) 是什么东西?哎呀, 这个我不知道呀!被梅子发现我这么无知, 面子都不要了, 此时此刻必须冷静并保持英俊“这个嘛, 我研究一下”根据经验, 有 “.” 和 “*” 这两个符号, 很大机会是正则表达式于是上 Vue router 官网搜 “正则”果然在 “高级匹配模式” 篇找到了相关资料正文路由传参时,原创 2021-07-15 13:27:49 · 3465 阅读 · 0 评论 -
Vue extends 传入构造函数
今天同事问我"官网上说 extends 可以传构造函数, 知不知道怎么写?"查阅了一下官网, 发现对此的介绍仅限于"可以是一个构造函数", 此外并没有案例于是在此写下 demo, 减轻同事摸脑壳的烦恼官网介绍允许声明扩展另一个组件 (可以是一个简单的选项对象或构造函数)。这主要是为了便于扩展单文件组件。extends 用于扩展组件, 用法与 mixins 相似, 都是在一个组件中传入扩展的内容而 extends 与 mixins 的差别在于extends 只能传入 1 个扩展内容(mi原创 2021-03-31 14:08:17 · 350 阅读 · 0 评论 -
vue3 迁移 - 公共组件挂载顺序
一般来说, 挂载公共组件要在 Vue 实例挂载到 DOM 元素前完成// vue2Vue.component("c1", c1);Vue.component("c2", c2);Vue.component("c3", c3);// 有 el 自动挂载; 没有则用 vu.$mount() 手动挂载var vu = new Vue({ el: "#"});这一点在 vue3 中并没有改变不过 vue3 的公共组件不再挂载在全局对象 Vue 上而是挂载在 createApp 创建的应用实原创 2021-03-29 17:37:52 · 383 阅读 · 0 评论 -
antdv Modal(对话框)指定挂载节点 demo
今日需求antdv Modal 挂载到指定位置分析antdv 的 Modal 默认是挂载在 body 上的这就导致组件样式不能作用在 Modal 上, 解决办法就是把 Modal 挂载到组件以内的位置上有问题找文档果然, antdv 早就考虑到这种可能性, 并提供了指定挂载位置的 apigetContainer 指定 Modal 挂载的 HTML 节点奈何文档并没有提供 demo但根据解释的类型和默认值, 可以知道 getContainer 需要传入一个 function, 并 re原创 2021-03-25 18:07:36 · 7393 阅读 · 0 评论 -
vue3 迁移 - data 选项接收值类型和合并方式
data 组件选项声明不再接收纯 JavaScript object,而需要 function 声明就是 vue2 的 data 可以是 object 或 function, vue3 的 data 只可以是 function// vue2data: { s: 2},// 这种写法作废在 data 改变了的还有 Mixin 行为举例var c1 = { data: function() { return { u: { c1: "c1-1", c2: "c1.原创 2021-03-24 18:00:11 · 475 阅读 · 0 评论 -
vue3 迁移 - createApp 创建应用实例
迁移到 vue3, 笔者第一个遇到的改变就是 createApp 了// vue2import Vue from "vue"new Vue({})new Vue 的写法已经不再支持, 取而代之的是调用 createApp 创建一个应用实例的方式// vue3import { createApp } from "vue"// 同效果// import Vue from "vue"// const createApp = Vue.createAppvar app = createApp原创 2021-03-24 17:58:24 · 4416 阅读 · 4 评论 -
Vue router 3.x 实现路由规则增删
vue 项目的权限限制功能, 有一种实现方案是这样的进入项目只设置没有权限要求的路由向后台提供当前用户的权限后台根据用户权限, 返回该用户可以用的路由信息将路由信息翻译成 “符合 routes 选项要求的数组”用 router.addRoutes(routes) 方法把 “符合 routes 选项要求的数组” 添加到路由这个方案涉及到两个问题:怎么添加路由规则怎么删除路由规则路由规则首先明确一下什么叫路由规则?下例的 { path: ‘/foo’, component: F原创 2021-01-15 17:16:37 · 3221 阅读 · 6 评论 -
Vue router components 多层命名视图如何操作
独生政策的时候, 只有一个后代, 叫"孩子"肯定没错但开放多胎之后, 就不止一个后代了, 如果对着所有后代喊"孩子", 谁都分不清是谁这个时候就需要给后代命名同理, 在路由中一个视图套一个视图时, 还能相安无事, 因为它们都叫 default但一个视图套多个视图时, 就应该给视图加上 name 属性<router-view></router-view><router-view name="a"></router-view><router-v原创 2021-01-14 13:41:38 · 3471 阅读 · 0 评论 -
Vue router 重定向 redirect 如何传值
配置 vue_router 时, 很经常就用到重定向(redirect)功能例如:没登录重定向到登录页面(导航卫士拦截也是高效的登录检查方法)index, home, house 重定向到首页等这些不需要传参的情况, 直接设置为目标地址的字符串就可以{ path: "/assets", component: layout, redirect: "/assets/assetsIndex",}如果你遇到的需求需要传值的话, 可以参考下面的方法重定向 redirect 可接受的值字原创 2021-01-12 18:01:23 · 14162 阅读 · 2 评论 -
Vue .sync 修饰符 简单实例
vue 中子传父是常有的需求, 一般我们用 $on + $emit 就能实现有时候从子组件传回来的值, 不需要再计算, 只是用来覆盖原值这时候用 $on + $emit 方法, 会占用一个事件名和一个方法名, 属于典型的资源浪费, 也增加了代码量对于传回值只用于覆盖原值的情况, 我们可以用 .sync 修饰符来简化<text-document v-bind:title="doc.title" v-on:update:title="doc.title = $event"></text原创 2020-12-17 15:52:14 · 971 阅读 · 0 评论 -
当 el-upload 遇上 v-for 时应该注意的问题
虽然 element-ui 现在几乎不更新了, 但不能否认它的优秀而今天要讲的就是这个优秀的框架中优秀的组件 el-upload有过 element-ui 使用经验的小伙伴大概都用过它的上传组件(el-upload)单独使用 el-upload 的文档已经很全面, 操作起来也很好用, 没毛病但当 el-upload 遇上 v-for 时, 要面临的问题就多得多了笔者就曾遇到过, 特意写下此文注: 文末附完整 demo有一次, 我遇到了这样的需求:有一个数量可增可减的数组数组每项有上传图原创 2020-12-15 17:14:37 · 2593 阅读 · 6 评论 -
Vue.set 简单实例
vue 的一大特性就是修改数据后, 系统能自动更新到界面上但这一特性并不是所有情况下都能实现, 就比如在数组中在数组中, 用数组的下标直接修改数组的值, 系统并不会把这次修改更新到界面上[直接修改 arr[0], 界面上不能自动更新]而是把这次修改, 拖延到下一次同组件的界面更新时, 才更新[直接修改 arr[0], 界面上不能自动更新] -> [修改一个无关值 boo]也就是说, 子组件的更新还不足以触发数组的数据更新[直接修改 arr[0], 界面上不能自动更新] ->原创 2020-12-14 11:22:50 · 1207 阅读 · 1 评论 -
js Object.defineProperty() 描述符的特性功能详解
Object.defineProperty(obj, prop, descriptor)在对象 obj 上新建或修改一个属性 prop, 并返回新 objobj: 要定义属性的对象prop: 要定义或修改的属性的名称或 Symboldescriptor: 要定义或修改的属性的描述符descriptor.configurable: 对象的属性的描述符的特性属性的 descriptor (描述符)分两种[数据描述符, 存取描述符(访问描述符)], descriptor 只能是其中一种;desc原创 2020-11-03 11:02:43 · 2068 阅读 · 1 评论 -
Vue .native 将原生事件绑定到组件
详见vue官网<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"原创 2020-05-25 12:39:06 · 2325 阅读 · 0 评论 -
Vue.$event 内联语句中传入原始dom数据
@click=“fun1” //默认传入原始数据@click=“fun1(‘其它参数’)” //仅传入指定数据//要传入指定数据 + 原始数据@click=“fun1($event, ‘其它参数’)”有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法参考:内联处理器中的方法<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" c原创 2020-05-25 10:26:46 · 2876 阅读 · 0 评论 -
v-bind="$props" 是什么意思?
猜想是绑定啥东东,在国内一直找不到答案,然后跑到一个帅哥找到答案,其实在官方文档中也有,也没有细致注意到If you need to bind all props to a inner component like this:<input:placeholder="placeholder":required="required":value="value">Yo...转载 2019-05-17 19:19:04 · 4511 阅读 · 0 评论 -
Vue中的computed是在生命周期的哪个阶段执行的?
1.在new Vue()的时候,vue\src\core\instance\index.js里面的_init()初始化各个功能function Vue (options) {if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue)) { warn('Vue is a constru...转载 2019-05-18 17:22:14 · 16240 阅读 · 1 评论 -
利用vm.$listeners, vm.$attrs实现简易的隔代通讯
相关阅读:v-bind 与 v-bind:name 的区别关于 vm.props,vm.props, vm.props,vm.attrs, vm.$listeners 的理解<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; c...原创 2019-08-24 11:23:44 · 2102 阅读 · 0 评论 -
vm.$props, vm.$attrs, vm.$listeners 的理解
vm.$props当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问ps:props 里声明了继承下来的内容vm.$attrs包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class和style除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class和style除外),并且可以通过v-...原创 2019-08-17 12:07:17 · 3325 阅读 · 0 评论 -
v-bind 与 v-bind:name 的区别
v-bind 不能多个同用, 后面的才生效v-bind=“obj” 传入的是键值对v-bind:name=“value” 传入的是值v-on 是类似的v-on 不能多个同用, 后面的才生效v-on=“obj” 传入的是键值对v-on:name=“value” 传入的是值<!DOCTYPE html><html> <head> <me...原创 2019-08-23 12:02:46 · 8357 阅读 · 1 评论 -
Vuex.namespaced 的笔记
命名空间默认情况下,模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。如果希望你的模块具有更高的封装度和复用性,你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后,它的所有 getter、action 及 mutation 都会自动根据模...原创 2019-09-02 09:46:45 · 2383 阅读 · 0 评论 -
Vuex.Action 的笔记
这次的 demo 越写越复杂,估计大家会看不下去吧.如果有耐心研究讨论的,建议重点留意[“dispatch n”]位置的代码这次的 demo 演示了两种多.dispatch() 连用的方式自定义方式: 使用时调用 dispatch1, 执行后返回到 dispatch1.then, 在 dispatch1.then 里调用 dispatch2 或者其它预定义方式: dispatch1 对应的...原创 2019-09-11 18:04:16 · 2051 阅读 · 0 评论 -
v-slot 应该注意的细节
slot (2.6.0+ 被废弃但未被移除) 不会解析成节点同名插槽可以提供多个内容同名插槽可以多次使用(同v-slot; 2.6.0- 只能用一次)提供内容的节点, 必须是其组件的一级子节点; 二级节点提供内容的话, 将不被视为插槽内容(同 v-slot). 另外, 普通标签将以普通节点解析; 则内容标签均不解析v-slot (2.6.0+ v3.0 之后改用这个)v-slo...原创 2019-09-20 17:49:32 · 4404 阅读 · 3 评论 -
利用vm.$mount插入节点的方法
感觉这种做法跟插入组件很相似原理:创建一个实例,并挂载到一个元素上官网上也有相关的描述<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta char...原创 2019-04-15 13:54:04 · 2519 阅读 · 0 评论