解决van-action-sheet弹窗无法显示

原创已于 2025-03-17 21:52:38 修改 · 699 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

我在乎warning

关注

标签

#javascript #前端 #笔记

分类前端开发

于 2025-03-17 21:51:39 首次发布

背景：在将项目从vue2修改并迁移至vue3时遇到van-action-sheet弹窗始终无法弹出的问题

    <van-action-sheet v-model:show="showPannel" :title="mode === 'cart' ? '加入购物车' : '立刻购买'">
      <div class="product">
        <div class="product-title">
          <div class="left">
            <img :src="detail.goods_image" alt="">
          </div>
          <div class="right">
            <div class="price">
              <span>¥</span>
              <span class="nowprice">{{ detail.product_selling_price }}</span>
            </div>
            <div class="count">
              <span>库存</span>
              <span>{{ detail.product_num }}</span>
            </div>
          </div>
        </div>
        <div class="num-box">
          <span>数量</span>
          <!-- v-model 本质上 :value 和 @input 的简写 -->
          <CountBox v-model="addCount"></CountBox>
        </div>

        <!-- 有库存才显示提交按钮 -->
        <div class="showbtn" v-if="detail.product_num > 0">
          <div class="btn" v-if="mode === 'cart'" @click="addCart">加入购物车</div>
          <div class="btn now" v-else @click="goBuyNow">立刻购买</div>
        </div>

        <div class="btn-none" v-else>该商品已抢完</div>
      </div>
    </van-action-sheet>

解决思路：

1、检查vant组件库是否正确安装

// 检查是否安装
npm list vant

// 如果没有安装则执行以下命令
npm install vant

2、检查 Vant 组件是否正确引入

这一步需要根据自身的情况进行判断，vue2、vue3使用vant3、vant4是不一样的情况，具体可以参考官网，博主使用的时vue3+vant4，采用的是全局引入的方式：

import { createApp } from 'vue';
import App from './App.vue';
import { ActionSheet } from 'vant';
import 'vant/lib/index.css'; // 引入全局样式

const app = createApp(App);
app.use(ActionSheet); // 注册 ActionSheet 组件
app.mount('#app');

3、检查 v-model 绑定是否正确（响应式）

在vue2中需要把数据定义在data中才是响应式，在vue3中则需要使用ref/reactive支持响应式

// vue2写法
data() {
  return {
    showPannel: false,
  };
}

// vue3写法
const showPannel = ref(false)

4、检查 van-action-sheet 的 DOM 元素是否存在

F12打开控制面板，如果DOM元素存在会看到类似结构：

<div class="van-action-sheet">
  <div class="van-action-sheet__content">
    <div class="van-action-sheet__header">
      <div class="van-action-sheet__title">测试弹窗</div>
    </div>
    <div class="van-action-sheet__body">
      <div>这是一个测试弹窗</div>
    </div>
  </div>
</div>

也可以动态检查DOM元素在开发者工具的 Console选项卡中，输入以下代码检查 van-action-sheet 是否存在，如果返回 null，说明 van-action-sheet 的 DOM 元素不存在。如果返回一个 DOM 元素，说明 van-action-sheet 存在，但可能被隐藏或样式问题导致不可见。

document.querySelector('.van-action-sheet');

也可以在 Elements 面板中，选中 van-action-sheet 的 DOM 元素，查看右侧的 Styles面板，检查以下属性：

display：确保不是 none

visibility：确保不是 hidden

z-index：确保足够大，不会被其他元素遮挡

opacity：确保不是 0

5、vue2向vue3迁移过程中要关注组件库的不同用法

针对 van-action-sheet 组件，在 Vue 3 中，v-model 的语法是 v-model:show，而不是 v-model（这是组件库内部定义的，在迁移时需要关注其用法的不同，具体课参照官网文档）