mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-08-06 19:07:25 +08:00
style(components): 将按钮组件替换为链接样式
- 统一将页面中的 Button 组件替换为 a 标签，保持样式一致 - 添加统一的链接样式类 ops-link 和分隔符样式类 ops-sep - 更新操作列中按钮的样式，使用颜色、光标和文本装饰属性替代原有 props 配置 - 在多个文件中调整了操作项之间的分隔符显示逻辑 - 优化表格操作列渲染函数，去除冗余的 Button 属性配置 - 保持功能不变的前提下提升界面视觉一致性
This commit is contained in:
pikachu1995@126.com
@@ -171,13 +171,12 @@ export default {
|
||||
render: (h, params) => {
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
"a",
|
||||
{
|
||||
props: {
|
||||
type: "success",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
marginRight: "5px",
|
||||
},
|
||||
on: {
|
||||
@@ -189,13 +188,17 @@ export default {
|
||||
"通过"
|
||||
),
|
||||
h(
|
||||
"Button",
|
||||
"span",
|
||||
{ style: { margin: "0 8px", color: "#dcdee2" } },
|
||||
"|"
|
||||
),
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
props: {
|
||||
type: "error",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
marginRight: "5px",
|
||||
},
|
||||
on: {
|
||||
@@ -207,11 +210,17 @@ export default {
|
||||
"拒绝"
|
||||
),
|
||||
h(
|
||||
"Button",
|
||||
"span",
|
||||
{ style: { margin: "0 8px", color: "#dcdee2" } },
|
||||
"|"
|
||||
),
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
props: {
|
||||
type: 'default',
|
||||
size: "small",
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
|
||||
@@ -153,13 +153,12 @@ export default {
|
||||
let enableOrDisable = "";
|
||||
if (params.row.deleteFlag == 0) {
|
||||
enableOrDisable = h(
|
||||
"Button",
|
||||
"a",
|
||||
{
|
||||
props: {
|
||||
size: "small",
|
||||
type: "error",
|
||||
},
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
marginRight: "5px",
|
||||
},
|
||||
on: {
|
||||
@@ -172,13 +171,12 @@ export default {
|
||||
);
|
||||
} else {
|
||||
enableOrDisable = h(
|
||||
"Button",
|
||||
"a",
|
||||
{
|
||||
props: {
|
||||
type: "success",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
marginRight: "5px",
|
||||
},
|
||||
on: {
|
||||
@@ -192,13 +190,12 @@ export default {
|
||||
}
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
"a",
|
||||
{
|
||||
props: {
|
||||
type: "info",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
marginRight: "5px",
|
||||
},
|
||||
on: {
|
||||
@@ -209,17 +206,24 @@ export default {
|
||||
},
|
||||
"编辑"
|
||||
),
|
||||
enableOrDisable,
|
||||
|
||||
h(
|
||||
"Button",
|
||||
"span",
|
||||
{ style: { margin: "0 8px", color: "#dcdee2" } },
|
||||
"|"
|
||||
),
|
||||
enableOrDisable,
|
||||
h(
|
||||
"span",
|
||||
{ style: { margin: "0 8px", color: "#dcdee2" } },
|
||||
"|"
|
||||
),
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
props: {
|
||||
type: 'default',
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px",
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
|
||||
@@ -15,54 +15,31 @@
|
||||
>
|
||||
<template slot="action" slot-scope="scope">
|
||||
<Dropdown v-show="scope.row.level == 2" trigger="click">
|
||||
<Button size="small">
|
||||
<a class="ops-link">
|
||||
绑定
|
||||
<Icon type="ios-arrow-down"></Icon>
|
||||
</Button>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem @click.native="brandOperation(scope.row)"
|
||||
>编辑绑定品牌</DropdownItem
|
||||
>
|
||||
<DropdownItem @click.native="specOperation(scope.row)"
|
||||
>编辑绑定规格</DropdownItem
|
||||
>
|
||||
<DropdownItem @click.native="parameterOperation(scope.row)"
|
||||
>编辑绑定参数</DropdownItem
|
||||
>
|
||||
<DropdownItem @click.native="brandOperation(scope.row)">编辑绑定品牌</DropdownItem>
|
||||
<DropdownItem @click.native="specOperation(scope.row)">编辑绑定规格</DropdownItem>
|
||||
<DropdownItem @click.native="parameterOperation(scope.row)">编辑绑定参数</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
|
||||
|
||||
<span class="ops-sep">|</span>
|
||||
<Dropdown trigger="click">
|
||||
<Button size="small">
|
||||
<a class="ops-link">
|
||||
操作
|
||||
<Icon type="ios-arrow-down"></Icon>
|
||||
</Button>
|
||||
</a>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem @click.native="edit(scope.row)">编辑</DropdownItem>
|
||||
<DropdownItem
|
||||
v-if="scope.row.deleteFlag == 1"
|
||||
@click.native="enable(scope.row)"
|
||||
>启用</DropdownItem
|
||||
>
|
||||
<DropdownItem
|
||||
v-if="scope.row.deleteFlag == 0"
|
||||
@click.native="disable(scope.row)"
|
||||
>禁用</DropdownItem
|
||||
>
|
||||
<DropdownItem v-if="scope.row.deleteFlag == 1" @click.native="enable(scope.row)">启用</DropdownItem>
|
||||
<DropdownItem v-if="scope.row.deleteFlag == 0" @click.native="disable(scope.row)">禁用</DropdownItem>
|
||||
<DropdownItem @click.native="remove(scope.row)">删除</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
|
||||
<Button
|
||||
v-show="scope.row.level != 2"
|
||||
type="primary"
|
||||
@click="addChildren(scope.row)"
|
||||
size="small"
|
||||
icon="md-add"
|
||||
style="margin-right: 5px"
|
||||
>添加子分类
|
||||
</Button>
|
||||
<span v-if="scope.row.level != 2" class="ops-sep">|</span>
|
||||
<a v-show="scope.row.level != 2" class="ops-link" @click="addChildren(scope.row)">添加子分类</a>
|
||||
</template>
|
||||
|
||||
<template slot="commissionRate" slot-scope="scope">
|
||||
@@ -550,4 +527,14 @@ export default {
|
||||
min-height: 100vh;
|
||||
height: auto;
|
||||
}
|
||||
.ops-link {
|
||||
color: #2d8cf0;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.ops-sep {
|
||||
display: inline-block;
|
||||
margin: 0 8px;
|
||||
color: #dcdee2;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -110,13 +110,12 @@ export default {
|
||||
render: (h, params) => {
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
"a",
|
||||
{
|
||||
props: {
|
||||
type: "info",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
marginRight: "5px",
|
||||
},
|
||||
on: {
|
||||
@@ -128,11 +127,17 @@ export default {
|
||||
"编辑"
|
||||
),
|
||||
h(
|
||||
"Button",
|
||||
"span",
|
||||
{ style: { margin: "0 8px", color: "#dcdee2" } },
|
||||
"|"
|
||||
),
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
props: {
|
||||
type: "error",
|
||||
size: "small",
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
|
||||
@@ -189,18 +189,15 @@ export default {
|
||||
width: 150,
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
|
||||
render: (h, params) => {
|
||||
return h("div", [
|
||||
return h("div", { class: "ops" }, [
|
||||
h(
|
||||
"Button",
|
||||
"a",
|
||||
{
|
||||
props: {
|
||||
size: "small",
|
||||
type: "info",
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px",
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
@@ -211,22 +208,38 @@ export default {
|
||||
"查看"
|
||||
),
|
||||
h(
|
||||
"Button",
|
||||
"span",
|
||||
{
|
||||
props: {
|
||||
type: "error",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px",
|
||||
margin: "0 8px",
|
||||
color: "#dcdee2",
|
||||
},
|
||||
},
|
||||
"|"
|
||||
),
|
||||
h(
|
||||
"Poptip",
|
||||
{
|
||||
props: { confirm: true, title: "确认删除" },
|
||||
on: {
|
||||
click: () => {
|
||||
"on-ok": () => {
|
||||
this.remove(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"删除"
|
||||
[
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
},
|
||||
"删除"
|
||||
),
|
||||
]
|
||||
),
|
||||
]);
|
||||
},
|
||||
@@ -372,4 +385,14 @@ label {
|
||||
margin: 5px 0;
|
||||
span{margin-right: 20px;}
|
||||
}
|
||||
.ops a {
|
||||
color: #2d8cf0;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.ops span {
|
||||
display: inline-block;
|
||||
margin: 0 8px;
|
||||
color: #dcdee2;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user