feat: 添加卡片组件并优化页面样式
- 新增card-plugin组件,包含完整的卡片结构,支持头部、内容、底部插槽 - 组件具有显示更多功能,可控制内容展开收起 - 集成t-icon组件用于显示展开收起图标 - 修复popup-plugin组件的wxml格式缩进问题 - 调整processEntry页面高度计算,从calc(100vh - 50px)改为100vh
This commit is contained in:
64
miniprogram/pages/components/card-plugin/card-plugin.ts
Normal file
64
miniprogram/pages/components/card-plugin/card-plugin.ts
Normal 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,
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user