useDrawer

最新推荐文章于 2024-08-21 08:26:08 发布

原创最新推荐文章于 2024-08-21 08:26:08 发布 · 356 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

文章展示了如何在Vue项目中导入并使用YunDesign库，特别是zh-CN语言包，以及@ylz-material/table组件。同时，它定义了一个createDrawer函数，用于动态创建和管理BillingDrawer组件，该组件在关闭时会自动卸载和移除。

import { createApp } from 'vue';
import YunDesign from 'yun-design';
import zhLocale from 'yun-design/lib/locale/lang/zh-cn';
import table from '@ylz-material/table';
import BillingDrawer from '../components/drawer/BillingData.vue';

export function useDrawer() {
  function createDrawer(props = {}) {
    const div = document.createElement('div');
    document.body.appendChild(div);
    const drawer = createApp(BillingDrawer, {
      ...props,
      hide() {
        drawer.unmount();
        div.remove();
      },
    });
    drawer.use(YunDesign, { locale: zhLocale }).use(table);
    drawer.mount(div);
    return {
      drawer,
    };
  }
  return {
    createDrawer,
  };
}