[Drawer] 在 SFC 内导入 Drawer 组件无法使用

[linesoft2]

tdesign-mobile-vue 版本

1.0.0-rc.6

重现链接

https://1024code.com/codecubes/rc0gauy

重现步骤

在 SFC 中引入Drawer，并在template中使用

期望结果

Drawer正常显示

实际结果

Drawer没有成功被 Vue 识别为组件

框架版本

Vue(3.3.4)

浏览器版本

Chromium(116.0.5845.62)

系统版本

Windows 11

Node版本

20.5.0

补充说明

No response

[github-actions]

👋 @linesoft2，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[topjohncian]

将 import statement 改为如下后可用

import { default as TDrawer } from 'tdesign-mobile-vue/es/drawer/drawer';

[topjohncian]

此处有一疑问：独立出：

tdesign-mobile-vue/src/drawer/index.ts

Line 10 in bfbbdae

const Drawer = (options: DrawerOptions) => {

这一个 Drawer 为何用意

[topjohncian]

在 JS 中建立和控制 Drawer 实例？

<template>
  <div>
    <!-- <t-drawer v-model:visible="visible" :items="baseSidebar" ></t-drawer> -->
    <t-button block variant="outline" size="large" theme="primary" @click="visible = true">基础抽屉</t-button>
  </div>
</template>
<script setup>
import { ref, watch, watchEffect } from 'vue';
// import { default as TDrawer } from 'tdesign-mobile-vue/es/drawer/drawer';
import { Button as TButton, Drawer } from 'tdesign-mobile-vue';

let visible = ref(false)
const baseSidebar = ref([
  {
    title: '菜单一',
  },
  {
    title: '菜单二',
  },
  {
    title: '菜单三',
  },
  {
    title: '菜单四',
  },
  {
    title: '菜单五',
  },
  {
    title: '菜单六',
  },
]);

const drawer = Drawer({ items: baseSidebar.value, onClose: () => { visible.value = false } })
watchEffect(() => {
  if (visible.value) {
    drawer.show()
  } else {
    drawer.hide()
  }
})
</script>

[topjohncian]

我认为官方可以在使用 Vue 渲染 DrawerPlugin 时抛出错误，如：

tdesign-mobile-vue/src/drawer/index.ts

Line 21 in bfbbdae

const handler = {

    destroy() {
      destroyOnClose.value = true;
      nextTick(() => {
        visible.value = false;
        document.body.removeChild(root);
      });
    },
    hide() {
      visible.value = false;
    },
    show() {
      visible.value = true;
    },
    update(options: DrawerOptions) {
      props.value = options;
    },
    render() {
      throw new Error("render is not allowed")
    }
  };

[linesoft2]

我认为官方可以在使用 Vue 渲染 DrawerPlugin 时抛出错误，如：

tdesign-mobile-vue/src/drawer/index.ts

Line 21 in bfbbdae

const handler = {

    destroy() {
      destroyOnClose.value = true;
      nextTick(() => {
        visible.value = false;
        document.body.removeChild(root);
      });
    },
    hide() {
      visible.value = false;
    },
    show() {
      visible.value = true;
    },
    update(options: DrawerOptions) {
      props.value = options;
    },
    render() {
      throw new Error("render is not allowed")
    }
  };

如果官方不希望在组件内直接引用Drawer组件，那么在使用unplugin-vue-components的情况下会出现问题，因为使用该插件的情况下，就是在组件内直接引用的Drawer组件，希望官方能够处理好这个问题。