Mand Mobile

Field 区域列表组合

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

引入

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

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

代码演示

API

Field Props

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

TIP

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

export default {
  name: 'your-component',

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

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

Field Slots

default

内容默认插槽

页眉内容插槽

action

页眉操作区域插槽

页脚内容插槽

FieldItem Props

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

FieldItem Events

@click(event)

非禁用状态下的点击事件

FieldItem Slots

default

内容默认插槽

left

起始区域插槽

末尾区域插槽

children

额外内容插槽