完善input的close

monw3c · Jul 1, 2018 · 59d37cc · 59d37cc
1 parent 10b5039
commit 59d37cc
Show file tree

Hide file tree

Showing 24 changed files with 68 additions and 21 deletions.
diff --git a/config/index.js b/config/index.js
@@ -11,7 +11,8 @@ module.exports = {
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
     proxyTable: {},
-    host: '192.168.10.224',
+    // host: '192.168.10.224',
+    host: '192.168.1.6',
     // Various Dev Server settings
     //host: 'localhost', // can be overwritten by process.env.HOST
     port: 7878, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined

diff --git a/docs/dist/index.html b/docs/dist/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset=UTF-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1"><title>xmui - 基于vue2，可复用UI组件</title><link href=./static/css/app.27bf66837d21ef491afd57cdfd7c602c.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.77b8cdc34bfd407b8504.js></script><script type=text/javascript src=./static/js/vendor.c7ad6fdac84180d296de.js></script><script type=text/javascript src=./static/js/app.cc9624ff0218c4831ea4.js></script></body></html>
+<!DOCTYPE html><html><head><meta charset=UTF-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1"><title>xmui - 基于vue2，可复用UI组件</title><link href=./static/css/app.26aa33ebb2f13ce3c51ad0b65c333975.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.5261056b2a2138af8b95.js></script><script type=text/javascript src=./static/js/vendor.c7ad6fdac84180d296de.js></script><script type=text/javascript src=./static/js/app.46dc9966c99cbd0ee925.js></script></body></html>
diff --git a/.../app.27bf66837d21ef491afd57cdfd7c602c.css → .../app.26aa33ebb2f13ce3c51ad0b65c333975.css b/.../app.27bf66837d21ef491afd57cdfd7c602c.css → .../app.26aa33ebb2f13ce3c51ad0b65c333975.css
diff --git a/docs/dist/static/css/app.26aa33ebb2f13ce3c51ad0b65c333975.css.map b/docs/dist/static/css/app.26aa33ebb2f13ce3c51ad0b65c333975.css.map
diff --git a/docs/dist/static/css/app.27bf66837d21ef491afd57cdfd7c602c.css.map b/docs/dist/static/css/app.27bf66837d21ef491afd57cdfd7c602c.css.map
diff --git a/docs/dist/static/js/0.930061fb6f2b9c7db54c.js b/docs/dist/static/js/0.930061fb6f2b9c7db54c.js
diff --git a/docs/dist/static/js/0.930061fb6f2b9c7db54c.js.map b/docs/dist/static/js/0.930061fb6f2b9c7db54c.js.map
diff --git a/docs/dist/static/js/0.eecdedcb81e6032983f5.js b/docs/dist/static/js/0.eecdedcb81e6032983f5.js
diff --git a/docs/dist/static/js/0.eecdedcb81e6032983f5.js.map b/docs/dist/static/js/0.eecdedcb81e6032983f5.js.map
diff --git a/docs/dist/static/js/app.46dc9966c99cbd0ee925.js b/docs/dist/static/js/app.46dc9966c99cbd0ee925.js
diff --git a/docs/dist/static/js/app.46dc9966c99cbd0ee925.js.map b/docs/dist/static/js/app.46dc9966c99cbd0ee925.js.map
diff --git a/docs/dist/static/js/app.cc9624ff0218c4831ea4.js b/docs/dist/static/js/app.cc9624ff0218c4831ea4.js
diff --git a/docs/dist/static/js/app.cc9624ff0218c4831ea4.js.map b/docs/dist/static/js/app.cc9624ff0218c4831ea4.js.map
diff --git a/...tatic/js/manifest.77b8cdc34bfd407b8504.js → ...tatic/js/manifest.5261056b2a2138af8b95.js b/...tatic/js/manifest.77b8cdc34bfd407b8504.js → ...tatic/js/manifest.5261056b2a2138af8b95.js
diff --git a/...c/js/manifest.77b8cdc34bfd407b8504.js.map → ...c/js/manifest.5261056b2a2138af8b95.js.map b/...c/js/manifest.77b8cdc34bfd407b8504.js.map → ...c/js/manifest.5261056b2a2138af8b95.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "x-m-ui",
-  "version": "0.1.37",
+  "version": "0.1.38",
   "description": "UI components base on Vue 2.x",
   "author": "mon <505038730@qq.com>",
   "main": "package/xmui.min.js",

diff --git a/package/comps/components/input/input.scss b/package/comps/components/input/input.scss
@@ -36,4 +36,19 @@
         color: rgb(255, 68, 68);
         display: none;
     }
+
+    & .xm__input--close{
+        height: 2rem;
+        width: 2rem;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        margin: auto;
+
+        & span{
+            margin-left: 0;
+            font-size: 2rem;
+        }
+    }
 }
diff --git a/package/comps/components/input/input.vue b/package/comps/components/input/input.vue
@@ -27,6 +27,7 @@
         <input ref="input" v-if="type == 'time'" type="time"
                    v-model="currentValue" :name="name" @focus="onFocus" @blur="onBlur" :maxlength="max" :placeholder="placeholder" :autocomplete="autocomplete" :readonly="readonly" :disabled="disabled" :class="[{'is-right': right}]"
         >
+        <div class="xm__input--close" v-if="hasClose&&(type == 'text'||type == 'search'||type == 'password'||type == 'email'||type == 'tel')&&!disabled&&!readonly" v-show="currentValue!=''" @click="emptyVal"><span class="xm__icon--close"></span></div>
     </div>
 </template>
 
@@ -56,6 +57,10 @@ export default {
     right: {
       type: Boolean,
       default: false
+    },
+    hasClose: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -77,6 +82,9 @@ export default {
     },
     onFocus () {
       this.$emit('focus')
+    },
+    emptyVal () {
+      this.currentValue = ''
     }
   }
 }

diff --git a/package/xmui.min.css b/package/xmui.min.css
diff --git a/package/xmui.min.css.map b/package/xmui.min.css.map
diff --git a/package/xmui.min.js b/package/xmui.min.js
diff --git a/src/comps/components/input/input.scss b/src/comps/components/input/input.scss
@@ -36,4 +36,19 @@
         color: rgb(255, 68, 68);
         display: none;
     }
+
+    & .xm__input--close{
+        height: 2rem;
+        width: 2rem;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        margin: auto;
+
+        & span{
+            margin-left: 0;
+            font-size: 2rem;
+        }
+    }
 }
diff --git a/src/comps/components/input/input.vue b/src/comps/components/input/input.vue
@@ -27,6 +27,7 @@
         <input ref="input" v-if="type == 'time'" type="time"
                    v-model="currentValue" :name="name" @focus="onFocus" @blur="onBlur" :maxlength="max" :placeholder="placeholder" :autocomplete="autocomplete" :readonly="readonly" :disabled="disabled" :class="[{'is-right': right}]"
         >
+        <div class="xm__input--close" v-if="hasClose&&(type == 'text'||type == 'search'||type == 'password'||type == 'email'||type == 'tel')&&!disabled&&!readonly" v-show="currentValue!=''" @click="emptyVal"><span class="xm__icon--close"></span></div>
     </div>
 </template>
 
@@ -56,6 +57,10 @@ export default {
     right: {
       type: Boolean,
       default: false
+    },
+    hasClose: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -77,6 +82,9 @@ export default {
     },
     onFocus () {
       this.$emit('focus')
+    },
+    emptyVal () {
+      this.currentValue = ''
     }
   }
 }

diff --git a/src/views/home.vue b/src/views/home.vue
@@ -53,19 +53,19 @@
         <!-- <div slot="top">头部的</div> -->
         <xm-cell-item>
           <span slot="left">用户名：</span>
-          <xm-input slot="right" v-model="value1" name="name1" max="10" placeholder="请输入用户名" @blur="inputAction1" @focus="inputAction2"></xm-input>
+          <xm-input slot="right" v-model="value1" name="name1" max="10" placeholder="请输入用户名" @blur="inputAction1" @focus="inputAction2" has-close></xm-input>
         </xm-cell-item>
         <xm-cell-item>
           <span slot="left">密  码：</span>
-          <xm-input slot="right" type="password" v-model="value1" placeholder="请输入密码"></xm-input>
+          <xm-input slot="right" type="password" v-model="value1" placeholder="请输入密码" has-close></xm-input>
         </xm-cell-item>
         <xm-cell-item>
           <span slot="leftIcon" class="xm__icon--phone"></span>
           <xm-input slot="right" type="tel" v-model="value1" placeholder="请输入手机号"></xm-input>
           <xm-button slot="right" type="error" class="btn__block" style="padding: 6px;width: 120px;font-size: 12px;">获取验证码</xm-button>
         </xm-cell-item>
         <xm-cell-item>
-          <xm-input slot="right" :value="value1" placeholder="这里是readonly" readonly></xm-input>
+          <xm-input slot="right" :value="value1" placeholder="这里是readonly" readonly has-close></xm-input>
           <span slot="rightIcon" class="xm__icon--delete"></span>
         </xm-cell-item>
         <xm-cell-item>