jiuyiUniapp/jiuyi2/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/index.vue

139 lines
3.1 KiB
Vue

<template>
<div
ref="toolbarItemRef"
:class="[
'toolbar-item-container',
!isPC && 'toolbar-item-container-h5',
isUniFrameWork && 'toolbar-item-container-uni',
]"
>
<div
:class="[
'toolbar-item-container-icon',
isUniFrameWork && 'toolbar-item-container-uni-icon',
]"
@click="toggleToolbarItem"
>
<Icon
:file="props.iconFile"
class="icon"
:width="props.iconWidth"
:height="props.iconHeight"
/>
</div>
<div
v-if="isUniFrameWork"
:class="['toolbar-item-container-uni-title']"
>
{{ props.title }}
</div>
<div
v-show="showDialog"
ref="dialogRef"
:class="[
'toolbar-item-container-dialog',
isDark && 'toolbar-item-container-dialog-dark',
!isPC && 'toolbar-item-container-h5-dialog',
isUniFrameWork && 'toolbar-item-container-uni-dialog',
]"
>
<BottomPopup
v-if="props.needBottomPopup && !isPC"
class="toolbar-bottom-popup"
:show="showDialog"
@touchmove.stop.prevent
@onClose="onPopupClose"
>
<slot />
</BottomPopup>
<slot v-else />
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from '../../../../adapter-vue';
import { outsideClick } from '@tencentcloud/universal-api';
import Icon from '../../../common/Icon.vue';
import BottomPopup from '../../../common/BottomPopup/index.vue';
import { isPC, isUniFrameWork } from '../../../../utils/env';
import TUIChatConfig from '../../config';
const props = defineProps({
iconFile: {
type: String,
required: true,
},
title: {
type: String,
default: '',
},
needDialog: {
type: Boolean,
default: true,
},
iconWidth: {
type: String,
default: '20px',
},
iconHeight: {
type: String,
default: '20px',
},
// Whether to display the bottom popup dialog on mobile devices
// Invalid on PC
needBottomPopup: {
type: Boolean,
default: false,
},
});
const emits = defineEmits(['onIconClick', 'onDialogClose', 'onDialogShow']);
const isDark = ref(TUIChatConfig.getTheme() === 'dark');
const showDialog = ref(false);
const toolbarItemRef = ref();
const dialogRef = ref();
const toggleToolbarItem = () => {
emits('onIconClick', dialogRef);
if (isPC) {
outsideClick.listen({
domRefs: toolbarItemRef.value,
handler: closeToolbarItem,
});
}
if (!props.needDialog) {
return;
}
toggleDialogDisplay(!showDialog.value);
};
const closeToolbarItem = () => {
showDialog.value = false;
emits('onDialogClose', dialogRef);
};
const toggleDialogDisplay = (showStatus: boolean) => {
if (showDialog.value === showStatus) {
return;
}
showDialog.value = showStatus;
switch (showStatus) {
case true:
emits('onDialogShow', dialogRef);
break;
case false:
emits('onDialogClose', dialogRef);
}
};
const onPopupClose = () => {
showDialog.value = false;
};
defineExpose({
toggleDialogDisplay,
});
</script>
<style lang="scss" scoped src="./style/index.scss"></style>