#####Install（安装）

npm i vue-move-tags

#####Quick Start（快速开始）

import Vue from 'vue'
import MoveTags from 'vue-move-tags'
import 'vue-move-tags/lib/MoveTags.css'
Vue.use(MoveTags)

###ComponentArgs（组件参数） | Item | explanation | Type | Default | | ----------------------- | ----------------------------| ------ | ------- | | tagList | 需要渲染的数组 | Array | 必须 | | size | 组件大小 mini/small/medium | String | mini | ###Options（配置选项）

| Item | explanation | Type | Default | | ----------------------- | -----------------------------| ------ | ------- | | defaultSelect | 默认选中第几个 | Number | -1 | | showName | 需要显示的属性名 | String | name | | leftBtnColor | 左按钮默认颜色 | String | #8799a3 | | rightBtnColor | 右按钮默认颜色 | String | #8799a3 | | tagsColor | 背景默认颜色 | String | #2C3E50 | | tagsItemColor | 单项条默认背景颜色 | String | #8799a3 | | tagsItemHover | 单项条悬浮时的颜色 | String | #e54d42 | | tagsItemHoverTextColor | 单项条悬浮时文字的颜色 | String | #ffffff | | tagsChooseItemColor | 单项条选中默认背景颜色 | String | #1cbbb4 | | tagsItemTextColor | 单项条文字默认颜色 | String | #ffffff | | tagsChooseItemTextColor | 单项条文字选中默认颜色 | String | #ffffff | | tagsItemFamily | 单项条文字字体 | String | 微软雅黑 |

颜色支持RGB格式：rgb(0,0,0,0)

###Events

| Item | explanation | | ---------------- | ---------------------- | | getMoveTagsEvent | 获取到每一个item的取值 |

###ExampleDemo(样例代码)

<template>
    <div>
        <vue-move-tags :tag-list="tagList" size="small" :options="options"
                       @get-move-tags-event="getMoveTagsEvent"></vue-move-tags>
    </div>
</template>
    export default {
        name: "test",
        data() {
            return {
                tagList: [{
                    name: "LoveZhangCheng",
                    value: "22"
                }, {
                    name: "迪丽热巴",
                    value: "23"
                }, {
                    name: "古力娜扎",
                    value: "24"
                }, {
                    name: "张天爱",
                    value: "21"
                }, {
                    name: "刘亦菲",
                    value: "22"
                }, {
                    name: "关晓彤",
                    value: "24"
                }, {
                    name: "李沁",
                    value: "20"
                }],
                //配置项
                options: {
                    //默认选中第index个
                    defaultSelect: 1,
                    //需要显示的属性名，默认name
                    showName: "name",
                    //左按钮颜色
                    leftBtnColor: "",
                    //右按钮颜色
                    rightBtnColor: "",
                    //背景颜色
                    tagsColor: "",
                    //单项item颜色
                    tagsItemColor: "",
                    //单项item悬浮Hover时的颜色
                    tagsItemHover:"",
                    //单项item悬浮Hover时文字的颜色
                    tagsItemHoverTextColor:"",
                    //单项item选中颜色
                    tagsChooseItemColor: "",
                    //单项item文字颜色
                    tagsItemTextColor: "",
                    //单项item文字选中颜色
                    tagsChooseItemTextColor: "",
                    //单项item文字字体
                    tagsItemFamily: "黑体",
                },
                person: {}
            }
        },
        methods: {
            getMoveTagsEvent(e) {
                this.person = e;
            }
        }
    }