本帖最后由 我是楠楠 于 2019-10-23 15:22 编辑
【郑州校区】传智健康项目讲义第一章之ElementUI 三
4.2.6 Message 消息提示
常用于主动操作后的反馈提示。
[AppleScript] 纯文本查看 复制代码 <el‐button :plain="true" @click="open1">消息</el‐button>
<el‐button :plain="true" @click="open2">成功</el‐button>
<el‐button :plain="true" @click="open3">警告</el‐button>
<el‐button :plain="true" @click="open4">错误</el‐button>
<script>
new Vue({
el: '#app',
methods: {
open1() {
this.$message('这是一条消息提示');
},
open2() {
this.$message({
message: '恭喜你，这是一条成功消息',
type: 'success'
});
},
open3() {
this.$message({
message: '警告哦，这是一条警告消息',
type: 'warning'
});
},
open4() {
this.$message.error('错了哦，这是一条错误消息');
}
}
})
</script>
4.2.7 Tabs 标签页
分隔内容上有关联但属于不同类别的数据集合。
[AppleScript] 纯文本查看 复制代码 <h3>基础的、简洁的标签页</h3>
<!‐‐
通过value属性来指定当前选中的标签页
‐‐>
<el‐tabs value="first">
<el‐tab‐pane label="用户管理" name="first">用户管理</el‐tab‐pane>
<el‐tab‐pane label="配置管理" name="second">配置管理</el‐tab‐pane>
<el‐tab‐pane label="角色管理" name="third">角色管理</el‐tab‐pane>
<el‐tab‐pane label="定时任务补偿" name="fourth">定时任务补偿</el‐tab‐
pane>
</el‐tabs>
<h3>选项卡样式的标签页</h3>
<el‐tabs value="first" type="card">
<el‐tab‐pane label="用户管理" name="first">用户管理</el‐tab‐pane>
<el‐tab‐pane label="配置管理" name="second">配置管理</el‐tab‐pane>
<el‐tab‐pane label="角色管理" name="third">角色管理</el‐tab‐pane>
<el‐tab‐pane label="定时任务补偿" name="fourth">定时任务补偿</el‐tab‐
pane>
</el‐tabs>
<h3>卡片化的标签页</h3>
<el‐tabs value="first" type="border‐card">
<el‐tab‐pane label="用户管理" name="first">用户管理</el‐tab‐pane>
<el‐tab‐pane label="配置管理" name="second">配置管理</el‐tab‐pane>
<el‐tab‐pane label="角色管理" name="third">角色管理</el‐tab‐pane>
<el‐tab‐pane label="定时任务补偿" name="fourth">定时任务补偿</el‐tab‐
pane>
</el‐tabs>
<script>
new Vue({
el: '#app'
})
</script>
4.2.8 Form 表单
由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。在 Form组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。
| 
收藏
淘帖
踩
