Field 区域列表组合

Scan me!

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

引入

  1. import { Field, FieldItem } from 'mand-mobile'
  2. Vue.component(Field.name, Field)
  3. 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>
  32. <script>
  33. import {Field, FieldItem, Dialog} from 'mand-mobile'
  34. export default {
  35. name: 'field-demo',
  36. components: {
  37. [Field.name]: Field,
  38. [FieldItem.name]: FieldItem,
  39. },
  40. methods: {
  41. onClick(name) {
  42. Dialog.alert({
  43. content: `点击了 ${name}`,
  44. })
  45. },
  46. },
  47. }
  48. </script>
  49. <style lang="stylus" scoped>
  50. .md-example-child-field-0
  51. .md-field
  52. margin-bottom 20px
  53. .md-input-item
  54. background #FFF
  55. padding 0 32px
  56. .strong-tip
  57. font-size 24px
  58. color color-text-highlight
  59. </style>

包含内容

  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>
  43. <script>
  44. import {Field, FieldItem, InputItem, Icon, Dialog} from 'mand-mobile'
  45. import '@examples/assets/images/bank-zs.svg'
  46. export default {
  47. name: 'field-demo',
  48. components: {
  49. [Field.name]: Field,
  50. [FieldItem.name]: FieldItem,
  51. [InputItem.name]: InputItem,
  52. [Icon.name]: Icon,
  53. },
  54. methods: {
  55. onClick(name) {
  56. Dialog.alert({
  57. content: `点击了 ${name}`,
  58. })
  59. },
  60. },
  61. }
  62. </script>
  63. <style lang="stylus" scoped>
  64. .md-example-child-field-2
  65. .md-input-item
  66. background #FFF
  67. padding 0 32px
  68. .strong-tip
  69. font-size 24px
  70. color color-text-highlight
  71. </style>

多个条目

  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>
  37. <script>
  38. import {Field, FieldItem, Dialog, InputItem, Switch} from 'mand-mobile'
  39. export default {
  40. name: 'field-demo',
  41. components: {
  42. [Field.name]: Field,
  43. [FieldItem.name]: FieldItem,
  44. [InputItem.name]: InputItem,
  45. [Switch.name]: Switch,
  46. },
  47. data() {
  48. return {
  49. switchActive: false,
  50. }
  51. },
  52. methods: {
  53. onClick(name) {
  54. Dialog.alert({
  55. content: `点击了 ${name}`,
  56. })
  57. },
  58. },
  59. }
  60. </script>
  61. <style lang="stylus" scoped>
  62. .md-example-child-field-1
  63. .md-input-item
  64. background #FFF
  65. padding 0 32px
  66. .strong-tip
  67. font-size 24px
  68. color color-text-highlight
  69. </style>

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