uni-app 是一個(gè)使用 Vue.js 開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、H5、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘）等多個(gè)平臺

uni-ui是DCloud提供的一個(gè)跨端ui庫，它是基于vue組件的、flex布局的、無dom的跨全端ui框架。uni-ui不包括基礎(chǔ)組件，它是基礎(chǔ)組件的補(bǔ)充。

我在使用uni-ui的組件時(shí)，碰到了文檔bug的坑，折騰了好久。以popup為例，記錄來一下。

uniapp的官網(wǎng)會把組件地址指向這里https://ext.dcloud.net.cn/plugin?id=329。 但這個(gè)文檔有問題。

以github為準(zhǔn)：https://github.com/dcloudio/uni-ui。但github也會跳轉(zhuǎn)回那個(gè)網(wǎng)站，死循環(huán)。我記錄一下正確過程。

安裝

npm install @dcloudio/uni-ui  --save

import

文檔寫的import uniPopup from "@/components/uni-popup/uni-popup.vue" 是錯(cuò)的

看github有個(gè)引用的列表

image.png

在這里找到相應(yīng)的路徑

import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup'

簡便寫法，但是會引入更多東西：

import {uniPopup} from '@dcloudio/uni-ui'

可以配置Tree shaking，在打包的時(shí)候消除無用代碼(dead code)的方式
配置Tree Shaking來減少JavaScript的打包體積

使用

通過ref來調(diào)用彈框顯示、隱藏 this.$refs.popupHi.open()

<button @click="openHi">打開彈窗</button>
<uni-popup ref="popupHi" type="bottom">底部彈出 Popup</uni-popup>

  methods:{
     openHi(){
        this.$refs.popupHi.open()
     }
  }

文檔上顯示的效果是彈框有白色背景，實(shí)際是沒有的默認(rèn)的，要自己寫。

這個(gè)是一個(gè)居中彈框，居中顯示是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;
  }

默認(rèn)是點(diǎn)擊隨意一處后關(guān)閉彈框?？梢杂枚〞r(shí)器來自動關(guān)閉：

 openHi(){
      setTimeout(() => {
        this.$refs.finish.close()
      }, 2000)
      this.$refs.popupHi.open()
 }

.