uniapp：隐藏显示内容v-if、v-show
<template>
<view>
<view class="" @click="clickEllipsis" style="display: flex;">
点击出现隐藏内容,悬浮在其他内容之上
<image src="../../static/" style="height: 25px;width: 25px;"></image>
</view>
<!-- <view v-show="isEllipsis" class="" style="background-color: #fdbfdb;">
<view class="" style="display: flex;align-items: center;background-color: #aaaaff;margin: 5%;">
<image src="../../static/" class="" style="height: 25px;width: 25px;"></image>
行1
</view>
</view> -->
<view>
<image src="../../static/"></image>
</view>
<view v-show="isEllipsis" class="v-sh-1" style="background-color: #fdbfdb;">
<view class="" style="display: flex;align-items: center;background-color: #aaaaff;margin: 5%;">
<image src="../../static/" class="" style="height: 25px;width: 25px;"></image>
行1
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isEllipsis:false,
}
},
methods: {
clickEllipsis(){
this.isEllipsis =! this.isEllipsis;
console.log('isEllipsis')
},// 右上角悬浮菜单
}
}
</script>
<style>
.v-sh-1{
background-color: rgb(253, 191, 219);
position: fixed;
width: 100%;
top: 25%;
}
</style>