ProductDrawer（框架无关的自定义元素）

本组件以 Web Components（Custom Elements）形式发布，样式已内联至 shadow DOM：

• 框架无关：可在 React、Vue、Angular、Svelte、原生 HTML 等任意环境中使用
• 零样式依赖：无需单独引入 CSS 文件
• 只需在浏览器端加载一次定义脚本，即可直接使用 <product-drawer> 标签
• 防样式污染：已添加 CSS 重置属性，防止外部样式继承影响组件内部显示

安装

npm install dreame-public-drawer

使用方法

导入方式说明：只需在使用标签之前导入一次即可，可以在入口文件（全局可用）或具体组件内（按需加载）。

1. 纯前端项目（Vite / Webpack / 非 SSR）

方式 A：入口文件导入（推荐，全局可用）

// main.js
import 'dreame-public-drawer'

之后在任意位置直接使用：

<product-drawer size="50"></product-drawer>

方式 B：组件内按需导入

// ProductPage.js
import 'dreame-public-drawer'

export default function ProductPage() {
  return (
    <div>
      <h1>产品列表</h1>
      <product-drawer size="50"></product-drawer>
    </div>
  )
}

2. React（非 SSR，如 CRA / Vite）

方式 A：入口导入

// main.jsx
import 'dreame-public-drawer'
import App from './App'

// 之后 App 及其子组件都可以直接使用 <product-drawer>

方式 B：组件内导入（按需加载）

// ProductPage.jsx
import 'dreame-public-drawer'

export default function ProductPage() {
  return (
    <div>
      <h1>产品页面</h1>
      <product-drawer size="50"></product-drawer>
    </div>
  )
}

方式 C：懒加载（动态导入）

import { useEffect, useState } from 'react'

export default function ProductPage() {
  const [loaded, setLoaded] = useState(false)

  useEffect(() => {
    import('dreame-public-drawer').then(() => setLoaded(true))
  }, [])

  if (!loaded) return <div>加载中...</div>

  return <product-drawer size="50"></product-drawer>
}

3. Next.js（SSR 环境）

由于 Next.js 有服务端渲染，需在客户端动态导入：

方式 A：使用 useEffect（推荐）

'use client' // App Router 需要此行

import { useEffect } from 'react'

export default function Page() {
  useEffect(() => {
    import('dreame-public-drawer')
  }, [])

  return <product-drawer size="50"></product-drawer>
}

方式 B：使用 next/dynamic

import dynamic from 'next/dynamic'

const ProductDrawer = dynamic(
  async () => {
    if (typeof window !== 'undefined') {
      await import('dreame-public-drawer')
    }
    return () => <product-drawer size="50"></product-drawer>
  },
  { ssr: false }
)

export default function Page() {
  return <ProductDrawer />
}

4. Vue 3

方式 A：入口文件导入

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import 'dreame-public-drawer'

const app = createApp(App)

// 可选：让模板编译器识别为自定义元素（避免 Vue 警告）
app.config.compilerOptions.isCustomElement = (tag) => tag === 'product-drawer'

app.mount('#app')

方式 B：组件内按需导入

<template>
  <div>
    <h1>产品页面</h1>
    <product-drawer size="50"></product-drawer>
  </div>
</template>

<script setup>
import 'dreame-public-drawer'
</script>

方式 C：懒加载

<template>
  <div>
    <product-drawer v-if="loaded" size="50"></product-drawer>
    <div v-else>加载中...</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const loaded = ref(false)

onMounted(async () => {
  await import('dreame-public-drawer')
  loaded.value = true
})
</script>

属性

| 属性名 | 类型 | 默认值 | 描述 | |--------|------|--------|------| | size | number | 50 | 按钮的大小（像素） | | offset | number | size | 遮罩层和抽屉容器距离顶部的偏移量（像素），默认等于按钮尺寸 | | api | string | "" | 外部传入的API接口地址（必填） |

使用示例：

<!-- HTML 中以字符串形式传递 -->
<product-drawer size="60"></product-drawer>

<!-- React/JSX 中可以传数字 -->
<product-drawer size={60}></product-drawer>

<!-- 独立控制偏移量 -->
<product-drawer size="50" offset="60"></product-drawer>

<!-- 按钮40px，遮罩层和抽屉从60px位置开始 -->
<product-drawer size="40" offset="60"></product-drawer>

<!-- 配置API接口地址 -->
<product-drawer api="https://your-api.com/service/get_sider"></product-drawer>

<!-- 完整示例 -->
<product-drawer size="50" offset="50" api="https://your-api.com/service/get_sider"></product-drawer>

参数说明：

• size: 控制汉堡按钮的大小
• offset: 控制遮罩层和抽屉容器距离页面顶部的距离，通常用于避开页面头部导航栏
• api: 必填参数，配置服务数据的API接口地址
• 当不设置 offset 时，默认等于 size 的值

特性

防点击事件穿透

组件已处理点击事件穿透问题，按钮点击事件不会冒泡到父元素，确保在复杂页面环境中的稳定性。

防样式污染

组件内部已添加 CSS 重置属性，防止外部样式（如 color、font-family、line-height 等可继承属性）影响到组件内部的显示效果。

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建组件库
npm run build

打包文件说明

• product-drawer.es.js - ES 模块格式
• product-drawer.umd.js - UMD 格式

无需引入 CSS（样式已内联至 shadow DOM）。