✨(component): 新增 switch 组件 name 属性
This commit is contained in:
parent
9b3c929b6b
commit
2b06fbaecd
@ -34,14 +34,17 @@
|
|||||||
.set-size(@xs,@xs-width);
|
.set-size(@xs,@xs-width);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-cascader .layui-input-suffix{
|
.layui-cascader .layui-input-suffix{
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-cascader .layui-icon-triangle-d {
|
.layui-cascader .layui-icon-triangle-d {
|
||||||
transition: all 0.3s ease-in-out;
|
transition: all 0.3s ease-in-out;
|
||||||
transform: rotate(0);
|
transform: rotate(0);
|
||||||
color:var(--global-neutral-color-8);
|
color:var(--global-neutral-color-8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-cascader-opend .layui-icon-triangle-d {
|
.layui-cascader-opend .layui-icon-triangle-d {
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
@ -55,13 +58,16 @@
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-cascader-menu {
|
.layui-cascader-menu {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border-right: 1px solid var(--global-neutral-color-3);
|
border-right: 1px solid var(--global-neutral-color-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-cascader-menu:last-child {
|
.layui-cascader-menu:last-child {
|
||||||
border-right: none;
|
border-right: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-cascader-menu-item {
|
.layui-cascader-menu-item {
|
||||||
min-width: 130px;
|
min-width: 130px;
|
||||||
padding: 5px 15px;
|
padding: 5px 15px;
|
||||||
@ -73,14 +79,17 @@
|
|||||||
padding-right: 9px;
|
padding-right: 9px;
|
||||||
min-height: 35px;
|
min-height: 35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-cascader-menu-item:hover {
|
.layui-cascader-menu-item:hover {
|
||||||
background-color: var(--global-checked-color);
|
background-color: var(--global-checked-color);
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-cascader-selected {
|
.layui-cascader-selected {
|
||||||
background-color: var(--global-checked-color);
|
background-color: var(--global-checked-color);
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-cascader-menu-item .layui-icon-right{
|
.layui-cascader-menu-item .layui-icon-right{
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
@ -49,6 +49,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.layui-switch-container .layui-switch-input {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.layui-form-switch {
|
.layui-form-switch {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 22px;
|
height: 22px;
|
||||||
|
@ -9,6 +9,7 @@ import { computed } from "vue";
|
|||||||
import "./index.less";
|
import "./index.less";
|
||||||
|
|
||||||
export interface LaySwitchProps {
|
export interface LaySwitchProps {
|
||||||
|
name?: string;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
modelValue?: string | number | boolean;
|
modelValue?: string | number | boolean;
|
||||||
onswitchText?: string;
|
onswitchText?: string;
|
||||||
@ -61,6 +62,7 @@ const styles = computed(() => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<span @click.stop="handleClick" class="layui-switch-container" :size="size">
|
<span @click.stop="handleClick" class="layui-switch-container" :size="size">
|
||||||
|
<input class="layui-switch-input" :name="name" :value="modelValue" />
|
||||||
<div
|
<div
|
||||||
class="layui-unselect layui-form-switch"
|
class="layui-unselect layui-form-switch"
|
||||||
:style="styles"
|
:style="styles"
|
||||||
|
@ -201,7 +201,7 @@
|
|||||||
>
|
>
|
||||||
<lay-avatar
|
<lay-avatar
|
||||||
src="https://jpom-docs.keepbx.cn/images/jpom_logo.png"
|
src="https://jpom-docs.keepbx.cn/images/jpom_logo.png"
|
||||||
style="background: transparent;width:60px;"
|
style="background: transparent; width: 60px"
|
||||||
></lay-avatar>
|
></lay-avatar>
|
||||||
</a>
|
</a>
|
||||||
</lay-tooltip>
|
</lay-tooltip>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user