0.1.0 • Published 4 years ago
dlrsidelist v0.1.0
侧选列表
侧选列表:【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 dlrsidelist@0.0.6)
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 | 关闭事件 |