42 lines
1.0 KiB
Vue
42 lines
1.0 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import {nextTick, ref, useTemplateRef} from "vue";
|
||
|
|
|
||
|
|
const inputTagRef = useTemplateRef('inputTagRef');
|
||
|
|
const modelValue = defineModel();
|
||
|
|
const input = ref('');
|
||
|
|
|
||
|
|
const changeInput = (e) => {
|
||
|
|
if (e.match(/#(\S+?)(?=\s)/g)) {
|
||
|
|
modelValue.value.push(...e.match(/#(\S+?)(?=\s)/g).map(tag => tag.slice(1)));
|
||
|
|
input.value = null;
|
||
|
|
nextTick(() => {
|
||
|
|
inputTagRef.value.blur();
|
||
|
|
nextTick(() => {
|
||
|
|
inputTagRef.value.focus();
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const pressEnter = () => {
|
||
|
|
modelValue.value = modelValue.value.filter(v => v.match(/#(\S+?)(?=\s)/g));
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<a-input-tag
|
||
|
|
ref="inputTagRef"
|
||
|
|
:retain-input-value="false"
|
||
|
|
@press-enter="pressEnter"
|
||
|
|
@input-value-change="changeInput"
|
||
|
|
v-model:model-value="modelValue"
|
||
|
|
v-model:input-value="input"
|
||
|
|
placeholder="请输入话题"
|
||
|
|
unique-value>
|
||
|
|
</a-input-tag>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
|
||
|
|
</style>
|