Skip to content

Commit 02b0af7

Browse files
coderjamcoderjam
committed
完成switch组件的基本样式和切换效果
1 parent 2ae3b00 commit 02b0af7

File tree

5 files changed

+44
-115
lines changed

5 files changed

+44
-115
lines changed

‎.idea/modules.xml

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎.idea/vcs.xml

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎.idea/workspace.xml

Lines changed: 0 additions & 88 deletions
This file was deleted.

‎.idea/zhiwei-ui-vue3.iml

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎src/lib/Switch.vue

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,46 @@
11
<template>
2-
<button>switch</button>
2+
<button @click="toggle" :class="{checked}"> <span></span> </button>
33
</template>
4+
<script lang="ts">
5+
import { ref } from 'vue'
6+
export default {
7+
setup(){
8+
const checked = ref(true)
9+
const toggle = ()=>{
10+
checked.value = !checked.value
11+
}
12+
return { checked,toggle }
13+
}
14+
}
15+
</script>
16+
<style lang="scss" scoped>
17+
$h: 22px;
18+
$h2: $h - 4px;
19+
button{
20+
height: $h;
21+
width: $h*2;
22+
border: none;
23+
background: grey;
24+
border-radius: $h/2;
25+
position: relative;
26+
}
27+
span{
28+
position: absolute;
29+
top: 2px;
30+
left: 2px;
31+
height: $h2;
32+
width: $h2;
33+
background:white;
34+
border-radius: $h2 / 2;
35+
transition: left 250ms;
36+
}
37+
button.checked{
38+
background: #1989fa;
39+
}
40+
button.checked > span {
41+
left: calc(100% - #{$h2} - 2px);
42+
}
43+
button:focus{
44+
outline: none;
45+
}
46+
</style>

0 commit comments

Comments
 (0)