Feat input reverse (didi#181)

* [add]{input.vue} reverse prop for input * [update]{input.vue} pwdVisible and eyeClass logic * [update]{input.md} input docs
zj0511 · May 9, 2018 · 089d7ce · 089d7ce
1 parent d82ef79
commit 089d7ce
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 10 deletions.
diff --git a/document/components/docs/en-US/input.md b/document/components/docs/en-US/input.md
@@ -83,7 +83,7 @@ Input component. You can use the `v-model` directive to create two-way data bind
 | autofocus | autofocus status | Boolean | true/false | false |
 | autocomplete | autocomplete status | Boolean | true/false | false |
 | clearable | whether to show clear button | Boolean | true/false | false |
-| eye | If set to false then the password eye is invisible, if set to true then the password eye is visible and the password content is visible, if set to an object `{ open: false }` then the password eye is visible but the password content is invisible, the `open` can be used to control the password content's visibility | Boolean/Object | true/false/{open: `true/false`} | false |
+| eye | If set to false then the password eye is invisible, if true, equal to `{open: true, reverse: false}`, Object form mean using the password eye. The `open` control the password eye open or close, `reverse` control whether the password content visibility is reverse with the password eye open or not. | Boolean/Object | true/false/{open: `true/false`} | false |
 
 ### Slot
 

diff --git a/document/components/docs/zh-CN/input.md b/document/components/docs/zh-CN/input.md
@@ -79,7 +79,7 @@
 | autofocus | 自动对焦 | Boolean | true/false | false |
 | autocomplete | 自动补全 | Boolean | true/false | false |
 | clearable | 是否使用清空按钮 | Boolean | true/false | false |
-| eye | 默认 false，密码眼睛不可见；如果是 true 则使用密码眼睛，且密码可见；还可配置为对象`{ open: false }`，那么眼睛可见，`open` 用来控制密码是否可见 | Boolean/Object | true/false/{open: `true/false`} | false |
+| eye | 默认 false，密码眼睛不可见；如果是 true ，则相当于配置为对象 `{ open: true, reverse: false }`。对象形式表示使用密码眼睛。其中 `open` 控制眼睛张开还是闭合。`reverse` 控制密码可见和眼睛开闭是否相反。 | Boolean/Object | true/false/{open: true/false, reverse: true/false} | false |
 
 ### 插槽
 

diff --git a/example/pages/input.vue b/example/pages/input.vue
@@ -67,7 +67,7 @@
       eye() {
         if (this.isPwd && this.showEye) {
           return {
-            open: this.pwdVisible,
+            open: this.reverse ? !this.pwdVisible : this.pwdVisible,
             reverse: this.reverse
           }
         } else {

diff --git a/src/components/input/input.vue b/src/components/input/input.vue
@@ -93,7 +93,7 @@
     computed: {
       _type() {
         const type = this.type
-        if (type === 'password' && this.formatedEye.open) {
+        if (type === 'password' && this.eye && this.pwdVisible) {
           return 'text'
         }
         return type
@@ -104,13 +104,12 @@
       _showPwdEye() {
         return this.type === 'password' && this.eye && !this.disabled
       },
-      eyeClass() {
+      pwdVisible() {
         const eye = this.formatedEye
-        let shouleBeVisible = !eye.open
-        if (eye.reverse) {
-          shouleBeVisible = !shouleBeVisible
-        }
-        return shouleBeVisible ? 'cubeic-eye-visible' : 'cubeic-eye-invisible'
+        return eye.reverse ? !eye.open : eye.open
+      },
+      eyeClass() {
+        return this.formatedEye.open ? 'cubeic-eye-visible' : 'cubeic-eye-invisible'
       }
     },
     watch: {