Feat input reverse (didi#180)

* [add]{input.vue} reverse prop for input * [update]{input.vue} pwdVisible and eyeClass logic * [update] {input.vue} eye logic * [update] {input.vue} input example * [update] input.vue
zj0511 · Apr 28, 2018 · 49bc55d · 49bc55d
1 parent e1f2e00
commit 49bc55d
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 14 deletions.
diff --git a/example/pages/input.vue b/example/pages/input.vue
@@ -34,6 +34,8 @@
                             @update:value="updatePwd"></switch-option>
             <switch-option class="item" name="show eye" :value="showEye"
                             @update:value="updateShowEye" v-if="isPwd"></switch-option>
+            <switch-option class="item" name="reverse" :value="reverse"
+                            @update:value="updateReverse" v-if="isPwd && showEye"></switch-option>
             <switch-option class="item" name="password visible" :value="pwdVisible"
                             @update:value="updatePwdVisible" v-if="isPwd && showEye"></switch-option>
           </div>
@@ -57,14 +59,16 @@
         readonly: false,
         isPwd: true,
         showEye: true,
-        pwdVisible: true
+        pwdVisible: true,
+        reverse: false
       }
     },
     computed: {
       eye() {
         if (this.isPwd && this.showEye) {
           return {
-            open: this.pwdVisible
+            open: this.pwdVisible,
+            reverse: this.reverse
           }
         } else {
           return false
@@ -90,6 +94,9 @@
       },
       updatePwdVisible(val) {
         this.pwdVisible = val
+      },
+      updateReverse(val) {
+        this.reverse = val
       }
     },
     components: {

diff --git a/src/components/input/input.vue b/src/components/input/input.vue
@@ -84,13 +84,16 @@
       return {
         inputValue: this.value,
         isFocus: false,
-        pwdVisible: false
+        formatedEye: {
+          open: false,
+          reverse: false
+        }
       }
     },
     computed: {
       _type() {
         const type = this.type
-        if (type === 'password' && this.pwdVisible) {
+        if (type === 'password' && this.formatedEye.open) {
           return 'text'
         }
         return type
@@ -102,7 +105,12 @@
         return this.type === 'password' && this.eye && !this.disabled
       },
       eyeClass() {
-        return this.pwdVisible ? 'cubeic-eye-invisible' : 'cubeic-eye-visible'
+        const eye = this.formatedEye
+        let shouleBeVisible = !eye.open
+        if (eye.reverse) {
+          shouleBeVisible = !shouleBeVisible
+        }
+        return shouleBeVisible ? 'cubeic-eye-visible' : 'cubeic-eye-invisible'
       }
     },
     watch: {
@@ -112,22 +120,22 @@
       inputValue(newValue) {
         this.$emit(EVENT_INPUT, newValue)
       },
-      eye() {
-        this._computedPwdVisible()
+      eye: {
+        handler() {
+          this.formateEye()
+        },
+        immediate: true
       }
     },
-    created() {
-      this._computedPwdVisible()
-    },
     methods: {
       changeHander(e) {
         this.$emit(EVENT_CHANGE, e)
       },
-      _computedPwdVisible() {
+      formateEye() {
         if (typeof this.eye === 'boolean') {
-          this.pwdVisible = this.eye
+          this.formatedEye.open = this.eye
         } else {
-          this.pwdVisible = this.eye.open
+          Object.assign(this.formatedEye, this.eye)
         }
       },
       handleFocus(e) {
@@ -143,7 +151,7 @@
         this.$refs.input.focus()
       },
       handlePwdEye() {
-        this.pwdVisible = !this.pwdVisible
+        this.formatedEye.open = !this.formatedEye.open
       }
     }
   }