Skip to content

Commit 531da4b

Browse files
DewyzeeDewyzee
authored
Merge pull request #7 from iview/dewyzee/dev
add tabs tab etc. components
2 parents ef81e1b + 5921aa9 commit 531da4b

File tree

149 files changed

+5057
-135
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

149 files changed

+5057
-135
lines changed

‎.eslintrc.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"root": true,
3+
"parser": "babel-eslint",
34
"parserOptions": {
45
"ecmaFeatures": {
56
"experimentalObjectRestSpread": true

‎dist/components/badge/badge.vue

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<div class="i-badge" v-bind:class="iClass">
3+
<slot></slot>
4+
<div class="i-badge-dot" v-if="dot"></div>
5+
<div class="i-badge-count" v-bind:class="iClassAlone" v-else-if="count !== 0">{{ finalCount }}</div>
6+
</div>
7+
</template>
8+
<script>
9+
export default {
10+
props: {
11+
count: {
12+
type: Number,
13+
default: 0
14+
},
15+
overflowCount: {
16+
type: Number,
17+
default: 99
18+
},
19+
dot: {
20+
type: Boolean,
21+
default: false
22+
},
23+
iClass: {
24+
type: String,
25+
default: ''
26+
},
27+
iClassAlone: {
28+
type: String,
29+
default: ''
30+
}
31+
},
32+
computed: {
33+
finalCount() {
34+
return parseInt(this.count) >= parseInt(this.overflowCount) ? `${this.overflowCount}+` : this.count
35+
}
36+
}
37+
}
38+
</script>
39+

‎dist/components/badge/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import badge from 'badge.vue'
2+
3+
export default badge

‎dist/components/badge/style/badge.css

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
.i-badge {
2+
position: relative;
3+
display: inline-block;
4+
line-height: 1;
5+
vertical-align: middle;
6+
}
7+
.i-badge-count {
8+
position: absolute;
9+
-webkit-transform: translateX(50%);
10+
-ms-transform: translateX(50%);
11+
transform: translateX(50%);
12+
top: -6px;
13+
right: 0;
14+
height: 18px;
15+
border-radius: 9px;
16+
min-width: 18px;
17+
background: #ed3f14;
18+
border: 1px solid transparent;
19+
color: #fff;
20+
line-height: 18px;
21+
text-align: center;
22+
padding: 0 5px;
23+
font-size: 12px;
24+
white-space: nowrap;
25+
-webkit-transform-origin: -10% center;
26+
-ms-transform-origin: -10% center;
27+
transform-origin: -10% center;
28+
z-index: 10;
29+
-webkit-box-shadow: 0 0 0 1px #fff;
30+
box-shadow: 0 0 0 1px #fff;
31+
-webkit-box-sizing: border-box;
32+
box-sizing: border-box;
33+
text-rendering: optimizeLegibility;
34+
}
35+
.i-badge-count-alone {
36+
top: auto;
37+
display: block;
38+
position: relative;
39+
-webkit-transform: translateX(0);
40+
-ms-transform: translateX(0);
41+
transform: translateX(0);
42+
}
43+
.i-badge-dot {
44+
position: absolute;
45+
-webkit-transform: translateX(-50%);
46+
-ms-transform: translateX(-50%);
47+
transform: translateX(-50%);
48+
-webkit-transform-origin: 0 center;
49+
-ms-transform-origin: 0 center;
50+
transform-origin: 0 center;
51+
top: -4px;
52+
right: -8px;
53+
height: 8px;
54+
width: 8px;
55+
border-radius: 100%;
56+
background: #ed3f14;
57+
z-index: 10;
58+
-webkit-box-shadow: 0 0 0 1px #fff;
59+
box-shadow: 0 0 0 1px #fff;
60+
}

‎dist/components/badge/style/badge.less

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
@import "../../common/_base.less";
2+
@import "../../common/_mixins.less";
3+
4+
.i-badge {
5+
position: relative;
6+
display: inline-block;
7+
line-height: 1;
8+
vertical-align: middle;
9+
10+
&-count {
11+
position: absolute;
12+
transform: translateX(50%);
13+
top: -6px;
14+
right: 0;
15+
height: 18px;
16+
border-radius: 9px;
17+
min-width: 18px;
18+
background: @error-color;
19+
border: 1px solid transparent;
20+
color: #fff;
21+
line-height: 18px;
22+
text-align: center;
23+
padding: 0 5px;
24+
font-size: 12px;
25+
white-space: nowrap;
26+
transform-origin: -10% center;
27+
z-index: 10;
28+
box-shadow: 0 0 0 1px #fff;
29+
box-sizing: border-box;
30+
text-rendering: optimizeLegibility;
31+
&-alone {
32+
top: auto;
33+
display: block;
34+
position: relative;
35+
transform: translateX(0);
36+
}
37+
}
38+
39+
&-dot {
40+
position: absolute;
41+
transform: translateX(-50%);
42+
transform-origin: 0 center;
43+
top: -4px;
44+
right: -8px;
45+
height: 8px;
46+
width: 8px;
47+
border-radius: 100%;
48+
background: @error-color;
49+
z-index: 10;
50+
box-shadow: 0 0 0 1px #fff;
51+
}
52+
}

‎dist/components/badge/style/css.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import './badge.css'

‎dist/components/badge/style/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import './badge.less'

‎dist/components/button/button.vue

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,27 @@
11
<template>
2-
<div>
3-
<button
4-
class="i-class i-btn"
5-
v-bind:class="classObject"
6-
@click="handleTap"
7-
v-bind:open-type="openType"
8-
v-bind:app-parameter="appParameter"
9-
v-bind:hover-stop-propagation="hoverStopPropagation"
10-
v-bind:hover-start-time="hoverStartTime"
11-
v-bind:hover-stay-time="hoverStayTime"
12-
v-bind:session-from="sessionFrom"
13-
v-bind:send-message-title="sendMessageTitle"
14-
v-bind:send-message-path="sendMessagePath"
15-
v-bind:send-message-img="sendMessageImg"
16-
v-bind:show-message-card="showMessageCard"
17-
@contact="bindcontact"
18-
@getuserinfo="bindgetuserinfo"
19-
@getphonenumber="bindgetphonenumber"
20-
@error="binderror"
21-
plain="true"
22-
>
23-
<div class="i-btn-loading-inner" v-if="loading"></div>
24-
<slot></slot>
25-
</button>
26-
</div>
2+
<button
3+
class="i-btn"
4+
v-bind:class="classObject"
5+
@click="handleTap"
6+
v-bind:open-type="openType"
7+
v-bind:app-parameter="appParameter"
8+
v-bind:hover-stop-propagation="hoverStopPropagation"
9+
v-bind:hover-start-time="hoverStartTime"
10+
v-bind:hover-stay-time="hoverStayTime"
11+
v-bind:session-from="sessionFrom"
12+
v-bind:send-message-title="sendMessageTitle"
13+
v-bind:send-message-path="sendMessagePath"
14+
v-bind:send-message-img="sendMessageImg"
15+
v-bind:show-message-card="showMessageCard"
16+
@contact="bindcontact"
17+
@getuserinfo="bindgetuserinfo"
18+
@getphonenumber="bindgetphonenumber"
19+
@error="binderror"
20+
plain="true"
21+
>
22+
<div class="i-btn-loading-inner" v-if="loading"></div>
23+
<slot></slot>
24+
</button>
2725
</template>
2826

2927
<script>
@@ -90,10 +88,12 @@ export default {
9088
const btnSize = 'i-btn-' + this.size
9189
const btnType = 'i-btn-' + this.type
9290
const btnShape = 'i-btn-' + this.shape
93-
const btnLong = 'i-btn-' + this.long ? 'long' : ''
94-
const btnLoading = 'i-btn-' + this.loading ? 'loading' : ''
95-
const className = iClass + ' ' + btnSize + ' ' + btnType + ' ' + btnShape + ' '
96-
+ btnLong + ' ' + btnLoading
91+
const btnLong = this.long ? 'i-btn-long' : ''
92+
const btnLoading = this.loading ? 'i-btn-loading' : ''
93+
const btnDisabled = this.disabled ? 'i-btn-disabled' : ''
94+
const btnInline = this.inline ? 'i-btn-inline' : ''
95+
const className = this.iClass + ' ' + btnSize + ' ' + btnType + ' ' + btnShape + ' '
96+
+ btnLong + ' ' + btnLoading + ' ' + btnDisabled + ' ' + btnInline
9797
return className
9898
}
9999
},

‎dist/components/card/card.vue

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<template>
2+
<div class="i-card" v-bind:class="classObj">
3+
<section class="i-card-header" v-bind:class="iClass">
4+
<div class="i-card-header-content">
5+
<image class="i-card-header-thumb" :src="thumb" v-if="thumb"></image>
6+
{{ title }}
7+
</div>
8+
<div class="i-card-header-extra" v-if="extra">{{ extra }}</div>
9+
</section>
10+
<section class="i-card-body" v-bind:class="iClass"><slot name="content"></slot></section>
11+
<section class="i-card-footer" v-bind:class="iClass"><slot name="footer"></slot></section>
12+
</div>
13+
</template>
14+
<script>
15+
export default {
16+
props: {
17+
full: {
18+
type: Boolean,
19+
default: false
20+
},
21+
thumb: {
22+
type: String,
23+
default: ''
24+
},
25+
title: {
26+
type: String,
27+
default: ''
28+
},
29+
extra: {
30+
type: String,
31+
default: ''
32+
},
33+
iClass: {
34+
type: String,
35+
default: ''
36+
}
37+
},
38+
computed: {
39+
classObj() {
40+
const fullClass = this.full ? 'i-card-full' : ''
41+
return this.iClass + ' ' + fullClass
42+
}
43+
},
44+
}
45+
</script>
46+
47+

‎dist/components/card/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import card from 'card.vue'
2+
3+
export default card

0 commit comments

Comments
 (0)