Skip to content

Commit 6d5f9e2

Browse files
lucienstarvanoneang
lucienstar
authored and
vanoneang
committed
新增分页组件及 Badge 组件 (#180)
* feat(LinCmsUi): 增加分页组件及 Badge 标记组件(初始化) * style(linCmsUi): 调整分页组件样式 * style(linCmsUi): 调整分页及 Badge 组件样式
1 parent 5af2a4f commit 6d5f9e2

4 files changed

Lines changed: 542 additions & 1 deletion

File tree

‎src/assets/styles/realize/element-variables.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -820,4 +820,4 @@ $typeMap: (primary:#3963BC,
820820
transform: scale(.7);
821821
}
822822
}
823-
}
823+
}

‎src/plugins/LinCmsUi/stage-config.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,26 @@ const LinCmsUiRouter = {
162162
icon: 'iconfont icon-jiemiansheji',
163163
right: null,
164164
},
165+
{
166+
title: 'Pagination 分页',
167+
type: 'view',
168+
name: null,
169+
route: '/lin-cms-ui/pagination',
170+
filePath: 'plugins/LinCmsUi/views/pagination/Pagination.vue',
171+
inNav: true,
172+
icon: 'iconfont icon-jiemiansheji',
173+
right: null,
174+
},
175+
{
176+
title: 'Badge 标记',
177+
type: 'view',
178+
name: null,
179+
route: '/lin-cms-ui/badge',
180+
filePath: 'plugins/LinCmsUi/views/badge/Badge.vue',
181+
inNav: true,
182+
icon: 'iconfont icon-jiemiansheji',
183+
right: null,
184+
},
165185
],
166186
}
167187

‎src/plugins/LinCmsUi/views/badge/Badge.vue‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
<template>
2+
<div class="lin-container">
3+
<div class="lin-title">Badge 标记</div>
4+
<div class="lin-wrap-ui">
5+
<el-card style="margin-bottom:50px;" class="demo">
6+
<div slot="header">
7+
<span>基础用法</span>
8+
</div>
9+
<el-row>
10+
<el-badge :value="12" class="item">
11+
<el-button size="small">评论</el-button>
12+
</el-badge>
13+
<el-badge :value="3" class="item">
14+
<el-button size="small">回复</el-button>
15+
</el-badge>
16+
<el-badge :value="1" class="item" type="primary">
17+
<el-button size="small">评论</el-button>
18+
</el-badge>
19+
<el-badge :value="2" class="item" type="warning">
20+
<el-button size="small">回复</el-button>
21+
</el-badge>
22+
23+
<el-dropdown trigger="click">
24+
<span class="el-dropdown-link">
25+
点我查看<i class="el-icon-caret-bottom el-icon--right"></i>
26+
</span>
27+
<el-dropdown-menu slot="dropdown">
28+
<el-dropdown-item class="clearfix">
29+
评论
30+
<el-badge class="mark" :value="12" />
31+
</el-dropdown-item>
32+
<el-dropdown-item class="clearfix">
33+
回复
34+
<el-badge class="mark" :value="3" />
35+
</el-dropdown-item>
36+
</el-dropdown-menu>
37+
</el-dropdown>
38+
</el-row>
39+
<el-collapse>
40+
<el-collapse-item title="查看代码" name="2">
41+
<div style="white-space: pre-wrap;">{{base}}</div>
42+
</el-collapse-item>
43+
</el-collapse>
44+
</el-card>
45+
<el-card style="margin-bottom:50px;">
46+
<div slot="header">
47+
<span>最大值</span>
48+
</div>
49+
<el-row>
50+
<div>
51+
<el-badge :value="200" :max="99" class="item">
52+
<el-button size="small">评论</el-button>
53+
</el-badge>
54+
<el-badge :value="100" :max="10" class="item">
55+
<el-button size="small">回复</el-button>
56+
</el-badge>
57+
</div>
58+
</el-row>
59+
<el-collapse class="test" style="color:red;">
60+
<el-collapse-item title="查看代码" name="2">
61+
<div style="white-space: pre-wrap;">{{max}}</div>
62+
</el-collapse-item>
63+
</el-collapse>
64+
</el-card>
65+
<el-card style="margin-bottom:50px;">
66+
<div slot="header">
67+
<span>自定义内容</span>
68+
</div>
69+
<el-row>
70+
<div>
71+
<el-badge value="new" class="item">
72+
<el-button size="small">评论</el-button>
73+
</el-badge>
74+
<el-badge value="hot" class="item">
75+
<el-button size="small">回复</el-button>
76+
</el-badge>
77+
</div>
78+
</el-row>
79+
<el-collapse class="test" style="color:red;">
80+
<el-collapse-item title="查看代码" name="2">
81+
<div style="white-space: pre-wrap;">{{customize}}</div>
82+
</el-collapse-item>
83+
</el-collapse>
84+
</el-card>
85+
86+
<el-card style="margin-bottom:50px;">
87+
<div slot="header">
88+
<span>小红点</span>
89+
</div>
90+
<el-row>
91+
<div>
92+
<el-badge is-dot class="item">数据查询</el-badge>
93+
<el-badge is-dot class="item">
94+
<el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
95+
</el-badge>
96+
</div>
97+
</el-row>
98+
<el-collapse>
99+
<el-collapse-item title="查看代码" name="2">
100+
<div style="white-space: pre-wrap;">{{isDot}}</div>
101+
</el-collapse-item>
102+
</el-collapse>
103+
</el-card>
104+
</div>
105+
</div>
106+
</template>
107+
108+
<script>
109+
export default {
110+
name: '',
111+
components: {},
112+
data() {
113+
return {
114+
text: '',
115+
base: `
116+
<el-badge :value="12" class="item">
117+
<el-button size="small">评论</el-button>
118+
</el-badge>
119+
<el-badge :value="3" class="item">
120+
<el-button size="small">回复</el-button>
121+
</el-badge>
122+
<el-badge :value="1" class="item" type="primary">
123+
<el-button size="small">评论</el-button>
124+
</el-badge>
125+
<el-badge :value="2" class="item" type="warning">
126+
<el-button size="small">回复</el-button>
127+
</el-badge>
128+
129+
<el-dropdown trigger="click">
130+
<span class="el-dropdown-link">
131+
点我查看<i class="el-icon-caret-bottom el-icon--right"></i>
132+
</span>
133+
<el-dropdown-menu slot="dropdown">
134+
<el-dropdown-item class="clearfix">
135+
评论
136+
<el-badge class="mark" :value="12" />
137+
</el-dropdown-item>
138+
<el-dropdown-item class="clearfix">
139+
回复
140+
<el-badge class="mark" :value="3" />
141+
</el-dropdown-item>
142+
</el-dropdown-menu>
143+
</el-dropdown>`,
144+
max: `
145+
<el-badge :value="200" :max="99" class="item">
146+
<el-button size="small">评论</el-button>
147+
</el-badge>
148+
<el-badge :value="100" :max="10" class="item">
149+
<el-button size="small">回复</el-button>
150+
</el-badge>`,
151+
customize: `
152+
<el-badge value="new" class="item">
153+
<el-button size="small">评论</el-button>
154+
</el-badge>
155+
<el-badge value="hot" class="item">
156+
<el-button size="small">回复</el-button>
157+
</el-badge>`,
158+
isDot: `
159+
<el-badge is-dot class="item">数据查询</el-badge>
160+
<el-badge is-dot class="item">
161+
<el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
162+
</el-badge>
163+
`,
164+
}
165+
},
166+
// 计算属性设置
167+
computed: {},
168+
// 数据变更监听
169+
watch: {},
170+
mounted() {
171+
this.init()
172+
},
173+
methods: {
174+
// 执行获取数据等初始化动作
175+
init() {},
176+
},
177+
}
178+
</script>
179+
180+
<style lang="scss" scoped>
181+
@import '../../assets/style/container.scss';
182+
.item {
183+
margin-right: 40px;
184+
}
185+
</style>

0 commit comments

Comments
 (0)