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

Posted 郝峰Vip

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了nuxt+vue+vant --- SSR- h5 公共底部弹出层组件相关的知识,希望对你有一定的参考价值。

本博客是为了记录自己的组件,方便学习和使用,组件是在vant的基础上二次封装,之前还写了一个自己手写的弹出层公共组件,详情移步vue-cli 移动端底部弹出菜单动画效果

参数名类型说明
is_showpopupboolean是否显示弹层组件
isShowLineboolean是否显示头部下划线
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>

结束语


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

以上是关于nuxt+vue+vant --- SSR- h5 公共底部弹出层组件的主要内容,如果未能解决你的问题,请参考以下文章

H5页面如何进行首屏优化

基于 vue.js 的 SSR 技术 — Nuxt.js

vue+nuxt.js+Bootstrap实现响应式SSR网站

vue+nuxt.js+Bootstrap实现响应式SSR网站

vue ssr笔记

vue 和 ssr+nuxt.js 配置环境变量以及pm2进行服务部署