Skip to content

Commit b6c832e

Browse files
gongjsvanoneang
gongjs
authored and
vanoneang
committed
Component (#148): feat:icon组件
* fix * feat:icon组件
1 parent 7838341 commit b6c832e

File tree

4 files changed

+216
-2
lines changed

4 files changed

+216
-2
lines changed

‎src/components/base/icon/lin-icon.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<svg class="l-icon" :style="{ width, height }" @click="$emit('click', $event)">
3-
<use :xlink:href="`#${name}`" :fill="color"></use>
3+
<use :xlink:href="`#icon-${name}`" :fill="color"></use>
44
</svg>
55
</template>
66
<script>

‎src/config/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
const Config = {
2-
baseUrl: 'localhost:5000',
2+
baseUrl: 'http://dev.koa.7yue.pro/',
33
stagnateTime: 1 * 60 * 60 * 1000, // 无操作停滞时间 默认1小时
44
openAutoJumpOut: true, // 是否开启无操作跳出
55
notLoginRoute: ['login'], // 无需登录即可访问的路由 name,

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,16 @@ const LinCmsUiRouter = {
1818
icon: 'iconfont icon-jiemiansheji',
1919
right: null,
2020
},
21+
{
22+
title: 'Icon 图标',
23+
type: 'view',
24+
name: null,
25+
route: '/lin-cms-ui/icon',
26+
filePath: 'plugins/LinCmsUi/views/icon/Icon.vue',
27+
inNav: true,
28+
icon: 'iconfont icon-jiemiansheji',
29+
right: null,
30+
},
2131
{
2232
title: 'Table 表格',
2333
type: 'folder',

‎src/plugins/LinCmsUi/views/icon/Icon.vue‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
<template>
2+
<div class="lin-container">
3+
<div class="lin-title">Icon 图标</div>
4+
<div class="lin-wrap-ui">
5+
<el-card style="margin-bottom:50px;">
6+
<div slot="header">
7+
<span>方向性图标</span>
8+
</div>
9+
<el-row style="margin-bottom:10px;">
10+
<el-col
11+
:span="4"
12+
v-for="item in iconList1"
13+
:key="item"
14+
style="margin-bottom:20px;text-align:center;">
15+
<l-icon
16+
:name="item"
17+
:color="color"
18+
:width="width"
19+
:height="height"></l-icon>
20+
<div style="color:#2f4e8c;margin-top:5px;">{{item}}</div>
21+
</el-col>
22+
</el-row>
23+
</el-card>
24+
25+
<el-card style="margin-bottom:50px;">
26+
<div slot="header">
27+
<span>提示建议性图标</span>
28+
</div>
29+
<el-row style="margin-bottom:10px;">
30+
<el-col
31+
:span="4"
32+
v-for="item in iconList2"
33+
:key="item"
34+
style="margin-bottom:20px;text-align:center;">
35+
<l-icon
36+
:name="item"
37+
:color="color"
38+
:width="width"
39+
:height="height"></l-icon>
40+
<div style="color:#2f4e8c;margin-top:5px;">{{item}}</div>
41+
</el-col>
42+
</el-row>
43+
</el-card>
44+
45+
<el-card style="margin-bottom:50px;">
46+
<div slot="header">
47+
<span>编辑类图标</span>
48+
</div>
49+
<el-row style="margin-bottom:10px;">
50+
<el-col
51+
:span="4"
52+
v-for="item in iconList3"
53+
:key="item"
54+
style="margin-bottom:20px;text-align:center;">
55+
<l-icon
56+
:name="item"
57+
:color="color"
58+
:width="width"
59+
:height="height"></l-icon>
60+
<div style="color:#2f4e8c;margin-top:5px;">{{item}}</div>
61+
</el-col>
62+
</el-row>
63+
</el-card>
64+
65+
<el-card style="margin-bottom:50px;">
66+
<div slot="header">
67+
<span>网站通用图标</span>
68+
</div>
69+
<el-row style="margin-bottom:10px;">
70+
<el-col
71+
:span="4"
72+
v-for="item in iconList4"
73+
:key="item"
74+
style="margin-bottom:20px;text-align:center;">
75+
<l-icon
76+
:name="item"
77+
:color="color"
78+
:width="width"
79+
:height="height"></l-icon>
80+
<div style="color:#2f4e8c;margin-top:5px;">{{item}}</div>
81+
</el-col>
82+
</el-row>
83+
</el-card>
84+
</div>
85+
<source-code :link="`http://doc.cms.7yue.pro/lin/client/components/icon.html#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95`"></source-code>
86+
</div>
87+
</template>
88+
89+
<script>
90+
export default {
91+
name: 'LinCmsUiButton',
92+
components: {},
93+
data() {
94+
return {
95+
text: '',
96+
color: '#3963bc',
97+
width: '30px',
98+
height: '30px',
99+
iconList1: [
100+
'step-backward',
101+
'step-forward',
102+
'fast-backward',
103+
'fast-forward',
104+
'shrink',
105+
'arrawsalt',
106+
'down',
107+
'up',
108+
'left',
109+
'right',
110+
'caret-up',
111+
'caret-down',
112+
'caret-left',
113+
'caret-right',
114+
'up-circle',
115+
'down-circle',
116+
'left-circle',
117+
'right-circle',
118+
],
119+
iconList2: [
120+
'question',
121+
'question-circle',
122+
'plus',
123+
'plus-circle',
124+
'minus',
125+
'minus-circle',
126+
'plus-square',
127+
'minus-square',
128+
'info-circle',
129+
'close',
130+
'close-circle',
131+
'close-square',
132+
],
133+
iconList3: [
134+
'edit',
135+
'ellipsis',
136+
'file',
137+
'file-text',
138+
'file-unknown',
139+
'file-pdf',
140+
'file-word',
141+
'file-excel',
142+
'file-ppt',
143+
'file-markdown',
144+
'file-add',
145+
'folder',
146+
'folder-open',
147+
'folder-add',
148+
'frown',
149+
'meh',
150+
'smile',
151+
],
152+
iconList4: [
153+
'shake',
154+
'api',
155+
'fork',
156+
'dashboard',
157+
'table',
158+
'android',
159+
'apple',
160+
'windows',
161+
'chrome',
162+
'aliwangwang',
163+
'weibo',
164+
'twitter',
165+
'taobao',
166+
'skype',
167+
'medium',
168+
'linkedin',
169+
'dropbox',
170+
'facebook',
171+
'codepen',
172+
'amazon',
173+
'google',
174+
'alipay',
175+
'zhihu',
176+
'slack',
177+
'behance',
178+
],
179+
}
180+
},
181+
// 计算属性设置
182+
computed: {},
183+
// 数据变更监听
184+
watch: {},
185+
mounted() {
186+
this.init()
187+
},
188+
// 当页面使用路由参数时, 参数部分变化触发的动作在本函数中操作
189+
// https://router.vuejs.org/zh/guide/advanced/navigation-guards.htmll#组件内的守卫
190+
// beforeRouteUpdate(to, from, next) {
191+
// // this.name = to.params.name
192+
// // this.init()
193+
// // next()
194+
// },
195+
methods: {
196+
// 执行获取数据等初始化动作
197+
init() {},
198+
},
199+
}
200+
</script>
201+
202+
<style lang="scss" scoped>
203+
@import "../../assets/style/container.scss";
204+
</style>

0 commit comments

Comments
 (0)