56 lines
1.2 KiB
Vue
56 lines
1.2 KiB
Vue
<template>
|
|
<div style="margin-left: 1px">
|
|
<a-empty v-if="selectedUsers.length === 0" />
|
|
<div v-else>
|
|
<a-button-group
|
|
v-for="(user, index) in selectedUsers"
|
|
:key="'user-' + user.id + '-' + index"
|
|
class="small-space"
|
|
>
|
|
<a-button class="btn-green" size="small">
|
|
<UserOutlined />
|
|
{{ user.realname }}
|
|
</a-button>
|
|
<a-button v-if="!disabled" class="btn-green" size="small" @click="deleteUser(index)">
|
|
<CloseOutlined />
|
|
</a-button>
|
|
</a-button-group>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { UserOutlined, CloseOutlined } from '@ant-design/icons-vue';
|
|
import type { UserItem } from './types';
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
disabled?: boolean;
|
|
selectedUsers: UserItem[];
|
|
}>(),
|
|
{
|
|
disabled: false,
|
|
selectedUsers: () => [],
|
|
}
|
|
);
|
|
|
|
const emit = defineEmits(['update:selectedUsers']);
|
|
|
|
function deleteUser(index: number) {
|
|
const arr = [...props.selectedUsers];
|
|
arr.splice(index, 1);
|
|
emit('update:selectedUsers', arr);
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.small-space {
|
|
margin: 2px;
|
|
}
|
|
.btn-green {
|
|
background-color: #52c41a;
|
|
color: #fff;
|
|
border-color: #52c41a;
|
|
}
|
|
</style>
|