mirror of
https://gitee.com/ulthon/ulthon_admin.git
synced 2026-10-29 08:58:22 +08:00
fix(table): 卡片勾选收敛至勾位图标并消除勾选重渲闪烁(pro#4)
- 委托收敛勾位判定+快速路径 class 回显 - 勾位光标样式 - usercard/goodscard 勾位适配 - 两个技能文档契约同步
This commit is contained in:
@@ -17,8 +17,8 @@
|
||||
上下文契约(admin-table.js buildLayoutContext):
|
||||
- rows:行上下文数组,d 与表格行数据同构(含原始字段 + _cells/_operatHtml/_checked/_disabled)
|
||||
- list:列表上下文 {tableId, page, count, checkedAll}(Vue 形态不叫 _list)
|
||||
- 行根元素携带 data-table-id + data-id 两属性即获得统一行选中委托(点击卡片
|
||||
切换勾选,按钮/表单控件/layui 美化层自动豁免),选中态经 :class 高亮回显
|
||||
- 行根元素携带 data-table-id + data-id 两属性即获得统一行选中委托(点击勾位
|
||||
图标切换勾选,按钮/表单控件/layui 美化层自动豁免),选中态经 :class 高亮回显
|
||||
- _cells/_operatHtml 含渲染产物 HTML,必须用 v-html 输出;纯文本字段用
|
||||
{{ }} 原生插值(自动转义);处理函数内不得修改渲染上下文数据(冻结契约)
|
||||
- 事件无需自行绑定:操作按钮与 switch 经页面级委托和 form 事件天然生效
|
||||
@@ -40,13 +40,13 @@
|
||||
:class="{'ua-data-card-checked': d._checked, 'ua-data-card-disabled': d._disabled}">
|
||||
<!-- 图区:4:3 商品大图(撑满裁切不变形、圆角随卡片),无图或 404 时
|
||||
降级为占位图标;右上角悬浮状态开关(半透明白底小容器),
|
||||
左上角勾位图标按行选中态显示 -->
|
||||
左上角勾位图标常显(.ua-data-card-check:未选中灰可点、选中变绿) -->
|
||||
<div class="goodscard-cover">
|
||||
<span class="goodscard-img-empty" title="未设置图片"><i class="layui-icon layui-icon-picture"></i></span>
|
||||
<img v-if="d.logo" :src="d.logo" :alt="d.title" class="goodscard-img"
|
||||
@error="$event.target.style.display = 'none'">
|
||||
<div class="goodscard-status" v-html="d._cells.status"></div>
|
||||
<i v-if="d._checked" class="layui-icon layui-icon-ok-circle goodscard-check"></i>
|
||||
<i class="layui-icon layui-icon-ok-circle goodscard-check ua-data-card-check"></i>
|
||||
</div>
|
||||
<!-- 主体:名称(600 字重、最多两行截断)+ 分类徽标与销量同排 + 价格
|
||||
层级(折扣价红大字、市场价灰删除线)+ 库存徽标(stock<20 红
|
||||
@@ -144,7 +144,7 @@
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
color: #1e9fff;
|
||||
margin-left: 0;
|
||||
font-size: 22px;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
|
||||
@@ -11,8 +11,8 @@
|
||||
上下文契约(admin-table.js buildLayoutContext):
|
||||
- rows:行上下文数组,d 与表格行数据同构(含原始字段 + _cells/_operatHtml/_checked/_disabled)
|
||||
- list:列表上下文 {tableId, page, count, checkedAll}(Vue 形态不叫 _list)
|
||||
- 行根元素携带 data-table-id + data-id 两属性即获得统一行选中委托(点击卡片
|
||||
切换勾选,按钮/表单控件/layui 美化层自动豁免),选中态经 :class 高亮回显
|
||||
- 行根元素携带 data-table-id + data-id 两属性即获得统一行选中委托(点击勾位
|
||||
图标切换勾选,按钮/表单控件/layui 美化层自动豁免),选中态经 :class 高亮回显
|
||||
- _cells/_operatHtml 含渲染产物 HTML,必须用 v-html 输出;纯文本字段用
|
||||
{{ }} 原生插值(自动转义,与 laytpl 的 {{- }} 不同)
|
||||
- 事件无需自行绑定:操作按钮与 switch 经页面级委托和 form 事件天然生效
|
||||
@@ -45,6 +45,7 @@
|
||||
<span class="usercard-account" :title="d.username">{{ d.username }}</span>
|
||||
</div>
|
||||
<div class="usercard-status" v-html="d._cells.status"></div>
|
||||
<div class="ua-data-card-check"><i class="layui-icon layui-icon-ok-circle"></i></div>
|
||||
</div>
|
||||
<!-- 主体:紧凑小字段两列排布(手机无值显示 —,登录次数为 pill 徽标),
|
||||
备注有值才渲染、单行省略;均为纯文本原始字段插值 -->
|
||||
|
||||
Reference in New Issue
Block a user