这次给大家带来vue弹窗组件使用步骤详解，vue弹窗组件使用的注意事项有哪些，下面就是实战案例，一起来看一下。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ys-vue-modal-component</title>
<style>
p,h4{
margin:0;
}
.modal{
width: 480px;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, .3);
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
margin: 50px;
}
.modal-header {
color: #fff;
background: cadetblue;
border-radius: 6px 6px 0 0;
padding: 15px;
border-bottom: 1px solid #5e9fa1;
}
.modal-content p {
padding: 15px 10px;
}
.modal-footer {
padding: 15px;
text-align: right;
border-top: 1px solid #e5e5e5;
}
.btn {
border: 1px solid #d1d1d1;
border-radius: 3px;
background-color: #f7f7f7;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#f7f7f7),
to(#f2f2f2));
background: -moz-gradient(linear, 0 0, 0 100%, from(#f7f7f7),
to(#f2f2f2));
background: -o-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#f2f2f2));
background: -ms-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#f2f2f2));
height: 28px;
padding: 0 20px;
cursor: pointer;
line-height: 28px;
display: inline-block;
color: #666666;
margin-right: 5px;
outline: none;
}
.blue {
border: 1px solid #5e9fa1;
background-color: #5e9fa1;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#74c4c6),
to(#5e9fa1));
background: -moz-gradient(linear, 0 0, 0 100%, from(#74c4c6),
to(#5e9fa1));
background: -o-gradient(linear, 0 0, 0 100%, from(#74c4c6), to(#5e9fa1));
background: -ms-gradient(linear, 0 0, 0 100%, from(#74c4c6), to(#5e9fa1));
color: #ffffff;
}
</style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<p id="app">
<input type="button" class="btn blue" value="点击我，呼唤弹窗，再来一遍" v-if="ishide" @click="ishide=!ishide">
<ys-modal-component
v-if="!ishide"
modal-title="温馨提示"
ok-btn="确认购买"
cancel-btn="去意已决"
@on-ok="ok"
@on-cancel="cancel"
>
<p slot="modal-content">
尊敬的用户，您购买的商品将于支付成功后3-7个工作日内发货，敬请周知。祝您购物愉快！
</p>
</ys-modal-component>
</p>
<script>
/*
props：
modaltitle: 弹窗标题
okbtn: 确认按钮
cancelbtn: 取消按钮
注意事项：传参时候使用烤串的书写方式xx-xxx
slot:
modal-content: 内容区域
modal-footer： 页脚按钮区域
methods:
okhandle: 触发确认on-ok自定义事件
cancelhandle： 触发取消on-cancel自定义事件
*/
vue.component('ys-modal-component', {
props: {
modaltitle: {
type: string,
default: '标题区域'
},
okbtn: {
type: string,
default: '确认'
},
cancelbtn: {
type: string,
default: '取消'
}
},
template: `
<p class="modal">
<p class="modal-header">
<h4>{{ modaltitle }}</h4>
</p>
<p class="modal-content">
<p>
<slot name="modal-content">内容区域</slot>
</p>
</p>
<p class="modal-footer">
<input class="btn blue" type="button" v-model="okbtn" @click="okhandle" />
<input class="btn" type="button" v-model="cancelbtn" @click="cancelhandle" />
</p>
</p>
`,
methods: {
okhandle () {
console.log(点击确定);
this.$emit(on-ok);
},
cancelhandle () {
console.log(点击取消);
this.$emit(on-cancel);
}
}
})
new vue({
el: #app,
data: {
ishide: false
},
methods: {
ok () {
alert(欢迎您购买本产品);
},
cancel () {
this.ishide = !this.ishide;
}
}
})
</script>
</body>
</html>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
angular5路由传值方法总结
vue2.0+插件使用npm发布步骤详解
以上就是vue弹窗组件使用步骤详解的详细内容。