@discuzq/design NPM

Discuz-design

DiscuzQ 基础组件库

smart & powerful

开发

安装依赖

npm install
npm install @tarojs/cli@3.2.2 -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 海报

组件

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

ats-h5插件

介绍

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

适用范围

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

用法

进入插件文件夹下（discuz-design/site/config/plugins/taro-plugin-ats-h5），执行npm i；
进入小程序的配置文件（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> [中文名] [组件类型]创建组件。如果不是用模板生成的组件，需满足以下的规范