feat: add switch onswitch-icon and unswitch-icon slot
This commit is contained in:
parent
5df0a0dea6
commit
ce356012ce
@ -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 属性
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
@ -170,6 +170,7 @@ export default {
|
|||||||
| dataSource | 数据来源 | -- |
|
| dataSource | 数据来源 | -- |
|
||||||
| title | 标题 | -- |
|
| title | 标题 | -- |
|
||||||
| id | 主键 | -- |
|
| id | 主键 | -- |
|
||||||
|
| showSearch | 开启搜索 | -- |
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
@ -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"
|
||||||
|
@ -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;
|
||||||
|
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user