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


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

``` html
<template>
  <div>
    <group>
      <x-switch
        v-model="show"
        title="Default popup"
      />
      <x-switch
        v-model="show1"
        title="Full popup"
      />
      <x-switch
        v-model="show2"
        title="with a Scroller"
      />
      <x-switch
        v-model="show3"
        title="Multi popup (first)"
      />
      <x-switch
        v-model="show5"
        title="Mask disable"
      />
      <x-switch
        v-model="show6"
        title="Popup address"
      />
    </group>
    <popup
      v-model="show"
      @on-hide="log('hide')"
      @on-show="log('show')"
    >
      <div class="popup0">
        <group>
          <x-switch
            v-model="show"
            title="Another Switcher"
          />
          <x-switch
            v-model="showToast"
            title="Show Toast"
          />
        </group>
      </div>
    </popup>
    <toast v-model="showToast">
      You did it!
    </toast>
    <popup
      v-model="show1"
      height="100%"
    >
      <div class="popup1">
        <group>
          <x-switch
            v-model="show1"
            title="Another Switcher"
          />
        </group>
      </div>
    </popup>
    <popup
      v-model="show2"
      height="200px"
      @on-first-show="resetScroller"
    >
      <scroller
        ref="scroller"
        height="100px"
        lock-x
        style="border:1px solid red;"
      >
        <div>
          <p
            v-for="i of 10"
            :key="i"
          >
            {{ i }}
          </p>
        </div>
      </scroller>
    </popup>
    <popup v-model="show3">
      <div class="popup2">
        <group>
          <x-switch
            v-model="show3"
            title="Multi Popup (first)"
          />
          <x-switch
            v-model="show4"
            title="Multi Popup (second)"
          />
        </group>
        this is the first popup
      </div>
    </popup>
    <popup v-model="show4">
      <div class="popup2">
        <group>
          <x-switch
            v-model="show4"
            title="Multi Popup (second)"
          />
        </group>
        this is the second popup
      </div>
    </popup>
    <popup
      v-model="show5"
      :hide-on-blur="false"
    >
      <div class="popup2">
        <group>
          <x-switch
            v-model="show5"
            title="Mask disable"
          />
        </group>
        The mask cannot be clicked!
      </div>
    </popup>
    <popup v-model="show6">
      <div class="popup1">
        <group>
          <x-switch
            v-model="show6"
            title="Popup address"
          />
        </group>
        <group>
          <x-address
            v-model="value6"
            :title="title6"
            :list="addressData"
            placeholder="请选择地址"
            inline-desc="可以设置placeholder"
          />
        </group>
      </div>
    </popup>
  </div>
</template>
<script>
import {
  Popup,
  Group,
  XSwitch,
  Scroller,
  Toast,
  XAddress
  // AddressChinaData
} from '../components/_index'
import { cvux as AddressChinaData } from 'city-data/lib/mobile'

export default {
  components: {
    Popup,
    Group,
    XSwitch,
    Scroller,
    Toast,
    XAddress
  },
  data() {
    return {
      addressData: AddressChinaData,
      show: false,
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      show6: false,
      title6: '默认空的',
      value6: [],
      showToast: false
    }
  },
  methods: {
    resetScroller() {
      this.$refs.scroller.reset()
    },
    log(str) {
      console.log(str)
    }
  }
}
</script>
<style>
.popup0 {
  padding-bottom: 15px;
  height: 200px;
}

.popup1 {
  width: 100%;
  height: 100%;
}

.popup2 {
  padding-bottom: 15px;
  height: 400px;
}
</style>

```

#### Github Issue