怎样高效地利用第三方UI组件
缘由
现代开发中,Vue和React使用率已经算是很高了,那么这个过程中就会产生另外一个需求,UI组件库的使用,至少我了解的情况是:使用Vue开发的时候,一般我们都会搭配一个UI框架,Element-ui也好,iview也罢,终归是需要这么一个框架的。而ant-design在React开发过程中,出镜率也很高了。
以element-ui来说,我们应该怎样更高效的利用这些框架呢?
从框架本身来说,是提供给更多人更多项目来应用的,在某些场景下,他就必须提供更多的参数传递,以方便用户自定义某些属性。
然而我们在项目当中,有一点很清晰的是,可能一个组件,在这一整个项目中,所需要的参数基本上都是一致的,那么我们是否有必要在每一次使用组件过程中,传递一大堆非必要的参数呢?
那应该怎么用
以组件Input为例,查看官方文档其属性,有23个之多,比如说clearable
,默认属性是false,然而如果我们在项目中,想提供这么个属性,我们是不是必须在每一个使用el-input
的时候,都添加属性clearable="true"
呢?
我是觉得很烦的。
所以这就需要我们在使用UI组件的之前,进行二次封装。
以前,我认为封装组件就是自定义的一些组件,从来没有想过对这些已经封装好的UI组件进行二次封装,真真是……
怎么封装?
直接上代码吧,还是Input。
<template>
<el-input
v-bind="$attrs"
v-on="$listeners"
:placeholder="placeholder"
v-model="current"
:clearable="clearable"
>
<template slot="prepend">
<slot name="prepend"/>
</template>
<template slot="append">
<slot name="append"/>
</template>
</el-input>
</template>
<script>
export default {
name: "VInput",
props: {
clearable: {
type: Boolean,
default: true
},
placeholder: {
type: String,
default: "请输入"
}
},
data() {
const { value = "" } = this.$attrs
return {
current: value || ""
}
},
watch: {
"$attrs.value"(val) {
this.current = val
}
}
}
</script>
发现什么了么? 我明面上仅仅提供了两个props,clearable
和placeholder
,clearable
主要是为了初始化其默认值为true,而placeholder
一方面是提供初始值,另一方面确实占位字符多数情况下并不一样。
这里需要注意的点在哪里?
我们仅仅提供了两个props,那如果在某些场景下有特殊需求,是不是我们还得在回来改一下参数?
然而,并不是。
我们在模板当中,提供了v-bind="$attrs"
和v-on="$listeners"
,一个是绑定所有props,一个是监听所有事件,是不是并不麻烦。
后面我们就可以在项目当中,任何一个地方使用组件v-input
,他都是默认可以clearable
的,如果你想自定义更多的属性,当然也可以,也就是添加几个props
罢了。
当然,如果你想修改监听的事件,也是可以的,比如input组件默认监听input
事件,你可以通过修改
model: {
prop: "value",
event: "change"
}
变成监听input
组件的change
事件。
这个例子仅仅是修改了一个默认属性,有时候未必能看出来多简便。
我们可以自己尝试一下类似于Select
,DatePicker
之类的更复杂一点的组件,也许我们就会感受到到底能节省多少字符了。
动手尝试一下吧!
原文地址:https://www.cnblogs.com/zhuhuoxingguang/p/12994081.html
- 对两个有序数组进行合并
- No.016 3Sum Closest
- Java中实现解码字符串的方法,实用代码
- PDF.NET SOD 开源框架红包派送活动 && 新手快速入门指引
- No.015 3Sum
- Java 8新特性——提供了一种可以看作多重继承的默认方法
- WebSocket 学习笔记--IE,IOS,Android等设备的兼容性问题与代码实现
- 关于Shell你想知道的都在这儿
- Java中使用线程时,请不要忘记Spring TaskExecutor组件
- 常见.NET功能代码汇总
- 如何通过追踪代码自动发现网站之间的“关联”
- 教你如何和使用这款强大的渗透平台-Xerosploit
- No.014 Longest Common Prefix
- Java实现解析IP地址的方法,给出一串数字,生成正确的IP地址
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Hexo使用攻略-添加分类及标签
- print的简单使用
- 使用Pandas读取大型Excel文件
- 微信小程序获取页面高度
- vue简单实现九宫格抽奖
- [已解决]报错:xlrd.compdoc.CompDocError: Workbook: size exceeds expected 17920 bytes; corrupt?
- [已解决]报错:have mixed types. Specify dtype option on import or set low_memory=False
- Mysql删除表数据,表文件大小不变
- 抓取模板
- 利用os和pandas来合并当前目录下所有excel文件
- Python科学计算:用NumPy快速处理数据
- Python中过滤HTML标签的函数
- 词云图展示
- 将xml文件转为txt文件
- 数据概览神器pandas_profiling