//组件
<view>
<view class="u-flex u-row-between u-m-b-20">
<view class="w100 u-flex u-row-between">
<view v-for="(tab,tabi) in tablist" :key="tabi"
:class="'u-m-r-10 '+(type=='label'?(tablev==tabi?'tabchecked':'tabitem'):(tablev==tabi?'tabchecked1':'tabitem1'))"
@click="shaixuan(tabi)">
{{tab.name}}
</view>
</view>
<view @click="isshaixuan=!isshaixuan" v-if="tablist[tablev].issx" class="shaixuanicon">
<u-icon name="shaixuan" custom-prefix="custom-icon" color="#555" size="40"></u-icon>
</view>
</view>
<view class="shaixuanplant" v-if="isshaixuan">
<text class="inner"></text>
<view v-for="(item,index) in selectlist" :key="index" @click="checkshaixuan(index)"
:class="index==selectCurrent?'shaixuanitem checked':'shaixuanitem'">
{{item.label}}
</view>
</view>
</view>
<script>
export default {
name: "screen",
data() {
return {
tablev: 0,
isshaixuan: false,
selectCurrent: 0
};
},
props: {
type: {
type: String,
default: 'label'
},
tablist: {
type: Array,
default: []
},
selectlist: {
type: Array,
default: []
}
},
created() {},
methods: {
shaixuan(e) {
this.isshaixuan = this.tablist[e].issx ? this.isshaixuan : false
this.tablev = e
this.$emit("shaixuan", e)
},
checkshaixuan(e) {
this.selectCurrent = e
this.isshaixuan = false
this.$emit("checkshaixuan", e)
}
},
}
</script>
.tabchecked {
text-align: center;
color: #FFFFFF;
background: linear-gradient(to right, #e62b1f, #fe5c2b);
padding: 10rpx 20rpx;
border-radius: 20rpx;
box-shadow: 0 0 6rpx 2rpx rgba(0, 0, 0, 0.20);
}
.tabitem {
text-align: center;
color: #000000;
background: linear-gradient(to right, #ddd, #fff);
padding: 10rpx 20rpx;
border-radius: 20rpx;
box-shadow: 0 0 6rpx 2rpx rgba(0, 0, 0, 0.20);
}
.tabchecked1 {
text-align: center;
color: #000000;
padding: 10rpx 20rpx;
border-bottom: 2px solid #0084bf;
}
.tabitem1 {
text-align: center;
color: #000000;
padding: 10rpx 20rpx;
}
.shaixuanplant {
color: #FFFFFF;
position: absolute;
right: 10rpx;
// top: 900rpx;
background-color: rgba(0, 0, 0, 0.70);
// clip-path: polygon(0 15%, 25% 15%, 30% 0,35% 15%, 100% 15%,100% 100%,0% 100%);
}
.inner {
position: absolute;
right: 40rpx;
top: -40rpx;
width: 0;
height: 0;
border: 20rpx solid;
border-color: transparent transparent rgba(0, 0, 0, 0.70) transparent;
}
.shaixuanitem {
text-align: center;
padding: 20rpx;
margin: 10rpx;
}
.checked {
text-align: center;
background-color: #e62b1f;
}
.shaixuanicon{
width: 60rpx;
height: 60rpx;
background-color: #FFF;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
.w100{
width: 100%;
}
页面引用
<screen :tablist="tablist" :selectlist="selectlist" @shaixuan="shaixuan" @checkshaixuan="checkshaixuan"></screen>
import screen from '@/components/screen/screen'
export default {
components: {
screen
},
data() {
return {
tablev: 0,
tablist: [
{name:'楼盘推荐',issx:false},
{name:'产品推荐',issx:true},
{name:'内容推广',issx:true}
],
selectlist: [],
}
},
methods: {
shaixuan(e) {
// 给筛选面板赋值
this.tablev=e
if (this.tablev == 0) {
} else if (this.tablev == 1) {
this.selectlist = [{
label: '最近上新'
},
{
label: '最多推荐'
}
]
} else if (this.tablev == 2) {
this.selectlist = [{
label: '热门物料'
},
{
label: '最近使用'
}
]
}
},
checkshaixuan(e) {
this.selectCurrent=e
console.log(this.tablev == 1 ? '产品推荐' : '内容推广')
}
}
}