New Huajishe Check ChaoXing
This commit is contained in:
21
HuajisheCheckChaoXing/Dockerfile
Normal file
21
HuajisheCheckChaoXing/Dockerfile
Normal file
@@ -0,0 +1,21 @@
|
||||
FROM node:lts-alpine
|
||||
|
||||
ENV TZ=Asia/Shanghai
|
||||
|
||||
RUN apk add --no-cache tzdata \
|
||||
&& cp /usr/share/zoneinfo/$TZ /etc/localtime \
|
||||
&& echo $TZ > /etc/timezone \
|
||||
&& apk del tzdata
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package*.json ./
|
||||
|
||||
RUN npm config set strict-ssl false \
|
||||
&& npm install --omit=dev
|
||||
|
||||
COPY . ./
|
||||
|
||||
EXPOSE 8080
|
||||
|
||||
CMD [ "node", "ci.js" ]
|
||||
22
HuajisheCheckChaoXing/Dockerfile.zh
Normal file
22
HuajisheCheckChaoXing/Dockerfile.zh
Normal file
@@ -0,0 +1,22 @@
|
||||
FROM node:lts-alpine
|
||||
|
||||
ENV TZ=Asia/Shanghai
|
||||
|
||||
RUN apk add --no-cache tzdata \
|
||||
&& cp /usr/share/zoneinfo/$TZ /etc/localtime \
|
||||
&& echo $TZ > /etc/timezone \
|
||||
&& apk del tzdata
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package*.json ./
|
||||
|
||||
RUN npm config set registry https://mirrors.huaweicloud.com/repository/npm/ \
|
||||
&& npm config set strict-ssl false \
|
||||
&& npm install --omit=dev
|
||||
|
||||
COPY . ./
|
||||
|
||||
EXPOSE 8080
|
||||
|
||||
CMD [ "node", "ci.js" ]
|
||||
3
HuajisheCheckChaoXing/README.md
Normal file
3
HuajisheCheckChaoXing/README.md
Normal file
@@ -0,0 +1,3 @@
|
||||
# 小程序端部署教程
|
||||
|
||||
已迁移到 [官方文档](https://doc.micono.eu.org/advance/miniprogram.html)
|
||||
81
HuajisheCheckChaoXing/app.js
Normal file
81
HuajisheCheckChaoXing/app.js
Normal file
@@ -0,0 +1,81 @@
|
||||
import config from '@utils/config';
|
||||
import util from '@utils/util';
|
||||
import log from '@utils/log';
|
||||
|
||||
import baidu_sdk from '@utils/sdk/mtj-wx-sdk';
|
||||
|
||||
App({
|
||||
onLaunch(options) {
|
||||
log.info("App 启动参数", options)
|
||||
|
||||
this.autoUpdate();
|
||||
this.setCaptureListener();
|
||||
},
|
||||
|
||||
autoUpdate() { // 更新小程序
|
||||
if (wx.canIUse('getUpdateManager')) {
|
||||
const updateManager = wx.getUpdateManager();
|
||||
updateManager.onCheckForUpdate(res => {
|
||||
if (res.hasUpdate) {
|
||||
wx.showModal({
|
||||
title: '更新提示',
|
||||
content: '检测到新版本,是否下载新版本并重启小程序?',
|
||||
showCancel: false, // 隐藏取消按钮
|
||||
confirmText: "确定更新", // 只保留确定更新按钮
|
||||
complete: () => {
|
||||
wx.showLoading();
|
||||
updateManager.onUpdateReady(function () {
|
||||
wx.hideLoading()
|
||||
updateManager.applyUpdate()
|
||||
})
|
||||
updateManager.onUpdateFailed(function () {
|
||||
wx.showModal({
|
||||
title: '已经有新版本了哟~',
|
||||
content: '新版本已经上线啦~,请您重新打开当前小程序哟~',
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
else {
|
||||
wx.showModal({
|
||||
title: '提示',
|
||||
content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
setCaptureListener() { // 监听截屏事件
|
||||
wx.onUserCaptureScreen(() => {
|
||||
return {
|
||||
'query': "from=capture",
|
||||
'promise': new Promise(resolve => {
|
||||
const pages = getCurrentPages();
|
||||
const currentPage = pages[pages.length - 1]; // 当前页面
|
||||
const query = Object.entries({
|
||||
...currentPage.options,
|
||||
'from': 'capture',
|
||||
})
|
||||
.map(([key, value]) => `${key}=${value}`)
|
||||
.join('&');
|
||||
log.info("用户截屏", {
|
||||
"route": currentPage.route,
|
||||
'query': query,
|
||||
})
|
||||
util.showInfo("您已截屏\n请注意隐私安全")
|
||||
resolve({
|
||||
'query': query,
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
wx.onScreenRecordingStateChanged(res => {
|
||||
if (res.state == 'start')
|
||||
util.showInfo("您正在录屏\n请注意隐私安全")
|
||||
if (res.state == 'stop')
|
||||
util.showInfo("您已录屏\n请注意隐私安全")
|
||||
})
|
||||
},
|
||||
})
|
||||
24
HuajisheCheckChaoXing/app.json
Normal file
24
HuajisheCheckChaoXing/app.json
Normal file
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"pages": [
|
||||
"pages/home/home"
|
||||
],
|
||||
"resolveAlias": {
|
||||
"~/*": "/*",
|
||||
"@utils/*": "utils/*"
|
||||
},
|
||||
"requiredPrivateInfos": [
|
||||
"chooseLocation",
|
||||
"getLocation"
|
||||
],
|
||||
"permission": {
|
||||
"scope.userLocation": {
|
||||
"desc": "获取您的位置用于签到"
|
||||
}
|
||||
},
|
||||
"window": {
|
||||
"backgroundTextStyle": "light",
|
||||
"navigationStyle": "custom"
|
||||
},
|
||||
"sitemapLocation": "sitemap.json",
|
||||
"lazyCodeLoading": "requiredComponents"
|
||||
}
|
||||
5
HuajisheCheckChaoXing/app.miniapp.json
Normal file
5
HuajisheCheckChaoXing/app.miniapp.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"adapteByMiniprogram": {
|
||||
"userName": "gh_e0e47fd2af64"
|
||||
}
|
||||
}
|
||||
12
HuajisheCheckChaoXing/app.wxss
Normal file
12
HuajisheCheckChaoXing/app.wxss
Normal file
@@ -0,0 +1,12 @@
|
||||
/**app.wxss**/
|
||||
|
||||
page {
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
||||
.shadow-radius {
|
||||
box-shadow: 0rpx 8rpx 10rpx -5rpx rgba(0, 0, 0, 0.08), 0rpx 16rpx 24rpx 2rpx rgba(0, 0, 0, 0.04), 0rpx 6rpx 30rpx 5rpx rgba(0, 0, 0, 0.05);
|
||||
border-radius: 20rpx;
|
||||
--td-button-border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
147
HuajisheCheckChaoXing/ci.js
Normal file
147
HuajisheCheckChaoXing/ci.js
Normal file
@@ -0,0 +1,147 @@
|
||||
const ci = require('miniprogram-ci');
|
||||
const express = require('express');
|
||||
const axios = require('axios');
|
||||
const fs = require('fs');
|
||||
const app = express();
|
||||
const port = 8080;
|
||||
|
||||
app.use(express.urlencoded({
|
||||
extended: true
|
||||
}));
|
||||
|
||||
const task = {
|
||||
"appid": null,
|
||||
"result": null,
|
||||
};
|
||||
|
||||
/**
|
||||
* 上传小程序
|
||||
*/
|
||||
app.post('/ci/upload', (req, res) => {
|
||||
const {
|
||||
appid,
|
||||
key,
|
||||
mobile,
|
||||
callback
|
||||
} = req.body;
|
||||
|
||||
if (task.appid) {
|
||||
res.json(task)
|
||||
if (task.result != 'doing')
|
||||
process.exit(0);
|
||||
} else {
|
||||
task.appid = appid;
|
||||
task.result = "doing";
|
||||
res.json(task)
|
||||
|
||||
console.info(` ------ ✨ 开始执行编译上传 ${appid} ${new Date().toLocaleString()} ------ `);
|
||||
upload(appid, key, mobile)
|
||||
.then(res => {
|
||||
task.appid = res.appid;
|
||||
task.result = res.result;
|
||||
task.mobile = mobile || null;
|
||||
task.key = res.key || null;
|
||||
console.info(` ------ 🎉 小程序上传完成 ${res.appid} ${res} ------ `);
|
||||
if (res.result == "done" && callback)
|
||||
axios.post(callback, task, {
|
||||
params: {
|
||||
"appid": appid,
|
||||
}
|
||||
})
|
||||
.then(resp => { })
|
||||
.catch(e => { });
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 获取任务状态
|
||||
*/
|
||||
app.get("/ci/status", (req, res) => {
|
||||
res.json({
|
||||
"status": 0,
|
||||
"msg": `服务正常,当前任务 ${task.appid || "无"} ${task.result || ""}`,
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
* 停止服务
|
||||
*/
|
||||
app.post('/ci/stop', (req, res) => {
|
||||
task.result = "fail";
|
||||
res.json(task);
|
||||
process.exit(0);
|
||||
})
|
||||
|
||||
const server = app.listen(port, () => {
|
||||
console.info(` ------ ✨ CI服务已启动,端口 ${port},正在等待任务 ------ `);
|
||||
});
|
||||
server.setTimeout(3 * 60 * 1000);
|
||||
process.on('SIGTERM', () => {
|
||||
server.close(() => { })
|
||||
})
|
||||
|
||||
/**
|
||||
* 上传小程序
|
||||
* @param {*} appid
|
||||
* @param {*} privateKey
|
||||
* @param {*} username
|
||||
* @returns
|
||||
*/
|
||||
const upload = (appid, privateKey, username) => {
|
||||
const formate = (key) => {
|
||||
key = key.replace(/\n/g, '').replace(/\r/g, '');
|
||||
const header = "-----BEGIN RSA PRIVATE KEY-----";
|
||||
const footer = "-----END RSA PRIVATE KEY-----";
|
||||
key = key.replace(header, '').replace(footer, '').trim();
|
||||
let formattedKey = '';
|
||||
for (let i = 0; i < key.length; i += 64)
|
||||
formattedKey += key.substr(i, 64) + '\n';
|
||||
return header + '\n' + formattedKey + footer;
|
||||
}
|
||||
return new Promise(async resolve => {
|
||||
const privateKeyPath = `/tmp/miniprogram-${appid}.private.key`;
|
||||
privateKey = formate(privateKey);
|
||||
fs.writeFileSync(privateKeyPath, privateKey);
|
||||
fs.writeFileSync("./utils/ci.config.js", `module.exports = {username: '${username}'}`)
|
||||
try {
|
||||
const now = new Date();
|
||||
await ci.upload({
|
||||
project: new ci.Project({
|
||||
appid: appid,
|
||||
type: 'miniProgram',
|
||||
projectPath: './',
|
||||
privateKeyPath: privateKeyPath,
|
||||
ignores: [],
|
||||
}),
|
||||
version: `开源版 v0.${now.getFullYear()}.${String(now.getMonth() + 1).padStart(2, '0')}.${String(now.getDate()).padStart(2, '0')}`,
|
||||
robot: Number(process.env.ROBOT || "5"),
|
||||
desc: "御坂网络 Misaka",
|
||||
setting: {
|
||||
es6: true,
|
||||
es7: true,
|
||||
minify: true,
|
||||
codeProtect: true,
|
||||
ignoreUploadUnusedFiles: true,
|
||||
},
|
||||
onProgressUpdate: res => {
|
||||
if (res._status != "doing") {
|
||||
fs.unlink(privateKeyPath, () => { });
|
||||
console.info(` ------ ✨ 编译上传结果 ${res} ------ `);
|
||||
resolve(Object.assign(res, {
|
||||
"appid": appid,
|
||||
"result": res._status,
|
||||
"key": privateKey,
|
||||
}))
|
||||
}
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
resolve({
|
||||
'appid': appid,
|
||||
"result": String(err),
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
147
HuajisheCheckChaoXing/ci.prod.js
Normal file
147
HuajisheCheckChaoXing/ci.prod.js
Normal file
@@ -0,0 +1,147 @@
|
||||
const ci = require('miniprogram-ci');
|
||||
const express = require('express');
|
||||
const axios = require('axios');
|
||||
const fs = require('fs');
|
||||
const app = express();
|
||||
const port = 8080;
|
||||
|
||||
app.use(express.urlencoded({
|
||||
extended: true
|
||||
}));
|
||||
|
||||
const task = {
|
||||
"appid": null,
|
||||
"result": null,
|
||||
};
|
||||
|
||||
/**
|
||||
* 上传小程序
|
||||
*/
|
||||
app.post('/ci/upload', (req, res) => {
|
||||
const {
|
||||
appid,
|
||||
key,
|
||||
mobile,
|
||||
callback
|
||||
} = req.body;
|
||||
|
||||
if (task.appid) {
|
||||
res.json(task)
|
||||
if (task.result != 'doing')
|
||||
process.exit(0);
|
||||
} else {
|
||||
task.appid = appid;
|
||||
task.result = "doing";
|
||||
res.json(task)
|
||||
|
||||
console.info(` ------ ✨ 开始执行编译上传 ${appid} ${new Date().toLocaleString()} ------ `);
|
||||
upload(appid, key, mobile)
|
||||
.then(res => {
|
||||
task.appid = res.appid;
|
||||
task.result = res.result;
|
||||
task.mobile = mobile || null;
|
||||
task.key = res.key || null;
|
||||
console.info(` ------ 🎉 小程序上传完成 ${res.appid} ${res} ------ `);
|
||||
if (res.result == "done" && callback)
|
||||
axios.post(callback, task, {
|
||||
params: {
|
||||
"appid": appid,
|
||||
}
|
||||
})
|
||||
.then(resp => { })
|
||||
.catch(e => { });
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 获取任务状态
|
||||
*/
|
||||
app.get("/ci/status", (req, res) => {
|
||||
res.json({
|
||||
"status": 0,
|
||||
"msg": `服务正常,当前任务 ${task.appid || "无"} ${task.result || ""}`,
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
* 停止服务
|
||||
*/
|
||||
app.post('/ci/stop', (req, res) => {
|
||||
task.result = "fail";
|
||||
res.json(task);
|
||||
process.exit(0);
|
||||
})
|
||||
|
||||
const server = app.listen(port, () => {
|
||||
console.info(` ------ ✨ CI服务已启动,端口 ${port},正在等待任务 ------ `);
|
||||
});
|
||||
server.setTimeout(3 * 60 * 1000);
|
||||
process.on('SIGTERM', () => {
|
||||
server.close(() => { })
|
||||
})
|
||||
|
||||
/**
|
||||
* 上传小程序
|
||||
* @param {*} appid
|
||||
* @param {*} privateKey
|
||||
* @param {*} username
|
||||
* @returns
|
||||
*/
|
||||
const upload = (appid, privateKey, username) => {
|
||||
const formate = (key) => {
|
||||
key = key.replace(/\n/g, '').replace(/\r/g, '');
|
||||
const header = "-----BEGIN RSA PRIVATE KEY-----";
|
||||
const footer = "-----END RSA PRIVATE KEY-----";
|
||||
key = key.replace(header, '').replace(footer, '').trim();
|
||||
let formattedKey = '';
|
||||
for (let i = 0; i < key.length; i += 64)
|
||||
formattedKey += key.substr(i, 64) + '\n';
|
||||
return header + '\n' + formattedKey + footer;
|
||||
}
|
||||
return new Promise(async resolve => {
|
||||
const privateKeyPath = `/tmp/miniprogram-${appid}.private.key`;
|
||||
privateKey = formate(privateKey);
|
||||
fs.writeFileSync(privateKeyPath, privateKey);
|
||||
fs.writeFileSync("./utils/ci.config.js", `module.exports = {username: '${username}'}`)
|
||||
try {
|
||||
const now = new Date();
|
||||
await ci.upload({
|
||||
project: new ci.Project({
|
||||
appid: appid,
|
||||
type: 'miniProgram',
|
||||
projectPath: './',
|
||||
privateKeyPath: privateKeyPath,
|
||||
ignores: [],
|
||||
}),
|
||||
version: `开源版 v0.${now.getFullYear()}.${String(now.getMonth() + 1).padStart(2, '0')}.${String(now.getDate()).padStart(2, '0')}`,
|
||||
robot: 1,
|
||||
desc: "御坂网络 Misaka",
|
||||
setting: {
|
||||
es6: true,
|
||||
es7: true,
|
||||
minify: true,
|
||||
codeProtect: true,
|
||||
ignoreUploadUnusedFiles: true,
|
||||
},
|
||||
onProgressUpdate: res => {
|
||||
if (res._status != "doing") {
|
||||
fs.unlink(privateKeyPath, () => { });
|
||||
console.info(` ------ ✨ 编译上传结果 ${res} ------ `);
|
||||
resolve(Object.assign(res, {
|
||||
"appid": appid,
|
||||
"result": res._status,
|
||||
"key": privateKey,
|
||||
}))
|
||||
}
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
resolve({
|
||||
'appid': appid,
|
||||
"result": String(err),
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
16
HuajisheCheckChaoXing/components/no-data/no-data.js
Normal file
16
HuajisheCheckChaoXing/components/no-data/no-data.js
Normal file
@@ -0,0 +1,16 @@
|
||||
Component({
|
||||
properties: {
|
||||
text: {
|
||||
type: String,
|
||||
value: '暂无数据',
|
||||
},
|
||||
desc: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
},
|
||||
lifetimes: {
|
||||
attached() { },
|
||||
},
|
||||
methods: {}
|
||||
})
|
||||
3
HuajisheCheckChaoXing/components/no-data/no-data.json
Normal file
3
HuajisheCheckChaoXing/components/no-data/no-data.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
5
HuajisheCheckChaoXing/components/no-data/no-data.wxml
Normal file
5
HuajisheCheckChaoXing/components/no-data/no-data.wxml
Normal file
@@ -0,0 +1,5 @@
|
||||
<view class="no-data">
|
||||
<image class="no-data" src="/static/svg/illustration/no-data.svg" mode="aspectFit"></image>
|
||||
<text class="no-data">{{text}}</text>
|
||||
<text class="no-data" wx:if="{{desc}}">{{desc}}</text>
|
||||
</view>
|
||||
18
HuajisheCheckChaoXing/components/no-data/no-data.wxss
Normal file
18
HuajisheCheckChaoXing/components/no-data/no-data.wxss
Normal file
@@ -0,0 +1,18 @@
|
||||
view.no-data {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: calc(50vh - 300rpx);
|
||||
color: gray;
|
||||
}
|
||||
|
||||
image.no-data {
|
||||
display: block;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin: 20rpx auto;
|
||||
}
|
||||
|
||||
text.no-data {
|
||||
font-size: 26rpx;
|
||||
display: block;
|
||||
}
|
||||
12
HuajisheCheckChaoXing/components/watermark/watermark.js
Normal file
12
HuajisheCheckChaoXing/components/watermark/watermark.js
Normal file
@@ -0,0 +1,12 @@
|
||||
Component({
|
||||
properties: {
|
||||
waterText: {
|
||||
type: String,
|
||||
value: '小程序水印',
|
||||
}
|
||||
},
|
||||
lifetimes: {
|
||||
attached() { },
|
||||
},
|
||||
methods: {}
|
||||
})
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
21
HuajisheCheckChaoXing/components/watermark/watermark.wxml
Normal file
21
HuajisheCheckChaoXing/components/watermark/watermark.wxml
Normal file
@@ -0,0 +1,21 @@
|
||||
<!--components/watermark/watermark.wxml-->
|
||||
<view class="water_top" style="pointer-events: none;">
|
||||
<view class="water-text">{{waterText}}</view>
|
||||
<view class="water-text">{{waterText}}</view>
|
||||
<view class="water-text">{{waterText}}</view>
|
||||
<view class="water-text">{{waterText}}</view>
|
||||
<view class="water-text">{{waterText}}</view>
|
||||
<view class="water-text">{{waterText}}</view>
|
||||
<view class="water-text">{{waterText}}</view>
|
||||
<view class="water-text">{{waterText}}</view>
|
||||
|
||||
<view class="water-text">{{waterText}}</view>
|
||||
<view class="water-text">{{waterText}}</view>
|
||||
<view class="water-text">{{waterText}}</view>
|
||||
<view class="water-text">{{waterText}}</view>
|
||||
<view class="water-text">{{waterText}}</view>
|
||||
<view class="water-text">{{waterText}}</view>
|
||||
<view class="water-text">{{waterText}}</view>
|
||||
<view class="water-text">{{waterText}}</view>
|
||||
</view>
|
||||
|
||||
20
HuajisheCheckChaoXing/components/watermark/watermark.wxss
Normal file
20
HuajisheCheckChaoXing/components/watermark/watermark.wxss
Normal file
@@ -0,0 +1,20 @@
|
||||
/* components/watermark/watermark.wxss */
|
||||
/* 想要改水印大小或者稀疏通过样式调整即可 */
|
||||
.water_top {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: rotate(-10deg);
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.water-text {
|
||||
float: left;
|
||||
width: 375rpx;
|
||||
color: rgba(0, 0, 0, 0.15);
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
margin: 120rpx 0;
|
||||
}
|
||||
11
HuajisheCheckChaoXing/i18n/base.json
Normal file
11
HuajisheCheckChaoXing/i18n/base.json
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"ios": {
|
||||
"name": "工具箱"
|
||||
},
|
||||
"android": {
|
||||
"name": "工具箱"
|
||||
},
|
||||
"common": {
|
||||
"name": "工具箱"
|
||||
}
|
||||
}
|
||||
10
HuajisheCheckChaoXing/miniapp/android/i18nInfo.json
Normal file
10
HuajisheCheckChaoXing/miniapp/android/i18nInfo.json
Normal file
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"base": {
|
||||
"ios": {
|
||||
"name": "工具箱"
|
||||
},
|
||||
"android": {
|
||||
"name": "工具箱"
|
||||
}
|
||||
}
|
||||
}
|
||||
10
HuajisheCheckChaoXing/miniapp/ios/i18nInfo.json
Normal file
10
HuajisheCheckChaoXing/miniapp/ios/i18nInfo.json
Normal file
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"base": {
|
||||
"ios": {
|
||||
"name": "工具箱"
|
||||
},
|
||||
"android": {
|
||||
"name": "工具箱"
|
||||
}
|
||||
}
|
||||
}
|
||||
13
HuajisheCheckChaoXing/miniprogram_npm/dayjs/index.js
Normal file
13
HuajisheCheckChaoXing/miniprogram_npm/dayjs/index.js
Normal file
File diff suppressed because one or more lines are too long
1
HuajisheCheckChaoXing/miniprogram_npm/dayjs/index.js.map
Normal file
1
HuajisheCheckChaoXing/miniprogram_npm/dayjs/index.js.map
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,52 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
|
||||
### ActionSheet Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
style | Object | - | CSS(Cascading Style Sheets) | N
|
||||
custom-style | Object | - | CSS(Cascading Style Sheets),used to set style on virtual component | N
|
||||
align | String | center | `0.29.0`。options: center/left | N
|
||||
cancel-text | String | - | \- | N
|
||||
count | Number | 8 | \- | N
|
||||
description | String | - | `0.29.0` | N
|
||||
items | Array | - | required。Typescript:`Array<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 | -
|
||||
@@ -0,0 +1,140 @@
|
||||
---
|
||||
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 | -
|
||||
87
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.d.ts
vendored
Normal file
87
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.d.ts
vendored
Normal file
@@ -0,0 +1,87 @@
|
||||
import { SuperComponent } from '../common/src/index';
|
||||
export default class ActionSheet extends SuperComponent {
|
||||
static show: (options: import("./show").ActionSheetShowOption) => WechatMiniprogram.Component.TrivialInstance;
|
||||
behaviors: string[];
|
||||
externalClasses: string[];
|
||||
properties: {
|
||||
align?: {
|
||||
type: StringConstructor;
|
||||
value?: "center" | "left";
|
||||
};
|
||||
cancelText?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
count?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
description?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
items: {
|
||||
type: ArrayConstructor;
|
||||
value?: (string | import("./type").ActionSheetItem)[];
|
||||
required?: boolean;
|
||||
};
|
||||
popupProps?: {
|
||||
type: ObjectConstructor;
|
||||
value?: import("../popup").TdPopupProps;
|
||||
};
|
||||
showCancel?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
showOverlay?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
theme?: {
|
||||
type: StringConstructor;
|
||||
value?: "list" | "grid";
|
||||
};
|
||||
usingCustomNavbar?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
visible: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
required?: boolean;
|
||||
};
|
||||
defaultVisible: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
required?: boolean;
|
||||
};
|
||||
};
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
gridThemeItems: any[];
|
||||
currentSwiperIndex: number;
|
||||
defaultPopUpProps: {};
|
||||
defaultPopUpzIndex: number;
|
||||
};
|
||||
controlledProps: {
|
||||
key: string;
|
||||
event: string;
|
||||
}[];
|
||||
observers: {
|
||||
'visible, items'(visible: boolean): void;
|
||||
};
|
||||
methods: {
|
||||
init(): void;
|
||||
memoInitialData(): void;
|
||||
splitGridThemeActions(): void;
|
||||
show(options: any): void;
|
||||
close(): void;
|
||||
onPopupVisibleChange({ detail }: {
|
||||
detail: any;
|
||||
}): void;
|
||||
onSwiperChange(e: WechatMiniprogram.TouchEvent): void;
|
||||
onSelect(event: WechatMiniprogram.TouchEvent): void;
|
||||
onCancel(): void;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
import { chunk } from '../common/utils';
|
||||
import { SuperComponent, wxComponent } from '../common/src/index';
|
||||
import config from '../common/config';
|
||||
import { ActionSheetTheme, show } from './show';
|
||||
import props from './props';
|
||||
import useCustomNavbar from '../mixins/using-custom-navbar';
|
||||
const { prefix } = config;
|
||||
const name = `${prefix}-action-sheet`;
|
||||
let ActionSheet = class ActionSheet extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.behaviors = [useCustomNavbar];
|
||||
this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-cancel`];
|
||||
this.properties = Object.assign({}, props);
|
||||
this.data = {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
gridThemeItems: [],
|
||||
currentSwiperIndex: 0,
|
||||
defaultPopUpProps: {},
|
||||
defaultPopUpzIndex: 11500,
|
||||
};
|
||||
this.controlledProps = [
|
||||
{
|
||||
key: 'visible',
|
||||
event: 'visible-change',
|
||||
},
|
||||
];
|
||||
this.observers = {
|
||||
'visible, items'(visible) {
|
||||
if (!visible)
|
||||
return;
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
this.methods = {
|
||||
init() {
|
||||
this.memoInitialData();
|
||||
this.splitGridThemeActions();
|
||||
},
|
||||
memoInitialData() {
|
||||
this.initialData = Object.assign(Object.assign({}, this.properties), this.data);
|
||||
},
|
||||
splitGridThemeActions() {
|
||||
if (this.data.theme !== ActionSheetTheme.Grid)
|
||||
return;
|
||||
this.setData({
|
||||
gridThemeItems: chunk(this.data.items, this.data.count),
|
||||
});
|
||||
},
|
||||
show(options) {
|
||||
this.setData(Object.assign(Object.assign(Object.assign({}, this.initialData), options), { visible: true }));
|
||||
this.splitGridThemeActions();
|
||||
this.autoClose = true;
|
||||
this._trigger('visible-change', { visible: true });
|
||||
},
|
||||
close() {
|
||||
this.triggerEvent('close', { trigger: 'command' });
|
||||
this._trigger('visible-change', { visible: false });
|
||||
},
|
||||
onPopupVisibleChange({ detail }) {
|
||||
if (!detail.visible) {
|
||||
this.triggerEvent('close', { trigger: 'overlay' });
|
||||
this._trigger('visible-change', { visible: false });
|
||||
}
|
||||
if (this.autoClose) {
|
||||
this.setData({ visible: false });
|
||||
this.autoClose = false;
|
||||
}
|
||||
},
|
||||
onSwiperChange(e) {
|
||||
const { current } = e.detail;
|
||||
this.setData({
|
||||
currentSwiperIndex: current,
|
||||
});
|
||||
},
|
||||
onSelect(event) {
|
||||
const { currentSwiperIndex, items, gridThemeItems, count, theme } = this.data;
|
||||
const { index } = event.currentTarget.dataset;
|
||||
const isSwiperMode = theme === ActionSheetTheme.Grid;
|
||||
const item = isSwiperMode ? gridThemeItems[currentSwiperIndex][index] : items[index];
|
||||
const realIndex = isSwiperMode ? index + currentSwiperIndex * count : index;
|
||||
if (item) {
|
||||
this.triggerEvent('selected', { selected: item, index: realIndex });
|
||||
if (!item.disabled) {
|
||||
this.triggerEvent('close', { trigger: 'select' });
|
||||
this._trigger('visible-change', { visible: false });
|
||||
}
|
||||
}
|
||||
},
|
||||
onCancel() {
|
||||
this.triggerEvent('cancel');
|
||||
if (this.autoClose) {
|
||||
this.setData({ visible: false });
|
||||
this.autoClose = false;
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
ActionSheet.show = show;
|
||||
ActionSheet = __decorate([
|
||||
wxComponent()
|
||||
], ActionSheet);
|
||||
export default ActionSheet;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {
|
||||
"t-icon": "../icon/icon",
|
||||
"t-popup": "../popup/popup",
|
||||
"t-grid": "../grid/grid",
|
||||
"t-grid-item": "../grid-item/grid-item"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
<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>
|
||||
@@ -0,0 +1,19 @@
|
||||
var getListThemeItemClass = function (props) {
|
||||
var classPrefix = props.classPrefix;
|
||||
var item = props.item;
|
||||
var prefix = props.prefix;
|
||||
var classList = [classPrefix + '__list-item'];
|
||||
if (item.disabled) {
|
||||
classList.push(prefix + '-is-disabled');
|
||||
}
|
||||
return classList.join(' ');
|
||||
};
|
||||
|
||||
var isImage = function (name) {
|
||||
return name.indexOf('/') !== -1;
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
getListThemeItemClass: getListThemeItemClass,
|
||||
isImage: isImage,
|
||||
};
|
||||
@@ -0,0 +1,169 @@
|
||||
.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;
|
||||
}
|
||||
8
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/action-sheet/index.d.ts
vendored
Normal file
8
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/action-sheet/index.d.ts
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
/// <reference types="miniprogram-api-typings" />
|
||||
import { ActionSheetItem, ActionSheetTheme, ActionSheetShowOption } from './show';
|
||||
export { ActionSheetItem, ActionSheetTheme, ActionSheetShowOption };
|
||||
declare const _default: {
|
||||
show(options: ActionSheetShowOption): WechatMiniprogram.Component.TrivialInstance;
|
||||
close(options: ActionSheetShowOption): void;
|
||||
};
|
||||
export default _default;
|
||||
@@ -0,0 +1,10 @@
|
||||
import { show, close, ActionSheetTheme } from './show';
|
||||
export { ActionSheetTheme };
|
||||
export default {
|
||||
show(options) {
|
||||
return show(options);
|
||||
},
|
||||
close(options) {
|
||||
return close(options);
|
||||
},
|
||||
};
|
||||
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/action-sheet/props.d.ts
vendored
Normal file
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/action-sheet/props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdActionSheetProps } from './type';
|
||||
declare const props: TdActionSheetProps;
|
||||
export default props;
|
||||
@@ -0,0 +1,53 @@
|
||||
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;
|
||||
31
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/action-sheet/show.d.ts
vendored
Normal file
31
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/action-sheet/show.d.ts
vendored
Normal file
@@ -0,0 +1,31 @@
|
||||
/// <reference types="miniprogram-api-typings" />
|
||||
/// <reference types="miniprogram-api-typings" />
|
||||
export interface ActionSheetItem {
|
||||
label: string;
|
||||
color?: string;
|
||||
disabled?: boolean;
|
||||
icon?: string;
|
||||
}
|
||||
declare type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
|
||||
export declare enum ActionSheetTheme {
|
||||
List = "list",
|
||||
Grid = "grid"
|
||||
}
|
||||
interface ActionSheetProps {
|
||||
align: 'center' | 'left';
|
||||
cancelText?: string;
|
||||
count?: number;
|
||||
description: string;
|
||||
items: Array<string | ActionSheetItem>;
|
||||
showCancel?: boolean;
|
||||
theme?: ActionSheetTheme;
|
||||
visible: boolean;
|
||||
defaultVisible?: boolean;
|
||||
}
|
||||
export interface ActionSheetShowOption extends Omit<ActionSheetProps, 'visible'> {
|
||||
context?: Context;
|
||||
selector?: string;
|
||||
}
|
||||
export declare const show: (options: ActionSheetShowOption) => WechatMiniprogram.Component.TrivialInstance;
|
||||
export declare const close: (options: ActionSheetShowOption) => void;
|
||||
export {};
|
||||
@@ -0,0 +1,33 @@
|
||||
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();
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,51 @@
|
||||
<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>
|
||||
@@ -0,0 +1,20 @@
|
||||
<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>
|
||||
61
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/action-sheet/type.d.ts
vendored
Normal file
61
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/action-sheet/type.d.ts
vendored
Normal file
@@ -0,0 +1,61 @@
|
||||
import { PopupProps } from '../popup/index';
|
||||
export interface TdActionSheetProps {
|
||||
align?: {
|
||||
type: StringConstructor;
|
||||
value?: 'center' | 'left';
|
||||
};
|
||||
cancelText?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
count?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
description?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
items: {
|
||||
type: ArrayConstructor;
|
||||
value?: Array<string | ActionSheetItem>;
|
||||
required?: boolean;
|
||||
};
|
||||
popupProps?: {
|
||||
type: ObjectConstructor;
|
||||
value?: PopupProps;
|
||||
};
|
||||
showCancel?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
showOverlay?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
theme?: {
|
||||
type: StringConstructor;
|
||||
value?: 'list' | 'grid';
|
||||
};
|
||||
usingCustomNavbar?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
visible: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
required?: boolean;
|
||||
};
|
||||
defaultVisible: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
required?: boolean;
|
||||
};
|
||||
}
|
||||
export interface ActionSheetItem {
|
||||
label: string;
|
||||
color?: string;
|
||||
disabled?: boolean;
|
||||
icon?: string;
|
||||
suffixIcon?: string;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export {};
|
||||
28
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.d.ts
vendored
Normal file
28
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.d.ts
vendored
Normal file
@@ -0,0 +1,28 @@
|
||||
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||
export default class AvatarGroup extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
properties: import("./type").TdAvatarGroupProps;
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
hasChild: boolean;
|
||||
length: number;
|
||||
className: string;
|
||||
};
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
relations: RelationsOptions;
|
||||
lifetimes: {
|
||||
attached(): void;
|
||||
ready(): void;
|
||||
};
|
||||
observers: {
|
||||
'cascading, size'(): void;
|
||||
};
|
||||
methods: {
|
||||
setClass(): void;
|
||||
handleMax(): void;
|
||||
onCollapsedItemClick(e: WechatMiniprogram.CustomEvent): void;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
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;
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "shared",
|
||||
"usingComponents": {
|
||||
"t-avatar": "../avatar/avatar"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
<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>
|
||||
@@ -0,0 +1,214 @@
|
||||
.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-group {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper,
|
||||
.t-avatar-group-offset-right .t-avatar__wrapper {
|
||||
padding: var(--td-avatar-group-line-spacing, 4rpx) 0;
|
||||
}
|
||||
.t-avatar-group-offset-left-small,
|
||||
.t-avatar-group-offset-right-small {
|
||||
--td-avatar-margin-left: var(--td-avatar-group-margin-left-small, -16rpx);
|
||||
}
|
||||
.t-avatar-group-offset-left-medium,
|
||||
.t-avatar-group-offset-right-medium {
|
||||
--td-avatar-margin-left: var(--td-avatar-group-margin-left-medium, -16rpx);
|
||||
}
|
||||
.t-avatar-group-offset-left-large,
|
||||
.t-avatar-group-offset-right-large {
|
||||
--td-avatar-margin-left: var(--td-avatar-group-margin-left-large, -16rpx);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(1) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 1);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(2) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 2);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(3) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 3);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(4) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 4);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(5) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 5);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(6) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 6);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(7) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 7);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(8) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 8);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(9) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 9);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(10) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 10);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(11) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 11);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(12) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 12);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(13) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 13);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(14) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 14);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(15) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 15);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(16) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 16);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(17) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 17);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(18) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 18);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(19) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 19);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(20) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 20);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(21) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 21);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(22) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 22);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(23) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 23);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(24) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 24);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(25) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 25);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(26) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 26);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(27) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 27);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(28) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 28);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(29) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 29);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(30) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 30);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(31) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 31);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(32) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 32);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(33) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 33);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(34) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 34);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(35) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 35);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(36) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 36);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(37) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 37);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(38) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 38);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(39) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 39);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(40) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 40);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(41) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 41);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(42) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 42);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(43) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 43);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(44) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 44);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(45) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 45);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(46) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 46);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(47) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 47);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(48) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 48);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(49) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 49);
|
||||
}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(50) {
|
||||
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 50);
|
||||
}
|
||||
.t-avatar-group__collapse--slot,
|
||||
.t-avatar-group__collapse--default {
|
||||
z-index: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
.t-avatar-group__collapse--slot {
|
||||
float: left;
|
||||
}
|
||||
.t-avatar-group__collapse--slot:not(:empty) + .t-avatar-group__collapse--default {
|
||||
display: none;
|
||||
float: left;
|
||||
}
|
||||
.t-avatar-group__collapse--slot:empty + .t-avatar-group__collapse--default {
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/avatar-group/props.d.ts
vendored
Normal file
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/avatar-group/props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdAvatarGroupProps } from './type';
|
||||
declare const props: TdAvatarGroupProps;
|
||||
export default props;
|
||||
@@ -0,0 +1,20 @@
|
||||
const props = {
|
||||
cascading: {
|
||||
type: String,
|
||||
value: 'left-up',
|
||||
},
|
||||
collapseAvatar: {
|
||||
type: String,
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
},
|
||||
shape: {
|
||||
type: String,
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
24
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/avatar-group/type.d.ts
vendored
Normal file
24
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/avatar-group/type.d.ts
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
import { ShapeEnum } from '../common/common';
|
||||
export interface TdAvatarGroupProps {
|
||||
cascading?: {
|
||||
type: StringConstructor;
|
||||
value?: CascadingValue;
|
||||
};
|
||||
collapseAvatar?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
max?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
shape?: {
|
||||
type: StringConstructor;
|
||||
value?: ShapeEnum;
|
||||
};
|
||||
size?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
}
|
||||
export declare type CascadingValue = 'left-up' | 'right-up';
|
||||
@@ -0,0 +1 @@
|
||||
export {};
|
||||
@@ -0,0 +1,91 @@
|
||||
:: 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 | -
|
||||
@@ -0,0 +1,151 @@
|
||||
---
|
||||
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 | -
|
||||
22
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/avatar/avatar.d.ts
vendored
Normal file
22
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/avatar/avatar.d.ts
vendored
Normal file
@@ -0,0 +1,22 @@
|
||||
/// <reference types="miniprogram-api-typings" />
|
||||
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||
export default class Avatar extends SuperComponent {
|
||||
options: WechatMiniprogram.Component.ComponentOptions;
|
||||
externalClasses: string[];
|
||||
properties: import("./type").TdAvatarProps;
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
isShow: boolean;
|
||||
zIndex: number;
|
||||
systemInfo: WechatMiniprogram.WindowInfo | WechatMiniprogram.SystemInfo;
|
||||
};
|
||||
relations: RelationsOptions;
|
||||
observers: {
|
||||
icon(icon: any): void;
|
||||
};
|
||||
methods: {
|
||||
hide(): void;
|
||||
onLoadError(e: WechatMiniprogram.CustomEvent): void;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
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;
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "shared",
|
||||
"usingComponents": {
|
||||
"t-icon": "../icon/icon",
|
||||
"t-badge": "../badge/badge",
|
||||
"t-image": "../image/image"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
<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>
|
||||
@@ -0,0 +1,30 @@
|
||||
module.exports = {
|
||||
getClass: function (classPrefix, size, shape, bordered) {
|
||||
var hasPx = (size || '').indexOf('px') > -1;
|
||||
var borderSize = hasPx ? 'medium' : size;
|
||||
var classNames = [
|
||||
classPrefix,
|
||||
classPrefix + (shape === 'round' ? '--round' : '--circle'),
|
||||
bordered ? classPrefix + '--border' + ' ' + classPrefix + '--border-' + borderSize : '',
|
||||
hasPx ? '' : classPrefix + '--' + size,
|
||||
];
|
||||
return classNames.join(' ');
|
||||
},
|
||||
|
||||
getSize: function (size = 'medium', systemInfo) {
|
||||
var res = getRegExp('^([0-9]+)(px|rpx)$').exec(size);
|
||||
|
||||
if (res && res.length >= 3) {
|
||||
var px = res[1];
|
||||
if (res[2] === 'rpx') {
|
||||
px = Math.floor((systemInfo.windowWidth * res[1]) / 750);
|
||||
}
|
||||
|
||||
return 'width:' + size + ';height:' + size + ';font-size:' + ((px / 8) * 3 + 2) + 'px';
|
||||
}
|
||||
},
|
||||
|
||||
getStyles: function (isShow) {
|
||||
return isShow ? '' : 'display: none;';
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,104 @@
|
||||
.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);
|
||||
}
|
||||
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/avatar/props.d.ts
vendored
Normal file
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/avatar/props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdAvatarProps } from './type';
|
||||
declare const props: TdAvatarProps;
|
||||
export default props;
|
||||
@@ -0,0 +1,35 @@
|
||||
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;
|
||||
41
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/avatar/type.d.ts
vendored
Normal file
41
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/avatar/type.d.ts
vendored
Normal file
@@ -0,0 +1,41 @@
|
||||
import { BadgeProps } from '../badge/index';
|
||||
import { ImageProps } from '../image/index';
|
||||
import { ShapeEnum } from '../common/common';
|
||||
export interface TdAvatarProps {
|
||||
alt?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
badgeProps?: {
|
||||
type: ObjectConstructor;
|
||||
value?: BadgeProps;
|
||||
};
|
||||
bordered?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
hideOnLoadFailed?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
icon?: {
|
||||
type: null;
|
||||
value?: string | object;
|
||||
};
|
||||
image?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
imageProps?: {
|
||||
type: ObjectConstructor;
|
||||
value?: ImageProps;
|
||||
};
|
||||
shape?: {
|
||||
type: StringConstructor;
|
||||
value?: ShapeEnum;
|
||||
};
|
||||
size?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export {};
|
||||
@@ -0,0 +1,41 @@
|
||||
:: 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 | -
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
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 | -
|
||||
26
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/back-top/back-top.d.ts
vendored
Normal file
26
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/back-top/back-top.d.ts
vendored
Normal file
@@ -0,0 +1,26 @@
|
||||
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||
export default class BackTop extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
properties: import("./type").TdBackTopProps;
|
||||
relations: RelationsOptions;
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
_icon: any;
|
||||
hidden: boolean;
|
||||
};
|
||||
observers: {
|
||||
icon(): void;
|
||||
scrollTop(value: number): void;
|
||||
};
|
||||
lifetimes: {
|
||||
ready(): void;
|
||||
};
|
||||
methods: {
|
||||
setIcon(v: any): void;
|
||||
toTop(): void;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
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;
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {
|
||||
"t-icon": "../icon/icon"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
<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>
|
||||
@@ -0,0 +1,91 @@
|
||||
.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;
|
||||
}
|
||||
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/back-top/props.d.ts
vendored
Normal file
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/back-top/props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdBackTopProps } from './type';
|
||||
declare const props: TdBackTopProps;
|
||||
export default props;
|
||||
@@ -0,0 +1,31 @@
|
||||
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;
|
||||
30
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/back-top/type.d.ts
vendored
Normal file
30
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/back-top/type.d.ts
vendored
Normal file
@@ -0,0 +1,30 @@
|
||||
export interface TdBackTopProps {
|
||||
fixed?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
icon?: {
|
||||
type: null;
|
||||
value?: string | boolean | object;
|
||||
};
|
||||
scrollTop?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
style?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
text?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
theme?: {
|
||||
type: StringConstructor;
|
||||
value?: 'round' | 'half-round' | 'round-dark' | 'half-round-dark';
|
||||
};
|
||||
visibilityHeight?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export {};
|
||||
@@ -0,0 +1,45 @@
|
||||
:: 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 | -
|
||||
@@ -0,0 +1,86 @@
|
||||
---
|
||||
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 | -
|
||||
21
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/badge/badge.d.ts
vendored
Normal file
21
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/badge/badge.d.ts
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
import { SuperComponent } from '../common/src/index';
|
||||
import type { TdBadgeProps } from './type';
|
||||
export interface BadgeProps extends TdBadgeProps {
|
||||
}
|
||||
export default class Badge extends SuperComponent {
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
externalClasses: string[];
|
||||
properties: TdBadgeProps;
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
value: string;
|
||||
labelID: string;
|
||||
descriptionID: string;
|
||||
};
|
||||
lifetimes: {
|
||||
ready(): void;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
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;
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
<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>
|
||||
@@ -0,0 +1,71 @@
|
||||
var getBadgeValue = function (props) {
|
||||
if (props.dot) {
|
||||
return '';
|
||||
}
|
||||
if (isNaN(props.count) || isNaN(props.maxCount)) {
|
||||
return props.count;
|
||||
}
|
||||
return parseInt(props.count) > props.maxCount ? props.maxCount + '+' : props.count;
|
||||
};
|
||||
|
||||
var hasUnit = function (unit) {
|
||||
return (
|
||||
unit.indexOf('px') > 0 ||
|
||||
unit.indexOf('rpx') > 0 ||
|
||||
unit.indexOf('em') > 0 ||
|
||||
unit.indexOf('rem') > 0 ||
|
||||
unit.indexOf('%') > 0 ||
|
||||
unit.indexOf('vh') > 0 ||
|
||||
unit.indexOf('vm') > 0
|
||||
);
|
||||
};
|
||||
|
||||
var getBadgeStyles = function (props) {
|
||||
var styleStr = '';
|
||||
if (props.color) {
|
||||
styleStr += 'background:' + props.color + ';';
|
||||
}
|
||||
if (props.offset[0]) {
|
||||
styleStr +=
|
||||
'left: calc(100% + ' + (hasUnit(props.offset[0].toString()) ? props.offset[0] : props.offset[0] + 'px') + ');';
|
||||
}
|
||||
if (props.offset[1]) {
|
||||
styleStr += 'top:' + (hasUnit(props.offset[1].toString()) ? props.offset[1] : props.offset[1] + 'px') + ';';
|
||||
}
|
||||
return styleStr;
|
||||
};
|
||||
|
||||
var getBadgeOuterClass = function (props) {
|
||||
var baseClass = 't-badge';
|
||||
var classNames = [baseClass, props.shape === 'ribbon' ? baseClass + '__ribbon-outer' : ''];
|
||||
return classNames.join(' ');
|
||||
};
|
||||
|
||||
var getBadgeInnerClass = function (props) {
|
||||
var baseClass = 't-badge';
|
||||
var classNames = [
|
||||
baseClass + '--basic',
|
||||
props.dot ? baseClass + '--dot' : '',
|
||||
baseClass + '--' + props.size,
|
||||
baseClass + '--' + props.shape,
|
||||
!props.dot && props.count ? baseClass + '--count' : '',
|
||||
];
|
||||
return classNames.join(' ');
|
||||
};
|
||||
|
||||
var isShowBadge = function (props) {
|
||||
if (props.dot) {
|
||||
return true;
|
||||
}
|
||||
if (!props.showZero && !isNaN(props.count) && parseInt(props.count) === 0) {
|
||||
return false;
|
||||
}
|
||||
if (props.count == null) return false;
|
||||
return true;
|
||||
};
|
||||
|
||||
module.exports.getBadgeValue = getBadgeValue;
|
||||
module.exports.getBadgeStyles = getBadgeStyles;
|
||||
module.exports.getBadgeOuterClass = getBadgeOuterClass;
|
||||
module.exports.getBadgeInnerClass = getBadgeInnerClass;
|
||||
module.exports.isShowBadge = isShowBadge;
|
||||
@@ -0,0 +1,113 @@
|
||||
.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))));
|
||||
}
|
||||
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/badge/index.d.ts
vendored
Normal file
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/badge/index.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
export * from './type';
|
||||
export * from './props';
|
||||
export * from './badge';
|
||||
@@ -0,0 +1,3 @@
|
||||
export * from './type';
|
||||
export * from './props';
|
||||
export * from './badge';
|
||||
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/badge/props.d.ts
vendored
Normal file
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/badge/props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdBadgeProps } from './type';
|
||||
declare const props: TdBadgeProps;
|
||||
export default props;
|
||||
@@ -0,0 +1,41 @@
|
||||
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;
|
||||
42
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/badge/type.d.ts
vendored
Normal file
42
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/badge/type.d.ts
vendored
Normal file
@@ -0,0 +1,42 @@
|
||||
export interface TdBadgeProps {
|
||||
color?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
content?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
count?: {
|
||||
type: null;
|
||||
value?: string | number;
|
||||
};
|
||||
dot?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
externalClasses?: {
|
||||
type: ArrayConstructor;
|
||||
value?: ['t-class', 't-class-content', 't-class-count'];
|
||||
};
|
||||
maxCount?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
offset?: {
|
||||
type: ArrayConstructor;
|
||||
value?: Array<string | number>;
|
||||
};
|
||||
shape?: {
|
||||
type: StringConstructor;
|
||||
value?: 'circle' | 'square' | 'bubble' | 'ribbon';
|
||||
};
|
||||
showZero?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
size?: {
|
||||
type: StringConstructor;
|
||||
value?: 'medium' | 'large';
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export {};
|
||||
@@ -0,0 +1,232 @@
|
||||
---
|
||||
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 | -
|
||||
@@ -0,0 +1,234 @@
|
||||
---
|
||||
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 | -
|
||||
36
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/button/button.d.ts
vendored
Normal file
36
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/button/button.d.ts
vendored
Normal file
@@ -0,0 +1,36 @@
|
||||
import { SuperComponent } from '../common/src/index';
|
||||
import type { TdButtonProps } from './type';
|
||||
export interface ButtonProps extends TdButtonProps {
|
||||
}
|
||||
export default class Button extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
behaviors: string[];
|
||||
properties: TdButtonProps;
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
data: {
|
||||
prefix: string;
|
||||
className: string;
|
||||
classPrefix: string;
|
||||
};
|
||||
observers: {
|
||||
'theme, size, plain, block, shape, disabled, loading, variant'(): void;
|
||||
icon(icon: any): void;
|
||||
};
|
||||
lifetimes: {
|
||||
attached(): void;
|
||||
};
|
||||
methods: {
|
||||
setClass(): void;
|
||||
getuserinfo(e: any): void;
|
||||
contact(e: any): void;
|
||||
getphonenumber(e: any): void;
|
||||
error(e: any): void;
|
||||
opensetting(e: any): void;
|
||||
launchapp(e: any): void;
|
||||
chooseavatar(e: any): void;
|
||||
agreeprivacyauthorization(e: any): void;
|
||||
handleTap(e: any): void;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
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;
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {
|
||||
"t-icon": "../icon/icon",
|
||||
"t-loading": "../loading/loading"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
<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>
|
||||
@@ -0,0 +1,541 @@
|
||||
.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-button--size-extra-small {
|
||||
font-size: var(--td-button-extra-small-font-size, var(--td-font-size-base, 28rpx));
|
||||
padding-left: var(--td-button-extra-small-padding-horizontal, 16rpx);
|
||||
padding-right: var(--td-button-extra-small-padding-horizontal, 16rpx);
|
||||
height: var(--td-button-extra-small-height, 56rpx);
|
||||
line-height: var(--td-button-extra-small-height, 56rpx);
|
||||
}
|
||||
.t-button--size-extra-small .t-button__icon {
|
||||
font-size: var(--td-button-extra-small-icon-font-size, 36rpx);
|
||||
}
|
||||
.t-button--size-small {
|
||||
font-size: var(--td-button-small-font-size, var(--td-font-size-base, 28rpx));
|
||||
padding-left: var(--td-button-small-padding-horizontal, 24rpx);
|
||||
padding-right: var(--td-button-small-padding-horizontal, 24rpx);
|
||||
height: var(--td-button-small-height, 64rpx);
|
||||
line-height: var(--td-button-small-height, 64rpx);
|
||||
}
|
||||
.t-button--size-small .t-button__icon {
|
||||
font-size: var(--td-button-small-icon-font-size, 36rpx);
|
||||
}
|
||||
.t-button--size-medium {
|
||||
font-size: var(--td-button-medium-font-size, var(--td-font-size-m, 32rpx));
|
||||
padding-left: var(--td-button-medium-padding-horizontal, 32rpx);
|
||||
padding-right: var(--td-button-medium-padding-horizontal, 32rpx);
|
||||
height: var(--td-button-medium-height, 80rpx);
|
||||
line-height: var(--td-button-medium-height, 80rpx);
|
||||
}
|
||||
.t-button--size-medium .t-button__icon {
|
||||
font-size: var(--td-button-medium-icon-font-size, 40rpx);
|
||||
}
|
||||
.t-button--size-large {
|
||||
font-size: var(--td-button-large-font-size, var(--td-font-size-m, 32rpx));
|
||||
padding-left: var(--td-button-large-padding-horizontal, 40rpx);
|
||||
padding-right: var(--td-button-large-padding-horizontal, 40rpx);
|
||||
height: var(--td-button-large-height, 96rpx);
|
||||
line-height: var(--td-button-large-height, 96rpx);
|
||||
}
|
||||
.t-button--size-large .t-button__icon {
|
||||
font-size: var(--td-button-large-icon-font-size, 48rpx);
|
||||
}
|
||||
.t-button--default {
|
||||
color: var(--td-button-default-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
|
||||
background-color: var(--td-button-default-bg-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
|
||||
border-color: var(--td-button-default-border-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
|
||||
}
|
||||
.t-button--default::after {
|
||||
border-width: var(--td-button-border-width, 4rpx);
|
||||
border-color: var(--td-button-default-border-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
|
||||
}
|
||||
.t-button--default.t-button--hover {
|
||||
z-index: 0;
|
||||
}
|
||||
.t-button--default.t-button--hover,
|
||||
.t-button--default.t-button--hover::after {
|
||||
background-color: var(--td-button-default-active-bg-color, var(--td-bg-color-component-active, var(--td-gray-color-6, #a6a6a6)));
|
||||
border-color: var(--td-button-default-active-border-color, var(--td-bg-color-component-active, var(--td-gray-color-6, #a6a6a6)));
|
||||
}
|
||||
.t-button--default.t-button--disabled {
|
||||
color: var(--td-button-default-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
|
||||
background-color: var(--td-button-default-disabled-bg, var(--td-bg-color-component-disabled, var(--td-gray-color-2, #eeeeee)));
|
||||
}
|
||||
.t-button--default.t-button--disabled,
|
||||
.t-button--default.t-button--disabled::after {
|
||||
border-color: var(--td-button-default-disabled-border-color, var(--td-bg-color-component-disabled, var(--td-gray-color-2, #eeeeee)));
|
||||
}
|
||||
.t-button--primary {
|
||||
color: var(--td-button-primary-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
|
||||
background-color: var(--td-button-primary-bg-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
border-color: var(--td-button-primary-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
}
|
||||
.t-button--primary::after {
|
||||
border-width: var(--td-button-border-width, 4rpx);
|
||||
border-color: var(--td-button-primary-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
}
|
||||
.t-button--primary.t-button--hover {
|
||||
z-index: 0;
|
||||
}
|
||||
.t-button--primary.t-button--hover,
|
||||
.t-button--primary.t-button--hover::after {
|
||||
background-color: var(--td-button-primary-active-bg-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
|
||||
border-color: var(--td-button-primary-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
|
||||
}
|
||||
.t-button--primary.t-button--disabled {
|
||||
color: var(--td-button-primary-disabled-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
|
||||
background-color: var(--td-button-primary-disabled-bg, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||
}
|
||||
.t-button--primary.t-button--disabled,
|
||||
.t-button--primary.t-button--disabled::after {
|
||||
border-color: var(--td-button-primary-disabled-border-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||
}
|
||||
.t-button--light {
|
||||
color: var(--td-button-light-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
background-color: var(--td-button-light-bg-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
|
||||
border-color: var(--td-button-light-border-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
|
||||
}
|
||||
.t-button--light::after {
|
||||
border-width: var(--td-button-border-width, 4rpx);
|
||||
border-color: var(--td-button-light-border-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
|
||||
}
|
||||
.t-button--light.t-button--hover {
|
||||
z-index: 0;
|
||||
}
|
||||
.t-button--light.t-button--hover,
|
||||
.t-button--light.t-button--hover::after {
|
||||
background-color: var(--td-button-light-active-bg-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff)));
|
||||
border-color: var(--td-button-light-active-border-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff)));
|
||||
}
|
||||
.t-button--light.t-button--disabled {
|
||||
color: var(--td-button-light-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||
background-color: var(--td-button-light-disabled-bg, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
|
||||
}
|
||||
.t-button--light.t-button--disabled,
|
||||
.t-button--light.t-button--disabled::after {
|
||||
border-color: var(--td-button-light-disabled-border-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
|
||||
}
|
||||
.t-button--danger {
|
||||
color: var(--td-button-danger-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
|
||||
background-color: var(--td-button-danger-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||
border-color: var(--td-button-danger-border-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||
}
|
||||
.t-button--danger::after {
|
||||
border-width: var(--td-button-border-width, 4rpx);
|
||||
border-color: var(--td-button-danger-border-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||
}
|
||||
.t-button--danger.t-button--hover {
|
||||
z-index: 0;
|
||||
}
|
||||
.t-button--danger.t-button--hover,
|
||||
.t-button--danger.t-button--hover::after {
|
||||
background-color: var(--td-button-danger-active-bg-color, var(--td-error-color-active, var(--td-error-color-7, #ad352f)));
|
||||
border-color: var(--td-button-danger-active-border-color, var(--td-error-color-active, var(--td-error-color-7, #ad352f)));
|
||||
}
|
||||
.t-button--danger.t-button--disabled {
|
||||
color: var(--td-button-danger-disabled-color, var(--td-font-white-1, #ffffff));
|
||||
background-color: var(--td-button-danger-disabled-bg, var(--td-error-color-3, #ffb9b0));
|
||||
}
|
||||
.t-button--danger.t-button--disabled,
|
||||
.t-button--danger.t-button--disabled::after {
|
||||
border-color: var(--td-button-danger-disabled-border-color, var(--td-error-color-3, #ffb9b0));
|
||||
}
|
||||
.t-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
background-image: none;
|
||||
transition: all 0.3s;
|
||||
touch-action: manipulation;
|
||||
border-radius: var(--td-button-border-radius, var(--td-radius-default, 12rpx));
|
||||
outline: none;
|
||||
font-family: PingFang SC, Microsoft YaHei, Arial Regular;
|
||||
font-weight: var(--td-button-font-weight, 600);
|
||||
vertical-align: top;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
/* stylelint-disable-next-line */
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.t-button::after {
|
||||
border-radius: calc(var(--td-button-border-radius, var(--td-radius-default, 12rpx)) * 2);
|
||||
}
|
||||
.t-button--text {
|
||||
color: var(--td-button-default-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
|
||||
background-color: transparent;
|
||||
}
|
||||
.t-button--text,
|
||||
.t-button--text::after {
|
||||
border: 0;
|
||||
}
|
||||
.t-button--text.t-button--hover,
|
||||
.t-button--text.t-button--hover::after {
|
||||
background-color: var(--td-button-default-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
|
||||
}
|
||||
.t-button--text.t-button--primary {
|
||||
color: var(--td-button-primary-text-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
background-color: transparent;
|
||||
}
|
||||
.t-button--text.t-button--primary.t-button--hover,
|
||||
.t-button--text.t-button--primary.t-button--hover::after {
|
||||
background-color: var(--td-button-primary-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
|
||||
}
|
||||
.t-button--text.t-button--primary.t-button--disabled {
|
||||
color: var(--td-button-primary-text-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||
background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
|
||||
}
|
||||
.t-button--text.t-button--danger {
|
||||
color: var(--td-button-danger-text-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||
background-color: transparent;
|
||||
}
|
||||
.t-button--text.t-button--danger.t-button--hover,
|
||||
.t-button--text.t-button--danger.t-button--hover::after {
|
||||
background-color: var(--td-button-danger-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
|
||||
}
|
||||
.t-button--text.t-button--danger.t-button--disabled {
|
||||
color: var(--td-button-danger-text-disabled-color, var(--td-button-danger-disabled-color, var(--td-font-white-1, #ffffff)));
|
||||
background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
|
||||
}
|
||||
.t-button--text.t-button--light {
|
||||
color: var(--td-button-light-text-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
background-color: transparent;
|
||||
}
|
||||
.t-button--text.t-button--light.t-button--hover,
|
||||
.t-button--text.t-button--light.t-button--hover::after {
|
||||
background-color: var(--td-button-light-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
|
||||
}
|
||||
.t-button--text.t-button--disabled {
|
||||
color: var(--td-button-default-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
|
||||
}
|
||||
.t-button--outline {
|
||||
color: var(--td-button-default-outline-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
|
||||
background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
|
||||
}
|
||||
.t-button--outline,
|
||||
.t-button--outline::after {
|
||||
border-color: var(--td-button-default-outline-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
|
||||
}
|
||||
.t-button--outline.t-button--hover,
|
||||
.t-button--outline.t-button--hover::after {
|
||||
background-color: var(--td-button-default-outline-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
|
||||
border-color: var(--td-button-default-outline-active-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
|
||||
}
|
||||
.t-button--outline.t-button--disabled {
|
||||
color: var(--td-button-default-outline-disabled-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
|
||||
}
|
||||
.t-button--outline.t-button--disabled,
|
||||
.t-button--outline.t-button--disabled::after {
|
||||
border-color: var(--td-button-default-outline-disabled-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
|
||||
}
|
||||
.t-button--outline.t-button--primary {
|
||||
color: var(--td-button-primary-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
}
|
||||
.t-button--outline.t-button--primary,
|
||||
.t-button--outline.t-button--primary::after {
|
||||
border-color: var(--td-button-primary-outline-border-color, var(--td-button-primary-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))));
|
||||
}
|
||||
.t-button--outline.t-button--primary.t-button--hover {
|
||||
color: var(--td-button-primary-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
|
||||
}
|
||||
.t-button--outline.t-button--primary.t-button--hover::after {
|
||||
background-color: var(--td-button-primary-outline-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
|
||||
border-color: var(--td-button-primary-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
|
||||
}
|
||||
.t-button--outline.t-button--primary.t-button--disabled {
|
||||
background-color: transparent;
|
||||
color: var(--td-button-primary-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||
}
|
||||
.t-button--outline.t-button--primary.t-button--disabled,
|
||||
.t-button--outline.t-button--primary.t-button--disabled::after {
|
||||
border-color: var(--td-button-primary-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||
}
|
||||
.t-button--outline.t-button--danger {
|
||||
color: var(--td-button-danger-outline-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||
}
|
||||
.t-button--outline.t-button--danger,
|
||||
.t-button--outline.t-button--danger::after {
|
||||
border-color: var(--td-button-danger-outline-border-color, var(--td-button-danger-outline-color, var(--td-error-color, var(--td-error-color-6, #d54941))));
|
||||
}
|
||||
.t-button--outline.t-button--danger.t-button--hover {
|
||||
color: var(--td-button-danger-outline-active-border-color, var(--td-error-color-active, var(--td-error-color-7, #ad352f)));
|
||||
}
|
||||
.t-button--outline.t-button--danger.t-button--hover::after {
|
||||
background-color: var(--td-button-danger-outline-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
|
||||
border-color: var(--td-button-danger-outline-active-border-color, var(--td-error-color-active, var(--td-error-color-7, #ad352f)));
|
||||
}
|
||||
.t-button--outline.t-button--danger.t-button--disabled {
|
||||
background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
|
||||
color: var(--td-button-danger-outline-disabled-color, var(--td-error-color-3, #ffb9b0));
|
||||
}
|
||||
.t-button--outline.t-button--danger.t-button--disabled,
|
||||
.t-button--outline.t-button--danger.t-button--disabled::after {
|
||||
border-color: var(--td-button-danger-outline-disabled-color, var(--td-error-color-3, #ffb9b0));
|
||||
}
|
||||
.t-button--outline.t-button--light {
|
||||
color: var(--td-button-light-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
background-color: var(--td-button-light-outline-bg-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
|
||||
}
|
||||
.t-button--outline.t-button--light,
|
||||
.t-button--outline.t-button--light::after {
|
||||
border-color: var(--td-button-light-outline-border-color, var(--td-button-light-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))));
|
||||
}
|
||||
.t-button--outline.t-button--light.t-button--hover {
|
||||
color: var(--td-button-light-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
|
||||
}
|
||||
.t-button--outline.t-button--light.t-button--hover,
|
||||
.t-button--outline.t-button--light.t-button--hover::after {
|
||||
background-color: var(--td-button-light-outline-active-bg-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff)));
|
||||
border-color: var(--td-button-light-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
|
||||
}
|
||||
.t-button--outline.t-button--light.t-button--disabled {
|
||||
background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
|
||||
color: var(--td-button-light-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||
}
|
||||
.t-button--outline.t-button--light.t-button--disabled,
|
||||
.t-button--outline.t-button--light.t-button--disabled::after {
|
||||
border-color: var(--td-button-light-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||
}
|
||||
.t-button--dashed {
|
||||
background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
|
||||
border-style: dashed;
|
||||
border-width: 2rpx;
|
||||
}
|
||||
.t-button--dashed::after {
|
||||
border: 0;
|
||||
}
|
||||
.t-button--dashed.t-button--hover,
|
||||
.t-button--dashed.t-button--hover::after {
|
||||
background-color: var(--td-button-default-outline-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
|
||||
border-color: var(--td-button-default-outline-active-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
|
||||
}
|
||||
.t-button--dashed.t-button--primary {
|
||||
color: var(--td-button-primary-dashed-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
}
|
||||
.t-button--dashed.t-button--primary,
|
||||
.t-button--dashed.t-button--primary::after {
|
||||
border-color: var(--td-button-primary-dashed-border-color, var(--td-button-primary-dashed-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))));
|
||||
}
|
||||
.t-button--dashed.t-button--primary.t-button--disabled {
|
||||
background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
|
||||
color: var(--td-button-primary-dashed-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||
}
|
||||
.t-button--dashed.t-button--primary.t-button--disabled,
|
||||
.t-button--dashed.t-button--primary.t-button--disabled::after {
|
||||
border-color: var(--td-button-primary-dashed-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||
}
|
||||
.t-button--dashed.t-button--danger {
|
||||
color: var(--td-button-danger-dashed-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||
}
|
||||
.t-button--dashed.t-button--danger,
|
||||
.t-button--dashed.t-button--danger::after {
|
||||
border-color: var(--td-button-danger-dashed-border-color, var(--td-button-danger-dashed-color, var(--td-error-color, var(--td-error-color-6, #d54941))));
|
||||
}
|
||||
.t-button--dashed.t-button--danger.t-button--disabled {
|
||||
background-color: transparent;
|
||||
color: var(--td-button-danger-dashed-disabled-color, var(--td-button-danger-disabled-color, var(--td-font-white-1, #ffffff)));
|
||||
}
|
||||
.t-button--dashed.t-button--danger.t-button--disabled::after {
|
||||
border-color: var(--td-button-danger-dashed-disabled-color, var(--td-button-danger-disabled-color, var(--td-font-white-1, #ffffff)));
|
||||
}
|
||||
.t-button--ghost {
|
||||
background-color: transparent;
|
||||
color: var(--td-button-ghost-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
|
||||
}
|
||||
.t-button--ghost,
|
||||
.t-button--ghost::after {
|
||||
border-color: var(--td-button-ghost-border-color, var(--td-button-ghost-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff))));
|
||||
}
|
||||
.t-button--ghost.t-button--default.t-button--hover {
|
||||
color: var(--td-button-ghost-hover-color, var(--td-font-white-2, rgba(255, 255, 255, 0.55)));
|
||||
}
|
||||
.t-button--ghost.t-button--default.t-button--hover,
|
||||
.t-button--ghost.t-button--default.t-button--hover::after {
|
||||
background-color: transparent;
|
||||
border-color: var(--td-button-ghost-hover-color, var(--td-font-white-2, rgba(255, 255, 255, 0.55)));
|
||||
}
|
||||
.t-button--ghost.t-button--primary {
|
||||
color: var(--td-button-ghost-primary-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
}
|
||||
.t-button--ghost.t-button--primary,
|
||||
.t-button--ghost.t-button--primary::after {
|
||||
border-color: var(--td-button-ghost-primary-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
}
|
||||
.t-button--ghost.t-button--primary.t-button--hover {
|
||||
color: var(--td-button-ghost-primary-hover-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
|
||||
}
|
||||
.t-button--ghost.t-button--primary.t-button--hover,
|
||||
.t-button--ghost.t-button--primary.t-button--hover::after {
|
||||
background-color: transparent;
|
||||
border-color: var(--td-button-ghost-primary-hover-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
|
||||
}
|
||||
.t-button--ghost.t-button--primary.t-button--text.t-button--hover,
|
||||
.t-button--ghost.t-button--primary.t-button--text.t-button--hover::after {
|
||||
background-color: var(--td-gray-color-10, #4b4b4b);
|
||||
}
|
||||
.t-button--ghost.t-button--primary.t-button--disabled {
|
||||
background-color: transparent;
|
||||
color: var(--td-button-ghost-disabled-color, var(--td-font-white-4, rgba(255, 255, 255, 0.22)));
|
||||
}
|
||||
.t-button--ghost.t-button--primary.t-button--disabled,
|
||||
.t-button--ghost.t-button--primary.t-button--disabled::after {
|
||||
border-color: var(--td-button-ghost-disabled-color, var(--td-font-white-4, rgba(255, 255, 255, 0.22)));
|
||||
}
|
||||
.t-button--ghost.t-button--danger {
|
||||
color: var(--td-button-ghost-danger-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||
}
|
||||
.t-button--ghost.t-button--danger,
|
||||
.t-button--ghost.t-button--danger::after {
|
||||
border-color: var(--td-button-ghost-danger-border-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||
}
|
||||
.t-button--ghost.t-button--danger.t-button--hover {
|
||||
color: var(--td-button-ghost-danger-hover-color, var(--td-error-color-active, var(--td-error-color-7, #ad352f)));
|
||||
}
|
||||
.t-button--ghost.t-button--danger.t-button--hover,
|
||||
.t-button--ghost.t-button--danger.t-button--hover::after {
|
||||
background-color: transparent;
|
||||
border-color: var(--td-button-ghost-danger-hover-color, var(--td-error-color-active, var(--td-error-color-7, #ad352f)));
|
||||
}
|
||||
.t-button--ghost.t-button--danger.t-button--text.t-button--hover,
|
||||
.t-button--ghost.t-button--danger.t-button--text.t-button--hover::after {
|
||||
background-color: var(--td-gray-color-10, #4b4b4b);
|
||||
}
|
||||
.t-button--ghost.t-button--danger.t-button--disabled {
|
||||
background-color: transparent;
|
||||
color: var(--td-button-ghost-disabled-color, var(--td-font-white-4, rgba(255, 255, 255, 0.22)));
|
||||
}
|
||||
.t-button--ghost.t-button--danger.t-button--disabled,
|
||||
.t-button--ghost.t-button--danger.t-button--disabled::after {
|
||||
border-color: var(--td-button-ghost-disabled-color, var(--td-font-white-4, rgba(255, 255, 255, 0.22)));
|
||||
}
|
||||
.t-button--ghost.t-button--default.t-button--text.t-button--hover,
|
||||
.t-button--ghost.t-button--default.t-button--text.t-button--hover::after {
|
||||
background-color: var(--td-gray-color-10, #4b4b4b);
|
||||
}
|
||||
.t-button--ghost.t-button--default.t-button--disabled {
|
||||
background-color: transparent;
|
||||
color: var(--td-button-ghost-disabled-color, var(--td-font-white-4, rgba(255, 255, 255, 0.22)));
|
||||
}
|
||||
.t-button--ghost.t-button--default.t-button--disabled,
|
||||
.t-button--ghost.t-button--default.t-button--disabled::after {
|
||||
border-color: var(--td-button-ghost-disabled-color, var(--td-font-white-4, rgba(255, 255, 255, 0.22)));
|
||||
}
|
||||
.t-button__loading + .t-button__content:not(:empty),
|
||||
.t-button__icon + .t-button__content:not(:empty) {
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
.t-button__icon {
|
||||
border-radius: var(--td-button-icon-border-radius, 8rpx);
|
||||
}
|
||||
.t-button--round.t-button--size-large {
|
||||
border-radius: calc(var(--td-button-large-height, 96rpx) / 2);
|
||||
}
|
||||
.t-button--round.t-button--size-large::after {
|
||||
border-radius: var(--td-button-large-height, 96rpx);
|
||||
}
|
||||
.t-button--round.t-button--size-medium {
|
||||
border-radius: calc(var(--td-button-medium-height, 80rpx) / 2);
|
||||
}
|
||||
.t-button--round.t-button--size-medium::after {
|
||||
border-radius: var(--td-button-medium-height, 80rpx);
|
||||
}
|
||||
.t-button--round.t-button--size-small {
|
||||
border-radius: calc(var(--td-button-small-height, 64rpx) / 2);
|
||||
}
|
||||
.t-button--round.t-button--size-small::after {
|
||||
border-radius: var(--td-button-small-height, 64rpx);
|
||||
}
|
||||
.t-button--round.t-button--size-extra-small {
|
||||
border-radius: calc(var(--td-button-extra-small-height, 56rpx) / 2);
|
||||
}
|
||||
.t-button--round.t-button--size-extra-small::after {
|
||||
border-radius: var(--td-button-extra-small-height, 56rpx);
|
||||
}
|
||||
.t-button--square {
|
||||
padding: 0;
|
||||
}
|
||||
.t-button--square.t-button--size-large {
|
||||
width: var(--td-button-large-height, 96rpx);
|
||||
}
|
||||
.t-button--square.t-button--size-medium {
|
||||
width: var(--td-button-medium-height, 80rpx);
|
||||
}
|
||||
.t-button--square.t-button--size-small {
|
||||
width: var(--td-button-small-height, 64rpx);
|
||||
}
|
||||
.t-button--square.t-button--size-extra-small {
|
||||
width: var(--td-button-extra-small-height, 56rpx);
|
||||
}
|
||||
.t-button--circle {
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.t-button--circle.t-button--size-large {
|
||||
width: var(--td-button-large-height, 96rpx);
|
||||
}
|
||||
.t-button--circle.t-button--size-large::after {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.t-button--circle.t-button--size-medium {
|
||||
width: var(--td-button-medium-height, 80rpx);
|
||||
}
|
||||
.t-button--circle.t-button--size-medium::after {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.t-button--circle.t-button--size-small {
|
||||
width: var(--td-button-small-height, 64rpx);
|
||||
}
|
||||
.t-button--circle.t-button--size-small::after {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.t-button--circle.t-button--size-extra-small {
|
||||
width: var(--td-button-extra-small-height, 56rpx);
|
||||
}
|
||||
.t-button--circle.t-button--size-extra-small::after {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.t-button--block {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
.t-button--disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.t-button__loading--wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.t-button.t-button--hover::after {
|
||||
z-index: -1;
|
||||
}
|
||||
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/button/index.d.ts
vendored
Normal file
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/button/index.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
export * from './props';
|
||||
export * from './type';
|
||||
export * from './button';
|
||||
@@ -0,0 +1,3 @@
|
||||
export * from './props';
|
||||
export * from './type';
|
||||
export * from './button';
|
||||
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/button/props.d.ts
vendored
Normal file
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/button/props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdButtonProps } from './type';
|
||||
declare const props: TdButtonProps;
|
||||
export default props;
|
||||
@@ -0,0 +1,108 @@
|
||||
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;
|
||||
115
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/button/type.d.ts
vendored
Normal file
115
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/button/type.d.ts
vendored
Normal file
@@ -0,0 +1,115 @@
|
||||
import { LoadingProps } from '../loading/index';
|
||||
export interface TdButtonProps {
|
||||
appParameter?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
block?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
content?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
customDataset?: {
|
||||
type: null;
|
||||
value?: null;
|
||||
};
|
||||
disabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
ghost?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
hoverClass?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
hoverStartTime?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
hoverStayTime?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
hoverStopPropagation?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
icon?: {
|
||||
type: null;
|
||||
value?: string | object;
|
||||
};
|
||||
lang?: {
|
||||
type: StringConstructor;
|
||||
value?: 'en' | 'zh_CN' | 'zh_TW';
|
||||
};
|
||||
loading?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
loadingProps?: {
|
||||
type: ObjectConstructor;
|
||||
value?: LoadingProps;
|
||||
};
|
||||
openType?: {
|
||||
type: StringConstructor;
|
||||
value?: 'contact' | 'share' | 'getPhoneNumber' | 'getUserInfo' | 'launchApp' | 'openSetting' | 'feedback' | 'chooseAvatar' | 'agreePrivacyAuthorization';
|
||||
};
|
||||
phoneNumberNoQuotaToast?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
sendMessageImg?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
sendMessagePath?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
sendMessageTitle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
sessionFrom?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
shape?: {
|
||||
type: StringConstructor;
|
||||
value?: 'rectangle' | 'square' | 'round' | 'circle';
|
||||
};
|
||||
showMessageCard?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
size?: {
|
||||
type: StringConstructor;
|
||||
value?: 'extra-small' | 'small' | 'medium' | 'large';
|
||||
};
|
||||
style?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
tId?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
theme?: {
|
||||
type: StringConstructor;
|
||||
value?: 'default' | 'primary' | 'danger' | 'light';
|
||||
};
|
||||
type?: {
|
||||
type: StringConstructor;
|
||||
value?: 'submit' | 'reset';
|
||||
};
|
||||
variant?: {
|
||||
type: StringConstructor;
|
||||
value?: 'base' | 'outline' | 'dashed' | 'text';
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user