# vue-list-checkbox

> 列表选择组件VUE2版本

Latest version **1.2.7** (published 2021-08-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-list-checkbox
pnpm add vue-list-checkbox
yarn add vue-list-checkbox
bun add vue-list-checkbox
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.7 |
| Published | 2021-08-19 |
| First published | 2021-06-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 844.2 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | gp |
| Maintainers | gpbob |
| Keywords | list, checkBox, 列表, 多选, vue-list-checkbox, vue-list, list-checkbox, checkbox-list, 自定义列表, custom-list, 自定义checkbox, custom-checkbox |

## Links

- npm: https://www.npmjs.com/package/vue-list-checkbox
- npm.io page: https://npm.io/package/vue-list-checkbox

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.6.5

## Recent versions

- 1.2.7 (latest) — 2021-08-19
- 1.2.6 — 2021-08-17
- 1.2.5 — 2021-08-17
- 1.2.4 — 2021-08-17
- 1.2.3 — 2021-08-17
- 1.2.2 — 2021-08-17
- 1.2.1 — 2021-07-20
- 1.1.1 — 2021-06-23
- 1.1.0 — 2021-06-22
- 1.0.15 — 2021-06-22
- 1.0.14 — 2021-06-22
- 1.0.13 — 2021-06-22
- 1.0.12 — 2021-06-22
- 1.0.11 — 2021-06-22
- 1.0.10 — 2021-06-21
- … 10 more at https://npm.io/package/vue-list-checkbox/versions

## README

# ListCheckBox
## 效果图
![效果图](https://i.ibb.co/VjNygjH/1623909556-1.png)
![效果图](https://i.ibb.co/kq9NfJZ/20210817134256.png)
![效果图](https://i.ibb.co/J5sfBYz/20210817134301.png)
## 使用说明
|  参数  | 类型 | 默认值 | 必填 |说明 |
|  ----  | ----  | ---- |  ---- | ---- |
| defaultColor  | string | #1989fa(蓝色) | 否 | 默认主题色 | 
| linkBorder  |  boolean | true | 否 |复选框边界和配置色统一 |
| type  |  string | pane | 否 |选择按钮类型 pane-方框，circle-圆形，custom-自定义 |
| selectAll  | boolean | false | 否 |是否全选 |
| isAll  | boolean | true | 否 |是否显示全选按钮 |
| disabledAll  |  boolean | false | 否 |禁止全选 |
| data  |  array | [] | 是 |数据 |
| allText  | string | 全选 | 否 |全选文本 |
| padding  | number | 10 | 否 |列表上下padding |
| size  | number | 16 | 否 | 按钮大小 |
| activeSize  | number | 10 | 否 | 按钮选中大小 |
| position  | string | left | 否 | 按钮位置 (left,right) |
| hiddenButton  | boolean | false | 否 | 隐藏选择按钮 |

## 方法
|  方法名 | 返回值 |
|  ----  | ----  | 
|  select | 选中的数据 |
|  $refs.xx.selectAllData | 全选数据 |
|  $refs.xx.reset | 重置选项 |

如要自定义全选功能，获取全选的数据可使用$refs操作  调用selectAllData方法 上述select方法将会返回选中数据
```
selectAll(){
	this.$refs.listcheckbox.selectAllData()
}
```

## data数据说明：

data数据格式为：
```
[
    {
        name:'张三',
        value:1,
        selected:true,
        disabled:true,
    },
    {
        name:'里斯',
        value:2
    },
]
```

其中selected默认为false,disabled默认为false,可设置。
其余数据可自定义设置
## 自定义内容
```
 <template v-slot:checkSlot="item">
        <div class="test">
          <p>{{ item.data.name }}</p>
          <p>{{ item.data.value }}</p>
        </div>
 </template>
```

## 使用方法(例子)

```
<template>
  <div class="content">
    <VueListCheckbox
      :selectAll="false"
      :data="data"
      @select="selectData"
    >
      <template v-slot:checkSlot="item">
        <div class="test">
          <p>{{ item.data.name }}</p>
          <p>{{ item.data.value }}</p>
        </div>
      </template>
      
      //自定义按钮
      <!-- <template v-slot:customBtn>
      </template>
      <template v-slot:customDisabledBtn>
      </template> -->

    </VueListCheckbox>
  </div>
</template>

<script>
import Vue from 'vue';
import VueListCheckbox from 'vue-list-checkbox'
Vue.use(VueListCheckbox)
export default {
  data() {
    return {
      data: [
        {
          name: "名称一",
          value: "可自定义内容",
          selected: true,
        },
        {
          name: "名称二",
          value: 2,
          disabled: true,
          selected: true,
        },
        {
          name: "名称三",
          value: 3,
          disabled: true,
        },
        {
          name: "名称四",
          value: 4,
        },
      ],
    };
  },
  methods: {
    selectData(data) {
      console.log(data);
    },
  },
};
</script>

<style>
.content {
  padding: 40rpx;
}

.test {
  display: flex;
  flex-direction: column;
}
</style>

```

## type为custom时，自定义选择效果：
### 选中自定义按钮
```
//添加插槽名为customBtn
<template v-slot:customBtn>
	<image style="width: 15px;height: 15px;" src="../../static/select.png" mode=""></image>
</template>
```
### 禁止选中自定义按钮
```
//添加插槽名为customBtn
<template v-slot:customDisabledBtn>
	<image style="width: 15px;height: 15px;" src="../../static/disabledSel.png" mode=""><image>
</template>
```
## github
https://github.com/GPBOB/ListCheckBox/tree/vue2.0

---
_Source: https://npm.io/package/vue-list-checkbox · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._