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

<script>
// Popup.md
// import { cvux as AddressChinaData } from 'city-data/lib/mobile'
const AddressChinaData = window.cvux.default.static.AddressChinaData
new Vue({
  el: '#popup-demo1',
  data: {
    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>
```