el-button加上涟漪效果
时间: 2023-10-30 17:04:54 浏览: 173
Button涟漪效果
可以使用 `waves` 指令来给 `el-button` 添加涟漪效果,具体步骤如下:
1. 引入 CSS 文件
在 HTML 文件中引入 `waves.css` 文件,可以在以下地址下载该文件:
https://cdn.jsdelivr.net/npm/node-waves/dist/waves.min.css
2. 安装和引入 waves.js 文件
使用 npm 安装 `waves.js`:
```
npm install node-waves --save
```
在需要使用涟漪效果的页面中引入 `waves.js` 文件并初始化:
```javascript
import Waves from 'node-waves';
Waves.init();
```
3. 在 el-button 中添加指令
在 `el-button` 标签中添加 `v-waves` 指令即可:
```html
<el-button v-waves>Click me</el-button>
```
这样就可以给 `el-button` 添加涟漪效果了。
阅读全文