Vant4组件库样式不生效问题

a4867

于 2024-08-08 15:46:21 发布

阅读量613

点赞数 3

CC 4.0 BY-SA版权

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/a4867/article/details/141028851

今天使用vant4组件库发现样式不生效

查询后得知再按需导入一下对应组件的样式即可

import 'vant/es/toast/style'，其他组件不生效也是同理，import 'vant/es/***/style'

<script setup>
import 'vant/es/toast/style'

import { showLoadingToast } from 'vant';
const showmytoast = () => {
    showLoadingToast({
        message: '加载中...',
        forbidClick: true,
    });
}
</script>

<template>
    <div class="btn">
        <button @click="showmytoast">显示toast</button>
    </div>
</template>

<style scoped>
.btn button {
    background-color: aqua;
    margin: 20px;
}
</style>