uniapp制作app与小程序前端——标签

最新推荐文章于 2024-08-20 23:54:19 发布

hk-hkl

最新推荐文章于 2024-08-20 23:54:19 发布

阅读量299

点赞数 4

分类专栏： uniapp开发app与小程序前端文章标签：前端 uni-app 小程序学习方法

本文链接：https://blog.csdn.net/hk_hkl/article/details/130629430

版权

uniapp开发app与小程序前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

该文章展示了一个使用Vue.js框架编写的多选标签组件。通过循环遍历数据并绑定点击事件，实现标签的选中与取消选中状态切换。选中的标签会显示在单独的区域。样式通过CSS进行定制，包括已选和未选中的视觉效果。

摘要由CSDN通过智能技术生成

一、写入代码

<template>
	<view class="">
		<view class="page index">
		        <!-- 多选，循环遍历填充数据 -->
		        <view class="list-box">
		            <view v-for="(item,index) in list" :key="index" @click="choice(index)" :class="[item.selected?'selde':'noselde']">
		                {{item.selected?item.title:item.title}}
		            </view>
		        </view>
				<!-- 选中的值 -->
				<view class="valueList">
					{{selectList}}
				</view>
		    </view>
	</view>
</template>

<script>
    export default {
        data() {
            return {
				 //定义前端选中的值
				selectList:"",
				//给标签赋值
                list: [{
                        selected: false,
                        title: '标签1'
                    },
                    {
                        selected: false,
                        title: '标签2'
                    },
                    {
                        selected: false,
                        title: '标签3'
                    },
                    {
                        selected: false,
                        title: '标签4'
                    },
                    {
                        selected: false,
                        title: '标签5'
                    }, {
                        selected: false,
                        title: '标签6'
                    }
                ],
                selectId: [],
            };
        },
        methods: {
            //选择按钮
            choice(index) {
				//当再次被选中时，取消当前选中项
                if (this.list[index].selected == true) {
                    this.list[index].selected = false;
                    //取消选中时删除数组中的值
                    for (var i = 0; i < this.selectId.length; i++) {
                        if (this.selectId[i] === this.list[index].title) {
                            this.selectId.splice(i, 1);
							
                        }
                    }
					this.selectList=this.selectId
                    console.log("选中的值", this.selectId)
                } else {
                    this.list[index].selected = true;
                    this.selectId.push(this.list[index].title)
					for (var i=0;i<this.selectId.length;i++) {
						console.log("选中的值", this.selectId[i])
					}
					this.selectList=this.selectId
                    console.log("选中的值", this.selectId)
                }
            }
        }
    };
</script>

<!-- 样式表 -->
<style lang="scss">
    .list-box {
        display: flex;
        flex-wrap: wrap;
        padding: 16upx;
        border-radius: 10upx;

        view {
            width: 25%;
            height: 60upx;
            line-height: 60upx;
            text-align: center;
            margin-top: 10upx;

            &:not(:nth-child(3n)) {
                margin-right: calc(10% / 2);
            }
        }
    }

    /* 已选择 */
    .selde {
        border: 1px solid red;
        background: red;
        color: #FFFFFF;
        border-radius: 20upx;
        font-size: 20upx;
        padding: 0 10upx;
    }

    /* 未选择 */
    .noselde {
        border: 1px solid #959595;
        background: #FFFFFF;
        color: #959595;
        border-radius: 20upx;
        font-size: 20upx;
        padding: 0 10upx;
    }
	.valueList{
		margin-top: 20rpx;
		padding: 20rpx;
		display: flex;
		justify-content: center;
	}
</style>