alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(Circle): add startPosition prop (#9305)

Browse Source 
* feat(Circle): add startPosition prop

* docs(Circle): add start-position demo
This commit is contained in:
neverland
2021-08-22 16:19:37 +08:00
committed by GitHub
parent 5a93179b6b
commit f24c521d26
7 changed files with 184 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/circle/test/__snapshots__/demo.spec.ts.snap
+59
View File
@@ -152,4 +152,63 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</button>
</div>
<div>
<div class="van-circle">
<svg viewbox="0 0 1040 1040"
style="transform: rotate(270deg);"
>
<path class="van-circle__layer"
style="fill: none; stroke-width: 40px;"
d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
>
</path>
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
style="stroke-width: 41px; stroke-dasharray: 2355px 3140px;"
class="van-circle__hover"
>
</path>
</svg>
<div class="van-circle__text">
Left
</div>
</div>
<div class="van-circle">
<svg viewbox="0 0 1040 1040"
style="transform: rotate(90deg);"
>
<path class="van-circle__layer"
style="fill: none; stroke-width: 40px;"
d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
>
</path>
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
style="stroke-width: 41px; stroke-dasharray: 2355px 3140px;"
class="van-circle__hover"
>
</path>
</svg>
<div class="van-circle__text">
Right
</div>
</div>
<div class="van-circle">
<svg viewbox="0 0 1040 1040"
style="transform: rotate(180deg);"
>
<path class="van-circle__layer"
style="fill: none; stroke-width: 40px;"
d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
>
</path>
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
style="stroke-width: 41px; stroke-dasharray: 2355px 3140px;"
class="van-circle__hover"
>
</path>
</svg>
<div class="van-circle__text">
Bottom
</div>
</div>
</div>
`;
src/circle/test/index.spec.ts
+19
View File
@@ -47,3 +47,22 @@ test('should change stroke linecap when using stroke-linecap prop', () => {
expect(wrapper.html()).toMatchSnapshot();
});
test('should render start-position prop correctly', async () => {
const wrapper = mount(Circle, {
props: {
startPosition: 'top',
},
});
expect(wrapper.find('svg').style.transform).toEqual('');
await wrapper.setProps({ startPosition: 'right' });
expect(wrapper.find('svg').style.transform).toEqual('rotate(90deg)');
await wrapper.setProps({ startPosition: 'bottom' });
expect(wrapper.find('svg').style.transform).toEqual('rotate(180deg)');
await wrapper.setProps({ startPosition: 'left' });
expect(wrapper.find('svg').style.transform).toEqual('rotate(270deg)');
});