如何使用vue.js构造modal组件
kuaidi.ping-jia.net 作者：佚名 更新日期：2024-08-02
如何使用vue.js构造modal组件
组件结构
<template>
<div class="modal" v-show="show" transition="fade">
<div class="modal-dialog">
<div class="modal-content">
<!--头部-->
<div class="modal-header">
<slot name="header">
<p class="title">{{modal.title}}</p>
</slot>
<a v-touch:tap="close(0)" class="close" href="javascript:void(0)"></a>
</div>
<!--内容区域-->
<div class="modal-body">
<slot name="body">
<p class="notice">{{modal.text}}</p>
</slot>
</div>
<!--尾部,操作按钮-->
<div class="modal-footer">
<slot name="button">
<a v-if="modal.showCancelButton" href="javascript:void(0)" class="button {{modal.cancelButtonClass}}" v-touch:tap="close(1)">{{modal.cancelButtonText}}</a>
<a v-if="modal.showConfirmButton" href="javascript:void(0)" class="button {{modal.confirmButtonClass}}" v-touch:tap="submit">{{modal.confirmButtonText}}</a>
</slot>
</div>
</div>
</div>
</div>
<div v-show="show" class="modal-backup" transition="fade"></div>
</template>
模态框结构分为三部分，分别为头部、内部区域和操作区域，都提供了slot，可以根据需要定制。
样式
.modal {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1001;
-webkit-overflow-scrolling: touch;
outline: 0;
overflow: scroll;
margin: 30/@rate auto;
}
.modal-dialog {
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%,0);
width: 690/@rate;
padding: 50/@rate 40/@rate;
background: #fff;
}
.modal-backup {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
background: rgba(0, 0, 0, 0.5);
}
这里只是一些基本样式，没什么好说的，这次项目是在移动端，用了淘宝的 自适应布局方案 ，@rate是切稿时候的转换率。
接口定义
/**
* modal 模态接口参数
* @param {string} modal.title 模态框标题
* @param {string} modal.text 模态框内容
* @param {boolean} modal.showCancelButton 是否显示取消按钮
* @param {string} modal.cancelButtonClass 取消按钮样式
* @param {string} modal.cancelButtonText 取消按钮文字
* @param {string} modal.showConfirmButton 是否显示确定按钮
* @param {string} modal.confirmButtonClass 确定按钮样式
* @param {string} modal.confirmButtonText 确定按钮标文字
*/
props: ['modalOptions'],
computed: {
/**
* 格式化props进来的参数,对参数赋予默认值
*/
modal: {
get() {
let modal = this.modalOptions;
modal = {
title: modal.title || '提示',
text: modal.text,
showCancelButton: typeof modal.showCancelButton === 'undefined' ? true : modal.showCancelButton,
cancelButtonClass: modal.cancelButtonClass ? modal.showCancelButton : 'btn-default',
cancelButtonText: modal.cancelButtonText ? modal.cancelButtonText : '取消',
showConfirmButton: typeof modal.showConfirmButton === 'undefined' ? true : modal.cancelButtonClass,
confirmButtonClass: modal.confirmButtonClass ? modal.confirmButtonClass : 'btn-active',
confirmButtonText: modal.confirmButtonText ? modal.confirmButtonText : '确定',
};
return modal;
},
},
},
这里定义了接口的参数，可以自定义标题、内容、是否显示按钮和按钮的样式，用一个computed来做参数默认值的控制。
模态框内部方法
data() {
return {
show: false, // 是否显示模态框
resolve: '',
reject: '',
promise: '', // 保存promise对象
};
},
methods: {
/**
* 确定,将promise断定为完成态
*/
submit() {
this.resolve('submit');
},
/**
* 关闭,将promise断定为reject状态
* @param type {number} 关闭的方式 0表示关闭按钮关闭,1表示取消按钮关闭
*/
close(type) {
this.show = false;
this.reject(type);
},
/**
* 显示confirm弹出,并创建promise对象
* @returns {Promise}
*/
confirm() {
this.show = true;
this.promise = new Promise((resolve, reject) => {
this.resolve = resolve;
this.reject = reject;
});
return this.promise; //返回promise对象,给父级组件调用
},
},
在模态框内部定义了三个方法，最核心部分confirm方法，这是一个定义在模态框内部，但是是给使用模态框的父级组件调用的方法，该方法返回的是一个promise对象，并将resolve和reject存放于modal组件的data中，点击取消按钮时，断定为reject状态，并将模态框关闭掉，点确定按钮时，断定为resolve状态，模态框没有关闭，由调用modal组件的父级组件的回调处理完成后手动控制关闭模态框。
调用
<!-- template -->
<confirm v-ref:dialog :modal-options.sync="modal"></confirm>
<!-- methods -->
this.$refs.dialog.confirm().then(() => {
// 点击确定按钮的回调处理
callback();
this.$refs.dialog.show = false;
}).catch(() => {
// 点击取消按钮的回调处理
callback();
});
用 v-ref 创建一个索引,就很方便拿到模态框组件内部的方法了。这样一个模态框组件就完成了。
其他实现方法
在模态框组件中，比较难实现的应该是点击确定和取消按钮时，父级的回调处理，我在做这个组件时，也参考了一些其实实现方案。
使用事件转发
这个方法是我的同事实现的，用在上一个项目，采用的是$dispatch和$broadcast来派发或广播事件。
首先在根组件接收dispatch过来的transmit事件，再将transmit事件传递过来的eventName广播下去
events: {
/**
* 转发事件
* @param {string} eventName 事件名称
* @param {object} arg 事件参数
* @return {null}
*/
'transmit': function (eventName, arg) {
this.$broadcast(eventName, arg);
}
},
其次是模态框组件内部接收从父级组件传递过来的确定和取消按钮所触发的事件名，点击取消和确定按钮的时候触发
// 接收事件，获得需要取消和确定按钮的事件名
events: {
'tip': function(obj) {
this.events = {
cancel: obj.events.cancel,
confirm: obj.events.confirm
}
}
}
// 取消按钮
cancel：function() {
this.$dispatch('transmit',this.events.cancel);
}
// 确定按钮
submit: function() {
this.$dispatch('transmit',this.events.submit);
}
在父级组件中调用模态框如下：
this.$dispatch('transmit','tip',{
events: {
confirm: 'confirmEvent'
}
});
this.$once('confirmEvent',function() {
callback();
}
先是传递tip事件，将事件名传递给模态框，再用$once监听确定或取消按钮所触发的事件，事件触发后进行回调。
这种方法看起来是不是很晕？所以vue 2.0取消了$dispatch和$broadcast，我们在最近的项目中虽然还在用1.0，但是也不再用$dispatch和$broadcast，方便以后的升级。
使用emit来触发
这种方法来自 vue-bootstrap-modal ,点击取消和确定按钮的时候分别emit一个事件，直接在组件上监听这个事件，这种做法的好处是事件比较容易追踪。
// 确定按钮
ok () {
this.$emit('ok');
if (this.closeWhenOK) {
this.show = false;
}
},
// 取消按钮
cancel () {
this.$emit('cancel');
this.show = false;
},
调用：
<modal title="Modal Title" :show.sync="show" @ok="ok" @cancel="cancel">
Modal Text
</modal>
但是我们在使用的时候经常会遇到这样的场景，在一个组件的内部，经常会用到多个对话框，对话框可能只是文字有点区别，回调不同，这时就需要在template中为每个对话框都写一次，有点麻烦。
如何使用vue.js构造modal组件
答：使用vue.js构造modal组件的方法是使用 v-model 指令：v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。比如，多个勾选框，绑定到同一个数组：JackJohnMikeChecked names: {{ checkedNames | json }} new Vue({ el...
如何使用vue.js构造modal组件
答：在模态框内部定义了三个方法,最核心部分confirm方法,这是一个定义在模态框内部,但是是给使用模态框的父级组件调用的方法,该方法返回的是一个promise对象,并将resolve和reject存放于modal组件的data中,点击取消按钮时,断定为reject状态,并将模态框关闭掉,点确定按钮时,断定为resolve状态,模态框没有关闭,由调用modal组件...
如何使用vue.js构造modal组件
答：modal.open()})// 在 modal 内部还要处理关闭、销毁自身的逻辑 状态驱动的思维写出来的代码：this.showModal = true // 关掉 this.showModal = false 哪个干净，哪个容易理解、容易测试、容易维护？从模板的角度来看：在父模板里直接写入 <modal> 标签，那么这个 modal 渲染的位置是清晰明确的，你看...
VUE中多组件中怎么使用slot
答：使用vue.js构造modal组件的方法是使用 v-model 指令： v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。 比如，多个勾选框，绑定到同一个数组： Jack John Mike Checked names: {{ checkedNames | js...
如何使input输入完后触发v-modal?
答：可以用v-on:blur绑定触发试试看。如何使用v-on事件绑定 我们可以用 v-on 指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法：注意在 tap 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码不需要关注底层逻辑。怎样实现在一个input中...
Vue,路由拦截,弹窗提示
答：利用 Vue.extend() 构造出一个实例，然后手动挂载 先把刚刚封装的弹窗组件放到一个Modal（名字随便）文件夹下，里面再创建文件index.js 然后到 main.js 中导入路由和这个插件即可食用了 但是还是有问题，因为当挂在完成的时候，还没有把DOM添加到页面上，所以无法使用 进入时候的过渡动画<transition>...
前端必须搜藏Vue版的团队代码规范
答：也可以在当前 .vue 文件中定义一个常量定义 columns 数据，因为无论如何都是固定且不会修改的数据，应该使用 Object.freeze 进行包裹，既可以提高性能还可以将固定的数据抽离，一些下拉框前端固定的数据也建议此操作 一个页面中通常会存在很多个不同功能的弹框，若是每一个弹框都设置...
ant design vue modal组件关闭图标会出现黑边框
答：将model提到外面。因为antdesignvuemodel有多个form表单，把它作为单独的组件提到外面就好了。
vue.js渲染失败问题,刷新后才成功,不知道有没有人遇到过
答：1.使用框架，就用框架的规则，使用生命周期函数来做数据的更改，处理函数写在method里面使用vm.函数调用。2.ajax是异步的，不到万不得已不要使用同步，因为同步真的很阻塞，亲身体会。比如有5个回填数据的输入框，第二个输入框使用同步，那么第二个没完成之前下面输入框的全是空的，这样是不是很影响...
关于ant-design-vue 组件modal里使用echars?
答：提供2个思路：1 如果渲染echarts的div用的是百分比的话，试着写死宽高。style="width:600px;height:800px;"2 用静态数据，然后把你的option放在官网的demo上测试，确保你的option配置是对的。
使用vue.js构造modal组件的方法是使用 v-model 指令：
v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。
比如，多个勾选框，绑定到同一个数组：
JackJohnMikeChecked names: {{ checkedNames | json }}
new Vue({ el: '...', data: { checkedNames: [] }})
输出结果：
其实以前也有一些用户跟我纠结过这个问题，他们觉得一定要在需要的时候创建这个组件才是符合他们思维的做法。在我看来，这是没有理解『状态驱动的界面』的一种表现。
传统的命令式 (Imperative) 的思维写出来的代码：
$('.open-modal').on('click', function () {
var modal = new Modal()
modal.$appendTo('body')
modal.open()
})
// 在 modal 内部还要处理关闭、销毁自身的逻辑
状态驱动的思维写出来的代码：
this.showModal = true
// 关掉
this.showModal = false
哪个干净，哪个容易理解、容易测试、容易维护？
从模板的角度来看：在父模板里直接写入 标签，那么这个 modal 渲染的位置是清晰明确的，你看一眼父模板就知道，哦，这里可能会有个 modal，也就是说，你的模板描述了最终可能渲染出来的 DOM 结构。但命令式思维下异步添加的 modal，你看模板的时候是根本看不见的，你的模板和最终的 DOM 结构没有可靠的映射关系，因为你完全可能随手把 modal 插到任何地方。你觉得这两者哪个更容易维护？
题主可能会觉得总是渲染 不太效率。官网示例里面的 modal 用的是 v-show，换成 v-if 就好了。v-if 和 v-show 的区别在于 v-if 是真正的 conditional rendering，如果初始状态是 false，它什么都不会干。
另外一个情况是，我们可能需要在一个嵌套了很多层的子组件里面触发 modal。这种情况下，你应该把 modal 放在根组件里面，然后从子组件触发一个事件上去。
组件结构
<template>
<div class="modal" v-show="show" transition="fade">
<div class="modal-dialog">
<div class="modal-content">
<!--头部-->
<div class="modal-header">
<slot name="header">
<p class="title">{{modal.title}}</p>
</slot>
<a v-touch:tap="close(0)" class="close" href="javascript:void(0)"></a>
</div>
<!--内容区域-->
<div class="modal-body">
<slot name="body">
<p class="notice">{{modal.text}}</p>
</slot>
</div>
<!--尾部,操作按钮-->
<div class="modal-footer">
<slot name="button">
<a v-if="modal.showCancelButton" href="javascript:void(0)" class="button {{modal.cancelButtonClass}}" v-touch:tap="close(1)">{{modal.cancelButtonText}}</a>
<a v-if="modal.showConfirmButton" href="javascript:void(0)" class="button {{modal.confirmButtonClass}}" v-touch:tap="submit">{{modal.confirmButtonText}}</a>
</slot>
</div>
</div>
</div>
</div>
<div v-show="show" class="modal-backup" transition="fade"></div>
</template>
模态框结构分为三部分，分别为头部、内部区域和操作区域，都提供了slot，可以根据需要定制。
样式
.modal {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1001;
-webkit-overflow-scrolling: touch;
outline: 0;
overflow: scroll;
margin: 30/@rate auto;
}
.modal-dialog {
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%,0);
width: 690/@rate;
padding: 50/@rate 40/@rate;
background: #fff;
}
.modal-backup {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
background: rgba(0, 0, 0, 0.5);
}
这里只是一些基本样式，没什么好说的，这次项目是在移动端，用了淘宝的 自适应布局方案 ，@rate是切稿时候的转换率。
接口定义
/**
* modal 模态接口参数
* @param {string} modal.title 模态框标题
* @param {string} modal.text 模态框内容
* @param {boolean} modal.showCancelButton 是否显示取消按钮
* @param {string} modal.cancelButtonClass 取消按钮样式
* @param {string} modal.cancelButtonText 取消按钮文字
* @param {string} modal.showConfirmButton 是否显示确定按钮
* @param {string} modal.confirmButtonClass 确定按钮样式
* @param {string} modal.confirmButtonText 确定按钮标文字
*/
props: ['modalOptions'],
computed: {
/**
* 格式化props进来的参数,对参数赋予默认值
*/
modal: {
get() {
let modal = this.modalOptions;
modal = {
title: modal.title || '提示',
text: modal.text,
showCancelButton: typeof modal.showCancelButton === 'undefined' ? true : modal.showCancelButton,
cancelButtonClass: modal.cancelButtonClass ? modal.showCancelButton : 'btn-default',
cancelButtonText: modal.cancelButtonText ? modal.cancelButtonText : '取消',
showConfirmButton: typeof modal.showConfirmButton === 'undefined' ? true : modal.cancelButtonClass,
confirmButtonClass: modal.confirmButtonClass ? modal.confirmButtonClass : 'btn-active',
confirmButtonText: modal.confirmButtonText ? modal.confirmButtonText : '确定',
};
return modal;
},
},
},
这里定义了接口的参数，可以自定义标题、内容、是否显示按钮和按钮的样式，用一个computed来做参数默认值的控制。
模态框内部方法
data() {
return {
show: false, // 是否显示模态框
resolve: '',
reject: '',
promise: '', // 保存promise对象
};
},
methods: {
/**
* 确定,将promise断定为完成态
*/
submit() {
this.resolve('submit');
},
/**
* 关闭,将promise断定为reject状态
* @param type {number} 关闭的方式 0表示关闭按钮关闭,1表示取消按钮关闭
*/
close(type) {
this.show = false;
this.reject(type);
},
/**
* 显示confirm弹出,并创建promise对象
* @returns {Promise}
*/
confirm() {
this.show = true;
this.promise = new Promise((resolve, reject) => {
this.resolve = resolve;
this.reject = reject;
});
return this.promise; //返回promise对象,给父级组件调用
},
},
在模态框内部定义了三个方法，最核心部分confirm方法，这是一个定义在模态框内部，但是是给使用模态框的父级组件调用的方法，该方法返回的是一个promise对象，并将resolve和reject存放于modal组件的data中，点击取消按钮时，断定为reject状态，并将模态框关闭掉，点确定按钮时，断定为resolve状态，模态框没有关闭，由调用modal组件的父级组件的回调处理完成后手动控制关闭模态框。
调用
<!-- template -->
<confirm v-ref:dialog :modal-options.sync="modal"></confirm>
<!-- methods -->
this.$refs.dialog.confirm().then(() => {
// 点击确定按钮的回调处理
callback();
this.$refs.dialog.show = false;
}).catch(() => {
// 点击取消按钮的回调处理
callback();
});
用 v-ref 创建一个索引,就很方便拿到模态框组件内部的方法了。这样一个模态框组件就完成了。
其他实现方法
在模态框组件中，比较难实现的应该是点击确定和取消按钮时，父级的回调处理，我在做这个组件时，也参考了一些其实实现方案。
使用事件转发
这个方法是我的同事实现的，用在上一个项目，采用的是$dispatch和$broadcast来派发或广播事件。
首先在根组件接收dispatch过来的transmit事件，再将transmit事件传递过来的eventName广播下去
events: {
/**
* 转发事件
* @param {string} eventName 事件名称
* @param {object} arg 事件参数
* @return {null}
*/
'transmit': function (eventName, arg) {
this.$broadcast(eventName, arg);
}
},
其次是模态框组件内部接收从父级组件传递过来的确定和取消按钮所触发的事件名，点击取消和确定按钮的时候触发
// 接收事件，获得需要取消和确定按钮的事件名
events: {
'tip': function(obj) {
this.events = {
cancel: obj.events.cancel,
confirm: obj.events.confirm
}
}
}
// 取消按钮
cancel：function() {
this.$dispatch('transmit',this.events.cancel);
}
// 确定按钮
submit: function() {
this.$dispatch('transmit',this.events.submit);
}
在父级组件中调用模态框如下：
this.$dispatch('transmit','tip',{
events: {
confirm: 'confirmEvent'
}
});
this.$once('confirmEvent',function() {
callback();
}
先是传递tip事件，将事件名传递给模态框，再用$once监听确定或取消按钮所触发的事件，事件触发后进行回调。
这种方法看起来是不是很晕？所以vue 2.0取消了$dispatch和$broadcast，我们在最近的项目中虽然还在用1.0，但是也不再用$dispatch和$broadcast，方便以后的升级。
使用emit来触发
这种方法来自 vue-bootstrap-modal ,点击取消和确定按钮的时候分别emit一个事件，直接在组件上监听这个事件，这种做法的好处是事件比较容易追踪。
// 确定按钮
ok () {
this.$emit('ok');
if (this.closeWhenOK) {
this.show = false;
}
},
// 取消按钮
cancel () {
this.$emit('cancel');
this.show = false;
},
调用：
<modal title="Modal Title" :show.sync="show" @ok="ok" @cancel="cancel">
Modal Text
</modal>
但是我们在使用的时候经常会遇到这样的场景，在一个组件的内部，经常会用到多个对话框，对话框可能只是文字有点区别，回调不同，这时就需要在template中为每个对话框都写一次，有点麻烦。
答：使用vue.js构造modal组件的方法是使用 v-model 指令：v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。比如，多个勾选框，绑定到同一个数组：JackJohnMikeChecked names: {{ checkedNames | json }} new Vue({ el...
答：在模态框内部定义了三个方法,最核心部分confirm方法,这是一个定义在模态框内部,但是是给使用模态框的父级组件调用的方法,该方法返回的是一个promise对象,并将resolve和reject存放于modal组件的data中,点击取消按钮时,断定为reject状态,并将模态框关闭掉,点确定按钮时,断定为resolve状态,模态框没有关闭,由调用modal组件...
答：modal.open()})// 在 modal 内部还要处理关闭、销毁自身的逻辑 状态驱动的思维写出来的代码：this.showModal = true // 关掉 this.showModal = false 哪个干净，哪个容易理解、容易测试、容易维护？从模板的角度来看：在父模板里直接写入 <modal> 标签，那么这个 modal 渲染的位置是清晰明确的，你看...
答：使用vue.js构造modal组件的方法是使用 v-model 指令： v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。 比如，多个勾选框，绑定到同一个数组： Jack John Mike Checked names: {{ checkedNames | js...
答：可以用v-on:blur绑定触发试试看。如何使用v-on事件绑定 我们可以用 v-on 指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法：注意在 tap 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码不需要关注底层逻辑。怎样实现在一个input中...
答：利用 Vue.extend() 构造出一个实例，然后手动挂载 先把刚刚封装的弹窗组件放到一个Modal（名字随便）文件夹下，里面再创建文件index.js 然后到 main.js 中导入路由和这个插件即可食用了 但是还是有问题，因为当挂在完成的时候，还没有把DOM添加到页面上，所以无法使用 进入时候的过渡动画<transition>...
答：也可以在当前 .vue 文件中定义一个常量定义 columns 数据，因为无论如何都是固定且不会修改的数据，应该使用 Object.freeze 进行包裹，既可以提高性能还可以将固定的数据抽离，一些下拉框前端固定的数据也建议此操作 一个页面中通常会存在很多个不同功能的弹框，若是每一个弹框都设置...
答：将model提到外面。因为antdesignvuemodel有多个form表单，把它作为单独的组件提到外面就好了。
答：1.使用框架，就用框架的规则，使用生命周期函数来做数据的更改，处理函数写在method里面使用vm.函数调用。2.ajax是异步的，不到万不得已不要使用同步，因为同步真的很阻塞，亲身体会。比如有5个回填数据的输入框，第二个输入框使用同步，那么第二个没完成之前下面输入框的全是空的，这样是不是很影响...
答：提供2个思路：1 如果渲染echarts的div用的是百分比的话，试着写死宽高。style="width:600px;height:800px;"2 用静态数据，然后把你的option放在官网的demo上测试，确保你的option配置是对的。
