theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 新增 switch 组件 onswitch-color 与 unswitch-color 属性

Browse Source
This commit is contained in:
就眠儀式 2022-03-26 05:20:12 +08:00
parent ba7be89388
commit 5fc3cf9731
4 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
example/docs/zh-CN/guide/changelog.md
View File

@ -14,8 +14,11 @@
<ul>
<a name="0-4-2"> </a>
<li>
<h3>0.4.2 <span class="layui-badge-rim">2022-03-25</span></h3>
<h3>0.4.2 <span class="layui-badge-rim">2022-03-26</span></h3>
<ul>
<li>[新增] switch 组件 onswitch-color 属性。</li>
<li>[新增] switch 组件 unswitch-color 属性。</li>
<li>[修复] docsearch 检索插件引起的 peer dependencies 警告。</li>
<li>[优化] switch 组件 in-active-text 为 unswitch-text 属性, 默认不显示。</li>
<li>[优化] switch 组件 active-text 为 onswitch-text 属性, 默认不显示。</li>
<li>[优化] switch 组件样式。</li>

2
example/index.html
View File

@ -23,6 +23,6 @@
<!--app-html-->
</div>
<script type="module" src="/src/entry-client.ts"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
</body>
</html>

2
example/src/layouts/Layout.vue
View File

@ -150,7 +150,7 @@
</li>
<li class="layui-nav-item">
<a href="javascript:void(0)">
<lay-switch v-model="isDark" class="switch">
<lay-switch v-model="isDark" class="switch" onswitch-color="rgba(255, 255, 255, 0.05)" unswitch-color="rgba(255, 255, 255, 0.05)">
<template #onswitch-icon>
<svg xmlns="http://www.w3.org/2000/svg" fill="rgba(60, 60, 60, .7)" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="vt-switch-appearance-moon"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg>
</template>

9
src/component/switch/index.vue
View File

@ -13,6 +13,8 @@ export interface LaySwitchProps {
modelValue?: boolean;
onswitchText?: string;
unswitchText?: string;
onswitchColor?: string;
unswitchColor?: string;
}
const props = withDefaults(defineProps<LaySwitchProps>(), {
@ -36,12 +38,19 @@ const handleClick = function () {
isActive.value = !isActive.value;
}
};
const styles = computed(() => {
return { 'background-color': isActive.value ? props.onswitchColor : props.unswitchColor}
})
</script>
<template>
<span @click.stop="handleClick">
<div
class="layui-unselect layui-form-switch"
:style="styles"
:class="{
'layui-disabled': disabled,
'layui-form-onswitch': isActive,