<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??碼云GVP開源項目 12k star Uniapp+ElementUI 功能強大 支持多語言、二開方便! 廣告
                [toc] # 3.12 送禮物彈框組件(二) - 功能 ## 3.12.1 實現關閉送禮物彈框效果 ``` <view style="height: 100rpx;" class="flex justify-between align-center"> <text class="text-main font-md ml-3">禮物</text> <view @click="closeGift" style="height:100rpx; width: 100rpx;" class="flex justify-center align-center"> <text class="iconfont">&#xe607;</text> </view> </view> //關閉送禮物彈出層 closeGift(){ this.$refs.giftPopup.close() }, ``` ## 3.12.3 創建禮物的模擬數據 1. 在項目的根目錄下創建demo文件夾 2. 在demo文件夾內創建gift.js文件 3. 在gift.js文件內寫模擬的禮物數據 ``` export default [{ "image": "/static/gift/1.png", "id": 1, "name": "雞蛋", "coin": 1 }, { "image": "/static/gift/2.png", "id": 2, "name": "666", "coin": 2 }, { "image": "/static/gift/3.png", "id": 3, "name": "雪糕", "coin": 3 }, { "image": "/static/gift/4.png", "id": 4, "name": "龍蝦", "coin": 4 }, { "image": "/static/gift/5.png", "id": 5, "name": "精靈球", "coin": 5 }, { "image": "/static/gift/6.png", "id": 6, "name": "膠囊", "coin": 6 }, { "image": "/static/gift/7.png", "id": 7, "name": "愛心", "coin": 7 }, { "image": "/static/gift/8.png", "id": 8, "name": "花", "coin": 8 }] ``` ## 3.12.2 將模擬的禮物數據進行動態渲染 1. 引入模擬數據的js文件 2. 在data中定義gifts屬性為數組,用來保存禮物的數據 3. 在頁面加載的時候給gifts的數據為js文件內模擬的數據 4. 設置v-for遍歷的屬性為gifts,并對數據進行動態綁定 ``` <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> <!-- 彈幕 --> <f-danmu ref="danmu"></f-danmu> <!-- 底部評論..等 --> <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 @click="openGift" 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 @click="back" 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="content == '' ? 'bg-main-disabled' : 'bg-main'" class=" flex ml-3 align-center py-2 rounded px-2 justify-center" @click="submit"> <text class="font text-white">發送</text> </view> </view> </uni-popup> <!-- 送禮物彈出層 --> <uni-popup type="bottom" ref="giftPopup"> <view style="width: 750rpx; height: 550rpx;" class="bg-white"> <view style="height: 100rpx;" class="flex justify-between align-center"> <text class="text-main font-md ml-3">禮物</text> <view @click="closeGift" style="height:100rpx; width: 100rpx;" class="flex justify-center align-center"> <text class="iconfont">&#xe607;</text> </view> </view> <swiper class="border-top border-bottom" :indicator-dots="true" style="height: 350rpx;" :duration="500"> <swiper-item> <view class="flex flex-wrap"> <view v-for="(item,index) in gifts" :key="index" style="width: 187.5rpx; height: 175rpx;" class="flex flex-column justify-center align-center"> <image :src="item.image" style="width: 100rpx; height: 100rpx;"></image> <view class="flex mt-1"> <text class="text-warning font mr-1">{{item.name}}</text> <text class="text-secondary font">{{item.coin}}</text> </view> </view> </view> </swiper-item> </swiper> <view style="height: 100rpx;" class="flex align-center justify-end"> <view class="bg-warning flex mr-3 align-center py-2 rounded px-2 justify-center" > <text class="font">充值</text> </view> <view class="bg-main flex mr-3 align-center py-2 rounded px-2 justify-center" > <text class="font text-white">發送</text> </view> </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" import fDanmu from "@/components/live/f-danmu.vue" import demoGifts from "@/demo/gifts.js" export default { data(){ return { statusBarHeight : 0, content : "", gifts : [] } }, components: { fGift, uniPopup, fDanmu }, onLoad(){ //獲取通知欄的高度 let res = uni.getSystemInfoSync(); this.statusBarHeight = res.statusBarHeight; //禮物數據 this.gifts = demoGifts; }, mounted(){ //模擬發送禮物 setInterval(()=>{ this.$refs.gift.send({ username : "發送人", avatar : "", gift_name : "蛋糕", gift_image : "/static/gift/3.png", num : 1 }) },3000) //模擬發送彈幕 // let id = 1; // setInterval(()=>{ // this.$refs.danmu.send({ // id : id, // name : "昵稱" + id, // content : "九月直播666" // }) // id++; // },3000) }, methods:{ //關閉送禮物彈出層 closeGift(){ this.$refs.giftPopup.close() }, //打開送禮物彈出層 openGift(){ this.$refs.giftPopup.open() }, //關閉直播間,返回上一頁 back(){ uni.navigateBack({ delta: 1 }) }, openInput(){ this.$refs.input.open() }, submit(){ //發送內容為空,提示框不消失 if(this.content == ""){ return; } //發送彈幕 this.$refs.danmu.send({ id : Math.random()*100, name : "昵稱", content : this.content }) //清空輸入的內容 this.content = ""; //關閉輸入提示框 this.$refs.input.close() } } } </script> <style> .page{ flex : 1; } </style> ``` ## 3.12.4 實現當點擊禮物的時候顯示對應的邊框的效果 ``` <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> <!-- 彈幕 --> <f-danmu ref="danmu"></f-danmu> <!-- 底部評論..等 --> <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 @click="openGift" 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 @click="back" 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="content == '' ? 'bg-main-disabled' : 'bg-main'" class=" flex ml-3 align-center py-2 rounded px-2 justify-center" @click="submit"> <text class="font text-white">發送</text> </view> </view> </uni-popup> <!-- 送禮物彈出層 --> <uni-popup type="bottom" ref="giftPopup"> <view style="width: 750rpx; height: 550rpx;" class="bg-white"> <view style="height: 100rpx;" class="flex justify-between align-center"> <text class="text-main font-md ml-3">禮物</text> <view @click="closeGift" style="height:100rpx; width: 100rpx;" class="flex justify-center align-center"> <text class="iconfont">&#xe607;</text> </view> </view> <swiper class="border-top border-bottom" :indicator-dots="true" style="height: 350rpx;" :duration="500"> <swiper-item> <view class="flex flex-wrap"> <view @click="giftActiveId = item.id" :class="item.id == giftActiveId ? 'border boder-main' : ''" v-for="(item,index) in gifts" :key="index" style="width: 187.5rpx; height: 175rpx;" class="flex flex-column justify-center align-center"> <image :src="item.image" style="width: 100rpx; height: 100rpx;"></image> <view class="flex mt-1"> <text class="text-warning font mr-1">{{item.name}}</text> <text class="text-secondary font">{{item.coin}}</text> </view> </view> </view> </swiper-item> </swiper> <view style="height: 100rpx;" class="flex align-center justify-end"> <view class="bg-warning flex mr-3 align-center py-2 rounded px-2 justify-center" > <text class="font">充值</text> </view> <view class="bg-main flex mr-3 align-center py-2 rounded px-2 justify-center" > <text class="font text-white">發送</text> </view> </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" import fDanmu from "@/components/live/f-danmu.vue" import demoGifts from "@/demo/gifts.js" export default { data(){ return { statusBarHeight : 0, content : "", gifts : [], giftActiveId : 0 } }, components: { fGift, uniPopup, fDanmu }, onLoad(){ //獲取通知欄的高度 let res = uni.getSystemInfoSync(); this.statusBarHeight = res.statusBarHeight; //禮物數據 this.gifts = demoGifts; }, mounted(){ //模擬發送禮物 setInterval(()=>{ this.$refs.gift.send({ username : "發送人", avatar : "", gift_name : "蛋糕", gift_image : "/static/gift/3.png", num : 1 }) },3000) //模擬發送彈幕 // let id = 1; // setInterval(()=>{ // this.$refs.danmu.send({ // id : id, // name : "昵稱" + id, // content : "九月直播666" // }) // id++; // },3000) }, methods:{ //關閉送禮物彈出層 closeGift(){ this.$refs.giftPopup.close() }, //打開送禮物彈出層 openGift(){ this.$refs.giftPopup.open() }, //關閉直播間,返回上一頁 back(){ uni.navigateBack({ delta: 1 }) }, openInput(){ this.$refs.input.open() }, submit(){ //發送內容為空,提示框不消失 if(this.content == ""){ return; } //發送彈幕 this.$refs.danmu.send({ id : Math.random()*100, name : "昵稱", content : this.content }) //清空輸入的內容 this.content = ""; //關閉輸入提示框 this.$refs.input.close() } } } </script> <style> .page{ flex : 1; } </style> ``` ## 3.12.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> <!-- 彈幕 --> <f-danmu ref="danmu"></f-danmu> <!-- 底部評論..等 --> <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 @click="openGift" 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 @click="back" 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="content == '' ? 'bg-main-disabled' : 'bg-main'" class=" flex ml-3 align-center py-2 rounded px-2 justify-center" @click="submit"> <text class="font text-white">發送</text> </view> </view> </uni-popup> <!-- 送禮物彈出層 --> <uni-popup type="bottom" ref="giftPopup"> <view style="width: 750rpx; height: 550rpx;" class="bg-white"> <view style="height: 100rpx;" class="flex justify-between align-center"> <text class="text-main font-md ml-3">禮物</text> <view @click="closeGift" style="height:100rpx; width: 100rpx;" class="flex justify-center align-center"> <text class="iconfont">&#xe607;</text> </view> </view> <swiper class="border-top border-bottom" :indicator-dots="true" style="height: 350rpx;" :duration="500"> <swiper-item> <view class="flex flex-wrap"> <view @click="giftActiveId = item.id" :class="item.id == giftActiveId ? 'border boder-main' : ''" v-for="(item,index) in gifts" :key="index" style="width: 187.5rpx; height: 175rpx;" class="flex flex-column justify-center align-center"> <image :src="item.image" style="width: 100rpx; height: 100rpx;"></image> <view class="flex mt-1"> <text class="text-warning font mr-1">{{item.name}}</text> <text class="text-secondary font">{{item.coin}}</text> </view> </view> </view> </swiper-item> </swiper> <view style="height: 100rpx;" class="flex align-center justify-end"> <view class="bg-warning flex mr-3 align-center py-2 rounded px-2 justify-center" > <text class="font">充值</text> </view> <view class="bg-main flex mr-3 align-center py-2 rounded px-2 justify-center" > <text class="font text-white" @click="sendGift">發送</text> </view> </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" import fDanmu from "@/components/live/f-danmu.vue" import demoGifts from "@/demo/gifts.js" export default { data(){ return { statusBarHeight : 0, content : "", gifts : [], giftActiveId : 0 } }, components: { fGift, uniPopup, fDanmu }, onLoad(){ //獲取通知欄的高度 let res = uni.getSystemInfoSync(); this.statusBarHeight = res.statusBarHeight; //禮物數據 this.gifts = demoGifts; }, mounted(){ // //模擬發送禮物 // setInterval(()=>{ // this.$refs.gift.send({ // username : "發送人", // avatar : "", // gift_name : "蛋糕", // gift_image : "/static/gift/3.png", // num : 1 // }) // },3000) //模擬發送彈幕 // let id = 1; // setInterval(()=>{ // this.$refs.danmu.send({ // id : id, // name : "昵稱" + id, // content : "九月直播666" // }) // id++; // },3000) }, methods:{ //發送禮物 sendGift(){ //如果要發送的禮物不存在,則不繼續往下執行,并給一個提示 if(this.giftActiveId == 0){ return uni.showToast({ title: "請選擇要發送的禮物", icon : "none" }) } //查找出對應的禮物 let index = this.gifts.findIndex(item=> item.id == this.giftActiveId) if(index == -1){ return; } let g = this.gifts[index]; //進行發送 this.$refs.gift.send({ username : "發送人", avatar : "", gift_name : g.name, gift_image : g.image, num : 1 }) //關閉送禮物彈出層 this.closeGift(); }, //關閉送禮物彈出層 closeGift(){ this.$refs.giftPopup.close() }, //打開送禮物彈出層 openGift(){ this.$refs.giftPopup.open() }, //關閉直播間,返回上一頁 back(){ uni.navigateBack({ delta: 1 }) }, openInput(){ this.$refs.input.open() }, submit(){ //發送內容為空,提示框不消失 if(this.content == ""){ return; } //發送彈幕 this.$refs.danmu.send({ id : Math.random()*100, name : "昵稱", content : this.content }) //清空輸入的內容 this.content = ""; //關閉輸入提示框 this.$refs.input.close() } } } </script> <style> .page{ flex : 1; } </style> ```
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看