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


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

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

<script>
import { XAlert, Group, XSwitch, Cell } from '../components/_index'

export default {
  components: {
    XAlert,
    Group,
    XSwitch,
    Cell
  },
  data () {
    return {
      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>

```

#### Github Issue