企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
简介: - 全局组件无需引入 效果: ![](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 | 微信 | 百度 | 支付宝 | 字节跳动 | | --- | --- | --- | --- | --- | --- |--- |--- | | √ | √ | 待测试 | 待测试 | 待测试 | 待测试 |待测试 | 组件负责人:佘威