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

Posted 2022-12-08 郝艳峰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>

结束语

---

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