docs(tag-input): add example (#3975)

* docs(tag-input): add example

* fix: revise review comments

Author: zhaoxiaofeng876

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

@@ -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>

examples/sites/demos/pc/app/tag-input/basic-usage.spec.ts

@@ -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>

examples/sites/demos/pc/app/tag-input/basic-usage.vue

@@ -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>

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

@@ -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>

examples/sites/demos/pc/app/tag-input/clearable-tag.vue

@@ -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>

examples/sites/demos/pc/app/tag-input/collapsed-tag-composition-api.vue

@@ -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>

examples/sites/demos/pc/app/tag-input/collapsed-tag.vue

@@ -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>
+
+<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>

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

@@ -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>

examples/sites/demos/pc/app/tag-input/disabled-readonly.vue

@@ -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>