原理:就是引用一个子组件,用到slot 然后在样式中加入动态效果
父组件传值 通过所传内容判断组件样式。
需要用modal的父组件:
<template >
<div>
我是商品页面
<modal
title="提示"
sureText="查看购物车"
btnType="1"
modalType="middle"
v-bind:showModal="showModal"
v-on:submit="goToCart"
v-on:cancel="showModal = false"
>
<template v-slot:body>
<p>商品添加成功!</p>
</template>
</modal>
</div>
</template>
<script>
import Modal from "./../components/modal";
export default {
name: "product",
data() {
return {
showModal: true,
};
},
components: { Modal },
methods: {
goToCart() {
console.log("去购物车");
},
},
};
</script>
子组件Modal:
<template>
<!-- vue自带下滑 -->
<transition name="slide">
<!-- 这里要有if或者show 给动画做淡入淡出 -->
<div class="modal" v-show="showModal">
<!-- //遮罩层 -->
<div class="mask"></div>
<!-- 弹框 -->
<div class="modal-dialog">
<div class="modal-header">
<span>{{ title }}</span>
<a
href="javascript:;"
class="icon-close"
v-on:click="$emit('cancel')"
></a>
</div>
<div class="modal-body">
<slot name="body"></slot>
</div>
<div class="modal-footer">
<!-- 三种不同的样式值从父组件中取 -->
<a
href="javascript:;"
class="btn"
v-if="btnType == 1"
v-on:click="$emit('submit')"
>{{ sureText }}</a
>
<a
href="javascript:;"
class="btn"
v-if="btnType == 2"
v-on:click="$emit('cancel')"
>{{ cancelText }}</a
>
<div class="btn-group" v-if="btnType == 3">
<a href="javascript:;" class="btn" v-on:click="$emit('submit')">{{
sureText
}}</a>
<a
href="javascript:;"
class="btn btn-default"
v-on:click="$emit('cancel')"
>{{ cancelText }}</a
>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
name: "modal",
props: {
// 弹框类型:小small、中middle、大large、表单form
modalType: {
type: String,
default: "form",
},
// 弹框标题
title: String,
// 按钮类型: 1:确定按钮 2:取消按钮 3:确定取消
btnType: String,
sureText: {
type: String,
default: "确定",
},
cancelText: {
type: String,
default: "取消",
},
showModal: Boolean,
},
};
</script>