This commit is contained in:
@zuopngfei 2025-06-10 18:22:58 +08:00
parent 5161f11dd3
commit e49b8b8de2
764 changed files with 1172 additions and 51859 deletions

View File

@ -1,7 +1,6 @@
import config from '~/config';
const baseUrl = 'https://ddbs.1024tool.vip/';
console.log(config, baseUrl)
const delay = config.isMock ? 500 : 0;
function request(url, method = 'GET', data = {}) {
const header = {
@ -22,7 +21,6 @@ function request(url, method = 'GET', data = {}) {
header,
success(res) {
setTimeout(() => {
console.log(res)
if(res.data.code && res.data.code == 10103){
wx.removeStorageSync('access_token');
wx.switchTab({

View File

@ -1,7 +1,7 @@
/**app.wxss**/
page {
background-color: #f3f3f3;
--td-brand-color: #0091cc; // 任何你想要的主题色
--td-brand-color: #4091ff; // 任何你想要的主题色
font-size: 28rpx;
.t-cell__title-text {

View File

@ -4,7 +4,7 @@ var __DEFINE__ = function(modId, func, req) { var m = { exports: {}, _tempexport
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__(1749049356875, function(require, module, exports) {
__DEFINE__(1749521765459, function(require, module, exports) {
;(function (root, factory, undef) {
if (typeof exports === "object") {
// CommonJS
@ -23,8 +23,8 @@ __DEFINE__(1749049356875, function(require, module, exports) {
return CryptoJS;
}));
}, function(modId) {var map = {"./core":1749049356876,"./x64-core":1749049356877,"./lib-typedarrays":1749049356878,"./enc-utf16":1749049356879,"./enc-base64":1749049356880,"./enc-base64url":1749049356881,"./md5":1749049356882,"./sha1":1749049356883,"./sha256":1749049356884,"./sha224":1749049356885,"./sha512":1749049356886,"./sha384":1749049356887,"./sha3":1749049356888,"./ripemd160":1749049356889,"./hmac":1749049356890,"./pbkdf2":1749049356891,"./evpkdf":1749049356892,"./cipher-core":1749049356893,"./mode-cfb":1749049356894,"./mode-ctr":1749049356895,"./mode-ctr-gladman":1749049356896,"./mode-ofb":1749049356897,"./mode-ecb":1749049356898,"./pad-ansix923":1749049356899,"./pad-iso10126":1749049356900,"./pad-iso97971":1749049356901,"./pad-zeropadding":1749049356902,"./pad-nopadding":1749049356903,"./format-hex":1749049356904,"./aes":1749049356905,"./tripledes":1749049356906,"./rc4":1749049356907,"./rabbit":1749049356908,"./rabbit-legacy":1749049356909,"./blowfish":1749049356910}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356876, function(require, module, exports) {
}, function(modId) {var map = {"./core":1749521765460,"./x64-core":1749521765461,"./lib-typedarrays":1749521765462,"./enc-utf16":1749521765463,"./enc-base64":1749521765464,"./enc-base64url":1749521765465,"./md5":1749521765466,"./sha1":1749521765467,"./sha256":1749521765468,"./sha224":1749521765469,"./sha512":1749521765470,"./sha384":1749521765471,"./sha3":1749521765472,"./ripemd160":1749521765473,"./hmac":1749521765474,"./pbkdf2":1749521765475,"./evpkdf":1749521765476,"./cipher-core":1749521765477,"./mode-cfb":1749521765478,"./mode-ctr":1749521765479,"./mode-ctr-gladman":1749521765480,"./mode-ofb":1749521765481,"./mode-ecb":1749521765482,"./pad-ansix923":1749521765483,"./pad-iso10126":1749521765484,"./pad-iso97971":1749521765485,"./pad-zeropadding":1749521765486,"./pad-nopadding":1749521765487,"./format-hex":1749521765488,"./aes":1749521765489,"./tripledes":1749521765490,"./rc4":1749521765491,"./rabbit":1749521765492,"./rabbit-legacy":1749521765493,"./blowfish":1749521765494}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765460, function(require, module, exports) {
;(function (root, factory) {
if (typeof exports === "object") {
// CommonJS
@ -833,7 +833,7 @@ __DEFINE__(1749049356876, function(require, module, exports) {
}));
}, function(modId) { var map = {}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356877, function(require, module, exports) {
__DEFINE__(1749521765461, function(require, module, exports) {
;(function (root, factory) {
if (typeof exports === "object") {
// CommonJS
@ -1138,8 +1138,8 @@ __DEFINE__(1749049356877, function(require, module, exports) {
return CryptoJS;
}));
}, function(modId) { var map = {"./core":1749049356876}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356878, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765462, function(require, module, exports) {
;(function (root, factory) {
if (typeof exports === "object") {
// CommonJS
@ -1216,8 +1216,8 @@ __DEFINE__(1749049356878, function(require, module, exports) {
return CryptoJS.lib.WordArray;
}));
}, function(modId) { var map = {"./core":1749049356876}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356879, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765463, function(require, module, exports) {
;(function (root, factory) {
if (typeof exports === "object") {
// CommonJS
@ -1367,8 +1367,8 @@ __DEFINE__(1749049356879, function(require, module, exports) {
return CryptoJS.enc.Utf16;
}));
}, function(modId) { var map = {"./core":1749049356876}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356880, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765464, function(require, module, exports) {
;(function (root, factory) {
if (typeof exports === "object") {
// CommonJS
@ -1505,8 +1505,8 @@ __DEFINE__(1749049356880, function(require, module, exports) {
return CryptoJS.enc.Base64;
}));
}, function(modId) { var map = {"./core":1749049356876}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356881, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765465, function(require, module, exports) {
;(function (root, factory) {
if (typeof exports === "object") {
// CommonJS
@ -1655,8 +1655,8 @@ __DEFINE__(1749049356881, function(require, module, exports) {
return CryptoJS.enc.Base64url;
}));
}, function(modId) { var map = {"./core":1749049356876}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356882, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765466, function(require, module, exports) {
;(function (root, factory) {
if (typeof exports === "object") {
// CommonJS
@ -1925,8 +1925,8 @@ __DEFINE__(1749049356882, function(require, module, exports) {
return CryptoJS.MD5;
}));
}, function(modId) { var map = {"./core":1749049356876}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356883, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765467, function(require, module, exports) {
;(function (root, factory) {
if (typeof exports === "object") {
// CommonJS
@ -2077,8 +2077,8 @@ __DEFINE__(1749049356883, function(require, module, exports) {
return CryptoJS.SHA1;
}));
}, function(modId) { var map = {"./core":1749049356876}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356884, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765468, function(require, module, exports) {
;(function (root, factory) {
if (typeof exports === "object") {
// CommonJS
@ -2278,8 +2278,8 @@ __DEFINE__(1749049356884, function(require, module, exports) {
return CryptoJS.SHA256;
}));
}, function(modId) { var map = {"./core":1749049356876}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356885, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765469, function(require, module, exports) {
;(function (root, factory, undef) {
if (typeof exports === "object") {
// CommonJS
@ -2360,8 +2360,8 @@ __DEFINE__(1749049356885, function(require, module, exports) {
return CryptoJS.SHA224;
}));
}, function(modId) { var map = {"./core":1749049356876,"./sha256":1749049356884}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356886, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460,"./sha256":1749521765468}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765470, function(require, module, exports) {
;(function (root, factory, undef) {
if (typeof exports === "object") {
// CommonJS
@ -2688,8 +2688,8 @@ __DEFINE__(1749049356886, function(require, module, exports) {
return CryptoJS.SHA512;
}));
}, function(modId) { var map = {"./core":1749049356876,"./x64-core":1749049356877}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356887, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460,"./x64-core":1749521765461}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765471, function(require, module, exports) {
;(function (root, factory, undef) {
if (typeof exports === "object") {
// CommonJS
@ -2773,8 +2773,8 @@ __DEFINE__(1749049356887, function(require, module, exports) {
return CryptoJS.SHA384;
}));
}, function(modId) { var map = {"./core":1749049356876,"./x64-core":1749049356877,"./sha512":1749049356886}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356888, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460,"./x64-core":1749521765461,"./sha512":1749521765470}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765472, function(require, module, exports) {
;(function (root, factory, undef) {
if (typeof exports === "object") {
// CommonJS
@ -3101,8 +3101,8 @@ __DEFINE__(1749049356888, function(require, module, exports) {
return CryptoJS.SHA3;
}));
}, function(modId) { var map = {"./core":1749049356876,"./x64-core":1749049356877}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356889, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460,"./x64-core":1749521765461}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765473, function(require, module, exports) {
;(function (root, factory) {
if (typeof exports === "object") {
// CommonJS
@ -3370,8 +3370,8 @@ __DEFINE__(1749049356889, function(require, module, exports) {
return CryptoJS.RIPEMD160;
}));
}, function(modId) { var map = {"./core":1749049356876}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356890, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765474, function(require, module, exports) {
;(function (root, factory) {
if (typeof exports === "object") {
// CommonJS
@ -3515,8 +3515,8 @@ __DEFINE__(1749049356890, function(require, module, exports) {
}));
}, function(modId) { var map = {"./core":1749049356876}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356891, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765475, function(require, module, exports) {
;(function (root, factory, undef) {
if (typeof exports === "object") {
// CommonJS
@ -3662,8 +3662,8 @@ __DEFINE__(1749049356891, function(require, module, exports) {
return CryptoJS.PBKDF2;
}));
}, function(modId) { var map = {"./core":1749049356876,"./sha256":1749049356884,"./hmac":1749049356890}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356892, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460,"./sha256":1749521765468,"./hmac":1749521765474}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765476, function(require, module, exports) {
;(function (root, factory, undef) {
if (typeof exports === "object") {
// CommonJS
@ -3798,8 +3798,8 @@ __DEFINE__(1749049356892, function(require, module, exports) {
return CryptoJS.EvpKDF;
}));
}, function(modId) { var map = {"./core":1749049356876,"./sha1":1749049356883,"./hmac":1749049356890}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356893, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460,"./sha1":1749521765467,"./hmac":1749521765474}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765477, function(require, module, exports) {
;(function (root, factory, undef) {
if (typeof exports === "object") {
// CommonJS
@ -4695,8 +4695,8 @@ __DEFINE__(1749049356893, function(require, module, exports) {
}));
}, function(modId) { var map = {"./core":1749049356876,"./evpkdf":1749049356892}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356894, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460,"./evpkdf":1749521765476}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765478, function(require, module, exports) {
;(function (root, factory, undef) {
if (typeof exports === "object") {
// CommonJS
@ -4777,8 +4777,8 @@ __DEFINE__(1749049356894, function(require, module, exports) {
return CryptoJS.mode.CFB;
}));
}, function(modId) { var map = {"./core":1749049356876,"./cipher-core":1749049356893}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356895, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460,"./cipher-core":1749521765477}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765479, function(require, module, exports) {
;(function (root, factory, undef) {
if (typeof exports === "object") {
// CommonJS
@ -4837,8 +4837,8 @@ __DEFINE__(1749049356895, function(require, module, exports) {
return CryptoJS.mode.CTR;
}));
}, function(modId) { var map = {"./core":1749049356876,"./cipher-core":1749049356893}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356896, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460,"./cipher-core":1749521765477}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765480, function(require, module, exports) {
;(function (root, factory, undef) {
if (typeof exports === "object") {
// CommonJS
@ -4955,8 +4955,8 @@ __DEFINE__(1749049356896, function(require, module, exports) {
return CryptoJS.mode.CTRGladman;
}));
}, function(modId) { var map = {"./core":1749049356876,"./cipher-core":1749049356893}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356897, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460,"./cipher-core":1749521765477}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765481, function(require, module, exports) {
;(function (root, factory, undef) {
if (typeof exports === "object") {
// CommonJS
@ -5011,8 +5011,8 @@ __DEFINE__(1749049356897, function(require, module, exports) {
return CryptoJS.mode.OFB;
}));
}, function(modId) { var map = {"./core":1749049356876,"./cipher-core":1749049356893}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356898, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460,"./cipher-core":1749521765477}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765482, function(require, module, exports) {
;(function (root, factory, undef) {
if (typeof exports === "object") {
// CommonJS
@ -5053,8 +5053,8 @@ __DEFINE__(1749049356898, function(require, module, exports) {
return CryptoJS.mode.ECB;
}));
}, function(modId) { var map = {"./core":1749049356876,"./cipher-core":1749049356893}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356899, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460,"./cipher-core":1749521765477}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765483, function(require, module, exports) {
;(function (root, factory, undef) {
if (typeof exports === "object") {
// CommonJS
@ -5104,8 +5104,8 @@ __DEFINE__(1749049356899, function(require, module, exports) {
return CryptoJS.pad.Ansix923;
}));
}, function(modId) { var map = {"./core":1749049356876,"./cipher-core":1749049356893}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356900, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460,"./cipher-core":1749521765477}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765484, function(require, module, exports) {
;(function (root, factory, undef) {
if (typeof exports === "object") {
// CommonJS
@ -5150,8 +5150,8 @@ __DEFINE__(1749049356900, function(require, module, exports) {
return CryptoJS.pad.Iso10126;
}));
}, function(modId) { var map = {"./core":1749049356876,"./cipher-core":1749049356893}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356901, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460,"./cipher-core":1749521765477}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765485, function(require, module, exports) {
;(function (root, factory, undef) {
if (typeof exports === "object") {
// CommonJS
@ -5192,8 +5192,8 @@ __DEFINE__(1749049356901, function(require, module, exports) {
return CryptoJS.pad.Iso97971;
}));
}, function(modId) { var map = {"./core":1749049356876,"./cipher-core":1749049356893}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356902, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460,"./cipher-core":1749521765477}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765486, function(require, module, exports) {
;(function (root, factory, undef) {
if (typeof exports === "object") {
// CommonJS
@ -5241,8 +5241,8 @@ __DEFINE__(1749049356902, function(require, module, exports) {
return CryptoJS.pad.ZeroPadding;
}));
}, function(modId) { var map = {"./core":1749049356876,"./cipher-core":1749049356893}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356903, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460,"./cipher-core":1749521765477}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765487, function(require, module, exports) {
;(function (root, factory, undef) {
if (typeof exports === "object") {
// CommonJS
@ -5273,8 +5273,8 @@ __DEFINE__(1749049356903, function(require, module, exports) {
return CryptoJS.pad.NoPadding;
}));
}, function(modId) { var map = {"./core":1749049356876,"./cipher-core":1749049356893}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356904, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460,"./cipher-core":1749521765477}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765488, function(require, module, exports) {
;(function (root, factory, undef) {
if (typeof exports === "object") {
// CommonJS
@ -5341,8 +5341,8 @@ __DEFINE__(1749049356904, function(require, module, exports) {
return CryptoJS.format.Hex;
}));
}, function(modId) { var map = {"./core":1749049356876,"./cipher-core":1749049356893}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356905, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460,"./cipher-core":1749521765477}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765489, function(require, module, exports) {
;(function (root, factory, undef) {
if (typeof exports === "object") {
// CommonJS
@ -5577,8 +5577,8 @@ __DEFINE__(1749049356905, function(require, module, exports) {
return CryptoJS.AES;
}));
}, function(modId) { var map = {"./core":1749049356876,"./enc-base64":1749049356880,"./md5":1749049356882,"./evpkdf":1749049356892,"./cipher-core":1749049356893}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356906, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460,"./enc-base64":1749521765464,"./md5":1749521765466,"./evpkdf":1749521765476,"./cipher-core":1749521765477}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765490, function(require, module, exports) {
;(function (root, factory, undef) {
if (typeof exports === "object") {
// CommonJS
@ -6358,8 +6358,8 @@ __DEFINE__(1749049356906, function(require, module, exports) {
return CryptoJS.TripleDES;
}));
}, function(modId) { var map = {"./core":1749049356876,"./enc-base64":1749049356880,"./md5":1749049356882,"./evpkdf":1749049356892,"./cipher-core":1749049356893}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356907, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460,"./enc-base64":1749521765464,"./md5":1749521765466,"./evpkdf":1749521765476,"./cipher-core":1749521765477}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765491, function(require, module, exports) {
;(function (root, factory, undef) {
if (typeof exports === "object") {
// CommonJS
@ -6499,8 +6499,8 @@ __DEFINE__(1749049356907, function(require, module, exports) {
return CryptoJS.RC4;
}));
}, function(modId) { var map = {"./core":1749049356876,"./enc-base64":1749049356880,"./md5":1749049356882,"./evpkdf":1749049356892,"./cipher-core":1749049356893}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356908, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460,"./enc-base64":1749521765464,"./md5":1749521765466,"./evpkdf":1749521765476,"./cipher-core":1749521765477}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765492, function(require, module, exports) {
;(function (root, factory, undef) {
if (typeof exports === "object") {
// CommonJS
@ -6693,8 +6693,8 @@ __DEFINE__(1749049356908, function(require, module, exports) {
return CryptoJS.Rabbit;
}));
}, function(modId) { var map = {"./core":1749049356876,"./enc-base64":1749049356880,"./md5":1749049356882,"./evpkdf":1749049356892,"./cipher-core":1749049356893}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356909, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460,"./enc-base64":1749521765464,"./md5":1749521765466,"./evpkdf":1749521765476,"./cipher-core":1749521765477}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765493, function(require, module, exports) {
;(function (root, factory, undef) {
if (typeof exports === "object") {
// CommonJS
@ -6885,8 +6885,8 @@ __DEFINE__(1749049356909, function(require, module, exports) {
return CryptoJS.RabbitLegacy;
}));
}, function(modId) { var map = {"./core":1749049356876,"./enc-base64":1749049356880,"./md5":1749049356882,"./evpkdf":1749049356892,"./cipher-core":1749049356893}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749049356910, function(require, module, exports) {
}, function(modId) { var map = {"./core":1749521765460,"./enc-base64":1749521765464,"./md5":1749521765466,"./evpkdf":1749521765476,"./cipher-core":1749521765477}; return __REQUIRE__(map[modId], modId); })
__DEFINE__(1749521765494, function(require, module, exports) {
;(function (root, factory, undef) {
if (typeof exports === "object") {
// CommonJS
@ -7358,8 +7358,8 @@ __DEFINE__(1749049356910, function(require, module, exports) {
return CryptoJS.Blowfish;
}));
}, function(modId) { var map = {"./core":1749049356876,"./enc-base64":1749049356880,"./md5":1749049356882,"./evpkdf":1749049356892,"./cipher-core":1749049356893}; return __REQUIRE__(map[modId], modId); })
return __REQUIRE__(1749049356875);
}, function(modId) { var map = {"./core":1749521765460,"./enc-base64":1749521765464,"./md5":1749521765466,"./evpkdf":1749521765476,"./cipher-core":1749521765477}; return __REQUIRE__(map[modId], modId); })
return __REQUIRE__(1749521765459);
})()
//miniprogram-npm-outsideDeps=["crypto"]
//miniprogram-npm-outsideDeps=[]
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,52 +0,0 @@
:: 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<string \| ActionSheetItem>` `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)。<br/>`type TriggerSource = 'overlay' \| 'command' \| 'select' `<br/>
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 | -

View File

@ -1,140 +0,0 @@
---
title: ActionSheet 动作面板
description: 由用户操作后触发的一种特定的模态弹出框 ,呈现一组与当前情境相关的两个或多个选项。
spline: data
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-89%25-blue" /></span>
<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
<svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
<path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
</svg>
该组件于 0.9.0 版本上线,请留意版本。
</div>
## 引入
全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-action-sheet": "tdesign-miniprogram/action-sheet/action-sheet",
}
```
## 代码演示
<a href="https://developers.weixin.qq.com/s/EM7cxim37USn" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后依次执行npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
</blockquote>
### 组件类型
列表型动作面板
{{ 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<string \| ActionSheetItem>` `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)。<br/>`type TriggerSource = 'overlay' \| 'command' \| 'select' `<br/>
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 | -

View File

@ -6,7 +6,7 @@ export default class ActionSheet extends SuperComponent {
properties: {
align?: {
type: StringConstructor;
value?: "center" | "left";
value?: "left" | "center";
};
cancelText?: {
type: StringConstructor;
@ -45,15 +45,13 @@ export default class ActionSheet extends SuperComponent {
type: BooleanConstructor;
value?: boolean;
};
visible: {
visible?: {
type: BooleanConstructor;
value?: boolean;
required?: boolean;
};
defaultVisible: {
defaultVisible?: {
type: BooleanConstructor;
value?: boolean;
required?: boolean;
};
};
data: {

View File

@ -1,111 +1 @@
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;
import{__decorate}from"tslib";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:prefix}=config,name=`${prefix}-action-sheet`;let ActionSheet=class 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:prefix,classPrefix:name,gridThemeItems:[],currentSwiperIndex:0,defaultPopUpProps:{},defaultPopUpzIndex:11500},this.controlledProps=[{key:"visible",event:"visible-change"}],this.observers={"visible, items"(e){e&&this.init()}},this.methods={init(){this.memoInitialData(),this.splitGridThemeActions()},memoInitialData(){this.initialData=Object.assign(Object.assign({},this.properties),this.data)},splitGridThemeActions(){this.data.theme===ActionSheetTheme.Grid&&this.setData({gridThemeItems:chunk(this.data.items,this.data.count)})},show(e){this.setData(Object.assign(Object.assign(Object.assign({},this.initialData),e),{visible:!0})),this.splitGridThemeActions(),this.autoClose=!0,this._trigger("visible-change",{visible:!0})},close(){this.triggerEvent("close",{trigger:"command"}),this._trigger("visible-change",{visible:!1})},onPopupVisibleChange({detail:e}){e.visible||(this.triggerEvent("close",{trigger:"overlay"}),this._trigger("visible-change",{visible:!1})),this.autoClose&&(this.setData({visible:!1}),this.autoClose=!1)},onSwiperChange(e){const{current:t}=e.detail;this.setData({currentSwiperIndex:t})},onSelect(e){const{currentSwiperIndex:t,items:i,gridThemeItems:s,count:o,theme:r}=this.data,{index:n}=e.currentTarget.dataset,a=r===ActionSheetTheme.Grid,h=a?s[t][n]:i[n],c=a?n+t*o:n;h&&(this.triggerEvent("selected",{selected:h,index:c}),h.disabled||(this.triggerEvent("close",{trigger:"select"}),this._trigger("visible-change",{visible:!1})))},onCancel(){this.triggerEvent("cancel"),this.autoClose&&(this.setData({visible:!1}),this.autoClose=!1)}}}};ActionSheet.show=show,ActionSheet=__decorate([wxComponent()],ActionSheet);export default ActionSheet;

View File

@ -1,10 +1 @@
{
"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"
}
}
{"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"}}

View File

@ -1,49 +1 @@
<wxs src="./action-sheet.wxs" module="_this" />
<wxs src="../common/utils.wxs" module="_" />
<import src="./template/list.wxml" />
<import src="./template/grid.wxml" />
<view id="{{classPrefix}}" style="{{_._style([style, customStyle])}}" class="{{classPrefix}} class {{prefix}}-class">
<t-popup
visible="{{visible}}"
placement="bottom"
usingCustomNavbar="{{usingCustomNavbar}}"
bind:visible-change="onPopupVisibleChange"
show-overlay="{{showOverlay}}"
z-index="{{ popupProps.zIndex || defaultPopUpzIndex }}"
overlay-props="{{ popupProps.overlayProps || defaultPopUpProps }}"
>
<view
class="{{_.cls(classPrefix + '__content', [['grid', gridThemeItems.length]])}} {{prefix}}-class-content"
tabindex="0"
>
<view wx:if="{{description}}" tabindex="0" class="{{_.cls(classPrefix + '__description', [align])}}"
>{{description}}</view
>
<block wx:if="{{gridThemeItems.length}}">
<template is="grid" data="{{classPrefix, prefix, gridThemeItems, count, currentSwiperIndex}}" />
</block>
<view wx:elif="{{items && items.length}}" class="{{classPrefix}}__list">
<block wx:for="{{ items }}" wx:key="index">
<template
is="list"
data="{{index, classPrefix, listThemeItemClass: _.cls(classPrefix + '__list-item', [align, [disabled, item.disabled]]), item}}"
/>
</block>
</view>
</view>
<slot />
<view wx:if="{{showCancel}}" class="{{classPrefix}}__footer">
<view class="{{classPrefix}}__gap-{{theme}}" />
<view
class="{{classPrefix}}__cancel {{prefix}}-class-cancel"
hover-class="{{classPrefix}}__cancel--hover"
hover-stay-time="70"
bind:tap="onCancel"
aria-role="button"
>
{{ cancelText || '取消' }}
</view>
</view>
</t-popup>
</view>
<wxs src="./action-sheet.wxs" module="_this"/><wxs src="../common/utils.wxs" module="_"/><import src="./template/list.wxml"/><import src="./template/grid.wxml"/><view id="{{classPrefix}}" style="{{_._style([style, customStyle])}}" class="{{classPrefix}} class {{prefix}}-class"><t-popup visible="{{visible}}" placement="bottom" usingCustomNavbar="{{usingCustomNavbar}}" bind:visible-change="onPopupVisibleChange" show-overlay="{{showOverlay}}" z-index="{{ popupProps.zIndex || defaultPopUpzIndex }}" overlay-props="{{ popupProps.overlayProps || defaultPopUpProps }}"><view class="{{_.cls(classPrefix + '__content', [['grid', gridThemeItems.length]])}} {{prefix}}-class-content" tabindex="0"><view wx:if="{{description}}" tabindex="0" class="{{_.cls(classPrefix + '__description', [align])}}">{{description}}</view><block wx:if="{{gridThemeItems.length}}"><template is="grid" data="{{classPrefix, prefix, gridThemeItems, count, currentSwiperIndex}}"/></block><view wx:elif="{{items && items.length}}" class="{{classPrefix}}__list"><block wx:for="{{ items }}" wx:key="index"><template is="list" data="{{index, classPrefix, listThemeItemClass: _.cls(classPrefix + '__list-item', [align, [disabled, item.disabled]]), item}}"/></block></view></view><slot/><view wx:if="{{showCancel}}" class="{{classPrefix}}__footer"><view class="{{classPrefix}}__gap-{{theme}}"/><view class="{{classPrefix}}__cancel {{prefix}}-class-cancel" hover-class="{{classPrefix}}__cancel--hover" hover-stay-time="70" bind:tap="onCancel" aria-role="button">{{ cancelText || '取消' }}</view></view></t-popup></view>

View File

@ -1,169 +1 @@
.t-float-left {
float: left;
}
.t-float-right {
float: right;
}
@keyframes tdesign-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.hotspot-expanded.relative {
position: relative;
}
.hotspot-expanded::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transform: scale(1.5);
}
.t-action-sheet__content {
color: var(--td-action-sheet-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
border-top-left-radius: var(--td-action-sheet-border-radius, var(--td-radius-extra-large, 24rpx));
border-top-right-radius: var(--td-action-sheet-border-radius, var(--td-radius-extra-large, 24rpx));
background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
overflow: hidden;
}
.t-action-sheet__content--grid {
padding-top: 16rpx;
}
.t-action-sheet__content:focus {
outline: 0;
}
.t-action-sheet__grid {
padding-bottom: 16rpx;
}
.t-action-sheet__grid--swiper {
padding-bottom: 48rpx;
}
.t-action-sheet__description {
color: var(--td-action-sheet-description-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
line-height: 44rpx;
font-size: 28rpx;
text-align: var(--td-action-sheet-text-align, center);
padding: 24rpx 32rpx;
position: relative;
}
.t-action-sheet__description:focus {
outline: 0;
}
.t-action-sheet__description::after {
content: '';
display: block;
position: absolute;
top: unset;
bottom: 0;
left: unset;
right: unset;
background-color: var(--td-action-sheet-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7)));
}
.t-action-sheet__description::after {
height: 1px;
left: 0;
right: 0;
transform: scaleY(0.5);
}
.t-action-sheet__description--left {
text-align: left;
}
.t-action-sheet__description--left::after {
left: 32rpx;
}
.t-action-sheet__list-item {
display: flex;
align-items: center;
justify-content: center;
position: relative;
height: var(--td-action-sheet-list-item-height, 112rpx);
padding: 0 32rpx;
}
.t-action-sheet__list-item::after {
content: '';
display: block;
position: absolute;
top: unset;
bottom: 0;
left: unset;
right: unset;
background-color: var(--td-action-sheet-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7)));
}
.t-action-sheet__list-item::after {
height: 1px;
left: 0;
right: 0;
transform: scaleY(0.5);
}
.t-action-sheet__list-item:focus {
outline: 0;
}
.t-action-sheet__list-item--left {
justify-content: start;
}
.t-action-sheet__list-item--left::after {
left: 32rpx;
}
.t-action-sheet__list-item--disabled {
color: var(--td-action-sheet-list-item-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
}
.t-action-sheet__list-item-text {
font-size: var(--td-font-size-m, 32rpx);
word-wrap: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.t-action-sheet__list-item-icon {
margin-right: 16rpx;
}
.t-action-sheet__list-item-icon--suffix {
margin-left: auto;
}
.t-action-sheet__swiper-wrap {
margin-top: 8rpx;
position: relative;
}
.t-action-sheet__footer {
background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
}
.t-action-sheet__gap-list {
height: 16rpx;
background-color: var(--td-action-sheet-gap-color, var(--td-bg-color-page, var(--td-gray-color-1, #f3f3f3)));
}
.t-action-sheet__gap-grid {
height: 1rpx;
background-color: var(--td-action-sheet-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7)));
}
.t-action-sheet__cancel {
display: flex;
align-items: center;
justify-content: center;
color: var(--td-action-sheet-cancel-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
height: var(--td-action-sheet-cancel-height, 96rpx);
}
.t-action-sheet__dots {
position: absolute;
left: 50%;
bottom: 32rpx;
transform: translateX(-50%);
display: flex;
flex-direction: row;
}
.t-action-sheet__dots-item {
width: 16rpx;
height: 16rpx;
background-color: #dcdcdc;
border-radius: 50%;
margin: 0 16rpx;
transition: all 0.4s ease-in;
}
.t-action-sheet__dots-item.t-is-active {
background-color: #0052d9;
}
@import '../common/style/index.wxss';.t-action-sheet__content{color:var(--td-action-sheet-color,var(--td-text-color-primary,var(--td-font-gray-1,rgba(0,0,0,.9))));border-top-left-radius:var(--td-action-sheet-border-radius,var(--td-radius-extra-large,24rpx));border-top-right-radius:var(--td-action-sheet-border-radius,var(--td-radius-extra-large,24rpx));background-color:var(--td-bg-color-container,var(--td-font-white-1,#fff));overflow:hidden}.t-action-sheet__content--grid{padding-top:16rpx}.t-action-sheet__content:focus{outline:0}.t-action-sheet__grid{padding-bottom:16rpx}.t-action-sheet__grid--swiper{padding-bottom:48rpx}.t-action-sheet__description{color:var(--td-action-sheet-description-color,var(--td-text-color-placeholder,var(--td-font-gray-3,rgba(0,0,0,.4))));line-height:44rpx;font-size:28rpx;text-align:var(--td-action-sheet-text-align,center);padding:24rpx 32rpx;position:relative}.t-action-sheet__description:focus{outline:0}.t-action-sheet__description::after{content:'';display:block;position:absolute;top:unset;bottom:0;left:unset;right:unset;background-color:var(--td-action-sheet-border-color,var(--td-border-level-1-color,var(--td-gray-color-3,#e7e7e7)))}.t-action-sheet__description::after{height:1px;left:0;right:0;transform:scaleY(.5)}.t-action-sheet__description--left{text-align:left}.t-action-sheet__description--left::after{left:32rpx}.t-action-sheet__list-item{display:flex;align-items:center;justify-content:center;position:relative;height:var(--td-action-sheet-list-item-height,112rpx);padding:0 32rpx}.t-action-sheet__list-item::after{content:'';display:block;position:absolute;top:unset;bottom:0;left:unset;right:unset;background-color:var(--td-action-sheet-border-color,var(--td-border-level-1-color,var(--td-gray-color-3,#e7e7e7)))}.t-action-sheet__list-item::after{height:1px;left:0;right:0;transform:scaleY(.5)}.t-action-sheet__list-item:focus{outline:0}.t-action-sheet__list-item--left{justify-content:start}.t-action-sheet__list-item--left::after{left:32rpx}.t-action-sheet__list-item--disabled{color:var(--td-action-sheet-list-item-disabled-color,var(--td-text-color-disabled,var(--td-font-gray-4,rgba(0,0,0,.26))))}.t-action-sheet__list-item-text{font-size:var(--td-font-size-m,32rpx);word-wrap:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.t-action-sheet__list-item-icon{margin-right:16rpx}.t-action-sheet__list-item-icon--suffix{margin-left:auto}.t-action-sheet__swiper-wrap{margin-top:8rpx;position:relative}.t-action-sheet__footer{background-color:var(--td-bg-color-container,var(--td-font-white-1,#fff))}.t-action-sheet__gap-list{height:16rpx;background-color:var(--td-action-sheet-gap-color,var(--td-bg-color-page,var(--td-gray-color-1,#f3f3f3)))}.t-action-sheet__gap-grid{height:1rpx;background-color:var(--td-action-sheet-border-color,var(--td-border-level-1-color,var(--td-gray-color-3,#e7e7e7)))}.t-action-sheet__cancel{display:flex;align-items:center;justify-content:center;color:var(--td-action-sheet-cancel-color,var(--td-text-color-primary,var(--td-font-gray-1,rgba(0,0,0,.9))));height:var(--td-action-sheet-cancel-height,96rpx)}.t-action-sheet__dots{position:absolute;left:50%;bottom:32rpx;transform:translateX(-50%);display:flex;flex-direction:row}.t-action-sheet__dots-item{width:16rpx;height:16rpx;background-color:#dcdcdc;border-radius:50%;margin:0 16rpx;transition:all .4s ease-in}.t-action-sheet__dots-item.t-is-active{background-color:#0052d9}

View File

@ -1,10 +1 @@
import { show, close, ActionSheetTheme } from './show';
export { ActionSheetTheme };
export default {
show(options) {
return show(options);
},
close(options) {
return close(options);
},
};
import{show,close,ActionSheetTheme}from"./show";export{ActionSheetTheme};export default{show:e=>show(e),close:e=>close(e)};

View File

@ -1,53 +1 @@
const props = {
align: {
type: String,
value: 'center',
},
cancelText: {
type: String,
value: '',
},
count: {
type: Number,
value: 8,
},
description: {
type: String,
value: '',
},
items: {
type: Array,
required: true,
},
popupProps: {
type: Object,
value: {},
},
showCancel: {
type: Boolean,
value: true,
},
showOverlay: {
type: Boolean,
value: true,
},
theme: {
type: String,
value: 'list',
},
usingCustomNavbar: {
type: Boolean,
value: false,
},
visible: {
type: Boolean,
value: null,
required: true,
},
defaultVisible: {
type: Boolean,
value: false,
required: true,
},
};
export default props;
const props={align:{type:String,value:"center"},cancelText:{type:String,value:""},count:{type:Number,value:8},description:{type:String,value:""},items:{type:Array,required:!0},popupProps:{type:Object,value:{}},showCancel:{type:Boolean,value:!0},showOverlay:{type:Boolean,value:!0},theme:{type:String,value:"list"},usingCustomNavbar:{type:Boolean,value:!1},visible:{type:Boolean,value:null},defaultVisible:{type:Boolean,value:!1}};export default props;

View File

@ -1,11 +1,7 @@
/// <reference types="miniprogram-api-typings" />
/// <reference types="miniprogram-api-typings" />
export interface ActionSheetItem {
label: string;
color?: string;
disabled?: boolean;
icon?: string;
}
import { ActionSheetItem } from './type';
export { ActionSheetItem };
declare type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
export declare enum ActionSheetTheme {
List = "list",
@ -28,4 +24,3 @@ export interface ActionSheetShowOption extends Omit<ActionSheetProps, 'visible'>
}
export declare const show: (options: ActionSheetShowOption) => WechatMiniprogram.Component.TrivialInstance;
export declare const close: (options: ActionSheetShowOption) => void;
export {};

View File

@ -1,33 +1 @@
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { getInstance } from '../common/utils';
export var ActionSheetTheme;
(function (ActionSheetTheme) {
ActionSheetTheme["List"] = "list";
ActionSheetTheme["Grid"] = "grid";
})(ActionSheetTheme || (ActionSheetTheme = {}));
export const show = function (options) {
const _a = Object.assign({}, options), { context, selector = '#t-action-sheet' } = _a, otherOptions = __rest(_a, ["context", "selector"]);
const instance = getInstance(context, selector);
if (instance) {
instance.show(Object.assign({}, otherOptions));
return instance;
}
console.error('未找到组件,请确认 selector && context 是否正确');
};
export const close = function (options) {
const { context, selector = '#t-action-sheet' } = Object.assign({}, options);
const instance = getInstance(context, selector);
if (instance) {
instance.close();
}
};
import{__rest}from"tslib";import{getInstance}from"../common/utils";export var ActionSheetTheme;!function(t){t.List="list",t.Grid="grid"}(ActionSheetTheme||(ActionSheetTheme={}));export const show=function(t){const e=Object.assign({},t),{context:o,selector:n="#t-action-sheet"}=e,c=__rest(e,["context","selector"]),s=getInstance(o,n);if(s)return s.show(Object.assign({},c)),s;console.error("未找到组件,请确认 selector && context 是否正确")};export const close=function(t){const{context:e,selector:o="#t-action-sheet"}=Object.assign({},t),n=getInstance(e,o);n&&n.close()};

View File

@ -1,51 +1 @@
<template name="grid">
<block wx:if="{{gridThemeItems.length === 1}}">
<t-grid align="center" t-class="{{classPrefix}}__grid" column="{{count / 2}}" class="{{classPrefix}}__single-wrap">
<t-grid-item
t-class="{{classPrefix}}__grid-item"
class="{{classPrefix}}__square"
wx:for="{{gridThemeItems[0]}}"
wx:key="index"
bind:tap="onSelect"
data-index="{{index}}"
icon="{{ { name: item.icon, color: item.color } }}"
text="{{item.label || ''}}"
image="{{item.image || ''}}"
style="--td-grid-item-text-color: {{item.color}}"
>
</t-grid-item>
</t-grid>
</block>
<block wx:elif="{{gridThemeItems.length > 1}}">
<view class="{{classPrefix}}__swiper-wrap">
<swiper style="height: 456rpx" autoplay="{{false}}" current="{{currentSwiperIndex}}" bindchange="onSwiperChange">
<swiper-item wx:for="{{gridThemeItems}}" wx:key="index">
<t-grid align="center" t-class="{{classPrefix}}__grid {{classPrefix}}__grid--swiper" column="{{count / 2}}">
<t-grid-item
t-class="{{classPrefix}}__grid-item"
class="{{classPrefix}}__square"
wx:for="{{item}}"
wx:key="index"
data-index="{{index}}"
bind:tap="onSelect"
icon="{{ { name: item.icon, color: item.color } }}"
text="{{item.label || ''}}"
image="{{item.image || ''}}"
style="--td-grid-item-text-color: {{item.color}}"
>
</t-grid-item>
</t-grid>
</swiper-item>
</swiper>
<view class="{{classPrefix}}__nav">
<view class="{{classPrefix}}__dots">
<view
wx:for="{{gridThemeItems.length}}"
wx:key="index"
class="{{classPrefix}}__dots-item {{index === currentSwiperIndex ? prefix + '-is-active' : ''}}"
/>
</view>
</view>
</view>
</block>
</template>
<template name="grid"><block wx:if="{{gridThemeItems.length === 1}}"><t-grid align="center" t-class="{{classPrefix}}__grid" column="{{count / 2}}" class="{{classPrefix}}__single-wrap"><t-grid-item t-class="{{classPrefix}}__grid-item" class="{{classPrefix}}__square" wx:for="{{gridThemeItems[0]}}" wx:key="index" bind:tap="onSelect" data-index="{{index}}" icon="{{ { name: item.icon, color: item.color } }}" text="{{item.label || ''}}" image="{{item.image || ''}}" style="--td-grid-item-text-color: {{item.color}}"></t-grid-item></t-grid></block><block wx:elif="{{gridThemeItems.length > 1}}"><view class="{{classPrefix}}__swiper-wrap"><swiper style="height: 456rpx" autoplay="{{false}}" current="{{currentSwiperIndex}}" bindchange="onSwiperChange"><swiper-item wx:for="{{gridThemeItems}}" wx:key="index"><t-grid align="center" t-class="{{classPrefix}}__grid {{classPrefix}}__grid--swiper" column="{{count / 2}}"><t-grid-item t-class="{{classPrefix}}__grid-item" class="{{classPrefix}}__square" wx:for="{{item}}" wx:key="index" data-index="{{index}}" bind:tap="onSelect" icon="{{ { name: item.icon, color: item.color } }}" text="{{item.label || ''}}" image="{{item.image || ''}}" style="--td-grid-item-text-color: {{item.color}}"></t-grid-item></t-grid></swiper-item></swiper><view class="{{classPrefix}}__nav"><view class="{{classPrefix}}__dots"><view wx:for="{{gridThemeItems.length}}" wx:key="index" class="{{classPrefix}}__dots-item {{index === currentSwiperIndex ? prefix + '-is-active' : ''}}"/></view></view></view></block></template>

View File

@ -1,20 +1 @@
<template name="list">
<view
data-index="{{index}}"
style="{{ item.color ? 'color: ' + item.color : '' }}"
class="{{listThemeItemClass}}"
bind:tap="onSelect"
aria-role="{{ariaRole || 'button'}}"
aria-label="{{item.label || item}}"
tabindex="0"
>
<t-icon wx:if="{{item.icon}}" name="{{item.icon}}" class="{{classPrefix}}__list-item-icon" size="48rpx"></t-icon>
<view class="{{classPrefix}}__list-item-text">{{item.label || item}}</view>
<t-icon
wx:if="{{item.suffixIcon}}"
name="{{item.suffixIcon}}"
class="{{classPrefix}}__list-item-icon {{classPrefix}}__list-item-icon--suffix"
size="48rpx"
></t-icon>
</view>
</template>
<template name="list"><view data-index="{{index}}" style="{{ item.color ? 'color: ' + item.color : '' }}" class="{{listThemeItemClass}}" bind:tap="onSelect" aria-role="{{ariaRole || 'button'}}" aria-label="{{item.label || item}}" tabindex="0"><t-icon wx:if="{{item.icon}}" name="{{item.icon}}" class="{{classPrefix}}__list-item-icon" size="48rpx"></t-icon><view class="{{classPrefix}}__list-item-text">{{item.label || item}}</view><t-icon wx:if="{{item.suffixIcon}}" name="{{item.suffixIcon}}" class="{{classPrefix}}__list-item-icon {{classPrefix}}__list-item-icon--suffix" size="48rpx"></t-icon></view></template>

View File

@ -41,15 +41,13 @@ export interface TdActionSheetProps {
type: BooleanConstructor;
value?: boolean;
};
visible: {
visible?: {
type: BooleanConstructor;
value?: boolean;
required?: boolean;
};
defaultVisible: {
defaultVisible?: {
type: BooleanConstructor;
value?: boolean;
required?: boolean;
};
}
export interface ActionSheetItem {

View File

@ -1 +1 @@
export {};
export{};

View File

@ -1,81 +1 @@
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 { SuperComponent, wxComponent } from '../common/src/index';
import config from '../common/config';
import avatarGroupProps from './props';
const { prefix } = config;
const name = `${prefix}-avatar-group`;
let AvatarGroup = class AvatarGroup extends SuperComponent {
constructor() {
super(...arguments);
this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-image`];
this.properties = avatarGroupProps;
this.data = {
prefix,
classPrefix: name,
hasChild: true,
length: 0,
className: '',
};
this.options = {
multipleSlots: true,
};
this.relations = {
'../avatar/avatar': {
type: 'descendant',
},
};
this.lifetimes = {
attached() {
this.setClass();
},
ready() {
this.setData({
length: this.$children.length,
});
this.handleMax();
},
};
this.observers = {
'cascading, size'() {
this.setClass();
},
};
this.methods = {
setClass() {
const { cascading, size } = this.properties;
const direction = cascading.split('-')[0];
const classList = [
name,
`${prefix}-class`,
`${name}-offset-${direction}`,
`${name}-offset-${direction}-${size.indexOf('px') > -1 ? 'medium' : size || 'medium'}`,
];
this.setData({
className: classList.join(' '),
});
},
handleMax() {
const { max } = this.data;
const len = this.$children.length;
if (!max || max > len)
return;
const restAvatars = this.$children.splice(max, len - max);
restAvatars.forEach((child) => {
child.hide();
});
},
onCollapsedItemClick(e) {
this.triggerEvent('collapsed-item-click', e.detail);
},
};
}
};
AvatarGroup = __decorate([
wxComponent()
], AvatarGroup);
export default AvatarGroup;
import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import avatarGroupProps from"./props";const{prefix:prefix}=config,name=`${prefix}-avatar-group`;let AvatarGroup=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-content`,`${prefix}-class-image`],this.properties=avatarGroupProps,this.data={prefix:prefix,classPrefix:name,hasChild:!0,length:0,className:""},this.options={multipleSlots:!0},this.relations={"../avatar/avatar":{type:"descendant"}},this.lifetimes={attached(){this.setClass()},ready(){this.setData({length:this.$children.length}),this.handleMax()}},this.observers={"cascading, size"(){this.setClass()}},this.methods={setClass(){const{cascading:e,size:t}=this.properties,s=e.split("-")[0],a=[name,`${prefix}-class`,`${name}-offset-${s}`,`${name}-offset-${s}-${t.indexOf("px")>-1?"medium":t||"medium"}`];this.setData({className:a.join(" ")})},handleMax(){const{max:e}=this.data,t=this.$children.length;if(!e||e>t)return;this.$children.splice(e,t-e).forEach((e=>{e.hide()}))},onCollapsedItemClick(e){this.triggerEvent("collapsed-item-click",e.detail)}}}};AvatarGroup=__decorate([wxComponent()],AvatarGroup);export default AvatarGroup;

View File

@ -1,7 +1 @@
{
"component": true,
"styleIsolation": "shared",
"usingComponents": {
"t-avatar": "../avatar/avatar"
}
}
{"component":true,"styleIsolation":"shared","usingComponents":{"t-avatar":"../avatar/avatar"}}

View File

@ -1,21 +1 @@
<wxs src="../common/utils.wxs" module="_" />
<view style="{{_._style([style, customStyle])}}" class="{{className}} class">
<slot />
<!-- 自定义折叠元素 -->
<view class="{{classPrefix}}__collapse--slot">
<slot name="collapse-avatar" />
</view>
<!-- 默认折叠元素 -->
<view class="{{classPrefix}}__collapse--default" wx:if="{{max && (max < length)}}" bindtap="onCollapsedItemClick">
<t-avatar
t-class-image="{{prefix}}-avatar--border {{prefix}}-avatar--border-{{size}} {{prefix}}-class-image"
t-class-content="{{prefix}}-class-content"
size="{{size}}"
shape="{{shape}}"
icon="{{ collapseAvatar ? '' : 'user-add'}}"
aria-role="none"
>{{collapseAvatar}}</t-avatar
>
</view>
</view>
<wxs src="../common/utils.wxs" module="_"/><view style="{{_._style([style, customStyle])}}" class="{{className}} class"><slot/><view class="{{classPrefix}}__collapse--slot"><slot name="collapse-avatar"/></view><view class="{{classPrefix}}__collapse--default" wx:if="{{max && (max < length)}}" bindtap="onCollapsedItemClick"><t-avatar t-class-image="{{prefix}}-avatar--border {{prefix}}-avatar--border-{{size}} {{prefix}}-class-image" t-class-content="{{prefix}}-class-content" size="{{size}}" shape="{{shape}}" icon="{{ collapseAvatar ? '' : 'user-add'}}" aria-role="none">{{collapseAvatar}}</t-avatar></view></view>

File diff suppressed because one or more lines are too long

View File

@ -1,20 +1 @@
const props = {
cascading: {
type: String,
value: 'left-up',
},
collapseAvatar: {
type: String,
},
max: {
type: Number,
},
shape: {
type: String,
},
size: {
type: String,
value: '',
},
};
export default props;
const props={cascading:{type:String,value:"left-up"},collapseAvatar:{type:String},max:{type:Number},shape:{type:String},size:{type:String,value:""}};export default props;

View File

@ -1 +1 @@
export {};
export{};

View File

@ -1,91 +0,0 @@
:: BASE_DOC ::
## API
### Avatar 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
alt | String | - | show it when url is not valid | N
badge-props | Object | - | Typescript`BadgeProps`[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N
bordered | Boolean | false | \- | N
hide-on-load-failed | Boolean | false | hide image when loading image failed | N
icon | String / Object | - | \- | N
image | String | - | images url | N
image-props | Object | - | Typescript`ImageProps`[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N
shape | String | - | shape。options: circle/round。Typescript`ShapeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
size | String | - | size | N
### Avatar Events
name | params | description
-- | -- | --
error | - | trigger on image load failed
### Avatar External Classes
className | Description
-- | --
t-class | \-
t-class-alt | \-
t-class-content | \-
t-class-icon | \-
t-class-image | \-
### AvatarGroup 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
cascading | String | 'left-up' | multiple images cascading。options: left-up/right-up。Typescript`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar-group/type.ts) | N
collapse-avatar | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
max | Number | - | \- | N
shape | String | - | shape。options: circle/round。Typescript`ShapeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
size | String | - | size | N
### AvatarGroup Events
name | params | description
-- | -- | --
collapsed-item-click | - | \-
### AvatarGroup External Classes
className | Description
-- | --
t-class | \-
t-class-content | \-
t-class-image | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-avatar-group-init-z-index | @avatar-group-init-zIndex) - @i | -
--td-avatar-group-line-spacing | 4rpx | -
--td-avatar-group-margin-left-large | -16rpx | -
--td-avatar-group-margin-left-medium | -16rpx | -
--td-avatar-group-margin-left-small | -16rpx | -
--td-avatar-bg-color | @brand-color-light-active | -
--td-avatar-border-color | #fff | -
--td-avatar-border-width-large | 6rpx | -
--td-avatar-border-width-medium | 4rpx | -
--td-avatar-border-width-small | 2rpx | -
--td-avatar-circle-border-radius | @radius-circle | -
--td-avatar-content-color | @brand-color | -
--td-avatar-icon-large-font-size | 64rpx | -
--td-avatar-icon-medium-font-size | 48rpx | -
--td-avatar-icon-small-font-size | 40rpx | -
--td-avatar-large-width | 128rpx | -
--td-avatar-margin-left | 0 | -
--td-avatar-medium-width | 96rpx | -
--td-avatar-round-border-radius | @radius-default | -
--td-avatar-small-width | 80rpx | -
--td-avatar-text-large-font-size | @font-size-xl | -
--td-avatar-text-medium-font-size | @font-size-m | -
--td-avatar-text-small-font-size | @font-size-base | -

View File

@ -1,151 +0,0 @@
---
title: Avatar 头像
description: 用于展示用户头像信息,除了纯展示也可点击进入个人详情等操作。
spline: data
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-99%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-85%25-blue" /></span>
## 引入
全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-avatar": "tdesign-miniprogram/avatar/avatar",
"t-avatar-group": "tdesign-miniprogram/avatar-group/avatar-group"
}
```
## 代码演示
<a href="https://developers.weixin.qq.com/s/a86Sfimw7VSO" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后依次执行npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
</blockquote>
### 头像类型
图片头像
{{ image-avatar }}
字符头像
{{ character-avatar }}
图标头像
{{ icon-avatar }}
徽标头像
{{ badge-avatar }}
### 组合头像
纯展示
{{ exhibition }}
带操作
{{ action }}
### 头像尺寸
头像 large/medium/small 尺寸
{{ size }}
## API
### Avatar Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N
alt | String | - | 头像替换文本,仅当图片加载失败时有效 | N
badge-props | Object | - | 头像右上角提示信息,继承 Badge 组件的全部特性。如小红点或者数字。TS 类型:`BadgeProps`[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N
bordered | Boolean | false | 已废弃。是否显示外边框 | N
hide-on-load-failed | Boolean | false | 加载失败时隐藏图片 | N
icon | String / Object | - | 图标。值为字符串表示图标名称,值为 `Object` 类型,表示透传至 `icon`。 | N
image | String | - | 图片地址 | N
image-props | Object | - | 透传至 Image 组件。TS 类型:`ImageProps`[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N
shape | String | - | 形状。优先级高于 AvatarGroup.shape 。Avatar 单独存在时,默认值为 circle。如果父组件 AvatarGroup 存在,默认值便由 AvatarGroup.shape 决定。可选项circle/round。TS 类型:`ShapeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
size | String | - | 尺寸示例值small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时,默认值为 medium。如果父组件 AvatarGroup 存在,默认值便由 AvatarGroup.size 决定 | N
### Avatar Events
名称 | 参数 | 描述
-- | -- | --
error | - | 图片加载失败时触发
### Avatar External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-alt | 替代文本样式类
t-class-content | 内容样式类
t-class-icon | 图标样式类
t-class-image | 图片样式类
### AvatarGroup Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N
cascading | String | 'left-up' | 图片之间的层叠关系可选值左侧图片在上和右侧图片在上。可选项left-up/right-up。TS 类型:`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar-group/type.ts) | N
collapse-avatar | String / Slot | - | 头像数量超出时,会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例:`+5``...`, `更多`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
max | Number | - | 能够同时显示的最多头像数量 | N
shape | String | - | 形状。优先级低于 Avatar.shape。可选项circle/round。TS 类型:`ShapeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
size | String | - | 尺寸示例值small/medium/large/24px/38px 等。优先级低于 Avatar.size | N
### AvatarGroup Events
名称 | 参数 | 描述
-- | -- | --
collapsed-item-click | - | 点击头像折叠元素触发
### AvatarGroup External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-content | 内容样式类
t-class-image | 图片样式类
### CSS Variables
组件提供了下列 CSS 变量,可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-avatar-group-init-z-index | @avatar-group-init-zIndex) - @i | -
--td-avatar-group-line-spacing | 4rpx | -
--td-avatar-group-margin-left-large | -16rpx | -
--td-avatar-group-margin-left-medium | -16rpx | -
--td-avatar-group-margin-left-small | -16rpx | -
--td-avatar-bg-color | @brand-color-light-active | -
--td-avatar-border-color | #fff | -
--td-avatar-border-width-large | 6rpx | -
--td-avatar-border-width-medium | 4rpx | -
--td-avatar-border-width-small | 2rpx | -
--td-avatar-circle-border-radius | @radius-circle | -
--td-avatar-content-color | @brand-color | -
--td-avatar-icon-large-font-size | 64rpx | -
--td-avatar-icon-medium-font-size | 48rpx | -
--td-avatar-icon-small-font-size | 40rpx | -
--td-avatar-large-width | 128rpx | -
--td-avatar-margin-left | 0 | -
--td-avatar-medium-width | 96rpx | -
--td-avatar-round-border-radius | @radius-default | -
--td-avatar-small-width | 80rpx | -
--td-avatar-text-large-font-size | @font-size-xl | -
--td-avatar-text-medium-font-size | @font-size-m | -
--td-avatar-text-small-font-size | @font-size-base | -

View File

@ -1,73 +1 @@
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 { SuperComponent, wxComponent } from '../common/src/index';
import config from '../common/config';
import avatarProps from './props';
import { setIcon, systemInfo } from '../common/utils';
const { prefix } = config;
const name = `${prefix}-avatar`;
let Avatar = class Avatar extends SuperComponent {
constructor() {
super(...arguments);
this.options = {
multipleSlots: true,
};
this.externalClasses = [
`${prefix}-class`,
`${prefix}-class-image`,
`${prefix}-class-icon`,
`${prefix}-class-alt`,
`${prefix}-class-content`,
];
this.properties = avatarProps;
this.data = {
prefix,
classPrefix: name,
isShow: true,
zIndex: 0,
systemInfo,
};
this.relations = {
'../avatar-group/avatar-group': {
type: 'ancestor',
linked(parent) {
this.parent = parent;
this.setData({
shape: this.data.shape || parent.data.shape || 'circle',
size: this.data.size || parent.data.size,
bordered: true,
});
},
},
};
this.observers = {
icon(icon) {
const obj = setIcon('icon', icon, '');
this.setData(Object.assign({}, obj));
},
};
this.methods = {
hide() {
this.setData({
isShow: false,
});
},
onLoadError(e) {
if (this.properties.hideOnLoadFailed) {
this.setData({
isShow: false,
});
}
this.triggerEvent('error', e.detail);
},
};
}
};
Avatar = __decorate([
wxComponent()
], Avatar);
export default Avatar;
import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import avatarProps from"./props";import{setIcon,systemInfo}from"../common/utils";const{prefix:prefix}=config,name=`${prefix}-avatar`;let Avatar=class extends SuperComponent{constructor(){super(...arguments),this.options={multipleSlots:!0},this.externalClasses=[`${prefix}-class`,`${prefix}-class-image`,`${prefix}-class-icon`,`${prefix}-class-alt`,`${prefix}-class-content`],this.properties=avatarProps,this.data={prefix:prefix,classPrefix:name,isShow:!0,zIndex:0,systemInfo:systemInfo},this.relations={"../avatar-group/avatar-group":{type:"ancestor",linked(t){this.parent=t,this.setData({shape:this.data.shape||t.data.shape||"circle",size:this.data.size||t.data.size,bordered:!0})}}},this.observers={icon(t){const s=setIcon("icon",t,"");this.setData(Object.assign({},s))}},this.methods={hide(){this.setData({isShow:!1})},onLoadError(t){this.properties.hideOnLoadFailed&&this.setData({isShow:!1}),this.triggerEvent("error",t.detail)}}}};Avatar=__decorate([wxComponent()],Avatar);export default Avatar;

View File

@ -1,9 +1 @@
{
"component": true,
"styleIsolation": "shared",
"usingComponents": {
"t-icon": "../icon/icon",
"t-badge": "../badge/badge",
"t-image": "../image/image"
}
}
{"component":true,"styleIsolation":"shared","usingComponents":{"t-icon":"../icon/icon","t-badge":"../badge/badge","t-image":"../image/image"}}

View File

@ -1,54 +1 @@
<import src="../common/template/icon.wxml" />
<wxs src="../common/utils.wxs" module="_" />
<wxs src="./avatar.wxs" module="_this" />
<view
class="{{classPrefix}}__wrapper class {{prefix}}-class"
style="{{_._style([_this.getStyles(isShow), style, customStyle])}}"
>
<t-badge
color="{{badgeProps.color || ''}}"
content="{{badgeProps.content || ''}}"
count="{{badgeProps.count || 0}}"
dot="{{badgeProps.dot || false}}"
max-count="{{badgeProps.maxCount || 99}}"
offset="{{badgeProps.offset || []}}"
shape="{{badgeProps.shape || 'circle'}}"
show-zero="{{badgeProps.showZero || false}}"
size="{{badgeProps.size || 'medium'}}"
t-class="{{badgeProps.tClass}}"
t-class-content="{{badgeProps.tClassContent}}"
t-class-count="{{badgeProps.tClassCount}}"
>
<view
class="{{_this.getClass(classPrefix, size || 'medium', shape, bordered)}} {{prefix}}-class-image"
style="{{_this.getSize(size, systemInfo)}}"
aria-label="{{ ariaLabel || alt ||'头像'}}"
aria-role="{{ ariaRole || 'img'}}"
aria-hidden="{{ ariaHidden }}"
>
<t-image
wx:if="{{image}}"
t-class="{{prefix}}-image {{classPrefix}}__image"
t-class-load="{{prefix}}-class-alt"
style="{{imageProps && imageProps.style || ''}}"
src="{{image}}"
mode="{{imageProps && imageProps.mode || 'aspectFill'}}"
lazy="{{imageProps && imageProps.lazy || false}}"
loading="{{imageProps && imageProps.loading || 'default'}}"
shape="{{imageProps && imageProps.shape || 'round'}}"
webp="{{imageProps && imageProps.webp || false}}"
error="{{alt || 'default'}}"
bind:error="onLoadError"
/>
<template
wx:elif="{{iconName || _.isNoEmptyObj(iconData)}}"
is="icon"
data="{{tClass: classPrefix + '__icon ' + prefix + '-class-icon', name: iconName, ...iconData}}"
/>
<view wx:else class="{{classPrefix}}__text {{prefix}}-class-content">
<slot />
</view>
</view>
</t-badge>
</view>
<import src="../common/template/icon.wxml"/><wxs src="../common/utils.wxs" module="_"/><wxs src="./avatar.wxs" module="_this"/><view class="{{classPrefix}}__wrapper class {{prefix}}-class" style="{{_._style([_this.getStyles(isShow), style, customStyle])}}"><t-badge color="{{badgeProps.color || ''}}" content="{{badgeProps.content || ''}}" count="{{badgeProps.count || 0}}" dot="{{badgeProps.dot || false}}" max-count="{{badgeProps.maxCount || 99}}" offset="{{badgeProps.offset || []}}" shape="{{badgeProps.shape || 'circle'}}" show-zero="{{badgeProps.showZero || false}}" size="{{badgeProps.size || 'medium'}}" t-class="{{badgeProps.tClass}}" t-class-content="{{badgeProps.tClassContent}}" t-class-count="{{badgeProps.tClassCount}}"><view class="{{_this.getClass(classPrefix, size || 'medium', shape, bordered)}} {{prefix}}-class-image" style="{{_this.getSize(size, systemInfo)}}" aria-label="{{ ariaLabel || alt ||'头像'}}" aria-role="{{ ariaRole || 'img'}}" aria-hidden="{{ ariaHidden }}"><t-image wx:if="{{image}}" t-class="{{prefix}}-image {{classPrefix}}__image" t-class-load="{{prefix}}-class-alt" style="{{imageProps && imageProps.style || ''}}" src="{{image}}" mode="{{imageProps && imageProps.mode || 'aspectFill'}}" lazy="{{imageProps && imageProps.lazy || false}}" loading="{{imageProps && imageProps.loading || 'default'}}" shape="{{imageProps && imageProps.shape || 'round'}}" webp="{{imageProps && imageProps.webp || false}}" error="{{alt || 'default'}}" bind:error="onLoadError"/><template wx:elif="{{iconName || _.isNoEmptyObj(iconData)}}" is="icon" data="{{tClass: classPrefix + '__icon ' + prefix + '-class-icon', name: iconName, ...iconData}}"/><view wx:else class="{{classPrefix}}__text {{prefix}}-class-content"><slot/></view></view></t-badge></view>

View File

@ -1,104 +1 @@
.t-float-left {
float: left;
}
.t-float-right {
float: right;
}
@keyframes tdesign-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.hotspot-expanded.relative {
position: relative;
}
.hotspot-expanded::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transform: scale(1.5);
}
.t-avatar {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
background-color: var(--td-avatar-bg-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff)));
color: var(--td-avatar-content-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-avatar__wrapper {
display: inline-flex;
position: relative;
vertical-align: top;
margin-left: var(--td-avatar-margin-left, 0);
}
.t-avatar--large {
width: var(--td-avatar-large-width, 128rpx);
height: var(--td-avatar-large-width, 128rpx);
font-size: var(--td-avatar-text-large-font-size, var(--td-font-size-xl, 40rpx));
}
.t-avatar--large .t-avatar__icon {
font-size: var(--td-avatar-icon-large-font-size, 64rpx);
}
.t-avatar--medium {
width: var(--td-avatar-medium-width, 96rpx);
height: var(--td-avatar-medium-width, 96rpx);
font-size: var(--td-avatar-text-medium-font-size, var(--td-font-size-m, 32rpx));
}
.t-avatar--medium .t-avatar__icon {
font-size: var(--td-avatar-icon-medium-font-size, 48rpx);
}
.t-avatar--small {
width: var(--td-avatar-small-width, 80rpx);
height: var(--td-avatar-small-width, 80rpx);
font-size: var(--td-avatar-text-small-font-size, var(--td-font-size-base, 28rpx));
}
.t-avatar--small .t-avatar__icon {
font-size: var(--td-avatar-icon-small-font-size, 40rpx);
}
.t-avatar .t-image,
.t-avatar__image {
width: 100%;
height: 100%;
}
.t-avatar--circle {
border-radius: var(--td-avatar-circle-border-radius, var(--td-radius-circle, 50%));
overflow: hidden;
}
.t-avatar--round {
border-radius: var(--td-avatar-round-border-radius, var(--td-radius-default, 12rpx));
overflow: hidden;
}
.t-avatar__text,
.t-avatar__icon {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.t-avatar__text:empty,
.t-avatar__icon:empty {
width: 0;
height: 0;
}
.t-avatar--border {
border-color: var(--td-avatar-border-color, #fff);
border-style: solid;
}
.t-avatar--border-small {
border-width: var(--td-avatar-border-width-small, 2rpx);
}
.t-avatar--border-medium {
border-width: var(--td-avatar-border-width-medium, 4rpx);
}
.t-avatar--border-large {
border-width: var(--td-avatar-border-width-large, 6rpx);
}
@import '../common/style/index.wxss';.t-avatar{display:flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--td-avatar-bg-color,var(--td-brand-color-light-active,var(--td-primary-color-2,#d9e1ff)));color:var(--td-avatar-content-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)))}.t-avatar__wrapper{display:inline-flex;position:relative;vertical-align:top;margin-left:var(--td-avatar-margin-left,0)}.t-avatar--large{width:var(--td-avatar-large-width,128rpx);height:var(--td-avatar-large-width,128rpx);font-size:var(--td-avatar-text-large-font-size,var(--td-font-size-xl,40rpx))}.t-avatar--large .t-avatar__icon{font-size:var(--td-avatar-icon-large-font-size,64rpx)}.t-avatar--medium{width:var(--td-avatar-medium-width,96rpx);height:var(--td-avatar-medium-width,96rpx);font-size:var(--td-avatar-text-medium-font-size,var(--td-font-size-m,32rpx))}.t-avatar--medium .t-avatar__icon{font-size:var(--td-avatar-icon-medium-font-size,48rpx)}.t-avatar--small{width:var(--td-avatar-small-width,80rpx);height:var(--td-avatar-small-width,80rpx);font-size:var(--td-avatar-text-small-font-size,var(--td-font-size-base,28rpx))}.t-avatar--small .t-avatar__icon{font-size:var(--td-avatar-icon-small-font-size,40rpx)}.t-avatar .t-image,.t-avatar__image{width:100%;height:100%}.t-avatar--circle{border-radius:var(--td-avatar-circle-border-radius,var(--td-radius-circle,50%));overflow:hidden}.t-avatar--round{border-radius:var(--td-avatar-round-border-radius,var(--td-radius-default,12rpx));overflow:hidden}.t-avatar__icon,.t-avatar__text{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.t-avatar__icon:empty,.t-avatar__text:empty{width:0;height:0}.t-avatar--border{border-color:var(--td-avatar-border-color,#fff);border-style:solid}.t-avatar--border-small{border-width:var(--td-avatar-border-width-small,2rpx)}.t-avatar--border-medium{border-width:var(--td-avatar-border-width-medium,4rpx)}.t-avatar--border-large{border-width:var(--td-avatar-border-width-large,6rpx)}

View File

@ -1,35 +1 @@
const props = {
alt: {
type: String,
value: '',
},
badgeProps: {
type: Object,
},
bordered: {
type: Boolean,
value: false,
},
hideOnLoadFailed: {
type: Boolean,
value: false,
},
icon: {
type: null,
},
image: {
type: String,
value: '',
},
imageProps: {
type: Object,
},
shape: {
type: String,
},
size: {
type: String,
value: '',
},
};
export default props;
const props={alt:{type:String,value:""},badgeProps:{type:Object},bordered:{type:Boolean,value:!1},hideOnLoadFailed:{type:Boolean,value:!1},icon:{type:null},image:{type:String,value:""},imageProps:{type:Object},shape:{type:String},size:{type:String,value:""}};export default props;

View File

@ -1 +1 @@
export {};
export{};

View File

@ -1,41 +0,0 @@
:: BASE_DOC ::
## API
### BackTop 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
fixed | Boolean | true | \- | N
icon | String / Boolean / Object / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
scroll-top | Number | 0 | \- | N
text | String | '' | \- | N
theme | String | round | options: round/half-round/round-dark/half-round-dark | N
visibility-height | Number | 200 | \- | N
### BackTop Events
name | params | description
-- | -- | --
to-top | \- | \-
### BackTop External Classes
className | Description
-- | --
t-class | \-
t-class-icon | \-
t-class-text | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-back-top-round-bg-color | @font-white-1 | -
--td-back-top-round-border-color | @component-border | -
--td-back-top-round-border-radius | @radius-circle | -
--td-back-top-round-color | @font-gray-1 | -
--td-back-top-round-dark-bg-color | @gray-color-14 | -
--td-back-top-round-dark-color | @font-white-1 | -

View File

@ -1,72 +0,0 @@
---
title: BackTop 返回顶部
description: 用于当页面过长往下滑动时,帮助用户快速回到页面顶部。
spline: navigation
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
## 引入
全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-back-top": "tdesign-miniprogram/back-top/back-top",
}
```
## 代码演示
<a href="https://developers.weixin.qq.com/s/2aR1demj7aS2" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后依次执行npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
</blockquote>
<img src="https://tdesign.gtimg.com/miniprogram/readme/backtop-1.png" width="375px" height="50%">
### 基础返回顶部
{{ base }}
## API
### BackTop Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N
fixed | Boolean | true | 是否绝对定位固定到屏幕右下方 | N
icon | String / Boolean / Object / Slot | true | 图标。值为 `false` 表示不显示图标。不传表示使用默认图标 `'backtop'`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
scroll-top | Number | 0 | 页面滚动距离 | N
text | String | '' | 文案 | N
theme | String | round | 预设的样式类型。可选项round/half-round/round-dark/half-round-dark | N
visibility-height | Number | 200 | 滚动高度达到此参数值才出现 | N
### BackTop Events
名称 | 参数 | 描述
-- | -- | --
to-top | \- | 点击触发
### BackTop External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-icon | 图标样式类
t-class-text | 文本样式类
### CSS Variables
组件提供了下列 CSS 变量,可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-back-top-round-bg-color | @font-white-1 | -
--td-back-top-round-border-color | @component-border | -
--td-back-top-round-border-radius | @radius-circle | -
--td-back-top-round-color | @font-gray-1 | -
--td-back-top-round-dark-bg-color | @gray-color-14 | -
--td-back-top-round-dark-color | @font-white-1 | -

View File

@ -1,73 +1 @@
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 { SuperComponent, wxComponent } from '../common/src/index';
import config from '../common/config';
import props from './props';
import { calcIcon } from '../common/utils';
const { prefix } = config;
const name = `${prefix}-back-top`;
let BackTop = class BackTop extends SuperComponent {
constructor() {
super(...arguments);
this.externalClasses = [`${prefix}-class`, `${prefix}-class-icon`, `${prefix}-class-text`];
this.options = {
multipleSlots: true,
};
this.properties = props;
this.relations = {
'../pull-down-refresh/pull-down-refresh': {
type: 'ancestor',
},
};
this.data = {
prefix,
classPrefix: name,
_icon: null,
hidden: true,
};
this.observers = {
icon() {
this.setIcon();
},
scrollTop(value) {
const { visibilityHeight } = this.properties;
this.setData({ hidden: value < visibilityHeight });
},
};
this.lifetimes = {
ready() {
const { icon } = this.properties;
this.setIcon(icon);
},
};
this.methods = {
setIcon(v) {
this.setData({
_icon: calcIcon(v, 'backtop'),
});
},
toTop() {
var _a;
this.triggerEvent('to-top');
if (this.$parent) {
(_a = this.$parent) === null || _a === void 0 ? void 0 : _a.setScrollTop(0);
this.setData({ hidden: true });
}
else {
wx.pageScrollTo({
scrollTop: 0,
duration: 300,
});
}
},
};
}
};
BackTop = __decorate([
wxComponent()
], BackTop);
export default BackTop;
import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./props";import{calcIcon}from"../common/utils";const{prefix:prefix}=config,name=`${prefix}-back-top`;let BackTop=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-icon`,`${prefix}-class-text`],this.options={multipleSlots:!0},this.properties=props,this.relations={"../pull-down-refresh/pull-down-refresh":{type:"ancestor"}},this.data={prefix:prefix,classPrefix:name,_icon:null,hidden:!0},this.observers={icon(){this.setIcon()},scrollTop(o){const{visibilityHeight:t}=this.properties;this.setData({hidden:o<t})}},this.lifetimes={ready(){const{icon:o}=this.properties;this.setIcon(o)}},this.methods={setIcon(o){this.setData({_icon:calcIcon(o,"backtop")})},toTop(){var o;this.triggerEvent("to-top"),this.$parent?(null===(o=this.$parent)||void 0===o||o.setScrollTop(0),this.setData({hidden:!0})):wx.pageScrollTo({scrollTop:0,duration:300})}}}};BackTop=__decorate([wxComponent()],BackTop);export default BackTop;

View File

@ -1,7 +1 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"t-icon": "../icon/icon"
}
}
{"component":true,"styleIsolation":"apply-shared","usingComponents":{"t-icon":"../icon/icon"}}

View File

@ -1,17 +1 @@
<import src="../common/template/icon.wxml" />
<wxs src="../common/utils.wxs" module="_" />
<view
style="{{_._style([style, customStyle])}}"
class="class {{prefix}}-class {{_.cls(classPrefix, [['fixed', fixed], theme])}}"
bindtap="toTop"
aria-role="button"
hidden="{{hidden}}"
>
<view class="{{classPrefix}}__icon" aria-hidden>
<slot name="icon" />
<template wx:if="{{_icon}}" is="icon" data="{{tClass: prefix + '-class-icon', ..._icon }}" />
</view>
<view wx:if="{{!!text}}" class="{{classPrefix}}__text--{{theme}} {{prefix}}-class-text">{{text}}</view>
<slot />
</view>
<import src="../common/template/icon.wxml"/><wxs src="../common/utils.wxs" module="_"/><view style="{{_._style([style, customStyle])}}" class="class {{prefix}}-class {{_.cls(classPrefix, [['fixed', fixed], theme])}}" bindtap="toTop" aria-role="button" hidden="{{hidden}}"><view class="{{classPrefix}}__icon" aria-hidden><slot name="icon"/><template wx:if="{{_icon}}" is="icon" data="{{tClass: prefix + '-class-icon', ..._icon }}"/></view><view wx:if="{{!!text}}" class="{{classPrefix}}__text--{{theme}} {{prefix}}-class-text">{{text}}</view><slot/></view>

View File

@ -1,91 +1 @@
.t-float-left {
float: left;
}
.t-float-right {
float: right;
}
@keyframes tdesign-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.hotspot-expanded.relative {
position: relative;
}
.hotspot-expanded::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transform: scale(1.5);
}
.t-back-top {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: transparent;
overflow: hidden;
box-sizing: border-box;
transition: height 0.2s;
height: auto;
}
.t-back-top--fixed {
position: fixed;
right: var(--td-spacer, 16rpx);
bottom: calc(var(--td-spacer-2, 32rpx) + env(safe-area-inset-bottom));
}
.t-back-top--round,
.t-back-top--round-dark {
width: 96rpx;
height: 96rpx;
border-radius: var(--td-back-top-round-border-radius, var(--td-radius-circle, 50%));
}
.t-back-top--round,
.t-back-top--half-round {
color: var(--td-back-top-round-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
border: 1rpx solid var(--td-back-top-round-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
background-color: var(--td-back-top-round-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
}
.t-back-top--round-dark,
.t-back-top--half-round-dark {
color: var(--td-back-top-round-dark-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
background-color: var(--td-back-top-round-dark-bg-color, var(--td-gray-color-13, #242424));
}
.t-back-top--half-round,
.t-back-top--half-round-dark {
width: 120rpx;
height: 80rpx;
border-radius: 0;
border-top-left-radius: var(--td-back-top-half-round-border-radius, var(--td-radius-round, 999px));
border-bottom-left-radius: var(--td-back-top-half-round-border-radius, var(--td-radius-round, 999px));
flex-direction: row;
right: 0;
}
.t-back-top__text--round,
.t-back-top__text--round-dark,
.t-back-top__text--half-round,
.t-back-top__text--half-round-dark {
font-size: var(--td-font-size, 20rpx);
line-height: 24rpx;
}
.t-back-top__text--half-round,
.t-back-top__text--half-round-dark {
width: 48rpx;
}
.t-back-top__icon:not(:empty) + .t-back-top__text--half-round,
.t-back-top__icon:not(:empty) + .t-back-top__text--half-round-dark {
margin-left: 8rpx;
}
.t-back-top__icon {
display: flex;
justify-content: center;
align-items: center;
font-size: 44rpx;
}
@import '../common/style/index.wxss';.t-back-top{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:transparent;overflow:hidden;box-sizing:border-box;transition:height .2s;height:auto}.t-back-top--fixed{position:fixed;right:var(--td-spacer,16rpx);bottom:calc(var(--td-spacer-2,32rpx) + env(safe-area-inset-bottom))}.t-back-top--round,.t-back-top--round-dark{width:96rpx;height:96rpx;border-radius:var(--td-back-top-round-border-radius,var(--td-radius-circle,50%))}.t-back-top--half-round,.t-back-top--round{color:var(--td-back-top-round-color,var(--td-text-color-primary,var(--td-font-gray-1,rgba(0,0,0,.9))));border:1rpx solid var(--td-back-top-round-border-color,var(--td-component-border,var(--td-gray-color-4,#dcdcdc)));background-color:var(--td-back-top-round-bg-color,var(--td-bg-color-container,var(--td-font-white-1,#fff)))}.t-back-top--half-round-dark,.t-back-top--round-dark{color:var(--td-back-top-round-dark-color,var(--td-text-color-anti,var(--td-font-white-1,#fff)));background-color:var(--td-back-top-round-dark-bg-color,var(--td-gray-color-13,#242424))}.t-back-top--half-round,.t-back-top--half-round-dark{width:120rpx;height:80rpx;border-radius:0;border-top-left-radius:var(--td-back-top-half-round-border-radius,var(--td-radius-round,999px));border-bottom-left-radius:var(--td-back-top-half-round-border-radius,var(--td-radius-round,999px));flex-direction:row;right:0}.t-back-top__text--half-round,.t-back-top__text--half-round-dark,.t-back-top__text--round,.t-back-top__text--round-dark{font-size:var(--td-font-size,20rpx);line-height:24rpx}.t-back-top__text--half-round,.t-back-top__text--half-round-dark{width:48rpx}.t-back-top__icon:not(:empty)+.t-back-top__text--half-round,.t-back-top__icon:not(:empty)+.t-back-top__text--half-round-dark{margin-left:8rpx}.t-back-top__icon{display:flex;justify-content:center;align-items:center;font-size:44rpx}

View File

@ -1,31 +1 @@
const props = {
fixed: {
type: Boolean,
value: true,
},
icon: {
type: null,
value: true,
},
scrollTop: {
type: Number,
value: 0,
},
style: {
type: String,
value: '',
},
text: {
type: String,
value: '',
},
theme: {
type: String,
value: 'round',
},
visibilityHeight: {
type: Number,
value: 200,
},
};
export default props;
const props={fixed:{type:Boolean,value:!0},icon:{type:null,value:!0},scrollTop:{type:Number,value:0},style:{type:String,value:""},text:{type:String,value:""},theme:{type:String,value:"round"},visibilityHeight:{type:Number,value:200}};export default props;

View File

@ -1 +1 @@
export {};
export{};

View File

@ -1,45 +0,0 @@
:: BASE_DOC ::
## API
### Badge 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
color | String | - | \- | N
content | String | - | \- | N
count | String / Number / Slot | 0 | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
dot | Boolean | false | \- | N
max-count | Number | 99 | \- | N
offset | Array | - | Typescript`Array<string \| number>` | N
shape | String | circle | options: circle/square/bubble/ribbon | N
show-zero | Boolean | false | \- | N
size | String | medium | options: medium/large | N
### Badge External Classes
className | Description
-- | --
t-class | \-
t-class-content | \-
t-class-count | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-badge-basic-height | 32rpx | -
--td-badge-basic-padding | 8rpx | -
--td-badge-basic-width | 32rpx | -
--td-badge-bg-color | @error-color | -
--td-badge-border-radius | 4rpx | -
--td-badge-bubble-border-radius | 20rpx 20rpx 20rpx 1px | -
--td-badge-dot-size | 16rpx | -
--td-badge-font-size | @font-size-xs | -
--td-badge-font-weight | 600 | -
--td-badge-large-font-size | @font-size-s | -
--td-badge-large-height | 40rpx | -
--td-badge-large-padding | 10rpx | -
--td-badge-text-color | @font-white-1 | -

View File

@ -1,86 +0,0 @@
---
title: Badge 徽标
description: 用于告知用户,该区域的状态变化或者待处理任务的数量。
spline: data
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
## 引入
全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-badge": "tdesign-miniprogram/badge/badge"
}
```
## 代码演示
<a href="https://developers.weixin.qq.com/s/TgaeQimG73SD" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后依次执行npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
</blockquote>
### 组件类型
{{ base }}
### 组件样式
{{ theme }}
### 组件尺寸
{{ size }}
## FAQ
### 如何处理由 ribbon 徽标溢出导致页面出现横向滚动?
角标溢出问题建议从父容器组件处理。如 <a href="https://github.com/Tencent/tdesign-miniprogram/issues/3063" title="如 #3063 " target="_blank" rel="noopener noreferrer"> #3063 </a>,可以给父容器 `cell` 组件添加 `overflow: hidden`,处理溢出造成页面出现横向滚动的问题。
## API
### Badge Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N
color | String | - | 颜色 | N
content | String | - | 徽标内容,示例:`content='自定义内容'`。也可以使用默认插槽定义 | N
count | String / Number / Slot | 0 | 徽标右上角内容。可以是数字,也可以是文字。如:'new'/3/99+。特殊:值为空表示使用插槽渲染。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
dot | Boolean | false | 是否为红点 | N
max-count | Number | 99 | 封顶的数字值 | N
offset | Array | - | 设置状态点的位置偏移,示例:[-10, 20] 或 ['10em', '8rem']。TS 类型:`Array<string \| number>` | N
shape | String | circle | 形状。可选项circle/square/bubble/ribbon | N
show-zero | Boolean | false | 当数值为 0 时,是否展示徽标 | N
size | String | medium | 尺寸。可选项medium/large | N
### Badge External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-content | 内容样式类
t-class-count | 计数样式类
### CSS Variables
组件提供了下列 CSS 变量,可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-badge-basic-height | 32rpx | -
--td-badge-basic-padding | 8rpx | -
--td-badge-basic-width | 32rpx | -
--td-badge-bg-color | @error-color | -
--td-badge-border-radius | 4rpx | -
--td-badge-bubble-border-radius | 20rpx 20rpx 20rpx 1px | -
--td-badge-dot-size | 16rpx | -
--td-badge-font-size | @font-size-xs | -
--td-badge-font-weight | 600 | -
--td-badge-large-font-size | @font-size-s | -
--td-badge-large-height | 40rpx | -
--td-badge-large-padding | 10rpx | -
--td-badge-text-color | @font-white-1 | -

View File

@ -1,43 +1 @@
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 { SuperComponent, wxComponent } from '../common/src/index';
import config from '../common/config';
import props from './props';
import { uniqueFactory } from '../common/utils';
const { prefix } = config;
const name = `${prefix}-badge`;
const getUniqueID = uniqueFactory('badge');
let Badge = class Badge extends SuperComponent {
constructor() {
super(...arguments);
this.options = {
multipleSlots: true,
};
this.externalClasses = [`${prefix}-class`, `${prefix}-class-count`, `${prefix}-class-content`];
this.properties = props;
this.data = {
prefix,
classPrefix: name,
value: '',
labelID: '',
descriptionID: '',
};
this.lifetimes = {
ready() {
const uniqueID = getUniqueID();
this.setData({
labelID: `${uniqueID}_label`,
descriptionID: `${uniqueID}_description`,
});
},
};
}
};
Badge = __decorate([
wxComponent()
], Badge);
export default Badge;
import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./props";import{uniqueFactory}from"../common/utils";const{prefix:prefix}=config,name=`${prefix}-badge`,getUniqueID=uniqueFactory("badge");let Badge=class extends SuperComponent{constructor(){super(...arguments),this.options={multipleSlots:!0},this.externalClasses=[`${prefix}-class`,`${prefix}-class-count`,`${prefix}-class-content`],this.properties=props,this.data={prefix:prefix,classPrefix:name,value:"",labelID:"",descriptionID:""},this.lifetimes={ready(){const e=getUniqueID();this.setData({labelID:`${e}_label`,descriptionID:`${e}_description`})}}}};Badge=__decorate([wxComponent()],Badge);export default Badge;

View File

@ -1,5 +1 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {}
}
{"component":true,"styleIsolation":"apply-shared","usingComponents":{}}

View File

@ -1,34 +1 @@
<wxs src="./badge.wxs" module="_this" />
<wxs src="../common/utils.wxs" module="_" />
<!--
1. labelID 用于描述当前元素的文本
2. descriptionID 用于描述badge消息的文本
3. role=option一般用于多个内容合并焦点连续朗读
-->
<view
style="{{_._style([style, customStyle])}}"
class="{{_this.getBadgeOuterClass({shape})}} class {{prefix}}-class"
aria-labelledby="{{labelID}}"
aria-describedby="{{descriptionID}}"
aria-role="{{ ariaRole || 'option'}}"
>
<view id="{{labelID}}" class="{{classPrefix}}__content {{prefix}}-class-content" aria-hidden="true">
<slot wx:if="{{!content}}" class="{{classPrefix}}__content-slot" />
<text wx:else class="{{classPrefix}}__content-text">{{content}}</text>
</view>
<view
aria-hidden="true"
aria-label="{{ ariaLabel || _.getBadgeAriaLabel({dot, count, maxCount}) }}"
wx:if="{{_this.isShowBadge({dot,count,showZero})}}"
id="{{descriptionID}}"
class="{{_this.getBadgeInnerClass({dot, size, shape, count})}} {{prefix}}-has-count {{prefix}}-class-count"
style="{{_._style([_this.getBadgeStyles({color, offset})])}}"
aria-hidden="true"
aria-label="{{ ariaLabel || _.getBadgeAriaLabel({dot, count, maxCount}) }}"
>
{{ _this.getBadgeValue({dot, count, maxCount}) }}
</view>
<slot name="count" />
</view>
<wxs src="./badge.wxs" module="_this"/><wxs src="../common/utils.wxs" module="_"/><view style="{{_._style([style, customStyle])}}" class="{{_this.getBadgeOuterClass({shape})}} class {{prefix}}-class" aria-labelledby="{{labelID}}" aria-describedby="{{descriptionID}}" aria-role="{{ ariaRole || 'option'}}"><view id="{{labelID}}" class="{{classPrefix}}__content {{prefix}}-class-content" aria-hidden="true"><slot wx:if="{{!content}}" class="{{classPrefix}}__content-slot"/><text wx:else class="{{classPrefix}}__content-text">{{content}}</text></view><view aria-hidden="true" aria-label="{{ ariaLabel || _.getBadgeAriaLabel({dot, count, maxCount}) }}" wx:if="{{_this.isShowBadge({dot,count,showZero})}}" id="{{descriptionID}}" class="{{_this.getBadgeInnerClass({dot, size, shape, count})}} {{prefix}}-has-count {{prefix}}-class-count" style="{{_._style([_this.getBadgeStyles({color, offset})])}}" aria-hidden="true" aria-label="{{ ariaLabel || _.getBadgeAriaLabel({dot, count, maxCount}) }}">{{ _this.getBadgeValue({dot, count, maxCount}) }}</view><slot name="count"/></view>

View File

@ -1,113 +1 @@
.t-float-left {
float: left;
}
.t-float-right {
float: right;
}
@keyframes tdesign-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.hotspot-expanded.relative {
position: relative;
}
.hotspot-expanded::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transform: scale(1.5);
}
.t-badge {
position: relative;
display: inline-flex;
align-items: start;
}
.t-badge--basic {
z-index: 100;
padding: 0 var(--td-badge-basic-padding, 8rpx);
font-size: var(--td-badge-font-size, var(--td-font-size-xs, var(--td-font-size, 20rpx)));
color: var(--td-badge-text-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
background-color: var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
text-align: center;
height: var(--td-badge-basic-height, 32rpx);
line-height: var(--td-badge-basic-height, 32rpx);
font-weight: var(--td-badge-font-weight, 600);
border-radius: var(--td-badge-border-radius, 4rpx);
}
.t-badge--dot {
height: var(--td-badge-dot-size, 16rpx);
border-radius: 50%;
min-width: var(--td-badge-dot-size, 16rpx);
padding: 0;
}
.t-badge--count {
min-width: var(--td-badge-basic-width, 32rpx);
white-space: nowrap;
box-sizing: border-box;
}
.t-badge--circle {
border-radius: calc(var(--td-badge-basic-height, 32rpx) / 2);
}
.t-badge__ribbon-outer {
position: absolute;
top: 0;
right: 0;
}
.t-badge--ribbon {
position: relative;
display: inline-block;
transform-origin: center center;
transform: translate(calc(50% - var(--td-badge-basic-height, 32rpx) + 1rpx), calc(-50% + var(--td-badge-basic-height, 32rpx) - 1rpx)) rotate(45deg);
border-radius: 0;
}
.t-badge--ribbon::before,
.t-badge--ribbon::after {
content: '';
position: absolute;
width: 0;
height: 0;
bottom: 0;
border-bottom: var(--td-badge-basic-height, 32rpx) solid var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
font-size: 0;
}
.t-badge--ribbon::before {
left: calc(-1 * var(--td-badge-basic-height, 32rpx) + 1rpx);
border-left: var(--td-badge-basic-height, 32rpx) solid transparent;
}
.t-badge--ribbon::after {
right: calc(-1 * var(--td-badge-basic-height, 32rpx) + 1rpx);
border-right: var(--td-badge-basic-height, 32rpx) solid transparent;
}
.t-badge--bubble {
border-radius: var(--td-badge-bubble-border-radius, 20rpx 20rpx 20rpx 1px);
}
.t-badge--large {
font-size: var(--td-badge-large-font-size, var(--td-font-size-s, 24rpx));
height: var(--td-badge-large-height, 40rpx);
min-width: var(--td-badge-large-height, 40rpx);
line-height: var(--td-badge-large-height, 40rpx);
padding: 0 var(--td-badge-large-padding, 10rpx);
}
.t-badge--large.t-badge--circle {
border-radius: calc(var(--td-badge-large-height, 40rpx) / 2);
}
.t-badge__content:not(:empty) + .t-has-count {
transform-origin: center center;
transform: translate(-50%, -50%);
position: absolute;
left: 100%;
top: 0;
}
.t-badge__content-text {
display: block;
line-height: 48rpx;
color: var(--td-badge-content-text-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
}
@import '../common/style/index.wxss';.t-badge{position:relative;display:inline-flex;align-items:start}.t-badge--basic{z-index:100;padding:0 var(--td-badge-basic-padding,8rpx);font-size:var(--td-badge-font-size,var(--td-font-size-xs,var(--td-font-size,20rpx)));color:var(--td-badge-text-color,var(--td-text-color-anti,var(--td-font-white-1,#fff)));background-color:var(--td-badge-bg-color,var(--td-error-color,var(--td-error-color-6,#d54941)));text-align:center;height:var(--td-badge-basic-height,32rpx);line-height:var(--td-badge-basic-height,32rpx);font-weight:var(--td-badge-font-weight,600);border-radius:var(--td-badge-border-radius,4rpx)}.t-badge--dot{height:var(--td-badge-dot-size,16rpx);border-radius:50%;min-width:var(--td-badge-dot-size,16rpx);padding:0}.t-badge--count{min-width:var(--td-badge-basic-width,32rpx);white-space:nowrap;box-sizing:border-box}.t-badge--circle{border-radius:calc(var(--td-badge-basic-height,32rpx)/ 2)}.t-badge__ribbon-outer{position:absolute;top:0;right:0}.t-badge--ribbon{position:relative;display:inline-block;transform-origin:center center;transform:translate(calc(50% - var(--td-badge-basic-height,32rpx) + 1rpx),calc(-50% + var(--td-badge-basic-height,32rpx) - 1rpx)) rotate(45deg);border-radius:0}.t-badge--ribbon::after,.t-badge--ribbon::before{content:'';position:absolute;width:0;height:0;bottom:0;border-bottom:var(--td-badge-basic-height,32rpx) solid var(--td-badge-bg-color,var(--td-error-color,var(--td-error-color-6,#d54941)));font-size:0}.t-badge--ribbon::before{left:calc(-1 * var(--td-badge-basic-height,32rpx) + 1rpx);border-left:var(--td-badge-basic-height,32rpx) solid transparent}.t-badge--ribbon::after{right:calc(-1 * var(--td-badge-basic-height,32rpx) + 1rpx);border-right:var(--td-badge-basic-height,32rpx) solid transparent}.t-badge--bubble{border-radius:var(--td-badge-bubble-border-radius,20rpx 20rpx 20rpx 1px)}.t-badge--large{font-size:var(--td-badge-large-font-size,var(--td-font-size-s,24rpx));height:var(--td-badge-large-height,40rpx);min-width:var(--td-badge-large-height,40rpx);line-height:var(--td-badge-large-height,40rpx);padding:0 var(--td-badge-large-padding,10rpx)}.t-badge--large.t-badge--circle{border-radius:calc(var(--td-badge-large-height,40rpx)/ 2)}.t-badge__content:not(:empty)+.t-has-count{transform-origin:center center;transform:translate(-50%,-50%);position:absolute;left:100%;top:0}.t-badge__content-text{display:block;line-height:48rpx;color:var(--td-badge-content-text-color,var(--td-text-color-primary,var(--td-font-gray-1,rgba(0,0,0,.9))))}

View File

@ -1,3 +1 @@
export * from './type';
export * from './props';
export * from './badge';
export*from"./type";export*from"./props";export*from"./badge";

View File

@ -1,41 +1 @@
const props = {
color: {
type: String,
value: '',
},
content: {
type: String,
value: '',
},
count: {
type: null,
value: 0,
},
dot: {
type: Boolean,
value: false,
},
externalClasses: {
type: Array,
},
maxCount: {
type: Number,
value: 99,
},
offset: {
type: Array,
},
shape: {
type: String,
value: 'circle',
},
showZero: {
type: Boolean,
value: false,
},
size: {
type: String,
value: 'medium',
},
};
export default props;
const props={color:{type:String,value:""},content:{type:String,value:""},count:{type:null,value:0},dot:{type:Boolean,value:!1},externalClasses:{type:Array},maxCount:{type:Number,value:99},offset:{type:Array},shape:{type:String,value:"circle"},showZero:{type:Boolean,value:!1},size:{type:String,value:"medium"}};export default props;

View File

@ -1 +1 @@
export {};
export{};

View File

@ -1,232 +0,0 @@
---
title: Button
description: Buttons are used to open a closed-loop task, such as "delete" an object, "buy" an item, etc.
spline: base
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-83%25-blue" /></span>
## Usage
For global import, configure it in `app.json` in the root directory of the miniprogram. For local import, configure it in `index.json` of the page or component that needs to be imported.
```json
"usingComponents": {
"t-button": "tdesign-miniprogram/button/button"
}
```
## Code Demo
### 01 Component Type
#### Basic Buttons
{{ base }}
#### Icon Button
{{ icon-btn }}
#### Ghost Button
{{ ghost-btn }}
#### Combination Button
{{ group-btn }}
#### Banner Button
{{ block-btn }}
### 02 Component State
#### Buttons for different states
{{ disabled }}
### 03 Component Style
#### Different sizes of buttons
{{ size }}
#### Different shaped buttons
{{ shape }}
#### Different color theme buttons
{{ theme }}
## API
### Button 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
app-parameter | String | - | \- | N
block | Boolean | false | make button to be a block-level element | N
content | String / Slot | - | button's children elements。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
custom-dataset | any | - | \- | N
disabled | Boolean | undefined | disable the button, make it can not be clicked | N
ghost | Boolean | false | make background-color to be transparent | N
hover-class | String | - | \- | N
hover-start-time | Number | 20 | \- | N
hover-stay-time | Number | 70 | \- | N
hover-stop-propagation | Boolean | false | \- | N
icon | String / Object | - | icon name | N
lang | String | - | message language。options: en/zh_CN/zh_TW | N
loading | Boolean | false | set button to be loading state | N
loading-props | Object | - | Typescript`LoadingProps`[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/button/type.ts) | N
open-type | String | - | open type of button, [Miniprogram Button](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。options: contact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback/chooseAvatar/agreePrivacyAuthorization | N
phone-number-no-quota-toast | Boolean | true | \- | N
send-message-img | String | 截图 | \- | N
send-message-path | String | 当前分享路径 | \- | N
send-message-title | String | 当前标题 | \- | N
session-from | String | - | \- | N
shape | String | rectangle | button shape。options: rectangle/square/round/circle | N
show-message-card | Boolean | false | \- | N
size | String | medium | a button has four size。options: extra-small/small/medium/large | N
suffix | Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
t-id | String | - | id | N
theme | String | default | button theme。options: default/primary/danger/light | N
type | String | - | type of button element, same as formType of Miniprogram。options: submit/reset | N
variant | String | base | variant of button。options: base/outline/dashed/text | N
### Button Events
name | params | description
-- | -- | --
agreeprivacyauthorization | \- | \-
chooseavatar | \- | \-
contact | \- | \-
createliveactivity | \- | \-
error | \- | \-
getphonenumber | \- | \-
getrealtimephonenumber | \- | \-
getuserinfo | \- | \-
launchapp | \- | \-
opensetting | \- | \-
tap | `event` | \-
### Button External Classes
className | Description
-- | --
t-class | \-
t-class-icon | class name of icon
t-class-loading | class name of loading
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-button-border-radius | @radius-default | -
--td-button-border-width | 4rpx | -
--td-button-danger-active-bg-color | @error-color-active | -
--td-button-danger-active-border-color | @error-color-active | -
--td-button-danger-bg-color | @error-color | -
--td-button-danger-border-color | @error-color | -
--td-button-danger-color | @text-color-anti | -
--td-button-danger-dashed-border-color | @button-danger-dashed-color | -
--td-button-danger-dashed-color | @error-color | -
--td-button-danger-dashed-disabled-color | @button-danger-disabled-color | -
--td-button-danger-disabled-bg | @error-color-3 | -
--td-button-danger-disabled-border-color | @error-color-3 | -
--td-button-danger-disabled-color | @font-white-1 | -
--td-button-danger-outline-active-bg-color | @bg-color-container-active | -
--td-button-danger-outline-active-border-color | @error-color-active | -
--td-button-danger-outline-border-color | @button-danger-outline-color | -
--td-button-danger-outline-color | @error-color | -
--td-button-danger-outline-disabled-color | @error-color-3 | -
--td-button-danger-text-active-bg-color | @bg-color-container-active | -
--td-button-danger-text-color | @error-color | -
--td-button-danger-text-disabled-color | @button-danger-disabled-color | -
--td-button-default-active-bg-color | @bg-color-component-active | -
--td-button-default-active-border-color | @bg-color-component-active | -
--td-button-default-bg-color | @bg-color-component | -
--td-button-default-border-color | @bg-color-component | -
--td-button-default-color | @text-color-primary | -
--td-button-default-disabled-bg | @bg-color-component-disabled | -
--td-button-default-disabled-border-color | @bg-color-component-disabled | -
--td-button-default-disabled-color | @text-color-disabled | -
--td-button-default-outline-active-bg-color | @bg-color-container-active | -
--td-button-default-outline-active-border-color | @component-border | -
--td-button-default-outline-border-color | @component-border | -
--td-button-default-outline-color | @text-color-primary | -
--td-button-default-outline-disabled-color | @component-border | -
--td-button-default-text-active-bg-color | @bg-color-container-active | -
--td-button-extra-small-font-size | @font-size-base | -
--td-button-extra-small-height | 56rpx | -
--td-button-extra-small-icon-font-size | 36rpx | -
--td-button-extra-small-padding-horizontal | 16rpx | -
--td-button-font-weight | 600 | -
--td-button-ghost-border-color | @button-ghost-color | -
--td-button-ghost-color | @text-color-anti | -
--td-button-ghost-danger-border-color | @error-color | -
--td-button-ghost-danger-color | @error-color | -
--td-button-ghost-danger-hover-color | @error-color-active | -
--td-button-ghost-disabled-color | @font-white-4 | -
--td-button-ghost-hover-color | @font-white-2 | -
--td-button-ghost-primary-border-color | @brand-color | -
--td-button-ghost-primary-color | @brand-color | -
--td-button-ghost-primary-hover-color | @brand-color-active | -
--td-button-icon-border-radius | 8rpx | -
--td-button-icon-spacer | @spacer | -
--td-button-large-font-size | @font-size-m | -
--td-button-large-height | 96rpx | -
--td-button-large-icon-font-size | 48rpx | -
--td-button-large-padding-horizontal | 40rpx | -
--td-button-light-active-bg-color | @brand-color-light-active | -
--td-button-light-active-border-color | @brand-color-light-active | -
--td-button-light-bg-color | @brand-color-light | -
--td-button-light-border-color | @brand-color-light | -
--td-button-light-color | @brand-color | -
--td-button-light-disabled-bg | @brand-color-light | -
--td-button-light-disabled-border-color | @brand-color-light | -
--td-button-light-disabled-color | @brand-color-disabled | -
--td-button-light-outline-active-bg-color | @brand-color-light-active | -
--td-button-light-outline-active-border-color | @brand-color-active | -
--td-button-light-outline-bg-color | @brand-color-light | -
--td-button-light-outline-border-color | @button-light-outline-color | -
--td-button-light-outline-color | @brand-color | -
--td-button-light-outline-disabled-color | @brand-color-disabled | -
--td-button-light-text-active-bg-color | @bg-color-container-active | -
--td-button-light-text-color | @brand-color | -
--td-button-medium-font-size | @font-size-m | -
--td-button-medium-height | 80rpx | -
--td-button-medium-icon-font-size | 40rpx | -
--td-button-medium-padding-horizontal | 32rpx | -
--td-button-primary-active-bg-color | @brand-color-active | -
--td-button-primary-active-border-color | @brand-color-active | -
--td-button-primary-bg-color | @brand-color | -
--td-button-primary-border-color | @brand-color | -
--td-button-primary-color | @text-color-anti | -
--td-button-primary-dashed-border-color | @button-primary-dashed-color | -
--td-button-primary-dashed-color | @brand-color | -
--td-button-primary-dashed-disabled-color | @brand-color-disabled | -
--td-button-primary-disabled-bg | @brand-color-disabled | -
--td-button-primary-disabled-border-color | @brand-color-disabled | -
--td-button-primary-disabled-color | @text-color-anti | -
--td-button-primary-outline-active-bg-color | @bg-color-container-active | -
--td-button-primary-outline-active-border-color | @brand-color-active | -
--td-button-primary-outline-border-color | @button-primary-outline-color | -
--td-button-primary-outline-color | @brand-color | -
--td-button-primary-outline-disabled-color | @brand-color-disabled | -
--td-button-primary-text-active-bg-color | @bg-color-container-active | -
--td-button-primary-text-color | @brand-color | -
--td-button-primary-text-disabled-color | @brand-color-disabled | -
--td-button-small-font-size | @font-size-base | -
--td-button-small-height | 64rpx | -
--td-button-small-icon-font-size | 36rpx | -
--td-button-small-padding-horizontal | 24rpx | -

View File

@ -1,234 +0,0 @@
---
title: Button 按钮
description: 用于开启一个闭环的操作任务,如“删除”对象、“购买”商品等。
spline: base
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-83%25-blue" /></span>
## 引入
全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-button": "tdesign-miniprogram/button/button"
}
```
## 代码演示
<a href="https://developers.weixin.qq.com/s/F1cSo7mm75SS" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后依次执行npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
</blockquote>
### 01 组件类型
#### 基础按钮
{{ base }}
#### 图标按钮
{{ icon-btn }}
#### 幽灵按钮
{{ ghost-btn }}
#### 组合按钮
{{ group-btn }}
#### 通栏按钮
{{ block-btn }}
### 02 组件状态
#### 按钮禁用态
{{ disabled }}
### 03 组件样式
#### 按钮尺寸
{{ size }}
#### 按钮形状
{{ shape }}
#### 按钮主题
{{ theme }}
## API
### Button Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N
app-parameter | String | - | 打开 APP 时,向 APP 传递的参数open-type=launchApp时有效 | N
block | Boolean | false | 是否为块级元素 | N
content | String / Slot | - | 按钮内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
custom-dataset | any | - | 自定义 dataset可通过 event.currentTarget.dataset.custom 获取 | N
disabled | Boolean | undefined | 禁用状态。优先级Button.disabled > Form.disabled | N
ghost | Boolean | false | 是否为幽灵按钮(镂空按钮) | N
hover-class | String | - | 指定按钮按下去的样式类,按钮不为加载或禁用状态时有效。当 `hover-class="none"` 时,没有点击态效果 | N
hover-start-time | Number | 20 | 按住后多久出现点击态,单位毫秒 | N
hover-stay-time | Number | 70 | 手指松开后点击态保留时间,单位毫秒 | N
hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | N
icon | String / Object | - | 图标名称。值为字符串表示图标名称,值为 `Object` 类型,表示透传至 `icon`。 | N
lang | String | - | 指定返回用户信息的语言zh_CN 简体中文zh_TW 繁体中文en 英文。。<br />具体释义:<br />`en` 英文;<br />`zh_CN` 简体中文;<br />`zh_TW` 繁体中文。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。。可选项en/zh_CN/zh_TW | N
loading | Boolean | false | 是否显示为加载状态 | N
loading-props | Object | - | 透传 Loading 组件全部属性。TS 类型:`LoadingProps`[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/button/type.ts) | N
open-type | String | - | 微信开放能力。<br />具体释义:<br />`contact` 打开客服会话,如果用户在会话中点击消息卡片后返回小程序,可以从 bindcontact 回调中获得具体信息,<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html">具体说明</a> *小程序插件中不能使用*<br />`share` 触发用户转发,使用前建议先阅读<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#使用指引">使用指引</a><br />`getPhoneNumber` 获取用户手机号,可以从 bindgetphonenumber 回调中获取到用户信息,<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html">具体说明</a> *小程序插件中不能使用*<br />`getUserInfo` 获取用户信息,可以从 bindgetuserinfo 回调中获取到用户信息 *小程序插件中不能使用*<br />`launchApp` 打开APP可以通过 app-parameter 属性设定向 APP 传的参数<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html">具体说明</a><br />`openSetting` 打开授权设置页;<br />`feedback` 打开“意见反馈”页面,用户可提交反馈内容并上传<a href="https://developers.weixin.qq.com/miniprogram/dev/api/base/debug/wx.getLogManager.html">日志</a>,开发者可以登录<a href="https://mp.weixin.qq.com/">小程序管理后台</a>后进入左侧菜单“客服反馈”页面获取到反馈内容;<br />`chooseAvatar` 获取用户头像,可以从 bindchooseavatar 回调中获取到头像信息;<br />`agreePrivacyAuthorization`用户同意隐私协议按钮。用户点击一次此按钮后,所有隐私接口可以正常调用。可通过`bindagreeprivacyauthorization`监听用户同意隐私协议事件。隐私合规开发指南详情可见《<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html">小程序隐私协议开发指南</a>》。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。。可选项contact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback/chooseAvatar/agreePrivacyAuthorization | N
phone-number-no-quota-toast | Boolean | true | 原生按钮属性当手机号快速验证或手机号实时验证额度用尽时是否对用户展示“申请获取你的手机号但该功能使用次数已达当前小程序上限暂时无法使用”的提示默认展示open-type="getPhoneNumber" 或 open-type="getRealtimePhoneNumber" 时有效 | N
send-message-img | String | 截图 | 会话内消息卡片图片open-type="contact"时有效 | N
send-message-path | String | 当前分享路径 | 会话内消息卡片点击跳转小程序路径open-type="contact"时有效 | N
send-message-title | String | 当前标题 | 会话内消息卡片标题open-type="contact"时有效 | N
session-from | String | - | 会话来源open-type="contact"时有效 | N
shape | String | rectangle | 按钮形状,有 4 种长方形、正方形、圆角长方形、圆形。可选项rectangle/square/round/circle | N
show-message-card | Boolean | false | 是否显示会话内消息卡片,设置此参数为 true用户进入客服会话会在右下角显示"可能要发送的小程序"提示用户点击后可以快速发送小程序消息open-type="contact"时有效 | N
size | String | medium | 组件尺寸。可选项extra-small/small/medium/large | N
suffix | Slot | - | 右侧内容,可用于定义右侧图标。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
t-id | String | - | 按钮标签id | N
theme | String | default | 组件风格依次为品牌色、危险色。可选项default/primary/danger/light | N
type | String | - | 同小程序的 formType。可选项submit/reset | N
variant | String | base | 按钮形式基础、线框、虚线、文字。可选项base/outline/dashed/text | N
### Button Events
名称 | 参数 | 描述
-- | -- | --
agreeprivacyauthorization | \- | 原生按钮属性用户同意隐私协议事件回调open-type=agreePrivacyAuthorization时有效 Tips: 如果使用 onNeedPrivacyAuthorization 接口,需要在 bindagreeprivacyauthorization 触发后再调用 resolve({ event: "agree", buttonId })
chooseavatar | \- | 原生按钮属性,获取用户头像回调,`open-type=chooseAvatar` 时有效。返回 `e.detail.avatarUrl` 为头像临时文件链接
contact | \- | 原生按钮属性,客服消息回调,`open-type="contact"` 时有效
createliveactivity | \- | 新的一次性订阅消息下发机制回调,`open-type=liveActivity` 时有效
error | \- | 原生按钮属性,当使用开放能力时,发生错误的回调,`open-type=launchApp` 时有效
getphonenumber | \- | 原生按钮属性手机号快速验证回调open-type=getPhoneNumber时有效。Tips在触发 bindgetphonenumber 回调后应立即隐藏手机号按钮组件,或置为 disabled 状态,避免用户重复授权手机号产生额外费用
getrealtimephonenumber | \- | 原生按钮属性手机号实时验证回调open-type=getRealtimePhoneNumber 时有效。Tips在触发 bindgetrealtimephonenumber 回调后应立即隐藏手机号按钮组件,或置为 disabled 状态,避免用户重复授权手机号产生额外费用
getuserinfo | \- | 原生按钮属性用户点击该按钮时会返回获取到的用户信息回调的detail数据与wx.getUserInfo返回的一致open-type="getUserInfo"时有效
launchapp | \- | 打开 APP 成功的回调,`open-type=launchApp` 时有效
opensetting | \- | 原生按钮属性在打开授权设置页后回调open-type=openSetting时有效
tap | `event` | 点击按钮,当按钮不为加载或禁用状态时触发
### Button External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-icon | 图标样式类
t-class-loading | 加载样式类
### CSS Variables
组件提供了下列 CSS 变量,可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-button-border-radius | @radius-default | -
--td-button-border-width | 4rpx | -
--td-button-danger-active-bg-color | @error-color-active | -
--td-button-danger-active-border-color | @error-color-active | -
--td-button-danger-bg-color | @error-color | -
--td-button-danger-border-color | @error-color | -
--td-button-danger-color | @text-color-anti | -
--td-button-danger-dashed-border-color | @button-danger-dashed-color | -
--td-button-danger-dashed-color | @error-color | -
--td-button-danger-dashed-disabled-color | @button-danger-disabled-color | -
--td-button-danger-disabled-bg | @error-color-3 | -
--td-button-danger-disabled-border-color | @error-color-3 | -
--td-button-danger-disabled-color | @font-white-1 | -
--td-button-danger-outline-active-bg-color | @bg-color-container-active | -
--td-button-danger-outline-active-border-color | @error-color-active | -
--td-button-danger-outline-border-color | @button-danger-outline-color | -
--td-button-danger-outline-color | @error-color | -
--td-button-danger-outline-disabled-color | @error-color-3 | -
--td-button-danger-text-active-bg-color | @bg-color-container-active | -
--td-button-danger-text-color | @error-color | -
--td-button-danger-text-disabled-color | @button-danger-disabled-color | -
--td-button-default-active-bg-color | @bg-color-component-active | -
--td-button-default-active-border-color | @bg-color-component-active | -
--td-button-default-bg-color | @bg-color-component | -
--td-button-default-border-color | @bg-color-component | -
--td-button-default-color | @text-color-primary | -
--td-button-default-disabled-bg | @bg-color-component-disabled | -
--td-button-default-disabled-border-color | @bg-color-component-disabled | -
--td-button-default-disabled-color | @text-color-disabled | -
--td-button-default-outline-active-bg-color | @bg-color-container-active | -
--td-button-default-outline-active-border-color | @component-border | -
--td-button-default-outline-border-color | @component-border | -
--td-button-default-outline-color | @text-color-primary | -
--td-button-default-outline-disabled-color | @component-border | -
--td-button-default-text-active-bg-color | @bg-color-container-active | -
--td-button-extra-small-font-size | @font-size-base | -
--td-button-extra-small-height | 56rpx | -
--td-button-extra-small-icon-font-size | 36rpx | -
--td-button-extra-small-padding-horizontal | 16rpx | -
--td-button-font-weight | 600 | -
--td-button-ghost-border-color | @button-ghost-color | -
--td-button-ghost-color | @text-color-anti | -
--td-button-ghost-danger-border-color | @error-color | -
--td-button-ghost-danger-color | @error-color | -
--td-button-ghost-danger-hover-color | @error-color-active | -
--td-button-ghost-disabled-color | @font-white-4 | -
--td-button-ghost-hover-color | @font-white-2 | -
--td-button-ghost-primary-border-color | @brand-color | -
--td-button-ghost-primary-color | @brand-color | -
--td-button-ghost-primary-hover-color | @brand-color-active | -
--td-button-icon-border-radius | 8rpx | -
--td-button-icon-spacer | @spacer | -
--td-button-large-font-size | @font-size-m | -
--td-button-large-height | 96rpx | -
--td-button-large-icon-font-size | 48rpx | -
--td-button-large-padding-horizontal | 40rpx | -
--td-button-light-active-bg-color | @brand-color-light-active | -
--td-button-light-active-border-color | @brand-color-light-active | -
--td-button-light-bg-color | @brand-color-light | -
--td-button-light-border-color | @brand-color-light | -
--td-button-light-color | @brand-color | -
--td-button-light-disabled-bg | @brand-color-light | -
--td-button-light-disabled-border-color | @brand-color-light | -
--td-button-light-disabled-color | @brand-color-disabled | -
--td-button-light-outline-active-bg-color | @brand-color-light-active | -
--td-button-light-outline-active-border-color | @brand-color-active | -
--td-button-light-outline-bg-color | @brand-color-light | -
--td-button-light-outline-border-color | @button-light-outline-color | -
--td-button-light-outline-color | @brand-color | -
--td-button-light-outline-disabled-color | @brand-color-disabled | -
--td-button-light-text-active-bg-color | @bg-color-container-active | -
--td-button-light-text-color | @brand-color | -
--td-button-medium-font-size | @font-size-m | -
--td-button-medium-height | 80rpx | -
--td-button-medium-icon-font-size | 40rpx | -
--td-button-medium-padding-horizontal | 32rpx | -
--td-button-primary-active-bg-color | @brand-color-active | -
--td-button-primary-active-border-color | @brand-color-active | -
--td-button-primary-bg-color | @brand-color | -
--td-button-primary-border-color | @brand-color | -
--td-button-primary-color | @text-color-anti | -
--td-button-primary-dashed-border-color | @button-primary-dashed-color | -
--td-button-primary-dashed-color | @brand-color | -
--td-button-primary-dashed-disabled-color | @brand-color-disabled | -
--td-button-primary-disabled-bg | @brand-color-disabled | -
--td-button-primary-disabled-border-color | @brand-color-disabled | -
--td-button-primary-disabled-color | @text-color-anti | -
--td-button-primary-outline-active-bg-color | @bg-color-container-active | -
--td-button-primary-outline-active-border-color | @brand-color-active | -
--td-button-primary-outline-border-color | @button-primary-outline-color | -
--td-button-primary-outline-color | @brand-color | -
--td-button-primary-outline-disabled-color | @brand-color-disabled | -
--td-button-primary-text-active-bg-color | @bg-color-container-active | -
--td-button-primary-text-color | @brand-color | -
--td-button-primary-text-disabled-color | @brand-color-disabled | -
--td-button-small-font-size | @font-size-base | -
--td-button-small-height | 64rpx | -
--td-button-small-icon-font-size | 36rpx | -
--td-button-small-padding-horizontal | 24rpx | -

View File

@ -1,101 +1 @@
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 { SuperComponent, wxComponent } from '../common/src/index';
import config from '../common/config';
import props from './props';
import { canIUseFormFieldButton } from '../common/version';
import { calcIcon } from '../common/utils';
const { prefix } = config;
const name = `${prefix}-button`;
let Button = class Button extends SuperComponent {
constructor() {
super(...arguments);
this.externalClasses = [`${prefix}-class`, `${prefix}-class-icon`, `${prefix}-class-loading`];
this.behaviors = canIUseFormFieldButton() ? ['wx://form-field-button'] : [];
this.properties = props;
this.options = {
multipleSlots: true,
};
this.data = {
prefix,
className: '',
classPrefix: name,
};
this.observers = {
'theme, size, plain, block, shape, disabled, loading, variant'() {
this.setClass();
},
icon(icon) {
this.setData({
_icon: calcIcon(icon, ''),
});
},
};
this.lifetimes = {
attached() {
this.setClass();
},
};
this.methods = {
setClass() {
const classList = [
name,
`${prefix}-class`,
`${name}--${this.data.variant || 'base'}`,
`${name}--${this.data.theme || 'default'}`,
`${name}--${this.data.shape || 'rectangle'}`,
`${name}--size-${this.data.size || 'medium'}`,
];
if (this.data.block) {
classList.push(`${name}--block`);
}
if (this.data.disabled) {
classList.push(`${name}--disabled`);
}
if (this.data.ghost) {
classList.push(`${name}--ghost`);
}
this.setData({
className: classList.join(' '),
});
},
getuserinfo(e) {
this.triggerEvent('getuserinfo', e.detail);
},
contact(e) {
this.triggerEvent('contact', e.detail);
},
getphonenumber(e) {
this.triggerEvent('getphonenumber', e.detail);
},
error(e) {
this.triggerEvent('error', e.detail);
},
opensetting(e) {
this.triggerEvent('opensetting', e.detail);
},
launchapp(e) {
this.triggerEvent('launchapp', e.detail);
},
chooseavatar(e) {
this.triggerEvent('chooseavatar', e.detail);
},
agreeprivacyauthorization(e) {
this.triggerEvent('agreeprivacyauthorization', e.detail);
},
handleTap(e) {
if (this.data.disabled || this.data.loading)
return;
this.triggerEvent('tap', e);
},
};
}
};
Button = __decorate([
wxComponent()
], Button);
export default Button;
import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./props";import{canIUseFormFieldButton}from"../common/version";import{calcIcon}from"../common/utils";const{prefix:prefix}=config,name=`${prefix}-button`;let Button=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-icon`,`${prefix}-class-loading`],this.behaviors=canIUseFormFieldButton()?["wx://form-field-button"]:[],this.properties=props,this.options={multipleSlots:!0},this.data={prefix:prefix,className:"",classPrefix:name},this.observers={"theme, size, plain, block, shape, disabled, loading, variant"(){this.setClass()},icon(t){this.setData({_icon:calcIcon(t,"")})}},this.lifetimes={attached(){this.setClass()}},this.methods={setClass(){const t=[name,`${prefix}-class`,`${name}--${this.data.variant||"base"}`,`${name}--${this.data.theme||"default"}`,`${name}--${this.data.shape||"rectangle"}`,`${name}--size-${this.data.size||"medium"}`];this.data.block&&t.push(`${name}--block`),this.data.disabled&&t.push(`${name}--disabled`),this.data.ghost&&t.push(`${name}--ghost`),this.setData({className:t.join(" ")})},getuserinfo(t){this.triggerEvent("getuserinfo",t.detail)},contact(t){this.triggerEvent("contact",t.detail)},getphonenumber(t){this.triggerEvent("getphonenumber",t.detail)},error(t){this.triggerEvent("error",t.detail)},opensetting(t){this.triggerEvent("opensetting",t.detail)},launchapp(t){this.triggerEvent("launchapp",t.detail)},chooseavatar(t){this.triggerEvent("chooseavatar",t.detail)},agreeprivacyauthorization(t){this.triggerEvent("agreeprivacyauthorization",t.detail)},handleTap(t){this.data.disabled||this.data.loading||this.triggerEvent("tap",t)}}}};Button=__decorate([wxComponent()],Button);export default Button;

View File

@ -1,8 +1 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"t-icon": "../icon/icon",
"t-loading": "../loading/loading"
}
}
{"component":true,"styleIsolation":"apply-shared","usingComponents":{"t-icon":"../icon/icon","t-loading":"../loading/loading"}}

View File

@ -1,61 +1 @@
<import src="../common/template/icon.wxml" />
<wxs src="../common/utils.wxs" module="_" />
<button
id="{{tId}}"
style="{{_._style([style, customStyle])}}"
data-custom="{{ customDataset }}"
class="class {{className}}"
form-type="{{disabled || loading ? '' : type}}"
open-type="{{disabled || loading ? '' : openType}}"
hover-stop-propagation="{{hoverStopPropagation}}"
hover-start-time="{{hoverStartTime}}"
hover-stay-time="{{hoverStayTime}}"
lang="{{lang}}"
session-from="{{sessionFrom}}"
hover-class="{{disabled || loading ? '' : (hoverClass || classPrefix + '--hover')}}"
send-message-title="{{sendMessageTitle}}"
send-message-path="{{sendMessagePath}}"
send-message-img="{{sendMessageImg}}"
app-parameter="{{appParameter}}"
show-message-card="{{showMessageCard}}"
catch:tap="handleTap"
bind:getuserinfo="getuserinfo"
bind:contact="contact"
bind:getphonenumber="getphonenumber"
bind:error="error"
bind:opensetting="opensetting"
bind:launchapp="launchapp"
bind:chooseavatar="chooseavatar"
bind:agreeprivacyauthorization="agreeprivacyauthorization"
aria-label="{{ariaLabel}}"
>
<template
wx:if="{{_icon}}"
is="icon"
data="{{tClass: classPrefix + '__icon ' + prefix + '-class-icon', ariaHidden: true, name: iconName, ..._icon}}"
/>
<t-loading
wx:if="{{loading}}"
delay="{{loadingProps.delay || 0}}"
duration="{{loadingProps.duration || 800}}"
indicator="{{loadingProps.indicator || true}}"
inheritColor="{{loadingProps.inheritColor || true}}"
layout="{{loadingProps.layout || 'horizontal'}}"
pause="{{loadingProps.pause || false}}"
progress="{{loadingProps.progress || 0}}"
reverse="{{loadingProps.reverse || false}}"
size="{{loadingProps.size || '40rpx'}}"
text="{{loadingProps.text || '' }}"
theme="{{loadingProps.theme || 'circular'}}"
loading
t-class="{{classPrefix}}__loading {{classPrefix}}__loading--wrapper"
t-class-indicator="{{classPrefix}}__loading--indicator {{prefix}}-class-loading"
/>
<view class="{{classPrefix}}__content">
<slot name="content" />
<block wx:if="{{content}}">{{content}}</block>
<slot />
</view>
<slot name="suffix" />
</button>
<import src="../common/template/icon.wxml"/><wxs src="../common/utils.wxs" module="_"/><button id="{{tId}}" style="{{_._style([style, customStyle])}}" data-custom="{{ customDataset }}" class="class {{className}}" form-type="{{disabled || loading ? '' : type}}" open-type="{{disabled || loading ? '' : openType}}" hover-stop-propagation="{{hoverStopPropagation}}" hover-start-time="{{hoverStartTime}}" hover-stay-time="{{hoverStayTime}}" lang="{{lang}}" session-from="{{sessionFrom}}" hover-class="{{disabled || loading ? '' : (hoverClass || classPrefix + '--hover')}}" send-message-title="{{sendMessageTitle}}" send-message-path="{{sendMessagePath}}" send-message-img="{{sendMessageImg}}" app-parameter="{{appParameter}}" show-message-card="{{showMessageCard}}" catch:tap="handleTap" bind:getuserinfo="getuserinfo" bind:contact="contact" bind:getphonenumber="getphonenumber" bind:error="error" bind:opensetting="opensetting" bind:launchapp="launchapp" bind:chooseavatar="chooseavatar" bind:agreeprivacyauthorization="agreeprivacyauthorization" aria-label="{{ariaLabel}}"><template wx:if="{{_icon}}" is="icon" data="{{tClass: classPrefix + '__icon ' + prefix + '-class-icon', ariaHidden: true, name: iconName, ..._icon}}"/><t-loading wx:if="{{loading}}" delay="{{loadingProps.delay || 0}}" duration="{{loadingProps.duration || 800}}" indicator="{{loadingProps.indicator || true}}" inheritColor="{{loadingProps.inheritColor || true}}" layout="{{loadingProps.layout || 'horizontal'}}" pause="{{loadingProps.pause || false}}" progress="{{loadingProps.progress || 0}}" reverse="{{loadingProps.reverse || false}}" size="{{loadingProps.size || '40rpx'}}" text="{{loadingProps.text || '' }}" theme="{{loadingProps.theme || 'circular'}}" loading t-class="{{classPrefix}}__loading {{classPrefix}}__loading--wrapper" t-class-indicator="{{classPrefix}}__loading--indicator {{prefix}}-class-loading"/><view class="{{classPrefix}}__content"><slot name="content"/><block wx:if="{{content}}">{{content}}</block><slot/></view><slot name="suffix"/></button>

File diff suppressed because one or more lines are too long

View File

@ -1,3 +1 @@
export * from './props';
export * from './type';
export * from './button';
export*from"./props";export*from"./type";export*from"./button";

View File

@ -1,108 +1 @@
const props = {
appParameter: {
type: String,
value: '',
},
block: {
type: Boolean,
value: false,
},
content: {
type: String,
},
customDataset: {
type: null,
},
disabled: {
type: null,
value: undefined,
},
ghost: {
type: Boolean,
value: false,
},
hoverClass: {
type: String,
value: '',
},
hoverStartTime: {
type: Number,
value: 20,
},
hoverStayTime: {
type: Number,
value: 70,
},
hoverStopPropagation: {
type: Boolean,
value: false,
},
icon: {
type: null,
},
lang: {
type: String,
},
loading: {
type: Boolean,
value: false,
},
loadingProps: {
type: Object,
},
openType: {
type: String,
},
phoneNumberNoQuotaToast: {
type: Boolean,
value: true,
},
sendMessageImg: {
type: String,
value: '截图',
},
sendMessagePath: {
type: String,
value: '当前分享路径',
},
sendMessageTitle: {
type: String,
value: '当前标题',
},
sessionFrom: {
type: String,
value: '',
},
shape: {
type: String,
value: 'rectangle',
},
showMessageCard: {
type: Boolean,
value: false,
},
size: {
type: String,
value: 'medium',
},
style: {
type: String,
value: '',
},
tId: {
type: String,
value: '',
},
theme: {
type: String,
value: 'default',
},
type: {
type: String,
},
variant: {
type: String,
value: 'base',
},
};
export default props;
const props={appParameter:{type:String,value:""},block:{type:Boolean,value:!1},content:{type:String},customDataset:{type:null},disabled:{type:null,value:void 0},ghost:{type:Boolean,value:!1},hoverClass:{type:String,value:""},hoverStartTime:{type:Number,value:20},hoverStayTime:{type:Number,value:70},hoverStopPropagation:{type:Boolean,value:!1},icon:{type:null},lang:{type:String},loading:{type:Boolean,value:!1},loadingProps:{type:Object},openType:{type:String},phoneNumberNoQuotaToast:{type:Boolean,value:!0},sendMessageImg:{type:String,value:"截图"},sendMessagePath:{type:String,value:"当前分享路径"},sendMessageTitle:{type:String,value:"当前标题"},sessionFrom:{type:String,value:""},shape:{type:String,value:"rectangle"},showMessageCard:{type:Boolean,value:!1},size:{type:String,value:"medium"},style:{type:String,value:""},tId:{type:String,value:""},theme:{type:String,value:"default"},type:{type:String},variant:{type:String,value:"base"}};export default props;

View File

@ -1 +1 @@
export {};
export{};

View File

@ -1,54 +0,0 @@
:: BASE_DOC ::
## API
### Calendar 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
auto-close | Boolean | true | `0.34.0` | N
confirm-btn | String / Object / Slot | '' | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts) | N
first-day-of-week | Number | 0 | \- | N
format | Function | - | Typescript`CalendarFormatType ` `type CalendarFormatType = (day: TDate) => TDate` `type TDateType = 'selected' \| 'disabled' \| 'start' \| 'centre' \| 'end' \| ''` `interface TDate { date: Date; day: number; type: TDateType; className?: string; prefix?: string; suffix?: string;}`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts) | N
locale-text | Object | - | Typescript`CalendarLocaleText` `interface CalendarLocaleText {title?: string; weekdays?: string[]; monthTitle?: string; months?: string[]; confirm?: string;}`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts) | N
max-date | Number | - | \- | N
min-date | Number | - | \- | N
switch-mode | String | none | options: none/month/year-month | N
title | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
type | String | 'single' | options: single/multiple/range | N
use-popup | Boolean | true | `0.32.0` | N
using-custom-navbar | Boolean | false | \- | N
value | Number / Array | - | Typescript`number \| number[]` | N
default-value | Number / Array | undefined | uncontrolled property。Typescript`number \| number[]` | N
visible | Boolean | false | \- | N
### Calendar Events
name | params | description
-- | -- | --
change | `(value: timestamp)` | `0.28.0`
close | `(trigger: CalendarTrigger)` | `0.34.0`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts)。<br/>`type CalendarTrigger = 'close-btn' \| 'confirm-btn' \| 'overlay'`<br/>
confirm | `(value: timestamp)` | \-
panel-change | `(year: number; month: number)` | `1.8.4`
scroll | `({scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY})` | `1.4.6`。triggered when scrolling
select | `(value: timestamp)` | `0.28.0`
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-calendar-active-color | @brand-color | -
--td-calendar-bg-color | @bg-color-container | -
--td-calendar-days-color | @text-color-secondary | -
--td-calendar-item-centre-color | @brand-color-light | -
--td-calendar-item-disabled-color | @text-color-disabled | -
--td-calendar-item-suffix-color | @text-color-placeholder | -
--td-calendar-radius | 24rpx | -
--td-calendar-selected-color | @text-color-anti | -
--td-calendar-switch-mode-icon-color | @brand-color | -
--td-calendar-switch-mode-icon-disabled-color | @brand-color-disabled | -
--td-calendar-title-color | @text-color-primary | -
--td-calendar-title-font-size | 18px | -

View File

@ -1,120 +0,0 @@
---
title: Calendar 日历
description: 按照日历形式展示数据或日期的容器。
spline: form
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
<svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
<path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
</svg>
该组件于 0.22.0 版本上线,请留意版本。
</div>
## 引入
全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-calendar": "tdesign-miniprogram/calendar/calendar"
}
```
## 代码演示
<a href="https://developers.weixin.qq.com/s/jb5E2imk7QSV" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后依次执行npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
</blockquote>
### 组件类型
#### 单个选择日历
{{ base }}
#### 多个选择日历
{{ multiple }}
#### 带单行/双行描述的日历
{{ custom-text }}
#### 带翻页功能的日历
{{ switch-mode }}
#### 可选择区间日期的日历
{{ range }}
### 组件样式
#### 国际化
{{ local-text }}
#### 含不可选的日历
{{ custom-range }}
#### 不使用 Popup
{{ without-popup }}
## API
### Calendar Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N
auto-close | Boolean | true | `0.34.0`。自动关闭;在点击关闭按钮、确认按钮、遮罩层时自动关闭,不需要手动设置 visible | N
confirm-btn | String / Object / Slot | '' | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串,则表示自定义按钮文本,值类型为 Object 则表示透传 Button 组件属性。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts) | N
first-day-of-week | Number | 0 | 第一天从星期几开始,默认 0 = 周日 | N
format | Function | - | 用于格式化日期的函数。TS 类型:`CalendarFormatType ` `type CalendarFormatType = (day: TDate) => TDate` `type TDateType = 'selected' \| 'disabled' \| 'start' \| 'centre' \| 'end' \| ''` `interface TDate { date: Date; day: number; type: TDateType; className?: string; prefix?: string; suffix?: string;}`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts) | N
locale-text | Object | - | 国际化文案。TS 类型:`CalendarLocaleText` `interface CalendarLocaleText {title?: string; weekdays?: string[]; monthTitle?: string; months?: string[]; confirm?: string;}`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts) | N
max-date | Number | - | 最大可选的日期,不传则默认半年后 | N
min-date | Number | - | 最小可选的日期,不传则默认今天 | N
switch-mode | String | none | 切换模式。 `none` 表示水平方向平铺展示所有月份; `month` 表示支持按月切换, `year-month` 表示既按年切换也支持按月切换。可选项none/month/year-month | N
title | String / Slot | - | 标题,不传默认为“请选择日期”。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
type | String | 'single' | 日历的选择类型single = 单选multiple = 多选; range = 区间选择。可选项single/multiple/range | N
use-popup | Boolean | true | `0.32.0`。是否使用弹出层包裹日历 | N
using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
value | Number / Array | - | 当前选择的日期,不传则选用 minDate 属性值或今天优先级minDate > today。当 type = multiple 或 range 时传入数组。TS 类型:`number \| number[]` | N
default-value | Number / Array | undefined | 当前选择的日期,不传则选用 minDate 属性值或今天优先级minDate > today。当 type = multiple 或 range 时传入数组。非受控属性。TS 类型:`number \| number[]` | N
visible | Boolean | false | 是否显示日历;`usePopup` 为 true 时有效 | N
### Calendar Events
名称 | 参数 | 描述
-- | -- | --
change | `(value: timestamp)` | `0.28.0`。不显示 confirm-btn 时,完成选择时触发(暂不支持 type = multiple
close | `(trigger: CalendarTrigger)` | `0.34.0`。关闭按钮时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts)。<br/>`type CalendarTrigger = 'close-btn' \| 'confirm-btn' \| 'overlay'`<br/>
confirm | `(value: timestamp)` | 点击确认按钮时触发
panel-change | `(year: number; month: number)` | `1.8.4`。切换月或年时触发switch-mode 不为 none 时有效)
scroll | `({scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY})` | `1.4.6`。滚动时触发
select | `(value: timestamp)` | `0.28.0`。点击日期时触发
### CSS Variables
组件提供了下列 CSS 变量,可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-calendar-active-color | @brand-color | 选中项背景色
--td-calendar-bg-color | @bg-color-container | -
--td-calendar-days-color | @text-color-secondary | -
--td-calendar-item-centre-color | @brand-color-light | -
--td-calendar-item-disabled-color | @text-color-disabled | -
--td-calendar-item-suffix-color | @text-color-placeholder | -
--td-calendar-radius | 24rpx | -
--td-calendar-selected-color | @text-color-anti | -
--td-calendar-switch-mode-icon-color | @brand-color | -
--td-calendar-switch-mode-icon-disabled-color | @brand-color-disabled | -
--td-calendar-title-color | @text-color-primary | -
--td-calendar-title-font-size | 18px | -

View File

@ -1,45 +1 @@
<wxs src="../common/utils.wxs" module="_" />
<template name="calendar-header">
<view class="{{class}} {{classPrefix}} {{switchMode !== 'none' ? classPrefix + '__with-action' : ''}}" id="{{tId}}">
<view class="{{classPrefix}}__action" wx:if="{{switchMode !== 'none'}}">
<view
wx:if="{{switchMode === 'year-month'}}"
class="{{_.cls(classPrefix + '__icon', [['disabled', preYearBtnDisable]])}}"
data-disabled="{{preYearBtnDisable}}"
data-type="pre-year"
bindtap="handleSwitchModeChange"
>
<t-icon name="chevron-left-double" />
</view>
<view
class="{{_.cls(classPrefix + '__icon', [['disabled', prevMonthBtnDisable]])}}"
data-disabled="{{prevMonthBtnDisable}}"
data-type="pre-month"
bindtap="handleSwitchModeChange"
>
<t-icon name="chevron-left" />
</view>
</view>
<view class="{{classPrefix}}__title"> {{ title }}</view>
<view class="{{classPrefix}}__action" wx:if="{{switchMode !== 'none'}}">
<view
class="{{_.cls(classPrefix + '__icon', [['disabled', nextMonthBtnDisable]])}}"
data-disabled="{{nextMonthBtnDisable}}"
data-type="next-month"
bindtap="handleSwitchModeChange"
>
<t-icon name="chevron-right" />
</view>
<view
wx:if="{{switchMode === 'year-month'}}"
class="{{_.cls(classPrefix + '__icon', [['disabled', nextYearBtnDisable]])}}"
data-disabled="{{nextYearBtnDisable}}"
data-type="next-year"
bindtap="handleSwitchModeChange"
>
<t-icon name="chevron-right-double" />
</view>
</view>
</view>
</template>
<wxs src="../common/utils.wxs" module="_"/><template name="calendar-header"><view class="{{class}} {{classPrefix}} {{switchMode !== 'none' ? classPrefix + '__with-action' : ''}}" id="{{tId}}"><view class="{{classPrefix}}__action" wx:if="{{switchMode !== 'none'}}"><view wx:if="{{switchMode === 'year-month'}}" class="{{_.cls(classPrefix + '__icon', [['disabled', preYearBtnDisable]])}}" data-disabled="{{preYearBtnDisable}}" data-type="pre-year" bindtap="handleSwitchModeChange"><t-icon name="chevron-left-double"/></view><view class="{{_.cls(classPrefix + '__icon', [['disabled', prevMonthBtnDisable]])}}" data-disabled="{{prevMonthBtnDisable}}" data-type="pre-month" bindtap="handleSwitchModeChange"><t-icon name="chevron-left"/></view></view><view class="{{classPrefix}}__title">{{ title }}</view><view class="{{classPrefix}}__action" wx:if="{{switchMode !== 'none'}}"><view class="{{_.cls(classPrefix + '__icon', [['disabled', nextMonthBtnDisable]])}}" data-disabled="{{nextMonthBtnDisable}}" data-type="next-month" bindtap="handleSwitchModeChange"><t-icon name="chevron-right"/></view><view wx:if="{{switchMode === 'year-month'}}" class="{{_.cls(classPrefix + '__icon', [['disabled', nextYearBtnDisable]])}}" data-disabled="{{nextYearBtnDisable}}" data-type="next-year" bindtap="handleSwitchModeChange"><t-icon name="chevron-right-double"/></view></view></view></template>

View File

@ -47,6 +47,7 @@ export default class Calendar extends SuperComponent {
month: number;
};
updateActionButton(value: Date): void;
updateCurrentMonth(): void;
calcCurrentMonth(newValue?: any): void;
calcMonths(): void;
close(trigger: any): void;

File diff suppressed because one or more lines are too long

View File

@ -1,9 +1 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"t-popup": "../popup/popup",
"t-button": "../button/button",
"t-icon": "../icon/icon"
}
}
{"component":true,"styleIsolation":"apply-shared","usingComponents":{"t-popup":"../popup/popup","t-button":"../button/button","t-icon":"../icon/icon"}}

View File

@ -1,16 +1 @@
<wxs src="./calendar.wxs" module="_this" />
<wxs src="../common/utils.wxs" module="_" />
<t-popup
wx:if="{{usePopup}}"
class="class"
visible="{{visible}}"
usingCustomNavbar="{{usingCustomNavbar}}"
bind:visible-change="onVisibleChange"
placement="bottom"
>
<include src="./template.wxml" />
</t-popup>
<block wx:else>
<include src="./template.wxml" />
</block>
<wxs src="./calendar.wxs" module="_this"/><wxs src="../common/utils.wxs" module="_"/><t-popup wx:if="{{usePopup}}" class="class" visible="{{visible}}" usingCustomNavbar="{{usingCustomNavbar}}" bind:visible-change="onVisibleChange" placement="bottom"><include src="./template.wxml"/></t-popup><block wx:else><include src="./template.wxml"/></block>

File diff suppressed because one or more lines are too long

View File

@ -1,2 +1 @@
export * from './type';
export * from './calendar';
export*from"./type";export*from"./calendar";

View File

@ -1,57 +1 @@
const props = {
autoClose: {
type: Boolean,
value: true,
},
confirmBtn: {
type: null,
value: '',
},
firstDayOfWeek: {
type: Number,
value: 0,
},
format: {
type: null,
},
localeText: {
type: Object,
},
maxDate: {
type: Number,
},
minDate: {
type: Number,
},
switchMode: {
type: String,
value: 'none',
},
title: {
type: String,
},
type: {
type: String,
value: 'single',
},
usePopup: {
type: Boolean,
value: true,
},
usingCustomNavbar: {
type: Boolean,
value: false,
},
value: {
type: null,
value: null,
},
defaultValue: {
type: null,
},
visible: {
type: Boolean,
value: false,
},
};
export default props;
const props={autoClose:{type:Boolean,value:!0},confirmBtn:{type:null,value:""},firstDayOfWeek:{type:Number,value:0},format:{type:null},localeText:{type:Object},maxDate:{type:Number},minDate:{type:Number},switchMode:{type:String,value:"none"},title:{type:String},type:{type:String,value:"single"},usePopup:{type:Boolean,value:!0},usingCustomNavbar:{type:Boolean,value:!1},value:{type:null,value:null},defaultValue:{type:null},visible:{type:Boolean,value:!1}};export default props;

View File

@ -1,80 +1 @@
<wxs src="./calendar.wxs" module="_this" />
<wxs src="../common/utils.wxs" module="_" />
<import src="../common/template/button.wxml" />
<import src="./calendar-header.wxml" />
<view
class="{{_.cls(classPrefix, [['popup', usePopup]])}} {{classPrefix}}-switch-mode--{{switchMode}} class {{prefix}}-class"
style="{{_._style([style, customStyle])}}"
>
<view class="{{classPrefix}}__title" tabindex="0">
<slot name="title" />
<text wx:if="{{title || realLocalText.title}}">{{ title || realLocalText.title }}</text>
</view>
<t-icon
wx:if="{{usePopup}}"
name="close"
class="{{classPrefix}}__close-btn"
size="48rpx"
aria-role="button"
aria-label="关闭"
bind:tap="handleClose"
/>
<template
wx:if="{{switchMode !== 'none'}}"
is="calendar-header"
data="{{ classPrefix: classPrefix + '-header', switchMode, ...actionButtons, title: _this.getMonthTitle(currentMonth[0].year, realLocalText.months[currentMonth[0].month], realLocalText.monthTitle)}}"
/>
<view aria-hidden class="{{classPrefix}}__days">
<view wx:for="{{days}}" wx:key="index" class="{{classPrefix}}__days-item">{{ item }}</view>
</view>
<scroll-view
class="{{classPrefix}}__months"
scroll-into-view="{{scrollIntoView}}"
scroll-y
enhanced
show-scrollbar="{{false}}"
bindscroll="onScroll"
>
<block wx:for="{{ switchMode === 'none' ? months : currentMonth}}" wx:key="index">
<template
wx:if="{{switchMode === 'none'}}"
is="calendar-header"
data="{{class: classPrefix + '__month', classPrefix: classPrefix + '-header', tId: 'year_' + item.year + '_month_' + item.month, switchMode, ...actionButtons, title: _this.getMonthTitle(item.year, realLocalText.months[item.month], realLocalText.monthTitle) }}"
/>
<view class="{{classPrefix}}__dates">
<view wx:for="{{(item.weekdayOfFirstDay - firstDayOfWeek + 7) % 7}}" wx:key="index" />
<block wx:for="{{item.months}}" wx:for-index="dateIndex" wx:for-item="dateItem" wx:key="dateIndex">
<view
class="{{classPrefix}}__dates-item {{dateItem.className}} {{classPrefix}}__dates-item--{{dateItem.type}}"
data-year="{{item.year}}"
data-month="{{item.month}}"
data-date="{{dateItem}}"
aria-role="button"
aria-label="{{_this.getDateLabel(item, dateItem)}}"
aria-disabled="{{dateItem.type === 'disabled'}}"
bind:tap="handleSelect"
>
<view wx:if="{{dateItem.prefix}}" class="{{classPrefix}}__dates-item-prefix">{{ dateItem.prefix }}</view>
{{ dateItem.day }}
<view
wx:if="{{dateItem.suffix}}"
class="{{classPrefix}}__dates-item-suffix {{classPrefix}}__dates-item-suffix--{{dateItem.type}}"
>
{{ dateItem.suffix }}
</view>
</view>
</block>
</view>
</block>
</scroll-view>
<view wx:if="{{innerConfirmBtn != null && usePopup}}" class="{{classPrefix}}__footer">
<slot wx:if="{{innerConfirmBtn === 'slot'}}" name="confirm-btn" />
<block wx:elif="{{innerConfirmBtn}}">
<template
is="button"
data="{{ block: true, theme: 'primary', rootClass: 't-calendar__confirm-btn', content: realLocalText.confirm, ...innerConfirmBtn }}"
/>
</block>
</view>
</view>
<wxs src="./calendar.wxs" module="_this"/><wxs src="../common/utils.wxs" module="_"/><import src="../common/template/button.wxml"/><import src="./calendar-header.wxml"/><view class="{{_.cls(classPrefix, [['popup', usePopup]])}} {{classPrefix}}-switch-mode--{{switchMode}} class {{prefix}}-class" style="{{_._style([style, customStyle])}}"><view class="{{classPrefix}}__title" tabindex="0"><slot name="title"/><text wx:if="{{title || realLocalText.title}}">{{ title || realLocalText.title }}</text></view><t-icon wx:if="{{usePopup}}" name="close" class="{{classPrefix}}__close-btn" size="48rpx" aria-role="button" aria-label="关闭" bind:tap="handleClose"/><template wx:if="{{switchMode !== 'none'}}" is="calendar-header" data="{{ classPrefix: classPrefix + '-header', switchMode, ...actionButtons, title: _this.getMonthTitle(currentMonth[0].year, realLocalText.months[currentMonth[0].month], realLocalText.monthTitle)}}"/><view aria-hidden class="{{classPrefix}}__days"><view wx:for="{{days}}" wx:key="index" class="{{classPrefix}}__days-item">{{ item }}</view></view><scroll-view class="{{classPrefix}}__months" scroll-into-view="{{scrollIntoView}}" scroll-y enhanced show-scrollbar="{{false}}" bindscroll="onScroll"><block wx:for="{{ switchMode === 'none' ? months : currentMonth}}" wx:key="index"><template wx:if="{{switchMode === 'none'}}" is="calendar-header" data="{{class: classPrefix + '__month', classPrefix: classPrefix + '-header', tId: 'year_' + item.year + '_month_' + item.month, switchMode, ...actionButtons, title: _this.getMonthTitle(item.year, realLocalText.months[item.month], realLocalText.monthTitle) }}"/><view class="{{classPrefix}}__dates"><view wx:for="{{(item.weekdayOfFirstDay - firstDayOfWeek + 7) % 7}}" wx:key="index"/><block wx:for="{{item.months}}" wx:for-index="dateIndex" wx:for-item="dateItem" wx:key="dateIndex"><view class="{{classPrefix}}__dates-item {{dateItem.className}} {{classPrefix}}__dates-item--{{dateItem.type}}" data-year="{{item.year}}" data-month="{{item.month}}" data-date="{{dateItem}}" aria-role="button" aria-label="{{_this.getDateLabel(item, dateItem)}}" aria-disabled="{{dateItem.type === 'disabled'}}" bind:tap="handleSelect"><view wx:if="{{dateItem.prefix}}" class="{{classPrefix}}__dates-item-prefix">{{ dateItem.prefix }}</view>{{ dateItem.day }}<view wx:if="{{dateItem.suffix}}" class="{{classPrefix}}__dates-item-suffix {{classPrefix}}__dates-item-suffix--{{dateItem.type}}">{{ dateItem.suffix }}</view></view></block></view></block></scroll-view><view wx:if="{{innerConfirmBtn != null && usePopup}}" class="{{classPrefix}}__footer"><slot wx:if="{{innerConfirmBtn === 'slot'}}" name="confirm-btn"/><block wx:elif="{{innerConfirmBtn}}"><template is="button" data="{{ block: true, theme: 'primary', rootClass: 't-calendar__confirm-btn', content: realLocalText.confirm, ...innerConfirmBtn }}"/></block></view></view>

View File

@ -1 +1 @@
export {};
export{};

View File

@ -1,16 +1 @@
export function getMonthByOffset(date, offset) {
const _date = new Date(date);
_date.setMonth(_date.getMonth() + offset);
_date.setDate(1);
return _date;
}
export function getYearByOffset(date, offset) {
const _date = new Date(date);
_date.setFullYear(_date.getFullYear() + offset);
_date.setDate(1);
return _date;
}
export const getPrevMonth = (date) => getMonthByOffset(date, -1);
export const getNextMonth = (date) => getMonthByOffset(date, 1);
export const getPrevYear = (date) => getYearByOffset(date, -1);
export const getNextYear = (date) => getYearByOffset(date, 1);
export function getMonthByOffset(t,e){const n=new Date(t);return n.setMonth(n.getMonth()+e),n.setDate(1),n}export function getYearByOffset(t,e){const n=new Date(t);return n.setFullYear(n.getFullYear()+e),n.setDate(1),n}export const getPrevMonth=t=>getMonthByOffset(t,-1);export const getNextMonth=t=>getMonthByOffset(t,1);export const getPrevYear=t=>getYearByOffset(t,-1);export const getNextYear=t=>getYearByOffset(t,1);

View File

@ -1,49 +0,0 @@
:: BASE_DOC ::
## API
### Cascader 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
check-strictly | Boolean | false | \- | N
close-btn | Boolean / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
keys | Object | - | Typescript`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
options | Array | [] | Typescript`Array<CascaderOption>` | N
placeholder | String | 选择选项 | \- | N
sub-titles | Array | [] | Typescript`Array<string>` | N
theme | String | step | options: step/tab | N
title | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
value | String / Number | null | \- | N
default-value | String / Number | undefined | uncontrolled property | N
visible | Boolean | false | \- | N
### Cascader Events
name | params | description
-- | -- | --
change | `(value: string \| number, selectedOptions: string[])` | `1.0.1`
close | `(trigger: CascaderTriggerSource)` | `1.0.1`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/cascader/type.ts)。<br/>`type CascaderTriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/>
pick | `(value: string \| number, label: string, index: number, level: number)` | `1.0.1`
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-cascader-active-color | @brand-color | -
--td-cascader-bg-color | @bg-color-container | -
--td-cascader-border-color | @component-stroke | -
--td-cascader-content-height | 78vh | -
--td-cascader-disabled-color | @text-color-disabled | -
--td-cascader-options-height | calc(100% - @cascader-step-height) | -
--td-cascader-options-title-color | @text-color-placeholder | -
--td-cascader-step-arrow-color | @text-color-placeholder | -
--td-cascader-step-dot-size | 16rpx | -
--td-cascader-step-height | 88rpx | -
--td-cascader-title-color | @text-color-primary | -
--td-cascader-title-height | 26rpx | -
--td-cascader-title-padding | @spacer-2 | -
--td-cascder-title-font-size | 36rpx | -

View File

@ -1,101 +0,0 @@
---
title: Cascader 级联选择器
description: 级联选择器适用于有清晰层级结构的数据集合,用户可以通过逐级查看并选择。
spline: form
isComponent: true
---
<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
<svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
<path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
</svg>
该组件于 0.23.0 版本上线,请留意版本。
</div>
## 引入
全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-cascader": "tdesign-miniprogram/cascader/cascader"
}
```
## 代码演示
<a href="https://developers.weixin.qq.com/s/i75I6imI7TSh" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后依次执行npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
</blockquote>
### 基础用法
{{ base }}
### 选项卡风格
{{ theme-tab }}
### 进阶
#### 带初始值
{{ with-value }}
#### 自定义 keys
{{ keys }}
#### 使用次级标题
{{ with-title }}
## API
### Cascader Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N
check-strictly | Boolean | false | 父子节点选中状态不再关联,可各自选中或取消 | N
close-btn | Boolean / Slot | true | 关闭按钮。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型:`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
options | Array | [] | 可选项数据源。TS 类型:`Array<CascaderOption>` | N
placeholder | String | 选择选项 | 未选中时的提示文案 | N
sub-titles | Array | [] | 每级展示的次标题。TS 类型:`Array<string>` | N
theme | String | step | 展示风格。可选项step/tab | N
title | String / Slot | - | 标题。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
value | String / Number | null | 选项值 | N
default-value | String / Number | undefined | 选项值。非受控属性 | N
visible | Boolean | false | 是否展示 | N
### Cascader Events
名称 | 参数 | 描述
-- | -- | --
change | `(value: string \| number, selectedOptions: string[])` | `1.0.1`。值发生变更时触发
close | `(trigger: CascaderTriggerSource)` | `1.0.1`。关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/cascader/type.ts)。<br/>`type CascaderTriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/>
pick | `(value: string \| number, label: string, index: number, level: number)` | `1.0.1`。选择后触发
### CSS Variables
组件提供了下列 CSS 变量,可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-cascader-active-color | @brand-color | -
--td-cascader-bg-color | @bg-color-container | -
--td-cascader-border-color | @component-stroke | -
--td-cascader-content-height | 78vh | -
--td-cascader-disabled-color | @text-color-disabled | -
--td-cascader-options-height | calc(100% - @cascader-step-height) | -
--td-cascader-options-title-color | @text-color-placeholder | -
--td-cascader-step-arrow-color | @text-color-placeholder | -
--td-cascader-step-dot-size | 16rpx | -
--td-cascader-step-height | 88rpx | -
--td-cascader-title-color | @text-color-primary | -
--td-cascader-title-height | 26rpx | -
--td-cascader-title-padding | @spacer-2 | -
--td-cascder-title-font-size | 36rpx | -

File diff suppressed because one or more lines are too long

View File

@ -1,11 +1 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"t-icon": "../icon/icon",
"t-popup": "../popup/popup",
"t-tabs": "../tabs/tabs",
"t-tab-panel": "../tab-panel/tab-panel",
"t-radio-group": "../radio-group/radio-group"
}
}
{"component":true,"styleIsolation":"apply-shared","usingComponents":{"t-icon":"../icon/icon","t-popup":"../popup/popup","t-tabs":"../tabs/tabs","t-tab-panel":"../tab-panel/tab-panel","t-radio-group":"../radio-group/radio-group"}}

View File

@ -1,66 +1 @@
<wxs src="../common/utils.wxs" module="_" />
<t-popup class="class" visible="{{visible}}" placement="bottom" bind:visible-change="onVisibleChange">
<view style="{{_._style([style, customStyle])}}" class="{{name}}">
<view class="{{name}}__title">
<slot name="title" />
{{title}}
</view>
<view class="{{name}}__close-btn" bind:tap="onClose">
<slot name="close-btn" />
<t-icon wx:if="{{closeBtn}}" size="48rpx" name="close" />
</view>
<view class="{{name}}__content">
<block wx:if="{{steps && steps.length}}">
<view wx:if="{{theme == 'step'}}" class="{{name}}__steps">
<view wx:for="{{steps}}" wx:key="index" class="{{name}}__step" bind:tap="onStepClick" data-index="{{index}}">
<view
class="{{name}}__step-dot {{name}}__step-dot--{{item !== placeholder ? 'active' : ''}} {{name}}__step-dot--{{index === steps.length - 1 ? 'last' : ''}}"
></view>
<view class="{{name}}__step-label {{name}}__step-label--{{index === stepIndex ? 'active' : ''}}">
{{ item }}
</view>
<t-icon name="chevron-right" size="44rpx" t-class="{{name}}__step-arrow" />
</view>
</view>
<block wx:if="{{theme == 'tab'}}">
<t-tabs id="tabs" value="{{stepIndex}}" bind:change="onTabChange" space-evenly="{{false}}">
<t-tab-panel wx:for="{{steps}}" wx:key="index" value="{{index}}" label="{{item}}" />
</t-tabs>
</block>
</block>
<view wx:if="{{ subTitles && subTitles[stepIndex] }}" class="{{name}}__options-title"
>{{subTitles[stepIndex]}}</view
>
<view
class="{{name}}__options-container"
style="width: {{items.length + 1}}00vw; transform: translateX(-{{stepIndex}}00vw)"
>
<scroll-view
wx:for="{{items}}"
wx:for-item="options"
wx:key="index"
class="{{name}}__options"
scroll-y
scroll-top="{{scrollTopList[index]}}"
type="list"
style="height: {{_optionsHeight}}px"
>
<view class="cascader-radio-group-{{index}}">
<t-radio-group
value="{{selectedValue[index]}}"
keys="{{keys}}"
options="{{options}}"
bind:change="handleSelect"
data-level="{{index}}"
placement="right"
icon="line"
borderless
>
</t-radio-group>
</view>
</scroll-view>
</view>
</view>
</view>
</t-popup>
<wxs src="../common/utils.wxs" module="_"/><t-popup class="class" visible="{{visible}}" placement="bottom" bind:visible-change="onVisibleChange"><view style="{{_._style([style, customStyle])}}" class="{{name}}"><view class="{{name}}__title"><slot name="title"/>{{title}}</view><view class="{{name}}__close-btn" bind:tap="onClose"><slot name="close-btn"/><t-icon wx:if="{{closeBtn}}" size="48rpx" name="close"/></view><slot name="header"/><view class="{{name}}__content"><block wx:if="{{steps && steps.length}}"><view wx:if="{{theme == 'step'}}" class="{{name}}__steps"><view wx:for="{{steps}}" wx:key="index" class="{{name}}__step" bind:tap="onStepClick" data-index="{{index}}"><view class="{{name}}__step-dot {{name}}__step-dot--{{item !== placeholder ? 'active' : ''}} {{name}}__step-dot--{{index === steps.length - 1 ? 'last' : ''}}"></view><view class="{{name}}__step-label {{name}}__step-label--{{index === stepIndex ? 'active' : ''}}">{{ item }}</view><t-icon name="chevron-right" size="44rpx" t-class="{{name}}__step-arrow"/></view></view><block wx:if="{{theme == 'tab'}}"><t-tabs id="tabs" value="{{stepIndex}}" bind:change="onTabChange" space-evenly="{{false}}"><t-tab-panel wx:for="{{steps}}" wx:key="index" value="{{index}}" label="{{item}}"/></t-tabs></block></block><view wx:if="{{ subTitles && subTitles[stepIndex] }}" class="{{name}}__options-title">{{subTitles[stepIndex]}}</view><view class="{{name}}__options-container" style="width: {{items.length + 1}}00vw; transform: translateX(-{{stepIndex}}00vw)"><scroll-view wx:for="{{items}}" wx:for-item="options" wx:key="index" class="{{name}}__options" scroll-y scroll-top="{{scrollTopList[index]}}" type="list" style="height: {{_optionsHeight}}px"><view class="cascader-radio-group-{{index}}"><t-radio-group value="{{selectedValue[index]}}" keys="{{keys}}" options="{{options}}" bind:change="handleSelect" data-level="{{index}}" placement="right" icon="line" borderless></t-radio-group></view></scroll-view></view></view></view></t-popup>

View File

@ -1,132 +1 @@
.t-float-left {
float: left;
}
.t-float-right {
float: right;
}
@keyframes tdesign-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.hotspot-expanded.relative {
position: relative;
}
.hotspot-expanded::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transform: scale(1.5);
}
.t-cascader {
display: flex;
flex-direction: column;
background-color: var(--td-cascader-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
color: var(--td-cascader-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
border-radius: var(--td-radius-extra-large, 24rpx) var(--td-radius-extra-large, 24rpx) 0 0;
--td-radio-icon-checked-color: var(--td-cascader-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
--td-tab-item-active-color: var(--td-cascader-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
--td-tab-track-color: var(--td-cascader-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-cascader__close-btn {
right: 32rpx;
top: 24rpx;
position: absolute;
}
.t-cascader__title {
position: relative;
font-weight: 700;
text-align: center;
line-height: var(--td-cascader-title-height, 26rpx);
padding: var(--td-cascader-title-padding, var(--td-spacer-2, 32rpx));
font-size: var(--td-cascder-title-font-size, 36rpx);
}
.t-cascader__content {
width: 100%;
height: var(--td-cascader-content-height, 78vh);
display: flex;
flex-direction: column;
}
.t-cascader__options {
width: 100vw;
}
.t-cascader__options-title {
color: var(--td-cascader-options-title-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
font-size: var(--td-font-size-base, 28rpx);
line-height: 44rpx;
padding-top: 40rpx;
padding-left: var(--td-spacer-2, 32rpx);
box-sizing: border-box;
}
.t-cascader__options-container {
flex: 1;
display: flex;
transition: all ease 0.3s;
}
.t-cascader__step {
display: flex;
align-items: center;
height: var(--td-cascader-step-height, 88rpx);
}
.t-cascader__steps {
padding: 0 32rpx 10rpx;
position: relative;
}
.t-cascader__steps::after {
content: '';
display: block;
position: absolute;
top: unset;
bottom: 0;
left: unset;
right: unset;
background-color: var(--td-cascader-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7)));
}
.t-cascader__steps::after {
height: 1px;
left: 0;
right: 0;
transform: scaleY(0.5);
}
.t-cascader__step-dot {
position: relative;
width: var(--td-cascader-step-dot-size, 16rpx);
height: var(--td-cascader-step-dot-size, 16rpx);
border-radius: 50%;
border: 2rpx solid var(--td-cascader-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
box-sizing: border-box;
}
.t-cascader__step-dot:not(.t-cascader__step-dot--last)::after {
content: '';
display: block;
position: absolute;
left: 50%;
top: calc(var(--td-cascader-step-dot-size, 16rpx) + 14rpx);
height: 36rpx;
width: 2rpx;
background: var(--td-cascader-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
transform: translateX(-50%);
}
.t-cascader__step-dot--active {
background: var(--td-cascader-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
border-color: var(--td-cascader-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-cascader__step-label {
padding-left: var(--td-spacer-2, 32rpx);
font-size: var(--td-font-size-m, 32rpx);
}
.t-cascader__step-label--active {
color: var(--td-cascader-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
font-weight: 600;
}
.t-cascader__step-arrow {
color: var(--td-cascader-step-arrow-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
margin-left: auto;
}
@import '../common/style/index.wxss';.t-cascader{display:flex;flex-direction:column;background-color:var(--td-cascader-bg-color,var(--td-bg-color-container,var(--td-font-white-1,#fff)));color:var(--td-cascader-title-color,var(--td-text-color-primary,var(--td-font-gray-1,rgba(0,0,0,.9))));border-radius:var(--td-radius-extra-large,24rpx) var(--td-radius-extra-large,24rpx) 0 0;--td-radio-icon-checked-color:var(--td-cascader-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));--td-tab-item-active-color:var(--td-cascader-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));--td-tab-track-color:var(--td-cascader-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)))}.t-cascader__close-btn{right:32rpx;top:24rpx;position:absolute}.t-cascader__title{position:relative;font-weight:700;text-align:center;line-height:var(--td-cascader-title-height,26rpx);padding:var(--td-cascader-title-padding,var(--td-spacer-2,32rpx));font-size:var(--td-cascder-title-font-size,36rpx)}.t-cascader__content{width:100%;height:var(--td-cascader-content-height,78vh);display:flex;flex-direction:column}.t-cascader__options{width:100vw}.t-cascader__options-title{color:var(--td-cascader-options-title-color,var(--td-text-color-placeholder,var(--td-font-gray-3,rgba(0,0,0,.4))));font-size:var(--td-font-size-base,28rpx);line-height:44rpx;padding-top:40rpx;padding-left:var(--td-spacer-2,32rpx);box-sizing:border-box}.t-cascader__options-container{flex:1;display:flex;transition:all ease .3s}.t-cascader__step{display:flex;align-items:center;height:var(--td-cascader-step-height,88rpx)}.t-cascader__steps{padding:0 32rpx 10rpx;position:relative}.t-cascader__steps::after{content:'';display:block;position:absolute;top:unset;bottom:0;left:unset;right:unset;background-color:var(--td-cascader-border-color,var(--td-component-stroke,var(--td-gray-color-3,#e7e7e7)))}.t-cascader__steps::after{height:1px;left:0;right:0;transform:scaleY(.5)}.t-cascader__step-dot{position:relative;width:var(--td-cascader-step-dot-size,16rpx);height:var(--td-cascader-step-dot-size,16rpx);border-radius:50%;border:2rpx solid var(--td-cascader-active-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));box-sizing:border-box}.t-cascader__step-dot:not(.t-cascader__step-dot--last)::after{content:'';display:block;position:absolute;left:50%;top:calc(var(--td-cascader-step-dot-size,16rpx) + 14rpx);height:36rpx;width:2rpx;background:var(--td-cascader-active-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));transform:translateX(-50%)}.t-cascader__step-dot--active{background:var(--td-cascader-active-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));border-color:var(--td-cascader-active-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)))}.t-cascader__step-label{padding-left:var(--td-spacer-2,32rpx);font-size:var(--td-font-size-m,32rpx)}.t-cascader__step-label--active{color:var(--td-cascader-active-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));font-weight:600}.t-cascader__step-arrow{color:var(--td-cascader-step-arrow-color,var(--td-text-color-placeholder,var(--td-font-gray-3,rgba(0,0,0,.4))));margin-left:auto}

View File

@ -1,45 +1 @@
const props = {
checkStrictly: {
type: Boolean,
value: false,
},
closeBtn: {
type: Boolean,
value: true,
},
keys: {
type: Object,
},
options: {
type: Array,
value: [],
},
placeholder: {
type: String,
value: '选择选项',
},
subTitles: {
type: Array,
value: [],
},
theme: {
type: String,
value: 'step',
},
title: {
type: String,
},
value: {
type: null,
value: null,
},
defaultValue: {
type: null,
value: null,
},
visible: {
type: Boolean,
value: false,
},
};
export default props;
const props={checkStrictly:{type:Boolean,value:!1},closeBtn:{type:Boolean,value:!0},keys:{type:Object},options:{type:Array,value:[]},placeholder:{type:String,value:"选择选项"},subTitles:{type:Array,value:[]},theme:{type:String,value:"step"},title:{type:String},value:{type:null,value:null},defaultValue:{type:null,value:null},visible:{type:Boolean,value:!1}};export default props;

View File

@ -1 +1 @@
export {};
export{};

View File

@ -1,43 +1 @@
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 { SuperComponent, wxComponent } from '../common/src/index';
import config from '../common/config';
import props from './props';
const { prefix } = config;
const name = `${prefix}-cell-group`;
let CellGroup = class CellGroup extends SuperComponent {
constructor() {
super(...arguments);
this.externalClasses = [`${prefix}-class`, `${prefix}-class-title`];
this.relations = {
'../cell/cell': {
type: 'child',
linked() {
this.updateLastChid();
},
unlinked() {
this.updateLastChid();
},
},
};
this.properties = props;
this.data = {
prefix,
classPrefix: name,
};
this.methods = {
updateLastChid() {
const items = this.$children;
items.forEach((child, index) => child.setData({ isLastChild: index === items.length - 1 }));
},
};
}
};
CellGroup = __decorate([
wxComponent()
], CellGroup);
export default CellGroup;
import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./props";const{prefix:prefix}=config,name=`${prefix}-cell-group`;let CellGroup=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-title`],this.relations={"../cell/cell":{type:"child",linked(){this.updateLastChid()},unlinked(){this.updateLastChid()}}},this.properties=props,this.data={prefix:prefix,classPrefix:name},this.methods={updateLastChid(){const e=this.$children;e.forEach(((t,o)=>t.setData({isLastChild:o===e.length-1})))}}}};CellGroup=__decorate([wxComponent()],CellGroup);export default CellGroup;

View File

@ -1,4 +1 @@
{
"component": true,
"styleIsolation": "apply-shared"
}
{"component":true,"styleIsolation":"apply-shared"}

View File

@ -1,9 +1 @@
<wxs src="../common/utils.wxs" module="_" />
<view wx:if="{{ title }}" class="class {{ classPrefix }}__title {{prefix}}-class-title"> {{ title }} </view>
<view
style="{{_._style([style, customStyle])}}"
class="{{_.cls(classPrefix, [['bordered', bordered], theme])}} class {{prefix}}-class"
>
<slot />
</view>
<wxs src="../common/utils.wxs" module="_"/><view wx:if="{{ title }}" class="class {{ classPrefix }}__title {{prefix}}-class-title">{{ title }}</view><view style="{{_._style([style, customStyle])}}" class="{{_.cls(classPrefix, [['bordered', bordered], theme])}} class {{prefix}}-class"><slot/></view>

View File

@ -1,71 +1 @@
.t-float-left {
float: left;
}
.t-float-right {
float: right;
}
@keyframes tdesign-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.hotspot-expanded.relative {
position: relative;
}
.hotspot-expanded::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transform: scale(1.5);
}
.t-cell-group {
position: relative;
}
.t-cell-group__title {
font-family: PingFangSC-Regular;
font-size: var(--td-cell-group-title-font-size, 28rpx);
color: var(--td-cell-group-title-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
text-align: left;
line-height: var(--td-cell-group-title-line-height, 90rpx);
background-color: var(--td-cell-group-title-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
padding-left: var(--td-cell-group-title-padding-left, 32rpx);
}
.t-cell-group--bordered::before {
position: absolute;
box-sizing: border-box;
content: ' ';
pointer-events: none;
right: 0;
left: 0;
top: 0;
border-top: 1px solid var(--td-cell-group-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7)));
transform: scaleY(0.5);
transform-origin: 0 0;
transform-origin: top;
z-index: 1;
}
.t-cell-group--bordered::after {
position: absolute;
box-sizing: border-box;
content: ' ';
pointer-events: none;
right: 0;
left: 0;
bottom: 0;
border-bottom: 1px solid var(--td-cell-group-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7)));
transform: scaleY(0.5);
transform-origin: bottom;
z-index: 1;
}
.t-cell-group--card {
margin: 0 32rpx;
border-radius: var(--td-radius-large, 18rpx);
overflow: hidden;
}
@import '../common/style/index.wxss';.t-cell-group{position:relative}.t-cell-group__title{font-family:PingFangSC-Regular;font-size:var(--td-cell-group-title-font-size,28rpx);color:var(--td-cell-group-title-color,var(--td-text-color-placeholder,var(--td-font-gray-3,rgba(0,0,0,.4))));text-align:left;line-height:var(--td-cell-group-title-line-height,90rpx);background-color:var(--td-cell-group-title-bg-color,var(--td-bg-color-secondarycontainer,var(--td-gray-color-1,#f3f3f3)));padding-left:var(--td-cell-group-title-padding-left,32rpx)}.t-cell-group--bordered::before{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:0;left:0;top:0;border-top:1px solid var(--td-cell-group-border-color,var(--td-component-stroke,var(--td-gray-color-3,#e7e7e7)));transform:scaleY(.5);transform-origin:0 0;transform-origin:top;z-index:1}.t-cell-group--bordered::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:0;left:0;bottom:0;border-bottom:1px solid var(--td-cell-group-border-color,var(--td-component-stroke,var(--td-gray-color-3,#e7e7e7)));transform:scaleY(.5);transform-origin:bottom;z-index:1}.t-cell-group--card{margin:0 32rpx;border-radius:var(--td-radius-large,18rpx);overflow:hidden}

View File

@ -1,15 +1 @@
const props = {
bordered: {
type: Boolean,
value: false,
},
theme: {
type: String,
value: 'default',
},
title: {
type: String,
value: '',
},
};
export default props;
const props={bordered:{type:Boolean,value:!1},theme:{type:String,value:"default"},title:{type:String,value:""}};export default props;

View File

@ -1 +1 @@
export {};
export{};

View File

@ -1,100 +0,0 @@
:: BASE_DOC ::
## API
### Cell 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 | middle | options: top/middle/bottom | N
arrow | Boolean / Object | false | \- | N
bordered | Boolean | true | \- | N
description | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
hover | Boolean | - | \- | N
image | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
jump-type | String | navigateTo | options: switchTab/reLaunch/redirectTo/navigateTo | N
left-icon | String / Object / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
note | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
required | Boolean | false | \- | N
right-icon | String / Object / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
title | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
url | String | - | \- | N
### Cell Events
name | params | description
-- | -- | --
click | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts)
### Cell External Classes
className | Description
-- | --
t-class | \-
t-class-center | \-
t-class-description | \-
t-class-hover | \-
t-class-image | \-
t-class-left | \-
t-class-left-icon | \-
t-class-note | \-
t-class-right | \-
t-class-right-icon | \-
t-class-title | \-
### CellGroup 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
bordered | Boolean | false | \- | N
theme | String | default | options: default/card | N
title | String | - | \- | N
### CellGroup External Classes
className | Description
-- | --
t-class | \-
t-class-title | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-cell-group-border-color | @component-stroke | -
--td-cell-group-title-bg-color | @bg-color-secondarycontainer | -
--td-cell-group-title-color | @text-color-placeholder | -
--td-cell-group-title-font-size | 28rpx | -
--td-cell-group-title-line-height | 90rpx | -
--td-cell-group-title-padding-left | 32rpx | -
--td-cell-bg-color | @bg-color-container | -
--td-cell-border-color | @component-stroke | -
--td-cell-border-left-space | @cell-horizontal-padding | -
--td-cell-border-right-space | 0 | -
--td-cell-border-width | 1px | -
--td-cell-description-color | @text-color-secondary | -
--td-cell-description-font-size | @font-size-base | -
--td-cell-description-line-height | 44rpx | -
--td-cell-height | auto | -
--td-cell-horizontal-padding | 32rpx | -
--td-cell-hover-color | @bg-color-secondarycontainer | -
--td-cell-image-height | 96rpx | -
--td-cell-image-width | 96rpx | -
--td-cell-left-icon-color | @brand-color | -
--td-cell-left-icon-font-size | 48rpx | -
--td-cell-line-height | 48rpx | -
--td-cell-note-color | @text-color-placeholder | -
--td-cell-note-font-size | @font-size-m | -
--td-cell-required-color | @error-color | -
--td-cell-required-font-size | @font-size-m | -
--td-cell-right-icon-color | @text-color-placeholder | -
--td-cell-right-icon-font-size | 48rpx | -
--td-cell-title-color | @text-color-primary | -
--td-cell-title-font-size | @font-size-m | -
--td-cell-vertical-padding | 32rpx | -

View File

@ -1,145 +0,0 @@
---
title: Cell 单元格
description: 用于各个类别行的信息展示。
spline: data
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
## 引入
全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-cell": "tdesign-miniprogram/cell/cell",
"t-cell-group": "tdesign-miniprogram/cell-group/cell-group"
}
```
## 代码演示
<a href="https://developers.weixin.qq.com/s/bz7aGimL72S2" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后依次执行npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
</blockquote>
### 类型
单行单元格
<img src="https://tdesign.gtimg.com/miniprogram/readme/cell-1.png" width="375px" height="50%">
{{ base }}
多行单元格
<img src="https://tdesign.gtimg.com/miniprogram/readme/cell-2.png" width="375px" height="50%">
{{ multiple }}
### 样式
卡片单元格
{{ theme }}
## API
### Cell Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N
align | String | middle | 右侧内容的对齐方式默认居中对齐。可选项top/middle/bottom | N
arrow | Boolean / Object | false | 是否显示右侧箭头 | N
bordered | Boolean | true | 是否显示下边框 | N
description | String / Slot | - | 下方内容描述。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
hover | Boolean | - | 是否开启点击反馈 | N
image | String / Slot | - | 主图。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
jump-type | String | navigateTo | 链接跳转类型。可选项switchTab/reLaunch/redirectTo/navigateTo | N
left-icon | String / Object / Slot | - | 左侧图标,出现在单元格标题的左侧。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
note | String / Slot | - | 和标题同行的说明文字。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
required | Boolean | false | 是否显示表单必填星号 | N
right-icon | String / Object / Slot | - | 最右侧图标。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
title | String / Slot | - | 标题。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
url | String | - | 点击后跳转链接地址。如果值为空,则表示不需要跳转 | N
### Cell Events
名称 | 参数 | 描述
-- | -- | --
click | - | 右侧内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts)
### Cell External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-center | 中间(`title`, `description`)内容样式类
t-class-description | 下方描述内容样式类
t-class-hover | 悬停样式类
t-class-image | 图片样式类
t-class-left | 左侧内容样式类
t-class-left-icon | 左侧图标样式类
t-class-note | 右侧说明文字样式类
t-class-right | 右侧内容样式类
t-class-right-icon | 右侧图标样式类
t-class-title | 标题样式类
### CellGroup Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N
bordered | Boolean | false | 是否显示组边框 | N
theme | String | default | 单元格组风格。可选项default/card | N
title | String | - | 单元格组标题 | N
### CellGroup External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-title | 标题样式类
### CSS Variables
组件提供了下列 CSS 变量,可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-cell-group-border-color | @component-stroke | -
--td-cell-group-title-bg-color | @bg-color-secondarycontainer | -
--td-cell-group-title-color | @text-color-placeholder | -
--td-cell-group-title-font-size | 28rpx | -
--td-cell-group-title-line-height | 90rpx | -
--td-cell-group-title-padding-left | 32rpx | -
--td-cell-bg-color | @bg-color-container | -
--td-cell-border-color | @component-stroke | -
--td-cell-border-left-space | @cell-horizontal-padding | -
--td-cell-border-right-space | 0 | -
--td-cell-border-width | 1px | -
--td-cell-description-color | @text-color-secondary | -
--td-cell-description-font-size | @font-size-base | -
--td-cell-description-line-height | 44rpx | -
--td-cell-height | auto | -
--td-cell-horizontal-padding | 32rpx | -
--td-cell-hover-color | @bg-color-secondarycontainer | -
--td-cell-image-height | 96rpx | -
--td-cell-image-width | 96rpx | -
--td-cell-left-icon-color | @brand-color | -
--td-cell-left-icon-font-size | 48rpx | -
--td-cell-line-height | 48rpx | -
--td-cell-note-color | @text-color-placeholder | -
--td-cell-note-font-size | @font-size-m | -
--td-cell-required-color | @error-color | -
--td-cell-required-font-size | @font-size-m | -
--td-cell-right-icon-color | @text-color-placeholder | -
--td-cell-right-icon-font-size | 48rpx | -
--td-cell-title-color | @text-color-primary | -
--td-cell-title-font-size | @font-size-m | -
--td-cell-vertical-padding | 32rpx | -

View File

@ -1,75 +1 @@
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 { SuperComponent, wxComponent } from '../common/src/index';
import config from '../common/config';
import props from './props';
import { calcIcon } from '../common/utils';
const { prefix } = config;
const name = `${prefix}-cell`;
let Cell = class Cell extends SuperComponent {
constructor() {
super(...arguments);
this.externalClasses = [
`${prefix}-class`,
`${prefix}-class-title`,
`${prefix}-class-description`,
`${prefix}-class-note`,
`${prefix}-class-hover`,
`${prefix}-class-image`,
`${prefix}-class-left`,
`${prefix}-class-left-icon`,
`${prefix}-class-center`,
`${prefix}-class-right`,
`${prefix}-class-right-icon`,
];
this.relations = {
'../cell-group/cell-group': {
type: 'parent',
},
};
this.options = {
multipleSlots: true,
};
this.properties = props;
this.data = {
prefix,
classPrefix: name,
isLastChild: false,
};
this.observers = {
leftIcon(v) {
this.setIcon('_leftIcon', v, '');
},
rightIcon(v) {
this.setIcon('_rightIcon', v, '');
},
arrow(v) {
this.setIcon('_arrow', v, 'chevron-right');
},
};
}
setIcon(name, value, defaultValue) {
this.setData({
[name]: calcIcon(value, defaultValue),
});
}
onClick(e) {
this.triggerEvent('click', e.detail);
this.jumpLink();
}
jumpLink(urlKey = 'url', link = 'jumpType') {
const url = this.data[urlKey];
const jumpType = this.data[link];
if (url) {
wx[jumpType]({ url });
}
}
};
Cell = __decorate([
wxComponent()
], Cell);
export default Cell;
import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./props";import{calcIcon}from"../common/utils";const{prefix:prefix}=config,name=`${prefix}-cell`;let Cell=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-title`,`${prefix}-class-description`,`${prefix}-class-note`,`${prefix}-class-hover`,`${prefix}-class-image`,`${prefix}-class-left`,`${prefix}-class-left-icon`,`${prefix}-class-center`,`${prefix}-class-right`,`${prefix}-class-right-icon`],this.relations={"../cell-group/cell-group":{type:"parent"}},this.options={multipleSlots:!0},this.properties=props,this.data={prefix:prefix,classPrefix:name,isLastChild:!1},this.observers={leftIcon(e){this.setIcon("_leftIcon",e,"")},rightIcon(e){this.setIcon("_rightIcon",e,"")},arrow(e){this.setIcon("_arrow",e,"chevron-right")}}}setIcon(e,t,s){this.setData({[e]:calcIcon(t,s)})}onClick(e){this.triggerEvent("click",e.detail),this.jumpLink()}jumpLink(e="url",t="jumpType"){const s=this.data[e],i=this.data[t];s&&wx[i]({url:s})}};Cell=__decorate([wxComponent()],Cell);export default Cell;

View File

@ -1,8 +1 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"t-icon": "../icon/icon",
"t-image": "../image/image"
}
}
{"component":true,"styleIsolation":"apply-shared","usingComponents":{"t-icon":"../icon/icon","t-image":"../image/image"}}

View File

@ -1,63 +1 @@
<import src="../common/template/icon.wxml" />
<wxs src="../common/utils.wxs" module="_" />
<view
style="{{_._style([style, customStyle])}}"
class="class {{prefix}}-class {{_.cls(classPrefix, [['borderless', !bordered || isLastChild]])}}"
hover-class="{{ hover ? classPrefix + '--hover' : ''}}"
hover-stay-time="70"
bind:tap="onClick"
aria-role="{{ariaRole || (arrow ? 'button' : '')}}"
aria-label="{{ariaLabel}}"
>
<view class="{{classPrefix}}__left {{prefix}}-class-left">
<template
wx:if="{{_leftIcon}}"
is="icon"
data="{{tClass: classPrefix + '__left-icon ' + prefix + '-class-left-icon', ..._leftIcon }}"
/>
<slot name="left-icon" />
<t-image
wx:if="{{ image }}"
shape="round"
t-class="{{classPrefix}}__left-image {{prefix}}-class-image"
src="{{ image }}"
/>
<slot name="image" />
</view>
<view class="{{classPrefix}}__title {{prefix}}-class-center">
<view class="{{classPrefix}}__title-text {{prefix}}-class-title">
<block wx:if="{{ title }}"> {{ title}} </block>
<slot name="title" />
<block wx:if="{{required}}">
<text decode class="{{classPrefix}}--required">&nbsp;*</text>
</block>
</view>
<view class="{{classPrefix}}__description {{prefix}}-class-description">
<view wx:if="{{ description }}" class="{{classPrefix}}__description-text">{{description}}</view>
<slot name="description" />
</view>
</view>
<view class="{{classPrefix}}__note {{prefix}}-class-note">
<text wx:if="{{ note }}">{{note}}</text>
<slot name="note" />
</view>
<view class="{{_.cls(classPrefix + '__right', [align])}} {{prefix}}-class-right">
<template
wx:if="{{_arrow}}"
is="icon"
data="{{tClass: classPrefix + '__right-icon ' + prefix + '-class-right-icon', ..._arrow }}"
/>
<block wx:else>
<template
wx:if="{{_rightIcon}}"
is="icon"
data="{{tClass: classPrefix + '__right-icon ' + prefix + '-class-right-icon', ..._rightIcon }}"
/>
<slot name="right-icon" />
</block>
</view>
</view>
<import src="../common/template/icon.wxml"/><wxs src="../common/utils.wxs" module="_"/><view style="{{_._style([style, customStyle])}}" class="class {{prefix}}-class {{_.cls(classPrefix, [['borderless', !bordered || isLastChild]])}}" hover-class="{{ hover ? classPrefix + '--hover' : ''}}" hover-stay-time="70" bind:tap="onClick" aria-role="{{ariaRole || (arrow ? 'button' : '')}}" aria-label="{{ariaLabel}}"><view class="{{classPrefix}}__left {{prefix}}-class-left"><template wx:if="{{_leftIcon}}" is="icon" data="{{tClass: classPrefix + '__left-icon ' + prefix + '-class-left-icon', ..._leftIcon }}"/><slot name="left-icon"/><t-image wx:if="{{ image }}" shape="round" t-class="{{classPrefix}}__left-image {{prefix}}-class-image" src="{{ image }}"/><slot name="image"/></view><view class="{{classPrefix}}__title {{prefix}}-class-center"><view class="{{classPrefix}}__title-text {{prefix}}-class-title"><block wx:if="{{ title }}">{{ title}}</block><slot name="title"/><block wx:if="{{required}}"><text decode class="{{classPrefix}}--required">&nbsp;*</text></block></view><view class="{{classPrefix}}__description {{prefix}}-class-description"><view wx:if="{{ description }}" class="{{classPrefix}}__description-text">{{description}}</view><slot name="description"/></view></view><view class="{{classPrefix}}__note {{prefix}}-class-note"><text wx:if="{{ note }}">{{note}}</text><slot name="note"/></view><view class="{{_.cls(classPrefix + '__right', [align])}} {{prefix}}-class-right"><template wx:if="{{_arrow}}" is="icon" data="{{tClass: classPrefix + '__right-icon ' + prefix + '-class-right-icon', ..._arrow }}"/><block wx:else><template wx:if="{{_rightIcon}}" is="icon" data="{{tClass: classPrefix + '__right-icon ' + prefix + '-class-right-icon', ..._rightIcon }}"/><slot name="right-icon"/></block></view></view>

View File

@ -1,127 +1 @@
.t-float-left {
float: left;
}
.t-float-right {
float: right;
}
@keyframes tdesign-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.hotspot-expanded.relative {
position: relative;
}
.hotspot-expanded::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transform: scale(1.5);
}
.t-cell {
position: relative;
display: flex;
box-sizing: border-box;
width: 100%;
padding: var(--td-cell-vertical-padding, 32rpx) var(--td-cell-horizontal-padding, 32rpx);
line-height: var(--td-cell-line-height, 48rpx);
height: var(--td-cell-height, auto);
background-color: var(--td-cell-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
}
.t-cell::after {
position: absolute;
box-sizing: border-box;
content: ' ';
pointer-events: none;
right: 0;
left: 0;
bottom: 0;
border-bottom: var(--td-cell-border-width, 1px) solid var(--td-cell-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7)));
transform: scaleY(0.5);
transform-origin: bottom;
left: var(--td-cell-border-left-space, var(--td-cell-horizontal-padding, 32rpx));
right: var(--td-cell-border-right-space, 0);
}
.t-cell--borderless::after {
display: none;
}
.t-cell__description {
font-size: var(--td-cell-description-font-size, var(--td-font-size-base, 28rpx));
line-height: var(--td-cell-description-line-height, 44rpx);
color: var(--td-cell-description-color, var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6))));
}
.t-cell__description-text {
margin-top: calc(var(--td-spacer, 16rpx) / 2);
}
.t-cell__note {
display: flex;
align-items: center;
justify-content: flex-end;
color: var(--td-cell-note-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
font-size: var(--td-cell-note-font-size, var(--td-font-size-m, 32rpx));
}
.t-cell__title {
margin-right: var(--td-spacer-2, 32rpx);
}
.t-cell__title,
.t-cell__note {
flex: 1 1 auto;
}
.t-cell__title:empty,
.t-cell__note:empty {
display: none;
}
.t-cell__title-text {
display: flex;
font-size: var(--td-cell-title-font-size, var(--td-font-size-m, 32rpx));
color: var(--td-cell-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
font-weight: 400;
}
.t-cell__left,
.t-cell__right {
align-self: stretch;
}
.t-cell__left:not(:empty) {
margin-right: var(--td-spacer-1, 24rpx);
}
.t-cell__left-icon {
color: var(--td-cell-left-icon-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
font-size: var(--td-cell-left-icon-font-size, 48rpx);
}
.t-cell__left-image {
height: var(--td-cell-image-height, 96rpx);
width: var(--td-cell-image-width, 96rpx);
}
.t-cell__note:not(:empty) + .t-cell__right {
margin-left: calc(var(--td-spacer, 16rpx) / 2);
}
.t-cell__right {
display: flex;
}
.t-cell__right-icon {
color: var(--td-cell-right-icon-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
font-size: var(--td-cell-right-icon-font-size, 48rpx);
}
.t-cell__right--middle {
align-items: center;
}
.t-cell__right--top {
align-items: flex-start;
}
.t-cell__right--bottom {
align-items: flex-end;
}
.t-cell--hover {
background-color: var(--td-cell-hover-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
}
.t-cell--required {
font-size: var(--td-cell-required-font-size, var(--td-font-size-m, 32rpx));
color: var(--td-cell-required-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
}
@import '../common/style/index.wxss';.t-cell{position:relative;display:flex;box-sizing:border-box;width:100%;padding:var(--td-cell-vertical-padding,32rpx) var(--td-cell-horizontal-padding,32rpx);line-height:var(--td-cell-line-height,48rpx);height:var(--td-cell-height,auto);background-color:var(--td-cell-bg-color,var(--td-bg-color-container,var(--td-font-white-1,#fff)))}.t-cell::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:0;left:0;bottom:0;border-bottom:var(--td-cell-border-width,1px) solid var(--td-cell-border-color,var(--td-component-stroke,var(--td-gray-color-3,#e7e7e7)));transform:scaleY(.5);transform-origin:bottom;left:var(--td-cell-border-left-space,var(--td-cell-horizontal-padding,32rpx));right:var(--td-cell-border-right-space,0)}.t-cell--borderless::after{display:none}.t-cell__description{font-size:var(--td-cell-description-font-size,var(--td-font-size-base,28rpx));line-height:var(--td-cell-description-line-height,44rpx);color:var(--td-cell-description-color,var(--td-text-color-secondary,var(--td-font-gray-2,rgba(0,0,0,.6))))}.t-cell__description-text{margin-top:calc(var(--td-spacer,16rpx)/ 2)}.t-cell__note{display:flex;align-items:center;justify-content:flex-end;color:var(--td-cell-note-color,var(--td-text-color-placeholder,var(--td-font-gray-3,rgba(0,0,0,.4))));font-size:var(--td-cell-note-font-size,var(--td-font-size-m,32rpx))}.t-cell__title{margin-right:var(--td-spacer-2,32rpx)}.t-cell__note,.t-cell__title{flex:1 1 auto}.t-cell__note:empty,.t-cell__title:empty{display:none}.t-cell__title-text{display:flex;font-size:var(--td-cell-title-font-size,var(--td-font-size-m,32rpx));color:var(--td-cell-title-color,var(--td-text-color-primary,var(--td-font-gray-1,rgba(0,0,0,.9))));font-weight:400}.t-cell__left,.t-cell__right{align-self:stretch}.t-cell__left:not(:empty){margin-right:var(--td-spacer-1,24rpx)}.t-cell__left-icon{color:var(--td-cell-left-icon-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));font-size:var(--td-cell-left-icon-font-size,48rpx)}.t-cell__left-image{height:var(--td-cell-image-height,96rpx);width:var(--td-cell-image-width,96rpx)}.t-cell__note:not(:empty)+.t-cell__right{margin-left:calc(var(--td-spacer,16rpx)/ 2)}.t-cell__right{display:flex}.t-cell__right-icon{color:var(--td-cell-right-icon-color,var(--td-text-color-placeholder,var(--td-font-gray-3,rgba(0,0,0,.4))));font-size:var(--td-cell-right-icon-font-size,48rpx)}.t-cell__right--middle{align-items:center}.t-cell__right--top{align-items:flex-start}.t-cell__right--bottom{align-items:flex-end}.t-cell--hover{background-color:var(--td-cell-hover-color,var(--td-bg-color-secondarycontainer,var(--td-gray-color-1,#f3f3f3)))}.t-cell--required{font-size:var(--td-cell-required-font-size,var(--td-font-size-m,32rpx));color:var(--td-cell-required-color,var(--td-error-color,var(--td-error-color-6,#d54941)))}

View File

@ -1,48 +1 @@
const props = {
align: {
type: String,
value: 'middle',
},
arrow: {
type: null,
value: false,
},
bordered: {
type: Boolean,
value: true,
},
description: {
type: String,
},
hover: {
type: Boolean,
},
image: {
type: String,
},
jumpType: {
type: String,
value: 'navigateTo',
},
leftIcon: {
type: null,
},
note: {
type: String,
},
required: {
type: Boolean,
value: false,
},
rightIcon: {
type: null,
},
title: {
type: String,
},
url: {
type: String,
value: '',
},
};
export default props;
const props={align:{type:String,value:"middle"},arrow:{type:null,value:!1},bordered:{type:Boolean,value:!0},description:{type:String},hover:{type:Boolean},image:{type:String},jumpType:{type:String,value:"navigateTo"},leftIcon:{type:null},note:{type:String},required:{type:Boolean,value:!1},rightIcon:{type:null},title:{type:String},url:{type:String,value:""}};export default props;

View File

@ -1 +1 @@
export {};
export{};

View File

@ -1,84 +1 @@
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 { wxComponent, SuperComponent } from '../common/src/index';
import config from '../common/config';
import props from './props';
import { classNames, calcIcon } from '../common/utils';
const { prefix } = config;
const name = `${prefix}-tag`;
let CheckTag = class CheckTag extends SuperComponent {
constructor() {
super(...arguments);
this.data = {
prefix,
classPrefix: name,
className: '',
};
this.properties = props;
this.externalClasses = [`${prefix}-class`];
this.controlledProps = [
{
key: 'checked',
event: 'change',
},
];
this.options = {
multipleSlots: true,
};
this.lifetimes = {
attached() {
this.setClass();
},
};
this.observers = {
'size, disabled, checked'() {
this.setClass();
},
icon(v) {
this.setData({
_icon: calcIcon(v),
});
},
};
this.methods = {
setClass() {
const { classPrefix } = this.data;
const { size, variant, disabled, checked, shape } = this.properties;
const tagClass = [
classPrefix,
`${classPrefix}--checkable`,
disabled ? `${classPrefix}--disabled` : '',
checked ? `${classPrefix}--checked` : '',
`${classPrefix}--${checked ? 'primary' : 'default'}`,
`${classPrefix}--${size}`,
`${classPrefix}--${variant}`,
`${classPrefix}--${shape}`,
];
const className = classNames(tagClass);
this.setData({
className,
});
},
onClick() {
if (this.data.disabled)
return;
const { checked } = this.data;
this._trigger('click');
this._trigger('change', { checked: !checked });
},
onClose(e) {
if (this.data.disabled)
return;
this._trigger('close', e);
},
};
}
};
CheckTag = __decorate([
wxComponent()
], CheckTag);
export default CheckTag;
import{__decorate}from"tslib";import{wxComponent,SuperComponent}from"../common/src/index";import config from"../common/config";import props from"./props";import{classNames,calcIcon}from"../common/utils";const{prefix:prefix}=config,name=`${prefix}-tag`;let CheckTag=class extends SuperComponent{constructor(){super(...arguments),this.data={prefix:prefix,classPrefix:name,className:""},this.properties=props,this.externalClasses=[`${prefix}-class`],this.controlledProps=[{key:"checked",event:"change"}],this.options={multipleSlots:!0},this.lifetimes={attached(){this.setClass()}},this.observers={"size, disabled, checked"(){this.setClass()},icon(e){this.setData({_icon:calcIcon(e)})}},this.methods={setClass(){const{classPrefix:e}=this.data,{size:s,variant:t,disabled:i,checked:a,shape:c}=this.properties,o=classNames([e,`${e}--checkable`,i?`${e}--disabled`:"",a?`${e}--checked`:"",`${e}--${a?"primary":"default"}`,`${e}--${s}`,`${e}--${t}`,`${e}--${c}`]);this.setData({className:o})},onClick(){if(this.data.disabled)return;const{checked:e}=this.data;this._trigger("click"),this._trigger("change",{checked:!e})},onClose(e){this.data.disabled||this._trigger("close",e)}}}};CheckTag=__decorate([wxComponent()],CheckTag);export default CheckTag;

View File

@ -1,7 +1 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"t-icon": "../icon/icon"
}
}
{"component":true,"styleIsolation":"apply-shared","usingComponents":{"t-icon":"../icon/icon"}}

View File

@ -1,24 +1 @@
<wxs src="../common/utils.wxs" module="_" />
<import src="../common/template/icon.wxml" />
<view style="{{_._style([style, customStyle])}}" class="{{className}} class {{prefix}}-class" bind:tap="onClick">
<view aria-hidden="{{true}}" class="{{classPrefix}}__icon">
<template wx:if="{{_icon}}" is="icon" data="{{ tClass: prefix + '-icon', ..._icon }}" />
<slot name="icon" />
</view>
<view class="{{classPrefix}}__text">
<slot />
<slot name="content" />
<block wx:if="{{_.isArray(content) && content.length == 2}}">{{checked ? content[0] : content[1]}}</block>
<block wx:else>{{content}}</block>
</view>
<t-icon
wx:if="{{ closable }}"
class="{{classPrefix}}__icon-close"
t-class="{{prefix}}-icon"
catch:tap="onClose"
name="close"
aria-role="button"
aria-label="关闭"
/>
</view>
<wxs src="../common/utils.wxs" module="_"/><import src="../common/template/icon.wxml"/><view style="{{_._style([style, customStyle])}}" class="{{className}} class {{prefix}}-class" bind:tap="onClick"><view aria-hidden="{{true}}" class="{{classPrefix}}__icon"><template wx:if="{{_icon}}" is="icon" data="{{ tClass: prefix + '-icon', ..._icon }}"/><slot name="icon"/></view><view class="{{classPrefix}}__text"><slot/><slot name="content"/><block wx:if="{{_.isArray(content) && content.length == 2}}">{{checked ? content[0] : content[1]}}</block><block wx:else>{{content}}</block></view><t-icon wx:if="{{ closable }}" class="{{classPrefix}}__icon-close" t-class="{{prefix}}-icon" catch:tap="onClose" name="close" aria-role="button" aria-label="关闭"/></view>

File diff suppressed because one or more lines are too long

Some files were not shown because too many files have changed in this diff Show More