74 lines
1.6 KiB
Vue
74 lines
1.6 KiB
Vue
<script setup>
|
|
import { getTime } from '@/utils/utils.js'
|
|
const data = reactive({
|
|
selectTime: {}
|
|
})
|
|
const { selectTime } = toRefs(data)
|
|
const props = defineProps(['arr', 'getData'])
|
|
|
|
let select = ref(null)
|
|
// 初始化 执行一次
|
|
onMounted(() => {
|
|
props.arr.map((item) => {
|
|
if (item.select) {
|
|
select = item.value
|
|
}
|
|
})
|
|
selectTime.value = getTime(select)
|
|
props.getData(selectTime.value)
|
|
})
|
|
// 点击执行
|
|
const selectClick = (item) => {
|
|
if (select === item.value) return
|
|
select = item.value
|
|
props.arr.map((ele) => {
|
|
if (item.value === ele.value) {
|
|
ele.select = true
|
|
} else {
|
|
ele.select = false
|
|
}
|
|
})
|
|
selectTime.value = getTime(select)
|
|
props.getData(selectTime.value)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="select-box">
|
|
<div v-for="(item, index) in props.arr" :key="index" :class="item.select ? 'active' : ''" class="select-item" @click="selectClick(item)">
|
|
{{ item.name }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.select-box {
|
|
min-width: 2rem;
|
|
height: 0.32rem;
|
|
position: absolute;
|
|
top: -0.02rem;
|
|
right: 0.06rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
z-index: 100;
|
|
.select-item {
|
|
min-width: 0.6rem;
|
|
height: 0.28rem;
|
|
color: black;
|
|
font-size: 0.14rem;
|
|
line-height: 0.26rem;
|
|
text-align: center;
|
|
border: 1px solid rgb(220, 223, 230);
|
|
background-color: white;
|
|
cursor: pointer;
|
|
}
|
|
.active {
|
|
color: #fff;
|
|
border-width: 1px;
|
|
background-color: rgb(64, 158, 255);
|
|
border: 1px solid rgb(64, 158, 255);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
</style>
|