Tags input demo
https://github.com/gurudin/vue-tags-input
安装 (Installation)
-
添加包:
$ yarn add vue2-tags-input
$ npm install vue2-tags-input
-
引入模块
import tagsInput from "vue-tags-input"; import "vue-tags-input/dist/vue-tags-input.css"; -
文件引入
<!-- CDNJS :: Vue (https://cdnjs.com/) --> <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script> <!-- Require js --> <script src="vue-tags-input.min.js"></script> <!-- Require css --> <link href="vue-tags-input.css" rel="stylesheet">
Demo
使用:
<html>
<body>
<tags-input placeholder="Tags input"></tags-input>
</body>
</html>
<script>
Vue.component('tags-input', VueTagsInput.tagsInput);
</script>示例:
<tags-input
placeholder="{{sample.placeholder}}"
bootstrap="{{sample.bootstrap}}"
label-style="{{sample.labelStyle}}"
:on-change="onChange"
:callback="callback"
data-value="{{sample.dataValue}}"
ref="tags"></tags-input>回调:
/* 改变回调方法 */
function onChange(value)
Result
{{funcData.changeData}}
/* 操作回调方法 */
function callback(data, index){
return true|false;
}
Result
index: {{funcData.callInx}}
data:{{funcData.callData}}
参数:
方法:
{{funcData.tags}}