element-ui - $prompt非空验证-526互联

<template>
  <div>
    <el-button type="primary" @click="click">查询</el-button>
  </div>
</template>
 
<script>
export default {
 
  data () {
    return {
 
    }
  },
  methods: {
    click () {
      // this.$prompt的message前面加必填标志 *
      const h = this.$createElement
      this.$prompt(
        h('p', null, [h('i', { style: 'color: red' }, '* '),
          h('span', null, '请输入文件夹名称：')]),
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue: '文件名',
          // 非空验证方法1(函数)
          // inputValidator: (value) => { // 点击按钮时，对文本框里面的值进行验证
          //   if (!value) {
          //     return '输入不能为空'
          //   }
          // },
          // // 非空验证方法2(正则)
          inputPattern: /^.+$/,
          inputErrorMessage: '请输入内容'
          // callback:function(action, instance){
          //     if(action === 'confirm'){
          //         // do something...
          //         console.log(instance.inputValue);
          //     }
          // }
        }).then(({ value }) => {
        console.log(value)
        // TO DO DO ...
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>