vuejs uni-app Popup弹框使用教程
2020-03-07 本文已影响0人
younglaker
uni-app
是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台
uni-ui是DCloud提供的一个跨端ui库,它是基于vue组件的、flex布局的、无dom的跨全端ui框架。uni-ui不包括基础组件,它是基础组件的补充。
我在使用uni-ui的组件时,碰到了文档bug的坑,折腾了好久。以popup为例,记录来一下。
uniapp的官网会把组件地址指向这里https://ext.dcloud.net.cn/plugin?id=329。 但这个文档有问题。
以github为准:https://github.com/dcloudio/uni-ui。但github也会跳转回那个网站,死循环。我记录一下正确过程。
安装
npm install @dcloudio/uni-ui --save
import
文档写的import uniPopup from "@/components/uni-popup/uni-popup.vue"
是错的
看github有个引用的列表
image.png在这里找到相应的路径
import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup'
简便写法,但是会引入更多东西:
import {uniPopup} from '@dcloudio/uni-ui'
可以配置Tree shaking,在打包的时候消除无用代码(dead code)的方式
配置Tree Shaking来减少JavaScript的打包体积
使用
通过ref来调用弹框显示、隐藏 this.$refs.popupHi.open()
<button @click="openHi">打开弹窗</button>
<uni-popup ref="popupHi" type="bottom">底部弹出 Popup</uni-popup>
methods:{
openHi(){
this.$refs.popupHi.open()
}
}
文档上显示的效果是弹框有白色背景,实际是没有的默认的,要自己写。
这个是一个居中弹框,居中显示是type="center"
,再在<uni-popup>里填充了icon和文字,在写下popup-box的样式:
<uni-popup class="finish-popup" ref="finish" type="center">
<view class="popup-box">
<uni-icons type="checkmarkempty" size="60"></uni-icons>
<view class="txt">恭喜完成阅读</view>
</view>
</uni-popup>
.popup-box {
text-align: center;
background-color: #fff;
padding: 30rpx;
border-radius: 10rpx;
font-size: 28rpx;
}
默认是点击随意一处后关闭弹框。可以用定时器来自动关闭:
openHi(){
setTimeout(() => {
this.$refs.finish.close()
}, 2000)
this.$refs.popupHi.open()
}
.