Skip to content

docs(tag-input): add example #3962

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
zhaoxiaofeng876 wants to merge 4 commits into from
Closed

docs(tag-input): add example #3962

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fed5949
feat(tag-input): tag-input component
zhaoxiaofeng876 Dec 27, 2025
3d68f96
fix: revise review comments
zhaoxiaofeng876 Dec 29, 2025
d7751cd
fix: revise review comments
zhaoxiaofeng876 Dec 30, 2025
73cc76d
docs(tag-input): add example
zhaoxiaofeng876 Jan 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
182 changes: 182 additions & 0 deletions examples/sites/demos/apis/tag-input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
export default {
mode: ['pc', 'mobile-first'],
apis: [
{
name: 'tag-input',
type: 'component',
props: [
{
name: 'model-value / v-model',
type: 'array',
defaultValue: '[]',
desc: {
'zh-CN': '绑定值',
'en-US': '‌Binding Value'
Copy link

@coderabbitai coderabbitai bot Jan 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Hidden zero-width character in English description.

The English description contains a zero-width non-joiner character (U+200C) before "Binding Value". This invisible character may cause display or search issues.

🔎 Proposed fix 
-          'en-US': '‌Binding Value'
+          'en-US': 'Binding Value'
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
'en-US': '‌Binding Value'
'en-US': 'Binding Value'
🤖 Prompt for AI Agents 
In @examples/sites/demos/apis/tag-input.js around line 14, Remove the hidden
U+200C zero-width non-joiner from the English description string so it reads
exactly 'Binding Value' (no hidden characters). Locate the mapping entry with
the key 'en-US' and the value currently containing '‌Binding Value' and replace
that value with a clean literal "Binding Value" (or programmatically strip
U+200C, e.g., .replace(/\u200C/g, '') if needed).

},
mode: ['pc', 'mobile-first'],
pcDemo: 'tag-group-size',
mfDemo: 'tag-group-size'
Comment on lines +17 to +18
Copy link

@coderabbitai coderabbitai bot Jan 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Incorrect demo references.

The demo references tag-group-size which appears to be from a different component (TagGroup). For the TagInput component, the model-value prop should reference TagInput-specific demos like basic-usage.

🔎 Proposed fix 
-          pcDemo: 'tag-group-size',
-          mfDemo: 'tag-group-size'
+          pcDemo: 'basic-usage',
+          mfDemo: 'basic-usage'
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
pcDemo: 'tag-group-size',
mfDemo: 'tag-group-size'
pcDemo: 'basic-usage',
mfDemo: 'basic-usage'
🤖 Prompt for AI Agents 
In @examples/sites/demos/apis/tag-input.js around lines 17-18, The demo
references for the TagInput API are wrong: update the pcDemo and mfDemo values
that currently point to 'tag-group-size' to the TagInput-specific demo slug
(e.g. replace 'tag-group-size' with 'basic-usage' or the TagInput 'model-value'
demo ID) so the TagInput API page links to the correct demo examples.

},
{
name: 'size',
type: "'medium' | 'small'",
defaultValue: "'medium'",
desc: {
'zh-CN': '尺寸',
'en-US': 'Size '
},
mode: ['pc', 'mobile-first'],
pcDemo: 'tag-group-size',
mfDemo: 'tag-group-size'
},
{
name: 'tag-type',
typeAnchorName: 'IType',
type: 'IType',
defaultValue: '',
desc: {
'zh-CN': '显示类型',
'en-US': 'Display type'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'tag-effect',
typeAnchorName: 'IEffect',
type: 'IEffect',
defaultValue: "'light'",
desc: {
'zh-CN': '主题',
'en-US': 'Theme Color'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'effect',
mfDemo: ''
},
{
name: 'clearable',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否可清空',
'en-US': 'Whether it can be cleared'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'disabled',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否禁用标签输入框',
'en-US': 'Whether the tag input box is disabled'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'max',
type: 'number',
defaultValue: 'Infinity',
desc: {
'zh-CN': '最大允许输入的标签数量',
'en-US': 'Maximum number of tags allowed to be input'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'placeholder',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '占位符',
'en-US': 'Placeholder'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'readonly',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否只读',
'en-US': 'Whether it is read-only'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'draggable',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否可拖拽',
'en-US': 'Whether it is draggable'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'minCollapsedNum',
type: 'number',
defaultValue: 'Infinity',
desc: {
'zh-CN': '最小折叠数量',
'en-US': 'Minimum collapsed number'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'separator',
type: 'string',
defaultValue: ',',
desc: {
'zh-CN': '批量输入时标签分隔符',
'en-US': 'Tag separator for batch input'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
}
],
events: [],
methods: [],
slots: [
{
name: 'prefix',
defaultValue: '',
desc: {
'zh-CN': '输入框前缀内容的插槽',
'en-US': 'Input prefix slot'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'suffix',
defaultValue: '',
desc: {
'zh-CN': '输入框后缀内容的插槽',
'en-US': 'Input suffix slot'
},
mode: ['pc'],
pcDemo: 'basic-usage'
}
]
}
],
types: []
}
23 changes: 23 additions & 0 deletions examples/sites/demos/pc/app/tag-input/basic-usage-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<template>
<div class="tiny-tag-input-demo">
<tiny-tag-input v-model="data" :placeholder="placeholder"></tiny-tag-input>
<tiny-tag-input v-model="data1" :placeholder="placeholder" tag-type="info" tag-effect="light"></tiny-tag-input>
<tiny-tag-input v-model="data2" :placeholder="placeholder" tag-type="success" tag-effect="plain"></tiny-tag-input>
</div>
</template>

<script setup>
import { TinyTagInput } from '@opentiny/vue'
import { reactive, ref } from 'vue'

const data = reactive(['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'])
const data1 = reactive(['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'])
const data2 = reactive(['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'])
const placeholder = ref('please enter a tag')
</script>

<style scoped>
.tiny-tag-input-demo .tiny-tag-input {
margin-bottom: 20px;
}
</style>
32 changes: 32 additions & 0 deletions examples/sites/demos/pc/app/tag-input/basic-usage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<template>
<div class="tiny-tag-input-demo">
<tiny-tag-input v-model="data" :placeholder="placeholder"></tiny-tag-input>
<tiny-tag-input v-model="data1" :placeholder="placeholder" tag-type="info" tag-effect="light"></tiny-tag-input>
<tiny-tag-input v-model="data2" :placeholder="placeholder" tag-type="success" tag-effect="plain"></tiny-tag-input>
</div>
</template>

<script>
import { TinyTagInput } from '@opentiny/vue'

export default {
components: {
TinyTagInput
},
data() {
return {
data: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'],
data1: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'],
data2: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'],
maxTagCount: 3,
Copy link

@coderabbitai coderabbitai bot Jan 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

Remove unused variable.

The maxTagCount variable is declared but never used in the template. Consider removing it or binding it to one of the tiny-tag-input components with the :max prop.

🔎 Proposed fix 
       data: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'],
       data1: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'],
       data2: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'],
-      maxTagCount: 3,
       placeholder: 'please enter a tag'

Or if you intend to demonstrate the max prop, bind it to one of the inputs:

-    <tiny-tag-input v-model="data" :placeholder="placeholder"></tiny-tag-input>
+    <tiny-tag-input v-model="data" :placeholder="placeholder" :max="maxTagCount"></tiny-tag-input>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
maxTagCount: 3,
data: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'],
data1: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'],
data2: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'],
placeholder: 'please enter a tag'
🤖 Prompt for AI Agents 
In @examples/sites/demos/pc/app/tag-input/basic-usage.vue around line 21, Remove
the unused maxTagCount variable or bind it to a component: either delete the
maxTagCount declaration if it's not needed, or update one of the tiny-tag-input
usages to pass the value via the :max prop (e.g., <tiny-tag-input
:max="maxTagCount" ...>) so the variable is actually used.

placeholder: 'please enter a tag'
}
}
}
</script>

<style scoped>
.tiny-tag-input-demo .tiny-tag-input {
margin-bottom: 20px;
}
</style>
20 changes: 20 additions & 0 deletions examples/sites/demos/pc/app/tag-input/clearable-tag-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<template>
<div class="tiny-tag-input-demo">
<tiny-tag-input v-model="data" :placeholder="placeholder" clearable></tiny-tag-input>
</div>
</template>

<script setup>
import { TinyTagInput } from '@opentiny/vue'
import { reactive, ref } from 'vue'

const data = reactive(['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'])

const placeholder = ref('please enter a tag')
</script>

<style scoped>
.tiny-tag-input-demo .tiny-tag-input {
margin-bottom: 20px;
}
</style>
27 changes: 27 additions & 0 deletions examples/sites/demos/pc/app/tag-input/clearable-tag.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<template>
<div class="tiny-tag-input-demo">
<tiny-tag-input v-model="data" :placeholder="placeholder" clearable></tiny-tag-input>
</div>
</template>

<script>
import { TinyTagInput } from '@opentiny/vue'

export default {
components: {
TinyTagInput
},
data() {
return {
data: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'],
placeholder: 'please enter a tag'
}
}
}
</script>

<style scoped>
.tiny-tag-input-demo .tiny-tag-input {
margin-bottom: 20px;
}
</style>
20 changes: 20 additions & 0 deletions examples/sites/demos/pc/app/tag-input/collapsed-tag-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<template>
<div class="tiny-tag-input-demo">
<tiny-tag-input v-model="data" :placeholder="placeholder" :min-collapsed-num="minCollapsedNum"></tiny-tag-input>
</div>
</template>

<script setup>
import { TinyTagInput } from '@opentiny/vue'
import { reactive, ref } from 'vue'

const data = reactive(['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'])
const minCollapsedNum = ref(5)
const placeholder = ref('please enter a tag')
</script>

<style scoped>
.tiny-tag-input-demo .tiny-tag-input {
margin-bottom: 20px;
}
</style>
28 changes: 28 additions & 0 deletions examples/sites/demos/pc/app/tag-input/collapsed-tag.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<template>
<div class="tiny-tag-input-demo">
<tiny-tag-input v-model="data" :placeholder="placeholder" :min-collapsed-num="minCollapsedNum"></tiny-tag-input>
</div>
</template>

<script>
import { TinyTagInput } from '@opentiny/vue'

export default {
components: {
TinyTagInput
},
data() {
return {
data: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'],
placeholder: 'please enter a tag',
minCollapsedNum: 5
}
}
}
</script>

<style scoped>
.tiny-tag-input-demo .tiny-tag-input {
margin-bottom: 20px;
}
</style>
20 changes: 20 additions & 0 deletions examples/sites/demos/pc/app/tag-input/disabled-readonly-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<template>
<div class="tiny-tag-input-demo">
<span>disabled: </span><tiny-tag-input v-model="data" :placeholder="placeholder" disabled></tiny-tag-input>
<span>readonly：</span><tiny-tag-input v-model="data1" :placeholder="placeholder" readonly></tiny-tag-input>
Comment on lines +3 to +4
Copy link

@coderabbitai coderabbitai bot Jan 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Missing placeholder definition causes runtime error.

The template references placeholder on lines 3-4, but it's not defined in the script setup section. This will cause a ReferenceError at runtime.

🔎 Proposed fix 
 const data = reactive(['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'])
 const data1 = reactive(['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'])
+const placeholder = 'please enter a tag'
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<span>disabled: </span><tiny-tag-input v-model="data" :placeholder="placeholder" disabled></tiny-tag-input>
<span>readonly：</span><tiny-tag-input v-model="data1" :placeholder="placeholder" readonly></tiny-tag-input>
const data = reactive(['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'])
const data1 = reactive(['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'])
const placeholder = 'please enter a tag'
🤖 Prompt for AI Agents 
In @examples/sites/demos/pc/app/tag-input/disabled-readonly-composition-api.vue
around lines 3-4, The template uses the placeholder variable for the
tiny-tag-input components but placeholder is not defined in the script setup;
add a placeholder definition (e.g., const placeholder = ref('Enter tag') or
const placeholder = 'Enter tag') inside the <script setup> so placeholder is in
scope for the template (ensure it’s exported from the script setup context
alongside data and data1 used by v-model).

</div>
</template>

<script setup>
import { reactive } from 'vue'
import { TinyTagInput } from '@opentiny/vue'

const data = reactive(['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'])
const data1 = reactive(['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'])
</script>

<style scoped>
.tiny-tag-input-demo .tiny-tag-input {
margin-bottom: 20px;
}
</style>
29 changes: 29 additions & 0 deletions examples/sites/demos/pc/app/tag-input/disabled-readonly.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<template>
<div class="tiny-tag-input-demo">
<span>disabled: </span><tiny-tag-input v-model="data" :placeholder="placeholder" disabled></tiny-tag-input>
<span>readonly：</span><tiny-tag-input v-model="data1" :placeholder="placeholder" readonly></tiny-tag-input>
</div>
</template>

<script>
import { TinyTagInput } from '@opentiny/vue'

export default {
components: {
TinyTagInput
},
data() {
return {
data: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'],
data1: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'],
placeholder: 'please enter a tag'
}
}
}
</script>

<style scoped>
.tiny-tag-input-demo .tiny-tag-input {
margin-bottom: 20px;
}
</style>
Loading