Skip to content

Commit fe130ac

Browse files
author
Tenny
committed
Squashed commit of the following:
commit 81d6c97 Author: Tenny <tenny.shu@foxmail.com> Date: Tue Aug 13 17:45:55 2024 +0800 fix(Switch): 开关按钮增加替换 action 内容 fix(SunIcon): 增加主题按钮 sun fix(MoonIcon): 增加主题按钮 moon commit 8a3a179 Author: Tenny <tenny.shu@foxmail.com> Date: Tue Aug 13 17:44:53 2024 +0800 xx
1 parent bcd2758 commit fe130ac

File tree

7 files changed

+132
-3
lines changed

7 files changed

+132
-3
lines changed

‎docs/components/switch.md‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
<script setup>
88
import { ref } from 'vue'
9-
import { Switch } from '../../src'
9+
import { Switch, MoonIcon, SunIcon } from '../../src'
1010

1111
const open = ref(true);
1212
</script>
@@ -49,6 +49,33 @@
4949
</CodePreview>
5050
</ClientOnly>
5151

52+
### 自定义操作图标
53+
54+
使用 `action` 插槽, 配合 `props-checked` 作用域来自定义渲染操作图标。
55+
56+
<ClientOnly>
57+
<CodePreview>
58+
<textarea lang="vue-html">
59+
<template>
60+
<nt-switch v-model="open">
61+
<template #action="slotProp">
62+
<nt-moon-icon v-if="slotProp.checked"></nt-moon-icon>
63+
<nt-sun-icon v-else></nt-sun-icon>
64+
</template>
65+
</nt-switch>
66+
</template>
67+
</textarea>
68+
<template #preview>
69+
<Switch v-model="open">
70+
<template #action="slotProp">
71+
<MoonIcon v-if="slotProp.checked"></MoonIcon>
72+
<SunIcon v-else></SunIcon>
73+
</template>
74+
</Switch>
75+
</template>
76+
</CodePreview>
77+
</ClientOnly>
78+
5279
## API
5380

5481
### Switch Props
@@ -71,3 +98,10 @@
7198
| -------------------- | ----------------------------- | ------------ |
7299
| `--nt-switch-height` | `20px` | 开关按钮高度 |
73100
| `--nt-switch-width` | `var(--nt-switch-height) * 2` | 开关按钮宽度 |
101+
102+
### Switch Slots
103+
104+
<!-- prettier-ignore -->
105+
| 名称 | 描述 | 插槽参数 |
106+
| --- | --- | --- |
107+
| `action` | 开关操作按钮内容 | `{ checked: boolean }` |

‎scripts/publish.sh‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
#!/bin/bash
2+
3+
GREEN='\033[1;32m'
4+
RESET='\033[0m' # 重置颜色
5+
6+
# 检查是否提供了至少一个参数
7+
if [ $# -eq 0 ]; then
8+
echo "请提供至少一个参数!"
9+
exit 1
10+
fi
11+
12+
if [ "$1" = "push" ]; then
13+
# 提示输入提交信息
14+
echo "请输入提交信息（输入空行、'END'、'exit' 或 'bye' 结束输入）："
15+
16+
# 初始化一个空字符串来存储提交信息
17+
commit_message=""
18+
19+
# 读取用户输入直到输入 'END'
20+
while IFS= read -r line; do
21+
if [ "$line" = "END" ] || [ "$line" = "END" ] || [ "$line" = "exit" ] || [ "$line" = "bye" ]; then
22+
break
23+
fi
24+
# 将读取的行添加到提交信息中，使用换行符分隔
25+
commit_message+="$line"$'\n'
26+
done
27+
28+
# 检查提交信息是否为空
29+
if [ -z "$commit_message" ]; then
30+
echo "提交信息不能为空。"
31+
exit 1
32+
fi
33+
34+
# 提交到 dev 分支, 然后 squash 合并并提交到 main 分支
35+
git add .
36+
git commit -m "$commit_message"
37+
git push origin dev
38+
git checkout main
39+
git merge --squash dev
40+
git commit --no-edit
41+
git merge dev -m "new version"
42+
git push origin main
43+
44+
echo "-----"
45+
echo -e "${GREEN}push success${RESET}"
46+
echo "-----"
47+
elif [ "$1" = "pull" ]; then
48+
echo "pull"
49+
fi

‎src/components/Switch.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@
77
}"
88
@click="handleChange"
99
>
10-
<span class="nt-switch-action"></span>
10+
<div class="nt-switch-action">
11+
<slot name="action" :checked="checked"></slot>
12+
</div>
1113
<span v-if="checked || uncheckedText" class="nt-switch-text">
1214
{{ checked ? checkedText || '' : uncheckedText || '' }}
1315
</span>
@@ -16,7 +18,7 @@
1618
<script setup lang="ts">
1719
const checked = defineModel({ default: false });
1820
19-
const emits = defineEmits(['change'])
21+
const emits = defineEmits(['change']);
2022
2123
withDefaults(
2224
defineProps<{

‎src/components/icon/Moon.vue‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<Base
3+
view-box="0 0 24 24"
4+
stroke="currentColor"
5+
stroke-linecap="round"
6+
stroke-linejoin="round"
7+
stroke-width="2"
8+
>
9+
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
10+
</Base>
11+
</template>
12+
13+
<script setup lang="ts">
14+
import Base from './Base.vue';
15+
</script>
16+
17+
<style lang="less"></style>

‎src/components/icon/Sun.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<Base
3+
view-box="0 0 24 24"
4+
stroke="currentColor"
5+
stroke-linecap="round"
6+
stroke-linejoin="round"
7+
stroke-width="2"
8+
>
9+
<circle cx="12" cy="12" r="4" />
10+
<path
11+
d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"
12+
/>
13+
</Base>
14+
</template>
15+
16+
<script setup lang="ts">
17+
import Base from './Base.vue';
18+
</script>
19+
20+
<style lang="less"></style>

‎src/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ export { default as CloseIcon } from './components/icon/Close.vue';
2222
export { default as MoreIcon } from './components/icon/More.vue';
2323
export { default as DArrowLeft } from './components/icon/DArrowLeft.vue';
2424
export { default as DArrowRight } from './components/icon/DArrowRight.vue';
25+
export { default as SunIcon } from './components/icon/Sun.vue';
26+
export { default as MoonIcon } from './components/icon/Moon.vue';
2527

2628
export { default as Input } from './components/Input.vue';
2729
export { default as Button } from './components/Button.vue';

‎style/switch/index.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,11 @@
2828
background-color: white;
2929
border-radius: 50%;
3030
transition: left 0.3s ease-in-out;
31+
display: flex;
32+
justify-content: center;
33+
align-items: center;
34+
padding: 2px;
35+
font-size: 12px;
3136
}
3237

3338
.nt-switch-text {

0 commit comments

Comments
 (0)