field

packages/common/styles/ionic-public-style.less

@@ -112,14 +112,14 @@
             margin-right: 0.2rem;
           }
           .required {
-            display: flex;
+            position: relative;
           }
-          .required::after {
-            content: '*';
+          .required::before {
+            position: absolute;
+            left: -8px;
             color: #D24E4E;
-            height: 0.16rem;
-            padding-top: 0.08rem;
-            margin-left: 0.05rem;
+            font-size: 14px;
+            content: '*';
           }
         }
         .add-content {

packages/common/styles/variables.less

@@ -21,7 +21,7 @@
 @divider-color:#fafafa;
 @switch-box-bg:#48D2A0;
 @check-box-bg:@theme-color;
-@radio-box-bg:#ff00ff;
+@radio-box-bg:@theme-color;
 
 
 /**

packages/components/DateField/index.vue

@@ -4,26 +4,35 @@
 */
 
 <template>
-  <section :style="{'min-height':minHeight}" class="h-date">
-    <!--<section :style="{'min-height':minHeight}" :class="{'vue-1px-b':hasBorder}" class="date-border">-->
-    <section :class="{'required':required}" :style="{'flex':proportion[0] }" class="name">{{ label }}</section>
-    <section :style="{'flex':proportion[1] }" class="date-content">
-      <input
-        v-model="value" :disabled="disabled" :placeholder="dataPlaceholder" type="text"
-        readonly
-        @click="showDate">
-      <!--<slot name="icon"/>-->
-      <i v-if="showClean" class="icon ion-close-circled" @click="cleanValue"/>
-      <!--<slot name="icon"/>-->
-      <img v-if="!showClean" :src="selectIcon" class="icon" >
-    </section>
-  </section>
-  <!--</section>-->
+  <div :style="{'min-height':minHeight}" :class="{'h-field-disabled':disabled}" class="h-field h-date">
+    <div v-if="showLeftIcon" class="field-icon field-left-icon" @click="onClickLeftIcon">
+      <img v-if="!hasLeftIcon" :src="leftIcon">
+      <slot name="left-icon"/>
+    </div>
+    <div v-if="label" :class="{'required': required}" :style="{'flex':proportion[0] }" class="field-title field-label">
+      <span>{{ label }}</span>
+    </div>
+    <div :style="{'flex':proportion[1] }" class="field-value">
+      <div class="field-body">
+        <input
+          v-bind="$attrs"
+          v-model="value"
+          :disabled="disabled" :placeholder="dataPlaceholder" :class="('field-control-'+inputAlign)" class="field-control"
+          type="text" readonly
+          @click="showDate">
+        <!--<slot name="icon"/>-->
+        <i v-if="showClean" class="field-icon field-right-icon icon ion-close-circled" @click="cleanValue"/>
+        <!--<slot name="icon"/>-->
+        <img v-if="!showClean" :src="rightIcon" class="field-right-icon date-field-icon" >
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
   name: 'DateField',
+  inheritAttrs: false,
   props: {
     value: {
       default: null,
@@ -35,7 +44,7 @@ export default {
     },
     clearable: {
       type: Boolean,
-      default: false,
+      default: true,
     },
     format: {
       default: 'YYYY-MM-DD',
@@ -62,6 +71,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    inputAlign: {
+      type: String,
+      default: 'right',
+    },
     proportion: {
       // name/content 横向面积比例
       type: Array,
@@ -71,22 +84,22 @@ export default {
       type: Number,
       default: 45,
     },
-    hasBorder: {
-      type: Boolean,
-      default: true,
-    },
     showIcon: {
       type: Boolean,
       default: true,
     },
+    leftIcon: {
+      type: String,
+      default: null,
+    },
     rightIcon: {
       type: String,
-      default: '',
+      default: require('./right-gray@2x.png'),
     },
   },
   data () {
     return {
-      Icon: require('./right-gray@2x.png'),
+
     }
   },
   computed: {
@@ -97,8 +110,11 @@ export default {
         return this.itemHeight + 'px'
       }
     },
-    selectIcon () {
-      return this.rightIcon ? this.rightIcon : this.Icon
+    hasLeftIcon () {
+      return !!this.$slots['left-icon']
+    },
+    showLeftIcon () {
+      return !!(this.leftIcon || this.$slots['left-icon'])
     },
     dataPlaceholder () {
       return this.placeholder ? this.placeholder : '请输入' + this.label
@@ -148,60 +164,11 @@ export default {
 
 <style lang="less">
   .h-date{
-    width: 100%;
-    display: flex;
-    align-items: center;
-    border: none;
-    padding: 0 0.3rem 0 0.3rem;
     background-color: #fff;
     position: relative;
-
-    &:after{
-      content: " ";
-      position: absolute;
-      left: 0.3rem;
-      bottom: 0;
-      right: 0;
-      height: 1px;  /*no*/
-      border-bottom: 1px solid rgba(0,0,0,.1);  /*no*/
-      color: rgba(0,0,0,.1);
-      transform-origin: 0 100%;
-      transform: scaleY(0.5);
-    }
-    .name{
-      line-height: 0.5rem;
-      font-size: 14px;
-      color: #333;
-    }
-    .required {
-      display: flex;
-      align-items: center;
-    }
-    .required::after {
-      content: '*';
-      color: #D24E4E;
-      //height: 0.16rem;
-      padding-top: 0.08rem;
-      margin-left: 0.05rem;
-    }
-    .date-content{
-      height: 100%;
-      width: 100%;
-      font-size: 14px;
-      color: #666;
-      display: flex;
-      align-items: center;
-      input{
-        font-size: 14px;
-        color: #666;
-        line-height: 0.4rem;
-        width: 100%;
-        text-align: right;
-        border: none;
-      }
-      .icon{
+    .field-value{
+      .date-field-icon{
         height: 0.25rem;
-        margin-left: 4px
       }
     }
   }

packages/components/Field/index.vue

@@ -4,7 +4,7 @@
 */
 
 <template>
-  <div :style="{'min-height':minHeight}" class="h-field">
+  <div :style="{'min-height':minHeight}" :class="{'h-field-disabled':disabled}" class="h-field">
     <div v-if="showLeftIcon" class="field-icon field-left-icon" @click="onClickLeftIcon">
       <img v-if="!hasLeftIcon" :src="leftIcon">
       <slot name="left-icon"/>
@@ -102,7 +102,7 @@ export default {
     },
     clearable: {
       type: Boolean,
-      default: false,
+      default: true,
     },
     format: {
       type: Boolean,
@@ -213,6 +213,10 @@ export default {
   },
   mounted () {
     // this.onInput(this.value)
+    if (this.wordLimit && this.maxlength) {
+      this.count = (this.value || '').length
+    }
+
     this.$nextTick(this.adjustSize)
   },
   methods: {
@@ -221,7 +225,9 @@ export default {
       if (isDef(maxlength) && value.length >= maxlength) {
         value = value.slice(0, maxlength)
       }
-      this.count = (value || '').length
+      if (this.wordLimit && this.maxlength) {
+        this.count = (value || '').length
+      }
       if (this.type === 'number') {
         value = formatNumber(value, decimal)
       }
@@ -299,15 +305,12 @@ export default {
 <style lang="less">
   @import "../../../packages/common/styles/vue-1px";
   .h-field {
-   // height: 45px;
     width: 100%;
     display: flex;
     padding: 10px 15px;
     background-color: #fff;
-   // align-items: center;
     position: relative;
     line-height: 24px;
-
     &:after {
       .setBottomLine();
       left: 15px;
@@ -317,6 +320,8 @@ export default {
       font-size: 16px;
       img{
         width: 16px;
+        position: relative;
+        top:2px;
       }
     }
     .field-left-icon{
@@ -335,9 +340,9 @@ export default {
       margin-right: 12px;
     }
     .required {
-      &:after {
+      &:before {
         position: absolute;
-        margin-left: 4px;
+        left: 8px;
         color: #D24E4E;
         font-size: 14px;
         content: '*';
@@ -393,5 +398,18 @@ export default {
         text-align: right;
       }
     }
+
+    &-disabled{
+      .field-label{
+        color: #999;
+      }
+      .field-value {
+        .field-body {
+          .field-control{
+            color: #999;
+          }
+        }
+      }
+    }
   }
 </style>

packages/components/ListItem/Item.vue

@@ -158,15 +158,15 @@ export default {
         }
 
         .required {
-          display: flex;
+          position: relative;
         }
 
-        .required::after {
-          content: '*';
+        .required::before {
+          position: absolute;
+          left: -8px;
           color: #D24E4E;
-          height: 8px;
-          padding-top: 2px;
-          margin-left: 2px;
+          font-size: 14px;
+          content: '*';
         }
       }
 

packages/components/Select/SelectField.vue

@@ -4,20 +4,29 @@
 */
 
 <template>
-  <section :style="{'min-height':minHeight}" class="h-select">
-    <!--<section :style="{'min-height':minHeight}" :class="{'vue-1px-b':hasBorder}" class="select-border">-->
-    <section :class="{'required':required}" :style="{'flex':proportion[0] }" class="name">{{ label }}</section>
-    <section :style="{'flex':proportion[1] }" class="select-content">
-      <input
-        v-model="codeName" :disabled="disabled" :placeholder="selectPlaceholder" type="text"
-        readonly
-        @click="showSelect">
-      <input v-model="value" type="text" hidden>
-      <i v-if="showClean" class="icon ion-close-circled" @click="cleanValue"/>
-      <!--<slot name="icon"/>-->
-      <img v-if="!showClean" :src="selectIcon" class="icon" >
-    </section>
-  </section>
+  <div :style="{'min-height':minHeight}" :class="{'h-field-disabled':disabled}" class="h-field h-select">
+    <div v-if="showLeftIcon" class="field-icon field-left-icon" @click="onClickLeftIcon">
+      <img v-if="!hasLeftIcon" :src="leftIcon">
+      <slot name="left-icon"/>
+    </div>
+    <div v-if="label" :class="{'required': required}" :style="{'flex':proportion[0] }" class="field-title field-label">
+      <span>{{ label }}</span>
+    </div>
+    <div :style="{'flex':proportion[1] }" class="field-value">
+      <div class="field-body">
+        <input
+          v-bind="$attrs"
+          v-model="codeName" :disabled="disabled" :placeholder="selectPlaceholder" :class="('field-control-'+inputAlign)"
+          type="text" class="field-control"
+          readonly
+          @click="showSelect">
+        <input v-model="value" type="text" hidden>
+        <i v-if="showClean" class="field-icon field-right-icon icon ion-close-circled" @click="cleanValue"/>
+        <!--<slot name="icon"/>-->
+        <img v-if="!showClean" :src="rightIcon" class="field-right-icon date-field-icon" >
+      </div>
+    </div>
+  </div>
   <!--</section>-->
 </template>
 
@@ -25,6 +34,7 @@
 import VueSelect from './index'
 export default {
   name: 'SelectField',
+  inheritAttrs: false,
   props: {
     value: {
       default: null,
@@ -36,7 +46,7 @@ export default {
     },
     clearable: {
       type: Boolean,
-      default: false,
+      default: true,
     },
     dataArray: {
       type: Array,
@@ -83,25 +93,34 @@ export default {
       type: Number,
       default: 45,
     },
-    hasBorder: {
-      type: Boolean,
-      default: true,
+    inputAlign: {
+      type: String,
+      default: 'right',
     },
     showIcon: {
       type: Boolean,
       default: true,
     },
+    leftIcon: {
+      type: String,
+      default: null,
+    },
     rightIcon: {
       type: String,
-      default: '',
+      default: require('./right-gray@2x.png'),
     },
   },
   data () {
     return {
-      Icon: require('./right-gray@2x.png'),
     }
   },
   computed: {
+    hasLeftIcon () {
+      return !!this.$slots['left-icon']
+    },
+    showLeftIcon () {
+      return !!(this.leftIcon || this.$slots['left-icon'])
+    },
     codeName () {
       let vm = this
       let name
@@ -146,9 +165,6 @@ export default {
         return this.itemHeight + 'px'
       }
     },
-    selectIcon () {
-      return this.rightIcon ? this.rightIcon : this.Icon
-    },
     selectPlaceholder () {
       return this.placeholder ? this.placeholder : '请选择' + this.label
     },
@@ -194,67 +210,11 @@ export default {
 
 <style lang="less">
   .h-select{
-    width: 100%;
-    display: flex;
-    align-items: center;
-    border: none;
-    padding: 0 0.3rem 0 0.3rem;
     background-color: #fff;
     position: relative;
-    &:after{
-      content: " ";
-      position: absolute;
-      left: 0.3rem;
-      bottom: 0;
-      right: 0;
-      height: 1px;  /*no*/
-      border-bottom: 1px solid rgba(0,0,0,.1);  /*no*/
-      color: rgba(0,0,0,.1);
-      transform-origin: 0 100%;
-      transform: scaleY(0.5);
-    }
-    /*.select-border{
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      padding: 0 0.3rem 0 0;
-      min-height: 45px;
-    }*/
-    .name{
-      line-height: 0.5rem;
-      font-size: 14px;
-      color: #333;
-    }
-    .required {
-      display: flex;
-      align-items: center;
-    }
-    .required::after {
-      content: '*';
-      color: #D24E4E;
-      //height: 0.16rem;
-      padding-top: 0.08rem;
-      margin-left: 0.05rem;
-    }
-    .select-content{
-      height: 100%;
-      width: 100%;
-      font-size: 14px;
-      color: #666;
-      display: flex;
-      align-items: center;
-      input{
-        font-size: 14px;
-        color: #666;
-        line-height: 0.4rem;
-        width: 100%;
-        text-align: right;
-        border: none;
-      }
-      .icon{
+    .field-value{
+      .date-field-icon{
         height: 0.25rem;
-        margin-left: 4px
       }
     }
   }

src/pages/home.vue

@@ -14,7 +14,7 @@
     <h-content>
       <list-item>
         <item>
-          <section slot="name">姓名</section>
+          <section slot="name" class="required">姓名</section>
           <input slot="content" type="text">
         </item>
         <item>
@@ -67,13 +67,15 @@
         clearable error
         required label="年龄"/>
       <h-field
-        v-model="phone"
+        v-model="phone" :left-icon="leftIcon"
         type="tel"
         required label="手机号"/>
       <h-field
         v-model="password"
         type="password"
-        required label="密码"/>
+        required label="密码">
+        <i slot="left-icon" class="field-icon field-right-icon icon ion-close-circled"/>
+      </h-field>
       <h-field
         v-model="address" :autosize="true"
         type="textarea"
@@ -82,7 +84,7 @@
         error
         required label="通讯地址"/>
       <h-field
-        v-model="homeAddress" :left-icon="leftIcon"
+        v-model="homeAddress"
         :autosize="true"
         :word-limit="true" type="textarea" maxlength="50"
         inputAlign="left"