Field 区域列表组合

Scan me!

区域列表垂直排列，显示当前的内容、状态和可进行的操作

引入

  1. import { Field, FieldItem } from 'mand-mobile'
  3. Vue.component(Field.name, Field)
  4. Vue.component(FieldItem.name, FieldItem)

代码演示

基本

  1. <template>
  2.   <div class="md-example-child md-example-child-field md-example-child-field-0">
  3.     <md-field title="单个条目">
  4.       <md-field-item
  5.         name="item0"
  6.         title="可点击条目"
  7.         arrow="arrow-right"
  8.         solid
  9.         @click="onClick">
  10.       </md-field-item>
  11.     </md-field>
  12.     <md-field title="单个条目">
  13.       <md-field-item
  14.         name="item1"
  15.         title="禁用条目"
  16.         arrow="arrow-right"
  17.         disabled
  18.         @click="onClick">
  19.       </md-field-item>
  20.     </md-field>
  21.     <md-field title="单个条目">
  22.       <md-field-item
  23.         name="item2"
  24.         title="标题"
  25.         brief="展示摘要描述"
  26.         arrow="arrow-right"
  27.         @click="onClick">
  28.       </md-field-item>
  29.     </md-field>
  30.   </div>
  31. </template>
  33. <script>
  34. import {Field, FieldItem, Dialog} from 'mand-mobile'
  36. export default {
  37.   name: 'field-demo',
  38.   components: {
  39.     [Field.name]: Field,
  40.     [FieldItem.name]: FieldItem,
  41.   },
  42.   methods: {
  43.     onClick(name) {
  44.       Dialog.alert({
  45.         content: `点击了 ${name}`,
  46.       })
  47.     },
  48.   },
  49. }
  51. </script>
  53. <style lang="stylus" scoped>
  54. .md-example-child-field-0
  55.   .md-field
  56.     margin-bottom 20px
  57.   .md-input-item
  58.     background #FFF
  59.     padding 0 32px
  60.   .strong-tip
  61.     font-size 24px
  62.     color color-text-highlight
  63. </style>
  64.

包含内容

  1. <template>
  2.   <div class="md-example-child md-example-child-field md-example-child-field-2">
  3.     <md-field title="包含内容的条目">
  4.       <md-field-item
  5.         name="item0"
  6.         title="短标题"
  7.         arrow="arrow-right"
  8.         value="内容靠左展示"
  9.         align="left"
  10.         @click="onClick">
  11.       </md-field-item>
  12.       <md-field-item
  13.         name="item1"
  14.         title="一个不换行的长标题"
  15.         arrow="arrow-right"
  16.         value="内容居中展示"
  17.         align="center"
  18.         @click="onClick">
  19.       </md-field-item>
  20.       <md-field-item
  21.         name="item2"
  22.         title="一个换行的长标题"
  23.         arrow="arrow-right"
  24.         value="内容靠右展示"
  25.         solid
  26.         align="right"
  27.         @click="onClick">
  28.       </md-field-item>
  29.       <md-field-item
  30.         name="item2"
  31.         title="左右插槽"
  32.         arrow="arrow-right"
  33.         solid
  34.         align="right"
  35.         @click="onClick">
  36.         <div>内容展示</div>
  37.         <md-icon name="bank-zs" slot="left"></md-icon>
  38.         <md-icon name="circle-alert" slot="right"></md-icon>
  39.       </md-field-item>
  40.     </md-field>
  41.   </div>
  42. </template>
  44. <script>
  45. import {Field, FieldItem, InputItem, Icon, Dialog} from 'mand-mobile'
  46. import '@examples/assets/images/bank-zs.svg'
  48. export default {
  49.   name: 'field-demo',
  50.   components: {
  51.     [Field.name]: Field,
  52.     [FieldItem.name]: FieldItem,
  53.     [InputItem.name]: InputItem,
  54.     [Icon.name]: Icon,
  55.   },
  56.   methods: {
  57.     onClick(name) {
  58.       Dialog.alert({
  59.         content: `点击了 ${name}`,
  60.       })
  61.     },
  62.   },
  63. }
  65. </script>
  67. <style lang="stylus" scoped>
  68. .md-example-child-field-2
  69.   .md-input-item
  70.     background #FFF
  71.     padding 0 32px
  72.   .strong-tip
  73.     font-size 24px
  74.     color color-text-highlight
  75. </style>
  76.

多个条目

  1. <template>
  2.   <div class="md-example-child md-example-child-field md-example-child-field-1">
  3.     <md-field title="包含多个条目的列表">
  4.       <md-field-item
  5.         name="item0"
  6.         title="普通条目"
  7.         arrow="arrow-right"
  8.         @click="onClick">
  9.       </md-field-item>
  10.       <md-field-item
  11.         name="item1"
  12.         title="标题"
  13.         brief="展示摘要描述，摘要较长时会自动换行"
  14.         arrow="arrow-right"
  15.         solid
  16.         @click="onClick">
  17.       </md-field-item>
  18.       <md-field-item
  19.         name="item2"
  20.         title="使用switch"
  21.         align="right">
  22.         <md-switch name="switch0" v-model="switchActive"></md-switch>
  23.       </md-field-item>
  24.       <md-field-item
  25.         name="item3"
  26.         title="输入框"
  27.         customized
  28.         align="center">
  29.         <md-input-item
  30.           ref="input1"
  31.           placeholder="请输入..."
  32.         ></md-input-item>
  33.       </md-field-item>
  34.     </md-field>
  35.   </div>
  36. </template>
  38. <script>
  39. import {Field, FieldItem, Dialog, InputItem, Switch} from 'mand-mobile'
  41. export default {
  42.   name: 'field-demo',
  43.   components: {
  44.     [Field.name]: Field,
  45.     [FieldItem.name]: FieldItem,
  46.     [InputItem.name]: InputItem,
  47.     [Switch.name]: Switch,
  48.   },
  49.   data() {
  50.     return {
  51.       switchActive: false,
  52.     }
  53.   },
  54.   methods: {
  55.     onClick(name) {
  56.       Dialog.alert({
  57.         content: `点击了 ${name}`,
  58.       })
  59.     },
  60.   },
  61. }
  63. </script>
  65. <style lang="stylus" scoped>
  66. .md-example-child-field-1
  67.   .md-input-item
  68.     background #FFF
  69.     padding 0 32px
  70.   .strong-tip
  71.     font-size 24px
  72.     color color-text-highlight
  73. </style>
  74.

API

Field Props

属性说明类型默认值备注
title标题String--

FieldItem Props

属性说明类型默认值备注
name标识Number/String-1-
title标题String--
brief子标题String--
disabled是否禁用Booleantrue-
arrow箭头名称String-arrow-up, arrow-right, arrow-down, arrow-left
customized内容是否自定义Boolean是否有slot-
align自定义内容时，内容位置Stringleftleft, right, center
value内容String--
solid是否固定标题宽度，超出会自动换行Booleanfalse-

FieldItem Slots

default

内容默认插槽

left

标题左侧插槽 1.4.0+

right

内容右侧插槽 1.4.0+

FieldItem Events

@click(name)

点击事件

属性说明类型
namefieldItem标识Number/String