63 lines
1.1 KiB
Vue
63 lines
1.1 KiB
Vue
<template>
|
|
<view class="a-wrapper">
|
|
<block v-for="v in list" :key="v.value">
|
|
<view class="a-text" :class="{ selected: v.value === index }" @tap="selected(v)">
|
|
{{ v.text }}
|
|
<view class="solid" v-show="v.value === index"></view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref } from "vue"
|
|
const emits = defineEmits(["selected"])
|
|
const list = reactive([
|
|
{
|
|
text: "全部",
|
|
value: "",
|
|
},
|
|
{
|
|
text: "成功",
|
|
value: 2,
|
|
},
|
|
{
|
|
text: "审核",
|
|
value: 1,
|
|
},
|
|
{
|
|
text: "驳回",
|
|
value: 3,
|
|
},
|
|
])
|
|
const index = ref("")
|
|
const selected = (val) => {
|
|
index.value = val.value
|
|
emits("selected", val.value)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.a-wrapper {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
.a-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
|
|
.solid {
|
|
width: 20rpx;
|
|
height: 6rpx;
|
|
margin-top: 12rpx;
|
|
background-color: $primaryColor;
|
|
}
|
|
}
|
|
.selected {
|
|
font-weight: 700;
|
|
color: $primaryColor;
|
|
}
|
|
}
|
|
</style>
|