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

Dialog 对话框

el-dialog

<el-dialog
  title="提示"
  :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-picker
      v-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对应的值