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