```html
<div class="demo-block" id="toast-demo1">
  <lx-group>
    <lx-x-switch
      v-model="show1"
      title="默认提示"
    />
    <lx-x-switch
      v-model="show2"
      title="文字提示"
    />
    <lx-x-switch
      v-model="show3"
      title="提示取消"
    />
    <lx-x-switch
      v-model="show4"
      title="提示禁止"
    />
    <lx-x-switch
      v-model="show5"
      title="设置出现时间1s"
    />
    <lx-x-switch
      v-model="show6"
      title="long text"
    />
  </lx-group>
  <lx-group title="使用插件形式">
    <lx-cell
      title="默认提示"
      is-link
      @click.native="showToast({text: '默认文本'})"
    />
    <lx-cell
      title="默认文本提示"
      is-link
      @click.native="showToast({type: 'text', text: '不带icon的默认文本提示'})"
    />
  </lx-group>
  <lx-toast v-model="show1">
    默认提示
  </lx-toast>
  <lx-toast
    v-model="show2"
    type="text"
  >
    处理成功
  </lx-toast>
  <lx-toast
    v-model="show3"
    type="cancel"
  >
    取消操作
  </lx-toast>
  <lx-toast
    v-model="show4"
    type="warn"
  >
    禁止操作
  </lx-toast>
  <lx-toast
    v-model="show5"
    :time="1000"
  >
    1s关闭
  </lx-toast>
  <lx-toast
    v-model="show6"
    type="text"
    width="20em"
  >
    Talk is cheap, show me the code.
  </lx-toast>
  <lx-group title="prop:text">
    <lx-x-switch
      v-model="show7"
      title="default"
    />
    <lx-x-switch
      v-model="show8"
      title="text"
    />
  </lx-group>
  <lx-toast
    v-model="show7"
    text="Hello World"
  />
  <lx-toast
    v-model="show8"
    type="text"
    text="Hello World"
  />
  <lx-group title="As a plugin(>=v0.1.3)">
    <lx-x-switch
      title="default"
      :value="show9"
      @on-change="onChange"
    />
  </lx-group>
</div>


<script>
// Toast.md
new Vue({
  el: '#toast-demo1',
  
  data: {
    show1: false,
    show2: false,
    show3: false,
    show4: false,
    show5: false,
    show6: false,
    show7: false,
    show8: false,
    show9: false
  },
  computed: {
    shows () {
      console.log('show1', this.show1)
      return this.show1
    }
  },
  methods: {
    // toast 关闭时触发的事件
    onHide (val) {
      console.log('toast close')
    },
    onChange (val) {
      const _this = this
      if (val) {
        this.$cvux.toast.show({
          text: 'Hello World',
          onShow () {
            console.log('Plugin: I\'m showing')
          },
          onHide () {
            console.log('Plugin: I\'m hiding')
            _this.show9 = false
          }
        })
      } else {
        this.$cvux.toast.hide()
      }
    },
    showToast(options) {
      this.$cvux.toast.show(options)
    }
  }
})
</script>
```