vue中使用模态框传参_vue移动端模态框(可传参)的实现

1-封装模态框组件Mydialog (样式可以自己写)

>

{ {modal.cancelButtonText}}

{ {modal.confirmButtonText}}

export default {

props: {

visible: { type: Boolean, default: false },

options: {

type: Object,

default: {}

}

},

// 采用v-bind将visible传入

methods: {

ConfirmHandler () {

this.$emit('update:visible', false); // 更新visible的值(可选，如果想点击确认之后，进行一些处理再决定关不关闭，可取消在这里更新visible)

this.$emit('Confirm'); // 传递确认事件

},

CancelHandler () {

this.$emit('update:visible', false); // 更新visible的值

this.$emit('Cancel'); // 传递取消事件

},

close () {

this.visible = false;

}

},

/**

* modal 模态接口参数

* @param {string} modal.title 模态框标题

* @param {boolean} modal.showCancelButton 是否显示取消按钮

* @param {string} modal.cancelButtonClass 取消按钮样式

* @param {string} modal.cancelButtonText 取消按钮文字

* @param {string} modal.showConfirmButton 是否显示确定按钮

* @param {string} modal.confirmButtonClass 确定按钮样式

* @param {string} modal.confirmButtonText 确定按钮标文字

*/

computed: {

/**

* 格式化props进来的参数,对参数赋予默认值

*/

modal () {

let modal = this.options;

if (modal) {

modal = {