feat: 添加卡片组件并优化页面样式
- 新增card-plugin组件,包含完整的卡片结构,支持头部、内容、底部插槽 - 组件具有显示更多功能,可控制内容展开收起 - 集成t-icon组件用于显示展开收起图标 - 修复popup-plugin组件的wxml格式缩进问题 - 调整processEntry页面高度计算,从calc(100vh - 50px)改为100vh
This commit is contained in:
@@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"component": true,
|
||||||
|
"usingComponents": { "t-icon": "tdesign-miniprogram/icon/icon" }
|
||||||
|
}
|
||||||
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,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
18
miniprogram/pages/components/card-plugin/card-plugin.wxml
Normal file
18
miniprogram/pages/components/card-plugin/card-plugin.wxml
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
<view class="card_plugin {{className}}" style="border: 1rpx solid #ddd;margin-bottom: 12px;border-radius: 4px;{{style}};{{customStyle}}" bind:tap="click">
|
||||||
|
<view class="header" style="border-bottom: 1rpx solid #ddd;padding: 8px 12px;font-weight: bold;{{headerStyle || ''}}">
|
||||||
|
<slot name="header" />
|
||||||
|
</view>
|
||||||
|
<view class="content" style="padding:8px 12px;{{contentStyle || ''}}">
|
||||||
|
<view id="contentSlot" style="height: {{showMoreBar ? showMore ? 'auto' : 'calc(3em * 1.57)' : 'auto'}};overflow: hidden;">
|
||||||
|
<slot name="content" />
|
||||||
|
</view>
|
||||||
|
<view wx:if="{{showMoreBar}}" class="show-more" catch:tap="showMoreTap">
|
||||||
|
<view>{{showMore ? '收起' : '显示更多' }}</view>
|
||||||
|
<t-icon name="{{showMore ? 'chevron-up' : 'chevron-down' }}" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="footer" style="{{footerStyle||''}}">
|
||||||
|
<slot name="footer" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
34
miniprogram/pages/components/card-plugin/card-plugin.wxss
Normal file
34
miniprogram/pages/components/card-plugin/card-plugin.wxss
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
/* pages/components/card_plugin/card_plugin.wxss */
|
||||||
|
.header,
|
||||||
|
.footer {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header:empty,
|
||||||
|
.content:empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer > view {
|
||||||
|
border-top: 1rpx solid #ddd;
|
||||||
|
padding: 8px 0 0 12px;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer > view:empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.show-more {
|
||||||
|
color: #999;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 14px;
|
||||||
|
height: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.show-more:active {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
@@ -28,7 +28,7 @@
|
|||||||
.container {
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: calc(100vh - 50px);
|
height: 100vh;
|
||||||
/* height: calc(100vh - 50px - env(safe-area-inset-bottom)); */
|
/* height: calc(100vh - 50px - env(safe-area-inset-bottom)); */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user