forked from opentiny/tiny-vue
docs(progress): [progress] Optimization Merge Example (#1282)
This commit is contained in:
chenxi-20
GitHub
parent
c3ef249888
commit
81893e9680
|
|
@ -1,27 +1,32 @@
|
|||
<template>
|
||||
<tiny-button @click="add">增加</tiny-button>
|
||||
<tiny-progress
|
||||
class="circle-progress"
|
||||
type="circle"
|
||||
:percentage="value"
|
||||
status="exception"
|
||||
:width="150"
|
||||
></tiny-progress>
|
||||
<tiny-progress type="circle" :percentage="percentage" status="exception" :width="150"></tiny-progress>
|
||||
<tiny-progress type="dashboard" :percentage="percentage" :color="customColors" :width="300"> </tiny-progress>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { Progress as TinyProgress, Button as TinyButton } from '@opentiny/vue'
|
||||
|
||||
const value = ref(10)
|
||||
const percentage = ref(10)
|
||||
const customColors = ref([
|
||||
{ color: '#f56c6c', percentage: 20 },
|
||||
{ color: '#e6a23c', percentage: 40 },
|
||||
{ color: '#5cb87a', percentage: 60 },
|
||||
{ color: '#1989fa', percentage: 80 },
|
||||
{ color: '#6f7ad3', percentage: 100 }
|
||||
])
|
||||
|
||||
function add() {
|
||||
value.value += 10
|
||||
if (percentage.value === 100) {
|
||||
return
|
||||
}
|
||||
percentage.value += 10
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.circle-progress {
|
||||
margin-right: 20px;
|
||||
.tiny-progress {
|
||||
margin: 0 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test.describe('全封闭环形', () => {
|
||||
test('是否circle 类型', async ({ page }) => {
|
||||
test.describe('环形', () => {
|
||||
test('是否圆环类型', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).not.toBeNull())
|
||||
await page.goto('progress#progress-type-circle')
|
||||
|
||||
const progress = page.getByRole('progressbar')
|
||||
const circleTrack = progress.locator('.tiny-progress-circle__track')
|
||||
const cirlePath = progress.locator('.tiny-progress-circle__path')
|
||||
const firstProgress = page.getByRole('progressbar').first()
|
||||
const circleTrack = firstProgress.locator('.tiny-progress-circle__track')
|
||||
const cirlePath = firstProgress.locator('.tiny-progress-circle__path')
|
||||
|
||||
await expect(progress.locator('div.tiny-progress-circle')).toBeVisible()
|
||||
await expect(firstProgress.locator('div.tiny-progress-circle')).toBeVisible()
|
||||
await expect(circleTrack).toHaveAttribute('stroke-width', '4')
|
||||
await expect(circleTrack).toHaveAttribute('stroke', '#e5e9f2')
|
||||
await expect(circleTrack).toHaveCSS('d', 'path("M 50 50 M 50 2 A 48 48 0 1 1 50 98 A 48 48 0 1 1 50 2")')
|
||||
|
|
@ -19,17 +19,51 @@ test.describe('全封闭环形', () => {
|
|||
await expect(cirlePath).toHaveCSS('d', 'path("M 50 50 M 50 2 A 48 48 0 1 1 50 98 A 48 48 0 1 1 50 2")')
|
||||
})
|
||||
|
||||
test('是否C型圆环类型', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).not.toBeNull())
|
||||
await page.goto('progress#progress-type-circle')
|
||||
|
||||
const lastProgress = page.getByRole('progressbar').last()
|
||||
const circleTrack = lastProgress.locator('.tiny-progress-circle__track')
|
||||
const cirlePath = lastProgress.locator('.tiny-progress-circle__path')
|
||||
|
||||
await expect(lastProgress).toHaveClass(/tiny-progress--dashboard/)
|
||||
await expect(lastProgress.locator('div.tiny-progress-circle')).toBeVisible()
|
||||
await expect(lastProgress.locator('div.tiny-progress__text')).toBeVisible()
|
||||
await expect(circleTrack).toHaveAttribute('stroke-width', '2')
|
||||
await expect(circleTrack).toHaveAttribute('stroke', '#e5e9f2')
|
||||
await expect(circleTrack).toHaveCSS('d', 'path("M 50 50 M 50 99 A 49 49 0 1 1 50 1 A 49 49 0 1 1 50 99")')
|
||||
await expect(cirlePath).toHaveAttribute('stroke-width', '2')
|
||||
await expect(cirlePath).toHaveAttribute('stroke', '#f56c6c')
|
||||
await expect(cirlePath).toHaveAttribute('stroke-linecap', 'round')
|
||||
await expect(cirlePath).toHaveCSS('d', 'path("M 50 50 M 50 99 A 49 49 0 1 1 50 1 A 49 49 0 1 1 50 99")')
|
||||
await expect(cirlePath).toHaveCSS('stroke-dasharray', '23.0907px, 307.876px')
|
||||
})
|
||||
|
||||
test('点击值增加', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).not.toBeNull())
|
||||
await page.goto('progress#progress-type-circle')
|
||||
|
||||
const progress = page.getByRole('progressbar')
|
||||
const cirlePath = progress.locator('.tiny-progress-circle__path')
|
||||
const firstProgress = page.getByRole('progressbar').first()
|
||||
const cirlePath1 = firstProgress.locator('.tiny-progress-circle__path')
|
||||
|
||||
await expect(progress).toHaveAttribute('aria-valuenow', '10')
|
||||
await expect(cirlePath).toHaveCSS('stroke-dasharray', '30.1593px, 301.593px')
|
||||
const lastProgress = page.getByRole('progressbar').last()
|
||||
const cirlePath2 = lastProgress.locator('.tiny-progress-circle__path')
|
||||
|
||||
await expect(firstProgress).toHaveAttribute('aria-valuenow', '10')
|
||||
await expect(cirlePath1).toHaveCSS('stroke-dasharray', '30.1593px, 301.593px')
|
||||
await expect(lastProgress).toHaveAttribute('aria-valuenow', '10')
|
||||
await expect(cirlePath2).toHaveCSS('stroke-dasharray', '23.0907px, 307.876px')
|
||||
await page.getByRole('button', { name: '增加' }).click()
|
||||
await expect(progress).toHaveAttribute('aria-valuenow', '20')
|
||||
await expect(cirlePath).toHaveCSS('stroke-dasharray', '60.3186px, 301.593px')
|
||||
await expect(firstProgress).toHaveAttribute('aria-valuenow', '20')
|
||||
await expect(cirlePath1).toHaveCSS('stroke-dasharray', '60.3186px, 301.593px')
|
||||
await expect(lastProgress).toHaveAttribute('aria-valuenow', '20')
|
||||
await expect(cirlePath2).toHaveCSS('stroke-dasharray', '46.1814px, 307.876px')
|
||||
|
||||
await page.getByRole('button', { name: '增加' }).click()
|
||||
await expect(firstProgress).toHaveAttribute('aria-valuenow', '30')
|
||||
await expect(cirlePath1).toHaveCSS('stroke-dasharray', '90.4779px, 301.593px')
|
||||
await expect(lastProgress).toHaveAttribute('aria-valuenow', '30')
|
||||
await expect(cirlePath2).toHaveCSS('stroke-dasharray', '69.2721px, 307.876px')
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,12 +1,7 @@
|
|||
<template>
|
||||
<tiny-button @click="add">增加</tiny-button>
|
||||
<tiny-progress
|
||||
class="circle-progress"
|
||||
type="circle"
|
||||
:percentage="value"
|
||||
status="exception"
|
||||
:width="150"
|
||||
></tiny-progress>
|
||||
<tiny-progress type="circle" :percentage="percentage" status="exception" :width="150"></tiny-progress>
|
||||
<tiny-progress type="dashboard" :percentage="percentage" :color="customColors" :width="300"> </tiny-progress>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
|
|
@ -18,18 +13,30 @@ export default {
|
|||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return { value: 10 }
|
||||
return {
|
||||
percentage: 10,
|
||||
customColors: [
|
||||
{ color: '#f56c6c', percentage: 20 },
|
||||
{ color: '#e6a23c', percentage: 40 },
|
||||
{ color: '#5cb87a', percentage: 60 },
|
||||
{ color: '#1989fa', percentage: 80 },
|
||||
{ color: '#6f7ad3', percentage: 100 }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add() {
|
||||
this.value += 10
|
||||
if (this.percentage === 100) {
|
||||
return
|
||||
}
|
||||
this.percentage += 10
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.circle-progress {
|
||||
margin-right: 20px;
|
||||
.tiny-progress {
|
||||
margin: 0 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,35 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="add">增加</tiny-button>
|
||||
<tiny-progress type="dashboard" :percentage="percentage" :color="customColors" :width="300"> </tiny-progress>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { Progress as TinyProgress, Button as TinyButton } from '@opentiny/vue'
|
||||
|
||||
const percentage = ref(20)
|
||||
const customColor = ref('#409eff')
|
||||
const customColors = ref([
|
||||
{ color: '#f56c6c', percentage: 20 },
|
||||
{ color: '#e6a23c', percentage: 40 },
|
||||
{ color: '#5cb87a', percentage: 60 },
|
||||
{ color: '#1989fa', percentage: 80 },
|
||||
{ color: '#6f7ad3', percentage: 100 }
|
||||
])
|
||||
|
||||
function customColorMethod(percentage) {
|
||||
if (percentage < 30) {
|
||||
return '#909399'
|
||||
} else if (percentage < 70) {
|
||||
return '#e6a23c'
|
||||
} else {
|
||||
return '#67c23a'
|
||||
}
|
||||
}
|
||||
|
||||
function add() {
|
||||
percentage.value += 10
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('非全封闭环形', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).not.toBeNull())
|
||||
await page.goto('progress#progress-type-dashboard')
|
||||
|
||||
const progress = page.getByRole('progressbar')
|
||||
const circleTrack = progress.locator('.tiny-progress-circle__track')
|
||||
const cirlePath = progress.locator('.tiny-progress-circle__path')
|
||||
|
||||
await expect(progress).toHaveClass(/tiny-progress--dashboard/)
|
||||
await expect(progress.locator('div.tiny-progress-circle')).toBeVisible()
|
||||
await expect(progress.locator('div.tiny-progress__text')).toBeVisible()
|
||||
await expect(circleTrack).toHaveAttribute('stroke-width', '2')
|
||||
await expect(circleTrack).toHaveAttribute('stroke', '#e5e9f2')
|
||||
await expect(circleTrack).toHaveCSS('d', 'path("M 50 50 M 50 99 A 49 49 0 1 1 50 1 A 49 49 0 1 1 50 99")')
|
||||
await expect(cirlePath).toHaveAttribute('stroke-width', '2')
|
||||
await expect(cirlePath).toHaveAttribute('stroke', '#e6a23c')
|
||||
await expect(cirlePath).toHaveAttribute('stroke-linecap', 'round')
|
||||
await expect(cirlePath).toHaveCSS('d', 'path("M 50 50 M 50 99 A 49 49 0 1 1 50 1 A 49 49 0 1 1 50 99")')
|
||||
await expect(cirlePath).toHaveCSS('stroke-dasharray', '46.1814px, 307.876px')
|
||||
})
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="add">增加</tiny-button>
|
||||
<tiny-progress type="dashboard" :percentage="percentage" :color="customColors" :width="300"> </tiny-progress>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Progress, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyProgress: Progress,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
percentage: 20,
|
||||
customColor: '#409eff',
|
||||
customColors: [
|
||||
{ color: '#f56c6c', percentage: 20 },
|
||||
{ color: '#e6a23c', percentage: 40 },
|
||||
{ color: '#5cb87a', percentage: 60 },
|
||||
{ color: '#1989fa', percentage: 80 },
|
||||
{ color: '#6f7ad3', percentage: 100 }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
customColorMethod(percentage) {
|
||||
if (percentage < 30) {
|
||||
return '#909399'
|
||||
} else if (percentage < 70) {
|
||||
return '#e6a23c'
|
||||
} else {
|
||||
return '#67c23a'
|
||||
}
|
||||
},
|
||||
add() {
|
||||
this.percentage += 10
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -54,23 +54,14 @@ export default {
|
|||
},
|
||||
{
|
||||
'demoId': 'progress-type-circle',
|
||||
'name': { 'zh-CN': '全封闭环形', 'en-US': 'Fully enclosed annular' },
|
||||
'name': { 'zh-CN': '环形', 'en-US': 'Annular' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'通过 <code>type="circle"</code> 设置为全封闭环形类型， <code>width</code> 设置环形进度条画布宽度，默认值为126px。',
|
||||
'通过 <code>type="circle"</code> 设置为圆环类型，<code>type="dashboard"</code> 则为C型圆环类型; <code>width</code> 设置环形进度条画布宽度，默认值为126px。',
|
||||
'en-US':
|
||||
'Set <code>type="circle"</code> to a fully enclosed circular type, and <code>width</code> to set the width of the circular progress bar canvas, with a default value of 126px.'
|
||||
'Set<code>type="circle"</code>to the circular type, and<code>type="dashboard"</code>to the C-shaped circular type< Code>width</code>Set the width of the circular progress bar canvas, with a default value of 126px.'
|
||||
},
|
||||
'codeFiles': ['progress-type-circle.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'progress-type-dashboard',
|
||||
'name': { 'zh-CN': '非全封闭环形', 'en-US': 'Non fully enclosed annular' },
|
||||
'desc': {
|
||||
'zh-CN': '通过 <code>type="dashboard"</code> 设置为非全封闭环形类型。',
|
||||
'en-US': 'Set to a semi enclosed circular type through <code>type="dashboard"</code> .'
|
||||
},
|
||||
'codeFiles': ['progress-type-dashboard.vue']
|
||||
}
|
||||
],
|
||||
apis: [
|
||||
|
|
|
|||
Loading…
Reference in New Issue