[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> ```