perf(checkbox): 删除 customChecked 内置逻辑
This commit is contained in:
parent
6769048cd2
commit
e5f53064a3
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-form>
|
<lay-form>
|
||||||
<lay-checkbox name="like" skin="primary" label="1">普通</lay-checkbox>
|
<lay-checkbox name="like" skin="primary" v-model:checked="checked1" label="1" >普通</lay-checkbox>
|
||||||
</lay-form>
|
</lay-form>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -14,7 +14,10 @@ import { ref } from 'vue'
|
|||||||
export default {
|
export default {
|
||||||
setup() {
|
setup() {
|
||||||
|
|
||||||
|
const checked1 = ref(false)
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
checked1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -28,7 +31,7 @@ export default {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-form>
|
<lay-form>
|
||||||
<lay-checkbox name="like" label="1">普通</lay-checkbox>
|
<lay-checkbox name="like" label="1" v-model:checked="checked2" >普通</lay-checkbox>
|
||||||
</lay-form>
|
</lay-form>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -38,7 +41,10 @@ import { ref } from 'vue'
|
|||||||
export default {
|
export default {
|
||||||
setup() {
|
setup() {
|
||||||
|
|
||||||
|
const checked2 = ref(false)
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
checked2
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -50,10 +56,9 @@ export default {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-form>
|
<lay-form>
|
||||||
<lay-checkbox name="like" skin="primary" v-model:checked="checked1" label="1">写作</lay-checkbox>
|
<lay-checkbox name="like" skin="primary" v-model:checked="checked3" label="1">写作</lay-checkbox>
|
||||||
<lay-checkbox name="like" skin="primary" v-model:checked="checked2" label="2">画画</lay-checkbox>
|
<lay-checkbox name="like" skin="primary" v-model:checked="checked4" label="2">画画</lay-checkbox>
|
||||||
<lay-checkbox name="like" skin="primary" v-model:checked="checked3" label="3">运动</lay-checkbox>
|
<lay-checkbox name="like" skin="primary" v-model:checked="checked5" label="3">运动</lay-checkbox>
|
||||||
<lay-checkbox name="like" skin="primary" v-model:checked="checked4" label="4">测试</lay-checkbox>
|
|
||||||
</lay-form>
|
</lay-form>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -63,12 +68,12 @@ import { ref } from 'vue'
|
|||||||
export default {
|
export default {
|
||||||
setup() {
|
setup() {
|
||||||
|
|
||||||
const checked1 = ref(true);
|
|
||||||
const checked2 = ref(true);
|
|
||||||
const checked3 = ref(true);
|
const checked3 = ref(true);
|
||||||
const checked4 = false;
|
const checked4 = ref(true);
|
||||||
|
const checked5 = ref(true);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
checked1, checked2, checked3
|
checked3, checked4, checked5
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -80,7 +85,7 @@ export default {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-form>
|
<lay-form>
|
||||||
<lay-checkbox name="like" skin="primary" label="1" :disabled="disabled">禁用</lay-checkbox>
|
<lay-checkbox name="like" skin="primary" label="1" :disabled="disabled" v-model:checked="checked6">禁用</lay-checkbox>
|
||||||
</lay-form>
|
</lay-form>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -92,8 +97,10 @@ export default {
|
|||||||
|
|
||||||
const disabled = ref(true)
|
const disabled = ref(true)
|
||||||
|
|
||||||
|
const checked6 = ref(true);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
disabled
|
disabled,checked6
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -105,7 +112,7 @@ export default {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-form>
|
<lay-form>
|
||||||
<lay-checkbox name="like" skin="primary" label="1" @change="change">回调</lay-checkbox>
|
<lay-checkbox name="like" skin="primary" label="1" @change="change" v-model:checked="checked7">回调</lay-checkbox>
|
||||||
</lay-form>
|
</lay-form>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -115,12 +122,15 @@ import { ref } from 'vue'
|
|||||||
export default {
|
export default {
|
||||||
setup() {
|
setup() {
|
||||||
|
|
||||||
|
const checked7 = ref(true);
|
||||||
|
|
||||||
const change = function(isChecked) {
|
const change = function(isChecked) {
|
||||||
console.log("是否选中:" + isChecked)
|
console.log("是否选中:" + isChecked)
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
change
|
change,
|
||||||
|
checked7
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -4921,6 +4921,10 @@ body .layui-table-tips .layui-layer-content {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.layui-breadcrumb a {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
.layui-breadcrumb a:hover {
|
.layui-breadcrumb a:hover {
|
||||||
color: #5fb878 !important;
|
color: #5fb878 !important;
|
||||||
}
|
}
|
||||||
|
@ -1,14 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<span class="layui-breadcrumb" style="visibility: visible">
|
<span class="layui-breadcrumb" style="visibility: visible">
|
||||||
<slot />
|
<slot></slot>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayBreadcrumb" lang="ts">
|
<script setup name="LayBreadcrumb" lang="ts">
|
||||||
import { defineProps, provide, withDefaults, useSlots } from 'vue'
|
import { defineProps, provide, withDefaults, useSlots, ref, Ref } from 'vue'
|
||||||
|
|
||||||
const slot = useSlots()
|
|
||||||
const slots = slot.default && slot.default()
|
|
||||||
|
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
defineProps<{
|
defineProps<{
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<a href="javascript:void(0)">{{ title }}</a>
|
<a href>{{ title }}</a>
|
||||||
<span lay-separator="">{{ separator }}</span>
|
<span lay-separator>{{ separator }}</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayBreadcrumbItem" lang="ts">
|
<script setup name="LayBreadcrumbItem" lang="ts">
|
||||||
|
@ -5,7 +5,7 @@
|
|||||||
class="layui-unselect layui-form-checkbox"
|
class="layui-unselect layui-form-checkbox"
|
||||||
:class="{
|
:class="{
|
||||||
'layui-checkbox-disbaled layui-disabled': disabled,
|
'layui-checkbox-disbaled layui-disabled': disabled,
|
||||||
'layui-form-checked': needCustomChecked ? customChecked : props.checked,
|
'layui-form-checked': props.checked,
|
||||||
}"
|
}"
|
||||||
:lay-skin="skin"
|
:lay-skin="skin"
|
||||||
>
|
>
|
||||||
@ -27,20 +27,12 @@ const props =
|
|||||||
disabled?: boolean
|
disabled?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const customChecked = ref(false)
|
|
||||||
const needCustomChecked = props.checked == undefined
|
|
||||||
|
|
||||||
const emit = defineEmits(['update:checked', 'change'])
|
const emit = defineEmits(['update:checked', 'change'])
|
||||||
|
|
||||||
const handleClick = function () {
|
const handleClick = function () {
|
||||||
if (!props.disabled) {
|
if (!props.disabled) {
|
||||||
if (needCustomChecked) {
|
|
||||||
customChecked.value = !customChecked.value
|
|
||||||
emit('change', !customChecked.value)
|
|
||||||
} else {
|
|
||||||
emit('update:checked', !props.checked)
|
emit('update:checked', !props.checked)
|
||||||
emit('change', !props.checked)
|
emit('change', !props.checked)
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -20,8 +20,8 @@ const props = withDefaults(
|
|||||||
defineProps<{
|
defineProps<{
|
||||||
modelValue: boolean
|
modelValue: boolean
|
||||||
disabled?: boolean
|
disabled?: boolean
|
||||||
activeText: string
|
activeText?: string
|
||||||
inactiveText: string
|
inactiveText?: string
|
||||||
}>(),
|
}>(),
|
||||||
{
|
{
|
||||||
activeText: '启用',
|
activeText: '启用',
|
||||||
|
Loading…
Reference in New Issue
Block a user