```html
<div class="demo-block" id="x-alert-demo1">
  <lx-group>
    <lx-x-switch
      v-model="show"
      title="Toggle"
    />
  </lx-group>
  <lx-x-alert
    v-model="show"
    title="congratulations"
    @on-show="onShow"
    @on-hide="onHide"
  >
    Message is sent successfully~
  </lx-x-alert>
  <lx-group title="以插件的方式调用">
    <lx-cell
      :title="'显示'"
      is-link
      @click.native="onChange()"
    />
    <lx-cell
      :title="'3秒后关闭'"
      is-link
      @click.native="showPluginAuto"
    />
  </lx-group>
</div>

<script>
// XAlert.md
new Vue({
  el: '#x-alert-demo1',
  
  data: {
    show: false,
    show1: false
  },
  create () {
    console.log('XAlert')
  },
  methods: {
    onHide () {
      console.log('on hide')
    },
    onShow () {
      console.log('on show')
    },
    onChange () {
      this.$cvux.alert.show({
        title: '9883246325',
        content: '确定这个是测试吗？',
        buttonText: '确定',
        onShow () {
          console.log('Plugin: I\'m showing')
        },
        onHide () {
          console.log('Plugin: I\'m hiding')
        }
      })
    },
    showPluginAuto() {
      this.$cvux.alert.show({
        title: '9883246325',
        content: '确定这个是测试吗？,3秒关闭',
        buttonText: '确定',
        autoCloseTime: 3000,
        onShow () {
          console.log('Plugin: I\'m showing')
        },
        onHide () {
          console.log('Plugin: I\'m hiding')
        }
      })
    }
  }
})
</script>
```