v-if 使用

37 阅读1分钟
  1. 全屏功能 在需要全屏div标签上添加 v-if
<div v-if="show" class="screen-wrap">
    <div class="fullscreen-icon">
	<a-icon v-if="!isFull" @click="fullscreen(-1)" type="fullscreen" style="color: #fff;font-size: 20px;" />
	<a-icon v-else @click="fullscreen(1)" type="fullscreen-exit" style="color: #fff;font-size: 20px;" />
    </div>
</div>
  1. 路由刷新 达到某个条件。路由重新加载

    在路由标签添加v-if, pinia 做全局状态存储

const tagsViewStore = useTagsViewStore()
<router-view v-if="tagsViewStore.isUpdate" v-slot="{ Component, route }">
      <transition :enter-active-class="animante" mode="out-in">
        <keep-alive :include="tagsViewStore.cachedViews">
          <component v-if="!route.meta.link" :is="Component" :key="route.path" />
        </keep-alive>
      </transition>
    </router-view>