dads
This commit is contained in:
parent
5161f11dd3
commit
e49b8b8de2
@ -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({
|
||||
|
||||
2
app.less
2
app.less
@ -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 {
|
||||
|
||||
@ -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
@ -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 | -
|
||||
@ -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 | -
|
||||
@ -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: {
|
||||
|
||||
@ -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;
|
||||
@ -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"}}
|
||||
@ -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>
|
||||
@ -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}
|
||||
@ -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)};
|
||||
@ -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;
|
||||
@ -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 {};
|
||||
|
||||
@ -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()};
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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 {
|
||||
|
||||
@ -1 +1 @@
|
||||
export {};
|
||||
export{};
|
||||
@ -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;
|
||||
@ -1,7 +1 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "shared",
|
||||
"usingComponents": {
|
||||
"t-avatar": "../avatar/avatar"
|
||||
}
|
||||
}
|
||||
{"component":true,"styleIsolation":"shared","usingComponents":{"t-avatar":"../avatar/avatar"}}
|
||||
@ -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
@ -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;
|
||||
@ -1 +1 @@
|
||||
export {};
|
||||
export{};
|
||||
@ -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 | -
|
||||
@ -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 | -
|
||||
@ -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;
|
||||
@ -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"}}
|
||||
@ -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>
|
||||
@ -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)}
|
||||
@ -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;
|
||||
@ -1 +1 @@
|
||||
export {};
|
||||
export{};
|
||||
@ -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 | -
|
||||
@ -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 | -
|
||||
@ -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;
|
||||
@ -1,7 +1 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {
|
||||
"t-icon": "../icon/icon"
|
||||
}
|
||||
}
|
||||
{"component":true,"styleIsolation":"apply-shared","usingComponents":{"t-icon":"../icon/icon"}}
|
||||
@ -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>
|
||||
@ -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}
|
||||
@ -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;
|
||||
@ -1 +1 @@
|
||||
export {};
|
||||
export{};
|
||||
@ -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 | -
|
||||
@ -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 | -
|
||||
@ -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;
|
||||
@ -1,5 +1 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {}
|
||||
}
|
||||
{"component":true,"styleIsolation":"apply-shared","usingComponents":{}}
|
||||
@ -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>
|
||||
@ -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))))}
|
||||
@ -1,3 +1 @@
|
||||
export * from './type';
|
||||
export * from './props';
|
||||
export * from './badge';
|
||||
export*from"./type";export*from"./props";export*from"./badge";
|
||||
@ -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;
|
||||
@ -1 +1 @@
|
||||
export {};
|
||||
export{};
|
||||
@ -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 | -
|
||||
@ -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 | -
|
||||
@ -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;
|
||||
@ -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"}}
|
||||
@ -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
@ -1,3 +1 @@
|
||||
export * from './props';
|
||||
export * from './type';
|
||||
export * from './button';
|
||||
export*from"./props";export*from"./type";export*from"./button";
|
||||
@ -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;
|
||||
@ -1 +1 @@
|
||||
export {};
|
||||
export{};
|
||||
@ -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 | -
|
||||
@ -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 | -
|
||||
@ -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>
|
||||
@ -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
@ -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"}}
|
||||
@ -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
@ -1,2 +1 @@
|
||||
export * from './type';
|
||||
export * from './calendar';
|
||||
export*from"./type";export*from"./calendar";
|
||||
@ -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;
|
||||
@ -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>
|
||||
@ -1 +1 @@
|
||||
export {};
|
||||
export{};
|
||||
@ -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);
|
||||
@ -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 | -
|
||||
@ -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
@ -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"}}
|
||||
@ -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>
|
||||
@ -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}
|
||||
@ -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;
|
||||
@ -1 +1 @@
|
||||
export {};
|
||||
export{};
|
||||
@ -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;
|
||||
@ -1,4 +1 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared"
|
||||
}
|
||||
{"component":true,"styleIsolation":"apply-shared"}
|
||||
@ -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>
|
||||
@ -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}
|
||||
@ -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;
|
||||
@ -1 +1 @@
|
||||
export {};
|
||||
export{};
|
||||
@ -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 | -
|
||||
@ -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 | -
|
||||
@ -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;
|
||||
@ -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"}}
|
||||
@ -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"> *</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"> *</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>
|
||||
@ -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)))}
|
||||
@ -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;
|
||||
@ -1 +1 @@
|
||||
export {};
|
||||
export{};
|
||||
@ -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;
|
||||
@ -1,7 +1 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {
|
||||
"t-icon": "../icon/icon"
|
||||
}
|
||||
}
|
||||
{"component":true,"styleIsolation":"apply-shared","usingComponents":{"t-icon":"../icon/icon"}}
|
||||
@ -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
Loading…
x
Reference in New Issue
Block a user