feat: add switch onswitch-icon and unswitch-icon slot

This commit is contained in:
就眠儀式 2022-03-24 04:23:24 +08:00
parent 5df0a0dea6
commit ce356012ce
9 changed files with 50 additions and 27 deletions

View File

@ -117,6 +117,35 @@ export default {
::: :::
::: title 图标插槽
:::
::: demo
<template>
<lay-switch v-model="active5">
<template #onswitch-icon>😄</template>
<template #unswitch-icon>🤔</template>
</lay-switch>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const active5 = ref(true)
return {
active5
}
}
}
</script>
:::
::: title Switch 属性 ::: title Switch 属性
::: :::

View File

@ -170,6 +170,7 @@ export default {
| dataSource | 数据来源 | -- | | dataSource | 数据来源 | -- |
| title | 标题 | -- | | title | 标题 | -- |
| id | 主键 | -- | | id | 主键 | -- |
| showSearch | 开启搜索 | -- |
::: :::

View File

@ -16,11 +16,13 @@
<li> <li>
<h3>0.4.1 <span class="layui-badge-rim">2022-03-17</span></h3> <h3>0.4.1 <span class="layui-badge-rim">2022-03-17</span></h3>
<ul> <ul>
<li>[新增] input 组件 prefix 插槽, 提供前缀设置。</li> <li>[新增] switch 组件 onswitch-icon 插槽。</li>
<li>[新增] input 组件 suffix 插槽, 提供后缀设置。</li> <li>[新增] switch 组件 unswitch-icon 插槽。</li>
<li>[新增] input 组件 allow-clear 属性, 提供输入清空。</li>
<li>[新增] transition 组件 type 属性, 默认为 collapse 过渡。</li> <li>[新增] transition 组件 type 属性, 默认为 collapse 过渡。</li>
<li>[新增] transition 组件 type 属性 fade 值, 提供淡出淡入效果。</li> <li>[新增] transition 组件 type 属性 fade 值, 提供淡出淡入效果。</li>
<li>[新增] input 组件 allow-clear 属性, 提供输入清空。</li>
<li>[新增] input 组件 prefix 插槽, 提供前缀设置。</li>
<li>[新增] input 组件 suffix 插槽, 提供后缀设置。</li>
</ul> </ul>
</li> </li>
</ul> </ul>

View File

@ -206,10 +206,6 @@ div[class*='language-'].line-numbers-mode {
font-weight: bold; font-weight: bold;
} }
.token.italic {
font-style: italic;
}
.token.entity { .token.entity {
cursor: help; cursor: help;
} }

View File

@ -140,19 +140,11 @@ const add = function () {
</ul> </ul>
</div> </div>
<!-- 操作 --> <!-- 操作 -->
<button <button class="layui-icon layui-carousel-arrow" lay-type="sub" @click="sub">
class="layui-icon layui-carousel-arrow" {{ anim === "updown" ? "" : "" }}
lay-type="sub" </button>
@click="sub"
>
{{ anim === "updown" ? "" : "" }}</button
>
<button <button class="layui-icon layui-carousel-arrow" lay-type="add" @click="add">
class="layui-icon layui-carousel-arrow"
lay-type="add"
@click="add"
>
{{ anim === "updown" ? "" : "" }} {{ anim === "updown" ? "" : "" }}
</button> </button>
</div> </div>

View File

@ -106,7 +106,6 @@ const isNumber = function (num: any) {
<template> <template>
<div class="layui-input-number" :position="position" :size="size"> <div class="layui-input-number" :position="position" :size="size">
<lay-button <lay-button
type="primary"
size="gl" size="gl"
@mousedown="longDown(subtraction)" @mousedown="longDown(subtraction)"
@mouseup="cancelLongDown" @mouseup="cancelLongDown"
@ -130,7 +129,6 @@ const isNumber = function (num: any) {
/> />
</div> </div>
<lay-button <lay-button
type="primary"
size="gl" size="gl"
@mousedown="longDown(addition)" @mousedown="longDown(addition)"
@mouseup="cancelLongDown" @mouseup="cancelLongDown"

View File

@ -14,7 +14,7 @@
transition: 0.1s linear; transition: 0.1s linear;
} }
.layui-form-switch i { .layui-form-switch span {
position: absolute; position: absolute;
left: 5px; left: 5px;
top: 3px; top: 3px;
@ -43,7 +43,7 @@
background-color: @global-checked-color; background-color: @global-checked-color;
} }
.layui-form-onswitch i { .layui-form-onswitch span {
left: 100%; left: 100%;
margin-left: -21px; margin-left: -21px;
background-color: #fff; background-color: #fff;

View File

@ -51,7 +51,12 @@ const handleClick = function () {
}" }"
> >
<em>{{ isActive == true ? activeText : inactiveText }}</em> <em>{{ isActive == true ? activeText : inactiveText }}</em>
<i></i> <span>
<div>
<slot v-if="isActive" name="onswitch-icon"></slot>
<slot v-else name="unswitch-icon"></slot>
</div>
</span>
</div> </div>
</span> </span>
</template> </template>