uni-app 实现类似QQ个性标签功能 可自定义添加并选择默认标签

在uni-app中实现类似QQ个性标签的功能，可以通过使用uni-list和uni-checkbox-group组件来实现标签的自定义添加和选择默认标签。以下是一个简单的代码示例，展示了如何实现这一功能。

1. 页面布局（template）

<template>
  <view class="container">
    <view class="tag-list">
      <checkbox-group @change="handleCheckboxChange">
        <block v-for="(tag, index) in tags" :key="index">
          <label class="tag-item">
            <checkbox :value="tag.value" :checked="tag.checked">{{ tag.name }}</checkbox>
          </label>
        </block>
      </checkbox-group>
    </view>
    <view class="input-area">
      <input v-model="newTagName" placeholder="输入新标签" />
      <button @click="addTag">添加标签</button>
    </view>
  </view>
</template>

2. 样式（style）

<style scoped>
.container {
  padding: 20px;
}
.tag-list {
  margin-bottom: 20px;
}
.tag-item {
  display: inline-block;
  margin-right: 10px;
  padding: 5px 10px;
  background-color: #eee;
  border-radius: 5px;
}
.input-area {
  display: flex;
  align-items: center;
}
input {
  flex: 1;
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
button {
  padding: 10px 20px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
}
</style>

3. 逻辑处理（script）

<script>
export default {
  data() {
    return {
      tags: [
        { name: '标签1', value: 'tag1', checked: false },
        { name: '标签2', value: 'tag2', checked: true }, // 默认选中
      ],
      newTagName: '',
    };
  },
  methods: {
    handleCheckboxChange(e) {
      const checkedValues = e.detail.value;
      this.tags = this.tags.map(tag => ({
        ...tag,
        checked: checkedValues.includes(tag.value),
      }));
    },
    addTag() {
      if (this.newTagName.trim()) {
        this.tags.push({ name: this.newTagName, value: this.newTagName.toLowerCase().replace(/\s+/g, '-'), checked: false });
        this.newTagName = '';
      }
    },
  },
};
</script>

说明

1. 布局：使用checkbox-group和checkbox组件实现标签的选择功能，每个标签是一个label元素。
2. 样式：通过简单的CSS样式美化标签和输入框。
3. 逻辑：通过handleCheckboxChange方法处理标签的选中状态，addTag方法用于添加新标签。

这个示例展示了基本的标签添加和选择功能，你可以根据实际需求进一步扩展和优化，比如添加删除标签的功能、限制标签数量等。