本博客是为了记录自己的组件，方便学习和使用，组件是在vant的基础上二次封装，之前还写了一个自己手写的弹出层公共组件，详情移步vue-cli 移动端底部弹出菜单动画效果
| 参数名 | 类型 | 说明 |
|---|---|---|
| is_showpopup | boolean | 是否显示弹层组件 |
| isShowLine | boolean | 是否显示头部下划线 |
| slot | 说明 |
|---|---|
| "popupHeader" | 头部左侧文字 |
| "popupSlot" | 主题区域内容 |
事件
@fromPop 头部左侧文字点击事件
第一步：新建一个公共组件publicPop.vue
<template>
<van-popup
v-model="is_showpopup"
round
close-icon-position="top-right"
position="bottom"
:style="{ width: '100%' }"
>
<div class="pop_header" :style="{borderBottom: isShowLine == true ? '1px solid #d7e0e6' : 'none'}">
<div @click="pop_confirm"><slot name="popupHeader"> </slot></div>
<img
@click="closePop"
src="../../assets/image/common/popdelete@2x.png"
alt="arrow"
/>
</div>
<slot name="popupSlot"> </slot>
</van-popup>
</template>
<script>
export default {
props: {
isShowLine: {
type: Boolean,
default: true,
},
},
data() {
return {
is_showpopup: false,
};
},
methods: {
closePop() {
this.is_showpopup = false;
},
pop_confirm() {
this.$emit("fromPop");
},
},
};
</script>
<style lang="scss" scoped>
.pop_header {
height: 1.04rem;
border-radius: 16px 16px 0px 0px;
padding: 0px 0.24rem;
@include flexBetween;
div {
@include font28;
@include mainColor;
font-weight: bold;
}
img {
width: 0.48rem;
height: 0.48rem;
}
}
</style>
第二步：使用页面
<publicPop ref="commonPop" @fromPop="frompopheader">
<div slot="popupHeader">我是头部左侧文字</div>
<div slot="popupSlot">货币和国家</div>
</publicPop>
<script>
import publicPop from "@/components/publicPoupop/index";
export default {
components: {
publicPop,
},
}
</script>
结束语
二次封装的好处就是可以配置公共得头部按钮，文字，复用率比较高。
