为input增加清除和显示密码按钮

examples/login-template/App.vue

@@ -74,15 +74,6 @@
         line-height: 50px;
     }
 
-    .input-row input {
-        width: 80%;
-        height: 50px;
-        min-height: 50px;
-        padding: 15px 0;
-        padding-right: 30px;
-        line-height: 50px;
-    }
-
     .input-row.border::after {
         position: absolute;
         right: 0;

examples/login-template/components/uni-icon/uni-icon.css

+@font-face {
+	font-family: uniicons;
+	font-weight: normal;
+	font-style: normal;
+	src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf?t=1536565627510') format('truetype');
+}
+
+.uni-icon {
+	font-family: uniicons;
+	font-size: 48upx;
+	font-weight: normal;
+	font-style: normal;
+	line-height: 1;
+	display: inline-block;
+	text-decoration: none;
+	-webkit-font-smoothing: antialiased;
+}
+
+.uni-icon.uni-active {
+	color: #007aff;
+}
+
+.uni-icon-contact:before {
+	content: '\e100';
+}
+
+.uni-icon-person:before {
+	content: '\e101';
+}
+
+.uni-icon-personadd:before {
+	content: '\e102';
+}
+
+.uni-icon-contact-filled:before {
+	content: '\e130';
+}
+
+.uni-icon-person-filled:before {
+	content: '\e131';
+}
+
+.uni-icon-personadd-filled:before {
+	content: '\e132';
+}
+
+.uni-icon-phone:before {
+	content: '\e200';
+}
+
+.uni-icon-email:before {
+	content: '\e201';
+}
+
+.uni-icon-chatbubble:before {
+	content: '\e202';
+}
+
+.uni-icon-chatboxes:before {
+	content: '\e203';
+}
+
+.uni-icon-phone-filled:before {
+	content: '\e230';
+}
+
+.uni-icon-email-filled:before {
+	content: '\e231';
+}
+
+.uni-icon-chatbubble-filled:before {
+	content: '\e232';
+}
+
+.uni-icon-chatboxes-filled:before {
+	content: '\e233';
+}
+
+.uni-icon-weibo:before {
+	content: '\e260';
+}
+
+.uni-icon-weixin:before {
+	content: '\e261';
+}
+
+.uni-icon-pengyouquan:before {
+	content: '\e262';
+}
+
+.uni-icon-chat:before {
+	content: '\e263';
+}
+
+.uni-icon-qq:before {
+	content: '\e264';
+}
+
+.uni-icon-videocam:before {
+	content: '\e300';
+}
+
+.uni-icon-camera:before {
+	content: '\e301';
+}
+
+.uni-icon-mic:before {
+	content: '\e302';
+}
+
+.uni-icon-location:before {
+	content: '\e303';
+}
+
+.uni-icon-mic-filled:before,
+.uni-icon-speech:before {
+	content: '\e332';
+}
+
+.uni-icon-location-filled:before {
+	content: '\e333';
+}
+
+.uni-icon-micoff:before {
+	content: '\e360';
+}
+
+.uni-icon-image:before {
+	content: '\e363';
+}
+
+.uni-icon-map:before {
+	content: '\e364';
+}
+
+.uni-icon-compose:before {
+	content: '\e400';
+}
+
+.uni-icon-trash:before {
+	content: '\e401';
+}
+
+.uni-icon-upload:before {
+	content: '\e402';
+}
+
+.uni-icon-download:before {
+	content: '\e403';
+}
+
+.uni-icon-close:before {
+	content: '\e404';
+}
+
+.uni-icon-redo:before {
+	content: '\e405';
+}
+
+.uni-icon-undo:before {
+	content: '\e406';
+}
+
+.uni-icon-refresh:before {
+	content: '\e407';
+}
+
+.uni-icon-star:before {
+	content: '\e408';
+}
+
+.uni-icon-plus:before {
+	content: '\e409';
+}
+
+.uni-icon-minus:before {
+	content: '\e410';
+}
+
+.uni-icon-circle:before,
+.uni-icon-checkbox:before {
+	content: '\e411';
+}
+
+.uni-icon-close-filled:before,
+.uni-icon-clear:before {
+	content: '\e434';
+}
+
+.uni-icon-refresh-filled:before {
+	content: '\e437';
+}
+
+.uni-icon-star-filled:before {
+	content: '\e438';
+}
+
+.uni-icon-plus-filled:before {
+	content: '\e439';
+}
+
+.uni-icon-minus-filled:before {
+	content: '\e440';
+}
+
+.uni-icon-circle-filled:before {
+	content: '\e441';
+}
+
+.uni-icon-checkbox-filled:before {
+	content: '\e442';
+}
+
+.uni-icon-closeempty:before {
+	content: '\e460';
+}
+
+.uni-icon-refreshempty:before {
+	content: '\e461';
+}
+
+.uni-icon-reload:before {
+	content: '\e462';
+}
+
+.uni-icon-starhalf:before {
+	content: '\e463';
+}
+
+.uni-icon-spinner:before {
+	content: '\e464';
+}
+
+.uni-icon-spinner-cycle:before {
+	content: '\e465';
+}
+
+.uni-icon-search:before {
+	content: '\e466';
+}
+
+.uni-icon-plusempty:before {
+	content: '\e468';
+}
+
+.uni-icon-forward:before {
+	content: '\e470';
+}
+
+.uni-icon-back:before,
+.uni-icon-left-nav:before {
+	content: '\e471';
+}
+
+.uni-icon-checkmarkempty:before {
+	content: '\e472';
+}
+
+.uni-icon-home:before {
+	content: '\e500';
+}
+
+.uni-icon-navigate:before {
+	content: '\e501';
+}
+
+.uni-icon-gear:before {
+	content: '\e502';
+}
+
+.uni-icon-paperplane:before {
+	content: '\e503';
+}
+
+.uni-icon-info:before {
+	content: '\e504';
+}
+
+.uni-icon-help:before {
+	content: '\e505';
+}
+
+.uni-icon-locked:before {
+	content: '\e506';
+}
+
+.uni-icon-more:before {
+	content: '\e507';
+}
+
+.uni-icon-flag:before {
+	content: '\e508';
+}
+
+.uni-icon-home-filled:before {
+	content: '\e530';
+}
+
+.uni-icon-gear-filled:before {
+	content: '\e532';
+}
+
+.uni-icon-info-filled:before {
+	content: '\e534';
+}
+
+.uni-icon-help-filled:before {
+	content: '\e535';
+}
+
+.uni-icon-more-filled:before {
+	content: '\e537';
+}
+
+.uni-icon-settings:before {
+	content: '\e560';
+}
+
+.uni-icon-list:before {
+	content: '\e562';
+}
+
+.uni-icon-bars:before {
+	content: '\e563';
+}
+
+.uni-icon-loop:before {
+	content: '\e565';
+}
+
+.uni-icon-paperclip:before {
+	content: '\e567';
+}
+
+.uni-icon-eye:before {
+	content: '\e568';
+}
+
+.uni-icon-arrowup:before {
+	content: '\e580';
+}
+
+.uni-icon-arrowdown:before {
+	content: '\e581';
+}
+
+.uni-icon-arrowleft:before {
+	content: '\e582';
+}
+
+.uni-icon-arrowright:before {
+	content: '\e583';
+}
+
+.uni-icon-arrowthinup:before {
+	content: '\e584';
+}
+
+.uni-icon-arrowthindown:before {
+	content: '\e585';
+}
+
+.uni-icon-arrowthinleft:before {
+	content: '\e586';
+}
+
+.uni-icon-arrowthinright:before {
+	content: '\e587';
+}
+
+.uni-icon-pulldown:before {
+	content: '\e588';
+}
+
+.uni-icon-scan:before {
+    content: "\e612";
+}

examples/login-template/components/uni-icon/uni-icon.vue

+<template>
+    <view class="uni-icon" :class="['uni-icon-'+type]" :style="{color:color,'font-size':fontSize}" @click="onClick()"></view>
+</template>
+
+<script>
+    export default {
+        props: {
+            /**
+             * 图标类型
+             */
+            type: String,
+            /**
+             * 图标颜色
+             */
+            color: String,
+            /**
+             * 图标大小
+             */
+            size: Number
+        },
+        computed: {
+            fontSize() {
+                return `${this.size}px`
+            }
+        },
+        methods: {
+            onClick() {
+                this.$emit('click')
+            }
+        }
+    }
+</script>
+
+<style>
+    @import "./uni-icon.css";
+</style>

examples/login-template/components/uni-input.vue

+<template>
+    <view class="uni-input-view">
+        <input :focus="focus_" :type="inputType" :value="value" @input="onInput" class="uni-input-input" :placeholder="placeholder"
+            :password="type==='password'&&!showPassword" @focus="onFocus" @blur="onBlur" />
+        <!-- 优先显示密码可见按钮 -->
+        <uni-icon v-if="clearable_&&!displayable_&&value.length" color="#666666" type="clear" size="20" @click="clear"></uni-icon>
+        <uni-icon v-if="displayable_" :color="showPassword?'#666666':'#cccccc'" type="eye" size="20" @click="display"></uni-icon>
+    </view>
+</template>
+
+<script>
+    import uniIcon from './uni-icon/uni-icon.vue'
+
+    export default {
+        components: {
+            uniIcon
+        },
+        props: {
+            /**
+             * 输入类型
+             */
+            type: String,
+            /**
+             * 值
+             */
+            value: String,
+            /**
+             * 占位符
+             */
+            placeholder: String,
+            /**
+             * 是否显示清除按钮
+             */
+            clearable: {
+                type: [Boolean, String],
+                default: false
+            },
+            /**
+             * 是否显示密码可见按钮
+             */
+            displayable: {
+                type: [Boolean, String],
+                default: false
+            },
+            /**
+             * 自动获取焦点
+             */
+            focus: {
+                type: [Boolean, String],
+                default: false
+            }
+        },
+        model: {
+            prop: 'value',
+            event: 'input'
+        },
+        data() {
+            return {
+                /**
+                 * 显示密码明文
+                 */
+                showPassword: false,
+                /**
+                 * 是否获取焦点
+                 */
+                isFocus: false
+            }
+        },
+        computed: {
+            inputType() {
+                const type = this.type
+                return type === 'password' ? 'text' : type
+            },
+            clearable_() {
+                return String(this.clearable) !== 'false'
+            },
+            displayable_() {
+                return String(this.displayable) !== 'false'
+            },
+            focus_() {
+                return String(this.focus) !== 'false'
+            }
+        },
+        methods: {
+            clear() {
+                this.value = ''
+            },
+            display() {
+                this.showPassword = !this.showPassword
+            },
+            onFocus() {
+                this.isFocus = true
+            },
+            onBlur() {
+                this.$nextTick(() => {
+                    this.isFocus = false
+                })
+            },
+            onInput(e) {
+                this.$emit('input', e.target.value)
+            }
+        }
+    }
+</script>
+
+<style>
+    .uni-input-view {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        width: 100%;
+        flex: 1;
+        padding: 0 10rpx;
+    }
+
+    .uni-input-input {
+        flex: 1;
+        width: 100%;
+    }
+</style>

examples/login-template/pages/login/login.vue

@@ -3,11 +3,11 @@
         <view class="input-group">
             <view class="input-row border">
                 <text class="title">账号：</text>
-                <input type="text" focus v-model="account" placeholder="请输入账号">
+                <uni-input class="uni-input" type="text" clearable focus v-model="account" placeholder="请输入账号"></uni-input>
             </view>
             <view class="input-row">
                 <text class="title">密码：</text>
-                <input type="text" password="true" v-model="password" placeholder="请输入密码">
+                <uni-input type="password" displayable v-model="password" placeholder="请输入密码"></uni-input>
             </view>
         </view>
         <view class="btn-row">
@@ -32,8 +32,12 @@
         mapState,
         mapMutations
     } from 'vuex'
+    import uniInput from '../../components/uni-input.vue'
 
     export default {
+        components: {
+            uniInput
+        },
         data() {
             return {
                 providerList: [],
@@ -138,8 +142,8 @@
             toMain(userName) {
                 this.login(userName);
                 /**
-                 * 强制登录时使用reLaunch方式跳转过来
-				 * 返回首页也使用reLaunch方式
+                 * 强制登录时使用reLaunch方式跳转过来
+                 * 返回首页也使用reLaunch方式
                  */
                 if (this.forcedLogin) {
                     uni.reLaunch({

examples/login-template/pages/pwd/pwd.vue

@@ -3,7 +3,7 @@
         <view class="input-group">
             <view class="input-row">
                 <text class="title">邮箱：</text>
-                <input type="text" focus v-model="email" placeholder="请输入邮箱">
+                <uni-input type="text" focus clearable v-model="email" placeholder="请输入邮箱"></uni-input>
             </view>
         </view>
 
@@ -15,8 +15,12 @@
 
 <script>
     import service from '../../service.js';
+    import uniInput from '../../components/uni-input.vue';
 
     export default {
+        components: {
+            uniInput
+        },
         data() {
             return {
                 email: ''

examples/login-template/pages/reg/reg.vue

@@ -3,15 +3,15 @@
         <view class="input-group">
             <view class="input-row border">
                 <text class="title">账号：</text>
-                <input type="text" focus v-model="account" placeholder="请输入账号">
+                <uni-input type="text" focus clearable v-model="account" placeholder="请输入账号"></uni-input>
             </view>
             <view class="input-row border">
                 <text class="title">密码：</text>
-                <input type="text" password="true" v-model="password" placeholder="请输入密码">
+                <uni-input type="password" displayable v-model="password" placeholder="请输入密码"></uni-input>
             </view>
             <view class="input-row">
                 <text class="title">邮箱：</text>
-                <input type="text" v-model="email" placeholder="请输入邮箱">
+                <uni-input type="text" clearable v-model="email" placeholder="请输入邮箱"></uni-input>
             </view>
         </view>
         <view class="btn-row">
@@ -22,8 +22,12 @@
 
 <script>
     import service from '../../service.js';
+    import uniInput from '../../components/uni-input.vue';
 
     export default {
+        components: {
+            uniInput
+        },
         data() {
             return {
                 account: '',