baozhida-hardware-development/src/components/maskedbox/direction.vue

<template>
    <div class="same_row_in upAndDown_padding">
        <span class="title_12 w_60 default_size" style="flex: none;">{{title}}</span>
        <div class="card_alignment">
            <div class="card_item_text" :class="item.flag ? 'activate_text' : ''" v-for="(item, index) in arrList"
                :key="index" @click="selectAlignment(item.id)">
                <span class="img_icon_text iconfont"
                    :class="[item.flag ? 'activate_text' : '', item.title]"></span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
const props = defineProps({
    mode: {
        type: Boolean,
        required: true
    },
    title: {
        type: String,
        required: true
    },
})
const arrList: any = ref([{
    id: true,
    flag: false,
    title: 'icon-around',
}, {
    id: false,
    flag: false,
    title: 'icon-fluctuate',
}])
onMounted(() => {
    selectAlignment(props.mode)
})

const emit = defineEmits(['update:mode']);
function selectAlignment(event: any) {
    arrList.value.forEach(item => {
        if (item.id == event) {
            item.flag = true
        } else {
            item.flag = false
        }
    })
    emit('update:mode', event);
}
</script>

<style lang="scss" scoped>
.card_alignment {
    width: 100%;
    background: rgb(243, 243, 248);
    border-radius: 4px;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    padding: 2px;
    height: 24px;
}

.card_item_text {
    flex: 1 1 0%;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: row;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    cursor: pointer;
}

.activate_text {
    color: rgb(15, 116, 231) !important;
    background: rgb(255, 255, 255);
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
}

.img_icon_text {
    color: rgb(171, 171, 180);
    font-size: 12px;
}

.w_60_index {
    width: 60px !important;
    margin-right: 5px;
}
</style>