nuxt+vue+vant --- SSR- h5 公共底部弹出层组件

Posted 2021-08-16 郝峰Vip

本博客是为了记录自己的组件，方便学习和使用，组件是在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/[e-mail]"
        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>

结束语

---

二次封装的好处就是可以配置公共得头部按钮，文字，复用率比较高。