舒城县住房和城乡建设局网站,云南网站建设网站运营,wordpress+sdk.js好卡,wordpress页面设置全屏目录 Vue组件库ElementElement简介Element快速入门环境配置Element常用组件Table表格Table表格演示Table表格属性详解 Pagination分页Pagination分页演示Pagination分页属性详解Pagination分页事件详解 Dialog对话框Dialog对话框组件演示Dialog对话框属性详解 Form表单Form表单… 目录 Vue组件库ElementElement简介Element快速入门环境配置Element常用组件Table表格Table表格演示Table表格属性详解 Pagination分页Pagination分页演示Pagination分页属性详解Pagination分页事件详解 Dialog对话框Dialog对话框组件演示Dialog对话框属性详解 Form表单Form表单组件演示 Vue组件库Element
Element简介
关于前端开发模式MVVM之前学习的vue是侧重于VM开发的主要用于数据绑定到视图的那么接下来我们学习的ElementUI就是一款侧重于V开发的前端框架主要用于开发美观的页面的。
Element是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库用于快速构建网页。 Element 提供了很多组件组成网页的部件供我们使用。例如 超链接、按钮、图片、表格等等。如下图所示就是我们开发的页面和ElementUI提供的效果对比。 对于ElementUI我们作为一个后台开发者只需要学会如何从ElementUI的官网拷贝组件到我们自己的页面中并且做一些修改即可。 其官网地址点击这里。
Element快速入门环境配置
先要在项目下安装ElementUI的组件库 npm install element-ui2.15.3 然后在main.js这个入口js文件中引入ElementUI的组件库其代码如下
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css;
Vue.use(ElementUI);然后我们需要按照vue项目的开发规范在src/views目录下创建一个vue组件文件注意组件名称后缀是.vue并且在组件文件中编写之前介绍过的基本组件语法: 最后我们只需要去ElementUI的官网找到组件库然后找到按钮组件抄写代码即可 最后我们需要在默认访问的根组件src/App.vue中引入我们自定义的组件 然后运行我们的vue项目发现成功显示抄写组件入门编写完成。 Element常用组件
对于组件的学习比较简单我们只需要参考官方提供的 代码然后复制粘贴即可。
Table表格
Table表格演示
Table 表格用于展示多条结构类似的数据可对数据进行排序、筛选、对比或其他自定义操作。然后复制代码到我们之前的ElementVue.vue组件中需要注意的是我们组件包括了3个部分如果官方有除了template部分之外的style和script都需要复制 此时回到浏览器我们页面呈现如下效果 Table表格属性详解
那么我们的ElementUI是如何将数据模型绑定到视图的呢主要通过如下几个属性
data: 主要定义table组件的数据模型
prop: 定义列的数据应该绑定data中定义的具体的数据模型
label: 定义列的标题
width: 定义列的宽度PS:Element组件的所有属性都可以在组件页面的最下方找到如下图所示 Pagination分页
Pagination分页演示
Pagination: 分页组件主要提供分页工具条相关功能。首先在官网找到分页组件我们选择带背景色分页组件,然后复制代码到我们的ElementView.vue组件文件的template中 浏览器打开呈现如下效果 Pagination分页属性详解
我们需要关注的是如下几个重要属性可以通过查阅官网组件中最下面的组件属性详细说明得到
background: 添加背景颜色也就是上图蓝色背景色效果。
layout: 分页工具条的布局其具体值包含sizes , prev , pager , next , jumper , - , total , slot 这些值
total: 数据的总数量比如我们修改layout属性如下
layoutsizes,prev, pager, next,jumper,total浏览器打开呈现如下效果发现在原来的功能上添加了一些额外的功能其具体对应关系如下图所示 Pagination分页事件详解
对于分页组件除了上述几个属性还有2个非常重要的事件我们需要去学习
size-change pageSize 改变时会触发
current-change currentPage 改变时会触发其官方详细解释含义如下图所示 对于这2个事件的参考代码我们同样可以通过官方提供的完整案例中找到 此时Panigation组件的template完整代码如下
!-- Pagination分页 --el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChangebackgroundlayoutsizes,prev, pager, next,jumper,total:total1000/el-pagination需要复制事件需要的2个函数需要注意methods属性和data同级其代码如下
methods: {handleSizeChange(val) {console.log(每页 ${val} 条);},handleCurrentChange(val) {console.log(当前页: ${val});},},回到浏览器中我们f12打开开发者控制台然后切换当前页码和切换每页显示的数量呈现如下效果 Dialog对话框
Dialog对话框组件演示
Dialog: 在保留当前页面状态的情况下告知用户并承载相关操作。其企业开发应用场景示例如下图所示 在ElementUI官方找到Dialog组件 然后复制如下代码到我们的组件文件的template模块中
br /br /!--Dialog 对话框 --
!-- Table --
el-button typetext clickdialogTableVisible true打开嵌套表格的 Dialog/el-buttonel-dialog title收货地址 :visible.syncdialogTableVisibleel-table :datagridDatael-table-column propertydate label日期 width150/el-table-columnel-table-column propertyname label姓名 width200/el-table-columnel-table-column propertyaddress label地址/el-table-column/el-table
/el-dialog并且复制数据模型script模块中
gridData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,},{date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,},{date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,},{date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,},
],
dialogTableVisible: false,然后我们打开浏览器点击按钮呈现如下效果 Dialog对话框属性详解
如何做到对话框的显示与隐藏的呢是通过如下的属性 visible.sync 是否显示 Dialog具体释意如下图所示 visible属性绑定的dialogTableVisble属性一开始默认是false所以对话框隐藏然后我们点击按钮触发事件修改属性值为true Form表单
Form表单组件演示
Form 表单由输入框、选择器、单选框、多选框等控件组成用以收集、校验、提交数据。 表单在我们前端的开发中使用的还是比较多的在ElementUI的官方找到对应的组件示例我们的需求效果是在对话框中呈现表单内容 所以首先我们先要根据上一小结的内容制作一个新的对话框还需要注意的是针对这个新的对话框我们需要在data中声明新的变量dialogFormVisible来控制对话框的隐藏与显示。 然后我们复制官网提供的template部分代码到我们的vue组件文件的Dialog组件中但是此处官方提供的表单项标签太多所以我们只需要保留前面3个表单项组件我们发现其中表单项标签使用了v-model双向绑定所以我们需要在vue的数据模型中声明变量。 通过观察上述代码我们发现双向绑定的属性有4个分别是form.name,form.region,form.date1,form.date2,同样官方的代码中在script部分中还提供了onSubmit函数表单的立即创建按钮绑定了此函数我们可以输入表单的内容而表单的内容是双向绑定到form对象的所以我们修改官方的onSubmit函数即可而且我们还需要关闭对话框。
然后打开浏览器我们打开对话框并且输入表单内容点击立即创建按钮呈现如下效果 最终vue组件完整代码如下:
templatedivel-rowel-button默认按钮/el-buttonel-button typeprimary主要按钮/el-buttonel-button typesuccess成功按钮/el-buttonel-button typeinfo信息按钮/el-buttonel-button typewarning警告按钮/el-buttonel-button typedanger危险按钮/el-buttonel-button plain朴素按钮/el-buttonel-button typeprimary plain主要按钮/el-buttonel-button typesuccess plain成功按钮/el-buttonel-button typeinfo plain信息按钮/el-buttonel-button typewarning plain警告按钮/el-buttonel-button typedanger plain危险按钮/el-button/el-rowel-table :datatableData stylewidth: 100%el-table-column propdate label日期 width180 /el-table-columnel-table-column propname label姓名 width180 /el-table-columnel-table-column propaddress label地址 /el-table-column/el-table!-- Pagination分页 --el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChangebackgroundlayoutsizes,prev, pager, next,jumper,total:total1000/el-paginationbr /br /!-- Dialog对话框-Form表单 --el-button typetext clickdialogFormVisible true打开嵌套Form的 Dialog/el-buttonel-dialog titleForm表单 :visible.syncdialogFormVisibleel-form refform :modelform label-width80pxel-form-item label活动名称el-input v-modelform.name/el-input/el-form-itemel-form-item label活动区域el-select v-modelform.region placeholder请选择活动区域el-option label区域一 valueshanghai/el-optionel-option label区域二 valuebeijing/el-option/el-select/el-form-itemel-form-item label活动时间el-col :span11el-date-pickertypedateplaceholder选择日期v-modelform.date1stylewidth: 100%/el-date-picker/el-colel-col classline :span2-/el-colel-col :span11el-time-pickerplaceholder选择时间v-modelform.date2stylewidth: 100%/el-time-picker/el-col/el-form-itemel-form-itemel-button typeprimary clickonSubmit立即创建/el-buttonel-button取消/el-button/el-form-item/el-form/el-dialog/div
/templatescript
export default {data() {return {dialogFormVisible: false,//表单案例的数据双向绑定form: {name: ,region: ,date1: ,date2: ,},tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1516 弄}]};},methods: {handleSizeChange(val) {console.log(每页 ${val} 条);},handleCurrentChange(val) {console.log(当前页: ${val});},//表单案例的提交事件onSubmit() {console.log(this.form); //输出表单内容到控制台this.dialogFormVisible false; //关闭表案例的对话框},},
};
/scriptstyle
/style
