【JavaScript】点击选中和取消

news2025/3/11 9:15:53

效果图
（1）选中

（2）取消选中
实现

<template>
    <div class="qualitityIssues">
        <div style="display: flex;">
            <div class="course-area">
                <div :class="checkoutIndex == index ? 'course-name' : 'course-name-active'"
                    v-for="(item, index) in courseList" :key="item.id" @click="handleCourse(index, item.id)">
                    <div :class="checkoutIndex == index ? 'course-flag' : 'course-flag-active'"></div>
                    <div :class="checkoutIndex == index ? 'course-title' : 'course-title-active'">{{ item.dictValue
                    }}</div>
                </div>
            </div>
            <div class="course-content-area" v-loading="listLoading">
                <div class="course-document" v-for="(item, index) in list" :key="index">
                    <div class="course-content">
                        <div class="tag-area">
                            <span class="course-tag" v-show="item.sourceClassifyName != ''"
                                v-for="( tag, index ) in  item.sourceClassifyName.split(',').slice(0, 3)" :key="index">{{
                                    tag
                                }}</span>
                        </div>
                        <div class="course-time">
                            {{ item.createTime }}
                        </div>
                    </div>
                    <div class="course-document-name" @click="handleDetail(item.id)">
                        {{ item.title }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { getCourseTree} from "@/api/xxx"
import { getList } from "@/api/xxx"
export default {
    data() {
        return {
            courseList: [],
            checkoutIndex: null,
            list: [],
            query: {
            	tagA:''
            },
            pageForm: {
                current: 1,
                size: 10,
                total: 0
            },
            listLoading: false,
            count: 0
        }
    },
    mounted() {
        getCourseTree().then(res => {
            this.courseList = res.data
        })
        this.fetchData()
    },
    methods: {
        /**
         * 选中标签项
         * @param {Int} index 
         * @param {Object} item 
         */
        handleCourse(index, tagA) {
            if (this.checkoutIndex == index) {
                this.checkoutIndex = null
                this.query.tagA = ''
            } else {
                this.checkoutIndex = index
                this.query.tagA = tagA
            }
            this.fetchData()
        },

        /**
         * 初始化质量课题列表数据
         */
        fetchData() {
            this.listLoading = true;
            getList(this.pageForm.current, this.pageForm.size, this.query).then(res => {
                if (res.success) {
                	// 仅显示前十条
                    this.list = res.data.slice(0, 10)
                    this.listLoading = false
                }
            })
        },

        /**
         * 点击跳转到详情页
         * @param {Int} id 
         */
        handleDetail(id) {
            this.$router.push({
                path: `/pageDetail/${id}`
            })
        },
    }
}
</script>
<style scoped lang="less">
.qualitityIssues {
    margin: 24px 0;
    background-color: #fff;
    padding: 24px;
    border-radius: 10px;

    .title {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 10px;
        color: #333;
        text-shadow: 0px 4px 0px rgba(0, 0, 0, 0.05);
        font-family: "Source Han Sans CN";
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px;
        margin-bottom: 24px;
    }

    .course-area {
        border-radius: 10px 0px 0px 10px;
        background: linear-gradient(166deg, #3C61E6 5.57%, #023EB4 95.34%);
        padding: 16px;
        gap: 12px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 219px;
        min-height: 664px;

        .course-name {
            border-radius: 5px;
            background: #FFF;
            display: flex;
            padding: 8px 16px;
            align-items: center;
            gap: 8px;
            align-self: stretch;
            cursor: pointer;

            .course-flag {
                border-radius: 4px;
                background: linear-gradient(180deg, #046AF9 0%, rgba(4, 106, 249, 0.00) 100%);
                width: 3px;
                height: 16px;
            }

            .course-title {
                color: #023FB5;
                font-family: "Source Han Sans CN";
                font-size: 16px;
                font-style: normal;
                font-weight: 700;
                line-height: 24px;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 144px;
                text-wrap: nowrap;
            }
        }

        .course-name-active {
            display: flex;
            padding: 8px 16px;
            align-items: center;
            gap: 8px;
            align-self: stretch;
            cursor: pointer;

            .course-flag-active {
                border-radius: 4px;
                background: #FFF;
                width: 3px;
                height: 16px;
            }

            .course-title-active {
                color: #FFF;
                font-family: "Source Han Sans CN";
                font-size: 16px;
                font-style: normal;
                font-weight: 500;
                line-height: 24px;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 144px;
                text-wrap: nowrap;
            }
        }
    }

    .course-content-area {
        margin-left: 16px;
        min-width: 740px;

        .course-document {
            border-bottom: 1px dotted #EEE;

            .course-content {
                display: flex;
                justify-content: space-between;

                .tag-area {
                    .course-tag {
                        border-radius: 20px;
                        border: 1px solid #F46924;
                        display: inline-block;
                        padding: 0px 12px;
                        color: #F46924;
                        font-family: "Source Han Sans CN";
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 350;
                        line-height: 24px;
                        margin-right: 12px;
                    }
                }

                .course-time {
                    color: #CCC;
                    text-align: right;
                    font-family: "Source Han Sans CN";
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 350;
                    line-height: 24px;
                }
            }

            .course-document-name {
                color: #666;
                font-family: "Source Han Sans CN";
                font-size: 16px;
                font-style: normal;
                font-weight: 500;
                line-height: 24px;
                margin: 8px 0 12px 0;
                text-wrap: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 740px;
            }

            .course-document-name:hover {
                color: #023EB4;
                cursor: pointer;
            }
        }

        .course-document:not(:first-child) {
            margin: 24px 0;
        }
    }
}
</style>

数据结构

courseList:[
	{
		id:"1",
		dictValue:"质量创新"
	},
	{
		id:"2",
		dictValue:"六西格玛项目"
	},	
]

list:[
	{
		id:"1",
		title:"",
		sourceClassifyName:"标准,政策",
		createTime:""
	},
	{
		id:"2",
		title:"",
		sourceClassifyName:"标准,政策",
		createTime:""		
	}
]