Vue
文章平均质量分 82
hufi
学无止境,执之以恒;
脚踏实地,仰望星空。
展开
-
使用 Ant-design-vue 1.x 单文件递归生成菜单
以前使用 Ant-design-vue 的单文件方式递归生成菜单时,会发现遍历出来的菜单并不是自己与想的那样,而是渲染不出来。官方的解释是:Before v2.0, 因组件内部会动态更改a-sub-menu的属性,如果拆分成单文件,无法将属性挂载到a-sub-menu上,你需要自行声明属性并挂载。为了方便,避免属性的声明,我们推荐使用函数式组件。并且给出了一个demo,但会发现也显示不正常,那就自己来实现吧,直接根据路由配置来遍历生成。1、路由配置如下:[ { path: '/',原创 2020-12-30 00:00:01 · 1789 阅读 · 4 评论 -
分享8个非常实用的Vue自定义指令
在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue 自定义指令有全局注册和局部注册 两种方式。先来看看注册全局指令的方式,通过 Vue.directive( id, [definition] ) 方式注册全局指令,然后在入口文件中进行 Vue.use()调用。批量注册指令,新建 directives/index.js 文件:import copy from .转载 2020-12-18 18:58:03 · 389 阅读 · 1 评论 -
ant-design-vue 中 table 自定义格式渲染
一般业务开发中,难免会遇到将一些状态值(如 0 / 1)转化为相应的描述(如 关闭 / 开启),也可能是对日期时间的格式化,如下两图转化前后对比:开始之前,需要注意的是,定义的 columns 一定要写在 data 中,否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别。1、直接调用对应插槽模板<template> <div class="vehicle-list"> <a-table :columns="columns" :data-sour.原创 2020-11-03 18:59:25 · 8175 阅读 · 0 评论 -
Ant Design of Vue Table 表格可伸缩列 -- 排坑指南
最近在用 ant-design-vue 开发项目时遇到一个表格列需要支持拖拽改变宽度,这个功能在 element-ui上直接可以使用,但 ant-design-vue 需要引用一个叫 vue-draggable-resizable 的插件才能实现,接着安装了 vue-draggable-resizable 2.2.0版本,本以为很简单照着官网写即可,没想到官网的demo在本地一直报错:网上搜了一大堆也没有解决,最终在github上找到了一个解决方案,官网的实例可以复制过来使用,但需要进行改造:Res转载 2020-10-30 16:20:43 · 6294 阅读 · 20 评论 -
Rollup组件库开发问题记录
1、(!) Missing global variable name(!) Missing global variable nameUse output.globals to specify browser global variable names corresponding to external modules出现这个问题的原因是rollup通过external + output.globals来标记外部依赖,所以需要在配置文件的output输出配置属性中添加globals属性,指定与外部模块原创 2020-10-17 10:41:17 · 6452 阅读 · 0 评论 -
Vue实现移动端侧边栏城市联动功能
前言城市联动功能在业务比较常见,一般用于用户自行搜索或者选择其所在地,然后根据地点获取有关当地的一些推荐信息,比如附近商家、景点、娱乐等推荐,引导用户的出行和消费行为。效果预览功能简介可以看到,接下来要实现的功能也并不是很复杂,主要包括:城市列表,从上到下按城市拼音首字母分块排序显示城市搜索,按城市名称或者拼音进行模糊匹配搜索右侧城市首字母导航栏,支持点击和上下滑动字母,从而联动左侧城市列表的对应显示项目结构在这里,为了方便,我使用了 Vue-cli4 创建项目,项目结构如下:原创 2020-09-26 23:51:37 · 1972 阅读 · 2 评论 -
自动注册Vue组件【require.context】
在Vue项目开发中,经常需要import或者export各种模块,当一个页面中组件很多时,我们可能会这样引入组件:import A from 'components/A.vue'import B from 'components/B.vue'import C from 'components/C.vue'import D from 'components/D.vue'要是每加一个组件,都要写这么一句 import ,那岂不是很蛋疼,是否可以通过自动化引入呢?答案是肯定有的,那就要使用 webpa原创 2020-06-30 23:50:58 · 714 阅读 · 0 评论 -
Vue .sync 语法糖
1、使用之前在讲解这个语法糖之前,我们有必要先了解 Vue 中组件之间 单向数据流 通信规则:Vue 提倡单向数据流,即父级 props 的更新会流向子组件,但是反过来则不行。这是为了防止意外的改变父组件状态,使得应用的数据流变得难以理解。如果破坏了单向数据流,当应用复杂时,debug 的成本会非常高。所以开发中,我们需要遵循:父组件可以修改子组件的内容,而子组件是不能(不推荐)直接改变父组件的内容,但子组件可以通过事件触发的方式通知父组件来修改自己本身的内容。2、案例对比场景:控制弹框的显示原创 2020-06-18 12:57:18 · 2959 阅读 · 0 评论 -
Vue跨组件可响应通信【provide / inject】
Vue 组件之间常用的通信方式有:props 属性传递数据自定义事件 eventa. 全局的eventHub机制b. 父组件调用子组件使用 @eventName="handleFunc",子组件在需要的时候调用 this.$emit(eventName, params) 即可通过 params 传参。ref 给元素或组件注册引用信息,然后父组件通过 this.$refs.child 获取到子组件实例对象。 如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素。$parent / $原创 2020-06-15 19:04:32 · 1444 阅读 · 0 评论 -
Vue-router的使用和一些技巧
用 Vue.js + Vue Router创建单页应用,是非常简单的。使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把Vue Router 添加进来,我们需要做的是,将组件 components 映射到路由 routes,然后告诉 Vue Router 在哪里渲染它们。1、简单使用首先在入口 main.js 文件中引入路由//使用模块化机制编程,导入Vue和VueR...原创 2020-04-23 00:49:08 · 720 阅读 · 0 评论 -
Vue之render方法使用
Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数,它比模板更接近编译器。了解render函数的用法,可以先查看官方文档 渲染函数 & JSX。1、首先引用下官方的小示例:这里用模板并不是最好的选择:不但代码冗长,而且在每一个级别的标题中重复书写了<slot></s...原创 2020-04-22 00:11:20 · 1497 阅读 · 0 评论 -
Vue中引入Echarts封装组件的两种方式(全局引入和按需引入)
平时在项目中实现数据可视化,可以使用百度的开源图表库echarts,根据项目需求来绘制生成各种类型的图表,那么在Vue中如何引入echarts并封装成组件调用呢?目录:1. 安装echarts2. 全局引入3. 按需引入4. 参考文档1. 安装echarts因为通过vue-echarts按需引入时,一些组件模块(如折线图、柱状图,提示框和标题组件等)需要依赖已经包含所有图表和组...原创 2020-04-11 11:57:12 · 10936 阅读 · 1 评论 -
解决Vue中使用Element UI编译时babel-preset-es2015报错问题
首先我的开发环境是基于webpack4打包,配置好开发环境之后,按照Element UI官方文档配置出现编译错误,详细步骤如下。webpack4 + Vue 开发环境配置参考1、安装element-uinpm i element-ui -S2、通过按需引入方式借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。首先,安装 b...原创 2020-03-28 20:35:44 · 3992 阅读 · 0 评论