diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..0a82b23 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,3 @@ +**/*.wxs +node_modules +miniprogram_npm \ No newline at end of file diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..c46df90 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,86 @@ +/* + * Eslint config file + * Documentation: https://eslint.org/docs/user-guide/configuring/ + * Install the Eslint extension before using this feature. + */ +module.exports = { + env: { + es6: true, + browser: true, + node: true, + }, + parserOptions: { + ecmaVersion: 2018, + sourceType: 'module', + }, + globals: { + wx: true, + App: true, + Page: true, + getCurrentPages: true, + getApp: true, + Component: true, + requirePlugin: true, + requireMiniProgram: true, + }, + extends: ['eslint-config-airbnb-base', 'eslint-config-prettier'], + plugins: ['prettier', 'import'], + // extends: 'eslint:recommended', + rules: { + 'import/order': [ + 'error', + { + groups: [ + 'builtin', // Built-in types are first + 'external', // Then the index file + 'internal', + ], + }, + ], + // 非开发模式禁用debugger + 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn', + // 允许调用首字母大写的函数时没有 new 操作符 + 'new-cap': 'off', + // 在工具库中允许变量以下划线开头 + 'no-underscore-dangle': 'off', + // 在工具库中允许参数重新赋值 + 'no-param-reassign': 'off', + 'number-leading-zero': 'off', + eqeqeq: [ + 'error', + 'always', + { + null: 'ignore', + }, + ], + 'import/no-unresolved': 0, + 'import/prefer-default-export': 0, + 'import/no-named-as-default': 0, + 'import/extensions': 0, + 'import/export': 0, + 'import/no-cycle': 0, + 'import/no-extraneous-dependencies': [ + 'error', + { + devDependencies: true, + }, + ], + 'import/no-dynamic-require': 0, + 'object-shorthand': 0, + 'no-shadow': 0, + 'no-unused-expressions': 0, + 'no-unused-vars': 0, + 'consistent-return': 0, + 'no-return-assign': 0, + 'func-names': 0, + 'class-methods-use-this': 0, + 'no-console': [ + 2, + { + allow: ['warn', 'error'], + }, + ], + 'no-undef': 0, + 'no-proto': 0, + }, +}; diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..0a353ed --- /dev/null +++ b/.prettierignore @@ -0,0 +1 @@ +**/*.md \ No newline at end of file diff --git a/.prettierrc.yml b/.prettierrc.yml new file mode 100644 index 0000000..a13251c --- /dev/null +++ b/.prettierrc.yml @@ -0,0 +1,49 @@ +# 一行最多 100 字符 +printWidth: 120 +# 使用 2 个空格缩进 +tabWidth: 2 +# 不使用缩进符，而使用空格 +useTabs: false +# 行尾需要分号 +semi: true +# 使用单引号 +singleQuote: true +# 对象的 key 仅在必要时用引号 +quoteProps: as-needed +# jsx 不使用单引号，而使用双引号 +jsxSingleQuote: false +# 末尾需要逗号 +trailingComma: all +# 大括号内的首尾需要空格 +bracketSpacing: true +# jsx 标签的反尖括号需要换行 +jsxBracketSameLine: false +# 箭头函数，只有一个参数的时候，不需要括号 +arrowParens: always +# 每个文件格式化的范围是文件的全部内容 +rangeStart: 0 +# 不需要写文件开头的 @prettier +requirePragma: false +# 不需要自动在文件开头插入 @prettier +insertPragma: false +# 使用默认的折行标准 +proseWrap: preserve +# 根据显示样式决定 html 要不要折行 +htmlWhitespaceSensitivity: css +# 换行符使用 lf +endOfLine: lf +# 后缀文件名特有规则 +overrides: + - files: '*.{wxss,less}' + options: + parser: less + - files: '*.json,.*rc' + options: + parser: json + - files: '*.{wxml,html}' + options: + parser: html + htmlWhitespaceSensitivity: strict + - files: '*.wxs' + options: + parser: babel diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..b3114d5 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2022 leejimqiu + +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. diff --git a/README.md b/README.md index 1085642..b664e3c 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,70 @@ -# wxapp_escort_admin +# TDesign 通用页面模板 +基于 TDesign 打造的通用页面模板，包含通用的登陆注册、个人中心、设置中心、信息流等等功能。 + +## 模版功能预览 + +### 首页 + +
+ image + image +
+ +### 信息发布 + +image + +### 搜索页 + +image + +### 个人中心 +
+ image + image + image +
+ + +### 设置中心 + +image + +### 消息中心 + +image + + +## 开发预览 +### 目录结构（TODO: 生成目录结构树） + + +### 在开发者工具中预览 + +```bash +# 安装项目依赖 +npm install + +``` + +打开[微信开发者工具](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html)，导入整个项目，构建 npm 包，就可以预览示例了。 + +### 基础库版本 + +最低基础库版本`^2.6.5` + + +## 贡献成员 + + + + + +## 反馈 + +有任何问题，建议通过 [Github issues](https://github.com/TDesignOteam/tdesign-miniprogram-starter/issues) 反馈。 + +## 开源协议 + +TDesign 遵循 [MIT 协议](https://github.com/TDesignOteam/tdesign-miniprogram-starter/blob/main/LICENSE)。 diff --git a/app.js b/app.js new file mode 100644 index 0000000..4b4347a --- /dev/null +++ b/app.js @@ -0,0 +1,58 @@ +// app.js +import config from './config'; +import createBus from './utils/eventBus'; + +App({ + onLaunch() { + const updateManager = wx.getUpdateManager(); + + updateManager.onCheckForUpdate((res) => { + // console.log(res.hasUpdate) + }); + + updateManager.onUpdateReady(() => { + wx.showModal({ + title: '更新提示', + content: '新版本已经准备好，是否重启应用？', + success(res) { + if (res.confirm) { + updateManager.applyUpdate(); + } + }, + }); + }); + + this.getUnreadNum(); + this.connect(); + }, + + /** 全局事件总线 */ + eventBus: createBus(), + + /** 初始化WebSocket */ + connect() { + const socket = null //connectSocket(); + /*socket.onMessage((data) => { + data = JSON.parse(data); + if (data.type === 'message' && !data.data.message.read) this.setUnreadNum(this.globalData.unreadNum + 1); + });*/ + this.globalData.socket = socket; + }, + + /** 获取未读消息数量 */ + getUnreadNum() { + }, + + /** 设置未读消息数量 */ + setUnreadNum(unreadNum) { + this.globalData.unreadNum = unreadNum; + this.eventBus.emit('unread-num-change', unreadNum); + }, + + + globalData: { + user: null, + unreadNum: 0, // 未读消息数量 + socket: null, // SocketTask 对象 + }, +}); diff --git a/app.json b/app.json new file mode 100644 index 0000000..1a9b481 --- /dev/null +++ b/app.json @@ -0,0 +1,62 @@ +{ + "pages": [ + "pages/home/index", + "pages/ai/index", + "pages/set/index", + "pages/order/index", + "pages/customer/index" + ], + "usingComponents": { + "t-toast": "tdesign-miniprogram/toast/toast" + }, + "subpackages": [], + "window": { + "backgroundTextStyle": "light", + "navigationBarBackgroundColor": "#1a1f3c", + "navigationBarTitleText": "Weixin", + "navigationBarTextStyle": "white", + "backgroundColor": "#0f1535" + }, + "tabBar": { + "color": "#8a8a8a", + "selectedColor": "#1296db", + "backgroundColor": "#0f1535", + "borderStyle": "black", + "list": [ + { + "pagePath": "pages/home/index", + "text": "首页", + "iconPath": "images/home.png", + "selectedIconPath": "images/home-blue.png" + }, + { + "pagePath": "pages/order/index", + "text": "订单", + "iconPath": "images/order.png", + "selectedIconPath": "images/order-blue.png" + }, + { + "pagePath": "pages/customer/index", + "text": "客户", + "iconPath": "images/customer.png", + "selectedIconPath": "images/customer-blue.png" + }, + { + "pagePath": "pages/ai/index", + "text": "消息", + "iconPath": "images/chat.png", + "selectedIconPath": "images/chat-blue.png" + }, + { + "pagePath": "pages/set/index", + "text": "设置", + "iconPath": "images/set.png", + "selectedIconPath": "images/set-blue.png" + } + ] + }, + "resolveAlias": { + "~/*": "/*" + }, + "sitemapLocation": "sitemap.json" +} \ No newline at end of file diff --git a/app.wxss b/app.wxss new file mode 100644 index 0000000..d5d4f06 --- /dev/null +++ b/app.wxss @@ -0,0 +1,9 @@ +/**app.wxss**/ +page { + background-color: #f3f3f3; +} + +.page { + height: 100vh; + background-color: #fff; +} diff --git a/config.js b/config.js new file mode 100644 index 0000000..e24d0e4 --- /dev/null +++ b/config.js @@ -0,0 +1,3 @@ +export default { + baseUrl: '', +}; diff --git a/images/chat-blue.png b/images/chat-blue.png new file mode 100644 index 0000000..1eb336c Binary files /dev/null and b/images/chat-blue.png differ diff --git a/images/chat.png b/images/chat.png new file mode 100644 index 0000000..18249fc Binary files /dev/null and b/images/chat.png differ diff --git a/images/customer-blue.png b/images/customer-blue.png new file mode 100644 index 0000000..b2c33eb Binary files /dev/null and b/images/customer-blue.png differ diff --git a/images/customer.png b/images/customer.png new file mode 100644 index 0000000..f8ecfe3 Binary files /dev/null and b/images/customer.png differ diff --git a/images/home-blue.png b/images/home-blue.png new file mode 100644 index 0000000..e7d4828 Binary files /dev/null and b/images/home-blue.png differ diff --git a/images/home.png b/images/home.png new file mode 100644 index 0000000..066d20b Binary files /dev/null and b/images/home.png differ diff --git a/images/order-blue.png b/images/order-blue.png new file mode 100644 index 0000000..068ebba Binary files /dev/null and b/images/order-blue.png differ diff --git a/images/order.png b/images/order.png new file mode 100644 index 0000000..8773d27 Binary files /dev/null and b/images/order.png differ diff --git a/images/set-blue.png b/images/set-blue.png new file mode 100644 index 0000000..80dc736 Binary files /dev/null and b/images/set-blue.png differ diff --git a/images/set.png b/images/set.png new file mode 100644 index 0000000..7db68b9 Binary files /dev/null and b/images/set.png differ diff --git a/miniprogram_npm/.DS_Store b/miniprogram_npm/.DS_Store new file mode 100644 index 0000000..60c26ef Binary files /dev/null and b/miniprogram_npm/.DS_Store differ diff --git a/miniprogram_npm/dayjs/index.js b/miniprogram_npm/dayjs/index.js new file mode 100644 index 0000000..681998b --- /dev/null +++ b/miniprogram_npm/dayjs/index.js @@ -0,0 +1,13 @@ +module.exports = (function() { +var __MODS__ = {}; +var __DEFINE__ = function(modId, func, req) { var m = { exports: {}, _tempexports: {} }; __MODS__[modId] = { status: 0, func: func, req: req, m: m }; }; +var __REQUIRE__ = function(modId, source) { if(!__MODS__[modId]) return require(source); if(!__MODS__[modId].status) { var m = __MODS__[modId].m; m._exports = m._tempexports; var desp = Object.getOwnPropertyDescriptor(m, "exports"); if (desp && desp.configurable) Object.defineProperty(m, "exports", { set: function (val) { if(typeof val === "object" && val !== m._exports) { m._exports.__proto__ = val.__proto__; Object.keys(val).forEach(function (k) { m._exports[k] = val[k]; }); } m._tempexports = val }, get: function () { return m._tempexports; } }); __MODS__[modId].status = 1; __MODS__[modId].func(__MODS__[modId].req, m, m.exports); } return __MODS__[modId].m.exports; }; +var __REQUIRE_WILDCARD__ = function(obj) { if(obj && obj.__esModule) { return obj; } else { var newObj = {}; if(obj != null) { for(var k in obj) { if (Object.prototype.hasOwnProperty.call(obj, k)) newObj[k] = obj[k]; } } newObj.default = obj; return newObj; } }; +var __REQUIRE_DEFAULT__ = function(obj) { return obj && obj.__esModule ? obj.default : obj; }; +__DEFINE__(1740983753193, function(require, module, exports) { +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).dayjs=e()}(this,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return"["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return!r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return(e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()1)return t(u[0])}else{var a=e.name;D[a]=e,i=a}return!r&&i&&(g=i),i||!r&&g},w=function(t,e){if(p(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new b(n)},O=v;O.l=S,O.i=p,O.w=function(t,e){return w(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var b=function(){function M(t){this.$L=S(t.locale,null,!0),this.parse(t)}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(O.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.$x=t.x||{},this.init()},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},m.$utils=function(){return O},m.isValid=function(){return!(this.$d.toString()===l)},m.isSame=function(t,e){var n=w(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return w(t)=e?t:\"\"+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return(e<=0?\"+\":\"-\")+m(r,2,\"0\")+\":\"+m(i,2,\"0\")},m:function t(e,n){if(e.date()1)return t(u[0])}else{var a=e.name;D[a]=e,i=a}return!r&&i&&(g=i),i||!r&&g},w=function(t,e){if(p(t))return t.clone();var n=\"object\"==typeof e?e:{};return n.date=t,n.args=arguments,new b(n)},O=v;O.l=S,O.i=p,O.w=function(t,e){return w(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var b=function(){function M(t){this.$L=S(t.locale,null,!0),this.parse(t)}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(O.u(e))return new Date;if(e instanceof Date)return new Date(e);if(\"string\"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||\"0\").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.$x=t.x||{},this.init()},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},m.$utils=function(){return O},m.isValid=function(){return!(this.$d.toString()===l)},m.isSame=function(t,e){var n=w(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return w(t)", + "path": "./action-sheet/action-sheet" + }, + "t-avatar-group": { + "key": "t-avatar-group", + "label": "头像组", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-avatar.png", + "properties": [ + { + "key": "cascading", + "type": ["String"], + "desc": "图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上", + "label": "" + }, + { + "key": "collapseAvatar", + "type": ["String"], + "desc": "头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多`", + "label": "" + }, + { + "key": "max", + "type": ["Number"], + "desc": "能够同时显示的最多头像数量", + "label": "" + }, + { + "key": "size", + "type": ["String"], + "desc": "尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size", + "label": "" + } + ], + "externalClasses": ["t-class", "t-class-image", "t-class-content"], + "tpl": "", + "require": { + "t-avatar": "./avatar/avatar" + }, + "path": "./avatar/avatar-group" + }, + "t-avatar": { + "key": "t-avatar", + "label": "头像", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-avatar.png", + "properties": [ + { + "key": "alt", + "type": ["String"], + "desc": "头像替换文本，仅当图片加载失败时有效", + "label": "" + }, + { + "key": "badgeProps", + "type": ["Object"], + "desc": "头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字", + "label": "" + }, + { + "key": "hideOnLoadFailed", + "type": ["Boolean"], + "desc": "加载失败时隐藏图片", + "label": "" + }, + { + "key": "icon", + "type": ["String"], + "desc": "图标", + "label": "" + }, + { + "key": "image", + "type": ["String"], + "desc": "图片地址", + "label": "" + }, + { + "key": "shape", + "type": ["String"], + "desc": "形状", + "label": "" + }, + { + "key": "size", + "type": ["String"], + "desc": "尺寸，示例值：small/medium/large/24px/38px 等，默认为 large", + "label": "" + } + ], + "externalClasses": ["t-class"], + "events": [ + { + "key": "bind:error", + "desc": "图片加载失败时触发", + "label": "" + } + ], + "tpl": "", + "path": "./avatar/avatar" + }, + "t-back-top": { + "key": "t-back-top", + "label": "回到顶部", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-backtop.png", + "properties": [ + { + "key": "fixed", + "type": ["Boolean"], + "desc": "是否绝对定位固定到屏幕右下方", + "label": "" + }, + { + "key": "icon", + "type": ["String"], + "desc": "图标", + "label": "" + }, + { + "key": "text", + "type": ["String"], + "desc": "文案", + "label": "" + }, + { + "key": "theme", + "type": ["String"], + "desc": "预设的样式类型", + "label": "" + } + ], + "externalClasses": ["t-class", "t-class-icon", "t-class-text"], + "events": [ + { + "key": "bind:to-top", + "desc": "点击触发", + "label": "" + } + ], + "tpl": "", + "path": "./back-top/back-top" + }, + "t-badge": { + "key": "t-badge", + "label": "徽标数", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-badge.png", + "properties": [ + { + "key": "color", + "type": ["String"], + "desc": "颜色", + "label": "" + }, + { + "key": "content", + "type": ["String"], + "desc": "徽标内容，示例：`content='自定义内容'`。也可以使用默认插槽定义", + "label": "" + }, + { + "key": "count", + "type": ["String", "Number"], + "desc": "徽标右上角内容。可以是数字，也可以是文字。如：'new'/3/99+。特殊：值为空表示使用插槽渲染", + "label": "" + }, + { + "key": "dot", + "type": ["Boolean"], + "desc": "是否为红点", + "label": "" + }, + { + "key": "maxCount", + "type": ["Number"], + "desc": "封顶的数字值", + "label": "" + }, + { + "key": "offset", + "type": ["Array"], + "desc": "设置状态点的位置偏移，示例：[-10, 20] 或 ['10em', '8rem']", + "label": "" + }, + { + "key": "shape", + "type": ["String"], + "desc": "形状", + "label": "" + }, + { + "key": "showZero", + "type": ["Boolean"], + "desc": "当数值为 0 时，是否展示徽标", + "label": "" + }, + { + "key": "size", + "type": ["String"], + "desc": "尺寸", + "label": "" + } + ], + "externalClasses": ["t-class", "t-class-content", "t-class-count"], + "tpl": "", + "path": "./badge/badge" + }, + "t-button": { + "key": "t-button", + "label": "按钮", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-button.png", + "properties": [ + { + "key": "block", + "type": ["Boolean"], + "desc": "是否为块级元素", + "label": "" + }, + { + "key": "content", + "type": ["String"], + "desc": "按钮内容", + "label": "" + }, + { + "key": "customDataset", + "type": ["Object"], + "desc": "自定义 dataset，可通过 event.currentTarget.dataset.custom 获取", + "label": "" + }, + { + "key": "disabled", + "type": ["Boolean"], + "desc": "是否禁用按钮", + "label": "" + }, + { + "key": "ghost", + "type": ["Boolean"], + "desc": "是否为幽灵按钮（镂空按钮）", + "label": "" + }, + { + "key": "icon", + "type": ["String"], + "desc": "图标名称", + "label": "" + }, + { + "key": "loading", + "type": ["Boolean"], + "desc": "是否显示为加载状态", + "label": "" + }, + { + "key": "shape", + "type": ["String"], + "desc": "按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形", + "label": "" + }, + { + "key": "size", + "type": ["String"], + "desc": "组件尺寸", + "label": "" + }, + { + "key": "theme", + "type": ["String"], + "desc": "组件风格，依次为品牌色、危险色", + "label": "" + }, + { + "key": "type", + "type": ["String"], + "desc": "同小程序的 formType", + "label": "" + }, + { + "key": "variant", + "type": ["String"], + "desc": "按钮形式，基础、线框、文字", + "label": "" + } + ], + "externalClasses": ["t-class", "t-class-icon"], + "events": [ + { + "key": "bind:click", + "desc": "点击时触发", + "label": "" + } + ], + "tpl": "", + "path": "./button/button" + }, + "t-cell-group": { + "key": "t-cell-group", + "label": "单元格组", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-cell.png", + "properties": [ + { + "key": "bordered", + "type": ["Boolean"], + "desc": "是否显示组边框", + "label": "" + }, + { + "key": "title", + "type": ["String"], + "desc": "单元格组标题", + "label": "" + } + ], + "externalClasses": ["t-class"], + "tpl": "", + "require": { + "t-cell": "./cell/cell" + }, + "path": "./cell-group/cell-group" + }, + "t-cell": { + "key": "t-cell", + "label": "单元格", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-cell.png", + "properties": [ + { + "key": "align", + "type": ["String"], + "desc": "内容的对齐方式，默认居中对齐", + "label": "" + }, + { + "key": "arrow", + "type": ["Boolean"], + "desc": "是否显示右侧箭头", + "label": "" + }, + { + "key": "bordered", + "type": ["Boolean"], + "desc": "是否显示下边框", + "label": "" + }, + { + "key": "description", + "type": ["String"], + "desc": "下方内容描述", + "label": "" + }, + { + "key": "hover", + "type": ["Boolean"], + "desc": "是否开启点击反馈", + "label": "" + }, + { + "key": "image", + "type": ["String"], + "desc": "主图", + "label": "" + }, + { + "key": "jumpType", + "type": ["String"], + "desc": "链接跳转类型", + "label": "" + }, + { + "key": "leftIcon", + "type": ["String"], + "desc": "左侧图标，出现在单元格标题的左侧", + "label": "" + }, + { + "key": "note", + "type": ["String"], + "desc": "和标题同行的说明文字", + "label": "" + }, + { + "key": "required", + "type": ["Boolean"], + "desc": "是否显示表单必填星号", + "label": "" + }, + { + "key": "rightIcon", + "type": ["String"], + "desc": "最右侧图标", + "label": "" + }, + { + "key": "title", + "type": ["String"], + "desc": "标题", + "label": "" + }, + { + "key": "url", + "type": ["String"], + "desc": "点击后跳转链接地址。如果值为空，则表示不需要跳转", + "label": "" + } + ], + "externalClasses": [ + "t-class", + "t-class-title", + "t-class-note", + "t-class-description", + "t-class-thumb", + "t-class-hover", + "t-class-left", + "t-class-right" + ], + "events": [ + { + "key": "bind:click", + "desc": "右侧内容", + "label": "" + } + ], + "tpl": "", + "path": "./cell/cell" + }, + "t-check-tag": { + "key": "t-check-tag", + "label": "可选标签", + "icon": "", + "properties": [ + { + "key": "checked", + "type": ["Boolean"], + "desc": "标签选中的状态，默认风格（theme=default）才有选中态", + "label": "" + }, + { + "key": "closable", + "type": ["Boolean"], + "desc": "标签是否可关闭", + "label": "" + }, + { + "key": "content", + "type": ["String", "Number"], + "desc": "组件子元素", + "label": "" + }, + { + "key": "disabled", + "type": ["Boolean"], + "desc": "标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态", + "label": "" + }, + { + "key": "icon", + "type": ["String"], + "desc": "标签中的图标，可自定义图标呈现", + "label": "" + }, + { + "key": "shape", + "type": ["String"], + "desc": "标签类型，有三种：方形、圆角方形、标记型", + "label": "" + }, + { + "key": "size", + "type": ["String"], + "desc": "标签尺寸", + "label": "" + } + ], + "events": [ + { + "key": "bind:change", + "desc": "组件子元素", + "label": "" + }, + { + "key": "bind:click", + "desc": "点击标签时触发", + "label": "" + } + ], + "tpl": "check tag", + "path": "./check-tag/check-tag" + }, + "t-checkbox-group": { + "key": "t-checkbox-group", + "label": "多选框组", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-checkbox.png", + "properties": [ + { + "key": "disabled", + "type": ["Boolean"], + "desc": "是否禁用组件", + "label": "" + }, + { + "key": "max", + "type": ["Number"], + "desc": "支持最多选中的数量", + "label": "" + }, + { + "key": "name", + "type": ["String"], + "desc": "统一设置内部复选框 HTML 属性", + "label": "" + }, + { + "key": "options", + "type": ["Array"], + "desc": "以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」", + "label": "" + }, + { + "key": "value", + "type": ["Array"], + "desc": "选中值", + "label": "" + } + ], + "events": [ + { + "key": "bind:change", + "desc": "值变化时触发。`context.current` 表示当前变化的数据项，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中，`context.option` 表示当前变化的数据项", + "label": "" + } + ], + "tpl": "", + "require": { + "t-checkbox": "./checkbox/checkbox" + }, + "path": "./checkbox-group/checkbox-group" + }, + "t-checkbox": { + "key": "t-checkbox", + "label": "多选框", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-checkbox.png", + "properties": [ + { + "key": "align", + "type": ["String"], + "desc": "多选框和内容相对位置", + "label": "" + }, + { + "key": "checkAll", + "type": ["Boolean"], + "desc": "用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用", + "label": "" + }, + { + "key": "checked", + "type": ["Boolean"], + "desc": "是否选中", + "label": "" + }, + { + "key": "color", + "type": ["String"], + "desc": "多选框颜色", + "label": "" + }, + { + "key": "content", + "type": ["String"], + "desc": "多选框内容", + "label": "" + }, + { + "key": "contentDisabled", + "type": ["Boolean"], + "desc": "是否禁用组件内容（content）触发选中", + "label": "" + }, + { + "key": "disabled", + "type": ["Boolean"], + "desc": "是否禁用组件", + "label": "" + }, + { + "key": "icon", + "type": ["Array"], + "desc": "自定义选中图标和非选中图标。示例：[选中态图标地址，非选中态图标地址]", + "label": "" + }, + { + "key": "indeterminate", + "type": ["Boolean"], + "desc": "是否为半选", + "label": "" + }, + { + "key": "label", + "type": ["String"], + "desc": "主文案", + "label": "" + }, + { + "key": "maxContentRow", + "type": ["Number"], + "desc": "内容最大行数限制", + "label": "" + }, + { + "key": "maxLabelRow", + "type": ["Number"], + "desc": "主文案最大行数限制", + "label": "" + }, + { + "key": "name", + "type": ["String"], + "desc": "HTML 元素原生属性", + "label": "" + }, + { + "key": "readonly", + "type": ["Boolean"], + "desc": "只读状态", + "label": "" + }, + { + "key": "value", + "type": ["String", "Number"], + "desc": "多选框的值", + "label": "" + } + ], + "externalClasses": ["t-class", "t-class-icon", "t-class-label", "t-class-content", "t-class-border"], + "events": [ + { + "key": "bind:change", + "desc": "值变化时触发", + "label": "" + } + ], + "tpl": "", + "path": "./checkbox/checkbox" + }, + "t-collapse-panel": { + "key": "t-collapse-panel", + "label": "折叠面板", + "icon": "", + "properties": [ + { + "key": "content", + "type": ["String"], + "desc": "折叠面板内容", + "label": "" + }, + { + "key": "disabled", + "type": ["Boolean"], + "desc": "禁止当前面板展开，优先级大于 Collapse 的同名属性", + "label": "" + }, + { + "key": "expandIcon", + "type": ["Boolean"], + "desc": "当前折叠面板展开图标，优先级大于 Collapse 的同名属性", + "label": "" + }, + { + "key": "header", + "type": ["String"], + "desc": "面板头内容", + "label": "" + }, + { + "key": "headerRightContent", + "type": ["String"], + "desc": "面板头的右侧区域，一般用于呈现面板操作", + "label": "" + }, + { + "key": "value", + "type": ["String", "Number"], + "desc": "当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识", + "label": "" + } + ], + "tpl": "此处可自定义内容", + "path": "./collapse/collapse-panel" + }, + "t-collapse": { + "key": "t-collapse", + "label": "折叠", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-collapse.png", + "properties": [ + { + "key": "defaultExpandAll", + "type": ["Boolean"], + "desc": "默认是否展开全部", + "label": "" + }, + { + "key": "disabled", + "type": ["Boolean"], + "desc": "是否禁用面板展开/收起操作", + "label": "" + }, + { + "key": "expandIcon", + "type": ["Boolean"], + "desc": "展开图标。值为 undefined 或 false 则不显示展开图标；值为 true 显示默认图标；值类型为函数，则表示完全自定义展开图标", + "label": "" + }, + { + "key": "expandMutex", + "type": ["Boolean"], + "desc": "每个面板互斥展开，每次只展开一个面板", + "label": "" + }, + { + "key": "value", + "type": ["Array"], + "desc": "展开的面板集合", + "label": "" + } + ], + "events": [ + { + "key": "bind:change", + "desc": "切换面板时触发，返回变化的值", + "label": "" + } + ], + "tpl": "此处可自定义内容", + "require": { + "t-collapse-panel": "./collapse/collapse-panel" + }, + "path": "./collapse/collapse" + }, + "t-date-time-picker": { + "key": "t-date-time-picker", + "label": "日期时间选择器", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-datetimepicker.png", + "properties": [ + { + "key": "cancelBtn", + "type": ["String"], + "desc": "取消按钮文字", + "label": "" + }, + { + "key": "confirmBtn", + "type": ["String"], + "desc": "确定按钮文字", + "label": "" + }, + { + "key": "end", + "type": ["String", "Number"], + "desc": "选择器的结束时间", + "label": "" + }, + { + "key": "footer", + "type": ["String"], + "desc": "底部内容", + "label": "" + }, + { + "key": "format", + "type": ["String"], + "desc": "用于格式化日期，[详细文档](https://day.js.org/docs/en/display/format)", + "label": "" + }, + { + "key": "header", + "type": ["Boolean"], + "desc": "头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 TNode 表示自定义头部内容", + "label": "" + }, + { + "key": "mode", + "type": ["String", "Array"], + "desc": "选择器模式，用于表示可以选择到哪一个层级。【示例一】year 或者 ['year'] 表示纯日期选择器，只能选择到年份，只显示年份。【示例二】'hour' 或 ['hour'] 表示纯时间选择器，只能选择到小时维度。【示例三】['year', 'month', 'date', 'hour', 'minute'] 表示，日期和时间 混合选择器，可以选择到具体哪一分钟，显示全部时间：年/月/日/时/分", + "label": "" + }, + { + "key": "showWeek", + "type": ["Boolean"], + "desc": "【开发中】是否在日期旁边显示周几（如周一，周二，周日等）", + "label": "" + }, + { + "key": "start", + "type": ["String", "Number"], + "desc": "选择器的开始时间", + "label": "" + }, + { + "key": "title", + "type": ["String"], + "desc": "标题", + "label": "" + }, + { + "key": "value", + "type": ["String", "Number"], + "desc": "选中值", + "label": "" + }, + { + "key": "visible", + "type": ["Boolean"], + "desc": "是否显示", + "label": "" + } + ], + "externalClasses": ["t-class", "t-class-confirm", "t-class-cancel", "t-class-title"], + "events": [ + { + "key": "bind:cancel", + "desc": "取消按钮点击时触发", + "label": "" + }, + { + "key": "bind:change", + "desc": "选中值发生变化时触发", + "label": "" + }, + { + "key": "bind:column-change", + "desc": "每一列选中数据变化时触发", + "label": "" + }, + { + "key": "bind:confirm", + "desc": "确认按钮点击时触发", + "label": "" + } + ], + "tpl": "", + "path": "./date-time-picker/date-time-picker" + }, + "t-dialog": { + "key": "t-dialog", + "label": "对话框", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-dialog.png", + "properties": [ + { + "key": "actions", + "type": ["Array"], + "desc": "操作栏", + "label": "" + }, + { + "key": "buttonLayout", + "type": ["String"], + "desc": "多按钮排列方式", + "label": "" + }, + { + "key": "cancelBtn", + "type": ["String", "Object"], + "desc": "取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件", + "label": "" + }, + { + "key": "closeOnOverlayClick", + "type": ["Boolean"], + "desc": "点击蒙层时是否触发关闭事件", + "label": "" + }, + { + "key": "confirmBtn", + "type": ["String", "Object"], + "desc": "确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件", + "label": "" + }, + { + "key": "content", + "type": ["String"], + "desc": "内容", + "label": "" + }, + { + "key": "preventScrollThrough", + "type": ["Boolean"], + "desc": "防止滚动穿透", + "label": "" + }, + { + "key": "showInAttachedElement", + "type": ["Boolean"], + "desc": "【开发中】仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative", + "label": "" + }, + { + "key": "showOverlay", + "type": ["Boolean"], + "desc": "是否显示遮罩层", + "label": "" + }, + { + "key": "title", + "type": ["String"], + "desc": "标题", + "label": "" + }, + { + "key": "visible", + "type": ["Boolean"], + "desc": "控制对话框是否显示", + "label": "" + }, + { + "key": "zIndex", + "type": ["Number"], + "desc": "对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500", + "label": "" + } + ], + "externalClasses": ["t-class", "t-class-content", "t-class-confirm", "t-class-cancel"], + "events": [ + { + "key": "bind:cancel", + "desc": "如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件", + "label": "" + }, + { + "key": "bind:close", + "desc": "关闭事件，点击 取消按钮 或 点击蒙层 时触发", + "label": "" + }, + { + "key": "bind:overlay-click", + "desc": "如果蒙层存在，点击蒙层时触发", + "label": "" + } + ], + "tpl": "", + "path": "./dialog/dialog" + }, + "t-divider": { + "key": "t-divider", + "label": "分割线", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-divider.png", + "properties": [ + { + "key": "align", + "type": ["String"], + "desc": "文本位置（仅在水平分割线有效）", + "label": "" + }, + { + "key": "content", + "type": ["String"], + "desc": "子元素", + "label": "" + }, + { + "key": "dashed", + "type": ["Boolean"], + "desc": "是否虚线（仅在水平分割线有效）", + "label": "" + }, + { + "key": "layout", + "type": ["String"], + "desc": "分隔线类型有两种：水平和垂直", + "label": "" + }, + { + "key": "lineColor", + "type": ["String"], + "desc": "分隔线颜色", + "label": "" + } + ], + "externalClasses": ["t-class", "t-class-line", "t-class-content"], + "tpl": "", + "path": "./divider/divider" + }, + "t-drawer": { + "key": "t-drawer", + "label": "模态抽屉", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-drawer.png", + "properties": [ + { + "key": "closeOnOverlayClick", + "type": ["Boolean"], + "desc": "点击蒙层时是否触发抽屉关闭事件", + "label": "" + }, + { + "key": "destroyOnClose", + "type": ["Boolean"], + "desc": "抽屉关闭时是否销毁节点", + "label": "" + }, + { + "key": "items", + "type": ["Array"], + "desc": "抽屉里的列表项", + "label": "" + }, + { + "key": "placement", + "type": ["String"], + "desc": "抽屉方向", + "label": "" + }, + { + "key": "showOverlay", + "type": ["Boolean"], + "desc": "是否显示遮罩层", + "label": "" + }, + { + "key": "visible", + "type": ["Boolean"], + "desc": "组件是否可见", + "label": "" + }, + { + "key": "zIndex", + "type": ["Number"], + "desc": "抽屉层级，样式默认为 1500", + "label": "" + } + ], + "events": [ + { + "key": "bind:close", + "desc": "关闭事件，取消按钮点击时、关闭按钮点击时、点击蒙层时均会触发", + "label": "" + }, + { + "key": "bind:item-click", + "desc": "点击抽屉里的列表项", + "label": "" + }, + { + "key": "bind:overlay-click", + "desc": "如果蒙层存在，点击蒙层时触发", + "label": "" + } + ], + "tpl": "", + "path": "./drawer/drawer" + }, + "t-dropdown-item": { + "key": "t-dropdown-item", + "label": "下拉菜单子项", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-dropdownmenu.png", + "properties": [ + { + "key": "disabled", + "type": ["Boolean"], + "desc": "是否禁用", + "label": "" + }, + { + "key": "label", + "type": ["String"], + "desc": "标题", + "label": "" + }, + { + "key": "multiple", + "type": ["Boolean"], + "desc": "是否多选", + "label": "" + }, + { + "key": "options", + "type": ["Array"], + "desc": "选项数据", + "label": "" + } + ], + "tpl": "", + "path": "./dropdown-menu/dropdown-item" + }, + "t-dropdown-menu": { + "key": "t-dropdown-menu", + "label": "下拉菜单", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-dropdownmenu.png", + "properties": [ + { + "key": "activeColor", + "type": ["String"], + "desc": "【讨论中】菜单标题和选项的选中态颜色", + "label": "" + }, + { + "key": "closeOnClickOverlay", + "type": ["Boolean"], + "desc": "是否在点击遮罩层后关闭菜单", + "label": "" + }, + { + "key": "duration", + "type": ["String", "Number"], + "desc": "动画时长", + "label": "" + }, + { + "key": "showOverlay", + "type": ["Boolean"], + "desc": "是否显示遮罩层", + "label": "" + }, + { + "key": "zIndex", + "type": ["Number"], + "desc": "菜单栏 z-index 层级", + "label": "" + } + ], + "tpl": "", + "require": { + "t-dropdown-item": "./dropdown-menu/dropdown-item" + }, + "path": "./dropdown-menu/dropdown-menu" + }, + "t-empty": { + "key": "t-empty", + "label": "空状态", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-empty.png", + "properties": [ + { + "key": "action", + "type": ["String"], + "desc": "操作按钮", + "label": "" + }, + { + "key": "description", + "type": ["String"], + "desc": "描述文字", + "label": "" + }, + { + "key": "icon", + "type": ["String"], + "desc": "图标名称", + "label": "" + }, + { + "key": "image", + "type": ["String"], + "desc": "图片地址", + "label": "" + } + ], + "externalClasses": ["t-class", "t-class-description", "t-class-image", "t-class-actions"], + "tpl": "", + "path": "./empty/empty" + }, + "t-fab": { + "key": "t-fab", + "label": "悬浮按钮", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-fab.png", + "properties": [ + { + "key": "buttonProps", + "type": ["Object"], + "desc": "透传至 Button 组件", + "label": "" + }, + { + "key": "icon", + "type": ["String"], + "desc": "图标", + "label": "" + }, + { + "key": "style", + "type": ["String"], + "desc": "悬浮按钮的样式，常用于调整位置", + "label": "" + }, + { + "key": "text", + "type": ["String"], + "desc": "文本内容", + "label": "" + } + ], + "events": [ + { + "key": "bind:click", + "desc": "悬浮按钮点击事件", + "label": "" + } + ], + "tpl": "", + "path": "./fab/fab" + }, + "t-footer": { + "key": "t-footer", + "label": "布局-底部内容", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-footer.png", + "properties": [ + { + "key": "copyright", + "type": ["String"], + "desc": "版权信息，type 为`text`生效", + "label": "" + }, + { + "key": "logo", + "type": ["Object"], + "desc": "图标配置，type 为`logo`生效。`logo.icon` 表示图标链接地址，`logo.title` 表示标题文本，`logo.url` 表示链接跳转地址", + "label": "" + }, + { + "key": "textLinkList", + "type": ["Array"], + "desc": "链接列表，type 为`text`生效。name 表示链接名称， url 表示链接 page 路径，目前只支持小程序内部跳转，openType 表示跳转方式", + "label": "" + }, + { + "key": "theme", + "type": ["String"], + "desc": "页脚展示类型", + "label": "" + } + ], + "tpl": "", + "path": "./footer/footer" + }, + "t-grid-item": { + "key": "t-grid-item", + "label": "宫格子项", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-grid.png", + "properties": [ + { + "key": "badgeProps", + "type": ["Object"], + "desc": "头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字", + "label": "" + }, + { + "key": "description", + "type": ["String"], + "desc": "文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点", + "label": "" + }, + { + "key": "image", + "type": ["String"], + "desc": "图片，可以是图片地址，也可以自定义图片节点", + "label": "" + }, + { + "key": "jumpType", + "type": ["String"], + "desc": "链接跳转类型", + "label": "" + }, + { + "key": "layout", + "type": ["String"], + "desc": "内容布局方式", + "label": "" + }, + { + "key": "text", + "type": ["String"], + "desc": "文本，可以通过 Props 传入文本，也可以自定义标题节点", + "label": "" + }, + { + "key": "url", + "type": ["String"], + "desc": "点击后的跳转链接", + "label": "" + } + ], + "externalClasses": ["t-class", "t-class-image", "t-class-text", "t-class-description"], + "tpl": "", + "path": "./grid-item/grid-item" + }, + "t-grid": { + "key": "t-grid", + "label": "栅格", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-grid.png", + "properties": [ + { + "key": "align", + "type": ["String"], + "desc": "内容对齐方式", + "label": "" + }, + { + "key": "border", + "type": ["Boolean", "Object"], + "desc": "边框，默认不显示。值为 true 则显示默认边框，值类型为 object 则表示自定义边框样式", + "label": "" + }, + { + "key": "column", + "type": ["Number"], + "desc": "每一行的列数量", + "label": "" + }, + { + "key": "gutter", + "type": ["Number"], + "desc": "间隔大小", + "label": "" + }, + { + "key": "hover", + "type": ["Boolean"], + "desc": "是否开启点击反馈", + "label": "" + } + ], + "externalClasses": ["t-class"], + "tpl": "", + "require": { + "t-grid-item": "./grid-item/grid-item" + }, + "path": "./grid/grid" + }, + "t-icon": { + "key": "t-icon", + "label": "图标", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-icon.png", + "properties": [ + { + "key": "classPrefix", + "type": ["String"], + "desc": "自定义icon前缀", + "label": "" + }, + { + "key": "color", + "type": ["String"], + "desc": "图标颜色", + "label": "" + }, + { + "key": "style", + "type": ["String"], + "desc": "自定义样式", + "label": "" + }, + { + "key": "name", + "type": ["String"], + "desc": "图标名称", + "label": "" + }, + { + "key": "size", + "type": ["String", "Number"], + "desc": "图标名称", + "label": "" + } + ], + "tpl": "", + "path": "./icon/icon" + }, + "t-image": { + "key": "t-image", + "label": "图片", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-image.png", + "properties": [ + { + "key": "error", + "type": ["String"], + "desc": "加载失败时显示的内容。值为 `default` 则表示使用默认加载失败风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `error`；值为其他则表示普通文本内容，如“加载失败”", + "label": "" + }, + { + "key": "lazy", + "type": ["Boolean"], + "desc": "是否开启图片懒加载", + "label": "" + }, + { + "key": "loading", + "type": ["String"], + "desc": "加载态内容。值为 `default` 则表示使用默认加载中风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `loading`；值为其他则表示普通文本内容，如“加载中”", + "label": "" + }, + { + "key": "shape", + "type": ["String"], + "desc": "图片圆角类型", + "label": "" + }, + { + "key": "src", + "type": ["String"], + "desc": "图片链接", + "label": "" + } + ], + "externalClasses": ["t-class", "t-class-load"], + "events": [ + { + "key": "bind:error", + "desc": "图片加载失败时触发", + "label": "" + }, + { + "key": "bind:load", + "desc": "图片加载完成时触发", + "label": "" + } + ], + "tpl": "", + "path": "./image/image" + }, + "t-indexes": { + "key": "t-indexes", + "label": "索引", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-indexes.png", + "properties": [ + { + "key": "height", + "type": ["Number"], + "desc": "列表高度，未设置默认占满设备高度", + "label": "" + }, + { + "key": "list", + "type": ["Array"], + "desc": "索引列表的列表数据。每个元素包含三个子元素，index(string)：索引值，例如1，2，3，...或A，B，C等；title(string): 索引标题，可不填将默认设为索引值；children(Array<{title: string}>): 子元素列表，title为子元素的展示文案。", + "label": "" + }, + { + "key": "sticky", + "type": ["Boolean"], + "desc": "索引是否吸顶，默认为true", + "label": "" + } + ], + "events": [ + { + "key": "bind:select", + "desc": "点击行元素时触发事件", + "label": "" + } + ], + "tpl": "", + "path": "./indexes/indexes" + }, + "t-input": { + "key": "t-input", + "label": "输入框", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-input.png", + "properties": [ + { + "key": "align", + "type": ["String"], + "desc": "文本内容位置，居左/居中/居右", + "label": "" + }, + { + "key": "borderless", + "type": ["Boolean"], + "desc": "【讨论中】是否开启无边框模式", + "label": "" + }, + { + "key": "clearable", + "type": ["Boolean"], + "desc": "是否可清空", + "label": "" + }, + { + "key": "disabled", + "type": ["Boolean"], + "desc": "是否禁用输入框", + "label": "" + }, + { + "key": "errorMessage", + "type": ["String"], + "desc": "错误提示文本，值为空不显示（废弃属性，如果需要，请更为使用 status 和 tips）", + "label": "" + }, + { + "key": "format", + "type": ["String"], + "desc": "【开发中】指定输入框展示值的格式", + "label": "" + }, + { + "key": "label", + "type": ["String"], + "desc": "左侧文本", + "label": "" + }, + { + "key": "maxcharacter", + "type": ["Number"], + "desc": "用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用", + "label": "" + }, + { + "key": "maxlength", + "type": ["Number"], + "desc": "用户最多可以输入的文本长度，一个中文等于一个计数长度。值小于等于 0 的时候，则表示不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用", + "label": "" + }, + { + "key": "placeholder", + "type": ["String"], + "desc": "占位符", + "label": "" + }, + { + "key": "prefixIcon", + "type": ["String"], + "desc": "组件前置图标，值为字符串则表示图标名称", + "label": "" + }, + { + "key": "readonly", + "type": ["Boolean"], + "desc": "只读状态", + "label": "" + }, + { + "key": "size", + "type": ["String"], + "desc": "输入框尺寸", + "label": "" + }, + { + "key": "status", + "type": ["String"], + "desc": "输入框状态", + "label": "" + }, + { + "key": "suffix", + "type": ["String"], + "desc": "后置图标前的后置内容", + "label": "" + }, + { + "key": "suffixIcon", + "type": ["String"], + "desc": "后置文本内容，值为字符串则表示图标名称", + "label": "" + }, + { + "key": "tips", + "type": ["String"], + "desc": "输入框下方提示文本，会根据不同的 `status` 呈现不同的样式", + "label": "" + }, + { + "key": "value", + "type": ["String", "Number"], + "desc": "输入框的值", + "label": "" + } + ], + "externalClasses": ["t-class", "t-class-input", "t-class-placeholder", "t-class-error-msg"], + "events": [ + { + "key": "bind:blur", + "desc": "失去焦点时触发", + "label": "" + }, + { + "key": "bind:change", + "desc": "输入框值发生变化时触发", + "label": "" + }, + { + "key": "bind:clear", + "desc": "清空按钮点击时触发", + "label": "" + }, + { + "key": "bind:enter", + "desc": "回车键按下时触发", + "label": "" + }, + { + "key": "bind:focus", + "desc": "获得焦点时触发", + "label": "" + } + ], + "tpl": "", + "path": "./input/input" + }, + "t-loading": { + "key": "t-loading", + "label": "加载中", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-loading.png", + "properties": [ + { + "key": "delay", + "type": ["Number"], + "desc": "延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒", + "label": "" + }, + { + "key": "duration", + "type": ["Number"], + "desc": "加载动画执行完成一次的时间，单位：毫秒", + "label": "" + }, + { + "key": "indicator", + "type": ["Boolean"], + "desc": "是否显示加载指示符", + "label": "" + }, + { + "key": "inheritColor", + "type": ["Boolean"], + "desc": "是否继承父元素颜色", + "label": "" + }, + { + "key": "layout", + "type": ["String"], + "desc": "对齐方式", + "label": "" + }, + { + "key": "loading", + "type": ["Boolean"], + "desc": "是否处于加载状态", + "label": "" + }, + { + "key": "pause", + "type": ["Boolean"], + "desc": "是否暂停动画", + "label": "" + }, + { + "key": "progress", + "type": ["Number"], + "desc": "加载进度", + "label": "" + }, + { + "key": "reverse", + "type": ["Boolean"], + "desc": "加载动画是否反向", + "label": "" + }, + { + "key": "size", + "type": ["String"], + "desc": "尺寸，示例：40rpx/20px", + "label": "" + }, + { + "key": "text", + "type": ["String"], + "desc": "加载提示文案", + "label": "" + }, + { + "key": "theme", + "type": ["String"], + "desc": "加载组件类型", + "label": "" + } + ], + "externalClasses": ["t-class", "t-class-text", "t-class-indicator"], + "tpl": "", + "path": "./loading/loading" + }, + "t-message": { + "key": "t-message", + "label": "全局提醒", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-message.png", + "properties": [ + { + "key": "action", + "type": ["String"], + "desc": "操作", + "label": "" + }, + { + "key": "align", + "type": ["String"], + "desc": "文本对齐方式", + "label": "" + }, + { + "key": "closeBtn", + "type": ["String", "Boolean"], + "desc": "关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。也可以完全自定义按钮", + "label": "" + }, + { + "key": "content", + "type": ["String"], + "desc": "用于自定义消息弹出内容", + "label": "" + }, + { + "key": "duration", + "type": ["Number"], + "desc": "消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器。", + "label": "" + }, + { + "key": "icon", + "type": ["String", "Boolean"], + "desc": "消息提醒前面的图标。值为 true 则根据 theme 显示对应的图标，值为 false 则不显示图标。值为 'info' 或 'bell' 则显示组件内置图标。也可以完全自定义图标节点", + "label": "" + }, + { + "key": "marquee", + "type": ["Boolean", "Object"], + "desc": "跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放", + "label": "" + }, + { + "key": "offset", + "type": ["Array"], + "desc": "相对于 placement 的偏移量，示例：[-10, 20] 或 ['10rpx', '8rpx']", + "label": "" + }, + { + "key": "theme", + "type": ["String"], + "desc": "消息组件风格", + "label": "" + }, + { + "key": "visible", + "type": ["Boolean"], + "desc": "是否显示，隐藏时默认销毁组件", + "label": "" + }, + { + "key": "zIndex", + "type": ["Number"], + "desc": "元素层级，样式默认为 5000", + "label": "" + } + ], + "externalClasses": ["t-class", "t-class-content", "t-class-icon", "t-class-action", "t-class-close-btn"], + "events": [ + { + "key": "bind:action-btn-click", + "desc": "当操作按钮存在时，用户点击操作按钮时触发", + "label": "" + }, + { + "key": "bind:close-btn-click", + "desc": "当关闭按钮存在时，用户点击关闭按钮触发", + "label": "" + }, + { + "key": "bind:duration-end", + "desc": "计时结束后触发", + "label": "" + } + ], + "tpl": "", + "path": "./message/message" + }, + "t-navbar": { + "key": "t-navbar", + "label": "导航条", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-navbar.png", + "properties": [ + { + "key": "animation", + "type": ["Boolean"], + "desc": "是否添加动画效果", + "label": "" + }, + { + "key": "background", + "type": ["String"], + "desc": "背景", + "label": "" + }, + { + "key": "delta", + "type": ["Number"], + "desc": "后退按钮后退层数，含义参考 [wx.navigateBack](https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html)，特殊的，传入 0 不会发生执行 wx.navigateBack，只会触发一个 goback 事件供自行处理。", + "label": "" + }, + { + "key": "fixed", + "type": ["Boolean"], + "desc": "是否固定在顶部", + "label": "" + }, + { + "key": "homeIcon", + "type": ["String"], + "desc": "首页图标地址。值为 '' 或者 undefiend 则表示不显示返回图标，值为 'circle' 表示显示默认图标，值为 'slot' 表示使用插槽渲染，值为其他则表示图标地址", + "label": "" + }, + { + "key": "leftIcon", + "type": ["String"], + "desc": "左侧图标地址，值为 '' 或者 undefiend 则表示不显示返回图标，值为 'arrow-left' 表示显示返回图标，值为 'slot' 表示使用插槽渲染，值为其他则表示图标地址", + "label": "" + }, + { + "key": "title", + "type": ["String"], + "desc": "页面标题", + "label": "" + }, + { + "key": "titleMaxLength", + "type": ["Number"], + "desc": "标题文字最大长度，超出的范围使用 `...` 表示", + "label": "" + }, + { + "key": "visible", + "type": ["Boolean"], + "desc": "是否显示", + "label": "" + } + ], + "externalClasses": ["t-class", "t-class-title", "t-class-left-icon", "t-class-home-icon", "t-class-capsule"], + "events": [ + { + "key": "bind:complete", + "desc": "navigateBack 执行完成后触发（失败或成功均会触发）", + "label": "" + }, + { + "key": "bind:fail", + "desc": "navigateBack 执行失败后触发", + "label": "" + }, + { + "key": "bind:go-back", + "desc": "delta 值为 0 时，点击返回，触发该事件", + "label": "" + }, + { + "key": "bind:go-home", + "desc": "点击 Home 触发", + "label": "" + }, + { + "key": "bind:success", + "desc": "navigateBack 执行成功后触发", + "label": "" + } + ], + "tpl": "", + "path": "./navbar/navbar" + }, + "t-picker-item": { + "key": "t-picker-item", + "label": "选择器子项", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-picker.png", + "properties": [ + { + "key": "format", + "type": ["String"], + "desc": "格式化标签", + "label": "" + }, + { + "key": "options", + "type": ["Array"], + "desc": "数据源", + "label": "" + } + ], + "tpl": "", + "path": "./picker-item/picker-item" + }, + "t-picker": { + "key": "t-picker", + "label": "选择器", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-picker.png", + "properties": [ + { + "key": "cancelBtn", + "type": ["String", "Object"], + "desc": "取消按钮文字", + "label": "" + }, + { + "key": "confirmBtn", + "type": ["String", "Object"], + "desc": "确定按钮文字", + "label": "" + }, + { + "key": "footer", + "type": ["String"], + "desc": "底部内容", + "label": "" + }, + { + "key": "header", + "type": ["Boolean"], + "desc": "头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 TNode 表示自定义头部内容", + "label": "" + }, + { + "key": "title", + "type": ["String"], + "desc": "标题", + "label": "" + }, + { + "key": "value", + "type": ["Array"], + "desc": "选中值", + "label": "" + }, + { + "key": "visible", + "type": ["Boolean"], + "desc": "是否显示", + "label": "" + } + ], + "events": [ + { + "key": "bind:cancel", + "desc": "点击取消按钮时触发", + "label": "" + }, + { + "key": "bind:change", + "desc": "选中变化时候触发", + "label": "" + }, + { + "key": "bind:pick", + "desc": "任何一列选中都会触发，不同的列参数不同。`context.column` 表示第几列变化，`context.index` 表示变化那一列的选中项下标", + "label": "" + } + ], + "tpl": "", + "require": { + "t-picker-item": "./picker-item/picker-item" + }, + "path": "./picker/picker" + }, + "t-popup": { + "key": "t-popup", + "label": "气泡框", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-popup.png", + "properties": [ + { + "key": "closeBtn", + "type": ["Boolean"], + "desc": "关闭按钮，值类型为 Boolean 时表示是否显示关闭按钮。也可以自定义关闭按钮", + "label": "" + }, + { + "key": "closeOnOverlayClick", + "type": ["Boolean"], + "desc": "点击遮罩层是否关闭", + "label": "" + }, + { + "key": "content", + "type": ["String"], + "desc": "浮层里面的内容", + "label": "" + }, + { + "key": "placement", + "type": ["String"], + "desc": "浮层出现位置", + "label": "" + }, + { + "key": "preventScrollThrough", + "type": ["Boolean"], + "desc": "防止滚动穿透", + "label": "" + }, + { + "key": "showOverlay", + "type": ["Boolean"], + "desc": "是否显示遮罩层", + "label": "" + }, + { + "key": "transitionProps", + "type": ["Object"], + "desc": "动画效果定义", + "label": "" + }, + { + "key": "visible", + "type": ["Boolean"], + "desc": "是否显示浮层", + "label": "" + }, + { + "key": "zIndex", + "type": ["Number"], + "desc": "组件层级，Web 侧样式默认为 5500，移动端和小程序样式默认为 1500", + "label": "" + } + ], + "externalClasses": ["t-class", "t-class-overlay", "t-class-content"], + "events": [ + { + "key": "bind:visible-change", + "desc": "当浮层隐藏或显示时触发", + "label": "" + } + ], + "tpl": "", + "path": "./popup/popup" + }, + "t-progress": { + "key": "t-progress", + "label": "进度条", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-progress.png", + "properties": [ + { + "key": "color", + "type": ["String", "Object", "Array"], + "desc": "进度条颜色。示例：'#ED7B2F' 或 'orange' 或 `['#f00', '#0ff', '#f0f']` 或 `{ '0%': '#f00', '100%': '#0ff' }` 或 `{ from: '#000', to: '#000' }` 等", + "label": "" + }, + { + "key": "label", + "type": ["String", "Boolean"], + "desc": "进度百分比，可自定义", + "label": "" + }, + { + "key": "percentage", + "type": ["Number"], + "desc": "进度条百分比", + "label": "" + }, + { + "key": "size", + "type": ["String", "Number"], + "desc": "进度条尺寸，示例：small/medium/large/240。small 值为 72； medium 值为 112；large 值为 160", + "label": "" + }, + { + "key": "status", + "type": ["String"], + "desc": "进度条状态", + "label": "" + }, + { + "key": "strokeWidth", + "type": ["String", "Number"], + "desc": "进度条线宽。宽度数值不能超过 size 的一半，否则不能输出环形进度", + "label": "" + }, + { + "key": "theme", + "type": ["String"], + "desc": "进度条风格。值为 line，标签（label）显示在进度条右侧；值为 plump，标签（label）显示在进度条里面；值为 circle，标签（label）显示在进度条正中间", + "label": "" + }, + { + "key": "trackColor", + "type": ["String"], + "desc": "进度条未完成部分颜色", + "label": "" + } + ], + "tpl": "", + "path": "./progress/progress" + }, + "t-pull-down-refresh": { + "key": "t-pull-down-refresh", + "label": "下拉刷新", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-pulldownrefresh.png", + "properties": [ + { + "key": "loadingBarHeight", + "type": ["String", "Number"], + "desc": "加载中下拉高度，如果值为数字则单位是：'px'", + "label": "" + }, + { + "key": "loadingProps", + "type": ["Object"], + "desc": "加载loading样式", + "label": "" + }, + { + "key": "loadingTexts", + "type": ["Array"], + "desc": "提示语，组件内部默认值为 ['下拉刷新', '松手刷新', '正在刷新', '刷新完成']", + "label": "" + }, + { + "key": "maxBarHeight", + "type": ["String", "Number"], + "desc": "最大下拉高度，如果值为数字则单位是：'px'", + "label": "" + }, + { + "key": "refreshTimeout", + "type": ["Number"], + "desc": "刷新超时时间", + "label": "" + }, + { + "key": "value", + "type": ["Boolean"], + "desc": "组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态", + "label": "" + } + ], + "externalClasses": ["t-class", "t-class-loading", "t-class-text", "t-class-indicator"], + "events": [ + { + "key": "bind:change", + "desc": "下拉或收起时触发，用户手势往下滑动触发下拉状态，手势松开触发收起状态", + "label": "" + }, + { + "key": "bind:refresh", + "desc": "结束下拉时触发", + "label": "" + }, + { + "key": "bind:timeout", + "desc": "刷新超时触发", + "label": "" + } + ], + "tpl": "拖拽该区域演示 中间下拉刷新", + "path": "./pull-down-refresh/pull-down-refresh" + }, + "t-radio-group": { + "key": "t-radio-group", + "label": "单选框组", + "icon": "", + "properties": [ + { + "key": "disabled", + "type": ["Boolean"], + "desc": "是否禁用全部子单选框", + "label": "" + }, + { + "key": "name", + "type": ["String"], + "desc": "HTML 元素原生属性", + "label": "" + }, + { + "key": "options", + "type": ["Array"], + "desc": "单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同", + "label": "" + }, + { + "key": "value", + "type": ["String", "Number", "Boolean"], + "desc": "选中的值", + "label": "" + } + ], + "events": [ + { + "key": "bind:change", + "desc": "选中值发生变化时触发", + "label": "" + } + ], + "tpl": "", + "require": { + "t-radio": "./radio/radio" + }, + "path": "./radio-group/radio-group" + }, + "t-radio": { + "key": "t-radio", + "label": "单选框", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-radio.png", + "properties": [ + { + "key": "align", + "type": ["String"], + "desc": "复选框和内容相对位置", + "label": "" + }, + { + "key": "allowUncheck", + "type": ["Boolean"], + "desc": "是否允许取消选中", + "label": "" + }, + { + "key": "checked", + "type": ["Boolean"], + "desc": "是否选中", + "label": "" + }, + { + "key": "color", + "type": ["String"], + "desc": "单选按钮颜色", + "label": "" + }, + { + "key": "content", + "type": ["String"], + "desc": "单选内容", + "label": "" + }, + { + "key": "contentDisabled", + "type": ["Boolean"], + "desc": "是否禁用组件内容（content）触发选中", + "label": "" + }, + { + "key": "disabled", + "type": ["Boolean"], + "desc": "是否为禁用态", + "label": "" + }, + { + "key": "icon", + "type": ["String", "Array"], + "desc": "自定义选中图标和非选中图标。示例：[选中态图标，非选中态图标]。值为 fill-circle 表示图标为填充型图标，值为 stroke-line 表示图标为描边型图标", + "label": "" + }, + { + "key": "label", + "type": ["String"], + "desc": "主文案", + "label": "" + }, + { + "key": "maxContentRow", + "type": ["Number"], + "desc": "内容最大行数限制", + "label": "" + }, + { + "key": "maxLabelRow", + "type": ["Number"], + "desc": "主文案最大行数限制", + "label": "" + }, + { + "key": "name", + "type": ["String"], + "desc": "HTML 元素原生属性", + "label": "" + }, + { + "key": "value", + "type": ["String", "Number", "Boolean"], + "desc": "单选按钮的值", + "label": "" + } + ], + "externalClasses": ["t-class", "t-class-icon", "t-class-label", "t-class-content", "t-class-border"], + "events": [ + { + "key": "bind:change", + "desc": "值变化时触发", + "label": "" + } + ], + "tpl": "", + "path": "./radio/radio" + }, + "t-rate": { + "key": "t-rate", + "label": "评分", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-rate.png", + "properties": [ + { + "key": "allowHalf", + "type": ["Boolean"], + "desc": "是否允许半选", + "label": "" + }, + { + "key": "color", + "type": ["String", "Array"], + "desc": "评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']", + "label": "" + }, + { + "key": "count", + "type": ["Number"], + "desc": "评分的数量", + "label": "" + }, + { + "key": "disabled", + "type": ["Boolean"], + "desc": "是否禁用评分", + "label": "" + }, + { + "key": "gap", + "type": ["Number"], + "desc": "评分图标的间距", + "label": "" + }, + { + "key": "showText", + "type": ["Boolean"], + "desc": "是否显示对应的辅助文字", + "label": "" + }, + { + "key": "size", + "type": ["String"], + "desc": "评分图标的大小，示例：`20`", + "label": "" + }, + { + "key": "texts", + "type": ["Array"], + "desc": "评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分']", + "label": "" + }, + { + "key": "value", + "type": ["Number"], + "desc": "选择评分的值", + "label": "" + }, + { + "key": "variant", + "type": ["String"], + "desc": "形状类型，有描边类型和填充类型两种", + "label": "" + } + ], + "events": [ + { + "key": "bind:change", + "desc": "评分数改变时触发", + "label": "" + } + ], + "tpl": "", + "path": "./rate/rate" + }, + "t-search": { + "key": "t-search", + "label": "搜索", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-search.png", + "properties": [ + { + "key": "action", + "type": ["String"], + "desc": "自定义右侧操作按钮文字", + "label": "" + }, + { + "key": "center", + "type": ["Boolean"], + "desc": "是否居中", + "label": "" + }, + { + "key": "disabled", + "type": ["Boolean"], + "desc": "是否禁用", + "label": "" + }, + { + "key": "focus", + "type": ["Boolean"], + "desc": "是否聚焦", + "label": "" + }, + { + "key": "label", + "type": ["String"], + "desc": "左侧文本", + "label": "" + }, + { + "key": "leftIcon", + "type": ["String"], + "desc": "左侧图标", + "label": "" + }, + { + "key": "placeholder", + "type": ["String"], + "desc": "占位符", + "label": "" + }, + { + "key": "rightIcon", + "type": ["String"], + "desc": "右侧图标", + "label": "" + }, + { + "key": "shape", + "type": ["String"], + "desc": "搜索框形状", + "label": "" + }, + { + "key": "value", + "type": ["String"], + "desc": "值", + "label": "" + } + ], + "externalClasses": [ + "t-class", + "t-class-input", + "t-class-input-container", + "t-class-cancel", + "t-class-left", + "t-class-right" + ], + "events": [ + { + "key": "bind:action-click", + "desc": "点击右侧操作按钮文字时触发", + "label": "" + }, + { + "key": "bind:blur", + "desc": "失去焦点时触发", + "label": "" + }, + { + "key": "bind:change", + "desc": "值发生变化时触发", + "label": "" + }, + { + "key": "bind:clear", + "desc": "点击清除时触发", + "label": "" + }, + { + "key": "bind:focus", + "desc": "聚焦时触发", + "label": "" + }, + { + "key": "bind:submit", + "desc": "提交时触发", + "label": "" + } + ], + "tpl": "", + "path": "./search/search" + }, + "t-skeleton": { + "key": "t-skeleton", + "label": "骨架屏", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-skeleton.png", + "properties": [ + { + "key": "animation", + "type": ["String"], + "desc": "动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为 'none' 则表示没有动画", + "label": "" + }, + { + "key": "delay", + "type": ["Number"], + "desc": "【开发中】延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒", + "label": "" + }, + { + "key": "loading", + "type": ["Boolean"], + "desc": "是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容", + "label": "" + }, + { + "key": "rowCol", + "type": ["Array"], + "desc": "用于设置行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度和间距", + "label": "" + }, + { + "key": "theme", + "type": ["String"], + "desc": "骨架图风格，有基础、头像组合等两大类", + "label": "" + } + ], + "externalClasses": ["t-class", "t-class-avatar", "t-class-image", "t-class-text"], + "tpl": "", + "path": "./skeleton/skeleton" + }, + "t-slider": { + "key": "t-slider", + "label": "滑块", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-slider.png", + "properties": [ + { + "key": "colors", + "type": ["Array"], + "desc": "颜色，[已选择, 未选择]", + "label": "" + }, + { + "key": "disabled", + "type": ["Boolean"], + "desc": "是否禁用组件", + "label": "" + }, + { + "key": "disabledColor", + "type": ["Array"], + "desc": "禁用状态滑动条的颜色，[已选, 未选]", + "label": "" + }, + { + "key": "label", + "type": ["String", "Boolean"], + "desc": "滑块当前值文本。
值为 true 显示默认文案；值为 false 不显示滑块当前值文本；
值为 `${value}%` 则表示组件会根据占位符渲染文案；
值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值", + "label": "" + }, + { + "key": "marks", + "type": ["Object", "Array"], + "desc": "刻度标记，示例：`[0, 10, 40, 200]` 或者 `{ 5: '5¥', 10: '10%' }`", + "label": "" + }, + { + "key": "max", + "type": ["Number"], + "desc": "滑块范围最大值", + "label": "" + }, + { + "key": "min", + "type": ["Number"], + "desc": "滑块范围最小值", + "label": "" + }, + { + "key": "range", + "type": ["Boolean"], + "desc": "双游标滑块", + "label": "" + }, + { + "key": "showExtremeValue", + "type": ["Boolean"], + "desc": "是否边界值", + "label": "" + }, + { + "key": "step", + "type": ["Number"], + "desc": "步长", + "label": "" + }, + { + "key": "value", + "type": ["Number", "Array"], + "desc": "滑块值", + "label": "" + } + ], + "externalClasses": ["t-class", "t-class-bar", "t-class-bar-active", "t-class-bar-disabled", "t-class-cursor"], + "events": [ + { + "key": "bind:change", + "desc": "滑块值变化时触发", + "label": "" + }, + { + "key": "bind:dragend", + "desc": "结束拖动时触发", + "label": "" + }, + { + "key": "bind:dragstart", + "desc": "开始拖动时触发", + "label": "" + } + ], + "tpl": "", + "path": "./slider/slider" + }, + "t-step-item": { + "key": "t-step-item", + "label": "步骤", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-steps.png", + "properties": [ + { + "key": "content", + "type": ["String"], + "desc": "步骤描述", + "label": "" + }, + { + "key": "icon", + "type": ["String"], + "desc": "图标。传入 slot 代表使用插槽，其他字符串代表使用内置图标", + "label": "" + }, + { + "key": "status", + "type": ["String"], + "desc": "当前步骤的状态", + "label": "" + }, + { + "key": "subStepItems", + "type": ["Array"], + "desc": "子步骤条，仅支持 layout = 'vertical' 时", + "label": "" + }, + { + "key": "title", + "type": ["String"], + "desc": "标题", + "label": "" + } + ], + "externalClasses": ["t-class", "t-class-content", "t-class-title", "t-class-description", "t-class-extra"], + "tpl": "", + "path": "./step-item/step-item" + }, + "t-stepper": { + "key": "t-stepper", + "label": "步进器", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-stepper.png", + "properties": [ + { + "key": "disabled", + "type": ["Boolean"], + "desc": "禁用全部操作", + "label": "" + }, + { + "key": "disableInput", + "type": ["Boolean"], + "desc": "禁用输入框", + "label": "" + }, + { + "key": "inputWidth", + "type": ["Number"], + "desc": "输入框宽度", + "label": "" + }, + { + "key": "max", + "type": ["Number"], + "desc": "最大值", + "label": "" + }, + { + "key": "min", + "type": ["Number"], + "desc": "最小值", + "label": "" + }, + { + "key": "step", + "type": ["Number"], + "desc": "步长", + "label": "" + }, + { + "key": "theme", + "type": ["String"], + "desc": "组件风格", + "label": "" + }, + { + "key": "value", + "type": ["String", "Number"], + "desc": "值", + "label": "" + } + ], + "externalClasses": ["t-class", "t-class-input", "t-class-add", "t-class-minus"], + "events": [ + { + "key": "bind:blur", + "desc": "输入框失去焦点时触发", + "label": "" + }, + { + "key": "bind:change", + "desc": "数值发生变更时触发", + "label": "" + }, + { + "key": "bind:overlimit", + "desc": "数值超出限制时触发", + "label": "" + } + ], + "tpl": "", + "path": "./stepper/stepper" + }, + "t-steps": { + "key": "t-steps", + "label": "步骤条", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-steps.png", + "properties": [ + { + "key": "current", + "type": ["String", "Number"], + "desc": "当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成", + "label": "" + }, + { + "key": "currentStatus", + "type": ["String"], + "desc": "用于控制 current 指向的步骤条的状态", + "label": "" + }, + { + "key": "layout", + "type": ["String"], + "desc": "步骤条方向，有两种：横向和纵向", + "label": "" + }, + { + "key": "readonly", + "type": ["Boolean"], + "desc": "只读状态", + "label": "" + }, + { + "key": "separator", + "type": ["String"], + "desc": "步骤条分割符", + "label": "" + }, + { + "key": "theme", + "type": ["String"], + "desc": "步骤条风格", + "label": "" + } + ], + "externalClasses": ["t-class"], + "events": [ + { + "key": "bind:change", + "desc": "当前步骤发生变化时触发", + "label": "" + } + ], + "tpl": "", + "require": { + "t-step-item": "./step-item/step-item" + }, + "path": "./steps/steps" + }, + "t-sticky": { + "key": "t-sticky", + "label": "吸顶容器", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-sticky.png", + "properties": [ + { + "key": "container", + "type": ["String"], + "desc": "函数返回容器对应的 NodesRef 节点，将对应节点指定为组件的外部容器，滚动时组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置。", + "label": "" + }, + { + "key": "disabled", + "type": ["Boolean"], + "desc": "是否禁用组件", + "label": "" + }, + { + "key": "offsetTop", + "type": ["String", "Number"], + "desc": "吸顶时与顶部的距离，单位`px`", + "label": "" + }, + { + "key": "zIndex", + "type": ["Number"], + "desc": "吸顶时的 z-index", + "label": "" + } + ], + "externalClasses": ["t-class"], + "events": [ + { + "key": "bind:scroll", + "desc": "滚动时触发，scrollTop: 距离顶部位置，isFixed: 是否吸顶", + "label": "" + } + ], + "tpl": "", + "path": "./sticky/sticky" + }, + "t-swipe-cell": { + "key": "t-swipe-cell", + "label": "滑动操作", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-swipecell.png", + "properties": [ + { + "key": "disabled", + "type": ["Boolean"], + "desc": "是否禁用滑动", + "label": "" + }, + { + "key": "expanded", + "type": ["String"], + "desc": "操作项是否呈现为打开态", + "label": "" + }, + { + "key": "left", + "type": ["Array"], + "desc": "左侧滑动操作项。所有行为同 `right`", + "label": "" + }, + { + "key": "right", + "type": ["Array"], + "desc": "右侧滑动操作项。有两种定义方式，一种是使用数组，二种是使用插槽。`right.text` 表示操作文本，`right.className` 表示操作项类名，`right.style` 表示操作项样式，`right.onClick` 表示点击操作项后执行的回调函数。示例：`[{ text: '删除', style: 'background-color: red', onClick: () => {} }]`", + "label": "" + } + ], + "events": [ + { + "key": "bind:click", + "desc": "操作项点击时触发（插槽写法组件不触发，业务侧自定义内容和事件）", + "label": "" + } + ], + "tpl": "删除", + "require": { + "t-cell": "./cell/cell" + }, + "path": "./swipe-cell/swipe-cell" + }, + "t-swiper": { + "key": "t-swiper", + "label": "轮播", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-swiper.png", + "properties": [ + { + "key": "animation", + "type": ["String"], + "desc": "轮播切换动画效果类型", + "label": "" + }, + { + "key": "autoplay", + "type": ["Boolean"], + "desc": "是否自动播放", + "label": "" + }, + { + "key": "current", + "type": ["Number"], + "desc": "当前轮播在哪一项（下标）", + "label": "" + }, + { + "key": "direction", + "type": ["String"], + "desc": "轮播滑动方向，包括横向滑动和纵向滑动两个方向", + "label": "" + }, + { + "key": "duration", + "type": ["Number"], + "desc": "滑动动画时长", + "label": "" + }, + { + "key": "height", + "type": ["Number"], + "desc": "当使用垂直方向滚动时的高度", + "label": "" + }, + { + "key": "interval", + "type": ["Number"], + "desc": "轮播间隔时间", + "label": "" + }, + { + "key": "loop", + "type": ["Boolean"], + "desc": "是否循环播放", + "label": "" + }, + { + "key": "navigation", + "type": ["Object"], + "desc": "导航器全部配置", + "label": "" + } + ], + "events": [ + { + "key": "bind:change", + "desc": "轮播切换时触发", + "label": "" + } + ], + "tpl": "", + "require": { + "t-swiper-item": "./swiper/swiper-item" + }, + "path": "./swiper/swiper" + }, + "t-switch": { + "key": "t-switch", + "label": "开关", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-switch.png", + "properties": [ + { + "key": "colors", + "type": ["Array"], + "desc": "自定义颜色，[打开时的颜色，关闭时的颜色]。组件默认颜色为 ['#0052d9', 'rgba(0, 0, 0, .26']。示例：[blue, gray]", + "label": "" + }, + { + "key": "customValue", + "type": ["Array"], + "desc": "开关内容，[打开时的值，关闭时的值]。默认为 [true, false]。示例：[1, 0]", + "label": "" + }, + { + "key": "disabled", + "type": ["Boolean"], + "desc": "是否禁用组件", + "label": "" + }, + { + "key": "label", + "type": ["String"], + "desc": "开关的标签", + "label": "" + }, + { + "key": "loading", + "type": ["Boolean"], + "desc": "是否处于加载中状态", + "label": "" + }, + { + "key": "size", + "type": ["String"], + "desc": "开关尺寸", + "label": "" + }, + { + "key": "value", + "type": ["String", "Number", "Boolean"], + "desc": "开关值", + "label": "" + } + ], + "events": [ + { + "key": "bind:change", + "desc": "数据发生变化时触发", + "label": "" + } + ], + "tpl": "", + "path": "./switch/switch" + }, + "t-tab-bar-item": { + "key": "t-tab-bar-item", + "label": "标签栏选项", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-tabbar.png", + "properties": [ + { + "key": "badgeProps", + "type": ["Object"], + "desc": "图标右上角提示信息", + "label": "" + }, + { + "key": "icon", + "type": ["String"], + "desc": "图标名称", + "label": "" + }, + { + "key": "subTabBar", + "type": ["Array"], + "desc": "二级菜单", + "label": "" + }, + { + "key": "value", + "type": ["String", "Number"], + "desc": "标识符", + "label": "" + } + ], + "tpl": "{{item.label}}", + "path": "./tab-bar-item/tab-bar-item" + }, + "t-tab-bar": { + "key": "t-tab-bar", + "label": "标签栏", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-tabbar.png", + "properties": [ + { + "key": "bordered", + "type": ["Boolean"], + "desc": "是否显示外边框", + "label": "" + }, + { + "key": "color", + "type": ["Array"], + "desc": "标签颜色设置。示例：[选中标签的颜色, 未选中的标签颜色]", + "label": "" + }, + { + "key": "fixed", + "type": ["Boolean"], + "desc": "是否固定在底部", + "label": "" + }, + { + "key": "safeAreaInsetBottom", + "type": ["Boolean"], + "desc": "是否为 iPhoneX 留出底部安全距离", + "label": "" + }, + { + "key": "split", + "type": ["Boolean"], + "desc": "是否需要分割线", + "label": "" + }, + { + "key": "value", + "type": ["String", "Number", "Array"], + "desc": "当前选中标签的索引", + "label": "" + } + ], + "externalClasses": ["t-class"], + "events": [ + { + "key": "bind:change", + "desc": "选中标签切换时触发", + "label": "" + } + ], + "tpl": "{{item.label}}", + "require": { + "t-tab-bar-item": "./tab-bar-item/tab-bar-item" + }, + "path": "./tab-bar/tab-bar" + }, + "t-tab-panel": { + "key": "t-tab-panel", + "label": "选项卡面板", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-tabs.png", + "properties": [ + { + "key": "destroyOnHide", + "type": ["Boolean"], + "desc": "选项卡内容隐藏时是否销毁", + "label": "" + }, + { + "key": "disabled", + "type": ["Boolean"], + "desc": "是否禁用当前选项卡", + "label": "" + }, + { + "key": "label", + "type": ["String"], + "desc": "选项卡名称", + "label": "" + }, + { + "key": "panel", + "type": ["String"], + "desc": "用于自定义选项卡面板内容", + "label": "" + }, + { + "key": "value", + "type": ["String", "Number"], + "desc": "选项卡的值，唯一标识", + "label": "" + } + ], + "tpl": "标签一内容", + "path": "./tab-panel/tab-panel" + }, + "t-tabs": { + "key": "t-tabs", + "label": "选项卡", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-tabs.png", + "properties": [ + { + "key": "animation", + "type": ["Object"], + "desc": "动画效果设置。其中 duration 表示动画时长", + "label": "" + }, + { + "key": "placement", + "type": ["String"], + "desc": "选项卡位置", + "label": "" + }, + { + "key": "showBottomLine", + "type": ["Boolean"], + "desc": "是否展示底部激活线条", + "label": "" + }, + { + "key": "stickyProps", + "type": ["Object"], + "desc": "是否支持吸顶", + "label": "" + }, + { + "key": "value", + "type": ["String", "Number"], + "desc": "激活的选项卡值", + "label": "" + } + ], + "externalClasses": ["t-class", "t-class-item", "t-class-active", "t-class-track"], + "events": [ + { + "key": "bind:change", + "desc": "激活的选项卡发生变化时触发", + "label": "" + } + ], + "tpl": "标签一内容标签二内容", + "require": { + "t-tab-panel": "./tab-panel/tab-panel" + }, + "path": "./tabs/tabs" + }, + "t-tag": { + "key": "t-tag", + "label": "标签", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-tag.png", + "properties": [ + { + "key": "closable", + "type": ["Boolean"], + "desc": "标签是否可关闭", + "label": "" + }, + { + "key": "disabled", + "type": ["Boolean"], + "desc": "标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态", + "label": "" + }, + { + "key": "icon", + "type": ["String"], + "desc": "标签中的图标，可自定义图标呈现", + "label": "" + }, + { + "key": "maxWidth", + "type": ["String", "Number"], + "desc": "标签最大宽度，宽度超出后会出现省略号。示例：'50px' / 80", + "label": "" + }, + { + "key": "shape", + "type": ["String"], + "desc": "标签类型，有三种：方形、圆角方形、标记型", + "label": "" + }, + { + "key": "size", + "type": ["String"], + "desc": "标签尺寸", + "label": "" + }, + { + "key": "theme", + "type": ["String"], + "desc": "组件风格，用于描述组件不同的应用场景", + "label": "" + }, + { + "key": "variant", + "type": ["String"], + "desc": "标签风格变体", + "label": "" + } + ], + "externalClasses": ["t-class"], + "events": [ + { + "key": "bind:click", + "desc": "点击时触发", + "label": "" + }, + { + "key": "bind:close", + "desc": "如果关闭按钮存在，点击关闭按钮时触发", + "label": "" + } + ], + "tpl": "重要", + "path": "./tag/tag" + }, + "t-textarea": { + "key": "t-textarea", + "label": "文本输入框", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-textarea.png", + "properties": [ + { + "key": "adjustPosition", + "type": ["Boolean"], + "desc": "键盘弹起时，是否自动上推页面", + "label": "" + }, + { + "key": "autofocus", + "type": ["Boolean"], + "desc": "自动聚焦，拉起键盘", + "label": "" + }, + { + "key": "autosize", + "type": ["Boolean"], + "desc": "是否自动增高，值为 autosize 时，style.height 不生效", + "label": "" + }, + { + "key": "confirmHold", + "type": ["Boolean"], + "desc": "点击键盘右下角按钮时是否保持键盘不收起点", + "label": "" + }, + { + "key": "confirmType", + "type": ["String"], + "desc": "设置键盘右下角按钮的文字，仅在 type='text'时生效", + "label": "" + }, + { + "key": "disabled", + "type": ["Boolean"], + "desc": "是否禁用文本框", + "label": "" + }, + { + "key": "focus", + "type": ["Boolean"], + "desc": "自动聚焦", + "label": "" + }, + { + "key": "label", + "type": ["String"], + "desc": "左侧文本", + "label": "" + }, + { + "key": "maxcharacter", + "type": ["Number"], + "desc": "用户最多可以输入的字符个数，一个中文汉字表示两个字符长度", + "label": "" + }, + { + "key": "maxlength", + "type": ["Number"], + "desc": "用户最多可以输入的字符个数", + "label": "" + }, + { + "key": "placeholder", + "type": ["String"], + "desc": "占位符", + "label": "" + }, + { + "key": "value", + "type": ["String"], + "desc": "文本框值", + "label": "" + } + ], + "externalClasses": ["t-class", "t-class-textarea", "t-class-placeholder", "t-class-name"], + "events": [ + { + "key": "bind:blur", + "desc": "失去焦点时触发", + "label": "" + }, + { + "key": "bind:change", + "desc": "输入内容变化时触发", + "label": "" + }, + { + "key": "bind:enter", + "desc": "点击完成时触发", + "label": "" + }, + { + "key": "bind:focus", + "desc": "获得焦点时触发", + "label": "" + }, + { + "key": "bind:line-change", + "desc": "行高发生变化时触发", + "label": "" + } + ], + "tpl": "", + "path": "./textarea/textarea" + }, + "t-toast": { + "key": "t-toast", + "label": "轻提示", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-toast.png", + "properties": [ + { + "key": "direction", + "type": ["String"], + "desc": "图标排列方式", + "label": "" + }, + { + "key": "duration", + "type": ["Number"], + "desc": "弹窗显示毫秒数", + "label": "" + }, + { + "key": "icon", + "type": ["String"], + "desc": "自定义图标", + "label": "" + }, + { + "key": "message", + "type": ["String"], + "desc": "弹窗显示文字", + "label": "" + }, + { + "key": "overlayProps", + "type": ["Object"], + "desc": "遮罩层属性，透传至 Overlay", + "label": "" + }, + { + "key": "placement", + "type": ["String"], + "desc": "弹窗展示位置", + "label": "" + }, + { + "key": "preventScrollThrough", + "type": ["Boolean"], + "desc": "防止滚动穿透，即不允许点击和滚动", + "label": "" + }, + { + "key": "showOverlay", + "type": ["Boolean"], + "desc": "是否显示遮罩层", + "label": "" + }, + { + "key": "theme", + "type": ["String"], + "desc": "提示类型", + "label": "" + } + ], + "externalClasses": ["t-class"], + "tpl": "", + "path": "./toast/toast" + }, + "t-transition": { + "key": "t-transition", + "label": "动画", + "icon": "", + "properties": [ + { + "key": "appear", + "type": ["Boolean"], + "desc": "首次出现是否展示动画", + "label": "" + }, + { + "key": "customClass", + "type": ["String"], + "desc": "自定义容器类名", + "label": "" + }, + { + "key": "destoryOnClose", + "type": ["Boolean"], + "desc": "隐藏时是否销毁内容", + "label": "" + }, + { + "key": "duration", + "type": ["Number"], + "desc": "指定过渡时间", + "label": "" + }, + { + "key": "name", + "type": ["String"], + "desc": "过渡类名", + "label": "" + }, + { + "key": "visible", + "type": ["Boolean"], + "desc": "是否显示", + "label": "" + } + ], + "tpl": "", + "path": "./transition/transition" + }, + "t-upload": { + "key": "t-upload", + "label": "上传", + "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-upload.png", + "properties": [ + { + "key": "addContent", + "type": ["String"], + "desc": "添加按钮内容。值为空，使用默认图标渲染；值为 slot 则表示使用插槽渲染；其他值无效。", + "label": "" + }, + { + "key": "allowUploadDuplicateFile", + "type": ["Boolean"], + "desc": "是否允许重复上传相同文件名的文件", + "label": "" + }, + { + "key": "config", + "type": ["Object"], + "desc": "图片上传配置，视频上传配置，文件上传配置等，包含图片尺寸、图片来源、视频来源、视频拍摄最长时间等。更多细节查看小程序官网。[图片上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html)。[视频上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html)", + "label": "" + }, + { + "key": "deleteBtn", + "type": ["String"], + "desc": "删除图标。值为空，使用默认图标渲染；值为 slot 则表示使用插槽渲染；其他值无效。", + "label": "" + }, + { + "key": "fileListDisplay", + "type": ["String"], + "desc": "用于完全自定义文件列表内容", + "label": "" + }, + { + "key": "files", + "type": ["Array"], + "desc": "已上传文件列表", + "label": "" + }, + { + "key": "gridConfig", + "type": ["Object"], + "desc": "upload组件每行上传图片列数以及图片的宽度和高度", + "label": "" + }, + { + "key": "gutter", + "type": ["Number"], + "desc": "预览窗格的 `gutter` 大小，单位 rpx", + "label": "" + }, + { + "key": "imageProps", + "type": ["Object"], + "desc": "透传 Image 组件全部属性", + "label": "" + }, + { + "key": "max", + "type": ["Number"], + "desc": "用于控制文件上传数量，值为 0 则不限制", + "label": "" + }, + { + "key": "mediaType", + "type": ["Array"], + "desc": "支持上传的文件类型，图片或视频", + "label": "" + }, + { + "key": "requestMethod", + "type": ["String"], + "desc": "自定义上传方法", + "label": "" + }, + { + "key": "sizeLimit", + "type": ["Number", "Object"], + "desc": "图片文件大小限制，单位 KB。可选单位有：`'B' | 'KB' | 'MB' | 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }`", + "label": "" + } + ], + "events": [ + { + "key": "bind:add", + "desc": "上传成功后触发，仅包含本次选择的照片；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述", + "label": "" + }, + { + "key": "bind:complete", + "desc": "上传成功或失败后触发", + "label": "" + }, + { + "key": "bind:fail", + "desc": "上传失败后触发", + "label": "" + }, + { + "key": "bind:remove", + "desc": "移除文件时触发", + "label": "" + }, + { + "key": "bind:select-change", + "desc": "选择文件或图片之后，上传之前，触发该事件。
`files` 表示之前已经上传完成的文件列表。
`currentSelectedFiles` 表示本次上传选中的文件列表", + "label": "" + }, + { + "key": "bind:success", + "desc": "上传成功后触发，包含所有上传的文件；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述", + "label": "" + } + ], + "tpl": "", + "path": "./upload/upload" + } + }, + "common": { + "properties": {}, + "events": {} + }, + "menu": [ + { + "key": "menu-basic", + "label": "基础", + "submenu": [ + { + "key": "subMenu-button", + "label": "Button 按钮", + "components": ["t-button"] + }, + { + "key": "subMenu-divider", + "label": "Divider 分割线", + "components": ["t-divider"] + }, + { + "key": "subMenu-fab", + "label": "Fab 悬浮按钮", + "components": ["t-fab"] + }, + { + "key": "subMenu-icon", + "label": "Icon 图标", + "components": ["t-icon"] + } + ] + }, + { + "key": "menu-nav", + "label": "导航", + "submenu": [ + { + "key": "subMenu-drawer", + "label": "Drawer 抽屉", + "components": ["t-drawer"] + }, + { + "key": "subMenu-indexes", + "label": "Indexes 索引", + "components": ["t-indexes"] + }, + { + "key": "subMenu-navbar", + "label": "Navbar 导航条", + "components": ["t-navbar"] + }, + { + "key": "subMenu-steps", + "label": "Steps 步骤条", + "components": ["t-steps"] + }, + { + "key": "subMenu-tabbar", + "label": "TabBar 标签栏", + "components": ["t-tab-bar"] + }, + { + "key": "subMenu-tabs", + "label": "Tabs 选项卡", + "components": ["t-tabs"] + } + ] + }, + { + "key": "menu-input", + "label": "输入", + "submenu": [ + { + "key": "subMenu-checkbox", + "label": "CheckBox 复选框", + "components": ["t-checkbox"] + }, + { + "key": "subMenu-dateTimePicker", + "label": "DateTimePicker 时间选择器", + "components": ["t-date-time-picker"] + }, + { + "key": "subMenu-input", + "label": "Input 输入框", + "components": ["t-input"] + }, + { + "key": "subMenu-picker", + "label": "Picker 选择器", + "components": ["t-picker"] + }, + { + "key": "subMenu-radio", + "label": "Radio 单选框", + "components": ["t-radio"] + }, + { + "key": "subMenu-rate", + "label": "Rate 评分", + "components": ["t-rate"] + }, + { + "key": "subMenu-search", + "label": "Search 搜索框", + "components": ["t-search"] + }, + { + "key": "subMenu-slider", + "label": "Slider 滑动选择器", + "components": ["t-slider"] + }, + { + "key": "subMenu-stepper", + "label": "Stepper 步进器", + "components": ["t-stepper"] + }, + { + "key": "subMenu-switch", + "label": "Switch 开关", + "components": ["t-switch"] + }, + { + "key": "subMenu-textarea", + "label": "Textarea 多行文本框", + "components": ["t-textarea"] + }, + { + "key": "subMenu-upload", + "label": "UpLoad 上传", + "components": ["t-upload"] + } + ] + }, + { + "key": "menu-data", + "label": "数据展示", + "submenu": [ + { + "key": "subMenu-avatar", + "label": "Avatar 头像", + "components": ["t-avatar"] + }, + { + "key": "subMenu-badge", + "label": "Badge 徽标", + "components": ["t-badge"] + }, + { + "key": "subMenu-cell", + "label": "Cell 单元格", + "components": ["t-cell"] + }, + { + "key": "subMenu-collapse", + "label": "Collapse 折叠面板", + "components": ["t-collapse"] + }, + { + "key": "subMenu-dropdown-menu", + "label": "DropdownMenu 下拉菜单", + "components": ["t-dropdown-menu"] + }, + { + "key": "subMenu-empty", + "label": "Empty 空状态", + "components": ["t-empty"] + }, + { + "key": "subMenu-footer", + "label": "Footer 页脚", + "components": ["t-footer"] + }, + { + "key": "subMenu-grid", + "label": "Grid 宫格", + "components": ["t-grid"] + }, + { + "key": "subMenu-image", + "label": "Image 图片", + "components": ["t-image"] + }, + { + "key": "subMenu-skeleton", + "label": "Skeleton 骨架屏", + "components": ["t-skeleton"] + }, + { + "key": "subMenu-sticky", + "label": "Sticky 吸顶容器", + "components": ["t-sticky"] + }, + { + "key": "subMenu-swiper", + "label": "Swiper 轮播图", + "components": ["t-swiper"] + }, + { + "key": "subMenu-tag", + "label": "Tag 标签", + "components": ["t-tag"] + } + ] + }, + { + "key": "menu-info", + "label": "消息提醒", + "submenu": [ + { + "key": "subMenu-actionsheet", + "label": "ActionSheet 动作面板", + "components": ["t-action-sheet"] + }, + { + "key": "subMenu-back-top", + "label": "BackTop 返回顶部", + "components": ["t-back-top"] + }, + { + "key": "subMenu-dialog", + "label": "Dialog 弹出框", + "components": ["t-dialog"] + }, + { + "key": "subMenu-loading", + "label": "Loading 加载", + "components": ["t-loading"] + }, + { + "key": "subMenu-message", + "label": "Message 消息通知", + "components": ["t-message"] + }, + { + "key": "subMenu-popup", + "label": "Popup 弹出层", + "components": ["t-popup"] + }, + { + "key": "subMenu-progress", + "label": "Progress 进度条", + "components": ["t-progress"] + }, + { + "key": "subMenu-pullDownRefresh", + "label": "PullDownRefresh 下拉刷新", + "components": ["t-pull-down-refresh"] + }, + { + "key": "subMenu-swipeCell", + "label": "SwipeCell 滑动操作", + "components": ["t-swipe-cell"] + }, + { + "key": "subMenu-toast", + "label": "Toast 轻提示", + "components": ["t-toast"] + } + ] + } + ] +} diff --git a/miniprogram_npm/tdesign-miniprogram/action-sheet/README.en-US.md b/miniprogram_npm/tdesign-miniprogram/action-sheet/README.en-US.md new file mode 100644 index 0000000..c2e750e --- /dev/null +++ b/miniprogram_npm/tdesign-miniprogram/action-sheet/README.en-US.md @@ -0,0 +1,52 @@ +:: BASE_DOC :: + +## API + +### ActionSheet Props + +name | type | default | description | required +-- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N +align | String | center | `0.29.0`。options: center/left | N +cancel-text | String | - | \- | N +count | Number | 8 | \- | N +description | String | - | `0.29.0` | N +items | Array | - | required。Typescript：`Array` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean;icon?: string;suffixIcon?: string; }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts) | Y +popup-props | Object | {} | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts) | N +show-cancel | Boolean | true | \- | N +show-overlay | Boolean | true | \- | N +theme | String | list | options: list/grid | N +using-custom-navbar | Boolean | false | \- | N +visible | Boolean | false | required | Y +default-visible | Boolean | undefined | required。uncontrolled property | Y + +### ActionSheet Events + +name | params | description +-- | -- | -- +cancel | \- | \- +close | `(trigger: TriggerSource)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts)。
`type TriggerSource = 'overlay' \| 'command' \| 'select' `
+selected | `(selected: ActionSheetItem \| string, index: number)` | \- +### ActionSheet External Classes + +className | Description +-- | -- +t-class | \- +t-class-cancel | \- +t-class-content | \- + +### CSS Variables + +The component provides the following CSS variables, which can be used to customize styles. +Name | Default Value | Description +-- | -- | -- +--td-action-sheet-border-color | @gray-color-1 | - +--td-action-sheet-border-radius | @radius-extra-large | - +--td-action-sheet-cancel-color | @font-gray-1 | - +--td-action-sheet-cancel-height | 96rpx | - +--td-action-sheet-color | @font-gray-1 | - +--td-action-sheet-description-color | @font-gray-3 | - +--td-action-sheet-list-item-disabled-color | @font-gray-4 | - +--td-action-sheet-list-item-height | 112rpx | - +--td-action-sheet-text-align | center | - \ No newline at end of file diff --git a/miniprogram_npm/tdesign-miniprogram/action-sheet/README.md b/miniprogram_npm/tdesign-miniprogram/action-sheet/README.md new file mode 100644 index 0000000..97d176a --- /dev/null +++ b/miniprogram_npm/tdesign-miniprogram/action-sheet/README.md @@ -0,0 +1,140 @@ +--- +title: ActionSheet 动作面板 +description: 由用户操作后触发的一种特定的模态弹出框 ，呈现一组与当前情境相关的两个或多个选项。 +spline: data +isComponent: true +--- + + + +
+ + + + 该组件于 0.9.0 版本上线，请留意版本。 +
+ +## 引入 + +全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。 + +```json +"usingComponents": { + "t-action-sheet": "tdesign-miniprogram/action-sheet/action-sheet", +} +``` + +## 代码演示 + + 在开发者工具中预览效果 + +
+

Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"

+
+ +### 组件类型 + +列表型动作面板 + +{{ list }} + +宫格型动作面板 + +{{ grid }} + +### 组件状态 + +宫格型动作面板 + +{{ status }} + +### 组件样式 + +列表型对齐方式 + +{{ align }} + +### 支持指令调用 + +```javascript +import ActionSheet, { ActionSheetTheme } from 'tdesign-miniprogram/action-sheet/index'; + +// 指令调用不同于组件引用不需要传入visible +const basicListOption: ActionSheetShowOption = { + theme: ActionSheetTheme.List, + selector: '#t-action-sheet', + items: [ + { + label: '默认选项', + }, + { + label: '失效选项', + disabled: true, + }, + { + label: '警告选项', + color: '#e34d59', + }, + ], +}; + +const handler = ActionSheet.show(basicListOption); +``` + +指令调用的关闭如下 + +```javascript +handler.close(); +``` + + +## API + +### ActionSheet Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N +align | String | center | `0.29.0`。水平对齐方式。可选项：center/left | N +cancel-text | String | - | 设置取消按钮的文本 | N +count | Number | 8 | 设置每页展示菜单的数量，仅当 type=grid 时有效 | N +description | String | - | `0.29.0`。动作面板描述文字 | N +items | Array | - | 必需。菜单项。TS 类型：`Array` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean;icon?: string;suffixIcon?: string; }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts) | Y +popup-props | Object | {} | popupProps透传。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts) | N +show-cancel | Boolean | true | 是否显示取消按钮 | N +show-overlay | Boolean | true | 是否显示遮罩层 | N +theme | String | list | 展示类型，列表和表格形式展示。可选项：list/grid | N +using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N +visible | Boolean | false | 必需。显示与隐藏 | Y +default-visible | Boolean | undefined | 必需。显示与隐藏。非受控属性 | Y + +### ActionSheet Events + +名称 | 参数 | 描述 +-- | -- | -- +cancel | \- | 点击取消按钮时触发 +close | `(trigger: TriggerSource)` | 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts)。
`type TriggerSource = 'overlay' \| 'command' \| 'select' `
+selected | `(selected: ActionSheetItem \| string, index: number)` | 选择菜单项时触发 +### ActionSheet External Classes + +类名 | 描述 +-- | -- +t-class | 根节点样式类 +t-class-cancel | 取消样式类 +t-class-content | 内容样式类 + +### CSS Variables + +组件提供了下列 CSS 变量，可用于自定义样式。 +名称 | 默认值 | 描述 +-- | -- | -- +--td-action-sheet-border-color | @gray-color-1 | - +--td-action-sheet-border-radius | @radius-extra-large | - +--td-action-sheet-cancel-color | @font-gray-1 | - +--td-action-sheet-cancel-height | 96rpx | - +--td-action-sheet-color | @font-gray-1 | - +--td-action-sheet-description-color | @font-gray-3 | - +--td-action-sheet-list-item-disabled-color | @font-gray-4 | - +--td-action-sheet-list-item-height | 112rpx | - +--td-action-sheet-text-align | center | - \ No newline at end of file diff --git a/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.d.ts b/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.d.ts new file mode 100644 index 0000000..853d815 --- /dev/null +++ b/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.d.ts @@ -0,0 +1,87 @@ +import { SuperComponent } from '../common/src/index'; +export default class ActionSheet extends SuperComponent { + static show: (options: import("./show").ActionSheetShowOption) => WechatMiniprogram.Component.TrivialInstance; + behaviors: string[]; + externalClasses: string[]; + properties: { + align?: { + type: StringConstructor; + value?: "center" | "left"; + }; + cancelText?: { + type: StringConstructor; + value?: string; + }; + count?: { + type: NumberConstructor; + value?: number; + }; + description?: { + type: StringConstructor; + value?: string; + }; + items: { + type: ArrayConstructor; + value?: (string | import("./type").ActionSheetItem)[]; + required?: boolean; + }; + popupProps?: { + type: ObjectConstructor; + value?: import("../popup").TdPopupProps; + }; + showCancel?: { + type: BooleanConstructor; + value?: boolean; + }; + showOverlay?: { + type: BooleanConstructor; + value?: boolean; + }; + theme?: { + type: StringConstructor; + value?: "list" | "grid"; + }; + usingCustomNavbar?: { + type: BooleanConstructor; + value?: boolean; + }; + visible: { + type: BooleanConstructor; + value?: boolean; + required?: boolean; + }; + defaultVisible: { + type: BooleanConstructor; + value?: boolean; + required?: boolean; + }; + }; + data: { + prefix: string; + classPrefix: string; + gridThemeItems: any[]; + currentSwiperIndex: number; + defaultPopUpProps: {}; + defaultPopUpzIndex: number; + }; + controlledProps: { + key: string; + event: string; + }[]; + observers: { + 'visible, items'(visible: boolean): void; + }; + methods: { + init(): void; + memoInitialData(): void; + splitGridThemeActions(): void; + show(options: any): void; + close(): void; + onPopupVisibleChange({ detail }: { + detail: any; + }): void; + onSwiperChange(e: WechatMiniprogram.TouchEvent): void; + onSelect(event: WechatMiniprogram.TouchEvent): void; + onCancel(): void; + }; +} diff --git a/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.js b/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.js new file mode 100644 index 0000000..157e6b0 --- /dev/null +++ b/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.js @@ -0,0 +1,111 @@ +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +import { chunk } from '../common/utils'; +import { SuperComponent, wxComponent } from '../common/src/index'; +import config from '../common/config'; +import { ActionSheetTheme, show } from './show'; +import props from './props'; +import useCustomNavbar from '../mixins/using-custom-navbar'; +const { prefix } = config; +const name = `${prefix}-action-sheet`; +let ActionSheet = class ActionSheet extends SuperComponent { + constructor() { + super(...arguments); + this.behaviors = [useCustomNavbar]; + this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-cancel`]; + this.properties = Object.assign({}, props); + this.data = { + prefix, + classPrefix: name, + gridThemeItems: [], + currentSwiperIndex: 0, + defaultPopUpProps: {}, + defaultPopUpzIndex: 11500, + }; + this.controlledProps = [ + { + key: 'visible', + event: 'visible-change', + }, + ]; + this.observers = { + 'visible, items'(visible) { + if (!visible) + return; + this.init(); + }, + }; + this.methods = { + init() { + this.memoInitialData(); + this.splitGridThemeActions(); + }, + memoInitialData() { + this.initialData = Object.assign(Object.assign({}, this.properties), this.data); + }, + splitGridThemeActions() { + if (this.data.theme !== ActionSheetTheme.Grid) + return; + this.setData({ + gridThemeItems: chunk(this.data.items, this.data.count), + }); + }, + show(options) { + this.setData(Object.assign(Object.assign(Object.assign({}, this.initialData), options), { visible: true })); + this.splitGridThemeActions(); + this.autoClose = true; + this._trigger('visible-change', { visible: true }); + }, + close() { + this.triggerEvent('close', { trigger: 'command' }); + this._trigger('visible-change', { visible: false }); + }, + onPopupVisibleChange({ detail }) { + if (!detail.visible) { + this.triggerEvent('close', { trigger: 'overlay' }); + this._trigger('visible-change', { visible: false }); + } + if (this.autoClose) { + this.setData({ visible: false }); + this.autoClose = false; + } + }, + onSwiperChange(e) { + const { current } = e.detail; + this.setData({ + currentSwiperIndex: current, + }); + }, + onSelect(event) { + const { currentSwiperIndex, items, gridThemeItems, count, theme } = this.data; + const { index } = event.currentTarget.dataset; + const isSwiperMode = theme === ActionSheetTheme.Grid; + const item = isSwiperMode ? gridThemeItems[currentSwiperIndex][index] : items[index]; + const realIndex = isSwiperMode ? index + currentSwiperIndex * count : index; + if (item) { + this.triggerEvent('selected', { selected: item, index: realIndex }); + if (!item.disabled) { + this.triggerEvent('close', { trigger: 'select' }); + this._trigger('visible-change', { visible: false }); + } + } + }, + onCancel() { + this.triggerEvent('cancel'); + if (this.autoClose) { + this.setData({ visible: false }); + this.autoClose = false; + } + }, + }; + } +}; +ActionSheet.show = show; +ActionSheet = __decorate([ + wxComponent() +], ActionSheet); +export default ActionSheet; diff --git a/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.json b/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.json new file mode 100644 index 0000000..70f0a29 --- /dev/null +++ b/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.json @@ -0,0 +1,10 @@ +{ + "component": true, + "styleIsolation": "apply-shared", + "usingComponents": { + "t-icon": "../icon/icon", + "t-popup": "../popup/popup", + "t-grid": "../grid/grid", + "t-grid-item": "../grid-item/grid-item" + } +} diff --git a/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.wxml b/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.wxml new file mode 100644 index 0000000..4db9925 --- /dev/null +++ b/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.wxml @@ -0,0 +1,49 @@ + + + + + + + + + {{description}} + +