Discuz-design

DiscuzQ 基础组件库

smart & powerful

开发

安装依赖

npm install
npm install @tarojs/[email protected] -g

运行开发

npm run dev:web // 开发web组件
npm run dev:mini // 开发小程序组件

web 组件访问 http://localhost:3000/{组件名} 访问组件 example

安装

npm i @discuz/discuz-design -S

引用

全量引用

import { Button } from '@discuz/discuz-design';
// import '@discuz/discuz-design/dist/styles/index.scss';
// 20210805：请看 discuz-theme 项目，组件库里面的样式将会全部移动到 theme 项目中。 不要了

import '@discuzq/theme';

按需组件引用

import Button from '@discuz/discuz-design/dist/components/button';
// import '@discuz/discuz-design/dist/components/button/styles/index.scss'; 不要了

// 20210805：请看 discuz-theme 项目，组件库里面的样式将会全部移动到 theme 项目中。
import '@discuzq/theme/dist/theme/index.css'; /* 主题文件，必须引用，只用引用一次 */
import '@discuzq/theme/dist/componnets/button.css';

按需引用

新增组件

执行npm run new <component-name> [中文名] [组件类型]创建新的组件模块

# 函数组件
npm run new poster 海报 func

# 类组件
npm run new poster 海报

组件

• 通用
  • [x] Button - 按钮
  • [x] Icon - 图标
• 布局
  • [x] Grid - 栅格
  • [x] Flex - flex布局
  • [x] ScrollView - 长列表
• 展示
  • [x] Alert - 提示消息
  • [x] Audio - 音频播放器
  • [x] AudioPlayer - 附件音乐播放器
  • [x] Avatar - 头像
  • [x] Card - 卡片组件
  • [x] Menu - 菜单(PC)
  • [x] RichText - 富文本
  • [x] Spin - 加载中
  • [x] Tabs - 选项卡(H5/WX)
  • [x] Tag - 标签
  • [x] Video - 视频播放器
  • [x] Divider - 分割线
  • [x] Progress - 进度条
  • [x] Dropdown - 下拉菜单(PC)
• 输入
  • [x] Check - 选项框
  • [x] Checkbox - 复选框
  • [x] Radio - 单选框
  • [x] Input - 单行文本输入框
  • [x] Textarea - 多行文本输入框
  • [x] Switch - 开关
  • [x] Upload - 上传
  • [x] Slider - 滑动条
  • [x] AudioRecorder - 录音
  • [x] WebPicker - 选择器(H5)
• 交互
  • [x] Animation - 动画组件
  • [x] BackToTop - 返回顶部
  • [x] Dialog - 对话框
  • [x] Toast - 轻提示
  • [] PullDownRefresh - 下拉刷新
  • [x] ImagePreviewer - 图片预览
  • [x] Popup - 弹出层
  • [x] ActionSheet - 动作面板
  • [x] Popover - 气泡框

ats-h5插件

介绍

有大部分基础组件，mini端和web端的代码相似，组件的逻辑部分代码相同，只有标签不同。为加快这部分组件的开发，降低频繁复制粘贴以及修改标签名时的出错率，可以通过ats-h5插件完成复制粘贴以及修改标签名这部分的工作。ats-h5插件会将layouts文件夹下的mini代码，转换成web代码，同时也会把__examples__文件夹中的mini的示例，转换成web示例。

适用范围

mini端和web端的代码只有标签名不同的组件，或只有标签名不同的示例代码

用法

1. 进入插件文件夹下（discuz-design/site/config/plugins/taro-plugin-ats-h5），执行npm i；
2. 进入小程序的配置文件（discuz-design/site/config/dev.js），添加插件。

// dev.js
module.exports = {
  ...
  plugins: [
    [
      path.resolve(__dirname, "./plugins/taro-plugin-ats-h5"),
      {
        componentNames: ['component-name'], // 数组中添加你想赋能的组件。eg. componentNames: ['tag']
        onlyExample: false, // 是否只处理示例（__examples__）的转换，不处理组件
      },
    ],
  ],
}

| options | 类型 | 是否必传 | 默认值 | 说明 | | ---- | ---- | ---- | ---- | ---- | | componentNames | array | Y | [] | 组件名 | | onlyExample | boolean | N | false | 是否只处理示例 |

注意

使用插件时，唯一要注意的是组件的命名规范，最好使用npm run new <component-name> [中文名] [组件类型]创建组件。如果不是用模板生成的组件，需满足以下的规范

// layouts文件夹目录结构
├── layouts
│   ├── index.ts
│   ├── mini.tsx
│   └── web.tsx

或者

├── layouts
│   ├── index.tsx
│   ├── mini
│   │   ├── index.tsx
│   │   └── xxx.tsx
│   └── web
│       ├── index.tsx
│       └── xxx.tsx

// mini组件导出命名
export function <ComponentName>MiniLayout