Icon图标选择器
... 2021-7-29 About 2 min
# Icon图标选择器
# 基础用法
图标集合参考例子配置iconList属性
<avue-form :option="option"> </avue-form>
<script>
export default{
data() {
return {
option: {
column: [
{
label: '图标选择器',
prop: 'icon',
type: 'icon',
iconList: [ {
label: '基本图标',
list: [{
label: '名称1',
value: 'el-icon-info'
}, {
label: '名称2',
value: 'el-icon-error'
}, {
label: '名称3',
value: 'el-icon-success'
}, {
label: '名称4',
value: 'el-icon-warning'
}, {
label: '名称5',
value: 'el-icon-question'
}]
},{
label: '方向图标',
list: ['el-icon-info', 'el-icon-back', 'el-icon-arrow-left', 'el-icon-arrow-down', 'el-icon-arrow-right', 'el-icon-arrow-up']
}, {
label: '符号图标',
list: ['el-icon-plus', 'el-icon-minus', 'el-icon-close', 'el-icon-check']
}]
}
]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
Expand Copy Copy
# 默认值
value属性可以提供一个初始化的默认值
<avue-form :option="option"></avue-form>
<script>
export default{
data() {
return {
option: {
column: [
{
label: '图标',
prop: 'icon',
type: 'icon',
value:'el-icon-user',
iconList:[ {
label: '符号图标',
list: ['el-icon-plus', 'el-icon-minus', 'el-icon-close', 'el-icon-check']
}]
}
]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Expand Copy Copy
# 禁用状态
通过disabled属性指定是否禁用
<avue-form :option="option"></avue-form>
<script>
export default{
data() {
return {
option: {
column: [
{
label: '图标',
prop: 'icon',
type: 'icon',
disabled:true
}
]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Expand Copy Copy
# 其他图标库
<!-- 导入需要的包 （一定要放到index.html中的head标签里） -->
<!-- 引入阿里巴巴的图表库iconfont和svg图标后，直接使用图标名即可，记得加前缀 -->
<link rel="stylesheet" href="https://at.alicdn.com/t/font_567566_pwc3oottzol.css">
<script src="//at.alicdn.com/t/font_2621503_zcbiqy2g1i.js"></script>
1
2
3
4
2
3
4
<avue-form :option="option"> </avue-form>
<script>
export default{
data() {
return {
option: {
column: [
{
label: '图标选择器',
prop: 'icon',
type: 'icon',
iconList: [ {
label: '阿里图标-Symbol图标',
list: [
{
label: '机构',
value: '#icon-jigou'
},
{
label: '短信管理',
value: '#icon-duanxinguanli'
},
{
label: '发票管理系统',
value: '#icon-fapiaoguanlixitong'
},
{
label: '角色',
value: '#icon-jiaose'
},
{
label: '黑名单',
value: '#icon-heimingdan2'
},
{
label: 'KHCFDC_附件',
value: '#icon-fujian4'
},
{
label: '文档',
value: '#icon-wendang3'
},
{
label: '刷卡',
value: '#icon-shuaka'
},
{
label: '停车',
value: '#icon-tingche3'
},
{
label: '对象存储OSS',
value: '#icon-duixiangcunchuOSS'
},
{
label: '反馈',
value: '#icon-fankui2'
},
{
label: '短信',
value: '#icon-ziyuan1'
},
{
label: '对象存储服务',
value: '#icon-beikongshuiwupingtaimenhu-tubiao_duixiangcunchufuwu'
},
{
label: '数据库_jurassic',
value: '#icon-jurassic_data'
},
{
label: '日志',
value: '#icon-rizhi1'
},
{
label: '权限',
value: '#icon-quanxian4'
},
{
label: '订单',
value: '#icon-5'
},
{
label: '机构',
value: '#icon-jigou1'
},
{
label: '机构人员',
value: '#icon-jigourenyuan'
},
{
label: '角色管理',
value: '#icon-jiaoseguanli4'
},
{
label: '角色管理',
value: '#icon-jiaoseguanli5'
},
{
label: '数据监控',
value: '#icon-shujujiankong'
},
{
label: '活动展示',
value: '#icon-huodongzhanshi'
},
{
label: 'vip invitation',
value: '#icon-vipinvitation'
}]
},{
label: '阿里云图标',
list: [
'iconfont icon-zhongyingwen',
'iconfont icon-rizhi1',
'iconfont icon-bug',
'iconfont icon-qq1',
'iconfont icon-weixin1'
]
}]
}
]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
Expand Copy Copy