feature(field):remove the restrictions of arrow & add left/right slot #…

…124
didi · Jun 29, 2018 · 19986d5 · 19986d5
1 parent ec88e6f
commit 19986d5
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 17 deletions.
diff --git a/components/field-item/index.vue b/components/field-item/index.vue
@@ -8,6 +8,10 @@
     :name="name"
     @click="$_onItemClick($event, name)">
     <div class="md-field-item-inner">
+      <!-- Left Control -->
+      <div class="md-field-item-extra" v-if="$slots.left">
+        <slot name="left"></slot>
+      </div>
       <div
         class="md-field-item-label"
         :class="[
@@ -19,6 +23,7 @@
           v-html="brief"
         ></div>
       </div>
+      <!-- Content -->
       <div
         v-if="customized"
         class="md-field-item-content"
@@ -31,11 +36,19 @@
         :class="[align]">
         {{value}}
       </div>
+      <!-- Right Control -->
+      <div
+        class="md-field-right"
+        v-if="$slots.right"
+      >
+        <slot name="right"></slot>
+      </div>
       <md-icon
-        v-if="arrow"
+        v-else-if="arrow"
         class="md-field-arrow"
         :name="arrow"
-        size="lg"></md-icon>
+        size="lg">
+      </md-icon>
     </div>
   </div>
 </template>
@@ -76,12 +89,6 @@ export default {
     arrow: {
       type: String,
       default: '',
-      validator(value) {
-        if (!value) {
-          return true
-        }
-        return ['arrow-up', 'arrow-right', 'arrow-down', 'arrow-left'].indexOf(value) > -1
-      },
     },
     customized: {
       type: Boolean,
@@ -121,7 +128,6 @@ export default {
   position relative
   box-sizing border-box
   width 100%
-  padding field-item-padding-v 0
   background-color field-item-bg-color
   color field-item-color
   &.disabled
@@ -142,6 +148,10 @@ export default {
   .md-field-item-inner
       display flex
       align-items center
+      padding field-item-padding-v 0
+  .md-field-item-extra
+    display flex
+    margin-right field-item-padding-v
   .md-field-item-label
     &.solid
       width input-item-title-width
@@ -167,4 +177,8 @@ export default {
     top 50%
     transform translate(42px, -50%)
     color field-item-icon-color
+  .md-field-right
+    display flex
+    align-items center
+    justify-content center
 </style>

diff --git a/components/field/README.en-US.md b/components/field/README.en-US.md
@@ -37,6 +37,17 @@ Vue.component(FieldItem.name, FieldItem)
 |value|content|String|-|-|
 |solid|the width of title is fixed or not|Boolean|false|-|
 
+#### FieldItem Slots
+
+##### default
+Default slot of content
+
+##### left
+Left slot of title <sup class="version-after">1.4.0+</sup>
+
+##### right
+Right slot of content <sup class="version-after">1.4.0+</sup>
+
 #### FieldItem Events
 
 ##### @click(name)

diff --git a/components/field/README.md b/components/field/README.md
@@ -37,6 +37,17 @@ Vue.component(FieldItem.name, FieldItem)
 |value|内容|String|-|-|
 |solid|是否固定标题宽度，超出会自动换行|Boolean|`false`|-|
 
+#### FieldItem Slots
+
+##### default
+内容默认插槽
+
+##### left
+标题左侧插槽 <sup class="version-after">1.4.0+</sup>
+
+##### right
+内容右侧插槽 <sup class="version-after">1.4.0+</sup>
+
 #### FieldItem Events
 
 ##### @click(name)

diff --git a/components/field/demo/cases/demo2.vue b/components/field/demo/cases/demo2.vue
@@ -26,11 +26,23 @@
         align="right"
         @click="onClick">
       </md-field-item>
+      <md-field-item
+        name="item2"
+        title="左右插槽"
+        arrow="arrow-right"
+        solid
+        align="right"
+        @click="onClick">
+        <div>内容展示</div>
+        <md-icon name="bank-zs" slot="left"></md-icon>
+        <md-icon name="circle-alert" slot="right"></md-icon>
+      </md-field-item>
     </md-field>
   </div>
 </template>
 
-<script>import {Field, FieldItem, InputItem, Dialog} from 'mand-mobile'
+<script>import {Field, FieldItem, InputItem, Icon, Dialog} from 'mand-mobile'
+import '@examples/assets/images/bank-zs.svg'
 
 export default {
   name: 'field-demo',
@@ -42,6 +54,7 @@ export default {
     [Field.name]: Field,
     [FieldItem.name]: FieldItem,
     [InputItem.name]: InputItem,
+    [Icon.name]: Icon,
   },
   methods: {
     onClick(name) {

diff --git a/components/field/index.vue b/components/field/index.vue
@@ -24,23 +24,25 @@
 <style lang="stylus">
 .md-field
   background-color field-item-bg-color
-  padding-left field-padding-h
-  padding-right field-padding-h
   .md-field-title
     display flex
     font-size field-title-font-size
     font-weight field-title-font-weight
     color field-title-color
     line-height 45px
-    padding field-padding-v 0 field-title-margin
+    padding field-padding-v field-padding-h field-title-margin field-padding-h
   .md-field-content
     display flex
     flex-direction column
-    .md-field-item, .md-input-item-container
+    .md-field-item, .md-input-item, .md-input-item.is-title-latent .md-input-item-msg
+      padding-left field-padding-h
+      padding-right field-padding-h
       box-sizing border-box
+    .md-field-item .md-field-item-inner, .md-input-item-container
       hairline(bottom, field-item-border-color)
-    .md-field-item:last-of-type::before
-      display none
+    .md-field-item:last-of-type
+      .md-field-item-inner::before
+        display none
     // .md-input-item:last-of-type .md-input-item-container::before
     //   display none
     .md-input-item.error .md-input-item-container

diff --git a/components/input-item/demo/index.vue b/components/input-item/demo/index.vue
@@ -15,6 +15,7 @@ import Demo0 from './cases/demo0'
 import Demo1 from './cases/demo1'
 import Demo2 from './cases/demo2'
 import Demo3 from './cases/demo3'
+import Demo4 from './cases/demo4'
 
-export default {...createDemoModule('input-item', [Demo0, Demo1, Demo2, Demo3])}
+export default {...createDemoModule('input-item', [Demo0, Demo1, Demo2, Demo3, Demo4])}
 </script>