Field 区域列表组合
区域列表垂直排列,显示当前的内容、状态和可进行的操作
引入
import { Field, FieldItem } from 'mand-mobile'
Vue.component(Field.name, Field)
Vue.component(FieldItem.name, FieldItem)
代码演示
基本
<template>
<div class="md-example-child md-example-child-field md-example-child-field-0">
<md-field title="单个条目">
<md-field-item
name="item0"
title="可点击条目"
arrow="arrow-right"
solid
@click="onClick">
</md-field-item>
</md-field>
<md-field title="单个条目">
<md-field-item
name="item1"
title="禁用条目"
arrow="arrow-right"
disabled
@click="onClick">
</md-field-item>
</md-field>
<md-field title="单个条目">
<md-field-item
name="item2"
title="标题"
brief="展示摘要描述"
arrow="arrow-right"
@click="onClick">
</md-field-item>
</md-field>
</div>
</template>
<script>
import {Field, FieldItem, Dialog} from 'mand-mobile'
export default {
name: 'field-demo',
components: {
[Field.name]: Field,
[FieldItem.name]: FieldItem,
},
methods: {
onClick(name) {
Dialog.alert({
content: `点击了 ${name}`,
})
},
},
}
</script>
<style lang="stylus" scoped>
.md-example-child-field-0
.md-field
margin-bottom 20px
.md-input-item
background #FFF
padding 0 32px
.strong-tip
font-size 24px
color color-text-highlight
</style>
包含内容
<template>
<div class="md-example-child md-example-child-field md-example-child-field-2">
<md-field title="包含内容的条目">
<md-field-item
name="item0"
title="短标题"
arrow="arrow-right"
value="内容靠左展示"
align="left"
@click="onClick">
</md-field-item>
<md-field-item
name="item1"
title="一个不换行的长标题"
arrow="arrow-right"
value="内容居中展示"
align="center"
@click="onClick">
</md-field-item>
<md-field-item
name="item2"
title="一个换行的长标题"
arrow="arrow-right"
value="内容靠右展示"
solid
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, Icon, Dialog} from 'mand-mobile'
import '@examples/assets/images/bank-zs.svg'
export default {
name: 'field-demo',
components: {
[Field.name]: Field,
[FieldItem.name]: FieldItem,
[InputItem.name]: InputItem,
[Icon.name]: Icon,
},
methods: {
onClick(name) {
Dialog.alert({
content: `点击了 ${name}`,
})
},
},
}
</script>
<style lang="stylus" scoped>
.md-example-child-field-2
.md-input-item
background #FFF
padding 0 32px
.strong-tip
font-size 24px
color color-text-highlight
</style>
多个条目
<template>
<div class="md-example-child md-example-child-field md-example-child-field-1">
<md-field title="包含多个条目的列表">
<md-field-item
name="item0"
title="普通条目"
arrow="arrow-right"
@click="onClick">
</md-field-item>
<md-field-item
name="item1"
title="标题"
brief="展示摘要描述,摘要较长时会自动换行"
arrow="arrow-right"
solid
@click="onClick">
</md-field-item>
<md-field-item
name="item2"
title="使用switch"
align="right">
<md-switch name="switch0" v-model="switchActive"></md-switch>
</md-field-item>
<md-field-item
name="item3"
title="输入框"
customized
align="center">
<md-input-item
ref="input1"
placeholder="请输入..."
></md-input-item>
</md-field-item>
</md-field>
</div>
</template>
<script>
import {Field, FieldItem, Dialog, InputItem, Switch} from 'mand-mobile'
export default {
name: 'field-demo',
components: {
[Field.name]: Field,
[FieldItem.name]: FieldItem,
[InputItem.name]: InputItem,
[Switch.name]: Switch,
},
data() {
return {
switchActive: false,
}
},
methods: {
onClick(name) {
Dialog.alert({
content: `点击了 ${name}`,
})
},
},
}
</script>
<style lang="stylus" scoped>
.md-example-child-field-1
.md-input-item
background #FFF
padding 0 32px
.strong-tip
font-size 24px
color color-text-highlight
</style>
API
Field Props
属性 | 说明 | 类型 | 默认值 | 备注 |
---|---|---|---|---|
title | 标题 | String | - | - |
FieldItem Props
属性 | 说明 | 类型 | 默认值 | 备注 |
---|---|---|---|---|
name | 标识 | Number/String | -1 | - |
title | 标题 | String | - | - |
brief | 子标题 | String | - | - |
disabled | 是否禁用 | Boolean | true | - |
arrow | 箭头名称 | String | - | arrow-up , arrow-right , arrow-down , arrow-left |
customized | 内容是否自定义 | Boolean | 是否有slot | - |
align | 自定义内容时,内容位置 | String | left | left , right , center |
value | 内容 | String | - | - |
solid | 是否固定标题宽度,超出会自动换行 | Boolean | false | - |
FieldItem Slots
default
内容默认插槽
left
标题左侧插槽 1.4.0+
right
内容右侧插槽 1.4.0+
FieldItem Events
@click(name)
点击事件
属性 | 说明 | 类型 |
---|---|---|
name | fieldItem标识 | Number/String |