elementui常用组件-个人版（间断更新）

Dialog 对话框

el-dialog

<el-dialogtitle="提示":visible.sync="dialogVisible"width="30%":before-close="handleClose"><span>这是一段信息</span><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span>
</el-dialog><script>export default {data() {return {dialogVisible: false};},methods: {handleClose(done) {this.$confirm('确认关闭？').then(_ => {done();}).catch(_ => {});}}};
</script>

• visible.sync：是否显示 Dialog，支持 .sync 修饰符
  • .sync 修饰符与 visible 属性一起使用时，它通常意味着子组件有一个 visible 属性，并且父组件想要同步地更新这个属性的值
• before-close=“handleClose”：在点击右上角关闭对话框后，触发是否确认关闭事件
  • handleClose在methods内
• slot=“footer” class=“dialog-footer”：底部是一个插槽，放了确认和取消，确认可以自定义点击触发事件，看具体需求

DatePicker 日期选择器

el-date-picker

<template><div class="block"><span class="demonstration">默认</span><el-date-pickerv-model="value1"type="date"placeholder="选择日期"></el-date-picker></div>
</template><script>export default {data() {return {value1: '',};}};
</script>

Form表单

el-select

<el-form-item label="活动区域"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item>

• v-model=“form.region”：下拉框和form.region双向绑定
• placeholder：占位内容
• label：下拉框显示内容
• value：label对应的值