perf(icon): 新增 prefix 前缀, 支持自定义图标
This commit is contained in:
parent
0a9f0352ec
commit
a5e84081b8
@ -51,7 +51,30 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-form>
|
||||
<lay-checkbox name="like" skin="primary" label="1" :disabled="disabled">禁用</lay-checkbox>
|
||||
</lay-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const disabled = ref(false)
|
||||
|
||||
return {
|
||||
disabled
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
@ -82,14 +105,14 @@ export default {
|
||||
|
||||
<lay-field title="Checkbox attributes" style="margin-top:40px"/>
|
||||
|
||||
| | | | |
|
||||
| -------- | ---- | ----------------------- | --- |
|
||||
| name | 尺寸 | 超小屏幕 (手机<768px) | 12 |
|
||||
| skin | 尺寸 | 超小屏幕 (手机<768px) | 12 |
|
||||
| label | 尺寸 | 超小屏幕 (手机<768px) | 12 |
|
||||
| | | |
|
||||
| -------- | ---- | ----------------------- |
|
||||
| name | 原始属性 name | -- |
|
||||
| skin | 主题 | -- |
|
||||
| label | 选中值 | -- |
|
||||
|
||||
<lay-field title="Checkbox events" style="margin-top:40px"/>
|
||||
|
||||
| | | | |
|
||||
| -------- | ---- | ----------------------- | --- |
|
||||
| change | 切换事件 | 超小屏幕 (手机<768px) | 12 |
|
||||
| | | |
|
||||
| -------- | ---- | ----------------------- |
|
||||
| change | 切换事件 | -- |
|
@ -14,7 +14,7 @@ import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const openKeys = ref(["1","2"])
|
||||
const openKeys = ref(["1","2","3"])
|
||||
|
||||
return {
|
||||
openKeys
|
||||
|
@ -1052,3 +1052,4 @@ export default {
|
||||
| | | |
|
||||
| ---- | ---- | ----------------- |
|
||||
| type | 图标 | `layui-icon-home` |
|
||||
| prefix | 前缀 | `layui-icon` |
|
||||
|
5124
pnpm-lock.yaml
generated
5124
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user