vue-shuttle

一款基于 vue 的轻量级穿梭框插件。支持高度自定义。

属性

| 属性名 | 类型 | 说明 | | --------------------- | ------ | --------------------------------- | | data | Array | 渲染数据源 | | height | String | 组件高度；'100px' | | buttonText | Array | ['向右移动', '向左移动'] | | leftDefaultChecked | Array | 初始状态下左侧勾选的数据 | | leftDefaultCheckedKey | String | 初始状态下左侧勾选的数据的 key 值 |

事件

| 事件名 | 参数 | 说明 | | ------------ | ---- | -------------------------------- | | toLeftBottom | none | 左边选择框滑动到底事件，用于分页 |

方法

| 方法名 | 参数 | 说明 | | -------------- | --------------- | ------------------------------------------------------------------------------------------ | | obtain | none | 将指定属性名返回对应数组。获得选择数组对象中某个属性的数组。例如获取选中项 id 组成的数组。 | | selectAllLeft | Boolen:isSelect | 全选/取消 左边;根据入参 isSelect | | selectAllRight | Boolen:isSelect | 全选/取消 左边;根据入参 isSelect |

插槽

| 插槽名 | 数据 | 说明 | | ------ | ---- | -------------- | | header | none | 头部搜索等区域 | | source | item | 左边渲染区域 | | target | item | 右边渲染区域 |

示例

<VueShuttle
  class="rectangle-shuttle"
  :data="shuttleOne.data"
  :height="shuttleOne.height"
>
  <template v-slot:source="{ item }">
    <div class="rectangle">
      <span class="rectangle_name"> {{ item.name }} </span>
      <span class="rectangle_sex"> {{ item.sex }} </span>
      <span class="rectangle_age"> {{ item.age }} </span>
      <p class="rectangle_hobby">
        <span v-for=" (h,i) in item.hobby" :key="h+i"> {{ h }} </span>
      </p>
    </div>
  </template>
  <template v-slot:target="{ item }">
    <div class="rectangle">
      <span class="rectangle_name"> {{ item.name }} </span>
      <span class="rectangle_sex"> {{ item.sex }} </span>
      <span class="rectangle_age"> {{ item.age }} </span>
      <p class="rectangle_hobby">
        <span v-for=" (h,i) in item.hobby" :key="h+i"> {{ h }} </span>
      </p>
    </div>
  </template>
</VueShuttle>