[toc] # 3.8 彈幕組件開發(一) - 輸入框彈出層 ## 3.8.1 獲取到PopUp彈出層組件 1. 使用創建hello uni-app項目 2. 在自己項目的components目錄下創建uni-ui文件夾 3. 復制uni-app項目里面components目錄內的PopUp組件和uni-transition組件,到自己項目的components目錄下的uni-ui文件夾內  ## 3.8.2 使用PopUp彈出層組件實現評論的彈出框 參考地址: https://ext.dcloud.net.cn/plugin?id=329 1. 引入PopUp彈出層組件,并進行注冊與使用 2. 實現輸入框布局 3. 實現點擊`說點什么`顯示彈出層組件 4. 實現獲取輸入框輸入的值 5. 實現點擊發送按鈕關閉彈出層 ``` <template> <view class="page"> <!-- 直播內容 --> <video class="flex-1" src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" autoplay :controls="false"></video> <!-- 頭部 --> <view style="position: fixed; left: 0; right: 0;" :style="{top : `${statusBarHeight}px`}"> <!-- 個人信息|觀看詳細信息 --> <view class="px-2 flex justify-between" style="height:80rpx;"> <!-- 個人信息 --> <view style="width: 325rpx; background-color: rgba(0,0,0,0.4);" class="flex align-center rounded-circle"> <view class="p"> <image src="../../static/tabbar/min.png" style="width: 70rpx; height: 70rpx;" class="rounded-circle"></image> </view> <!-- 昵稱與瀏覽量 --> <view class="flex-1 flex flex-column justify-center"> <text class="text-white font">昵稱</text> <text class="text-white font-sm">100</text> </view> <!-- 關注按鈕 --> <view class="rounded-circle flex align-center bg-danger justify-center" style="width: 70rpx; height: 70rpx;"> <text class="text-white">+</text> </view> </view> <!-- 觀看情況 --> <view style="width: 325rpx; background-color: rgba(0,0,0,0.4);" class="flex align-center rounded-circle"> <!-- 觀看的用戶 --> <scroll-view scroll-x="true" class="flex-1 flex"> <view class="p" v-for="(item,index) in 20" :key="index"> <image src="../../static/tabbar/min.png" style="width: 70rpx; height: 70rpx;" class="rounded-circle"></image> </view> </scroll-view> <!-- 觀看人數 --> <view class="rounded-circle flex align-center bg-danger justify-center" style="width: 70rpx; height: 70rpx;"> <text class="text-white font-sm">1000</text> </view> </view> </view> <!--金幣--> <view class="px-2 my-2" style="height: 80rpx;"> <view style="width: 325rpx; background-color: rgba(0,0,0,0.4);" class="flex align-center rounded-circle"> <view class="p"> <text class="text-warning">金幣</text> </view> <view class="flex-1 flex flex-column justify-center"> <text class="text-white font">100</text> </view> </view> </view> <!-- 禮物 --> <f-gift ref="gift"></f-gift> </view> <!-- 彈幕 --> <view class="bg-warning" style="position: fixed; bottom:120rpx; left: 0; right:0; width: 520rpx; height: 300rpx;"></view> <!-- 底部評論..等 --> <view class="position-fixed right-0 bottom-0 left-0 flex align-center justify-between" style="height: 120rpx;"> <view class="px-2" > <view @click="openInput" style="height:80rpx;border-radius: 100rpx;background-color: rgba(255,255,255,0.12);" class="flex justify-center px-3 align-center"> <text class="text-white font">說點什么...</text> </view> </view> <view class="flex align-center"> <view style="height:80rpx; width: 80rpx; background-color: rgba(255,255,255,0.12);" class="flex mr-1 justify-center rounded-circle align-center"> <text class="iconfont text-white" style="font-size: 40px; ">&#xe633;</text> </view> <view style="height:80rpx; width: 80rpx;" class="flex mr-1 justify-center rounded-circle align-center bg-warning"> <text class="iconfont">&#xe67c;</text> </view> <view style="height:80rpx; width: 80rpx; background-color: rgba(255,255,255,0.12);" class="flex mr-1 justify-center rounded-circle align-center"> <text class="iconfont text-white">&#xe7cd;</text> </view> <view style="height:80rpx; width: 80rpx; background-color: rgba(255,255,255,0.12);" class="flex mr-1 justify-center rounded-circle align-center"> <text class="iconfont text-white">&#xe607;</text> </view> </view> </view> <!-- 輸入框彈出層 --> <uni-popup type="bottom" ref="input"> <view class="bg-white flex align-center px-3" style="height: 120rpx;"> <input placeholder="說點什么呢..." v-model="content" type="text" style="height: 80rpx;" class="border rounded flex-1 px-3 font-md"> <view class="bg-main flex ml-3 align-center py-2 rounded px-2 justify-center" @click="submit"> <text class="font text-white">發送</text> </view> </view> </uni-popup> </view> </template> <script> import fGift from "../../components/live/f-gift.vue" import uniPopup from "../../components/uni-ui/uni-popup/uni-popup.vue" export default { data(){ return { statusBarHeight : 0, content : "" } }, components: { fGift, uniPopup }, onLoad(){ //獲取通知欄的高度 let res = uni.getSystemInfoSync(); this.statusBarHeight = res.statusBarHeight; }, mounted(){ setInterval(()=>{ this.$refs.gift.send({ username : "發送人", avatar : "", gift_name : "蛋糕", gift_image : "/static/gift/3.png", num : 1 }) },3000) }, methods:{ openInput(){ this.$refs.input.open() }, submit(){ this.$refs.input.close() } } } </script> <style> .page{ flex : 1; } </style> ```