feat: 添加卡片组件并优化页面样式

- 新增card-plugin组件,包含完整的卡片结构,支持头部、内容、底部插槽
- 组件具有显示更多功能,可控制内容展开收起
- 集成t-icon组件用于显示展开收起图标
- 修复popup-plugin组件的wxml格式缩进问题
- 调整processEntry页面高度计算,从calc(100vh - 50px)改为100vh
This commit is contained in:
zhengw
2026-01-09 17:15:08 +08:00
parent cf461d33f9
commit d36c005100
6 changed files with 131 additions and 11 deletions

View File

@@ -0,0 +1,64 @@
// pages/components/card_plugin/card_plugin.js
Component({
/**
* 组件的属性列表
*/
options: {
multipleSlots: true,
addGlobalClass: true,
},
properties: {
customStyle: null,
className: null,
headerStyle: null,
contentStyle: null,
footerStyle: null,
},
lifetimes: {
attached() {
setTimeout(() => {
this.getSlotHeight();
}, 100);
},
},
/**
* 组件的初始数据
*/
data: {
showMore: false,
},
/**
* 组件的方法列表
*/
methods: {
getSlotHeight() {
// 1. 创建组件内的节点查询器(必须加.in(this)
const query = wx.createSelectorQuery().in(this);
// 2. 查询插槽容器节点
query
.select("#contentSlot")
.boundingClientRect((rect) => {
if (rect) {
const height = rect.height; // 获取节点高度单位px
const fontSizeSetting = wx.getAppBaseInfo().fontSizeSetting;
this.setData({ showMoreBar: height >= fontSizeSetting * 3 * 1.57 });
// 可将高度通过自定义事件传递给父页面
// this.triggerEvent("slotHeightChange", { height });
} else {
// console.warn("未查询到插槽容器节点");
}
})
.exec(); // 执行查询
},
click(e: any) {
this.triggerEvent("tap", e);
},
showMoreTap() {
this.setData({
showMore: !this.data.showMore,
});
},
},
});