Skip to content

docs(tag-input): add example #3975

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

Open
zhaoxiaofeng876 wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

docs(tag-input): add example #3975

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5273930
docs(tag-input): add example
zhaoxiaofeng876 Jan 9, 2026
d630375
fix: revise review comments
zhaoxiaofeng876 Jan 12, 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
8 changes: 7 additions & 1 deletion 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
@@ -1,7 +1,13 @@
<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="data1"
:placeholder="placeholder"
tag-type="info"
tag-effect="light"
disabled
></tiny-tag-input>
<tiny-tag-input v-model="data2" :placeholder="placeholder" tag-type="success" tag-effect="plain"></tiny-tag-input>
</div>
</template>
Expand Down
Empty file added examples/sites/demos/pc/app/tag-input/basic-usage.spec.ts
View file
Open in desktop
Empty file.
8 changes: 7 additions & 1 deletion 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
@@ -1,7 +1,13 @@
<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="data1"
:placeholder="placeholder"
tag-type="info"
tag-effect="light"
disabled
></tiny-tag-input>
<tiny-tag-input v-model="data2" :placeholder="placeholder" tag-type="success" tag-effect="plain"></tiny-tag-input>
</div>
</template>
Expand Down
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>
Comment on lines +7 to +14
Copy link

@coderabbitai coderabbitai bot Jan 9, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

find . -path "*examples/sites/demos/pc/app/tag-input/clearable-tag-composition-api.vue"

Repository: opentiny/tiny-vue

Length of output: 134

🏁 Script executed:

cat "examples/sites/demos/pc/app/tag-input/clearable-tag-composition-api.vue"

Repository: opentiny/tiny-vue

Length of output: 534

🏁 Script executed:

find . -path "*TinyTagInput*" -o -path "*tag-input*" | grep -E "\.(ts|js|vue)$" | head -20

Repository: opentiny/tiny-vue

Length of output: 1323

🏁 Script executed:

rg "export.*TagInput" --type ts --type js -A 5 | head -50

Repository: opentiny/tiny-vue

Length of output: 1564

🌐 Web query:

Vue 3 v-model with reactive() vs ref() composition api

💡 Result:

Short summary — key points and practical guidance:

  • ref vs reactive (general)

    • ref(value): a Ref with .value; works for primitives and objects (objects become deeply reactive). Use when you may reassign the whole value or want an explicit ref. [1]
    • reactive(obj): returns a Proxy for objects/arrays; use for grouped/nested state when you won't replace the root object. Destructuring breaks reactivity unless you use toRefs(). [1][2]

  • v-model implications

    • v-model on a primitive prop → parent usually passes a ref (or primitive) and child emits update:modelValue; template unwrapping removes need for .value in templates. Prefer using ref for simple v-model bindings. [1]
    • v-model for object/form state → you can pass a reactive object, but props are shallow readonly (children must not mutate props directly). Instead, the child should emit updates (or receive toRef/toRefs from parent). Mutating a prop in a child triggers warnings. [2]
    • If you return/destructure reactive state for use across components/composables, convert properties to refs with toRef/toRefs so destructuring/passing preserves reactivity. [2]

  • Practical recommendations

    • Default to ref() for simple v-model values and when you may reassign the variable. [1][3]
    • Use reactive() for localized structured state (forms) in the component that owns it, but avoid replacing the root object and avoid mutating props in children — use emits or sync via v-model from parent. [1][2]
    • If sharing parts of a reactive object with children/composables, pass specific refs via toRef/toRefs or expose setter/getter computed wrappers to keep one-way flow and avoid prop mutation. [2]

References

  • Vue Reactivity API (ref, reactive). [1]
  • Vue reactivity utilities (toRef / toRefs) and v-model/props guidance. [2]
  • Opinion / best-practice summary recommending ref as a safe default. [3]

🏁 Script executed:

head -20 "examples/sites/demos/pc/app/tag-input/basic-usage-composition-api.vue"

Repository: opentiny/tiny-vue

Length of output: 730

Use ref() instead of reactive() for v-model bindings.

In Vue 3 Composition API, v-model="data" compiles to an assignment handler (@update:modelValue="value => { data = value }"). Since data is declared as const data = reactive([...]), reassignment is blocked. When TinyTagInput emits a new array, the binding fails silently. Use ref() instead:

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

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

 const placeholder = ref('please enter a tag')
</script>
📝 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
<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>
<script setup>
import { TinyTagInput } from '@opentiny/vue'
import { ref } from 'vue'
const data = ref(['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'])
const placeholder = ref('please enter a tag')
</script>
🤖 Prompt for AI Agents 
In @examples/sites/demos/pc/app/tag-input/clearable-tag-composition-api.vue
around lines 7 - 14, The v-model bound variable "data" is declared with
reactive([...]) preventing reassignment when TinyTagInput emits a new array;
change its declaration to use ref([...]) instead (i.e., replace const data =
reactive([...]) with const data = ref([...])) so v-model can assign the new
array correctly, and keep using "data" in the template (Vue will handle .value
for reactivity).


<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>
</div>
</template>
Comment on lines +1 to +6
Copy link

@coderabbitai coderabbitai bot Jan 9, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Minor docs polish: make the two labels consistent (readonly: vs readonly：) and consider wrapping each control in its own block for clearer layout.

🤖 Prompt for AI Agents 
In @examples/sites/demos/pc/app/tag-input/disabled-readonly-composition-api.vue
around lines 1 - 6, The labels in the template are inconsistent and cramped:
change the full-width Chinese colon after "readonly：" to an ASCII colon
"readonly:" so both labels match, and wrap each tiny-tag-input with its label in
its own block element (e.g., a div or p) to improve layout and spacing for the
two controls (update the span + tiny-tag-input pairs that reference
v-model="data" and v-model="data1").


<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>
Comment on lines +1 to +14
Copy link

@coderabbitai coderabbitai bot Jan 9, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

find . -name "disabled-readonly-composition-api.vue" -type f

Repository: opentiny/tiny-vue

Length of output: 138

🏁 Script executed:

cat -n examples/sites/demos/pc/app/tag-input/disabled-readonly-composition-api.vue

Repository: opentiny/tiny-vue

Length of output: 829

🌐 Web query:

Vue 3 Composition API v-model ref vs reactive binding

💡 Result:

Short answer

  • v-model expects a Ref-like value for two-way binding; in components the model exposed to the child is a ref (use defineModel() or modelValue + update:modelValue). [2][3]
  • Use ref() for single primitives or when you want to replace the whole value; use reactive() for grouped state/objects and access individual props (or convert props to refs with toRef/toRefs) when you need per-property v-model behavior. [1][4]

Why and how (concise)

  • Ref: ref(x) returns a Ref with .value; templates unwrap it so works and updating the ref updates the parent/child binding. Good for primitives or when you want the binding to replace the entire value. [1][2]
  • Reactive: reactive(obj) returns a proxy for an object. You cannot bind v-model directly to a nested property unless you reference that property (e.g. parent: reactive state; child: v-model="state.foo" — that binds the primitive property, not a Ref object). To pass a reactive object's property as a proper Ref prop you can use toRef(state, 'foo') / toRefs(state) so the child receives a Ref and two-way updates behave as expected. [1][4]
  • Components: defineModel() (or the modelValue/update:modelValue prop+emit pattern) gives you a Ref in the child that is synced with the parent — mutate it directly in the child to emit updates. defineModel() is a script-setup macro available in newer Vue 3 releases. [2][3]

Quick examples

  • Parent primitive (preferred): const count = ref(0); // child gets a Ref.
  • Parent object prop (per-property binding): const state = reactive({ name: '' }); OR expose toRef(state,'name') if you want to pass a Ref variable. [1][2][4]

Recommendation

  • For simple two-way inputs use ref. For complex forms/grouped state use reactive + toRef/toRefs for per-field v-models (or keep fields as refs inside a form object). This keeps intent clear and avoids losing reactivity when destructuring. [1][4]

Sources
[1] Vue Reactivity API (ref / reactive).
[2] Vue Guide — Component v-model (how v-model maps to a Ref in children).
[3] <script setup> API — defineModel() macro.
[4] LogRocket / community guides on ref vs reactive and best practices.

Blocker: placeholder is undefined and will cause a runtime error; also reactive([...]) is incompatible with v-model binding—use ref([...]) instead.

For two-way binding with v-model in Vue 3 Composition API, the component expects a Ref object. Using reactive() for arrays/primitives that need to be replaced entirely breaks the reactivity contract. Replace reactive() with ref() for both data and data1, and define the missing placeholder.

Fix 
<script setup>
-import { reactive } from 'vue'
+import { ref } 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'])
+const data = ref(['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'])
+const data1 = ref(['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'])
+const placeholder = ref('please enter a tag')
</script>
📝 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
<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 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>
<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 setup>
import { ref } from 'vue'
import { TinyTagInput } from '@opentiny/vue'
const data = ref(['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'])
const data1 = ref(['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'])
const placeholder = ref('please enter a tag')
</script>
🤖 Prompt for AI Agents 
In @examples/sites/demos/pc/app/tag-input/disabled-readonly-composition-api.vue
around lines 1 - 14, The template uses placeholder (undefined) and binds v-model
to reactive arrays which should be Refs; define a placeholder constant and
change data and data1 to use ref([...]) instead of reactive([...]) so
TinyTagInput's v-model receives a Ref; update imports to include ref and ensure
placeholder is declared in the script setup.


<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>
Comment on lines +3 to +4
Copy link

@coderabbitai coderabbitai bot Jan 9, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Fix punctuation inconsistency in label.

Line 3 uses an English colon ": " while Line 4 uses a Chinese full-width colon "：". For consistency, both labels should use the same punctuation style.

📝 Suggested fix 
     <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>
+    <span>readonly: </span><tiny-tag-input v-model="data1" :placeholder="placeholder" readonly></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
<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>
<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>
🤖 Prompt for AI Agents 
In @examples/sites/demos/pc/app/tag-input/disabled-readonly.vue around lines 3 -
4, Change the punctuation in the label for the readonly example to match the
disabled example: replace the Chinese full-width colon after the "readonly" span
with an English ASCII colon and space so both labels use ": " (affecting the
span before the tiny-tag-input bound to v-model="data1"); ensure the visible
text reads "readonly: " to match the "disabled: " label.

</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>
12 changes: 12 additions & 0 deletions examples/sites/demos/pc/app/tag-input/draggable-tag-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<template>
<div class="tiny-tag-input-demo">
<tiny-tag-input v-model="data" draggable></tiny-tag-input>
</div>
</template>

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

const data = reactive(['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'])
</script>
Empty file added examples/sites/demos/pc/app/tag-input/draggable-tag.spec.ts
View file
Open in desktop
Empty file.
20 changes: 20 additions & 0 deletions examples/sites/demos/pc/app/tag-input/draggable-tag.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" draggable></tiny-tag-input>
</div>
</template>

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

export default {
components: {
TinyTagInput
},
data() {
return {
data: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6']
}
}
}
</script>
20 changes: 20 additions & 0 deletions examples/sites/demos/pc/app/tag-input/max-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" :max="max"></tiny-tag-input>
</div>
</template>

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

const data = reactive(['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'])
const max = 5
const placeholder = '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/max.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" :max="max"></tiny-tag-input>
</div>
</template>

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

export default {
components: {
TinyTagInput
},
data() {
return {
data: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'],
max: 5,
placeholder: 'enter up to 5 tags'
}
}
}
</script>

<style scoped>
.tiny-tag-input-demo .tiny-tag-input {
margin-bottom: 20px;
}
</style>
26 changes: 26 additions & 0 deletions examples/sites/demos/pc/app/tag-input/prefix-suffix-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<template>
<div class="tiny-tag-input-demo">
<tiny-tag-input v-model="data" :placeholder="placeholder">
<template #prefix>
<span>prefix:</span>
</template>
<template #suffix>
<span>suffix</span>
</template>
</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>
34 changes: 34 additions & 0 deletions examples/sites/demos/pc/app/tag-input/prefix-suffix.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<template>
<div class="tiny-tag-input-demo">
<tiny-tag-input v-model="data" :placeholder="placeholder">
<template #prefix>
<span>prefix:</span>
</template>
<template #suffix>
<span>suffix</span>
</template>
</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/separator-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" :separator="separator"></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')
const separator = ref(',')
</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/separator-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" :separator="separator"></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',
separator: ','
}
}
}
</script>

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