网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
vue-modal是适用于Vue.js的Web应用程序的微型,响应式,动画,可访问且可堆叠的模式窗口解决方案。
1.将vue模态和必要的样式表导入项目。
import VueModal from '@kouts/vue-modal';
import '@kouts/vue-modal/dist/vue-modal.css';
2.注册。
// globally
Vue.component('Modal', VueModal);
// locally
new Vue({
components: {
'Modal': VueModal
}
})
3.在应用程序中创建一个基本的模态组件。
<button type="button" @click="showModal=true">
Launch
</button>
<Modal v-model="showModal" title="Modal Title">
<p>This is a modal</p>
</Modal>
new Vue({
data: {
showModal: false
}
});
4.组件默认配置项。
title: {
type: String,
default: ''
},
baseZindex: {
type: Number,
default: 1051
},
bgClass: {
type: String,
default: ''
},
wrapperClass: {
type: String,
default: ''
},
modalClass: {
type: String,
default: ''
},
modalStyle: {
type: Object,
default: () => ({})
},
inClass: {
type: String,
default: 'vm-fadeIn'
},
outClass: {
type: String,
default: 'vm-fadeOut'
},
bgInClass: {
type: String,
default: 'vm-fadeIn'
},
bgOutClass: {
type: String,
default: 'vm-fadeOut'
},
appendTo: {
type: String,
default: 'body'
},
live: {
type: Boolean,
default: false
},
enableClose: {
type: Boolean,
default: true
},
basedOn: {
type: Boolean,
default: false
}
转载请注明来源:可堆叠的Vue动画弹框组件(vue-modal)
本文永久链接地址:https://www.moyouyouw.cn/code/1189.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论