@discuzqsdk/design v1.3.34

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 '@discuzqsdk/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 '@discuzqsdk/theme/dist/theme/index.css'; /* 主题文件，必须引用，只用引用一次 */
import '@discuzqsdk/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端的代码只有标签名不同的组件，或只有标签名不同的示例代码

用法

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__）的转换，不处理组件
      },
    ],
  ],
}

注意

使用插件时，唯一要注意的是组件的命名规范，最好使用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