首页编辑

右边按钮是通过tabs组件插槽实现。

<van-tabs>
 <template #nav-right>
        <van-icon name="wap-nav" @click="changeHomePopupShow" />
      </template>
   </van-tabs>

View Code

van-popup弹出层组件打开和关闭。

注意：建议最好是挂载在body节点下面，也就是通过get-container="body"属性控制。

 <van-popup
    v-model="defaultHomePopup.isShowEdit"
    closeable
    close-icon-position="top-right"
    position="bottom"
    get-container="body"
    duration=".5"
    :style="{ height: '100%' }"
  />

View Code

这个当作子组件，显示和隐藏通过父组件来控制。父子组件保证统一的逻辑有多种实现。这里用watch实现统一

 watch: {
    "homePopup.isShowEdit": {
      handler(val) {
        if (val === true) this.initDefaultHomePopup();
      },
    },
    "defaultHomePopup.isShowEdit": {
      handler(val) {
        if (val === false) this.homePopup.isShowEdit = false;
      },
    },
  },

View Code