mirrors/element
1
0
Fork 0
mirror of https://github.com/ElemeFE/element.git synced 2025-12-16 11:44:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

Progress: add dashboard progress bar & add custom color (#11867)

Browse Source
This commit is contained in:
hetech
2019-05-28 11:02:00 +08:00
committed by GitHub
parent 90448d6786
commit 6af04e8765
8 changed files with 746 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
test/unit/specs/progress.spec.js
View File

@@ -1,4 +1,4 @@
import { createVue, destroyVM } from '../util';
import { createVue, destroyVM, waitImmediate } from '../util';
describe('Progress', () => {
let vm;
@@ -78,6 +78,14 @@ describe('Progress', () => {
}, true);
expect(vm.$el.classList.contains('el-progress--circle')).to.be.true;
});
it('dashboard', () => {
vm = createVue({
template: `
<el-progress type="dashboard" :percentage="50"></el-progress>
`
}, true);
expect(vm.$el.classList.contains('el-progress--dashboard')).to.be.true;
});
it('width', () => {
vm = createVue({
template: `
@@ -103,4 +111,81 @@ describe('Progress', () => {
}, true);
expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(0, 0, 0)');
});
it('color is function', async() => {
vm = createVue({
template: `
<el-progress :percentage="percentage" :color="customColor"></el-progress>
`,
data() {
return {
percentage: 50
};
},
methods: {
customColor(percentage) {
if (percentage > 50) {
return '#13ce66';
} else {
return '#20a0ff';
}
},
increase() {
this.percentage = 60;
}
}
}, true);
expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(32, 160, 255)');
vm.increase();
await waitImmediate();
expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(19, 206, 102)');
});
it('color is array', async() => {
vm = createVue({
template: `
<el-progress :percentage="percentage" :color="colors"></el-progress>
`,
data() {
return {
percentage: 50,
colors: [
{color: '#f56c6c', percentage: 20},
{color: '#e6a23c', percentage: 40},
{color: '#20a0ff', percentage: 60},
{color: '#13ce66', percentage: 80},
{color: '#6f7ad3', percentage: 100}
]
};
},
methods: {
increase() {
this.percentage = 70;
}
}
}, true);
// #20a0ff
expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(32, 160, 255)');
vm.increase();
await waitImmediate();
// #13ce66
expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(19, 206, 102)');
});
it('format content', () => {
vm = createVue({
template: `
<el-progress :percentage="50" :format="format"></el-progress>
`,
methods: {
format(percentage) {
return `占比${percentage}%`;
}
}
}, true);
expect(vm.$el.querySelector('.el-progress__text').innerHTML).to.equal('占比50%');
});
});