elementui常用组件-个人版(间断更新)

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对应的值
相关推荐
半花17 小时前
i18n国际语言化配置
前端
编程贝多芬17 小时前
Promise 的场景和最佳实践
前端·javascript
Asort18 小时前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio18 小时前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
南雨北斗18 小时前
JS的对象属性存储器
前端
Lotzinfly18 小时前
12个TypeScript奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
一个大苹果18 小时前
setTimeout延迟超过2^31立即执行?揭秘JavaScript定时器的隐藏边界
javascript
开源之眼18 小时前
React中,useState和useReducer有什么区别
前端
普郎特18 小时前
"不再迷惑!用'血缘关系'彻底搞懂JavaScript原型链机制"
前端·javascript
可观测性用观测云18 小时前
前端错误可观测最佳实践
前端