# tui-popup 弹层动画
介绍
弹层动画,过渡效果。
# 引入
# uni-app引入
第一种,手动引入(可全局引入)
import tuiPopup from "@/components/thorui/tui-popup/tui-popup.vue"
export default {
components:{
tuiPopup
}
}
第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)。
# uni-app版本平台差异说明
App-Nvue | App-vue | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ |
# 微信小程序引入(可在app.json中全局引入)
{
"usingComponents": {
"tui-popup": "/components/thorui/tui-popup/tui-popup"
}
}
# 代码演示
部分功能演示,具体可参考示例程序以及文档API。
基础使用
通过 duration
属性设置动画过渡时间,modeClass
属性设置动画效果,styles
属性设置组件样式,show
属性设置弹层显示隐藏。
<!--uni-app-->
<tui-popup :duration="500" :modeClass="mode" :styles="styles" :show="transShow" @click="onTap" @change="change">
<view class="tui-text">
<view>ThorUI文档地址:</view>
<view>https://thorui.cn/doc</view>
</view>
</tui-popup>
<!--微信小程序-->
<tui-popup duration="{{500}}" modeClass="{{mode}}" styles="{{styles}}" show="{{transShow}}" bindclick="onTap" bindchange="change">
<view class="tui-text">
<view>ThorUI文档地址:</view>
<view>https://thorui.cn/doc</view>
</view>
</tui-popup>
//data数据
{
show: false,
transShow: false,
mode: ['fade'],
styles: {
position: 'fixed',
bottom: 0,
top: 0,
left: 0,
right: 0,
display: 'flex',
'justify-content': 'center',
'align-items': 'center'
}
}
# Slots
名称 | 说明 |
---|---|
default | 弹层内容,自定义展示 |
# Props
参数 | 类型 | 说明 | 默认值 |
---|---|---|---|
show | Boolean | 控制弹层显示隐藏 | false |
modeClass | Array<String> | 过渡动画类型:fade,slide-top,slide-right,slide-bottom,slide-left,zoom-in,zoom-out | [ ] |
duration | Number | 动画过渡时间,单位ms | 300 |
styles | Object | 组件外层样式,同css样式 | { ... } |
属性styles默认值
{
position: 'fixed',
bottom: 0,
top: 0,
left: 0,
right: 0,
display: 'flex',
'justify-content': 'center',
'align-items': 'center'
}
# Events
事件名 | 说明 | 回调参数 |
---|---|---|
click | popup弹层点击时触发 | { detail : isShow 是否显示 } |
change | 动画切换时触发 | { detail : isShow 是否显示 } |
# 预览
请以移动端效果为准,touch事件目前尚未在PC端做兼容。
# 线上程序扫码预览
![]() | ![]() | ![]() |
---|---|---|
ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |