Repository: wechat-miniprogram/weui-miniprogram Branch: master Commit: 90e2cbcbb4a5 Files: 354 Total size: 640.9 KB Directory structure: gitextract_c6xlk5rv/ ├── .eslintignore ├── .eslintrc.js ├── .gitattributes ├── .github/ │ └── ISSUE_TEMPLATE/ │ ├── ----.md │ └── --bug.md ├── .gitignore ├── .gitmodules ├── .npmignore ├── .npmrc ├── .prettierrc.js ├── .travis.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── babel.config.js ├── docs/ │ ├── README.md │ ├── actionsheet.md │ ├── badge.md │ ├── cell.md │ ├── cells.md │ ├── checkbox-group.md │ ├── dialog.md │ ├── form-page.md │ ├── form.md │ ├── gallery.md │ ├── half-screen-dialog.md │ ├── icon.md │ ├── loading.md │ ├── msg.md │ ├── navigation.md │ ├── other.md │ ├── quickstart.md │ ├── search.md │ ├── slideview.md │ ├── tabbar.md │ ├── toptips.md │ └── uploader.md ├── gulpfile.js ├── jest.config.js ├── mpflow.config.js ├── package.json ├── src/ │ ├── app.js │ ├── app.json │ ├── app.less │ ├── base/ │ │ ├── CustomPage.js │ │ └── behaviors/ │ │ └── theme.js │ ├── components/ │ │ ├── actionsheet/ │ │ │ ├── __test__/ │ │ │ │ ├── __snapshots__/ │ │ │ │ │ └── actionsheet.test.ts.snap │ │ │ │ ├── actionsheet.test.ts │ │ │ │ ├── index.json │ │ │ │ ├── index.ts │ │ │ │ └── index.wxml │ │ │ ├── actionsheet.json │ │ │ ├── actionsheet.less │ │ │ ├── actionsheet.ts │ │ │ └── actionsheet.wxml │ │ ├── badge/ │ │ │ ├── __test__/ │ │ │ │ ├── __snapshots__/ │ │ │ │ │ └── badage.test.js.snap │ │ │ │ └── badage.test.js │ │ │ ├── badge.json │ │ │ ├── badge.less │ │ │ ├── badge.ts │ │ │ └── badge.wxml │ │ ├── cell/ │ │ │ ├── cell.json │ │ │ ├── cell.less │ │ │ ├── cell.ts │ │ │ └── cell.wxml │ │ ├── cells/ │ │ │ ├── __test__/ │ │ │ │ ├── __snapshots__/ │ │ │ │ │ └── cells.test.js.snap │ │ │ │ ├── cells.test.js │ │ │ │ ├── index.js │ │ │ │ ├── index.json │ │ │ │ └── index.wxml │ │ │ ├── cells.json │ │ │ ├── cells.less │ │ │ ├── cells.ts │ │ │ └── cells.wxml │ │ ├── checkbox/ │ │ │ ├── __test__/ │ │ │ │ ├── __snapshots__/ │ │ │ │ │ └── checkbox.test.js.snap │ │ │ │ ├── checkbox.test.js │ │ │ │ ├── index.js │ │ │ │ ├── index.json │ │ │ │ └── index.wxml │ │ │ ├── checkbox.json │ │ │ ├── checkbox.less │ │ │ ├── checkbox.ts │ │ │ └── checkbox.wxml │ │ ├── checkbox-group/ │ │ │ ├── checkbox-group.json │ │ │ ├── checkbox-group.less │ │ │ ├── checkbox-group.ts │ │ │ └── checkbox-group.wxml │ │ ├── dialog/ │ │ │ ├── __test__/ │ │ │ │ ├── __snapshots__/ │ │ │ │ │ └── dialog.test.js.snap │ │ │ │ ├── dialog.test.js │ │ │ │ ├── index.js │ │ │ │ ├── index.json │ │ │ │ └── index.wxml │ │ │ ├── dialog.json │ │ │ ├── dialog.less │ │ │ ├── dialog.ts │ │ │ └── dialog.wxml │ │ ├── form/ │ │ │ ├── __test__/ │ │ │ │ ├── __snapshots__/ │ │ │ │ │ └── form.test.ts.snap │ │ │ │ ├── comp/ │ │ │ │ │ ├── index.json │ │ │ │ │ ├── index.ts │ │ │ │ │ └── index.wxml │ │ │ │ ├── form-validator.test.ts │ │ │ │ ├── form.test.ts │ │ │ │ └── validator.test.ts │ │ │ ├── form-validator.ts │ │ │ ├── form.json │ │ │ ├── form.ts │ │ │ ├── form.wxml │ │ │ └── validator.ts │ │ ├── form-page/ │ │ │ ├── __test__/ │ │ │ │ ├── __snapshots__/ │ │ │ │ │ └── form-page.test.ts.snap │ │ │ │ ├── form-page.test.ts │ │ │ │ ├── index.js │ │ │ │ ├── index.json │ │ │ │ └── index.wxml │ │ │ ├── form-page.json │ │ │ ├── form-page.less │ │ │ ├── form-page.ts │ │ │ └── form-page.wxml │ │ ├── gallery/ │ │ │ ├── __test__/ │ │ │ │ ├── __snapshots__/ │ │ │ │ │ └── gallery.test.ts.snap │ │ │ │ └── gallery.test.ts │ │ │ ├── gallery.json │ │ │ ├── gallery.less │ │ │ ├── gallery.ts │ │ │ └── gallery.wxml │ │ ├── grids/ │ │ │ ├── __test__/ │ │ │ │ ├── __snapshots__/ │ │ │ │ │ └── grid.test.ts.snap │ │ │ │ └── grid.test.ts │ │ │ ├── grids.json │ │ │ ├── grids.less │ │ │ ├── grids.ts │ │ │ └── grids.wxml │ │ ├── half-screen-dialog/ │ │ │ ├── __test__/ │ │ │ │ ├── __snapshots__/ │ │ │ │ │ └── half-screen-dialog.test.ts.snap │ │ │ │ └── half-screen-dialog.test.ts │ │ │ ├── half-screen-dialog.json │ │ │ ├── half-screen-dialog.less │ │ │ ├── half-screen-dialog.ts │ │ │ └── half-screen-dialog.wxml │ │ ├── icon/ │ │ │ ├── __test__/ │ │ │ │ ├── __snapshots__/ │ │ │ │ │ └── icon.test.ts.snap │ │ │ │ └── icon.test.ts │ │ │ ├── base64.ts │ │ │ ├── icon.json │ │ │ ├── icon.less │ │ │ ├── icon.ts │ │ │ ├── icon.wxml │ │ │ └── icondata.ts │ │ ├── index.json │ │ ├── index.less │ │ ├── index.ts │ │ ├── index.wxml │ │ ├── loading/ │ │ │ ├── __test__/ │ │ │ │ ├── __snapshots__/ │ │ │ │ │ └── loading.test.ts.snap │ │ │ │ └── loading.test.ts │ │ │ ├── loading.json │ │ │ ├── loading.less │ │ │ ├── loading.ts │ │ │ └── loading.wxml │ │ ├── msg/ │ │ │ ├── __test__/ │ │ │ │ ├── __snapshots__/ │ │ │ │ │ └── msg.test.ts.snap │ │ │ │ └── msg.test.ts │ │ │ ├── msg.json │ │ │ ├── msg.less │ │ │ ├── msg.ts │ │ │ └── msg.wxml │ │ ├── navigation-bar/ │ │ │ ├── __test__/ │ │ │ │ ├── __snapshots__/ │ │ │ │ │ └── navigation-bar.test.ts.snap │ │ │ │ └── navigation-bar.test.ts │ │ │ ├── navigation-bar.json │ │ │ ├── navigation-bar.less │ │ │ ├── navigation-bar.ts │ │ │ └── navigation-bar.wxml │ │ ├── patch.less │ │ ├── searchbar/ │ │ │ ├── __test__/ │ │ │ │ ├── __snapshots__/ │ │ │ │ │ └── searchbar.test.ts.snap │ │ │ │ └── searchbar.test.ts │ │ │ ├── searchbar.json │ │ │ ├── searchbar.less │ │ │ ├── searchbar.ts │ │ │ └── searchbar.wxml │ │ ├── slideview/ │ │ │ ├── __test__/ │ │ │ │ ├── __snapshots__/ │ │ │ │ │ └── slideview.test.ts.snap │ │ │ │ └── slideview.test.ts │ │ │ ├── slideview-skyline.json │ │ │ ├── slideview-skyline.less │ │ │ ├── slideview-skyline.ts │ │ │ ├── slideview-skyline.wxml │ │ │ ├── slideview.json │ │ │ ├── slideview.less │ │ │ ├── slideview.ts │ │ │ ├── slideview.wxml │ │ │ └── slideview.wxs │ │ ├── tabbar/ │ │ │ ├── __test__/ │ │ │ │ ├── __snapshots__/ │ │ │ │ │ └── tabbar.test.ts.snap │ │ │ │ └── tabbar.test.ts │ │ │ ├── tabbar.json │ │ │ ├── tabbar.less │ │ │ ├── tabbar.ts │ │ │ └── tabbar.wxml │ │ ├── toptips/ │ │ │ ├── __test__/ │ │ │ │ ├── __snapshots__/ │ │ │ │ │ └── toptips.test.ts.snap │ │ │ │ └── toptips.test.ts │ │ │ ├── toptips.json │ │ │ ├── toptips.less │ │ │ ├── toptips.ts │ │ │ └── toptips.wxml │ │ ├── uploader/ │ │ │ ├── __test__/ │ │ │ │ ├── __snapshots__/ │ │ │ │ │ └── uploader.test.ts.snap │ │ │ │ └── uploader.test.ts │ │ │ ├── uploader.json │ │ │ ├── uploader.less │ │ │ ├── uploader.ts │ │ │ └── uploader.wxml │ │ └── utils/ │ │ ├── object.ts │ │ ├── string.ts │ │ └── utils.less │ ├── example/ │ │ ├── actionsheet/ │ │ │ ├── actionsheet.js │ │ │ ├── actionsheet.json │ │ │ ├── actionsheet.wxml │ │ │ └── actionsheet.wxss │ │ ├── article/ │ │ │ ├── article.js │ │ │ ├── article.json │ │ │ ├── article.wxml │ │ │ └── article.wxss │ │ ├── badge/ │ │ │ ├── badge.js │ │ │ ├── badge.json │ │ │ ├── badge.wxml │ │ │ └── badge.wxss │ │ ├── button/ │ │ │ ├── button.js │ │ │ ├── button.json │ │ │ ├── button.wxml │ │ │ └── button.wxss │ │ ├── cell/ │ │ │ ├── cell.js │ │ │ ├── cell.json │ │ │ ├── cell.wxml │ │ │ └── cell.wxss │ │ ├── common.less │ │ ├── dialog/ │ │ │ ├── dialog.js │ │ │ ├── dialog.json │ │ │ ├── dialog.wxml │ │ │ └── dialog.wxss │ │ ├── flex/ │ │ │ ├── flex.js │ │ │ ├── flex.json │ │ │ ├── flex.wxml │ │ │ └── flex.wxss │ │ ├── footer/ │ │ │ ├── footer.js │ │ │ ├── footer.json │ │ │ ├── footer.wxml │ │ │ └── footer.wxss │ │ ├── form/ │ │ │ ├── form.js │ │ │ ├── form.json │ │ │ ├── form.wxml │ │ │ └── form.wxss │ │ ├── form-page/ │ │ │ ├── form-page.js │ │ │ ├── form-page.json │ │ │ ├── form-page.wxml │ │ │ └── form-page.wxss │ │ ├── gallery/ │ │ │ ├── gallery.js │ │ │ ├── gallery.json │ │ │ ├── gallery.wxml │ │ │ └── gallery.wxss │ │ ├── grid/ │ │ │ ├── grid.js │ │ │ ├── grid.json │ │ │ ├── grid.wxml │ │ │ └── grid.wxss │ │ ├── half-screen-dialog/ │ │ │ ├── half-screen-dialog.js │ │ │ ├── half-screen-dialog.json │ │ │ ├── half-screen-dialog.wxml │ │ │ └── half-screen-dialog.wxss │ │ ├── icons/ │ │ │ ├── icons.js │ │ │ ├── icons.json │ │ │ ├── icons.wxml │ │ │ └── icons.wxss │ │ ├── images/ │ │ │ └── base64.js │ │ ├── index.js │ │ ├── index.json │ │ ├── index.less │ │ ├── index.wxml │ │ ├── loading/ │ │ │ ├── loading.js │ │ │ ├── loading.json │ │ │ ├── loading.wxml │ │ │ └── loading.wxss │ │ ├── loadmore/ │ │ │ ├── loadmore.js │ │ │ ├── loadmore.json │ │ │ ├── loadmore.wxml │ │ │ └── loadmore.wxss │ │ ├── msg/ │ │ │ ├── msg.js │ │ │ ├── msg.json │ │ │ ├── msg.wxml │ │ │ ├── msg.wxss │ │ │ ├── msg_fail.js │ │ │ ├── msg_fail.json │ │ │ ├── msg_fail.wxml │ │ │ ├── msg_fail.wxss │ │ │ ├── msg_success.js │ │ │ ├── msg_success.json │ │ │ ├── msg_success.wxml │ │ │ ├── msg_success.wxss │ │ │ ├── msg_text.js │ │ │ ├── msg_text.json │ │ │ ├── msg_text.wxml │ │ │ ├── msg_text.wxss │ │ │ ├── msg_text_primary.js │ │ │ ├── msg_text_primary.json │ │ │ ├── msg_text_primary.wxml │ │ │ └── msg_text_primary.wxss │ │ ├── navbar/ │ │ │ ├── navbar.js │ │ │ ├── navbar.json │ │ │ ├── navbar.wxml │ │ │ └── navbar.wxss │ │ ├── navigation/ │ │ │ ├── navigation.js │ │ │ ├── navigation.json │ │ │ ├── navigation.wxml │ │ │ └── navigation.wxss │ │ ├── panel/ │ │ │ ├── panel.js │ │ │ ├── panel.json │ │ │ ├── panel.wxml │ │ │ └── panel.wxss │ │ ├── picker/ │ │ │ ├── picker.js │ │ │ ├── picker.json │ │ │ ├── picker.wxml │ │ │ └── picker.wxss │ │ ├── preview/ │ │ │ ├── preview.js │ │ │ ├── preview.json │ │ │ ├── preview.wxml │ │ │ └── preview.wxss │ │ ├── progress/ │ │ │ ├── progress.js │ │ │ ├── progress.json │ │ │ ├── progress.wxml │ │ │ └── progress.wxss │ │ ├── searchbar/ │ │ │ ├── searchbar.js │ │ │ ├── searchbar.json │ │ │ ├── searchbar.wxml │ │ │ └── searchbar.wxss │ │ ├── slider/ │ │ │ ├── slider.js │ │ │ ├── slider.json │ │ │ ├── slider.wxml │ │ │ └── slider.wxss │ │ ├── slideview/ │ │ │ ├── slideview.js │ │ │ ├── slideview.json │ │ │ ├── slideview.wxml │ │ │ └── slideview.wxss │ │ ├── tabbar/ │ │ │ ├── tabbar.js │ │ │ ├── tabbar.json │ │ │ ├── tabbar.wxml │ │ │ └── tabbar.wxss │ │ ├── toast/ │ │ │ ├── toast.js │ │ │ ├── toast.json │ │ │ ├── toast.wxml │ │ │ └── toast.wxss │ │ ├── toptips/ │ │ │ ├── toptips.js │ │ │ ├── toptips.json │ │ │ ├── toptips.wxml │ │ │ └── toptips.wxss │ │ └── uploader/ │ │ ├── uploader.js │ │ ├── uploader.json │ │ ├── uploader.wxml │ │ └── uploader.wxss │ └── project.config.json ├── tools/ │ ├── build.js │ ├── checkcomponents.js │ ├── checkwxss.js │ ├── config.js │ ├── package.json │ └── utils.js └── tsconfig.json ================================================ FILE CONTENTS ================================================ ================================================ FILE: .eslintignore ================================================ node_modules src/weui-wxss miniprogram_dist miniprogram_dev tools ================================================ FILE: .eslintrc.js ================================================ module.exports = { root: true, parser: '@typescript-eslint/parser', parserOptions: { ecmaVersion: 6, sourceType: 'module' }, env: { es6: true, browser: true, jest: true, commonjs: true, node: true }, plugins: [ '@typescript-eslint', 'prettier' ], extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/eslint-recommended', 'plugin:@typescript-eslint/recommended', 'prettier/@typescript-eslint' ], globals: { wx: true, App: true, Page: true, Component: true }, rules: { 'prettier/prettier': 'error', 'no-console': ["error", { allow: ["warn", "error"] } ], '@typescript-eslint/ban-ts-ignore': 'off', '@typescript-eslint/no-empty-function': 'off', '@typescript-eslint/explicit-function-return-type': 'off', '@typescript-eslint/no-explicit-any': 'off' } } ================================================ FILE: .gitattributes ================================================ * text=auto ================================================ FILE: .github/ISSUE_TEMPLATE/----.md ================================================ --- name: 特性请求 about: 提出一个好的特性 title: "[FEATURE]" labels: '' assignees: '' --- ## 遇到的问题 描述你想要达到的效果，以及你的使用场景 ## 特性方案 描述你希望的实现方案 ================================================ FILE: .github/ISSUE_TEMPLATE/--bug.md ================================================ --- name: 报告Bug about: 创建一个Bug报告 title: "[BUG]" labels: '' assignees: '' --- ## Bug描述 描述你遇到的Bug，所产生的非预期行为 ## 复现方式 复现该Bug的方式，建议直接提供 [代码片段](https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html) ## 版本信息 - weui 版本 [useExtendedLib 引入则直接填写 useExtendedLib] : ================================================ FILE: .gitignore ================================================ .idea .DS_Store logs *.log npm-debug.log* yarn-debug.log* yarn-error.log* miniprogram_dist miniprogram_dev node_modules coverage dist ================================================ FILE: .gitmodules ================================================ ================================================ FILE: .npmignore ================================================ .idea .DS_Store package-lock.json logs *.log npm-debug.log* yarn-debug.log* yarn-error.log* test tools docs miniprogram_dev node_modules coverage tsconfig.json tslint.json ================================================ FILE: .npmrc ================================================ registry=https://registry.npmjs.org ================================================ FILE: .prettierrc.js ================================================ module.exports = { // 一行最多 100 字符 printWidth: 100, // 使用 4 个空格缩进 tabWidth: 4, // 不使用缩进符，而使用空格 useTabs: false, // 行尾需要有分号 semi: false, // 使用单引号 singleQuote: true, // 对象的 key 仅在必要时用引号 quoteProps: 'as-needed', // 末尾不需要逗号 trailingComma: 'none', // 大括号内的首尾需要空格 bracketSpacing: true, // 箭头函数，只有一个参数的时候，也需要括号 arrowParens: 'always', // 每个文件格式化的范围是文件的全部内容 rangeStart: 0, rangeEnd: Infinity, // 不需要写文件开头的 @prettier requirePragma: false, // 不需要自动在文件开头插入 @prettier insertPragma: false, // 使用默认的折行标准 proseWrap: 'preserve', // 根据显示样式决定 html 要不要折行 htmlWhitespaceSensitivity: 'css', // 换行符使用 lf endOfLine: 'lf' }; ================================================ FILE: .travis.yml ================================================ language: node_js node_js: - "v12.16.3" script: npm run test after_script: - npm run codecov ================================================ FILE: CHANGELOG.md ================================================ # 更新日志 ## 1.5.6 - fix: 修改 ext-class 实现 - fix: 修复 checkbox 样式错误 ## 1.5.5 - fix: 修复 cell 丢失边缘线样式 - fix: 修复 checkbox 样式错误 - fix: 修复 navigation-bar background 没生效 ## 1.5.4 - feat: half-screen-dialog, dialog, actionsheet, gallery, toptips 添加 rootPortal 参数 - fix: 修复 half-screen-dialog, dialog, actionsheet, gallery, toptips 默认不使用 root-portal ## 1.5.3 - fix: 修复 slideview 拆分 skyline 实现 ## 1.5.2 - feat: 升级 `weui-wxss` 至 2.6.17 - feat: slideview 拆分 skyline 实现 ## 1.5.1 - feat: 修复 dark-mode 实现 ## 1.5.0 - feat: 重构 skyline-patch - feat: 修改 ext-class 实现 ## 1.4.2 - fix: 修复 half-screen-dialog skyline 动画 - fix: 修复 navigation-bar 样式 ## 1.4.1 - fix: 修复 half-screen-dialog skyline 动画 ## 1.4.0 - feat: 正式支持 skyline ## 1.3.1 - fix: 移除 babel 依赖 ## 1.3.0 - feat: skyline 兼容 - feat: 升级 `weui-wxss` 至 2.6.6 ## 1.2.10 - fix: half-screen-dialog 恢复滚动 ## 1.2.9 - fix: dialog 修复 z-index 层级 ## 1.2.8 - fix: searchbar 修复聚焦状态 ## 1.2.7 - fix: dialog 修复自动聚焦 outline #216 - fix: half-screen-dialog 修复自动聚焦 outline #216 - fix: actionsheet 修复自动聚焦 outline #216 - fix: gallery 修复自动聚焦 outline #216 ## 1.2.6 - feat: dialog 使用 virtualHost - feat: 升级 `weui-wxss` 至 2.5.15 ## 1.2.5 - feat: checkbox 添加 disabled 属性 - fix: tabbar 修复 aria-label 告警 #206 - fix: slideview 修复 disabled 属性 #203 - fix: actionsheet 移除多余 wrap - fix: dialog 移除多余 wrap ## 1.2.4 - feat: 升级 `weui-wxss` 至 2.5.14 - fix: 修复 fade 动画 ## 1.2.3 - fix: 修复 half-screen-dialog button 样式向前兼容 ## 1.2.2 - feat: tabbar 添加 reactive 选项 - fix: 修复 actionsheet 底部 safearea 高度不正确 - fix: 修复 gallery 底部 safearea 高度不正确 ## 1.2.1 - fix: 修复 checkbox 无法操作 ## 1.2.0 - feat: 升级 `weui-wxss` 至 2.5.0 - feat: 无障碍适配 - fix: 修复 slideview 隐藏按钮后无动画 - fix: 修复 checkbox-group wx:if 判断不正确 ## 1.1.1 - fix: 修复找不到 wxs - fix: 修复找不到 weui-wxss ## 1.1.0 - feat: 升级 `weui-wxss` 至 2.4.4 - fix: 防止 `mp-half-screen-dialog` 滚动穿透 - chore: 构建系统迁移至 mpflow ## 1.0.8 - fix: 修复 #153 - fix: 修复 `mp-searchbar` 点击取消时错误 focus - fix: 修复 `mp-half-screen-dialog` 按钮在部分机型按钮排列出错 ## 1.0.7 - fix: 修复 `mp-icon` 在 type 改变时报错 ## 1.0.6 - feat: `mp-grids` 支持动态修改 grids - feat: `mp-searchbar` 点击取消按钮时触发 `cancel` 事件 - fix: 修复 `mp-half-screen-dialog` 中的 desc 属性判断 - fix: 修复 `mp-searchbar` 节流搜索没有获取最新数据 - fix: 修复 `form-validator` 中 bytelength 报错 ## 1.0.5 - updata: 升级 weui-wxss - update：使用 `hover-class` 代替 `:active` ## 1.0.4 - fix: 修复 rangelength 校验 - feat: 支持自适应 tabbar ## 1.0.3 - fix: `required` 判断 (#93) - fix: dialog 未居中 (#94) ## 1.0.2 - fix: Toptips 不展示的bug - fix: Form 校验失效的bug ## 1.0.1 - 补充 package.json repository ## 1.0.0 - 更新`weui-wxss`到`2.3.0`版本，支持 DarkMode - Demo 支持 DarkMode ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2019 cunjinli,rockhou,xushengni,tomylin Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ ## WeUI组件库简介 [![](https://img.shields.io/npm/v/weui-miniprogram.svg?style=flat-square)](https://www.npmjs.com/package/weui-miniprogram) [![](https://img.shields.io/npm/dw/weui-miniprogram?style=flat-square)](https://www.npmjs.com/package/weui-miniprogram) [![](https://img.shields.io/travis/wechat-miniprogram/weui-miniprogram.svg?style=flat-square)](https://github.com/wechat-miniprogram/weui-miniprogram) [![](https://img.shields.io/github/license/wechat-miniprogram/weui-miniprogram.svg?style=flat-square)](https://github.com/wechat-miniprogram/weui-miniprogram) [![](https://img.shields.io/codecov/c/github/wechat-miniprogram/weui-miniprogram.svg?style=flat-square)](https://github.com/wechat-miniprogram/weui-miniprogram) 这是一套基于样式库[weui-wxss](https://github.com/Tencent/weui-wxss/)开发的小程序扩展组件库，同微信原生视觉体验一致的扩展组件库，由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一。 ## 如何使用 详细使用参考[文档](https://wechat-miniprogram.github.io/weui/docs/) ## 开发 1. 初始化 ``` npm run init ``` 2. 执行命令： ``` npm run dev ``` 3. 构建组件库： ``` npm run build ``` ## 适配 DarkMode 在根结点（或组件的外层结点）增加属性 `data-weui-theme="dark"`，即把 WeUI 组件切换到 DarkMode 的表现，如: ```html ... ``` ================================================ FILE: babel.config.js ================================================ module.exports = { presets: ['@mpflow/plugin-babel/preset', '@mpflow/plugin-typescript/preset'] } ================================================ FILE: docs/README.md ================================================ ## WeUI组件库简介 这是一套基于样式库[weui-wxss](https://github.com/Tencent/weui-wxss/)开发的小程序扩展组件库，同微信原生视觉体验一致的UI组件库，由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一。 > 支持[扩展库](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#useExtendedLib)引入，不占用小程序包体积。 ## 项目背景 随着小程序的普及，微信也有很多内部小程序在开发，每个小程序都需要从零到1进行开发设计，而这个过程中，有大量的UI交互是重复的，另外，微信内部已经有一套H5版本的WeUI样式库。综合考虑，我们基于WeUI样式库开发了小程序版本的UI组件库，在内部多个小程序项目已经使用OK的情况下，我们把这套组件库开源让外部开发者也可以使用，欢迎大家Star以及提Issue。 ## 快速上手 请参考[快速上手](./quickstart.md) ## 在线预览 扫描下方小程序码可以预览该组件库 ![](./img/demo.png#width:300px) ## 参与贡献 欢迎给我们提出宝贵见的意见，[项目地址](https://github.com/wechat-miniprogram/weui-miniprogram) ================================================ FILE: docs/actionsheet.md ================================================ # ActionSheet 底部弹起的操作按钮组件 ## 代码引入 在 page.json 中引入组件 ```json { "usingComponents": { "mp-actionSheet": "weui-miniprogram/actionsheet/actionsheet" } } ``` ## 示例代码 ```html ``` ```js Page({ data: { showActionsheet: false, groups: [ { text: '示例菜单', value: 1 }, { text: '示例菜单', value: 2 }, { text: '负向菜单', type: 'warn', value: 3 } ] }, close: function () { this.setData({ showActionsheet: false }) }, btnClick(e) { console.log(e) this.close() } }) ``` ## 效果展示 ![](./img/actionsheet.png#width:300px) ## 属性列表 | 属性 | 类型 | 默认值 | 必填 | 说明 | | ---- | ---- | ------ | -------- | ---- | | title | string | | 否 | 标题 | | show-cancel | boolean | true | 否 | 是否显示取消按钮 | | cancel-text | string | | 否 | 取消按钮的文本 | | mask-class | string | | 否 | 背景蒙层的class | | ext-class | string | | 否 | ActionSheet额外的class | | mask-closable | boolean | true | 否 | 点击背景蒙层是否可以关闭ActionSheet | | mask | boolean | true | 否 | 是否显示背景蒙层 | | show | boolean | false | 否 | 是否显示ActionSheet | | actions | Array | false | 是 | ActionSheet的按钮项的配置，每一项是包含text、value、type的Object，type的取值为warn和default，表示两种样式 | | bindclose | eventhandler | | 否 | 点击背后的mask关闭掉ActionSheet触发的事件 | | bindactiontap | eventhandler | | 否 | 点击ActionSheet的按钮项触发的事件，detail为{ value, index } | ## Slot | 名称 | 描述 | | ---- | ---- | | title | 标题区域slot | ================================================ FILE: docs/badge.md ================================================ # Badge徽章 出现在按钮、图标附近的数字或者状态标记。 ## 代码引入 在 page.json 中引入组件 ```json { "usingComponents": { "mp-badge": "weui-miniprogram/badge/badge" } } ``` ## 属性列表 | 属性 | 类型 | 默认值 | 必填 | 说明 | | ---- | ---- | ------ | -------- | ---- | | extClass | string | | 否 | 组件类名 | | content | string | | 否 | 内容区域 | ## 提示 不设置 content 属性时，默认展示小圆点 ================================================ FILE: docs/cell.md ================================================ # Cell Cell是列表或者是表单的一项，常用于设置页的展示，或者用在表单中，作为表单的每一个要填写的项，Cell必须要放在[Cells](./cells.md)组件的下面。 ## 代码引入 在 page.json 中引入组件 ```json { "usingComponents": { "mp-cells": "weui-miniprogram/cells/cells", "mp-cell": "weui-miniprogram/cell/cell" } } ``` ## 属性列表 | 属性 | 类型 | 默认值 | 必填 | 说明 | | ---- | ---- | ------ | -------- | ---- | | ext-class | string | | 否 | 添加在组件内部结构的class，可用于修改组件内部的样式 | | icon | string | | 否 | Cell的最左侧的icon，是本地图片的路径，icon和名为icon的slot互斥 | | title | string | | 否 | Cell最左侧的标题，一般用在[Form](./form.md)表单组件里面，icon和title二选一，title和名为title的slot互斥 | | hover | boolean | false | 否 | 是否有hover效果 | | link | boolean | false | 否 | 右侧是有跳转的箭头，`v1.0`后的版本，`link: true` 会自带 hover 效果 | | value | string | | 是 | Cell的值，和默认的slot互斥 | | show-error | boolean | false | 否 | 用在[Form](./form.md)表单组件里面，在表单校验出错的时候是否把Cell标为warn状态 | | prop | string | | 否 | 用在[Form](./form.md)表单组件里面，需要校验的表单的字段名 | | footer | string | | 否 | Cell右侧区域的内容，和名为footer的slot互斥 | | inline | boolean | | 否 | 用在[Form](./form.md)表单组件里面，表示表单项是左右显示还是上下显示 | ## Slot | 名称 | 描述 | | ---- | ---- | | icon | 左侧图标slot | | title | 标题slot | | 默认 | 内容slot | | footer | 右侧区域slot | ================================================ FILE: docs/cells.md ================================================ # Cells Cells是列表分组，常用于嵌套一组Cell或者[Checkbox](./checkbox.md)，注意，Checkbox-group和Cell组件都必须放在Cells组件下面，Cells效果如下图所示。 ![](./img/cells.png#width:300px) ## 代码引入 在 page.json 中引入组件 ```json { "usingComponents": { "mp-cells": "weui-miniprogram/cells/cells", "mp-cell": "weui-miniprogram/cell/cell" } } ``` ## 示例代码 ```html 标题文字（使用slot） 说明文字 ``` ```js // page.js示例代码 Page({ }); ``` ## 属性列表 | 属性 | 类型 | 默认值 | 必填 | 说明 | | ---- | ---- | ------ | -------- | ---- | | ext-class | string | | 否 | 添加在组件内部结构的class，可用于修改组件内部的样式 | | title | string | | 否 | Cells的标题 | | footer | string | | 否 | Cells底部的文字 | ## Slot | 名称 | 描述 | | ---- | ---- | | 默认 | 内容slot | ================================================ FILE: docs/checkbox-group.md ================================================ # Checkbox-group和Checkbox Checkbox-group是由一组单选或者多选Checkbox组件组成，效果如下图所示。 ![](./img/checkbox-group.png#width:300px) ## 引入组件 在 page.json 中引入组件 ```json { "usingComponents": { "mp-checkbox-group": "weui-miniprogram/checkbox-group/checkbox-group", "mp-checkbox": "weui-miniprogram/checkbox/checkbox", "mp-cells": "weui-miniprogram/cells/cells" } } ``` ## 示例代码 ```html ``` ```js // page.js示例代码 Page({ data: { radioItems: [ {name: 'cell standard', value: '0', checked: true}, {name: 'cell standard', value: '1'} ], checkboxItems: [ {name: 'standard is dealt for u.', value: '0', checked: true}, {name: 'standard is dealicient for u.', value: '1'} ], }, radioChange: function (e) { console.log('radio发生change事件，携带value值为：', e.detail.value); var radioItems = this.data.radioItems; for (var i = 0, len = radioItems.length; i < len; ++i) { radioItems[i].checked = radioItems[i].value == e.detail.value; } this.setData({ radioItems: radioItems, [`formData.radio`]: e.detail.value }); }, checkboxChange: function (e) { console.log('checkbox发生change事件，携带value值为：', e.detail.value); var checkboxItems = this.data.checkboxItems, values = e.detail.value; for (var i = 0, lenI = checkboxItems.length; i < lenI; ++i) { checkboxItems[i].checked = false; for (var j = 0, lenJ = values.length; j < lenJ; ++j) { if(checkboxItems[i].value == values[j]){ checkboxItems[i].checked = true; break; } } } this.setData({ checkboxItems: checkboxItems, [`formData.checkbox`]: e.detail.value }); }, }); ``` ## checkbox-group组件属性列表 | 属性 | 类型 | 默认值 | 必填 | 说明 | | ---- | ---- | ------ | -------- | ---- | | ext-class | string | | 否 | 添加在组件内部结构的class，可用于修改组件内部的样式 | | multi | boolean | true | 否 | 单选还是多选 | | prop | string | | 否 | [Form](./form.md)表单组件校验的字段名 | | bindchange | eventhandler | | 否 | Checkbox-group发生改变时候触发的事件，detail为{value}，单选的value为checkbox的值，多选的value为选中的checkbox的值组成的数组 | ## checkbox-group的Slot | 名称 | 描述 | | ---- | ---- | | 默认 | 内容slot | ## checkbox组件属性列表 | 属性 | 类型 | 默认值 | 必填 | 说明 | | ---- | ---- | ------ | -------- | ---- | | ext-class | string | | 否 | 添加在组件内部结构的class，可用于修改组件内部的样式 | | multi | boolean | true | 否 | 单选还是多选 | | checked | boolean | | 否 | 是否选中 | | value | string | | 否 | checkbox的值 | | bindchange | eventhandler | | 否 | Checkbox发生改变时候触发的事件，detail为{value}，value为checkbox的值 | ================================================ FILE: docs/dialog.md ================================================ # Dialog Dialog弹窗组件。 ## 代码引入 在 page.json 中引入组件 ```json { "usingComponents": { "mp-dialog": "weui-miniprogram/dialog/dialog" } } ``` ## 属性列表 | 属性 | 类型 | 默认值 | 必填 | 说明 | | ---- | ---- | ------ | -------- | ---- | | ext-class | string | | 否 | 添加在组件内部结构的class，可用于修改组件内部的样式 | | title | string | | 否 | 弹窗的标题 | | buttons | array\ | [] | 否 | 底部的按钮组，建议最多提供两个按钮 | | mask | boolean | | 是 | 是否显示蒙层 | | mask-closable | boolean | | 是 | 点击蒙层是否可以关闭 | | show | boolean | false | 否 | 是否显示弹窗 | | bindclose | eventhandler | | 否 | 弹窗关闭的时候触发的事件 | | bindbuttontap | eventhandler | | 否 | buttons按钮组点击时触发的事件，detail为{index, item}，item是按钮的配置项 | buttons提供按钮组配置，每一项表示一个按钮，每一项的属性为 | 属性 | 类型 | 默认值 | 必填 | 说明 | | ---- | ---- | ------ | -------- | ---- | | extClass | string | | 否 | 按钮的额外的class，可用于修改组件内部的样式 | | text | string | | 否 | 按钮的文本 | ## Slot 弹窗组件只有一个默认slot用于显示弹窗的内容 ================================================ FILE: docs/form-page.md ================================================ # FormPage 表单页面，规定了标准表单的顶部的标题和底部的按钮提示等区域的规范 ## 代码引入 在 page.json 中引入组件 ```json { "usingComponents": { "mp-form-page": "weui-miniprogram/form-page/form-page", "mp-form": "weui-miniprogram/form/form" } } ``` ## 示例代码 ```html ``` ## 效果展示 ![](./img/form-page.png#width:300px) ## 属性列表 | 属性 | 类型 | 默认值 | 必填 | 说明 | | ---- | ---- | ------ | -------- | ---- | | title | string | | 否 | 标题 | | subtitle | boolean | | 否 | 副标题 | ## Slot | 名称 | 描述 | | ---- | ---- | | title | 标题区域slot和title属性互斥 | | tips | 底部确认按钮前面的提示区域 | | button | 底部提交按钮区域 | | suffixtips | 提交按钮下面的提示区域 | | footer | 页脚的内容区域 | ================================================ FILE: docs/form.md ================================================ # Form Form表单组件，结合Cell、Checkbox-group、Checkbox组件等做表单校验。 ## 代码引入 在 page.json 中引入组件 ```json { "usingComponents": { "mp-form": "weui-miniprogram/form/form" } } ``` ## 属性列表 | 属性 | 类型 | 默认值 | 必填 | 说明 | | ---- | ---- | ------ | -------- | ---- | | ext-class | string | | 否 | 添加在组件内部结构的class，可用于修改组件内部的样式 | | rules | object\ | | 否 | 表单校验的规则列表，格式下面详细介绍 | | models | object | | 否 | 需要校验的表单的数据 | | bindsuccess | eventhandler | | 否 | 校验成功触发的事件，detail是{trigger}，trigger的值是change或validate，表示是输入改成触发的校验还是主动调用的validate接口 | | bindfail | eventhandler | | 否 | 校验失败触发的事件，detail是{trigger, errors}，trigger的值是change或validate，表示是输入改成触发的校验还是主动调用的validate接口。errors是错误的字段列表。 | rules是表单校验的规则列表，列表每一项表示一个字段的校验规则，注意，必须要在Cell或Checkbox-group组件声明prop属性，表单校验规则才生效，表单校验规则的定义如下： | 属性 | 类型 | 默认值 | 必填 | 说明 | | ---- | ---- | ------ | -------- | ---- | | name | string | | 是 | 校验的字段名 | | rules | array/object | | 是 | 校验的规则，如果有多项，则是数组 | | rules.message | string | | 否 | 校验失败时候提示的文字 | | rules.validator | function | | 否 | 自定义校验函数，接受rule, value, param, models四个参数，其中rule格式为{name: '字段名', message: '失败信息'}, value是字段值，param是校验参数，models是form组件的models属性。函数返回错误提示，表示校验失败，错误提示会通过回调返回给开发者 | | rules.\[rule\] | string | | 否 | rule是变量，表示内置的校验规则名称，比如required，则校验规则对象为{name: "fieldName", rules: {required: true}}，下面会详细介绍所有的内置规则 | ## 内置校验规则 | 规则名 | 参数 | 说明 | | ---- | ---- | ---- | | required | | 是否必填 | | minlength | number | 最小长度 | | maxlength | number | 最大长度 | | rangelength | [number, number] | 长度范围，参数为[最小长度， 最大长度] | | bytelength | number | 字节长度 | | range | [number, number] | 数字的大小范围 | | min | number | 最小值限制 | | max | number | 最大值限制 | | mobile | | 手机号码校验 | | email | | 电子邮件校验 | | url | | URL链接地址校验 | | equalTo | string | 相等校验，参数是另外一个字段名 | ## 接口 ### validate validate接口接受类型为function的callback，callback有isValid和errors两个参数，isValid表示是否校验通过，errors在校验失败的时候的值为失败的字段列表。 ### validateField validateField接口接受2个参数， 第一个是字段名，第二个是类型为function的callback，callback有isValid和errors两个参数，isValid表示是否校验通过，errors在校验失败的时候的值为失败的字段列表。 ## Slot | 名称 | 描述 | | ---- | ---- | | 默认 | 内容slot | ================================================ FILE: docs/gallery.md ================================================ # Gallery画廊 用于多张图片展示，类似原生的wx.previewImage的展示。 ## 代码引入 在 page.json 中引入组件 ```json { "usingComponents": { "mp-gallery": "weui-miniprogram/gallery/gallery" } } ``` ## 属性列表 | 属性 | 类型 | 默认值 | 说明 | | ---- | ---- | ------ | ---- | | extClass | string | | 组件类名 | | show | boolean | true| 组件展示/隐藏 | | imgUrls | array | [] | 需要展示的图片集 | | current | number | 0 | 当前展示的图片index | | showDelete | boolean | true | 是否显删除按钮 | | hideOnClick | boolean | true | 点击图片是否隐藏该组件 | ## 自定义事件 | 事件名称 | 说明 | 回调参数 | | ---- | ---- | ------ | | change | 当前图片滑动切换之后触发 | e.detail = { current } 当前图片的位置 | | delete | 当前图片被删除后触发（delete 属性需要设为 true） | e.detail = { url, index } 被删除图片的 url 和 index | | hide | 组件被隐藏时候触发（hideOnClick 属性需要设为 true） | -- | ================================================ FILE: docs/half-screen-dialog.md ================================================ # Half Screen Dialog 半屏弹窗，辅助完成当前页面任务时；提醒用户并引导用户的下一步操作；用户主动发起的任务时。 ## 代码引入 在 page.json 中引入组件 ```json { "usingComponents": { "mp-half-screen-dialog": "weui-miniprogram/half-screen-dialog/half-screen-dialog" } } ``` ## 示例代码 ```html ``` ```js // page.js示例代码 Page({ data: { show: false, buttons: [ { type: 'default', className: '', text: '辅助操作', value: 0 }, { type: 'primary', className: '', text: '主操作', value: 1 } ] }, open: function () { this.setData({ show: true }) }, buttontap(e) { console.log(e.detail) } }); ``` ## 效果展示 ![](./img/half-screen-dialog.png#width:300px) ## 属性列表 | 属性 | 类型 | 默认值 | 说明 | | ---- | ---- | ------ | ---- | | extClass | string | | 组件类名 | | closabled | boolean | true| 是否展示关闭按钮 | | title | string | | 组件标题，可通过slot自定义 | | subTitle | string | | 组件副标题，可通过slot自定义 | | desc | string | | 辅助操作描述内容 | | tips | string | | 辅助操作提示内容 | | maskClosable | boolean | true | 点击遮罩是否关闭该组件 | | mask | boolean | true | 是否需要遮罩层 | | show | boolean | true | 是否开启弹窗 | | buttons | array | [] | 辅助操作按钮列表 | ## 自定义事件 | 事件名称 | 说明 | 回调参数 | | ---- | ---- | ------ | | bindbuttontap | 点击辅助操作按钮时触发 | e.detail = { index, item } | | bindclose | 组件关闭时候触发 | | ## Slot | 名称 | 描述 | | ---- | ---- | | title | 组件自定义标题栏 | | desc | 组件自定义操作描述 | | footer | 操作按钮区域slot | ================================================ FILE: docs/icon.md ================================================ # Icon 图标 ## 代码引入 在 page.json 中引入组件 ```json { "usingComponents": { "mp-icon": "weui-miniprogram/icon/icon" } } ``` ## 示例代码 ```html ``` ## 效果展示 ![](./img/icon.png#width:300px) ## 属性列表 | 属性 | 类型 | 默认值 | 说明 | | ---- | ---- | ------ | ---- | | extClass | string | | 组件类名 | | type | string | outline| Icon类型，可选值 outline（描边），field（填充） | | icon | string | | Icon名字 | | size | number | 20 | Icon的大小，单位 px | | color | string | black | Icon的颜色，默认黑色 | ## Icon 列表 ![](./img/iconList1.jpg#width:1366px) ![](./img/iconList2.jpg#width:1366px) ================================================ FILE: docs/loading.md ================================================ # Loading加载 加载数据时的 loading 效果 ## 代码引入 在 page.json 中引入组件 ```json { "usingComponents": { "mp-loading": "weui-miniprogram/loading/loading" } } ``` ## 属性列表 | 属性 | 类型 | 默认值 | 说明 | | ---- | ---- | ------ | ---- | | extClass | string | | 组件类名 | | show | boolean | true | loading 是否展示 | | animated | boolean | false | loading 显示/消失 动画 | | duration | number | 350 | 过渡动画时间 | | type | string | dot-gray | loading 类型，可选值有 dot-white、dot-gray、circle | | tips | string | 加载中 | 当 type 为 circle时生效，loading辅助文字 | ================================================ FILE: docs/msg.md ================================================ # Msg Msg组件提供操作确认页或操作成功或失败的标准的确认页的样式。 ## 代码引入 在 page.json 中引入组件 ```json { "usingComponents": { "mp-msg": "weui-miniprogram/msg/msg" } } ``` ## 属性列表 | 属性 | 类型 | 默认值 | 必填 | 说明 | | ---- | ---- | ------ | -------- | ---- | | ext-class | string | | 否 | 添加在组件内部结构的class，可用于修改组件内部的样式 | | type | string | | 否 | 顶部图标的样式，和[icon](https://developers.weixin.qq.com/miniprogram/dev/component/icon.html)组件的type属性用法一样 | | size | number | 64 | 否 | type不为空的时候有效，和[icon](https://developers.weixin.qq.com/miniprogram/dev/component/icon.html)组件的size属性用法一样 | | icon | string | | 否 | type为空的时候，icon的值是顶部图标的路径 | | title | string | | 否 | 标题 | | desc | string | | 否 | 描述内容，和desc的slot显示在相同的位置 | ## Slot | 名称 | 描述 | | ---- | ---- | | desc | 描述内容slot | | extend | desc下面的说明区域的slot | | handle | 操作按钮区域slot | | footer | 底部slot | ================================================ FILE: docs/navigation.md ================================================ # Navigation Navigation是小程序的顶部导航组件，当页面配置`navigationStyle`设置为`custom`的时候可以使用此组件替代原生导航栏。 ## 代码引入 在 page.json 中引入组件 ```json { "usingComponents": { "mp-navigation-bar": "weui-miniprogram/navigation-bar/navigation-bar" } } ``` ## 属性列表 | 属性 | 类型 | 默认值 | 必填 | 说明 | | ---- | ---- | ------ | -------- | ---- | | ext-class | string | | 否 | 添加在组件内部结构的class，可用于修改组件内部的样式 | | title | string | | 否 | 导航标题，如果不提供，则名为center的slot有效 | | back | boolean | true | 否 | 是否显示返回按钮，默认点击按钮会执行navigateBack，如果为false，则名为left的slot有效 | | delta | number | 1 | 否 | 当back为true的时候有效，表示navigateBack的delta参数 | | background | string | #f8f8f8 | 否 | 导航背景色 | | color | string | | 否 | 导航颜色 | | loading | boolean | | 否 | 是否显示标题左侧的loading | | show | boolean | | 否 | 显示隐藏导航，隐藏的时候navigation的高度占位还在 | | animated | boolean | | 否 | 显示隐藏导航的时候是有opacity过渡动画 | | bindback | eventhandler | | 否 | 在back为true时，点击back按钮触发此事件，detail包含delta | ## Slot | 名称 | 描述 | | ---- | ---- | | left | 左侧slot，在back按钮位置显示，当back为false的时候有效 | | center | 标题slot，在标题位置显示，当title为空的时候有效 | | right | 在导航的右侧显示 | ================================================ FILE: docs/other.md ================================================ # 其他组件 出于性能考虑，`weui-miniprogram` 并没有对所有 WeUI 组件进行封装（如：flex布局组件），可以直接使用 WeUI 中定义的组件结构（参考 [Demo](https://github.com/wechat-miniprogram/weui-miniprogram/tree/master/tools/demo)）。 ## 示例代码 在引入 weui.wxss 后，可以直接使用 weui-wxss 中定义的 class 自定义样式，以 flex 组件为例： ```html Flex Flex布局 weui weui weui weui weui weui weui weui weui weui weui weui weui ``` 渲染到页面上会得到以下结果： ![flex布局](./img/flex.png#width:396px) 其他组件可以参考库中提供的 [Demo](https://github.com/wechat-miniprogram/weui-miniprogram/tree/master/tools/demo) ================================================ FILE: docs/quickstart.md ================================================ # 快速上手 ## 使用之前 扩展组件库基于小程序自定义组件构建，在使用扩展组件库之前，建议先阅读熟悉小程序[自定义组件](../../framework/custom-component/index.md)。 ## 引入组件 1. 通过 [useExtendedLib 扩展库](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#useExtendedLib) 的方式引入，这种方式引入的组件将不会计入代码包大小。 2. 可以通过[npm](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)方式下载构建，npm包名为`weui-miniprogram` ## 如何使用 首先要在 app.wxss 里面引入 weui.wxss，如果是通过 npm 引入，需要先构建 npm（“工具”菜单 --> “构建 npm”） **通过 [useExtendedLib 扩展库](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#useExtendedLib) 的方式引入，可省略 import 步骤** ```css @import 'weui-miniprogram/weui-wxss/dist/style/weui.wxss'; ``` 然后可以在页面中引入 dialog 弹窗组件 1. 首先在页面的 json 文件加入 usingComponents 配置字段 ``` { "usingComponents": { "mp-dialog": "weui-miniprogram/dialog/dialog" } } ``` 2. 然后可以在对应页面的 wxml 中直接使用该组件 ```html test content ``` ```js Page({ data: { buttons: [{text: '取消'}, {text: '确认'}] } }) ``` 完整的组件的使用文档请参考具体的组件的文档。 ## 修改组件内部样式 每个组件可以设置`ext-class`这个属性，该属性提供设置在组件WXML顶部元素的class，组件的[addGlobalClass](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB)的options都设置为true，所以可以在页面设置wxss样式来覆盖组件的内部样式。需要注意的是，如果要覆盖组件内部样式，必须wxss的样式选择器的优先级比组件内部样式优先级高。 `addGlobalClass`在基础库2.2.3开始支持。 ## 适配 DarkMode 在根结点（或组件的外层结点）增加属性 `data-weui-theme="dark"`，即可把 WeUI 组件切换到 DarkMode 的表现，如: ```html ... ``` 也可以参考库中提供的 [Demo](https://github.com/wechat-miniprogram/weui-miniprogram/tree/master/tools/demo)。 ================================================ FILE: docs/search.md ================================================ # Searchbar 搜索组件Searchbar提供搜索的功能，并展示搜索的结果。 ## 代码引入 在 page.json 中引入组件 ```json { "usingComponents": { "mp-searchbar": "weui-miniprogram/searchbar/searchbar" } } ``` ## 属性列表 | 属性 | 类型 | 默认值 | 必填 | 说明 | | ---- | ---- | ------ | -------- | ---- | | ext-class | string | | 否 | 添加在组件内部结构的class，可用于修改组件内部的样式 | | focus | boolean | false | 否 | 是否在组件开始创建的时候focus搜索输入框 | | placeholder | string | 搜索 | 否 | 搜索输入框的placeholder | | value | string | | 否 | 搜索输入框的默认值 | | search | function | | 是 | 输入过程不断调用此函数得到新的搜索结果，参数是输入框的值value，返回Promise实例 | | throttle | number | 500 | 否 | 调用search函数的间隔，单位ms | | cancelText | string | 取消 | 否 | 取消按钮的文本 | | cancel | boolean | true | 否 | 是否显示取消按钮 | | bindfocus | eventhandle | | 否 | 在输入框focus的时候触发事件 | | bindblur | eventhandle | | 否 | 在输入框blur的时候触发事件 | | bindclear | eventhandle | | 否 | 在clear按钮点击的时候触发事件 | | bindinput | eventhandle | | 否 | 在输入框输入过程中触发事件 | | bindselectresult | eventhandle | | 否 | 在选择搜索结果的时候触发事件 | ================================================ FILE: docs/slideview.md ================================================ # Slideview 左滑删除组件，基础库 2.4.4 开始支持。 ## 代码引入 在 page.json 中引入组件 ```json { "usingComponents": { "mp-slideview": "weui-miniprogram/slideview/slideview" } } ``` ## 属性列表 | 属性 | 类型 | 默认值 | 必填 | 说明 | | ---- | ---- | ------ | -------- | ---- | | ext-class | string | | 否 | 添加在组件内部结构的class，可用于修改组件内部的样式 | | disable | boolean | false | 否 | 是否禁用slideview | | buttons | array\ | [] | 是 | 左滑的按钮组，建议最多3个按钮 | | icon | boolean | false | 否 | 按钮是否是icon | | show | boolean | | 否 | 是否显示slideview，可以控制隐藏显示 | | duration | boolean | 350 | 否 | slideview显示隐藏的动画的时长 | | throttle | number | 40 | 否 | 手指移动距离超过该值的时候，触发slideview的显示隐藏 | | bindbuttontap | eventhandler | | 否 | buttons按钮组点击时触发的事件，detail为{index, data}，data是按钮的配置项传入的data参数 | | bindhide | eventhandler | | 否 | 隐藏时触发的事件 | | bindshow | eventhandler | | 否 | 显示时触发的事件 | buttons提供按钮组配置，每一项表示一个按钮，每一项的属性为 | 属性 | 类型 | 默认值 | 必填 | 说明 | | ---- | ---- | ------ | -------- | ---- | | extClass | string | | 否 | 按钮的额外的class，可用于修改组件内部的样式 | | type | string | default | 否 | 按钮的类型，取值default和warn，warn是红色按钮 | | text | string | | 否 | 按钮的文本 | | src | string | | 否 | 如果icon为true，此属性有效 | | data | any | | 否 | 触发bindbuttontap回传的数据 | ================================================ FILE: docs/tabbar.md ================================================ # Tabbar Tabbar组件，也可以用来作为小程序的[自定义Tabbar](https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html)使用 ## 代码引入 在 page.json 中引入组件 ```json { "usingComponents": { "mp-tabbar": "weui-miniprogram/tabbar/tabbar" } } ``` ## 属性列表 | 属性 | 类型 | 默认值 | 必填 | 说明 | | ---- | ---- | ------ | -------- | ---- | | ext-class | string | | 否 | 添加在组件内部结构的class，可用于修改组件内部的样式 | | list | array\ | | 否 | Tabbar的项的数组，按照规范，至少要有2个Tabbar项 | | current | number | 0 | 否 | 当前选中的Tabbar项的下标 | | bindchange | eventhandler | | 否 | Tabbar项发生改变的时候触发此事件，detail为{index, item}，index是Tabbar下标，item是对应的Tabbar项的配置 | list属性是对象数组，每一项表示一个Tabbar项，其字段含义为 | 字段名 | 类型 | 默认值 | 必填 | 说明 | | ---- | ---- | ------ | -------- | ---- | | text | string | | 是 | Tabbar项的标题 | | iconPath | string | | 否 | Tabbar项的icon图片路径，建议使用绝对路径，相对路径要相对于组件所在目录的。 | | selectedIconPath | string | | 否 | Tabbar项选中时的icon，建议使用绝对路径，相对路径要相对于组件所在目录的。 | | badge | string | | 否 | 是否显示Tabbar的右上角的Badge | ================================================ FILE: docs/toptips.md ================================================ # Toptips Toptips顶部错误提示组件，常用于表单校验或提交请求到后台成功或失败的错误提示，如下图所示。 ![](./img/toptips.png#width:300px) ## 引入组件 在 page.json 中引入组件 ```json { "usingComponents": { "mp-toptips": "weui-miniprogram/toptips/toptips" } } ``` ## 示例代码 ```html ``` ```js // page.js示例代码 Page({ data: { error: '' }, onShow() { this.setData({ error: '这是一个错误提示' }) } }); ``` ## 属性列表 | 属性 | 类型 | 默认值 | 必填 | 说明 | | ---- | ---- | ------ | -------- | ---- | | ext-class | string | | 否 | 添加在组件内部结构的class，可用于修改组件内部的样式 | | type | string | | 否 | 提示类型，可以为info、error、success，表示三种提示颜色 | | show | boolean | false | 否 | 是否显示Toptips | | msg | string | | 是 | 提示内容 | | delay | number | 2000 | 否 | 提示内容显示后隐藏的ms值 | | bindhide | eventhandler | | 否 | 顶部提示隐藏的时候触发的事件 | ================================================ FILE: docs/uploader.md ================================================ # Uploader 图片上传Uploader组件。 ## 代码引入 在 page.json 中引入组件 ```json { "usingComponents": { "mp-uploader": "weui-miniprogram/uploader/uploader" } } ``` ## 属性列表 | 属性 | 类型 | 默认值 | 必填 | 说明 | | ---- | ---- | ------ | -------- | ---- | | ext-class | string | | 否 | 添加在组件内部结构的class，可用于修改组件内部的样式 | | title | string | 图片上传 | 否 | 组件标题 | | tips | string | | 否 | 组件的提示 | | delete | boolean | | 是 | 是否显示删除按钮 | | size-type | array | | 是 | 和chooseImage的sizeType参数一样 | | source-type | array | | 是 | 和chooseImage的sourceType参数一样 | | max-size | number | 5 * 1024 * 1024 | 是 | 图片上传的最大文件限制，默认是5M | | max-count | number | 1 | 否 | 图片上传的个数限制 | | files | array\ | | 否 | 当前的图片列表 | | select | function | | 否 | 选择图片时的过滤函数，返回true表示图片有效 | | upload | function | | 否 | 图片上传的函数，返回Promise，Promise的callback里面必须resolve({urls})表示成功，否则表示失败 | | bindselect | eventhandler | | 否 | 图片选择触发的事件，detail为{tempFilePaths, tempFiles, contents},其中tempFiles和tempFilePaths是chooseImage返回的字段，contents表示所选的图片的二进制Buffer列表 | | bindcancel | eventhandler | | 否 | 取消图片选择的事件，detail为{} | | bindsuccess | eventhandler | | 否 | 图片上传成功的事件，detail为{urls}，urls为upload函数上传成功返回的urls参数 | | bindfail | eventhandler | | 否 | 图片上传失败的事件，detail为{type, errMsg}，type为1表示图片超过大小限制，type为2表示选择图片失败，type为3表示图片上传失败。 | | binddelete | eventhandler | | 否 | 删除图片触发的事件，detail为{index, item}，index表示删除的图片的下标，item为图片对象。 | files表示当前的图片列表，每一项的定义为 | 属性 | 类型 | 默认值 | 必填 | 说明 | | ---- | ---- | ------ | -------- | ---- | | url | string | | 是 | 图片链接 | | loading | boolean | | 否 | 图片上传中 | | error | boolean | | 否 | 图片上传失败 | ================================================ FILE: gulpfile.js ================================================ const gulp = require('gulp') const clean = require('gulp-clean') const config = require('./tools/config') const BuildTask = require('./tools/build') const id = require('./package.json').name || 'miniprogram-custom-component' // 构建任务实例 // eslint-disable-next-line no-new new BuildTask(id, config.entry) // 清空生成目录和文件 gulp.task('clean', gulp.series(() => gulp.src(config.distPath, {read: false, allowEmpty: true}).pipe(clean()), done => { if (config.isDev) { return gulp.src(config.demoDist, {read: false, allowEmpty: true}) .pipe(clean()) } return done() })) // 监听文件变化并进行开发模式构建 gulp.task('watch', gulp.series(`${id}-watch`)) // 开发模式构建 gulp.task('dev', gulp.series(`${id}-dev`)) // 生产模式构建 gulp.task('default', gulp.series(`${id}-default`)) // 构建demo gulp.task('demo', gulp.series(`${id}-demo`)) ================================================ FILE: jest.config.js ================================================ module.exports = { bail: 1, verbose: true, testEnvironment: 'jsdom', testURL: 'https://jest.test', moduleFileExtensions: ['js', 'ts'], testMatch: ['/src/**/__test__/**/*.test.{js,ts}'], collectCoverageFrom: [ '/src/**/*.{js,ts}', '!/src/weui-wxss/**', '!**/__test__/**' ], snapshotSerializers: ['miniprogram-simulate/jest-snapshot-plugin'] } ================================================ FILE: mpflow.config.js ================================================ const TerserWebpackPlugin = require('terser-webpack-plugin') module.exports = { appId: 'wxe5f52902cf4de896', projectName: '小程序自定义组件', app: (mode) => (mode !== 'production' ? 'src/app' : undefined), pages: (mode) => (mode !== 'production' ? undefined : ['src/components/index']), sourceMap: (mode) => mode !== 'production', compileType: 'miniprogram', outputDir: 'miniprogram_dist', plugins: ['@mpflow/plugin-babel', '@mpflow/plugin-typescript', '@mpflow/plugin-css'], minimize: false, configureWebpackChain: (config) => { config.plugin('terser').use(TerserWebpackPlugin, [ { terserOptions: { compress: { directives: false } } } ]) }, settings: { urlCheck: true, es6: false, postcss: false, preloadBackgroundData: false, minified: false, newFeature: true, coverView: true, nodeModules: true, autoAudits: false, showShadowRootInWxmlPanel: true, scopeDataCheck: false, checkInvalidKey: true, checkSiteMap: true, uploadWithSourceMap: true, compileHotReLoad: false, babelSetting: { ignore: [], disablePlugins: [], outputPath: '' }, useIsolateContext: true, useCompilerModule: false, userConfirmedUseCompilerModuleSwitch: false, compileWorklet: true, minifyWXSS: false } } ================================================ FILE: package.json ================================================ { "name": "weui-miniprogram", "version": "1.5.6", "description": "小程序 WeUI 组件库", "main": "miniprogram_dist/index.js", "files": [ "miniprogram_dist" ], "scripts": { "submodule": "git submodule update --init --recursive", "init": "npm run submodule && npm i", "dev": "mpflow-service dev", "dev:open": "mpflow-service dev --open", "demo": "npm run dev", "watch": "npm run dev", "build": "mpflow-service build && npm run build-copy-weui && npm run build-fix-wxs", "build-copy-weui": "mkdir -p ./miniprogram_dist/weui-wxss/dist/style/ && cp ./miniprogram_dist/index.wxss ./miniprogram_dist/weui-wxss/dist/style/weui.wxss", "build-fix-wxs": "sed -i '' 's/\\/_commons/..\\/_commons/g' ./miniprogram_dist/slideview/slideview.wxml", "prepublishOnly": "npm run build", "dist": "npm run build", "clean-dev": "gulp clean --develop", "clean": "gulp clean", "lint": "eslint \"src/**/*.js\"", "lint-tools": "eslint \"tools/**/*.js\" --rule \"import/no-extraneous-dependencies: false\"", "test": "jest", "test-debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --verbose", "codecov": "jest --coverage && codecov" }, "miniprogram": "miniprogram_dist", "repository": { "type": "git", "url": "https://github.com/wechat-miniprogram/weui-miniprogram.git" }, "publishConfig": { "registry": "https://registry.npmjs.org" }, "homepage": "https://github.com/wechat-miniprogram/weui-miniprogram", "author": "xushengni,tomylin,cunjinli,rockhou", "license": "MIT", "devDependencies": { "@mpflow/plugin-babel": "^0.0.31", "@mpflow/plugin-css": "^0.0.27", "@mpflow/plugin-typescript": "^0.0.27", "@mpflow/service": "^0.0.34", "@types/jest": "^25.2.2", "@typescript-eslint/eslint-plugin": "^2.23.0", "@typescript-eslint/parser": "^2.23.0", "autoprefixer": "^6.5.1", "codecov": "^3.7.0", "colors": "^1.3.1", "eslint": "^5.14.1", "eslint-config-airbnb-base": "13.1.0", "eslint-config-prettier": "^6.10.1", "eslint-loader": "^2.1.2", "eslint-plugin-import": "^2.16.0", "eslint-plugin-node": "^7.0.1", "eslint-plugin-prettier": "^3.1.2", "eslint-plugin-promise": "^3.8.0", "gulp": "^4.0.0", "gulp-clean": "^0.4.0", "gulp-if": "^2.0.2", "gulp-install": "^1.1.0", "gulp-less": "^4.0.1", "gulp-rename": "^1.4.0", "gulp-sourcemaps": "^2.6.5", "jest": "^25.5.4", "jsdom": "^16.2.2", "miniprogram-api-typings": "^2.6.5", "miniprogram-simulate": "^1.5.8", "prettier": "2.0.1", "through2": "^2.0.3", "tslint": "^5.13.1", "tslint-loader": "^3.5.4", "typescript": "^3.3.3333", "vinyl": "^2.2.0", "weui-wxss": "^2.6.17" } } ================================================ FILE: src/app.js ================================================ const themeListeners = [] App({ onLaunch: function () { console.log('App Launch') wx.onThemeChange(({ theme }) => { this.themeChanged(theme) }) }, onShow: function () { console.log('App Show') }, onHide: function () { console.log('App Hide') }, themeChanged(theme) { this.globalData.theme = theme themeListeners.forEach((listener) => { listener(theme) }) }, watchThemeChange(listener) { if (themeListeners.indexOf(listener) < 0) { themeListeners.push(listener) } }, unWatchThemeChange(listener) { const index = themeListeners.indexOf(listener) if (index > -1) { themeListeners.splice(index, 1) } }, globalData: { hasLogin: false, theme: wx.getAppBaseInfo().theme, GRID_DEMO_URL: '/example/index', iconTabbar: require('/example/images/icon_tabbar.png').default } }) ================================================ FILE: src/app.json ================================================ { "pages": [ "example/index", "example/button/button", "example/cell/cell", "example/slideview/slideview", "example/form/form", "example/form-page/form-page", "example/slider/slider", "example/uploader/uploader", "example/article/article", "example/badge/badge", "example/flex/flex", "example/footer/footer", "example/gallery/gallery", "example/grid/grid", "example/icons/icons", "example/loadmore/loadmore", "example/loading/loading", "example/panel/panel", "example/preview/preview", "example/progress/progress", "example/actionsheet/actionsheet", "example/dialog/dialog", "example/msg/msg", "example/msg/msg_text", "example/msg/msg_text_primary", "example/msg/msg_success", "example/msg/msg_fail", "example/half-screen-dialog/half-screen-dialog", "example/picker/picker", "example/toast/toast", "example/toptips/toptips", "example/navbar/navbar", "example/navigation/navigation", "example/tabbar/tabbar", "example/searchbar/searchbar" ], "window": { "navigationBarTextStyle": "black", "navigationBarTitleText": "小程序UI组件库", "navigationBarBackgroundColor": "#f8f8f8", "backgroundColor": "#f8f8f8" }, "networkTimeout": { "request": 10000, "connectSocket": 10000, "uploadFile": 10000, "downloadFile": 10000 }, "debug": true, "style": "v2", "darkmode": true, "lazyCodeLoading": "requiredComponents", "renderer": "skyline", "rendererOptions": { "skyline": { "defaultDisplayBlock": true, "defaultContentBox": true } } } ================================================ FILE: src/app.less ================================================ @import "./example/common.less"; .page { display: flex; width: 100vw; height: 100vh; flex-direction: column; } .page-height { height: 100%; flex: 1 1 0; overflow: hidden; } navigator text, text text, text navigator { display: inline; } .wx-scroll-view-flex:is(div):not(.wx-scroll-view-flex) { width: auto !important; } ================================================ FILE: src/base/CustomPage.js ================================================ import themeMixin from './behaviors/theme' const CustomPage = function (options) { return Page( Object.assign({}, options, { behaviors: [themeMixin].concat(options.behaviors || []), onLoad(query) { const app = getApp() this.themeChanged(app.globalData.theme) app.watchThemeChange && app.watchThemeChange(this.themeChanged) options.onLoad && options.onLoad.call(this, query) }, onUnload() { const app = getApp() app.unWatchThemeChange && app.unWatchThemeChange(this.themeChanged) options.onUnload && options.onUnload.call(this) } }) ) } export default CustomPage ================================================ FILE: src/base/behaviors/theme.js ================================================ module.exports = Behavior({ data: { theme: 'light' }, methods: { themeChanged(theme) { this.setData({ theme }) } } }) ================================================ FILE: src/components/actionsheet/__test__/__snapshots__/actionsheet.test.ts.snap ================================================ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`actionsheet basic actionsheet 1`] = `
actionsheet title item 1 item 2 item 3 actionsheet cancel text
`; exports[`actionsheet no cancel 1`] = `
actionsheet title item 1 item 2 item 3
`; exports[`actionsheet show on create 1`] = `
actionsheet title item 1 item 2 item 3 actionsheet cancel text
`; ================================================ FILE: src/components/actionsheet/__test__/actionsheet.test.ts ================================================ import path from 'path' import simulate from 'miniprogram-simulate' describe('actionsheet', () => { let id: string beforeAll(() => { id = simulate.load(path.resolve(__dirname, './index')) }) test('basic actionsheet', async () => { const container = simulate.render(id) container.attach(document.createElement('parent-wrapper')) expect(container.toJSON()).toMatchSnapshot() }) test('show on create', async () => { const container = simulate.render(id, { show: true }) container.attach(document.createElement('parent-wrapper')) expect(container.toJSON()).toMatchSnapshot() }) test('no cancel', async () => { const container = simulate.render(id, { showCancel: false }) container.attach(document.createElement('parent-wrapper')) expect(container.toJSON()).toMatchSnapshot() }) test('touch', async () => { const container = simulate.render(id) container.attach(document.createElement('parent-wrapper')) const comp = container.querySelector('.comp') const menu = comp.querySelectorAll('.weui-actionsheet__menu .weui-actionsheet__cell') menu[2].dispatchEvent('touchstart') menu[2].dispatchEvent('touchend') await simulate.sleep(10) expect(container.data.tapValue).toBe(3) menu[1].dispatchEvent('touchstart') menu[1].dispatchEvent('touchend') await simulate.sleep(10) expect(container.data.tapValue).toBe(2) }) test('close', async () => { const container = simulate.render(id) container.attach(document.createElement('parent-wrapper')) const comp = container.querySelector('.comp') const cancel = comp.querySelector('.weui-actionsheet__action .weui-actionsheet__cell') cancel.dispatchEvent('touchstart') cancel.dispatchEvent('touchend') await simulate.sleep(10) expect(container.data.show).toBe(false) expect(comp.data.show).toBe(false) }) }) ================================================ FILE: src/components/actionsheet/__test__/index.json ================================================ { "component": true, "usingComponents": { "mp-actionsheet": "../actionsheet" } } ================================================ FILE: src/components/actionsheet/__test__/index.ts ================================================ Component({ properties: { showCancel: { type: Boolean, value: true } }, data: { tapValue: 0, show: true, actions: [ { text: 'item 1', value: 1 }, { text: 'item 2', value: 2 }, { text: 'item 3', type: 'warn', value: 3 } ] }, methods: { actiontap(event): void { this.setData({ tapValue: event.detail.value }) }, close(): void { this.setData({ show: false }) } } }) ================================================ FILE: src/components/actionsheet/__test__/index.wxml ================================================ ================================================ FILE: src/components/actionsheet/actionsheet.json ================================================ { "component": true, "styleIsolation": "apply-shared", "usingComponents": {} } ================================================ FILE: src/components/actionsheet/actionsheet.less ================================================ .weui-actionsheet__action { padding-bottom: 0; } .weui-actionsheet__cell_cancel { padding-bottom: calc(16px + env(safe-area-inset-bottom)); } .weui-actionsheet__title:focus { outline: none; } .weui-actionsheet { transform: none; -webkit-transform: none; } // FIXME: skyline animation 暂有 scope 的 bug .weui-animate-fade-in { animation: weuiFadeIn ease 0.3s forwards; } @keyframes weuiFadeIn { from { opacity: 0; } to { opacity: 1; } } .weui-animate-fade-out { animation: weuiFadeOut ease 0.3s forwards; } @keyframes weuiFadeOut { from { opacity: 1; } to { opacity: 0; } } .weui-animate-slide-up { animation: weuiSlideUp ease 0.3s forwards; } @keyframes weuiSlideUp { from { transform: translate3d(0, 100%, 0); } to { transform: translateZ(0); } } .weui-animate-slide-down { animation: weuiSlideDown ease 0.3s forwards; } @keyframes weuiSlideDown { from { transform: translateZ(0); } to { transform: translate3d(0, 100%, 0); } } ================================================ FILE: src/components/actionsheet/actionsheet.ts ================================================ Component({ options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, properties: { title: { // 标题 type: String, value: '' }, showCancel: { // 是否显示取消按钮 type: Boolean, value: true }, cancelText: { // 取消按钮文案 type: String, value: '取消' }, maskClass: { // 遮罩层class type: String, value: '' }, extClass: { // 弹出窗 class type: String, value: '' }, maskClosable: { // 点击遮罩 关闭 actionsheet type: Boolean, value: true }, mask: { // 是否需要 遮罩层 type: Boolean, value: true }, show: { // 是否开启 actionsheet type: Boolean, value: false, observer: '_showChange' }, actions: { // actions 列表 type: Array, value: [], // {text, extClass} observer: '_groupChange' }, rootPortal: { // 是否使用 root-portal type: Boolean, value: false } }, data: { wrapperShow: false, innerShow: false }, lifetimes: { ready() { this._showChange(this.data.show) } }, methods: { _showChange(show) { if (show) { this.setData({ wrapperShow: true, innerShow: true }) } else { this.setData({ innerShow: false }) setTimeout(() => { this.setData({ wrapperShow: false }) }, 300) } }, _groupChange(e): void { // 支持 一维数组 写法 if (e.length > 0 && typeof e[0] !== 'string' && !(e[0] instanceof Array)) { this.setData({ actions: [this.data.actions] }) } }, buttonTap(e): void { const { value, groupindex, index } = e.currentTarget.dataset this.triggerEvent('actiontap', { value, groupindex, index }) }, closeActionSheet(e): void { const { type } = e.currentTarget.dataset if (this.data.maskClosable || type) { // 点击 action 里面的 取消 this.setData({ show: false }) // 关闭回调事件 this.triggerEvent('close') } } } }) ================================================ FILE: src/components/actionsheet/actionsheet.wxml ================================================ var join = function(a,b) { return a+b }; var isNotSlot = function(v) { return typeof v !== 'string' } module.exports = { join: join, isNotSlot: isNotSlot }