```html
<div style="height: 1000px" class="demo-block" id="x-dialog-demo1">
  <lx-group>
    <lx-x-switch
      v-model="show"
      title="Toggle"
    />
  </lx-group>
  <lx-group style="padding-top: 300px">
    <lx-x-switch
      v-model="showNoScroll"
      title="背景不可滚动"
    />
  </lx-group>
  <lx-x-dialog
    v-model="show"
    class="dialog-demo"
    @on-hide="onHide"
  >
    <p class="dialog-title">
      I'm a bg scroll Dialog.
    </p>
    <div class="img-box">
      <img
        src="../assets/demo/dialog/01.jpg"
        style="max-width:100%"
      >
    </div>
    <span
      class="vux-close"
      @click="show=false"
    />
  </lx-x-dialog>
  <lx-x-dialog
    v-model="showNoScroll"
    class="dialog-demo"
    :scroll="false"
    @on-hide="onHide"
  >
    <p class="dialog-title">
      I'm a no scroll Dialog.
    </p>
    <div class="img-box">
      <img
        src="../assets/demo/dialog/01.jpg"
        style="max-width:100%"
      >
    </div>
    <span
      class="vux-close"
      @click="showNoScroll=false"
    />
  </lx-x-dialog>
</div>

<script>
// XDialog.md
new Vue({
  el: '#x-dialog-demo1',
  
  data: {
    show: false,
    showNoScroll: false
  },
  created () {
    setTimeout(() => {
      this.show = true
    }, 10)
  },
  methods: {
    onHide() {
      console.log(111111111111)
    }
  }
})
</script>

<style>
.dialog-demo .weui_dialog{
  border-radius: 8px;
  padding-bottom: 8px;
}
.dialog-demo .dialog-title {
  line-height: 30px;
  color: #666;
}
.dialog-demo .img-box {
  height: 350px;
  overflow: hidden;
}
.dialog-demo .vux-close {
  margin: 8px 0;
}
</style>
```