103 lines
2.1 KiB
Plaintext
103 lines
2.1 KiB
Plaintext
<template>
|
|
<view class="barrage-control-bar">
|
|
<view class="left">
|
|
<template v-if="barrageOpen">
|
|
<image
|
|
class="btn"
|
|
src="@/static/barrage/open@2x.png"
|
|
@click="handleToggleBarrageOpen"></image>
|
|
<image
|
|
v-if="settingBarrageMode"
|
|
class="btn space"
|
|
src="@/static/barrage/setting_active@2x.png"
|
|
@click="handleToggleBarrageSetting"></image>
|
|
<image
|
|
v-else
|
|
class="btn space"
|
|
src="@/static/barrage/setting_gray@2x.png"
|
|
@click="handleToggleBarrageSetting"></image>
|
|
</template>
|
|
<image
|
|
v-else
|
|
class="btn"
|
|
src="@/static/barrage/close_gray@2x.png"
|
|
@click="handleToggleBarrageOpen"></image>
|
|
</view>
|
|
<view
|
|
v-if="barrageOpen"
|
|
class="right"
|
|
@click="handleToggleFixedFooter">
|
|
<text class="text">{{ placeHolderText }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'BarrageControlBar',
|
|
props: {
|
|
barrageOpen: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
settingBarrageMode: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
barrageSendDisabled: {
|
|
type: Boolean
|
|
},
|
|
barrageSendDisabledTime: {
|
|
type: Number
|
|
}
|
|
},
|
|
computed: {
|
|
placeHolderText () {
|
|
return this.barrageSendDisabled ? this.barrageSendDisabledTime + 's' : '点我发弹幕';
|
|
}
|
|
},
|
|
methods: {
|
|
handleToggleBarrageOpen () {
|
|
this.$emit('handleToggleBarrageOpen');
|
|
},
|
|
handleToggleBarrageSetting () {
|
|
this.$emit('handleToggleBarrageSetting');
|
|
},
|
|
handleToggleFixedFooter () {
|
|
this.$emit('handleToggleFixedFooter');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.barrage-control-bar
|
|
flex-direction: row
|
|
padding: 10rpx 30rpx
|
|
background-color: #FFF
|
|
.left
|
|
flex-direction: row
|
|
align-items: center
|
|
padding: 0 20rpx
|
|
background-color: #F5F5F5
|
|
border-radius: 30rpx
|
|
border 1rpx solid #DDDDDD
|
|
.btn
|
|
width: 60rpx
|
|
height: 60rpx
|
|
&.space
|
|
margin-left: 40rpx
|
|
.right
|
|
flex 1
|
|
flex-direction: row
|
|
align-items: center
|
|
margin-left: 20rpx
|
|
padding: 0 30rpx
|
|
background-color: #F5F5F5
|
|
border-radius: 30rpx
|
|
border 1rpx solid #DDDDDD
|
|
.text
|
|
font-size: 26rpx
|
|
line-height: 26rpx
|
|
color #999
|
|
</style> |