uni-app 是一個(gè)使用 Vue.js 開發(fā)所有前端應(yīng)用的框架脚囊，開發(fā)者編寫一套代碼共缕，可發(fā)布到iOS徐紧、Android熟呛、H5宽档、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘）等多個(gè)平臺(tái)
uni-ui是DCloud提供的一個(gè)跨端ui庫，它是基于vue組件的惰拱、flex布局的、無dom的跨全端ui框架啊送。uni-ui不包括基礎(chǔ)組件偿短，它是基礎(chǔ)組件的補(bǔ)充。
我在使用uni-ui的組件時(shí)馋没，碰到了文檔bug的坑昔逗，折騰了好久。以popup為例篷朵，記錄來一下勾怒。
uniapp的官網(wǎng)會(huì)把組件地址指向這里https://ext.dcloud.net.cn/plugin?id=329。 但這個(gè)文檔有問題声旺。
以github為準(zhǔn)：https://github.com/dcloudio/uni-ui笔链。但github也會(huì)跳轉(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è)引用的列表
在這里找到相應(yīng)的路徑
import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup'
簡便寫法，但是會(huì)引入更多東西：
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的樣式：
<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)閉彈框。可以用定時(shí)器來自動(dòng)關(guān)閉：
openHi(){
setTimeout(() => {
this.$refs.finish.close()
}, 2000)
this.$refs.popupHi.open()
}
.
