VUE使用MintUI（MessageBox）实现自定义提示框中的内容

项目需求将提示框中的提示内容修改成可以添加备注的多行文本域

效果图

准备工作

1. 引入 mint-ui

npm intall mint-ui  --save

2. 在main.js中引入mintUI

// 引入mintUI
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

3. 在项目中引入mintUI的MessageBox模块

// 引入MessageBox模块
import { MessageBox } from 'mint-ui';

代码实现

// 效果图中展示的结构
let html =`<textarea id="textarea_val" style="resize:none;padding:10px;font-size: 0.595rem;color: #101010;outline: none;" cols="35" rows="5"></textarea>`

MessageBox({
	$type: 'confirm',
	title: '请输入拒接原因',
	message: html,
	showCancelButton: true,
	// showInput: true
}).then((res) => {
	console.log(res);
	if (res == 'confirm') {
         let textarea_val = document.getElementById('textarea_val');
         console.log(textarea_val.value)  // 输入框中的值
         // 判断写逻辑····
	}

}).catch(err => {
    console.log(err);
    let textarea_val = document.getElementById('textarea_val');
    textarea_val.value = "";
})

个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用