您的位置:首页 > Web前端 > Vue.js

基于vue开发的插件-ElementUI实践体会

2020-02-05 09:27 435 查看

基于vue开发的插件-ElementUI实践体会

首先谈谈ElementUi

网址:https://element.eleme.cn/
对ElenmetUi有了解的同学都知道,这个插件库提供了一套前端常用的控件组件。其内容十分丰富:

  1. Base栏:用于宏观布局
  2. Form栏:表单的各种控件
  3. Data栏:数据直观显示的控件
  4. Notice栏:友好交互的提醒控件
  5. Navigation栏:本身也属于布局的一种
  6. Others栏:一些零碎的实用组件

ElementUi的安装

安装:

1.推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。
npm i element-ui -S
2.
引入样式
link rel=“stylesheet” href=“https://unpkg.com/element-ui/lib/theme-chalk/index.css”
引入组件库
script src=“https://unpkg.com/element-ui/lib/index.js”

主题颜色

官网有详细解释,在此不做赘述

内置过度动画

此插件实战比较常用

组件

组件类型比较丰富,而且内容能够满足日常开发需求

详细的控件状态,日常开发几乎都能满足:

而且控件展示下面都会有详细的参数配置如图:

笔者推荐使用的控件

1. Upload上传控件

此控件支持显示的类型可以自己调控,但是也有一些诟病。就是上传的action中会有延迟,解决方法网上有很多,比如直接使用组件提供的:before-upload而抛弃action。除去这些此控件还是很好用的,用户反馈良好

2. 表单控件

(1)常用的日期时间选择器:

ElementUi提供了美观的Ui样式如图:

以及日期范围选择如下图:

你可以选择是关联两个日期的时间等操作。同样的,此控件也有些诟病,比如在手机端显示的时候,没法自动缩小比例显示,有的甚至只显示结束日期的Ui,所以移动端还请注意。

**需要注意的是如果真想使用表单,需要加入表单控件。如下图代码:**
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="审批人">
<el-input v-model="formInline.user" placeholder="审批人"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="formInline.region" placeholder="活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
formInline: {
user: '',
region: ''
}
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
}
</script>

笔者心得体会

如果不去修改此控件的内容,例如样式等,ElementUi还是个很好的插件库,如果有需要修改的地方,也只能根据官网控件下面提供的参数,方法自定义设置。但使用下来其实有的官网展示的参数会有部分不起作用。而且可修改的内容也不是很多,控件可能自带背景颜色,如果需要修改则是让人头疼的问题,所以此插件有利有弊。

那就分享到这了,谢谢大家

  • 点赞 1
  • 收藏
  • 分享
  • 文章举报
张九宸 发布了8 篇原创文章 · 获赞 2 · 访问量 207 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: