You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
1.1 KiB
74 lines
1.1 KiB
<template>
|
|
<view>
|
|
<view
|
|
v-for="item in listReal"
|
|
:key="item.value"
|
|
class="show-view-item"
|
|
:class="{ selected: item.isSel }"
|
|
@click="handleClick(item)"
|
|
>
|
|
{{ item[useName] }}
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
list: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
},
|
|
index: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
useName: {
|
|
type: String,
|
|
default: 'label'
|
|
}
|
|
},
|
|
emits: ['click'],
|
|
data() {
|
|
return {
|
|
listReal: []
|
|
};
|
|
},
|
|
watch: {
|
|
list: {
|
|
handler(newVal) {
|
|
this.listReal = newVal;
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
methods: {
|
|
handleClick(item) {
|
|
this.listReal.forEach(i => {
|
|
i.isSel = false;
|
|
});
|
|
item.isSel = true;
|
|
this.$emit('click', item, this.index + 1);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.show-view-item {
|
|
height: 80rpx;
|
|
padding: 0 13rpx 0 40rpx;
|
|
line-height: 80rpx;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.selected {
|
|
color: $uni-color-primary;
|
|
background-color: rgba(48, 119, 235, 0.05);
|
|
}
|
|
</style>
|