Vuejs uniapp Popup弹框使用教程

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也会跳转回那个网站,死循环。我记录一下正确过程。

安装

1
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()

1
2
3
4
5
6
7
8
<button @click="openHi">打开弹窗</button>
<uni-popup ref="popupHi" type="bottom">底部弹出 Popup</uni-popup>
methods:{
openHi(){
this.$refs.popupHi.open()
}
}

文档上显示的效果是弹框有白色背景,实际是没有的默认的,要自己写。

这个是一个居中弹框,居中显示是type="center",再在里填充了icon和文字,在写下popup-box的样式:

image.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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;
}

默认是点击随意一处后关闭弹框。可以用定时器来自动关闭:

1
2
3
4
5
6
openHi(){
setTimeout(() => {
this.$refs.finish.close()
}, 2000)
this.$refs.popupHi.open()
}

Exchange blogroll: http://laker.me/blog
Github:https://github.com/younglaker


Vuejs uniapp Popup弹框使用教程

本文原创自http://laker.me/blog,转载请注明出处,欢迎交换友链

如果本文对您有帮助,微信扫一扫,请我吃个鸡腿吧