uni-app 输入框添加#号和@标签功能 类似头条发微博添加话题

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app 输入框添加#号和@标签功能 类似头条发微博添加话题

话题#

会做的联系我+v 15279338625
重金酬谢

1 回复

在uni-app中实现输入框添加#号和@标签功能,可以使用自定义组件和正则表达式来解析和处理用户输入。以下是一个基本的实现示例,包括一个自定义输入框组件,可以处理用户输入的#号和@标签,并将其样式化为可识别的标签。

1. 创建自定义输入框组件

首先,创建一个名为CustomInput.vue的自定义组件。

<template>
  <view class="container">
    <input
      type="text"
      v-model="inputValue"
      @input="handleInput"
      placeholder="输入内容..."
    />
    <view class="tags-container">
      <view
        v-for="(tag, index) in tags"
        :key="index"
        class="tag"
      >
        {{ tag.type === '#' ? '#' + tag.text : '@' + tag.text }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      tags: []
    };
  },
  methods: {
    handleInput(e) {
      const input = e.detail.value;
      const hashRegex = /#([^ #\n]+)/g;
      const atRegex = /@([^ @\n]+)/g;

      let matchesHash, matchesAt;
      let lastIndex = 0;

      while ((matchesHash = hashRegex.exec(input)) !== null) {
        this.addTag('#', matchesHash[1]);
        lastIndex = hashRegex.lastIndex;
      }

      while ((matchesAt = atRegex.exec(input.slice(lastIndex))) !== null) {
        this.addTag('@', matchesAt[1]);
      }

      // Remove raw text from input
      this.inputValue = input.replace(hashRegex, '').replace(atRegex, '');
    },
    addTag(type, text) {
      if (!this.tags.some(tag => tag.type === type && tag.text === text)) {
        this.tags.push({ type, text });
      }
    }
  }
};
</script>

<style scoped>
.container {
  position: relative;
}
.tags-container {
  margin-top: 5px;
}
.tag {
  display: inline-block;
  background-color: #e0e0e0;
  padding: 5px;
  margin: 2px;
  border-radius: 3px;
}
</style>

2. 使用自定义输入框组件

在你的页面(如index.vue)中引入并使用这个自定义组件。

<template>
  <view>
    <CustomInput />
  </view>
</template>

<script>
import CustomInput from '@/components/CustomInput.vue';

export default {
  components: {
    CustomInput
  }
};
</script>

注意事项

  1. 上述代码是一个简单的实现,没有处理用户删除标签的逻辑。你可以通过监听键盘删除键和更新标签数组来实现这一点。
  2. 样式可以根据需要进行调整,以满足你的应用设计需求。
  3. 在实际应用中,可能需要将标签数据存储在Vuex或其他状态管理工具中,以便在多个组件或页面之间共享。
回到顶部