support password eye, issue #107

didi · Mar 7, 2018 · 66bc535 · 66bc535
1 parent 8cc82f8
commit 66bc535
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 7 deletions.
diff --git a/example/pages/input.vue b/example/pages/input.vue
@@ -11,6 +11,7 @@
         :readonly="readonly"
         :clearable="useClear"
         :autocomplete="true"
+        :pwd-eye="showEye"
         v-model="value"
       ></cube-input>
       <div class="value">value: {{value}}</div>
@@ -25,9 +26,15 @@
                             @update:value="updateReadonly"></switch-option>
           </div>
           <div class="group">
-            <switch-option class="item" name="Clearable" :value="useClear"
+            <switch-option class="item" name="clearable" :value="useClear"
                             @update:value="updateUseClear"></switch-option>
           </div>
+          <div class="group">
+            <switch-option class="item" name="password" :value="isPwd"
+                            @update:value="updatePwd"></switch-option>
+            <switch-option class="item" name="show eye" :value="showEye"
+                            @update:value="updateShowEye" v-if="isPwd"></switch-option>
+          </div>
         </div>
       </div>
     </div>
@@ -45,7 +52,9 @@
         value: '',
         disabled: false,
         useClear: true,
-        readonly: false
+        readonly: false,
+        isPwd: false,
+        showEye: true
       }
     },
     methods: {
@@ -57,6 +66,13 @@
       },
       updateUseClear(val) {
         this.useClear = val
+      },
+      updatePwd(val) {
+        this.isPwd = val
+        this.type = this.isPwd ? 'password' : 'text'
+      },
+      updateShowEye(val) {
+        this.showEye = val
       }
     },
     components: {

diff --git a/src/common/icon/cube-icon.styl b/src/common/icon/cube-icon.styl
@@ -44,3 +44,7 @@
   content: "\e67d"
 .cubeic-select::before
   content: "\e609"
+.cubeic-eye-invisible::before
+  content: "\e624"
+.cubeic-eye-visible::before
+  content: "\e625"
diff --git a/src/common/icon/cubeic.ttf b/src/common/icon/cubeic.ttf
diff --git a/src/common/icon/cubeic.woff b/src/common/icon/cubeic.woff
diff --git a/src/components/input/input.vue b/src/components/input/input.vue
@@ -5,11 +5,16 @@
         <i class="cubeic-wrong"></i>
       </slot>
     </div>
+    <div class="cube-input-eye" v-if="_showPwdEye" @click="handlePwdEye">
+      <slot>
+        <i :class="eyeClass"></i>
+      </slot>
+    </div>
     <input
       ref="input"
       v-model="inputValue"
       v-bind="$props"
-      :type="type"
+      :type="_type"
       :disabled="disabled"
       :readonly="readonly"
       :autocomplete="autocomplete"
@@ -31,7 +36,8 @@
     data() {
       return {
         inputValue: this.value,
-        isFocus: false
+        isFocus: false,
+        pwdVisible: false
       }
     },
     props: {
@@ -70,11 +76,28 @@
       clearable: {
         type: Boolean,
         default: false
+      },
+      pwdEye: {
+        type: Boolean,
+        default: false
       }
     },
     computed: {
+      _type() {
+        const type = this.type
+        if (type === 'password' && this.pwdVisible) {
+          return 'text'
+        }
+        return type
+      },
       _showClear() {
         return this.clearable && this.inputValue && !this.readonly && !this.disabled
+      },
+      _showPwdEye() {
+        return this.type === 'password' && this.pwdEye && !this.disabled
+      },
+      eyeClass() {
+        return this.pwdVisible ? 'cubeic-eye-invisible' : 'cubeic-eye-visible'
       }
     },
     watch: {
@@ -97,6 +120,10 @@
       handleClear(e) {
         this.inputValue = ''
         this.$refs.input.focus()
+      },
+      handlePwdEye() {
+        this.pwdVisible = !this.pwdVisible
+        this.$refs.input.focus()
       }
     }
   }
@@ -125,17 +152,29 @@
   .cube-input_active
     &::after
       border-color: $input-focus-border-color
-  .cube-input-clear
+  .cube-input-clear, .cube-input-eye
     position: absolute
     right: 0
     top: 0
     bottom: 0
     width: 1em
     height: 1em
     line-height: 1
-    padding: 10px 8px
+    padding: 10px .5em
     margin: auto
     color: $input-clear-icon-color
+    > i
+      display: inline-block
+      transform: scale(1.2)
     + input
-      padding-right: 32px
+      padding-right: 2em
+  .cube-input-eye
+    >
+      .cubeic-eye-invisible, .cubeic-eye-visible
+        transform: scale(1.4)
+  .cube-input-clear
+    + .cube-input-eye
+      right: 2.1em
+      + input
+        padding-right: 4.1em
 </style>