全局组件无需引入
效果:
![](https://img.kancloud.cn/f9/42/f942aa8ae108c7e9688a16b263999735_371x662.png) ![](https://img.kancloud.cn/f5/3d/f53daa2ebf3fb121b986d3f691c977cf_375x667.png) ![](https://img.kancloud.cn/d6/a2/d6a2b06816b84cf188ded2977b886847_375x667.png) ![](https://img.kancloud.cn/30/15/3015d4b97bddca85efdbc6b0d66a9ab4_375x667.png) ![](https://img.kancloud.cn/17/6f/176f0ecfc1db21a8acfc311523e1b920_375x667.png) ![](https://img.kancloud.cn/0a/9e/0a9e26120b134a483341f7de621dd337_375x667.png) ![](https://img.kancloud.cn/0e/63/0e634b3a4f9f8d5a2c7f68be3b35c36a_375x667.png) ![](https://img.kancloud.cn/e6/a4/e6a4059b5c9cfb6c4b6e36283b0ae9fe_375x667.png)
文件位置:
```
@/components/modal/modal
```
使用
```
<!-- 在对应页面使用 -->
<tui-modal :show="modal" @click="handleClick" title="提示" :content="modelContent"></tui-modal>
data () {
return {
modal:false,//模态弹窗状态
modelContent:'是否确定退出登录'
}
},
methods: {
handleClick(e){
if(e.index===1){
// 点击确定
}else{
//点击取消
this.modal = false
}
}
}
```
平台兼容性:
| android | H5 | IOS | 微信 | 百度 | 支付宝 | 字节跳动 |
| --- | --- | --- | --- | --- | --- |--- |--- |
| √ | √ | 待测试 | 待测试 | 待测试 | 待测试 |待测试 |
组件负责人:佘威