Element UI

对话框 示例一：

  
    点击打开 Dialog
    
      这是一段信息
      
    取 消
    确 定
  
    
  


  export default {
    data () {
      return {
        dialogVisible: false
      }
    },
    methods: {
      handleClose (done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done()
          })
          .catch(_ => {
          })
      }
    }
  }

示例二：

  
    点击打开 Dialog
    
      这是一段信息
      
    取 消
    确 定
  
    
  


  export default {
    data () {
      return {
        dialogVisible: false
      }
    },
    methods: {
      handleClose (done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            this.dialogVisible = false // 手动关闭
            done()
          })
          .catch(_ => {
          })
      }
    }
  }

表格

示例：表格及作用域插槽

  
    
      
      
      
      
        
          查看
          编辑
        
      
    

    
      
      
        
          查看
          编辑
        
      
    
  

效果：

表单

示例：表单及自定义验证规则

  
    
      
        
      
      
        
      
      
        
      
      
        立即创建
        重置
      
    
  



  export default {
    data () {
      // 自定义：验证邮箱的规则
      const checkEmail = (rule, value, callback) => {
        setTimeout(() => {
          // 验证邮箱的正则表达式
          const reg = /^([a-zA-Z]|[0-9])(\w)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
          if (reg.test(value)) {
            callback()
          }
          callback(new Error('请输入合法的邮箱'))
        }, 500)
      }
      // 自定义：验证手机号的规则
      const checkTel = (rule, value, callback) => {
        const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
        if (reg.test(value)) {
          callback()
        }
        callback(new Error('请输入合法的手机号'))
      }
      return {
        userForm: {
          username: '',
          tel: '13264494458',
          email: '369950806@qq.com',
          info: '这是一个大好人！'
        },
        userFormRules: {
          username: [
            {
              required: true,
              message: '请输入用户名',
              trigger: 'blur'
            },
            {
              min: 6,
              max: 12,
              message: '长度在 6 到 12 个字符',
              trigger: 'blur'
            }
          ],
          tel: [
            {
              validator: checkTel,
              trigger: 'blur'
            }
          ],
          email: [
            {
              validator: checkEmail,
              trigger: 'blur'
            }
          ]
        }
      }
    }
  }

效果：