149 lines
3.7 KiB
Vue
149 lines
3.7 KiB
Vue
<template>
|
|
<div style="width: 100%;">
|
|
<el-input v-model="centent" suffix-icon="Search" @input="inputSearch" placeholder="搜索"></el-input>
|
|
<ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto" :style="'height:' + height" :infinite-scroll-immediate="false" infinite-scroll-distance="5">
|
|
<li v-for="item in cardlist" :key="item.user_id" class="infinite-list-item" :class="{ active: item.active }"
|
|
@click="handleItem(item)">
|
|
<el-image class="user-avatar" :src="item.user_avatar"></el-image>
|
|
<span class="nickname">{{ item.user_name }}</span>
|
|
<span class="sex">
|
|
<!-- <el-icon v-if="item.sex == '男'" style="color: rgb(121.3, 187.1, 255);">
|
|
<svg class="icon" aria-hidden="true">
|
|
<use xlink:href="#icon-nan"></use>
|
|
</svg>
|
|
</el-icon>
|
|
<el-icon v-else style="color: rgb(248, 152.1, 152.1);">
|
|
<svg class="icon" aria-hidden="true">
|
|
<use xlink:href="#icon-nv"></use>
|
|
</svg>
|
|
</el-icon> -->
|
|
<!-- <el-icon v-if="item.active" class="check"><Select /></el-icon> -->
|
|
</span>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, onMounted, reactive } from 'vue'
|
|
const props = defineProps({
|
|
cardlist: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
multiple: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: '300px'
|
|
}
|
|
})
|
|
const centent = ref('')
|
|
const emits = defineEmits(["update:modelValue", 'load', 'input', 'change'])
|
|
const load = () => {
|
|
emits('load')
|
|
}
|
|
|
|
let timer = null
|
|
const inputSearch = (e) => {
|
|
// if (timer != null) {
|
|
clearTimeout(timer)
|
|
// timer = null
|
|
// }
|
|
timer = setTimeout(() => {
|
|
emits('input', e)
|
|
}, 500)
|
|
}
|
|
|
|
const handleItem = (row) => {
|
|
if (props.multiple) {
|
|
if (!row.active) {
|
|
row.active = true
|
|
} else {
|
|
row.active = false
|
|
}
|
|
let arr = []
|
|
props.cardlist.forEach((el) => {
|
|
if (el.active === true) {
|
|
arr.push(el.user_id)
|
|
}
|
|
})
|
|
setTimeout(() => {
|
|
emits('change', arr)
|
|
emits("update:modelValue", arr)
|
|
})
|
|
|
|
} else {
|
|
// 先全部清空
|
|
props.cardlist.forEach(el => { el.active = false })
|
|
// 再设当前为true
|
|
row.active = true
|
|
// emit后外部拿到的cardlist状态是唯一active
|
|
emits('change', row.user_id)
|
|
emits("update:modelValue", row.user_id)
|
|
}
|
|
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
})
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.infinite-list {
|
|
list-style: none;
|
|
}
|
|
|
|
|
|
.infinite-list .infinite-list-item {
|
|
display: flex;
|
|
height: 46px;
|
|
// margin: 10px 0;
|
|
padding: 0 10px;
|
|
line-height: 46px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
|
|
&:hover {
|
|
background-color: var(--el-color-primary-light-9);
|
|
}
|
|
|
|
.user-avatar {
|
|
height: 32px;
|
|
width: 32px;
|
|
border-radius: 4px;
|
|
vertical-align: middle;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.nickname {
|
|
margin: 0 20px;
|
|
font-size: 14px ;
|
|
}
|
|
|
|
.sex {
|
|
.el-icon {
|
|
font-size: 18px;
|
|
transform: translateY(5px);
|
|
|
|
}
|
|
}
|
|
|
|
.check {
|
|
position: absolute;
|
|
right: 12px;
|
|
color: var(--el-color-primary);
|
|
top: 20%;
|
|
}
|
|
}
|
|
|
|
.active {
|
|
background-color: var(--el-color-primary-light-7);
|
|
}
|
|
|
|
.infinite-list .infinite-list-item+.list-item {
|
|
margin-top: 10px;
|
|
}
|
|
</style> |