基于vue开发的插件-ElementUI实践体会
基于vue开发的插件-ElementUI实践体会
首先谈谈ElementUi
网址:https://element.eleme.cn/
对ElenmetUi有了解的同学都知道,这个插件库提供了一套前端常用的控件组件。其内容十分丰富:
- Base栏:用于宏观布局
- Form栏:表单的各种控件
- Data栏:数据直观显示的控件
- Notice栏:友好交互的提醒控件
- Navigation栏:本身也属于布局的一种
- 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
- 收藏
- 分享
- 文章举报
- npm插件开发(基于vue-cli3.x)
- 基于Eclipse的web开发实践之安装spring插件
- 基于vue开发的插件-Font Awesome图标库部分心得
- 我的第一个Chrome小插件-基于vue开发的flexbox布局CSS拷贝工具
- 基于Vue,ElementUI开发的一款表单设计器
- 详解vue-cli3开发Chrome插件实践
- Vue开发实践-基于vueRouter的token的强页面跳转控制
- Openfire学习之三: Openfire3.9.3中基于web的插件开发
- App开发如何扩展和使用本地插件(Cordova plugin),基于完全开源免费的框架为例
- 基于Visual Studio 2003/2005的Office插件开发FAQ
- 基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
- 基于WMS9SDK的插件开发
- jCountdown倒计时插件 基于jquery开发的插件
- win2k环境下基于JBOSS的J2EE开发实践----之一初始基础
- 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用
- vue---使用vue编写插件,基于vue2.x编写常用toast loading插件,一键复用组件
- 饿了么基于Vue2.0的通用组件开发之路(分享会记录)
- vue开发实战2.1——atom插件配置
- 基于DotNet构件技术的企业级敏捷软件开发平台 - AgileEAS.NET - 插件标记实现
- vue-scroller的使用 && 开发自己的 scroll 插件