插件名称 | smart-tagz |
---|---|
发布时间 | 2020年12月10日 |
插件作者 | prabhuignoto |
适用于Vue.js 3的应用程序的功能齐全且设计良好的标签输入组件。
# Yarn
$ yarn add smart-tagz --save
# NPM
$ npm i smart-tagz --save
v0.1.12(01/06/2021)
1.导入smart-tagz组件。
import { defineComponent } from "vue";
import { SmartTagz } from "smart-tagz";
import "smart-tagz/dist/smart-tagz.css";
export default defineComponent({
name: "Basic",
components: {
SmartTagz,
}
});
2.将组件添加到应用模板。
<smart-tagz />
3.使用以下 props 自定义标签输入。
// is readonly
readOnly: {
type: Boolean,
default: false,
},
// default Tags
defaultTags: {
type: Array as PropType<string[]>,
default: () => [],
},
// container width
width: {
type: String,
default: "100%",
},
// sources array for autosuggest
sources: {
type: Array as PropType<string[]>,
default: () => [],
},
// switch to enable autosuggest
autosuggest: {
type: Boolean,
default: false,
},
// prop to enbale text paste
allowPaste: {
type: Object as PropType<{ delimiter: string }>,
default: null,
},
// makes the tag editable
editable: {
type: Boolean,
default: false,
},
// prop to control duplicates in the list
allowDuplicates: {
type: Boolean,
default: true,
},
// maximum number of tags allowed
maxTags: {
type: Number,
default: 20,
},
// placeholder for the input box
inputPlaceholder: {
type: String,
default: "Enter tag...",
},
quickDelete: {
type: Boolean,
default: false
},
// custom styles here
theme: {
type: Object as PropType<{
primary: string;
secondary: string;
tagTextColor: string;
}>,
default: () => ({
primary: "#6093ca",
background: "#eaf1f8",
tagTextColor: "#fff",
}),
},