做聚划算网站,增城网站建设方案,中国搜索提交网站,wordpress安卓app目录
Dialog对话框
介绍
使用
实际效果
Form表单
介绍
使用
实际效果 Dialog对话框
介绍
Dialog对话框#xff1a;在保留当前页面状态的情况下#xff0c;告知用户并承载相关操作。
Dialog 对话框组件可以在保留当前页面信息的状态下弹出一个对话框#xff0c;并…目录
Dialog对话框
介绍
使用
实际效果
Form表单
介绍
使用
实际效果 Dialog对话框
介绍
Dialog对话框在保留当前页面状态的情况下告知用户并承载相关操作。
Dialog 对话框组件可以在保留当前页面信息的状态下弹出一个对话框并在对话框中呈现信息给用户比如可以呈现表格、form 表单、图片或文字最终呈现的效果如下。 使用
接下来演示对话框组件的使用 直接打开 Element 的官方网站在左侧菜单栏找到 Dialog 对话框组件有各种对话框比如基本用法点击打开 Dialog 会弹出提示信息也可在对话框中自定义内容比如生成表格或表单还可制作嵌套的 Dialog。演示第二个自定义内容的对话框点击显示代码直接复制相关代码。复制过来后这里需要两个数据模型一个是 Dialog tableVisible 数据模型点击按钮后将其设置为 true另一个是表格中展示内容的 data 数据模型。
templatediv!-- Dialog 对话框 --el-button typetext clickdialogTableVisible true打开嵌套表格的 Dialog/el-buttonel-dialog title收货地址 :visible.syncdialogTableVisibleel-table :datagridDatael-table-columnpropertydatelabel日期width150/el-table-columnel-table-columnpropertynamelabel姓名width200/el-table-columnel-table-column propertyaddress label地址/el-table-column/el-table/el-dialogbr /br /el-button typetext clickdialogFormVisible true打开嵌套表单的 Dialog/el-buttonel-dialog title收货地址 :visible.syncdialogFormVisibleel-form :modelformel-form-item label活动名称 :label-widthformLabelWidthel-input v-modelform.name autocompleteoff/el-input/el-form-itemel-form-item label活动区域 :label-widthformLabelWidthel-select v-modelform.region placeholder请选择活动区域el-option label区域一 valueshanghai/el-optionel-option label区域二 valuebeijing/el-option/el-select/el-form-item/el-formdiv slotfooter classdialog-footerel-button clickdialogFormVisible false取 消/el-buttonel-button typeprimary clickdialogFormVisible false确 定/el-button/div/el-dialog/div
/template
script
export default {data() {return {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,dialogFormVisible: false,form: {name: ,region: ,date1: ,date2: ,delivery: false,type: [],resource: ,desc: ,},formLabelWidth: 120px,};},
};
/script
style/style在代码中通过 dialogFormVisible 变量控制对话框的显示与隐藏变量值为 true 则显示为 false 则隐藏。
实际效果 接下来讲解本章最后一个组件——form 表单组件。表单用于采集数据表单组件由输入框、选择器、时间组件、单选框、多选框等表单项组成在前端开发中应用较多比如添加课程和修改课程时点击按钮弹出的对话框中就是 form 表单组件。
Form表单
介绍
Form表单由输入框、选择器、单选框、多选框等控件组成用以收集、校验、提交数据。 使用
这里演示典型表单点击显示代码复制到 VS Code 中修改。要实现点击按钮呈现表单的效果我们在 Dialog 中呈现 form 表单。
templatediv!-- Form --el-button typetext clickdialogFormVisible true打开嵌套表单的 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-item label即时配送el-switch v-modelform.delivery/el-switch/el-form-itemel-form-item label活动性质el-checkbox-group v-modelform.typeel-checkbox label美食/餐厅线上活动 nametype/el-checkboxel-checkbox label地推活动 nametype/el-checkboxel-checkbox label线下主题活动 nametype/el-checkboxel-checkbox label单纯品牌曝光 nametype/el-checkbox/el-checkbox-group/el-form-itemel-form-item label特殊资源el-radio-group v-modelform.resourceel-radio label线上品牌商赞助/el-radioel-radio label线下场地免费/el-radio/el-radio-group/el-form-itemel-form-item label活动形式el-input typetextarea v-modelform.desc/el-input/el-form-itemel-form-itemel-button typeprimary clickonSubmit立即创建/el-buttonel-button取消/el-button/el-form-item/el-form/el-dialog/div
/template
script
export default {data() {return {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,dialogFormVisible: false,form: {name: ,region: ,date1: ,date2: ,delivery: false,type: [],resource: ,desc: ,},formLabelWidth: 120px,};},methods: {onSubmit() {alert(submit!);},},
};
/script
style/style在 form 表单中还有最后一个表单项即两个按钮点击提交按钮触发 onsubmit 方法在 message 属性中添加 onsubmit 方法在函数中通过 alert 弹出表单数据需获取当前 Vue 对象中的 form将 form 对象转为字符串改造后打开浏览器查看效果输入内容点击提交能接收到表单数据可将其提交到服务端。 实际效果 到此关于 Element 中常见的组件就介绍完了对于这些组件的学习基本上是 CtrlC 复制、CtrlV 粘贴的过程粘贴后改造成想要的样子若组件中有属性不清楚直接打开官方文档每个组件的属性和事件在最后都有详细说明。 END 学习自黑马程序员——JavaWeb课程
