vue 封装组件--可复用

应项目需求，为避免代码重复，耦合性高，使用 vue + vant UI 来进行公共代码封装。
本次封装头部标题区块。

目标样式

创建目录

• 在src / components / 创建 headTips 文件
  

封装组件

html – headTips/index.vue

<template>
  <div class="headTips">
    <van-nav-bar :title="text" :left-arrow="shows">
      <template #right>
        <van-popover
          v-model="showPopover"
          theme="dark"
          trigger="click"
          :actions="actions"
          @select="onSelect"
          placement="bottom-end"
          :offset="[8, 20]"
        >
          <template #reference>
            <div class="rgimg" v-if="!showrg"></div>
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
  </div>
</template>

js

&l