黑马程序员技术交流社区

标题: 【郑州校区】传智健康项目讲义第一章之ElementUI 三 [打印本页]

---

作者: 我是楠楠    时间: 2019-10-23 14:51
标题: 【郑州校区】传智健康项目讲义第一章之ElementUI 三

【郑州校区】传智健康项目讲义第一章之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。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2