perf(icon): 新增 prefix 前缀, 支持自定义图标

This commit is contained in:
就眠仪式 2021-10-12 23:52:46 +08:00
parent 0a9f0352ec
commit a5e84081b8
8 changed files with 1506 additions and 3720 deletions

View File

@ -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 | 切换事件 | -- |

View File

@ -14,7 +14,7 @@ import { ref } from 'vue'
export default {
setup() {
const openKeys = ref(["1","2"])
const openKeys = ref(["1","2","3"])
return {
openKeys

View File

@ -1052,3 +1052,4 @@ export default {
| | | |
| ---- | ---- | ----------------- |
| type | 图标 | `layui-icon-home` |
| prefix | 前缀 | `layui-icon` |

5124
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@ -31,7 +31,7 @@ const props =
skin?: string
label?: string
checked?: Boolean
disabled?: Boolean
disabled?: boolean
}>()
const customChecked = ref(false)

View File

@ -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>

View File

@ -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

View File

@ -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>