mand-mobile/components/tab-picker/demo/cases/demo1.vue at 06e4aafa6ebf0b6754b03b581ddbb242be6d3903 · didi/mand-mobile · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<template>
  <div class="md-example-child md-example-child-tab-picker md-example-child-tab-picker-0">
    <md-field title="地址">
      <md-field-item
        title="联系地址"
        arrow="arrow-right"
        @click="show = !show"
        placeholder="请选择联系地址"
        :content="addressStr"
        solid
      />
    </md-field>
    <md-tab-picker
      title="请选择"
      describe="请选择您所在的省份、城市、区县"
      large-radius
      :data="data"
      :extras-data="extrasData"
      v-model="show"
      @change="handleChange"
      @select="handleSelect"
    />
  </div>
</template>
<script>import {Field, FieldItem, TabPicker} from 'mand-mobile'
import data from 'mand-mobile/components/tab-picker/demo/data'

const extrasData = {
  subtitle: '热点城市',
  list: [
    {
      value: 'pk',
      label: '北京',
      icon: 'location',
      size: 'sm',
    },
    {
      value: 'cd',
      label: '成都市',
    },
    {
      value: 'jn',
      label: '金牛区',
      icon: 'location',
    },
    {
      value: 'jn2',
      label: '金牛区滴',
      icon: 'location',
    },
    {
      value: 'jn0',
      label: '金牛区滴',
      icon: 'location',
    },
    {
      value: 'jn3',
      label: '金牛滴',
      icon: 'location',
    },
    {
      value: 'jn5',
      label: '金牛滴',
    },
  ],
}

export default {
  name: 'tab-bar-demo',
  title: '快速选择区',
  titleEnUS: 'Quick block',
  /* DELETE */
  height: 550,
  /* DELETE */
  components: {
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [TabPicker.name]: TabPicker,
  },
  data() {
    return {
      show: false,
      address: [],
      data: data,
      extrasData: extrasData,
      defaultValue: ['pk'],
    }
  },
  computed: {
    addressStr() {
      return this.address.map(item => item.label).join(' ')
    },
  },
  methods: {
    handleChange(data) {
      console.log('demo1 change event', data)
      const {options} = data
      this.address = options
    },
    handleSelect(item) {
      console.log('demo1 select event', item)
    },
  },
}
</script>