侧选列表

侧选列表：【m端，无依赖性】 1: 支持多选 2: 支持单选 备注: 使用插件前请确认是否满足业务需求，如有合理的个性化需求，控件会考虑后期整理迭代 体积: 22K

git 地址：

https://git.corpautohome.com/gp_rd_fe_dealer/Dealer_Components/tree/dev/m/dealerUI_vue/sidelist

cdn 地址：

<script src="https://s.autoimg.cn/dealer/m/dealerUI/dlrvue/vue/vue.min.js"></script>
<script src="https://s.autoimg.cn/dealer/m/dealerUI/dlrvue/sidelist/sidelist.min.0.0.6.js"></script>

demo 页

http://10.168.66.123:9090/out/dealerUI/dlrComponents/components/sidelist

node 环境引入

1:安装 
  npm install dlrsidelist (如指定版本号：npm install [email protected])

2：引入并注册
  import Vue from 'vue' 
  import sidelist from 'dlrsidelist'
  Vue.use(sidelist)

例子

代码示例

<template>
  <section>
    <Button @click="showListHandlerMulti()">多选列表</Button>
    </br></br></br>
    <Button @click="showListHandlerSingle()">单选列表</Button>
  <!-- start 侧滑列表 -->
  <dlr-side-list ref="dealerList"
    :data="list"
    title="销售列表"
    current-info="最多选3家经销商"
    :is-select-all='false'
    :mode="mode"
    :before-select="onBeforeSelect"
    :selected-arr="selectedArr"
    @on-selected="selecteHandler"
    @on-close="closeHandler"
    v-model="ui.show">
    <dlr-side-list-item v-for="(item) in list" :key="item.id"
      :data="item" :item-id="item.id">
      {{item.text}}
    </dlr-side-list-item>
  </dlr-side-list>
  <!-- end 侧滑列表 -->

</section>
</template>

<script>
export default {
  data () {
    return {
      selectedArr: [0, 1, 2, 3, 4, 5],
      ui: { show: false },
      mode: 'multi', // 单选：single,多选：multi
      list: []
    }
  },
  mounted () {
    setTimeout(() => {
      this.loadData()
      // this.list = []
      // this.$refs['dealerList'].showNoneData() // 无数据，提示‘暂无数据’
      // this.$refs['dealerList'].hideNoneData() // 关闭： 无数据，提示‘暂无数据’
    }, 1000)
    setTimeout(() => {
      this.selectedArr = [2, 5]
    }, 3000)
  },
  methods: {
    loadData () {
      this.list = []
      for (let i = 0; i < 6; i++) {
        const item = { id: i, name: i.toString(), text: `项目${i}` }
        this.list.push(item)
      }
    },
    // 多选
    showListHandlerMulti () {
      this.mode = 'multi'
      this.ui.show = true
    },
    // 单选
    showListHandlerSingle () {
      this.mode = 'single'
      this.ui.show = true
    },
    // 单选、多选 【选完成事件】
    selecteHandler (data) {
      console.log('on-selected:', data)
    },
    // 关闭事件
    closeHandler () {
      console.log('on-close')
    },
    // 选中行的钩子函数，用户可自定义是否选中该数据
    onBeforeSelect (item, selectItems) {
      console.log('onBeforeSelect', 'item', item, 'selectItems', selectItems)
      if (selectItems.length === 3 && !selectItems.some(d => d.id === item.id)) {
        alert('最多选3家')
        return false
      }
      return true
    }
  }
}
</script>

API

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|-------|---------|-------|--------| | mode | 单选、多选 | String | 'single','multi' | single |
| title | 标题 | String | '' | 标题 |
| none-data-text | 数据为空时的文案,自定义 | String | | '暂无数据' | | v-model | 显示控制 | Boolean | '' | false |
| selected-arr | 默认选中项关键字(id) | Array | [] | [] | | before-select | 选中行的钩子函数，用户可自定义是否选中该数据 | Function| | ()=>{ return true } | | is-select-all | 是否带有‘全选’功能 | Boolean| | true |
| current-info | 标题信息提示 | String| | '' |

Methods

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|-------|---------|-------|--------| | showNoneData | 提示暂无数据 | | | | | hideNoneData | 关闭 提示暂无数据 | | | |

Event

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|-------|---------|-------|--------| | on-selected | 选中事件 | | | | | on-close | 关闭事件 | | | |