VUE-dialog

看了一遍VUE的视频，看完就忘，中间也眼高手低没有跟着写，一段时间后自己动手毫无头绪，决定做做笔记

PS: 所有模块需要按需导入

添加dialog对话框


内容主体：
    
     
       <el-button class="filter-item" type="primary" @click="addDialogVisible = true">添加用户</el-button>
     
    <el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
      
      <el-form
        ref="addUserFormRef"
        :model="addUserForm"
        :rules="addUserFormRules"
        label-width="100px"
      >
        
          
        
        
          
        
        
          
        
        
          
        
      </el-form>
      
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      
    </el-dialog>

如上所见首先定义 addDialogVisible =True 展示dialog对话框所以要在 return 里声明

      
addDialogVisible: false,

定义了addDialogClosed 方法所以要编写addDialogClosed 方法，在methods里面声明

      
    addDialogClosed () {
      this.$refs.addUserFormRef.resetFields()
    },

声明了表单验证规则addUserFormRef，所以在return里面声明

      
      // 用户添加表单验证规则
      addUserFormRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 2,
            max: 10,
            message: '用户名的长度在2～10个字',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入用户密码', trigger: 'blur' },
          {
            min: 6,
            max: 18,
            message: '用户密码的长度在6～18个字',
            trigger: 'blur'
          }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ]
      },

:model=”addUserForm” 所以return 里面声明表单


      // 用户添加
      addUserForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },

ref=”addUserFormRef” 表单重置功能


      // 用户添加
      addUserForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },

FEATURED TAGS

FRIENDS