简介:
- 全局组件无需引入
效果:
![](https://img.kancloud.cn/6c/24/6c241a2b44cf600613fa6ae8c92fec6a_351x215.png) ![](https://img.kancloud.cn/0a/4f/0a4ff214b6a6301d1d7106dd93f5a4d4_342x171.png) ![](https://img.kancloud.cn/5e/22/5e22ada105b85d21f3763edcf3085627_348x170.png) ![](https://img.kancloud.cn/74/d4/74d416130ade4c2982b59382139cb308_350x293.png) ![](https://img.kancloud.cn/bd/26/bd26f9b85d0fc89f35674b955ec7a254_359x185.png) ![](https://img.kancloud.cn/08/71/0871f9ddc9f730382446bd2412b7b2e4_340x176.png) ![](https://img.kancloud.cn/1b/34/1b3478c1406f3b590a01fd1b7ee43428_347x191.png) ![](https://img.kancloud.cn/6a/55/6a55c73d312cad4068f66ddd8ff575e4_351x241.png) ![](https://img.kancloud.cn/95/63/956386b7e4450af278a20ad8bcf2fa8f_348x220.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
}
}
}
```
参数:
| 参数 | 作用 | 类型 | 默认 | 是否必传 |
| --- | --- | --- | --- | --- |
| show | 是否显示 | boolean | false | false |
| width | 宽 | String | 84% | false |
| padding | 边距 | String | 40rpx 64rpx | false |
| radius | 圆角 | String | 24rpx | false |
| title | 标题 | String | "" | false |
| content | 内容 | String | "" | false |
| color | 内容字体颜色 | String | "" | false |
| size | 内容字体大小 rpx | Number | 28 | false |
| shape | 形状 circle, square | String | square | false |
| button | 按钮 | Array | [{text: "取消",type: "red",plain: true //是否空心}, {text: "确定",type: "red",plain: false}] | false |
| maskClosable | 点击遮罩 是否可关闭 | boolean | true | false |
| custom | 自定义弹窗内容 | boolean | false | false |
| fadein | 淡入效果,自定义弹框插入input输入框时传true | boolean | false | false |
事件:
| 事件名 | 作用 | 参数 |
| --- | --- |--- |
| @click | 点击按钮 | e |
| @cancel | 取消 | |
平台兼容性:
| android | H5 | IOS | 微信 | 百度 | 支付宝 | 字节跳动 |
| --- | --- | --- | --- | --- | --- |--- |--- |
| √ | √ | 待测试 | 待测试 | 待测试 | 待测试 |待测试 |
组件负责人:佘威