日常开发记录-element-ui $prompt输入弹框 * 必填用法--输入框默认值、校验、阻止关闭等问题...

最新推荐文章于 2024-04-29 17:34:35 发布

who am I？ 6666

最新推荐文章于 2024-04-29 17:34:35 发布

阅读量1.5k

点赞数 2

文章标签： vue.js javascript 前端 elementui ecmascript

本文链接：https://blog.csdn.net/machine_vision123/article/details/129253539

版权

代码展示：

<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>

效果图：