diff --git a/packages/devui-vue/devui/ripple/__tests__/ripple.spec.ts b/packages/devui-vue/devui/ripple/__tests__/ripple.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..e4e3fddc36720ed65073df08ece25f0ff1a44128 --- /dev/null +++ b/packages/devui-vue/devui/ripple/__tests__/ripple.spec.ts @@ -0,0 +1,47 @@ +import { nextTick, createApp } from 'vue' +import { mount } from '@vue/test-utils' +import Ripple from '../index' +import { DEFAULT_PLUGIN_OPTIONS } from '../src/options' +// 全局属性 +const global = { + directives: { + ripple: Ripple + } +} +describe('ripple', () => { + it('ripple should render correctly', async () => { + const wrapper = mount( + { + template: ` +
+ ` + }, + { + global + } + ) + await nextTick() + const rippleElement = wrapper.find('.ripple-container') as any + await rippleElement.trigger('click') + console.log(rippleElement.element.childElementCount) + + expect(wrapper.find('div').exists()).toBeTruthy() + }) + it('test ripple plugin', () => { + const app = createApp({}).use(Ripple) + expect(app.directive('ripple', Ripple)).toBeTruthy() + }) + + it('ripple default options', () => { + expect(DEFAULT_PLUGIN_OPTIONS).toEqual({ + directive: 'ripple', + color: 'currentColor', + initialOpacity: 0.2, + finalOpacity: 0.1, + duration: 0.8, + easing: 'ease-out', + delayTime: 75, + disabled: false + }) + }) +}) diff --git a/packages/devui-vue/devui/ripple/src/options.ts b/packages/devui-vue/devui/ripple/src/options.ts index 7a5f916878ac0cdef2b491df1159a2e11c963303..18f04ca94b1129d11fc1ce9b0a8e14998c035e41 100644 --- a/packages/devui-vue/devui/ripple/src/options.ts +++ b/packages/devui-vue/devui/ripple/src/options.ts @@ -45,6 +45,15 @@ interface IRippleDirectiveOptions { * 75 */ delayTime: number + /** + * 禁止 水波 + * + * @note + * 类似于 debounceTime + * @default + * 75 + */ + disabled: boolean } interface IRipplePluginOptions extends IRippleDirectiveOptions { @@ -74,7 +83,13 @@ const DEFAULT_PLUGIN_OPTIONS: IRipplePluginOptions = { finalOpacity: 0.1, duration: 0.8, easing: 'ease-out', - delayTime: 75 + delayTime: 75, + disabled: false } -export { DEFAULT_PLUGIN_OPTIONS, IRipplePluginOptions, IRippleDirectiveOptions, IRippleDirectiveOptionWithBinding } +export { + DEFAULT_PLUGIN_OPTIONS, + IRipplePluginOptions, + IRippleDirectiveOptions, + IRippleDirectiveOptionWithBinding +} diff --git a/packages/devui-vue/devui/ripple/src/ripple-directive.ts b/packages/devui-vue/devui/ripple/src/ripple-directive.ts index d7b4730c4d82a1a3058a9407ab8d7cf5247d878d..e4ad61ebdb798e5f20a38686cb883b4f0109e10e 100644 --- a/packages/devui-vue/devui/ripple/src/ripple-directive.ts +++ b/packages/devui-vue/devui/ripple/src/ripple-directive.ts @@ -5,10 +5,7 @@ import { IRippleDirectiveOptionWithBinding } from './options' import { ripple } from './v-ripple' -const optionMap = new WeakMap< - HTMLElement, - Partial | false ->() +const optionMap = new WeakMap | false>() const globalOptions = { ...DEFAULT_PLUGIN_OPTIONS } export default { mounted(el: HTMLElement, binding: IRippleDirectiveOptionWithBinding) { @@ -16,6 +13,8 @@ export default { el.addEventListener('pointerdown', (event) => { const options = optionMap.get(el) + // 必须确保disabled 属性存在 否则指令终止报错 + if (binding.value && binding.value.disabled) return if (options === false) return diff --git a/packages/devui-vue/docs/components/ripple/index.md b/packages/devui-vue/docs/components/ripple/index.md index 5e9e551b73fb2a9530b3b271dabe94c8958de738..3212227f787c627f59fa0a6e6ceaa964fba1a6e6 100644 --- a/packages/devui-vue/docs/components/ripple/index.md +++ b/packages/devui-vue/docs/components/ripple/index.md @@ -1,6 +1,6 @@ # Ripple 水波纹指令 -`v-ripple` 指令 用于用户动作交互场景, 可以应用于任何块级元素 +`v-ripple` 指令 用于用户动作交互场景, 可以应用于任何块级元素 `注：只能作用于块级元素` ### 使用 @@ -8,11 +8,18 @@ ```vue ``` ::: -Icon +Card 组件 :::demo - ```vue - + ``` ::: @@ -154,7 +193,6 @@ Icon .ripple-htmlElement { width: 600px; height: 150px; - background-color: #eee; text-align: center; line-height: 150px; border: 1px solid #eee50; @@ -170,11 +208,12 @@ Icon ### API -| 参数 | 类型 | 默认 | 说明 | -| :-------------: | :------: | :------: | :-------------------------------- | -| color | `string` | #00050 | 可选，默认当前文本颜色 | -| initial-opacity | `number` | 0.1 | 可选，初始交互效果透明度大小 | -| final-opacity | `number` | 0.1 | 可选，结束交互效果长按透明度大小 | -| duration | `number` | 0.4s | 可选，持续时间 | -| easing | `string` | ease-out | 可选，缓动动画 | -| delay-time | `number` | 75ms | 可选，延迟 debouceTime 时间后调用 | +| 参数 | 类型 | 默认 | 说明 | +| :-------------: | :-------: | :---------: | :-------------------------------- | +| 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 new file mode 100644 index 0000000000000000000000000000000000000000..193770a83f7bcc9b8d7509d98ea9e39d14ebdca0 --- /dev/null +++ b/packages/devui-vue/docs/en-US/components/ripple/index.md @@ -0,0 +1,221 @@ +# 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 + + +``` + +::: + +### Custom color + +### Change the ripple color dynamically by changing the text color or the ripple color + +:::demo + +```vue + +``` + +::: + + +### Ripple in components + +### Some components provide the ripple prop that allows you to control the ripple effect. + +Button Component + +:::demo + +```vue + +``` + +::: + +Card Component + +:::demo +```vue + + +``` + +::: + + + +### 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 |