unplugin / unplugin-vue-components

📲 On-demand components auto importing for Vue

Home Page:https://www.npmjs.com/package/unplugin-vue-components

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Can auto import the Toast of vant?

chenpeng991105 opened this issue · comments

Now I use the Toast by this way:

<script lang="ts" setup>
import { Toast } from 'vant'
import 'vant/lib/index.css'
<script>

Can auto import the Toast of vant?

Yes, you can in your .vue files (SFC).
Add Vant in vite config as mentioned in readme.

// vite.config.js
plugins: [
Components({
      resolvers: [
        (name) => {
          // where `name` is always CapitalCase
          if (name.startsWith('Van'))
            return { importName: name.slice(3), path: 'vant' }
        },
      ]
    }),
]

FYI, I am still facing issue with Auto Loading of css files for each component. If I figure out, will share it here.

Vant 中有个别组件是以函数的形式提供的,包括 Toast,Dialog,Notify 和 ImagePreview 组件。在使用函数组件时,unplugin-vue-components 无法自动引入对应的样式,因此需要手动引入样式。

// Toast
import { Toast } from 'vant';
import 'vant/es/toast/style';

// Dialog
import { Dialog } from 'vant';
import 'vant/es/dialog/style';

// Notify
import { Notify } from 'vant';
import 'vant/es/notify/style';

// ImagePreview
import { ImagePreview } from 'vant';
import 'vant/es/image-preview/style';

点击查看vant官网说明

Now I use the Toast by this way:
showToast({ message: '已添加!' });
Do I still need this?
import { showToast } from 'vant'

@Cleam

您好,官网提到

你可以在项目的入口文件或公共模块中引入以上组件的样式,这样在业务代码中使用组件时,便不再需要重复引入样式了

但是我在Demo中的main.ts写了官网实例中的那些import语句,依然不能直接在自己其他的子组件中使用那些函数组件,请问该如何配置呢?