然后我在button按钮中,写了一个v-show:
<button v-show="showUp" type="primary" @click="toggle('center')" style="background: #F7B500;color: #FFFFFF;width: 188rpx;height: 72rpx;font-size: 26rpx;">立即签到</button>
<uni-popup ref="popup" :type="type" :animation="false" :maskClick="true">
<view class="recom-popup">
<view class="recom-popup-text1">积分+10</view>
<view class="recom-popup-text2">签到成功</view>
</view>
</uni-popup>
toggle的方法写的是:
toggle(type) {
this.type = type
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
this.$refs.popup.open(type)
}
效果如下图:
完整代码是:
<view class="recom_tuan">
<button v-show="showUp" type="primary" @click="toggle('center')" style="background: #F7B500;color: #FFFFFF;width: 188rpx;height: 72rpx;font-size: 26rpx;">立即签到</button>
<button v-show="!showUp" type="primary"
style="background: #999999;color: #FFFFFF;width: 188rpx;height: 72rpx;font-size: 26rpx;">已签到</button>
<uni-popup ref="popup" :type="type" :animation="false" :maskClick="true">
<view class="recom-popup">
<view class="recom-popup-text1">积分+10</view>
<view class="recom-popup-text2">签到成功</view>
</view>
</uni-popup>
</view>
export default {
data() {
return {
type: 'center',
showUp:true,
}
},
methods: {
toggle(type) {
this.type = type
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
this.$refs.popup.open(type)
this.showUp = !this.showUp
}
}
}