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

今年不养猪只除草2024-02-03 19:37

Dialog 对话框

el-dialog

html 复制代码

<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

html 复制代码

<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

html 复制代码

<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对应的值