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


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

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

<script>
import { Toast, Group, XSwitch, Cell } from '../components/_index'
export default {
  components: {
    Toast,
    Group,
    XSwitch,
    Cell
  },
  data () {
    return {
      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>

```

#### Github Issue