title	preview
Field 区域列表组合	https://didi.github.io/mand-mobile/examples/#/field

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

引入

import { Field, FieldItem } from 'mand-mobile'

Vue.component(Field.name, Field)
Vue.component(FieldItem.name, FieldItem)

代码演示

API

Field Props

属性	说明	类型	默认值	备注
title	标题	String	-	-
brief	描述内容	String	-	-
disabled	是否禁用区域	Boolean	false	-
plain	镂空样式	Boolean	false	-

当使用了disabled选项时，其后代内容可以通过inject的方式获取祖先Field的实例属性。

export default {
  name: 'your-component',

  inject: {
    rootField: {
      from: 'rootField',
      default: () => ({})
    }
  },

  computed: {
    disabled() {
      return this.rootField.disabled
    }
  },
}

Field Slots

default

内容默认插槽

header

页眉内容插槽

action

页眉操作区域插槽

footer

页脚内容插槽

---

FieldItem Props

属性	说明	类型	默认值	备注
title	标题	String	-	-
content	描述内容	String	-	-
addon	附加文案	String	-	-
disabled	是否禁用项目	Boolean	false	-
solid	是否固定标题宽度，超出会自动换行	Boolean	false	-
arrow	动作箭头标识	Boolean	false	-

FieldItem Events

@click(event)

非禁用状态下的点击事件

FieldItem Slots

default

内容默认插槽

left

起始区域插槽

right

末尾区域插槽

children

额外内容插槽