[improvement] PasswordInput: jsx (#2611)

packages/password-input/index.js

@@ -0,0 +1,51 @@
+import { use } from '../utils';
+
+const [sfc, bem] = use('password-input');
+
+export default sfc({
+  props: {
+    info: String,
+    errorInfo: String,
+    value: {
+      type: String,
+      default: ''
+    },
+    length: {
+      type: Number,
+      default: 6
+    }
+  },
+
+  computed: {
+    points() {
+      const arr = [];
+      for (let i = 0; i < this.length; i++) {
+        arr[i] = this.value[i] ? 'visible' : 'hidden';
+      }
+      return arr;
+    }
+  },
+
+  render(h) {
+    const info = this.errorInfo || this.info;
+
+    return (
+      <div class={bem()}>
+        <ul
+          class={[bem('security'), 'van-hairline--surround']}
+          onTouchstart={event => {
+            event.stopPropagation();
+            this.$emit('focus');
+          }}
+        >
+          {this.points.map(visibility => (
+            <li class="van-hairline">
+              <i style={{ visibility }} />
+            </li>
+          ))}
+        </ul>
+        {info && <div class={bem(this.errorInfo ? 'error-info' : 'info')}>{info}</div>}
+      </div>
+    );
+  }
+});

packages/password-input/index.vue

@@ -1,52 +0,0 @@
-<template>
-  <div :class="b()">
-    <ul
-      :class="b('security')"
-      class="van-hairline--surround"
-      @touchstart.stop="$emit('focus')"
-    >
-      <li
-        v-for="visibility in points"
-        class="van-hairline"
-      >
-        <i :style="{ visibility } " />
-      </li>
-    </ul>
-    <div
-      v-if="errorInfo || info"
-      v-text="errorInfo || info"
-      :class="b(errorInfo ? 'error-info' : 'info')"
-    />
-  </div>
-</template>
-
-<script>
-import create from '../utils/create';
-
-export default create({
-  name: 'password-input',
-
-  props: {
-    info: String,
-    errorInfo: String,
-    value: {
-      type: String,
-      default: ''
-    },
-    length: {
-      type: Number,
-      default: 6
-    }
-  },
-
-  computed: {
-    points() {
-      const arr = [];
-      for (let i = 0; i < this.length; i++) {
-        arr[i] = this.value[i] ? 'visible' : 'hidden';
-      }
-      return arr;
-    }
-  }
-});
-</script>

packages/password-input/test/__snapshots__/demo.spec.js.snap

@@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-password-input">
-      <ul class="van-hairline--surround van-password-input__security">
+      <ul class="van-password-input__security van-hairline--surround">
         <li class="van-hairline"><i style="visibility:visible;"></i></li>
         <li class="van-hairline"><i style="visibility:visible;"></i></li>
         <li class="van-hairline"><i style="visibility:visible;"></i></li>