[Update] 遮罩透明度控制

abchiyi · Apr 30, 2022 · bde2b82 · bde2b82
1 parent efb9d03
commit bde2b82
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 19 deletions.
diff --git a/packages/jet-plan-ui/action-feedback/ActionFeedback.vue b/packages/jet-plan-ui/action-feedback/ActionFeedback.vue
@@ -13,12 +13,12 @@ import { h, TransitionGroup } from 'vue';
 export default {
     name: 'j-action-feedback',
     props: {
-        opacity: propInit(String, '0.5'),
         tag: propInit(String, 'div'),
         active: propInit(),
         hover: propInit(),
         focusOutline: propInit(),
         focus: propInit(),
+        maskOpacity: propInit([String, Number], 0.5),
 
         // custom color
         colorFocusOutline: propColor('var(--border)'),
@@ -49,6 +49,7 @@ export default {
                 '--color-focus-out-line': this.colorFocusOutline,
                 '--color-focus': this.colorFocus,
                 '--color-hover': this.colorHover,
+                '--mask-opacity': this.maskOpacity,
             };
         },
         // Render
@@ -80,7 +81,7 @@ export default {
         createMask(event) {
             return {
                 data: {
-                    opacity: this.opacity,
+                    opacity: this.maskOpacity,
                     el: this.$refs.self,
                     color:
                         this.hoverOnTouch && !this.active
@@ -215,16 +216,14 @@ export default {
 /* Keyboard focus */
 .j-action-feedback.focus:focus::after {
     background-color: var(--color-focus);
-    opacity: 0.5;
 }
 /* Mouse hover */
 .j-action-feedback.hover:hover::after {
     background-color: var(--color-hover);
-    opacity: 0.5;
 }
 .j-action-feedback.focus:focus::after,
 .j-action-feedback.hover:hover::after {
-    opacity: 0.5;
+    opacity: var(--mask-opacity);
 }
 
 @supports (-webkit-tap-highlight-color: #ffffff00) {

diff --git a/packages/jet-plan-ui/action-feedback/__tests__/ActionFeedback.spec.js b/packages/jet-plan-ui/action-feedback/__tests__/ActionFeedback.spec.js
@@ -82,18 +82,21 @@ describe('ActionFeedback.vue', () => {
         expect(style['--color-hover']).toEqual(
             colorData.colorHover
         )
+    })
+
+    it('mask opacity', async () => {
+        const wrapper = mount(ActionFeedback)
+        const style = cssAttrsStringToObj(
+            wrapper.attributes('style')
+        )
+        expect(style['--mask-opacity']).toEqual('0.5')
 
         await wrapper.setProps({
-            colorFocusOutline: '',
-            colorActive: '',
-            colorFocus: '',
-            colorHover: ''
+            maskOpacity: 0.2
         })
+        expect(cssAttrsStringToObj(
+            wrapper.attributes('style')
+        )['--mask-opacity']).toEqual('0.2')
 
-        expect(wrapper.classes()).not.toContain(
-            'custom-color'
-        )
-
-        expect(wrapper.attributes('style')).not.toBeTruthy()
     })
 })
diff --git a/packages/jet-plan-ui/action-feedback/__tests__/__snapshots__/ActionFeedback.spec.js.snap b/packages/jet-plan-ui/action-feedback/__tests__/__snapshots__/ActionFeedback.spec.js.snap
@@ -1,26 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ActionFeedback.vue Style test 1`] = `
-<div class="j-action-feedback" style="--color-focus-out-line: var(--border); --color-focus: var(--mask); --color-hover: var(--mask);" ontouchstart="function () { [native code] }" ontouchcancel="function () { [native code] }" ontouchend="function () { [native code] }">Submit<transition-group-stub></transition-group-stub>
+<div class="j-action-feedback" style="--color-focus-out-line: var(--border); --color-focus: var(--mask); --color-hover: var(--mask); --mask-opacity: 0.5;" ontouchstart="function () { [native code] }" ontouchcancel="function () { [native code] }" ontouchend="function () { [native code] }">Submit<transition-group-stub></transition-group-stub>
 </div>
 `;
 
 exports[`ActionFeedback.vue Style test 2`] = `
-<div class="j-action-feedback hover" style="--color-focus-out-line: var(--border); --color-focus: var(--mask); --color-hover: var(--mask);" ontouchstart="function () { [native code] }" ontouchcancel="function () { [native code] }" ontouchend="function () { [native code] }">Submit<transition-group-stub></transition-group-stub>
+<div class="j-action-feedback hover" style="--color-focus-out-line: var(--border); --color-focus: var(--mask); --color-hover: var(--mask); --mask-opacity: 0.5;" ontouchstart="function () { [native code] }" ontouchcancel="function () { [native code] }" ontouchend="function () { [native code] }">Submit<transition-group-stub></transition-group-stub>
 </div>
 `;
 
 exports[`ActionFeedback.vue Style test 3`] = `
-<div class="j-action-feedback hover focus" style="--color-focus-out-line: var(--border); --color-focus: var(--mask); --color-hover: var(--mask);" ontouchstart="function () { [native code] }" ontouchcancel="function () { [native code] }" ontouchend="function () { [native code] }">Submit<transition-group-stub></transition-group-stub>
+<div class="j-action-feedback hover focus" style="--color-focus-out-line: var(--border); --color-focus: var(--mask); --color-hover: var(--mask); --mask-opacity: 0.5;" ontouchstart="function () { [native code] }" ontouchcancel="function () { [native code] }" ontouchend="function () { [native code] }">Submit<transition-group-stub></transition-group-stub>
 </div>
 `;
 
 exports[`ActionFeedback.vue Style test 4`] = `
-<div class="j-action-feedback hover focus-outline focus" style="--color-focus-out-line: var(--border); --color-focus: var(--mask); --color-hover: var(--mask);" ontouchstart="function () { [native code] }" ontouchcancel="function () { [native code] }" ontouchend="function () { [native code] }">Submit<transition-group-stub></transition-group-stub>
+<div class="j-action-feedback hover focus-outline focus" style="--color-focus-out-line: var(--border); --color-focus: var(--mask); --color-hover: var(--mask); --mask-opacity: 0.5;" ontouchstart="function () { [native code] }" ontouchcancel="function () { [native code] }" ontouchend="function () { [native code] }">Submit<transition-group-stub></transition-group-stub>
 </div>
 `;
 
 exports[`ActionFeedback.vue Style test 5`] = `
-<div class="j-action-feedback hover focus-outline focus" style="--color-focus-out-line: #fff; --color-focus: #5a7fa2; --color-hover: #a3b3d4;" ontouchstart="function () { [native code] }" ontouchcancel="function () { [native code] }" ontouchend="function () { [native code] }">Submit<transition-group-stub></transition-group-stub>
+<div class="j-action-feedback hover focus-outline focus" style="--color-focus-out-line: #fff; --color-focus: #5a7fa2; --color-hover: #a3b3d4; --mask-opacity: 0.5;" ontouchstart="function () { [native code] }" ontouchcancel="function () { [native code] }" ontouchend="function () { [native code] }">Submit<transition-group-stub></transition-group-stub>
 </div>
 `;