perf(icon): 新增 prefix 前缀, 支持自定义图标
This commit is contained in:
@@ -31,7 +31,7 @@ const props =
|
||||
skin?: string
|
||||
label?: string
|
||||
checked?: Boolean
|
||||
disabled?: Boolean
|
||||
disabled?: boolean
|
||||
}>()
|
||||
|
||||
const customChecked = ref(false)
|
||||
|
||||
@@ -1,48 +1,8 @@
|
||||
<template>
|
||||
<span @click="handleClick">
|
||||
<input type="checkbox" :name="name" title="写作" :value="label" />
|
||||
<div
|
||||
class="layui-unselect"
|
||||
:class="[
|
||||
{
|
||||
'layui-checkbox-disbaled layui-disabled': disabled,
|
||||
},
|
||||
'layui-form-checkbox',
|
||||
props.modelValue.includes(props.label) ? 'layui-form-checked' : '',
|
||||
]"
|
||||
:lay-skin="skin"
|
||||
>
|
||||
<span><slot /></span>
|
||||
<i v-if="skin == 'primary'" class="layui-icon layui-icon-ok" />
|
||||
<i v-if="!skin" class="layui-icon layui-icon-ok" />
|
||||
</div>
|
||||
</span>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup name="LayCheckbox" lang="ts">
|
||||
import { defineProps, ref, watch } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: string[]
|
||||
label: string
|
||||
disabled?: boolean
|
||||
name?: string
|
||||
skin?: string
|
||||
}>()
|
||||
|
||||
const hasValue = ref(false)
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const handleClick = function () {
|
||||
if (!props.disabled) {
|
||||
if (!props.modelValue.includes(props.label)) {
|
||||
props.modelValue.push(props.label)
|
||||
} else {
|
||||
let index = props.modelValue.indexOf(props.label)
|
||||
props.modelValue.splice(index, 1)
|
||||
}
|
||||
emit('update:modelValue', props.modelValue)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
</template>
|
||||
|
||||
<script setup name="LayCollapseItem" lang="ts">
|
||||
import { defineProps, inject, Ref, ref } from 'vue'
|
||||
import { defineProps, inject, ref } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
id: string
|
||||
|
||||
@@ -1,11 +1,17 @@
|
||||
<template>
|
||||
<i class="layui-icon" :class="[type]" />
|
||||
<i :class="[prefix, type]" />
|
||||
</template>
|
||||
|
||||
<script setup name="LayIcon" lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
type?: string
|
||||
}>()
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
type?: string
|
||||
prefix?: string
|
||||
}>(),
|
||||
{
|
||||
prefix: 'layui-icon',
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user