Skip to content

E
Element
Commit 38cb3260 authored by baiyaaaaa's avatar baiyaaaaa
Browse files
Options

update progress

parent 06bf9e46
Hide whitespace changes
Inline Side-by-side
Showing with 303 additions and 95 deletions
.travis.yml
View file @ 38cb3260
......@@ -2,3 +2,4 @@ sudo: false
language: node_js
node_js:
- "5"
script: make dist
CHANGELOG.md
View file @ 38cb3260
## 更新日志
### 1.0.0-rc.2（待发布）
### 1.0.0-rc.2
*2016-09-02*
*2016-09-07*
- 修复 Upload 上传的问题，并增加上传成功和失败的钩子函数
- Button 组件增加 `nativeType` 属性，用于组件内 `<button>` 标签的原生 `type` 属性，默认值为 `button`
......@@ -16,10 +16,10 @@
#### 非兼容性更新
- Menu 组件 `mode` 属性默认值修改为 `vertical`
- Progress 组件升级，增加环形进度条的类型，以及增加了诸多属性，详细请查阅文档。
### 1.0.0-rc.1
*2016-08-30*
- 迁移到 Vue 2.0.0 RC runtime only build。
- 增加了更多的组件，包括 Row、Column、Badge、Card、Rate、Steps 等。
Element 1.0.0-rc.1 发布。
Makefile
View file @ 38cb3260
......@@ -16,7 +16,7 @@ dev:
new:
node bin/new.js $(filter-out $@,$(MAKECMDGOALS))
dist:
dist: install
npm run dist
dist-all:
......
examples/docs/progress.md
View file @ 38cb3260
<style>
.demo-box.demo-progress {
.el-progress {
margin-bottom: 30px;
.el-progress--line {
margin-bottom: 15px;
width: 350px;
}
.el-progress--circle {
margin-right: 15px;
}
}
</style>
......@@ -9,18 +13,41 @@
## Progress 进度条
用于展示操作进度，告知用户当前状态和预期
### 基础使用
### 线形进度条 — 百分比外显
:::demo Progress 组件设置`percentage`属性即可，表示进度条对应的百分比，**必填**，必须在 0-100。
```html
<el-progress :percentage="0"></el-progress>
<el-progress :percentage="70"></el-progress>
<el-progress :percentage="100" status="success"></el-progress>
<el-progress :percentage="50" status="exception"></el-progress>
```
:::
### 线形进度条 — 百分比内显
百分比不占用额外控件，适用于文件上传等场景
:::demo Progress 组件可通过 `stroke-width` 属性更改进度条的高度，并可通过 `desc-inside` 属性来将进度条描述置于进度条内部。
```html
<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>
<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>
```
:::
### 环形进度条
:::demo Progress 组件设置`percentage`属性即可，表示进度条对应的百分比，**必填**，必须在 0-100。`type`属性决定了进度条的样式，带`stripe`的表示条纹效果，不在范围内将会报错，默认为`blue`。`size`属性决定了进度条的大小。
:::demo Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形进度条中，还可以通过 `width` 属性来设置其大小。
```html
<el-progress :percentage="50"></el-progress>
<el-progress :percentage="50" size="large"></el-progress>
<el-progress :percentage="50" size="small"></el-progress>
<el-progress :percentage="50" type="green"></el-progress>
<el-progress :percentage="50" type="blue"></el-progress>
<el-progress :percentage="50" type="blue-stripe" size="large"></el-progress>
<el-progress :percentage="50" type="green-stripe" size="large"></el-progress>
<el-progress type="circle" :percentage="0"></el-progress>
<el-progress type="circle" :percentage="25"></el-progress>
<el-progress type="circle" :percentage="100" status="success"></el-progress>
<el-progress type="circle" :percentage="50" status="exception"></el-progress>
```
:::
......@@ -28,5 +55,9 @@
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| **percentage** | **百分比（必填）** | number | 0-100 | 0 |
| type | 进度条样式 | string | blue,green,blue-stripe,green-stripe | blue |
| size | 进度条尺寸 | string | large, small | — |
| type | 进度条类型 | string | line/circle | line |
| stroke-width | 进度条的宽度，单位 px | number | — | 6 |
| text-inside | 进度条显示文字内置在进度条内（只在 type=circle 时可用） | Boolean | — | false |
| status | 进度条当前状态 | string | success/exception | — |
| width | 环形进度条画布宽度（只在 type=circle 时可用） | number | | 126 |
| show-text | 是否显示进度条文字内容 | boolean | — | true |
examples/docs/upload.md
View file @ 38cb3260
......@@ -45,7 +45,7 @@
::: demo 通过 slot 你可以传入自定义的上传按钮类型和文字提示。
```html
<el-upload action="http://element-test.faas.elenet.me/upload" :on-preview="handlePreview" :on-remove="handleRemove">
<el-upload action="http://127.0.0.1:9000/upload" :on-preview="handlePreview" :on-remove="handleRemove">
<el-button size="small" type="primary">点击上传</el-button>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
......@@ -71,7 +71,7 @@
::: demo 将 `type` 属性指定为 'drag' 可以将上传控件变为支持拖拽的形式，并且你可以通过 `multiple` 属性来控制是否支持多选，`on-preview` 和 `on-remove` 是一个钩子函数，分别在点击上传后的文件链接和点击移除上传后的文件后被调用。
```html
<el-upload
action="http://element-test.faas.elenet.me/upload"
action="http://127.0.0.1:9000/upload"
type="drag"
:multiple="true"
:on-preview="handlePreview"
......@@ -79,7 +79,7 @@
:on-success="handleSuccess"
:on-error="handleError"
>
<i class="el-icon-cloud"></i>
<i class="el-icon-upload"></i>
<div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
......@@ -105,13 +105,13 @@
::: demo `thumbnail-mode` 属性允许你将上传组件强制只允许图片上传，并支持展示上传文件的缩略图。
```html
<el-upload
action="http://element-test.faas.elenet.me/upload"
action="http://127.0.0.1:9000/upload"
type="drag"
:thumbnail-mode="true"
:on-preview="handlePreview"
:on-remove="handleRemove"
>
<i class="el-icon-cloud"></i>
<i class="el-icon-upload"></i>
<div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
......
examples/icon.json
View file @ 38cb3260
["arrow-down","arrow-left","arrow-right","arrow-up","caret-bottom","caret-left","caret-right","caret-top","check","circle-check","circle-close","circle-cross","close","cloud","d-arrow-left","d-arrow-right","d-caret","date","delete","document","edit","information","loading","menu","message","minus","more","picture","plus","search","setting","share","star-off","star-on","time","warning","delete2","upload","view"]
\ No newline at end of file
["arrow-down","arrow-left","arrow-right","arrow-up","caret-bottom","caret-left","caret-right","caret-top","check","circle-check","circle-close","circle-cross","close","upload","d-arrow-left","d-arrow-right","d-caret","date","delete","document","edit","information","loading","menu","message","minus","more","picture","plus","search","setting","share","star-off","star-on","time","warning","delete2","upload2","view"]
\ No newline at end of file
packages/progress/src/progress.vue
View file @ 38cb3260
......@@ -2,11 +2,35 @@
<div
class="el-progress"
:class="[
size ? 'el-progress--' + size : '',
type ? 'el-progress--' + type : ''
'el-progress--' + type,
status ? 'is-' + status : '',
{
'el-progress--without-text': !showText,
'el-progress--text-inside': textInside,
}
]"
>
<div class="el-progress__bar" :style="barStyle"></div>
<div class="el-progress-bar" v-if="type === 'line'">
<div class="el-progress-bar__outer" :style="{height: strokeWidth + 'px'}">
<div class="el-progress-bar__inner" :style="barStyle">
<div class="el-progress-bar__innerText" v-if="showText && textInside">{{percentage}}%</div>
</div>
</div>
</div>
<div class="el-progress-circle" :style="{height: width + 'px', width: width + 'px'}" v-else>
<svg viewBox="0 0 100 100">
<path class="el-progress-circle__track" :d="trackPath" stroke="#e5e9f2" :stroke-width="relativeStrokeWidth" fill="none"></path>
<path class="el-progress-circle__path" :d="trackPath" stroke-linecap="round" :stroke="stroke" :stroke-width="relativeStrokeWidth" fill="none" :style="circlePathStyle"></path>
</svg>
</div>
<div
class="el-progress__text"
v-if="showText && !textInside"
:style="{fontSize: progressTextSize + 'px'}"
>
<template v-if="!status">{{percentage}}%</template>
<i v-else :class="iconClass"></i>
</div>
</div>
</template>
<script>
......@@ -15,8 +39,8 @@
props: {
type: {
type: String,
default: 'blue',
validator: val => ['blue', 'blue-stripe', 'green', 'green-stripe'].indexOf(val) > -1
default: 'line',
validator: val => ['line', 'circle'].indexOf(val) > -1
},
size: {
type: String,
......@@ -27,6 +51,25 @@
default: 0,
required: true,
validator: val => val >= 0 && val <= 100
},
status: {
type: String
},
strokeWidth: {
type: Number,
default: 6
},
textInside: {
type: Boolean,
default: false
},
width: {
type: Number,
default: 126
},
showText: {
type: Boolean,
default: true
}
},
computed: {
......@@ -34,6 +77,52 @@
var style = {};
style.width = this.percentage + '%';
return style;
},
relativeStrokeWidth() {
return (this.strokeWidth / this.width * 100).toFixed(1);
},
trackPath() {
var radius = 50 - parseFloat(this.relativeStrokeWidth) / 2;
return `M 50,50 m 0,-${radius} a ${radius},${radius} 0 1 1 0,${radius * 2} a ${radius},${radius} 0 1 1 0,-${radius * 2}`;
},
perimeter() {
var radius = 50 - parseFloat(this.relativeStrokeWidth) / 2;
return 2 * Math.PI * radius;
},
circlePathStyle() {
var perimeter = this.perimeter;
return {
strokeDasharray: `${perimeter}px,${perimeter}px`,
strokeDashoffset: (1 - this.percentage / 100) * perimeter + 'px',
transition: 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
};
},
stroke() {
var ret;
switch (this.status) {
case 'success':
ret = '#13ce66';
break;
case 'exception':
ret = '#ff4949';
break;
default:
ret = '#20a0ff';
}
return ret;
},
iconClass() {
if (this.type === 'line') {
return this.status === 'success' ? 'el-icon-circle-check' : 'el-icon-circle-cross';
} else {
return this.status === 'success' ? 'el-icon-check' : 'el-icon-close';
}
},
progressTextSize() {
return this.type === 'line'
? 12 + this.strokeWidth * 0.4
: this.width * 0.111111 + 2 ;
}
}
};
......
packages/theme-default/src/fonts/element-icons.svg
View file @ 38cb3260
......@@ -2,7 +2,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
Created by FontForge 20120731 at Mon Aug 29 11:19:01 2016
Created by FontForge 20120731 at Tue Sep 6 12:16:07 2016
By admin
</metadata>
<defs>
......@@ -16,10 +16,10 @@ Created by FontForge 20120731 at Mon Aug 29 11:19:01 2016
ascent="896"
descent="-128"
x-height="792"
bbox="-0.0862045 -128.321 1171 896.053"
bbox="-0.0862045 -128.321 1326 896.053"
underline-thickness="50"
underline-position="-100"
unicode-range="U+0078-E626"
unicode-range="U+0078-E627"
/>
<missing-glyph horiz-adv-x="374"
d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
......@@ -50,7 +50,7 @@ d="M754 293q27 27 27 67t-27 67l-358 367q-53 55 -91 39.5t-38 -92.5v-763q0 -77 38
<glyph glyph-name="uniE607" unicode="&#xe607;" horiz-adv-x="1025"
d="M410 636q28 27 67.5 27t67.5 -27l367 -357q55 -54 39.5 -91.5t-92.5 -37.5h-763q-77 0 -92.5 37.5t39.5 91.5z" />
<glyph glyph-name="uniE608" unicode="&#xe608;" horiz-adv-x="1376"
d="M570 74q-31 0 -53 22l-301 301q-22 22 -22 53t22 53t53.5 22t53.5 -22l247 -248l473 473q22 22 53 22t53 -22t22 -53t-22 -53l-526 -526q-22 -22 -53 -22z" />
d="M548 -17q-40 0 -68 28l-389 389q-29 29 -29 69t28.5 68.5t69 28.5t68.5 -28l320 -320l612 612q29 28 69 28t68.5 -28.5t28.5 -68.5t-28 -69l-681 -681q-28 -28 -69 -28v0z" />
<glyph glyph-name="uniE609" unicode="&#xe609;"
d="M512 896q-106 0 -199.5 -40t-163 -109.5t-109.5 -163t-40 -199.5t40 -199.5t109.5 -163t163 -109.5t199.5 -40t199.5 40t163 109.5t109.5 163t40 199.5t-40 199.5t-109.5 163t-163 109.5t-199.5 40zM798 497l-373 -373q-8 -7 -17.5 -7t-17.5 7l-7 8l-206 206q-7 8 -7 18
t7 17l51 50q7 8 17 8t17 -8l145 -146l306 305q7 8 17 8t17 -8l50 -50q8 -8 8 -17.5t-8 -17.5h1z" />
......@@ -119,7 +119,7 @@ d="M877 159q27 -11 47.5 -31.5t32 -47.5t11.5 -58.5t-11.5 -58.5t-32 -47.5t-47.5 -3
t-12 60.5q0 31 12 59.5t34 48.5q20 22 48.5 34t59.5 12q15 0 30 -3q14 -3 27 -9q14 -5 25 -13t22 -17l361 212q-1 3 -1 8q-1 5 -2 9q0 5 -0.5 9.5t-0.5 9.5q0 31 12 59.5t33 48.5q21 21 49 33.5t59 12.5t59.5 -12.5t48.5 -33.5q22 -20 34 -48.5t12 -59.5q0 -33 -12 -61
t-34 -49q-20 -20 -48.5 -32t-59.5 -12q-15 0 -29.5 2t-27.5 9q-14 4 -25 12t-22 18l-361 -211q1 -5 1.5 -9.5t1.5 -8.5q0 -5 0.5 -9t0.5 -9t-0.5 -10t-0.5 -10q-1 -3 -2 -8q0 -4 -1 -8l364 -214q10 9 22 16t24 13q13 5 27 7q14 3 28 3q31 0 58 -12z" />
<glyph glyph-name="uniE620" unicode="&#xe620;" horiz-adv-x="1086"
d="M825 -58q15 -9 25 -10q-3 0 -9 -4t-6 -7q2 9 -2 27l-52 226q-9 40 5 82.5t45 68.5l176 154q14 12 18 20q-1 -3 1 -10t5 -8q-8 4 -27 6l-235 22q-40 3 -76 29.5t-52 62.5l-93 213q-7 17 -14 24q2 -2 9 -2t8 2q-7 -7 -14 -24l-93 -213q-16 -36 -52 -62.5t-76 -29.5
d="M825 -58q15 -9 25 -10q-3 0 -8.5 -4t-6.5 -7q2 9 -2 27l-52 226q-9 40 5 82.5t45 68.5l176 154q14 12 18 20q-1 -3 1 -10t5 -8q-8 4 -27 6l-235 22q-40 3 -76 29.5t-52 62.5l-93 213q-7 17 -14 24q2 -2 9 -2t8 2q-7 -7 -14 -24l-93 -213q-16 -36 -52 -62.5t-76 -29.5
l-235 -22q-19 -2 -27 -6q3 1 5 8.5t1 9.5q4 -8 18 -20l177 -154q30 -26 44 -68.5t5 -82.5l-51 -226q-4 -18 -3 -27q0 3 -6 7t-8 4q9 1 25 10l202 119q35 21 80 21t79 -21zM493 10l-202 -119q-54 -32 -82.5 -11t-14.5 82l52 226q5 23 -4 50t-27 42l-177 154q-47 41 -36 74
t73 39l236 21q23 2 46 19t32 38l93 213q25 58 60.5 58t60.5 -58l93 -213q9 -21 32 -38t46 -19l236 -21q62 -6 73 -39t-36 -74l-177 -154q-18 -15 -27 -42t-4 -50l52 -226q14 -61 -14.5 -82t-82.5 11l-202 119q-21 12 -49.5 12t-49.5 -12z" />
<glyph glyph-name="uniE621" unicode="&#xe621;" horiz-adv-x="1086"
......@@ -135,12 +135,12 @@ t-17 -41.5t-42 -17zM571 350q0 -25 -17 -42.5t-42 -17.5t-42 17.5t-17 42.5v275q0 25
d="M382 491v-384q0 -10 -6 -16t-15 -6h-43q-10 0 -16 6t-6 16v384q0 9 6 15t16 6h43q9 0 15 -6t6 -15zM555 491v-384q0 -10 -6 -16t-15 -6h-44q-9 0 -15 6t-6 16v384q0 9 6 15t15 6h44q9 0 15 -6t6 -15zM728 491v-384q0 -10 -6 -16t-16 -6h-43q-9 0 -15 6t-6 16v384
q0 9 6 15t15 6h43q10 0 16 -6t6 -15zM815 8v632h-606v-632q0 -15 5 -27t10 -18t7 -6h562q2 0 7 6t10 18t5 27zM361 725h302l-32 78q-5 6 -12 8h-214q-6 -2 -11 -8zM987 704v-43q0 -9 -6 -15t-15 -6h-65v-632q0 -55 -31.5 -95.5t-76.5 -40.5h-562q-45 0 -76.5 39t-31.5 94
v635h-65q-9 0 -15 6t-6 15v43q0 9 6 15t15 6h209l47 112q10 24 36.5 41.5t53.5 17.5h216q27 0 53.5 -17.5t36.5 -41.5l47 -112h209q9 0 15 -6t6 -15z" />
<glyph glyph-name="uniE625" unicode="&#xe625;" horiz-adv-x="1103"
d="M1039 -128h-975q-27 0 -45.5 19t-18.5 45v320q0 27 18.5 45.5t45 18.5t45 -18.5t18.5 -45.5v-256h849v256q0 27 18.5 45.5t44.5 18.5t45 -18.5t19 -45.5v-320q0 -26 -18.5 -45t-45.5 -19zM742 555q-28 0 -47 21l-80 89v-388q0 -26 -18.5 -45t-45 -19t-45 19t-18.5 45v388
l-80 -89q-19 -21 -47 -21q-27 0 -45.5 18.5t-18.5 45.5q0 24 16 42l191 214q19 21 47.5 21t47.5 -21l191 -214q16 -18 16 -42q0 -27 -18.5 -45.5t-45.5 -18.5z" />
<glyph glyph-name="uniE626" unicode="&#xe626;"
d="M634 506h-146v147q0 20 -14.5 34t-34.5 14t-34.5 -14t-14.5 -34v-147h-146q-20 0 -34 -14t-14 -34.5t14 -34.5t34 -14h146v-147q0 -20 14.5 -34t34.5 -14t34.5 14t14.5 34v147h146q20 0 34.5 14t14.5 34.5t-14.5 34.5t-34.5 14zM1009 -41l-226 227q67 85 86.5 190.5
t-12 209t-109.5 181.5q-63 64 -145 96.5t-165 32.5t-165 -32.5t-145 -96t-95.5 -145.5t-32.5 -165t32.5 -165t95.5 -145q79 -78 182.5 -109.5t209.5 -11.5t191 87l226 -226q15 -15 36 -15t36 15t15 36t-15 36zM679 217q-65 -66 -153 -89t-176 0t-153.5 89t-88.5 153.5
t0 175.5t88.5 153.5t153.5 89t176 0t153.5 -89t88.5 -153.5t0 -175.5t-89 -153.5z" />
<glyph glyph-name="uniE627" unicode="&#xe627;" horiz-adv-x="1103"
d="M1039 -128h-975q-27 0 -45.5 19t-18.5 45v320q0 27 18.5 45.5t45 18.5t45 -18.5t18.5 -45.5v-256h849v256q0 27 18.5 45.5t44.5 18.5t45 -18.5t19 -45.5v-320q0 -26 -18.5 -45t-45.5 -19zM742 555q-28 0 -47 21l-80 89v-388q0 -26 -18.5 -45t-45 -19t-45 19t-18.5 45v388
l-80 -89q-19 -21 -47 -21q-27 0 -45.5 18.5t-18.5 45.5q0 24 16 42l191 214q19 21 47.5 21t47.5 -21l191 -214q16 -18 16 -42q0 -27 -18.5 -45.5t-45.5 -18.5z" />
</font>
</defs></svg>
packages/theme-default/src/icon.css
View file @ 38cb3260
......@@ -38,7 +38,7 @@
.el-icon-circle-close:before { content: "\e60a"; }
.el-icon-circle-cross:before { content: "\e60b"; }
.el-icon-close:before { content: "\e60c"; }
.el-icon-cloud:before { content: "\e60d"; }
.el-icon-upload:before { content: "\e60d"; }
.el-icon-d-arrow-left:before { content: "\e60e"; }
.el-icon-d-arrow-right:before { content: "\e60f"; }
.el-icon-d-caret:before { content: "\e610"; }
......@@ -62,7 +62,7 @@
.el-icon-time:before { content: "\e622"; }
.el-icon-warning:before { content: "\e623"; }
.el-icon-delete2:before { content: "\e624"; }
.el-icon-upload:before { content: "\e625"; }
.el-icon-upload2:before { content: "\e627"; }
.el-icon-view:before { content: "\e626"; }
.el-icon-loading {
......
packages/theme-default/src/progress.css
View file @ 38cb3260
......@@ -3,48 +3,110 @@
@component-namespace el {
@b progress {
height: 4px;
border-radius: 2px;
background-color: #e5e9f2;
overflow: hidden;
position: relative;
line-height: 1;
@e bar {
position: absolute;
left: 0;
top: 0;
height: 100%;
border-radius: 2px 0 0 2px;
@e text {
font-size:14px;
color:#475669;
display: inline-block;
vertical-align: middle;
margin-left: 10px;
line-height: 1;
i {
vertical-align: middle;
display: block;
}
}
@m green {
.el-progress__bar {
background-color: var(--color-success);
@m circle {
display: inline-block;
.el-progress__text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
margin: 0;
i {
vertical-align: middle;
display: inline-block;
}
@utils-vertical-center;
}
}
@m without-text {
.el-progress__text {
display: none;
}
.el-progress-bar {
padding-right: 0;
margin-right: 0;
display: block;
}
}
@m blue {
.el-progress__bar {
background-color: var(--color-primary);
@m text-inside {
.el-progress-bar {
padding-right: 0;
margin-right: 0;
}
}
@m green-stripe {
.el-progress__bar {
background: linear-gradient(45deg, var(--color-success) 25%, #5adc94 25%, #5adc94 75%, var(--color-success) 75%);
background-size: 16px 100%;
animation: progress 1.5s linear infinite;
@when success {
.el-progress-bar__inner {
background-color: var(--color-success);
}
.el-progress__text {
color: var(--color-success);
}
}
@m blue-stripe {
.el-progress__bar {
background: linear-gradient(45deg, var(--color-primary) 25%, #63bcff 25%, #63bcff 75%, var(--color-primary) 75%);
background-size: 16px 100%;
animation: progress 1.5s linear infinite;
@when exception {
.el-progress-bar__inner {
background-color: var(--color-danger);
}
.el-progress__text {
color: var(--color-danger);
}
}
@m large {
}
@b progress-bar {
padding-right: 50px;
display: inline-block;
vertical-align: middle;
width: 100%;
margin-right: -55px;
box-sizing: border-box;
@e outer {
height: 6px;
border-radius: 100px;
background-color: #e5e9f2;
overflow: hidden;
position: relative;
vertical-align: middle;
}
@e inner {
position: absolute;
left: 0;
top: 0;
height: 100%;
border-radius: 2px 0 0 2px;
background-color: var(--color-primary);
text-align: right;
border-radius: 100px;
line-height: 1;
@utils-vertical-center;
}
@m small {
height: 2px;
@e innerText {
display: inline-block;
vertical-align: middle;
color: #fff;
font-size: 12px;
margin: 0 5px;
}
}
}
......
packages/theme-default/src/upload.css
View file @ 38cb3260
......@@ -34,8 +34,6 @@
color: #475669;
line-height: 32px;
position: relative;
padding-right: 40px;
padding-left: 4px;
box-sizing: border-box;
border-radius: 4px;
width: 100%;
......@@ -47,25 +45,29 @@
a {
color: #475669;
transition: color .3s;
}
[class^="el-icon"] {
color: #99a9bf;
margin-right: 7px;
height: 100%;
line-height: inherit;
padding-left: 4px;
[class^="el-icon"] {
color: #99a9bf;
margin-right: 7px;
height: 100%;
line-height: inherit;
}
}
& .el-progress {
position: absolute;
bottom: 0;
bottom: -3px;
width: 100%;
}
& .el-icon-check {
margin-right: 0;
color: #13ce66;
& .el-progress__text {
position: absolute;
right: 0;
top: 0;
height: 100%;
top: -10px;
right: 0;
}
.el-progress-bar {
margin-right: 0;
padding-right: 0;
}
&:hover {
background-color: #eff2f7;
......@@ -113,7 +115,7 @@
display: block;
height: 100%;
}
& .el-icon-cloud {
& .el-icon-upload {
font-size: 67px;
color: #99a9bf;
margin: 40px 0 16px;
......@@ -138,6 +140,7 @@
overflow: hidden;
z-index: 10;
cursor: default;
@utils-vertical-center;
& img {
display: block;
......@@ -146,14 +149,24 @@
}
@e progress {
position: absolute 0 60px 0 60px;
margin: auto;
display: inline-block;
vertical-align: middle;
position: static;
width: 243px;
& + .el-upload__inner {
opacity: 0;
}
}
@e content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@e interact {
position: absolute;
bottom: 0;
......
packages/upload/src/cover.vue
View file @ 38cb3260
......@@ -3,18 +3,23 @@
<transition name="fade-in">
<el-progress
class="el-dragger__cover__progress"
v-if="image.status === 'loading'"
size="large"
v-if="image.status === 'uploading'"
:percentage="image.percentage"
:type="image.status === 'finished' ? 'green' : 'blue'">
:show-text="false"
:status="image.status === 'finished' ? 'success' : ''">
</el-progress>
</transition>
<div v-if="image.status === 'finished'" @mouseenter="mouseover = true" @mouseleave="mouseover = false">
<div
class="el-dragger__cover__content"
v-if="image.status === 'finished'"
@mouseenter="mouseover = true"
@mouseleave="mouseover = false"
>
<img :src="image.url">
<transition name="fade-in">
<div v-show="mouseover" class="el-dragger__cover__interact">
<div class="el-draggeer__cover__btns">
<span class="btn" @click="$parent.$refs.input.click()"><i class="el-icon-upload"></i><span>继续上传</span></span>
<span class="btn" @click="$parent.handleClick()"><i class="el-icon-upload2"></i><span>继续上传</span></span>
<span class="btn" @click="onPreview(image)"><i class="el-icon-view"></i><span>查看图片</span></span>
<span class="btn" @click="onRemove(image)"><i class="el-icon-delete2"></i><span>删除</span></span>
</div>
......
packages/upload/src/upload-list.vue
View file @ 38cb3260
......@@ -12,13 +12,12 @@
<a class="el-upload__file__name" @click="$emit('preview', file)">
<i class="el-icon-document"></i>{{file.name}}
</a>
<i class="el-icon-check" v-if="file.status === 'finished' && file.showProgress"></i>
<span class="el-upload__btn-delete" @click="$emit('remove', file)" v-show="file.status === 'finished'">删除</span>
<el-progress
v-if="file.showProgress"
size="small"
:percentage="file.percentage"
:type="file.status === 'finished' ? 'green' : 'blue'">
:stroke-width="2"
:percentage="parsePercentage(file.percentage)"
:status="file.status === 'finished' && file.showProgress ? 'success' : ''">
</el-progress>
</li>
</transition-group>
......@@ -32,6 +31,11 @@
return [];
}
}
},
methods: {
parsePercentage(val) {
return parseInt(val, 10);
}
}
};
</script>
packages/upload/src/upload.vue
View file @ 38cb3260
......@@ -5,7 +5,7 @@
'is-dragOver': dragOver,
'is-showCover': showCover
}"
@click="$refs.input.click()"
@click="handleClick"
@drop.prevent="onDrop"
@dragover.prevent="dragOver = true"
@dragleave.prevent="dragOver = false"
......@@ -148,6 +148,9 @@ export default {
onDrop(e) {
this.dragOver = false;
this.uploadFiles(e.dataTransfer.files);
},
handleClick() {
this.$refs.input.click();
}
}
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment