---
nav: default
---
### PopupPicker
<img width="100" src="http://qr.topscan.com/api.php?text=demo%2F%23%2Fcomponent%2Fpopup-picker"/>
<a href="demo/#/component/popup-picker" target="_blank" style="font-size:12px;color:#888;">demo 原始链接：demo/#/component/popup-picker</a>


---
#### 演示
<div style="width:377px;height:667px;display:inline-block;border:1px dashed #ececec;border-radius:5px;overflow:hidden;">
<iframe src="demo/#/component/popup-picker" width="375" height="667" border="0" frameborder="0"></iframe>
</div>
#### demo 代码

``` html
<template>
  <div>
    <group title="single column">
      <popup-picker
        v-model="value1"
        :title="title1"
        :data="list1"
        @on-show="onShow"
        @on-hide="onHide"
      />
      <popup-picker
        v-model="value1"
        :title="'一列显示name值'"
        :data="listName"
        :columns="1"
        show-name
        @on-show="onShow"
        @on-hide="onHide"
      />
    </group>
    <br>
    <div class="picker-buttons">
      <x-button
        type="primary"
        @click.native="changeList10"
      >
        重新赋值列表
      </x-button>
      <x-button
        type="primary"
        @click.native="changeList11"
      >
        push方式更改列表
      </x-button>
    </div>
    <group title="double columns">
      <popup-picker
        v-model="value2"
        :title="title2"
        :data="list2"
      />
    </group>
    <br>

    <group title="chained columns">
      <popup-picker
        ref="picker3"
        v-model="value3"
        :title="title3"
        :data="list3"
        :columns="3"
      />
      <cell
        title="获取值对应的文字"
        :value="$refs.picker3&&$refs.picker3.getNameValues()"
      />
      <popup-picker
        v-model="value4"
        :title="title4"
        :data="list3"
        :columns="3"
        show-name
      />
    </group>

    <br>
    <div class="picker-buttons">
      <x-button
        type="primary"
        @click="changeList21"
      >
        push方式更改列表
      </x-button>
    </div>

    <br>
    <divider>Control the visibility of popup-picker</divider>
    <div style="margin: 0 15px;">
      <x-button
        type="primary"
        @click="showPopupPicker = true"
      >
        Show PopupPicker. value: {{ JSON.stringify(value5) }}
      </x-button>
    </div>
    <group>
      <popup-picker
        v-model="value5"
        :show="showPopupPicker"
        :show-cell="false"
        title="TEST"
        :data="[['1', '2', '3', '4', '5']]"
      />
    </group>

    <br>
    <group title="隐藏时不影响其他popup-picker的mask">
      <x-switch
        v-model="switch6"
        title="ishide popup-picker"
      />
      <popup-picker
        v-if="!switch6"
        v-model="value6"
        :show="showPopupPicker"
        title="显示值"
        :data="['我不会影响遮罩层'.split('')]"
      />
    </group>

    <br>
    <br>
  </div>
</template>

<script>
import { PopupPicker, Group, Cell, XButton, Divider, XSwitch } from '../components/_index'

export default {
  components: {
    PopupPicker,
    Group,
    XButton,
    Divider,
    Cell,
    XSwitch
  },
  data () {
    return {
      title1: '手机机型',
      title2: '详细机型',
      title3: '联动显示值',
      title4: '联动显示文字',
      list1: [['小米', 'iPhone', '华为', '情怀', '三星', '其他', '不告诉你']],
      list2: [
        ['小米', 'iPhone', '华为', '情怀', '三星', '其他', '不告诉你'],
        ['小米1', 'iPhone2', '华为3', '情怀4', '三星5', '其他6', '不告诉你7']
      ],
      list3: [
        {
          name: '中国',
          value: 'china',
          parent: 0
        }, {
          name: '美国',
          value: 'USA',
          parent: 0
        }, {
          name: '广东',
          value: 'china001',
          parent: 'china'
        }, {
          name: '广西',
          value: 'china002',
          parent: 'china'
        }, {
          name: '美国001',
          value: 'usa001',
          parent: 'USA'
        }, {
          name: '美国002',
          value: 'usa002',
          parent: 'USA'
        }, {
          name: '广州',
          value: 'gz',
          parent: 'china001'
        }, {
          name: '深圳',
          value: 'sz',
          parent: 'china001'
        }, {
          name: '广西001',
          value: 'gx001',
          parent: 'china002'
        }, {
          name: '广西002',
          value: 'gx002',
          parent: 'china002'
        }, {
          name: '美国001_001',
          value: '0003',
          parent: 'usa001'
        }, {
          name: '美国001_002',
          value: '0004',
          parent: 'usa001'
        }, {
          name: '美国002_001',
          value: '0005',
          parent: 'usa002'
        }, {
          name: '美国002_002',
          value: '0006',
          parent: 'usa002'
        }
      ],
      listName: [
        {value: '1', name: '111'},
        {value: '2', name: '222'},
        {value: '3', name: '3333'}
      ],
      value1: ['iPhone'],
      value2: ['iPhone', '华为3'],
      value3: [],
      value4: [],
      showPopupPicker: false,
      value5: ['2'],
      switch6: false,
      value6: []
    }
  },
  methods: {
    changeList10 () {
      this.list1 = [['小米1', 'iPhone1', '华为1', '情怀1', '三星1', '其他1', '不告诉你1']]
    },
    changeList11 () {
      this.list1[0].push('我是push条目')
    },
    changeList20 () {

    },
    changeList21 () {
      this.list3.push({
        name: '美国002_007',
        value: '0007',
        parent: 'usa002'
      })
    },
    onShow () {
      console.log('on show')
    },
    onHide (type) {
      console.log('on hide', type)
    }
  }
}
</script>

<style scoped lang="less">
@import '../styles/cui/widget/cui_cell/cui_cell_global';
.picker-buttons {
  margin: 0 15/@w;
}
</style>

```

#### Github Issue