Skip to content

Commit 246fdc9

Browse files
qinshenxueqinshenxue
committed
Merge branch 'dev' of https://github.com/qinshenxue/vue-icon into dev
# Conflicts: # index.ejs # index.html # lib/feather-icons.esm.js # lib/vue-feather-plugin.esm.js # lib/vue-feather.esm.js # lib/vue-feather.min.js # src/feather-icons.js
2 parents 350506f + 693a47c commit 246fdc9

File tree

9 files changed

+3103
-1711
lines changed

9 files changed

+3103
-1711
lines changed

‎index.ejs‎

Lines changed: 76 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,19 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>vui-icon demo</title>
6-
7-
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">
8-
<script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
6+
<script src="https://unpkg.com/vue/dist/vue.js"></script>
97
<script src="lib/vue-feather.min.js?v=<%= Date.now() %>"></script>
108
<style type="text/css">
119
body {
1210
margin: 0;
1311
}
1412
13+
.demo {
14+
width: 1080px;
15+
margin: 0 auto;
16+
overflow: hidden;
17+
font-family: arial;
18+
}
1519
1620
.github {
1721
font-size: 20px;
@@ -21,53 +25,21 @@
2125
margin-bottom: 20px;
2226
}
2327
28+
.icons {
29+
overflow: hidden;
30+
}
2431
2532
.github a {
2633
color: rgba(255, 255, 255, .9);
2734
text-decoration: none;
28-
border-bottom: 1px solid #fff;
35+
border-bottom: 1px solid;
2936
}
3037
31-
32-
.item {
33-
padding: 10px;
34-
margin: 10px;
38+
.box {
39+
width: 120px;
40+
height: 100px;
41+
float: left;
3542
text-align: center;
36-
border: 1px solid #fff;
37-
}
38-
39-
.item.is-selected {
40-
position: relative;
41-
background: rgba(65, 184, 131, 0.05);
42-
border: 1px solid #41B883;
43-
}
44-
45-
.item.is-selected::before {
46-
position: absolute;
47-
top: 0;
48-
right: 0;
49-
height: 6px;
50-
width: 10px;
51-
border-left: 2px solid #fff;
52-
border-bottom: 2px solid #fff;
53-
content: '';
54-
z-index: 1;
55-
transform: rotate(-45deg);
56-
transform-origin: bottom;
57-
}
58-
59-
.item.is-selected::after {
60-
position: absolute;
61-
top: 0;
62-
right: 0;
63-
border-width: 12px;
64-
border-color: #41B883 #41B883 transparent transparent;
65-
border-style: solid;
66-
content: '';
67-
}
68-
69-
.item:hover {
70-
border: 1px solid #41B883
7143
}
7244
7345
.icon {
@@ -81,75 +53,83 @@
8153
color: #666;
8254
}
8355
84-
56+
.search {
57+
position: relative;
58+
padding: 0 20px;
59+
margin-bottom: 20px;
60+
}
8561
8662
.search .icon-search {
87-
63+
position: absolute;
64+
left: 40px;
65+
top: 50%;
66+
margin-top: -12px;
8867
color: #aaa;
8968
}
9069
70+
.search input {
71+
display: block;
72+
width: 100%;
73+
height: 60px;
74+
padding: 0 20px 0 54px;
75+
-webkit-appearance: none;
76+
-moz-appearance: none;
77+
appearance: none;
78+
border: 1px solid #ccc;
79+
outline: none;
80+
}
81+
82+
.search input:focus {
83+
border: 1px solid #41B883
84+
}
85+
86+
.search input:focus + .icon {
87+
color: #41B883
88+
}
89+
9190
</style>
9291
</head>
9392

9493
<body>
95-
<div class="github">
96-
<a href="https://github.com/qinshenxue/vue-icon">https://github.com/qinshenxue/vue-icon</a>
97-
</div>
98-
<div class="container">
94+
<div class="github">
95+
<a href="https://github.com/qinshenxue/vue-icon">https://github.com/qinshenxue/vue-icon</a>
96+
</div>
97+
<div class="demo">
9998

10099

101-
<div class="input-group input-group-lg mb-3 search">
102-
<input type="text" class="form-control" placeholder="Search <%= Object.keys(icons).length %> icons"
103-
aria-label="Search <%= Object.keys(icons).length %> icons" v-model="keyword">
104-
<div class="input-group-append">
105-
<span class="input-group-text">
106-
<icon name="search"></icon>
107-
</span>
108-
</div>
109-
</div>
110-
111-
<div class="row">
112-
<div class="col col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2" v-for="(icon,name) in filterIcons">
113-
<div class="item" @click="add(name,icon)" :class="{'is-selected':selected[name]}">
114-
<icon :name="name"></icon>
115-
<div class="name">{{name}}</div>
116-
</div>
117-
</div>
118-
100+
<div class="search">
101+
<input type="text" placeholder="Search <%= icons.length %> icons" @input="searchIcon">
102+
<icon name="search"></icon>
103+
</div>
104+
<div class="icons">
105+
<% icons.forEach(function(icon){ %>
106+
<div class="box" title="<%= icon %>">
107+
<icon name="<%= icon %>"></icon>
108+
<div class="name"><%= icon %></div>
119109
</div>
110+
<% }) %>
120111
</div>
121-
<script type="text/javascript">
122-
new Vue({
123-
el: '.container',
124-
data: {
125-
keyword: '',
126-
icons: <%- JSON.stringify(icons) %>,
127-
selected: {}
128-
},
129-
computed: {
130-
filterIcons: function () {
131-
var me = this
132-
var obj = {}
133-
Object.keys(this.icons).forEach(function (name) {
134-
if (name.indexOf(me.keyword) > -1) {
135-
obj[name] = me.icons[name]
136-
}
137-
})
138-
return obj
139-
}
140-
},
141-
methods: {
142-
add: function (name, icon) {
143-
if (this.selected[name]) {
144-
this.$delete(this.selected, name)
112+
</div>
113+
<script type="text/javascript">
114+
new Vue({
115+
el: '.demo',
116+
methods: {
117+
searchIcon: function (e) {
118+
var keyword = e.target.value
119+
120+
var arr = Array.prototype.slice.call(document.querySelectorAll('.box'))
121+
122+
arr.forEach(function (el) {
123+
if (el.title.indexOf(keyword) > -1) {
124+
el.style.display = 'block'
145125
} else {
146-
this.$set(this.selected, name, icon)
126+
el.style.display = 'none'
147127
}
148-
}
128+
})
149129
}
150-
})
151-
152-
</script>
130+
}
131+
})
132+
</script>
153133

154134

155135
</body>

0 commit comments

Comments
 (0)