一、介绍
ElementUI是一套基于VUE2.0的桌面端组件库,ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。
官网:https://element.eleme.cn/
二、Dropdown 下拉菜单
将动作或菜单折叠到下拉菜单中。
可设置触发方式,点击或者鼠标放上去就显示
也可设置下拉列表分割等等
实现效果:
完整代码:
<el-dropdown>
<span class="el-dropdown-link">
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item disabled>双皮奶</el-dropdown-item>
<el-dropdown-item divided>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
Dropdown属性:
三、Calendar 日历
设置 value
来指定当前显示的月份。如果 value
未指定,则显示当月。value
支持 v-model
双向绑定。
<el-calendar v-model="value">
</el-calendar>
<script>
export default {
data() {
return {
value: new Date()
}
}
}
</script>
Calendar属性:
四、MessageBox 弹框
从场景上说,MessageBox 的作用是美化系统自带的
alert
、confirm
和prompt
,因此适合展示较为简单的内容。如果需要弹出较为复杂的内容,请使用 Dialog。
调用$alert
方法即可打开消息提示,它模拟了系统的 alert
,无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数,message
和title
。值得一提的是,窗口被关闭后,它默认会返回一个Promise
对象便于进行后续操作的处理。若不确定浏览器是否支持Promise
,可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。
<template>
<el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$alert('这是一段内容', '标题名称', {
confirmButtonText: '确定',
callback: action => {
this.$message({
type: 'info',
message: `action: ${ action }`
});
}
});
}
}
}
</script>
全局方法
如果你完整引入了 Element,它会为 Vue.prototype 添加如下全局方法:$msgbox, $alert, $confirm 和 $prompt。因此在 Vue instance 中可以采用本页面中的方式调用 MessageBox
。调用参数为:
$msgbox(options)
$alert(message, title, options)
或$alert(message, options)
$confirm(message, title, options)
或$confirm(message, options)
$prompt(message, title, options)
或$prompt(message, options)
单独引用
如果单独引入 MessageBox
:
import { MessageBox } from 'element-ui';
那么对应于上述四个全局方法的调用方法依次为:MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt,调用参数与全局方法相同。