mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-06-24 11:00:22 +08:00
style(components): 将按钮组件替换为链接样式
- 统一将页面中的 Button 组件替换为 a 标签,保持样式一致 - 添加统一的链接样式类 ops-link 和分隔符样式类 ops-sep - 更新操作列中按钮的样式,使用颜色、光标和文本装饰属性替代原有 props 配置 - 在多个文件中调整了操作项之间的分隔符显示逻辑 - 优化表格操作列渲染函数,去除冗余的 Button 属性配置 - 保持功能不变的前提下提升界面视觉一致性
This commit is contained in:
@@ -131,18 +131,17 @@
|
||||
title: "操作",
|
||||
key: "action",
|
||||
align: "center",
|
||||
width: 120,
|
||||
fixed: 'right',
|
||||
width: 200,
|
||||
render: (h, params) => {
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
"a",
|
||||
{
|
||||
props: {
|
||||
type: "info",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px",
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
|
||||
@@ -135,18 +135,17 @@
|
||||
title: "操作",
|
||||
key: "action",
|
||||
align: "center",
|
||||
width: 120,
|
||||
fixed: 'right',
|
||||
width: 200,
|
||||
render: (h, params) => {
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
"a",
|
||||
{
|
||||
props: {
|
||||
type: "info",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px",
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
|
||||
@@ -32,22 +32,18 @@
|
||||
<span slot="open">开</span>
|
||||
<span slot="close">关</span>
|
||||
</i-switch>
|
||||
<Button
|
||||
type="info"
|
||||
placement="right"
|
||||
<a
|
||||
style="color:#2d8cf0;cursor:pointer;text-decoration:none"
|
||||
@click="Template(item)"
|
||||
size="small"
|
||||
>编辑</Button
|
||||
>
|
||||
<Button
|
||||
type="success"
|
||||
placement="right"
|
||||
>编辑</a>
|
||||
<span style="margin: 0 8px; color: #dcdee2">|</span>
|
||||
<a
|
||||
style="color:#2d8cf0;cursor:pointer;text-decoration:none"
|
||||
@click="decorate(item)"
|
||||
size="small"
|
||||
>装修</Button
|
||||
>
|
||||
>装修</a>
|
||||
<span style="margin: 0 8px; color: #dcdee2">|</span>
|
||||
<Poptip confirm title="删除此模板?" @on-ok="delTemplate(item.id)">
|
||||
<Button type="error" size="small">删除</Button>
|
||||
<a style="color:#2d8cf0;cursor:pointer;text-decoration:none">删除</a>
|
||||
</Poptip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -625,16 +625,14 @@
|
||||
render: (h, params) => {
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
"a",
|
||||
{
|
||||
props: {
|
||||
type: "default",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
marginRight: "5px",
|
||||
display:
|
||||
this.selectImage === true ? "inline-block" : "none",
|
||||
display: this.selectImage === true ? "inline-block" : "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
@@ -645,13 +643,23 @@
|
||||
"选择"
|
||||
),
|
||||
h(
|
||||
"Button",
|
||||
"span",
|
||||
{
|
||||
props: {
|
||||
type: "info",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
margin: "0 8px",
|
||||
color: "#dcdee2",
|
||||
display: this.selectImage === true ? "inline-block" : "none",
|
||||
},
|
||||
},
|
||||
"|"
|
||||
),
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
marginRight: "5px",
|
||||
display: this.selectImage == true ? "none" : "inline-block",
|
||||
},
|
||||
@@ -664,13 +672,23 @@
|
||||
"下载"
|
||||
),
|
||||
h(
|
||||
"Button",
|
||||
"span",
|
||||
{
|
||||
props: {
|
||||
type: "error",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
margin: "0 8px",
|
||||
color: "#dcdee2",
|
||||
display: this.selectImage == true ? "none" : "inline-block",
|
||||
},
|
||||
},
|
||||
"|"
|
||||
),
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
display: this.selectImage == true ? "none" : "inline-block",
|
||||
},
|
||||
on: {
|
||||
@@ -789,16 +807,14 @@
|
||||
render: (h, params) => {
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
"a",
|
||||
{
|
||||
props: {
|
||||
type: "default",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
marginRight: "5px",
|
||||
display:
|
||||
this.selectImage === true ? "inline-block" : "none",
|
||||
display: this.selectImage === true ? "inline-block" : "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
|
||||
@@ -416,67 +416,85 @@
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
// width: 300,
|
||||
render: (h, params) => {
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "default",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px",
|
||||
display:
|
||||
this.selectImage === true ? "inline-block" : "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.selectedParams(params.row);
|
||||
},
|
||||
render: (h, params) => {
|
||||
return h("div", [
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
marginRight: "5px",
|
||||
display: this.selectImage === true ? "inline-block" : "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.selectedParams(params.row);
|
||||
},
|
||||
},
|
||||
"选择"
|
||||
),
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "info",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px",
|
||||
display: this.selectImage == true ? "none" : "inline-block",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.download(params.row);
|
||||
},
|
||||
},
|
||||
"选择"
|
||||
),
|
||||
h(
|
||||
"span",
|
||||
{
|
||||
style: {
|
||||
margin: "0 8px",
|
||||
color: "#dcdee2",
|
||||
display: this.selectImage === true ? "inline-block" : "none",
|
||||
},
|
||||
},
|
||||
"|"
|
||||
),
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
marginRight: "5px",
|
||||
display: this.selectImage == true ? "none" : "inline-block",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.download(params.row);
|
||||
},
|
||||
},
|
||||
"下载"
|
||||
),
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "error",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
display: this.selectImage == true ? "none" : "inline-block",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.remove(params.row);
|
||||
},
|
||||
},
|
||||
"下载"
|
||||
),
|
||||
h(
|
||||
"span",
|
||||
{
|
||||
style: {
|
||||
margin: "0 8px",
|
||||
color: "#dcdee2",
|
||||
display: this.selectImage == true ? "none" : "inline-block",
|
||||
},
|
||||
},
|
||||
"|"
|
||||
),
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
display: this.selectImage == true ? "none" : "inline-block",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.remove(params.row);
|
||||
},
|
||||
},
|
||||
"删除"
|
||||
),
|
||||
]);
|
||||
},
|
||||
},
|
||||
"删除"
|
||||
),
|
||||
]);
|
||||
},
|
||||
},
|
||||
],
|
||||
viewColumns: [
|
||||
@@ -583,13 +601,12 @@
|
||||
render: (h, params) => {
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
"a",
|
||||
{
|
||||
props: {
|
||||
type: "default",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
marginRight: "5px",
|
||||
display:
|
||||
this.selectImage === true ? "inline-block" : "none",
|
||||
|
||||
@@ -119,14 +119,12 @@ export default {
|
||||
if (!params.row.selected) {
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
"a",
|
||||
{
|
||||
props: {
|
||||
type: "success",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px",
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
@@ -140,14 +138,12 @@ export default {
|
||||
} else {
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
"a",
|
||||
{
|
||||
props: {
|
||||
type: "error",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px",
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
@@ -157,12 +153,14 @@ export default {
|
||||
},
|
||||
"关闭"
|
||||
),
|
||||
h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|"),
|
||||
h(
|
||||
"Button",
|
||||
"a",
|
||||
{
|
||||
props: {
|
||||
type: "info",
|
||||
size: "small",
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
|
||||
@@ -20,8 +20,15 @@
|
||||
<time style="margin-right: 20px" title="最后编辑时间">
|
||||
<i class="icon-time"></i>{{item.updateTime}}
|
||||
</time>
|
||||
<Button @click="edit(item)" type="info">修改</Button>
|
||||
<Button @click="remove(item.id)" type="error">删除</Button>
|
||||
<a
|
||||
style="color:#2d8cf0;cursor:pointer;text-decoration:none"
|
||||
@click="edit(item)"
|
||||
>修改</a>
|
||||
<span style="margin: 0 8px; color: #dcdee2">|</span>
|
||||
<a
|
||||
style="color:#2d8cf0;cursor:pointer;text-decoration:none"
|
||||
@click="remove(item.id)"
|
||||
>删除</a>
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
@@ -113,12 +120,14 @@
|
||||
</InputNumber>
|
||||
</td>
|
||||
<td class="nscs-table-handle">
|
||||
<Button @click="editRegion(item,index)" type="info" size="small"
|
||||
style="margin-bottom: 5px">修改
|
||||
</Button>
|
||||
<Button @click="removeTemplateChildren(index)" type="error"
|
||||
size="small" style="margin-bottom: 5px">删除
|
||||
</Button>
|
||||
<a
|
||||
@click="editRegion(item,index)"
|
||||
style="display:inline-block;margin-bottom:5px;color:#2d8cf0;cursor:pointer;text-decoration:none"
|
||||
>修改</a>
|
||||
<a
|
||||
@click="removeTemplateChildren(index)"
|
||||
style="display:inline-block;margin-bottom:5px;color:#2d8cf0;cursor:pointer;text-decoration:none"
|
||||
>删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -630,4 +639,11 @@ em {
|
||||
.baoyou {
|
||||
margin: 6px 10px 0;
|
||||
}
|
||||
/* 操作链接与分隔符不加粗 */
|
||||
.order tbody tr th .fr a {
|
||||
font-weight: normal;
|
||||
}
|
||||
.order tbody tr th .fr span {
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -155,14 +155,12 @@
|
||||
render: (h, params) => {
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
"a",
|
||||
{
|
||||
props: {
|
||||
type: "success",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px",
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
@@ -172,15 +170,14 @@
|
||||
},
|
||||
"修改"
|
||||
),
|
||||
h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|"),
|
||||
h(
|
||||
"Button",
|
||||
"a",
|
||||
{
|
||||
props: {
|
||||
type: "error",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px",
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
@@ -189,7 +186,7 @@
|
||||
},
|
||||
},
|
||||
"删除"
|
||||
)
|
||||
),
|
||||
]);
|
||||
},
|
||||
},
|
||||
|
||||
@@ -367,77 +367,75 @@ export default {
|
||||
let enableOrDisable = "";
|
||||
if (params.row.status == true) {
|
||||
enableOrDisable = h(
|
||||
"Button",
|
||||
"a",
|
||||
{
|
||||
props: {
|
||||
size: "small"
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px"
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.disable(params.row);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
"禁用"
|
||||
);
|
||||
} else {
|
||||
enableOrDisable = h(
|
||||
"Button",
|
||||
"a",
|
||||
{
|
||||
props: {
|
||||
type: "success",
|
||||
size: "small"
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px"
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.enable(params.row);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
"启用"
|
||||
);
|
||||
}
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
"a",
|
||||
{
|
||||
props: {
|
||||
type: "info",
|
||||
size: "small"
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px"
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.edit(params.row);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
"编辑"
|
||||
),
|
||||
h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|"),
|
||||
enableOrDisable,
|
||||
h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|"),
|
||||
h(
|
||||
"Button",
|
||||
"a",
|
||||
{
|
||||
props: {
|
||||
type: "error",
|
||||
size: "small"
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.remove(params.row);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
"删除"
|
||||
)
|
||||
),
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -166,14 +166,12 @@ export default {
|
||||
render: (h, params) => {
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
"a",
|
||||
{
|
||||
props: {
|
||||
type: "warning",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px",
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
@@ -183,15 +181,14 @@ export default {
|
||||
},
|
||||
"菜单权限"
|
||||
),
|
||||
h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|"),
|
||||
h(
|
||||
"Button",
|
||||
"a",
|
||||
{
|
||||
props: {
|
||||
size: "small",
|
||||
type: "info",
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px",
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
@@ -201,12 +198,14 @@ export default {
|
||||
},
|
||||
"编辑"
|
||||
),
|
||||
h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|"),
|
||||
h(
|
||||
"Button",
|
||||
"a",
|
||||
{
|
||||
props: {
|
||||
type: "error",
|
||||
size: "small",
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
|
||||
@@ -20,9 +20,13 @@
|
||||
<span slot="open">开</span>
|
||||
<span slot="close">关</span>
|
||||
</i-switch>
|
||||
<Button type="info" placement="right" @click="handleEdit(item)" size="small">修改</Button>
|
||||
<a
|
||||
style="color:#2d8cf0;cursor:pointer;text-decoration:none"
|
||||
@click="handleEdit(item)"
|
||||
>修改</a>
|
||||
<span style="margin: 0 8px; color: #dcdee2">|</span>
|
||||
<Poptip confirm title="删除此模板?" @on-ok="handleDel(item)" >
|
||||
<Button type="error" size="small">删除</Button>
|
||||
<a style="color:#2d8cf0;cursor:pointer;text-decoration:none">删除</a>
|
||||
</Poptip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user