如何在 Varlet UI 中获得涟漪效应？

Question

我在我的项目中使用 Vue v3.2.20 与 Varlet UI v1.25.0 和 Bootstrap 5。到目前为止一切正常，但我无法在任何地方产生涟漪效应，即使是在按钮上也是如此。我在控制台中没有收到任何错误或警告。像这样的简单按钮声明：

<var-button type="primary">Add</var-button>

显示一个没有波纹效果的默认按钮。我在 main.js 中导入框架是这样的：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import Varlet from '@varlet/ui'
import '@varlet/ui/es/style.js'

createApp(App).use(router).use(Varlet).mount('#app')

此外，我尝试在每个 this documentation 上手动添加波纹效果 div，仍然没有成功。

Answer 1

看来 Varlet UI 在移动和桌面环境中的工作方式不同，所以为了在桌面上获得涟漪效果，我需要做的就是安装触摸模拟器：

npm i @varlet/touch-emulator

根据the guide

如何在 Varlet UI 中获得涟漪效应？

How do I get the ripple effect work in Varlet UI?

javascript

vue.js

ripple-effect