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

安装

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的样式：

image.png

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

.