@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.0

package/src/TUIRoom/components/common/icons/VideoOpenIcon.vue

@@ -1,6 +1,22 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.3182 8.30727L13.7493 9.07358L14.3419 8.74024L17.5923 6.91185C17.6923 6.8556 17.8159 6.92786 17.8159 7.04259L17.8159 14.2896C17.8159 14.4043 17.6923 14.4765 17.5923 14.4203L14.3419 12.5919L13.7493 12.2586L12.9158 13.7402L13.5084 14.0736L16.7589 15.902C17.9921 16.5957 19.5159 15.7045 19.5159 14.2896L19.5159 7.04259C19.5159 5.62765 17.9921 4.73649 16.7589 5.43017L14.1234 6.91263L13.3182 8.30727Z" fill="currentColor" />
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M1.7 5.03301V15.633H12.3V5.03301H1.7ZM1.5 3.33301C0.671573 3.33301 0 4.00458 0 4.83301V15.833C0 16.6614 0.671573 17.333 1.5 17.333H12.5C13.3284 17.333 14 16.6614 14 15.833V4.83301C14 4.00458 13.3284 3.33301 12.5 3.33301H1.5Z" fill="currentColor"/>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M13.3182 8.30727L13.7493 9.07358L14.3419 8.74024L17.5923 6.91185C17.6923 6.8556 17.8159 6.92786 17.8159 7.04259L17.8159 14.2896C17.8159 14.4043 17.6923 14.4765 17.5923 14.4203L14.3419 12.5919L13.7493 12.2586L12.9158 13.7402L13.5084 14.0736L16.7589 15.902C17.9921 16.5957 19.5159 15.7045 19.5159 14.2896L19.5159 7.04259C19.5159 5.62765 17.9921 4.73649 16.7589 5.43017L14.1234 6.91263L13.3182 8.30727Z"
+      fill="currentColor"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1.7 5.03301V15.633H12.3V5.03301H1.7ZM1.5 3.33301C0.671573 3.33301 0 4.00458 0 4.83301V15.833C0 16.6614 0.671573 17.333 1.5 17.333H12.5C13.3284 17.333 14 16.6614 14 15.833V4.83301C14 4.00458 13.3284 3.33301 12.5 3.33301H1.5Z"
+      fill="currentColor"
+    />
   </svg>
-</template>
+</template>

package/src/TUIRoom/components/common/icons/VirtualBackgroundIcon.vue

@@ -1,12 +1,34 @@
 <template>
-  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <mask id="path-1-inside-1_9286_2150" fill="white">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M12 10C14.2091 10 16 8.20914 16 6C16 3.79086 14.2091 2 12 2C9.79086 2 8 3.79086 8 6C8 8.20914 9.79086 10 12 10ZM10 12C6.68629 12 4 14.6863 4 18V21H20V18C20 14.6863 17.3137 12 14 12H10Z" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M12 10C14.2091 10 16 8.20914 16 6C16 3.79086 14.2091 2 12 2C9.79086 2 8 3.79086 8 6C8 8.20914 9.79086 10 12 10ZM10 12C6.68629 12 4 14.6863 4 18V21H20V18C20 14.6863 17.3137 12 14 12H10Z"
+      />
     </mask>
-    <path d="M4 21H2.3V22.7H4V21ZM20 21V22.7H21.7V21H20ZM14.3 6C14.3 7.27025 13.2703 8.3 12 8.3V11.7C15.148 11.7 17.7 9.14802 17.7 6H14.3ZM12 3.7C13.2703 3.7 14.3 4.72975 14.3 6H17.7C17.7 2.85198 15.148 0.3 12 0.3V3.7ZM9.7 6C9.7 4.72975 10.7297 3.7 12 3.7V0.3C8.85198 0.3 6.3 2.85198 6.3 6H9.7ZM12 8.3C10.7297 8.3 9.7 7.27025 9.7 6H6.3C6.3 9.14802 8.85198 11.7 12 11.7V8.3ZM5.7 18C5.7 15.6252 7.62518 13.7 10 13.7V10.3C5.74741 10.3 2.3 13.7474 2.3 18H5.7ZM5.7 21V18H2.3V21H5.7ZM20 19.3H4V22.7H20V19.3ZM18.3 18V21H21.7V18H18.3ZM14 13.7C16.3748 13.7 18.3 15.6252 18.3 18H21.7C21.7 13.7474 18.2526 10.3 14 10.3V13.7ZM10 13.7H14V10.3H10V13.7Z" fill="currentColor" mask="url(#path-1-inside-1_9286_2150)" />
+    <path
+      d="M4 21H2.3V22.7H4V21ZM20 21V22.7H21.7V21H20ZM14.3 6C14.3 7.27025 13.2703 8.3 12 8.3V11.7C15.148 11.7 17.7 9.14802 17.7 6H14.3ZM12 3.7C13.2703 3.7 14.3 4.72975 14.3 6H17.7C17.7 2.85198 15.148 0.3 12 0.3V3.7ZM9.7 6C9.7 4.72975 10.7297 3.7 12 3.7V0.3C8.85198 0.3 6.3 2.85198 6.3 6H9.7ZM12 8.3C10.7297 8.3 9.7 7.27025 9.7 6H6.3C6.3 9.14802 8.85198 11.7 12 11.7V8.3ZM5.7 18C5.7 15.6252 7.62518 13.7 10 13.7V10.3C5.74741 10.3 2.3 13.7474 2.3 18H5.7ZM5.7 21V18H2.3V21H5.7ZM20 19.3H4V22.7H20V19.3ZM18.3 18V21H21.7V18H18.3ZM14 13.7C16.3748 13.7 18.3 15.6252 18.3 18H21.7C21.7 13.7474 18.2526 10.3 14 10.3V13.7ZM10 13.7H14V10.3H10V13.7Z"
+      fill="currentColor"
+      mask="url(#path-1-inside-1_9286_2150)"
+    />
     <path d="M3 12L7 8" stroke="var(--active-color-2)" stroke-width="1.7" />
     <path d="M18 12L22 8" stroke="var(--active-color-2)" stroke-width="1.7" />
-    <path d="M2.00098 7L6.00098 3" stroke="var(--active-color-2)" stroke-width="1.7" />
-    <path d="M17.001 7L21.001 3" stroke="var(--active-color-2)" stroke-width="1.7" />
+    <path
+      d="M2.00098 7L6.00098 3"
+      stroke="var(--active-color-2)"
+      stroke-width="1.7"
+    />
+    <path
+      d="M17.001 7L21.001 3"
+      stroke="var(--active-color-2)"
+      stroke-width="1.7"
+    />
   </svg>
 </template>

package/src/TUIRoom/components/common/icons/WarningIcon.vue

@@ -1,5 +1,11 @@
 <template>
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="&#230;&#179;&#168;&#230;&#132;&#143;">
       <path
         id="Vector"

package/src/TUIRoom/conference.ts

@@ -1,7 +1,15 @@
 import { ChatSDK } from '@tencentcloud/chat';
-import { roomService, StartParams, JoinParams, LanguageOption, ThemeOption, EventType } from './services';
+import {
+  roomService,
+  StartParams,
+  JoinParams,
+  LanguageOption,
+  Theme,
+  EventType,
+} from './services';
 import { TUIRoomEngine } from './index';
 import logger from './utils/common/logger';
+import { toTargetTheme } from './utils/common';
 
 export enum RoomEvent {
   ROOM_START = 'RoomStart',
@@ -13,6 +21,8 @@ export enum RoomEvent {
   KICKED_OFFLINE = 'KickedOffline',
   USER_SIG_EXPIRED = 'UserSigExpired',
   USER_LOGOUT = 'UserLogout',
+  LANGUAGE_CHANGED = 'LanguageChanged',
+  THEME_CHANGED = 'ThemeChanged',
 }
 export enum FeatureButton {
   SwitchTheme = 'SwitchTheme',
@@ -21,12 +31,20 @@ export enum FeatureButton {
   FullScreen = 'FullScreen',
   Invitation = 'InviteControl',
 }
+export type ThemeOption = 'LIGHT' | 'DARK';
+
 interface IConference {
   getRoomEngine(): TUIRoomEngine | null;
 
-  on: (eventType: RoomEvent, callback: () => void) => void;
+  on: (
+    eventType: RoomEvent,
+    callback: (data?: LanguageOption | ThemeOption | any) => void
+  ) => void;
 
-  off: (eventType: RoomEvent, callback: () => void) => void;
+  off: (
+    eventType: RoomEvent,
+    callback: (data?: LanguageOption | ThemeOption | any) => void
+  ) => void;
 
   login: (params: {
     sdkAppId: number;
@@ -88,11 +106,17 @@ class Conference implements IConference {
     return roomService.roomEngine.instance;
   }
 
-  public on(eventType: RoomEvent, callback: () => any) {
+  public on(
+    eventType: RoomEvent,
+    callback: (data?: LanguageOption | ThemeOption | any) => void
+  ) {
     roomService.on(eventType as unknown as EventType, callback);
   }
 
-  public off(eventType: RoomEvent, callback: () => void) {
+  public off(
+    eventType: RoomEvent,
+    callback: (data?: LanguageOption | ThemeOption | any) => void
+  ) {
     roomService.off(eventType as unknown as EventType, callback);
   }
 
@@ -112,10 +136,7 @@ class Conference implements IConference {
     return await roomService.dismissRoom();
   }
 
-  public setSelfInfo(options: {
-    userName: string;
-    avatarUrl: string;
-  }) {
+  public setSelfInfo(options: { userName: string; avatarUrl: string }) {
     return roomService.setSelfInfo(options);
   }
 
@@ -123,8 +144,8 @@ class Conference implements IConference {
     return roomService.setLanguage(language);
   }
 
-  public setTheme(theme: 'LIGHT' | 'DARK') {
-    return roomService.setTheme(theme);
+  public setTheme(theme: ThemeOption) {
+    return roomService.setTheme(toTargetTheme(theme) as Theme);
   }
 
   public disableTextMessaging() {

package/src/TUIRoom/conference.vue

@@ -1,49 +1,87 @@
 <template>
-  <div v-if="conferenceShow" id="roomContainer" ref="roomRef" :class="tuiRoomClass">
+  <div
+    v-if="conferenceShow"
+    id="roomContainer"
+    ref="roomRef"
+    :class="tuiRoomClass"
+  >
     <room-header
       v-show="showRoomTool && showHeaderTool"
       class="header"
       @log-out="logOut"
-    ></room-header>
+    />
     <room-content
       ref="roomContentRef"
       v-tap.lazy="handleRoomContentTap"
       :show-room-tool="showRoomTool"
       class="content"
-    ></room-content>
+    />
     <room-footer v-show="showRoomTool" class="footer" />
-    <room-sidebar></room-sidebar>
-    <room-setting></room-setting>
+    <room-sidebar />
+    <room-setting />
+    <loading-overlay v-if="isShowLoading" />
+    <password-dialog
+      :visible="isShowPasswordContainer"
+      @join-conference="enterRoom"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, Ref, watch, computed, withDefaults, defineProps } from 'vue';
+import {
+  ref,
+  onMounted,
+  onUnmounted,
+  Ref,
+  watch,
+  computed,
+  withDefaults,
+  defineProps,
+  defineExpose,
+  defineEmits,
+} from 'vue';
 import RoomHeader from './components/RoomHeader/index/index.vue';
 import RoomFooter from './components/RoomFooter/index/index.vue';
 import RoomSidebar from './components/RoomSidebar/index.vue';
 import RoomContent from './components/RoomContent/index.vue';
 import RoomSetting from './components/RoomSetting/index.vue';
+import LoadingOverlay from './components/PreRoom/LoadingOverlay.vue';
+import PasswordDialog from './components/PreRoom/PasswordDialog.vue';
 import { debounce, throttle } from './utils/utils';
 import { useBasicStore } from './stores/basic';
 import { isMobile, isWeChat } from './utils/environment';
 import vTap from './directives/vTap';
-import { TUIKickedOutOfRoomReason } from '@tencentcloud/tuiroom-engine-electron';
+import {
+  TUIKickedOutOfRoomReason,
+  TUIErrorCode,
+} from '@tencentcloud/tuiroom-engine-electron';
 
 import { MESSAGE_DURATION } from './constants/message';
 
 import TUIMessageBox from './components/common/base/MessageBox/index';
 import TUIMessage from './components/common/base/Message/index';
-import { roomService, EventType, RoomParam, RoomInitData } from './services/index';
+import {
+  roomService,
+  EventType,
+  RoomParam,
+  RoomInitData,
+} from './services/index';
 import useDeviceManager from './hooks/useDeviceManager';
 
-const props = withDefaults(defineProps<{
-  displayMode: 'permanent' | 'wake-up'
-}>(), {
-  displayMode: 'permanent',
-});
+const isShowPasswordContainer = ref(false);
+const isShowLoading = ref(true);
+const props = withDefaults(
+  defineProps<{
+    displayMode: 'permanent' | 'wake-up';
+  }>(),
+  {
+    displayMode: 'permanent',
+  }
+);
 
-const conferenceShow = computed(() => (props.displayMode === 'permanent' || !!basicStore.roomId));
+const conferenceShow = computed(
+  () => props.displayMode === 'permanent' || !!basicStore.roomId
+);
 
 useDeviceManager({ listenForDeviceChange: true });
 
@@ -75,13 +113,15 @@ const showMessageBox = (data: {
   code?: number;
   message: string;
   title: string;
-  cancelButtonText: string,
+  duration?: number;
+  cancelButtonText: string;
   confirmButtonText: string;
   callback?: () => void;
 }) => {
   const {
     message,
     title = roomService.t('Note'),
+    duration,
     cancelButtonText,
     confirmButtonText = roomService.t('Sure'),
     callback = () => {},
@@ -89,6 +129,7 @@ const showMessageBox = (data: {
   TUIMessageBox({
     title,
     message,
+    duration,
     cancelButtonText,
     confirmButtonText,
     callback,
@@ -118,6 +159,7 @@ onMounted(() => {
   roomService.on(EventType.ROOM_LEAVE, onLeaveRoom);
   roomService.on(EventType.ROOM_DISMISS, onDismissRoom);
   roomService.on(EventType.USER_LOGOUT, onLogout);
+  roomService.on(EventType.ROOM_NEED_PASSWORD, onRoomNeedPassword);
 });
 onUnmounted(() => {
   roomService.off(EventType.ROOM_NOTICE_MESSAGE, showMessage);
@@ -130,12 +172,16 @@ onUnmounted(() => {
   roomService.off(EventType.ROOM_LEAVE, onLeaveRoom);
   roomService.off(EventType.ROOM_DISMISS, onDismissRoom);
   roomService.off(EventType.USER_LOGOUT, onLogout);
+  roomService.off(EventType.ROOM_NEED_PASSWORD, onRoomNeedPassword);
   roomService.resetStore();
 });
 
-const { sdkAppId, showHeaderTool } = roomService.basicStore;
+const { showHeaderTool } = roomService.basicStore;
 const tuiRoomClass = computed(() => {
-  const roomClassList = ['tui-room', `tui-theme-${roomService.basicStore.defaultTheme}`];
+  const roomClassList = [
+    'tui-room',
+    `tui-theme-${roomService.basicStore.defaultTheme}`,
+  ];
   if (isMobile) {
     roomClassList.push('tui-room-h5');
   }
@@ -156,15 +202,18 @@ function handleHideRoomTool() {
   showRoomTool.value = false;
 }
 
-watch(() => roomRef.value, (newValue, oldValue) => {
-  if (!isWeChat && !isMobile) {
-    if (newValue) {
-      addRoomContainerEvent(newValue);
-    } else {
-      oldValue && removeRoomContainerEvent(oldValue);
+watch(
+  () => roomRef.value,
+  (newValue, oldValue) => {
+    if (!isWeChat && !isMobile) {
+      if (newValue) {
+        addRoomContainerEvent(newValue);
+      } else {
+        oldValue && removeRoomContainerEvent(oldValue);
+      }
     }
   }
-});
+);
 
 const handleHideRoomToolDebounce = debounce(handleHideRoomTool, 5000);
 const handleHideRoomToolThrottle = throttle(handleHideRoomToolDebounce, 1000);
@@ -230,6 +279,12 @@ async function enterRoom(options: { roomId: string; roomParam?: RoomParam }) {
   await roomService.enterRoom(options);
 }
 
+function onRoomNeedPassword(code: TUIErrorCode) {
+  if (code === TUIErrorCode.ERR_NEED_PASSWORD) {
+    isShowPasswordContainer.value = true;
+  }
+}
+
 function resetStore() {
   roomService.resetStore();
 }
@@ -239,16 +294,18 @@ const logOut = () => {
 };
 
 const onStartRoom = () => {
-  emit('on-create-room',  { code: 0, message: 'create room' });
+  isShowLoading.value = false;
+  emit('on-create-room', { code: 0, message: 'create room' });
 };
 
 const onJoinRoom = () => {
-  emit('on-enter-room',  { code: 0, message: 'enter room' });
+  isShowLoading.value = false;
+  isShowPasswordContainer.value = false;
+  emit('on-enter-room', { code: 0, message: 'enter room' });
 };
 
-
 const onLeaveRoom = () => {
-  emit('on-exit-room',  { code: 0, message: 'exit room' });
+  emit('on-exit-room', { code: 0, message: 'exit room' });
 };
 
 const onDismissRoom = () => {
@@ -259,7 +316,11 @@ const onLogout = () => {
   emit('on-log-out', { code: 0, message: 'user logout' });
 };
 
-const onKickedOutOfRoom = async (eventInfo: { roomId: string; reason: TUIKickedOutOfRoomReason; message: string }) => {
+const onKickedOutOfRoom = async (eventInfo: {
+  roomId: string;
+  reason: TUIKickedOutOfRoomReason;
+  message: string;
+}) => {
   const { roomId, reason, message } = eventInfo;
   emit('on-kicked-out-of-room', { roomId, reason, message });
 };
@@ -280,86 +341,91 @@ const onKickedOffLine = (eventInfo: { message: string }) => {
 @import './assets/style/white-theme.scss';
 
 .tui-room :not([class|='el']) {
-  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  transition:
+    background-color 0.3s,
+    color 0.3s,
+    box-shadow 0.3s;
 }
 </style>
 
 <style lang="scss" scoped>
-.tui-theme-white .tui-room {
-  --header-shadow-color: #e3eaf7;
-  --footer-shadow-color: rgba(197, 210, 229, 0.2);
-}
-
-.tui-theme-black .tui-room {
-  --header-shadow-color: rgba(34, 38, 46, 0.3);
-  --footer-shadow-color: rgba(34, 38, 46, 0.3);
-}
-
-.tui-theme-white.tui-room {
-  --header-shadow-color: #e3eaf7;
-  --footer-shadow-color: rgba(197, 210, 229, 0.2);
-}
-
-.tui-theme-black.tui-room {
-  --header-shadow-color: rgba(34, 38, 46, 0.3);
-  --footer-shadow-color: rgba(34, 38, 46, 0.3);
-}
-
 .tui-room {
+  position: relative;
+  display: flex;
+  flex-direction: column;
   width: 100%;
-  height: 100%;
   min-width: 850px;
+  height: 100%;
   min-height: 400px;
-  position: relative;
   color: var(--font-color-1);
-  background-color: var(--background-color-1);
-  display: flex;
-  flex-direction: column;
   text-align: left;
+  background-color: var(--background-color-1);
 
   .header {
-    width: 100%;
-    height: 64px;
-    background-color: var(--background-color-2);
-    box-shadow: 0px 1px 0px var(--header-shadow-color);
     position: absolute;
     top: 0;
     left: 0;
     z-index: 100;
+    width: 100%;
+    height: 64px;
+    background-color: var(--background-color-2);
+    box-shadow: 0 1px 0 var(--header-shadow-color);
   }
 
   .content {
+    position: absolute;
+    top: 0;
     width: 100%;
     height: 100%;
     background-color: var(--background-color-1);
-    position: absolute;
-    top: 0;
   }
 
   &.tui-room-h5 {
     width: 100%;
+    min-width: 350px;
     height: 100%;
-    min-width: initial;
-    min-height: initial;
+    min-height: 525px;
   }
 }
 
 #roomContainer {
   &.chat-room {
     position: absolute;
-    margin: auto;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 999;
-    height: 80%;
     width: 80%;
+    height: 80%;
+    margin: auto;
     border-radius: 10px;
   }
-  &.tui-room-h5,.chat-room {
+
+  &.tui-room-h5,
+  .chat-room {
     width: 100%;
     height: 100%;
   }
 }
+
+.tui-theme-white .tui-room {
+  --header-shadow-color: #e3eaf7;
+  --footer-shadow-color: rgba(197, 210, 229, 0.2);
+}
+
+.tui-theme-black .tui-room {
+  --header-shadow-color: rgba(34, 38, 46, 0.3);
+  --footer-shadow-color: rgba(34, 38, 46, 0.3);
+}
+
+.tui-theme-white.tui-room {
+  --header-shadow-color: #e3eaf7;
+  --footer-shadow-color: rgba(197, 210, 229, 0.2);
+}
+
+.tui-theme-black.tui-room {
+  --header-shadow-color: rgba(34, 38, 46, 0.3);
+  --footer-shadow-color: rgba(34, 38, 46, 0.3);
+}
 </style>

package/src/TUIRoom/constants/message.ts

@@ -5,9 +5,9 @@ export enum WARNING_MESSAGE {
   UNMUTE_LOCAL_CAMERA_FAIL_MUTE_ALL = 'Has been full static painting, can not open the video',
   UNMUTE_LOCAL_CAMERA_FAIL_MUTE_BY_MASTER = 'It has been stilled by the host and cannot open the video',
   UNMUTE_LOCAL_CAMERA_FAIL_AUDIENCE = 'To apply to speak in the room, please raise your hand first to apply for the microphone',
-};
+}
 
 export enum MESSAGE_DURATION {
   NORMAL = 3000,
-  LONG = 5000
-};
+  LONG = 5000,
+}

package/src/TUIRoom/constants/render.ts

@@ -1,4 +1,3 @@
-
 export enum LAYOUT {
   SIX_EQUAL_POINTS = 'six_equal_points',
   NINE_EQUAL_POINTS = 'nine_equal_points',
@@ -6,8 +5,8 @@ export enum LAYOUT {
   RIGHT_SIDE_LIST = 'right_side_list',
   TOP_SIDE_LIST = 'top_side_list',
   LARGE_SMALL_WINDOW = 'large_small_window',
-  GRID_VIEW= 'grid_view',
-};
+  GRID_VIEW = 'grid_view',
+}
 
 export enum SettingMode {
   SIMPLE = 'simple',

package/src/TUIRoom/constants/room.ts

@@ -22,3 +22,11 @@ export const SMALL_VIDEO_ENC_PARAM = {
   videoFps: 15,
   videoBitrate: 800,
 };
+
+export enum USERS_STATUS {
+  Entered = 1,
+  ON_STAGE = 1,
+  NOT_ON_STAGE = 2,
+  NOT_ENTER = 3,
+}
+export const PASSWORD_MAX_LENGTH_LIMIT = 6;

package/src/TUIRoom/directives/vClickOutside.ts

@@ -1,4 +1,3 @@
-
 const nodeMap = new Map();
 
 const vClickOutside = {

package/src/TUIRoom/directives/vDblTouch.ts

@@ -1,16 +1,24 @@
-
-const eventMap = new Map();
+const touchEventMap = new Map();
+const clickEventMap = new Map();
 
 const TIME_OUT = 300;
 
 class DblTouch {
   public dom: HTMLElement;
-  public callback: Function;
+  public callback: (event?: Event | TouchEvent) => void;
 
   constructor(el: HTMLElement, binding: any) {
     this.dom = el;
     this.callback = binding.value;
 
+    // Compatible iphone 11 chrome browser tap twice trigger once touchend and twice click event problem
+    el?.addEventListener('click', (event: Event) => {
+      if (binding.modifiers.stop) {
+        event.stopPropagation();
+      }
+      this.click(event);
+    });
+
     el?.addEventListener('touchend', (event: TouchEvent) => {
       if (binding.modifiers.stop) {
         event.stopPropagation();
@@ -19,14 +27,32 @@ class DblTouch {
     });
   }
 
+  executeCallback(event: Event | TouchEvent) {
+    clickEventMap.delete(this.dom);
+    touchEventMap.delete(this.dom);
+    this.callback && this.callback(event);
+  }
+
+  click(event: Event) {
+    const lastEvent = clickEventMap.get(this.dom);
+    if (lastEvent) {
+      this.executeCallback(event);
+    } else {
+      clickEventMap.set(this.dom, event);
+      setTimeout(() => {
+        clickEventMap.delete(this.dom);
+      }, TIME_OUT);
+    }
+  }
+
   touchend(event: TouchEvent) {
-    const lastEvent = eventMap.get(this.dom);
+    const lastEvent = touchEventMap.get(this.dom);
     if (lastEvent) {
-      this.callback && this.callback(event);
+      this.executeCallback(event);
     } else {
-      eventMap.set(this.dom, event);
+      touchEventMap.set(this.dom, event);
       setTimeout(() => {
-        eventMap.delete(this.dom);
+        touchEventMap.delete(this.dom);
       }, TIME_OUT);
     }
   }

package/src/TUIRoom/directives/vTap.ts

@@ -1,4 +1,3 @@
-
 const eventMap = new Map();
 
 const TIME_OUT = 300;