Tencent / tdesign-vue-next

A Vue3.x UI components lib for TDesign.
https://tdesign.tencent.com/vue-next
MIT License
1.47k stars 483 forks source link

[TagInput] 透传inputProps中onChange事件报错 #4802

Open entireyu opened 2 days ago

entireyu commented 2 days ago

tdesign-vue-next 版本

1.10.4

重现链接

https://codesandbox.io/p/sandbox/tdesign-vue-next-tag-input-max-demo-forked-d7ljpx

重现步骤

<template>
  <t-tag-input v-model="tags" placeholder="最多只能输入 3 个标签" :max="3" :inputProps="{
    onChange: handleOnChange
  }" @enter="onEnter" />
</template>

<script setup>
import { ref } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';

const tags = ref([]);
const onEnter = (value, { inputValue }) => {
  if (value.length >= 3 && inputValue) {
    MessagePlugin.warning('最多只能输入 3 个标签!');
  }
};
function handleOnChange(value){
  console.log(value)
}
</script>

期望结果

获取到输入框的输入内容

实际结果

image image

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

20.11.1

补充说明

似乎是因为onChange属性不支持数组导致的。我需要监听用户输入的内容

github-actions[bot] commented 2 days ago

👋 @entireyu,感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

entireyu commented 2 days ago

如果有同样遇到此问题的同学,可以先通过设置v-model:inputValue + watch的形式替代

entireyu commented 2 days ago

如果有同样遇到此问题的同学,可以先通过设置v-model:inputValue + watch的形式替代 也可以使用input-change image