+
+
+
+```
+
+:::
+
+
+### 应用于其他组件
+
+Button 组件
+
+:::demo
+
+```vue
+
+
+
+ Text
+
+
+ Text dark
+
+
+
+
+
+
+
+
+
+```
+
+:::
+
+Card 组件
+
+:::demo
+```vue
+
+
+
+
+
+
+ DEVUI Course
+
+
+ DevUI
+
+
+ DEVUI is a free open-source and common solution for the front end of enterprise mid- and back-end products. Its design values are basedon...
+
+
+
+ 12
+
+
+ 8
+
+
+ 8
+
+
+
+
+
+```
+
+:::
+
+
+
+### API
+
+| 参数 | 类型 | 默认 | 说明 |
+| :-------------: | :-------: | :---------: | :-------------------------------- |
+| color | `string` | `#00000050` | 可选，默认当前文本颜色 |
+| initial-opacity | `number` | `0.1` | 可选，初始交互效果透明度大小 |
+| final-opacity | `number` | `0.1` | 可选，结束交互效果长按透明度大小 |
+| duration | `number` | `0.4s` | 可选，持续时间 |
+| easing | `string` | `ease-out` | 可选，缓动动画 |
+| delay-time | `number` | `75ms` | 可选，延迟 debouceTime 时间后调用 |
+| disabled | `boolean` | `false` | 可选，禁止水波效果 |
diff --git a/packages/devui-vue/docs/en-US/components/ripple/index.md b/packages/devui-vue/docs/en-US/components/ripple/index.md
index 193770a83f..dfae7982b3 100644
--- a/packages/devui-vue/docs/en-US/components/ripple/index.md
+++ b/packages/devui-vue/docs/en-US/components/ripple/index.md
@@ -1,221 +1,211 @@
-# RippleDirective
-
-`v-ripple`The v-ripple directive is used to show action from a user. It can be applied to any block level element.`tips: It can be applied to any block level element.`
-
-### When to Use
-
-:::demo User can be use Basic ripple functionality can be enabled just by using v-ripple directive on a component or an HTML element `v-ripple`Basic ripple functionality `v-ripple` Directive `v-ripple` Accept an object
-
-```vue
-
-
-
-
-
HTML element with v-ripple
-
-
-
-
-
HTML element with v-ripple
-
-
-
-
-
-```
-
-:::
-
-### Custom color
-
-### Change the ripple color dynamically by changing the text color or the ripple color
-
-:::demo
-
-```vue
-
-
-
-
-
-
- {{ item.text }}
-
-
-
-
-
-
-
-
- {{ item.text }}
-
-
-
-
-
-
-```
-
-:::
-
-
-### Ripple in components
-
-### Some components provide the ripple prop that allows you to control the ripple effect.
-
-Button Component
-
-:::demo
-
-```vue
-
-
-
- Text
-
-
- Text dark
-
-
-
-
-
-
-
-
-
-```
-
-:::
-
-Card Component
-
-:::demo
-```vue
-
-
-
-
-
-
- DEVUI Course
-
-
- DevUI
-
-
- DEVUI is a free open-source and common solution for the front end of enterprise mid- and back-end products. Its design values are basedon...
-
-
-
- 12
-
-
- 8
-
-
- 8
-
-
-
-
-
-```
-
-:::
-
-
-
-### API
-
-| 参数 | 类型 | 默认 | 说明 |
-| :-------------: | :-------: | :---------: | :---------------------------------------------------------------------------- |
-| color | `string` | `#00000050` | Choose Default current text color |
-| initial-opacity | `number` | `0.1` | Choose Initial interaction Opacity size |
-| final-opacity | `number` | `0.1` | Choose, end the interactive effect and press the Opacity size for a long time |
-| duration | `number` | `0.4s` | Choose, duration |
-| easing | `string` | `ease-out` | Choose, animation easing |
-| delay-time | `number` | `75ms` | Choose, slow animation is delayed after debouceTime time. |
-| disabled | `boolean` | `false` | Choose, disabled ripple effect |
+# RippleDirective
+
+`v-ripple`The v-ripple directive is used to show action from a user. It can be applied to any block level element.`tips: It can be applied to any block level element.`
+
+### When to Use
+
+:::demo User can be use Basic ripple functionality can be enabled just by using v-ripple directive on a component or an HTML element `v-ripple`Basic ripple functionality `v-ripple` Directive `v-ripple` Accept an object
+
+```vue
+
+
+
+
+
HTML element with v-ripple
+
+
+
+
+
HTML element with v-ripple
+
+
+
+
+
+```
+
+:::
+
+### Custom color
+
+### Change the ripple color dynamically by changing the text color or the ripple color
+
+:::demo
+
+```vue
+
+
+
+
+
+
+ {{ item.text }}
+
+
+
+
+
+
+
+
+ {{ item.text }}
+
+
+
+
+
+
+```
+
+:::
+
+
+### Ripple in components
+
+### Some components provide the ripple prop that allows you to control the ripple effect.
+
+Button Component
+
+:::demo
+
+```vue
+
+
+
+ Text
+
+
+ Text dark
+
+
+
+
+
+
+
+
+
+```
+
+:::
+
+Card Component
+
+:::demo
+```vue
+
+
+
+
+
+
+ DEVUI Course
+
+
+ DevUI
+
+
+ DEVUI is a free open-source and common solution for the front end of enterprise mid- and back-end products. Its design values are basedon...
+
+
+
+ 12
+
+
+ 8
+
+
+ 8
+
+
+
+
+
+```
+
+:::
+
+
+
+### API
+
+| 参数 | 类型 | 默认 | 说明 |
+| :-------------: | :-------: | :---------: | :---------------------------------------------------------------------------- |
+| color | `string` | `#00000050` | Choose Default current text color |
+| initial-opacity | `number` | `0.1` | Choose Initial interaction Opacity size |
+| final-opacity | `number` | `0.1` | Choose, end the interactive effect and press the Opacity size for a long time |
+| duration | `number` | `0.4s` | Choose, duration |
+| easing | `string` | `ease-out` | Choose, animation easing |
+| delay-time | `number` | `75ms` | Choose, slow animation is delayed after debouceTime time. |
+| disabled | `boolean` | `false` | Choose, disabled ripple effect |