From 76b5f826b4e81e5c1eebcb924abeae009af04b92 Mon Sep 17 00:00:00 2001 From: erkelost <1256029807@qq.com> Date: Tue, 30 Nov 2021 14:16:15 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat(ripple):=20=E2=80=98=E6=96=B0=E5=A2=9E?= =?UTF-8?q?ripple=E5=8D=95=E5=85=83=E6=B5=8B=E8=AF=95=EF=BC=8C=E4=B8=AD?= =?UTF-8?q?=EF=BC=8C=E8=8B=B1=E6=96=87=E6=96=87=E6=A1=A3'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/ripple/__tests__/ripple.spec.ts | 47 +++++++++++++++++++ .../devui-vue/devui/ripple/src/options.ts | 19 +++++++- .../devui/ripple/src/ripple-directive.ts | 7 ++- 3 files changed, 67 insertions(+), 6 deletions(-) create mode 100644 packages/devui-vue/devui/ripple/__tests__/ripple.spec.ts 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 00000000..e4e3fddc --- /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 7a5f9168..18f04ca9 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 d7b4730c..e4ad61eb 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 -- Gitee From 7823c2ec3db86898ad4e0218f291b0dbfa08fa57 Mon Sep 17 00:00:00 2001 From: erkelost <1256029807@qq.com> Date: Tue, 30 Nov 2021 14:26:32 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat(ripple):=20'=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E8=8B=B1=E6=96=87=E6=96=87=E6=A1=A3'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-vue/docs/components/ripple/index.md | 253 ++++++++++-------- .../docs/en-US/components/ripple/index.md | 221 +++++++++++++++ 2 files changed, 367 insertions(+), 107 deletions(-) create mode 100644 packages/devui-vue/docs/en-US/components/ripple/index.md diff --git a/packages/devui-vue/docs/components/ripple/index.md b/packages/devui-vue/docs/components/ripple/index.md index 5e9e551b..3212227f 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 00000000..193770a8 --- /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 | -- Gitee