# vue-move-tags

**Repository Path**: aizhangcheng/vue-move-tags

## Basic Information

- **Project Name**: vue-move-tags
- **Description**: 毫无疑问，不说话
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://www.npmjs.com/package/vue-move-tags
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 0
- **Created**: 2020-01-15
- **Last Updated**: 2021-08-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#####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(样例代码)
```aidl
<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;
            }
        }
    }
```
![example.jpg](./src/assets/example.jpg)