Element的$prompt方法的使用及自定义显示内容

自定义显示内容效果图：

直接上代码：

func(row){
	const h = this.$createElement
	const form = this.form
	// 自定义组件模板
    const CustomInputComponent = {
      data() {
        return {
          inputValue: '',
          row,//如果模板中要使用方法中的变量，需要先在data中声明才能使用
          form,
          rule: {
            inputValue: [
              {
                required: true,
                message: '请输入原因',
                trigger: 'blur',
              },
            ],
          },
          model: {
            inputValue: '',
          },
        }
      },
      template: `
      <div>
      	<el-form label-position="top" :model="model" :rules="rule" ref="formaa">
      		<el-form-item label='原因：' prop="inputValue" >
      			<el-input v-model="model.inputValue" placeholder="请输入" maxlength="15"></el-input>
      		</el-form-item>
      	</el-form>
        <p>编号：<el-link type="primary">{{form.name}}</el-link></p>
      </div>
    `,
    }
    
    // 创建自定义组件实例
	const CustomInputInstance = h(CustomInputComponent)
	//获取自定义模板中的值
	let inpVal = CustomInputInstance.componentInstance.inputValue
	// 显示弹框
    this.$prompt(null, '提示', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       showInput: false,//隐藏原有的input
       dangerouslyUseHTMLString: true,
       message: CustomInputInstance,//创建的自定义组件实例
       beforeClose: (action, instance, done) => {
         //点击确定按钮时获取输入框的值
         if (action == 'confirm') {
         	//触发表单校验
         	CustomInputInstance.componentInstance.$refs.formaa.validate((valid) => {
       			if (valid) {
       				//此处写表单校验通过后的业务
       				done()
       			}
         	})
         } else {
           done()
         }
       },
     })
       .then(() => {
         console.log('Input value:', inpVal)
       })
       .catch(() => {
         console.log('Prompt cancelled')
       })
	
},

其中beforeClose中的done()方法是继续关闭弹窗的作用，不触发则不会关闭弹窗

默认显示效果图

代码如下：

funC(){
	this.$prompt('请输入id', '提示', {
      confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(({ value }) => {
          console.log('输入框输入的值：',value)
        })
        .catch(() => {})
}