vue-list-checkbox

    1.2.7 • Public • Published

    ListCheckBox

    效果图

    效果图 效果图 效果图

    使用说明

    参数 类型 默认值 必填 说明
    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

    Install

    npm i vue-list-checkbox

    DownloadsWeekly Downloads

    17

    Version

    1.2.7

    License

    MIT

    Unpacked Size

    864 kB

    Total Files

    19

    Last publish

    Collaborators

    • gpbob