style(prettier): reset code style with prettier
This commit is contained in:
@@ -1,14 +1,20 @@
|
||||
<template>
|
||||
<img :src="src" class="layui-avatar" :class="[radius ? 'layui-avatar-radius':'', size ? 'layui-avatar-' + size: '']"/>
|
||||
<img
|
||||
:src="src"
|
||||
class="layui-avatar"
|
||||
:class="[
|
||||
radius ? 'layui-avatar-radius' : '',
|
||||
size ? 'layui-avatar-' + size : '',
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup name="LayAvatar" lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
src?: string
|
||||
radius?: boolean
|
||||
size?: string
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
src?: string
|
||||
radius?: boolean
|
||||
size?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
@@ -1,18 +1,17 @@
|
||||
<template>
|
||||
<span :class="classList" :style="styleList">
|
||||
<slot v-if="type != 'dot'"></slot>
|
||||
<slot v-if="type != 'dot'" />
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup name="LayBadge" lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
type?: string
|
||||
theme?: string
|
||||
color?: string
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
type?: string
|
||||
theme?: string
|
||||
color?: string
|
||||
}>()
|
||||
|
||||
const classList = [
|
||||
{
|
||||
@@ -24,4 +23,4 @@ const classList = [
|
||||
]
|
||||
|
||||
const styleList = props.color ? 'background-color: ' + props.color : ''
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
<template>
|
||||
<blockquote class="layui-elem-quote" :class="[nm?'layui-quote-nm':'']">
|
||||
<slot></slot>
|
||||
<blockquote class="layui-elem-quote" :class="[nm ? 'layui-quote-nm' : '']">
|
||||
<slot />
|
||||
</blockquote>
|
||||
</template>
|
||||
|
||||
<script setup name="LayBlock" lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
nm?: boolean
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
nm?: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
||||
@@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayBody', Component)
|
||||
app.component(Component.name || 'LayBody', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<div class="layui-body">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LayBody" lang="ts">
|
||||
|
||||
</script>
|
||||
<script setup name="LayBody" lang="ts"></script>
|
||||
|
||||
@@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayBreadcrumb', Component)
|
||||
app.component(Component.name || 'LayBreadcrumb', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<span class="layui-breadcrumb" style="visibility: visible;">
|
||||
<slot></slot>
|
||||
<span class="layui-breadcrumb" style="visibility: visible">
|
||||
<slot />
|
||||
</span>
|
||||
</template>
|
||||
|
||||
@@ -15,10 +15,9 @@ const props = withDefaults(
|
||||
separator?: string
|
||||
}>(),
|
||||
{
|
||||
separator: "/"
|
||||
separator: '/',
|
||||
}
|
||||
)
|
||||
|
||||
provide("separator",props.separator);
|
||||
|
||||
provide('separator', props.separator)
|
||||
</script>
|
||||
|
||||
@@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayBreadcrumbItem', Component)
|
||||
app.component(Component.name || 'LayBreadcrumbItem', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,16 +1,14 @@
|
||||
<template>
|
||||
<a href="javascript:void(0)">{{title}}</a>
|
||||
<span lay-separator="">{{separator}}</span>
|
||||
<a href="javascript:void(0)">{{ title }}</a>
|
||||
<span lay-separator="">{{ separator }}</span>
|
||||
</template>
|
||||
|
||||
<script setup name="LayBreadcrumbItem" lang="ts">
|
||||
import { defineProps, inject } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
title: string
|
||||
}>()
|
||||
|
||||
const separator = inject("separator");
|
||||
const props = defineProps<{
|
||||
title: string
|
||||
}>()
|
||||
|
||||
const separator = inject('separator')
|
||||
</script>
|
||||
|
||||
@@ -9,19 +9,18 @@
|
||||
border ? 'layui-border-' + border : '',
|
||||
]"
|
||||
>
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup name="LayButton" lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
type?: string
|
||||
size?: string
|
||||
fluid?: boolean
|
||||
radius?: boolean
|
||||
border?: string
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
type?: string
|
||||
size?: string
|
||||
fluid?: boolean
|
||||
radius?: boolean
|
||||
border?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<div class="layui-btn-container">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LayButtonContainer" lang="ts">
|
||||
|
||||
</script>
|
||||
<script setup name="LayButtonContainer" lang="ts"></script>
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<div class="layui-btn-group">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LayButtonGroup" lang="ts">
|
||||
|
||||
</script>
|
||||
<script setup name="LayButtonGroup" lang="ts"></script>
|
||||
|
||||
@@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayCard ', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,14 +1,12 @@
|
||||
<template>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
<slot name="header"></slot>
|
||||
<slot name="header" />
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<slot name="body"></slot>
|
||||
<slot name="body" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LayCard" lang="ts">
|
||||
|
||||
</script>
|
||||
<script setup name="LayCard" lang="ts"></script>
|
||||
|
||||
@@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayCheckbox', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -12,9 +12,9 @@
|
||||
]"
|
||||
:lay-skin="skin"
|
||||
>
|
||||
<span><slot></slot></span>
|
||||
<i v-if="skin == 'primary'" class="layui-icon layui-icon-ok"></i>
|
||||
<i v-if="!skin" class="layui-icon layui-icon-ok"></i>
|
||||
<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>
|
||||
@@ -22,14 +22,13 @@
|
||||
<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 props = defineProps<{
|
||||
modelValue: string[]
|
||||
label: string
|
||||
disabled?: boolean
|
||||
name?: string
|
||||
skin?: string
|
||||
}>()
|
||||
|
||||
const hasValue = ref(false)
|
||||
|
||||
|
||||
@@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayCol', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -12,22 +12,21 @@
|
||||
lgOffset ? 'layui-col-lg-offset' + lgOffset : '',
|
||||
]"
|
||||
>
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LayCol" lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
md?: string
|
||||
xs?: string
|
||||
sm?: string
|
||||
lg?: string
|
||||
mdOffset?: string
|
||||
xsOffset?: string
|
||||
smOffset?: string
|
||||
lgOffset?: string
|
||||
}>()
|
||||
</script>
|
||||
const props = defineProps<{
|
||||
md?: string
|
||||
xs?: string
|
||||
sm?: string
|
||||
lg?: string
|
||||
mdOffset?: string
|
||||
xsOffset?: string
|
||||
smOffset?: string
|
||||
lgOffset?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
@@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayCollapse', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
<template>
|
||||
<div class="layui-collapse">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LayCollapse" lang="ts">
|
||||
</script>
|
||||
<script setup name="LayCollapse" lang="ts"></script>
|
||||
|
||||
@@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayCollapseItem', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
<template>
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title" @click="showHandle">
|
||||
{{ title }}<i class="layui-icon layui-colla-icon">{{ isShow ? "":"" }}</i>
|
||||
{{ title
|
||||
}}<i class="layui-icon layui-colla-icon">{{ isShow ? '' : '' }}</i>
|
||||
</h2>
|
||||
<div class="layui-colla-content" :class="isShow ? 'layui-show':''">
|
||||
<div class="layui-colla-content" :class="isShow ? 'layui-show' : ''">
|
||||
<p>
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -14,17 +15,14 @@
|
||||
<script setup name="LayCollapseItem" lang="ts">
|
||||
import { defineProps, Ref, ref } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
show?: boolean
|
||||
title?: string
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
show?: boolean
|
||||
title?: string
|
||||
}>()
|
||||
|
||||
const isShow = ref(props.show) as Ref
|
||||
|
||||
const showHandle = function() {
|
||||
const showHandle = function () {
|
||||
isShow.value = !isShow.value
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayContainer', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,17 +1,15 @@
|
||||
<template>
|
||||
<div :class="classes">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LayContainer" lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
fluid?: boolean
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
fluid?: boolean
|
||||
}>()
|
||||
|
||||
const classes = props.fluid ? 'layui-fluid' : 'layui-container'
|
||||
|
||||
</script>
|
||||
|
||||
@@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayCount', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,9 +1,5 @@
|
||||
<template>
|
||||
<span class="layui-count">
|
||||
|
||||
</span>
|
||||
<span class="layui-count" />
|
||||
</template>
|
||||
|
||||
<script setup name="LayCount" lang="ts">
|
||||
|
||||
</script>
|
||||
<script setup name="LayCount" lang="ts"></script>
|
||||
|
||||
@@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayDropdown', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -5,25 +5,25 @@
|
||||
:class="[openState ? 'layui-dropdown-up' : '']"
|
||||
>
|
||||
<div @click="open">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
<dl class="layui-anim layui-anim-upbit">
|
||||
<ul class="layui-menu layui-dropdown-menu">
|
||||
<slot name="content"></slot>
|
||||
<slot name="content" />
|
||||
</ul>
|
||||
</dl>
|
||||
</div>
|
||||
<div
|
||||
v-if="trigger === 'hover'"
|
||||
class="layui-dropdown"
|
||||
:class="[openState ? 'layui-dropdown-up' : '']"
|
||||
@mouseenter="open"
|
||||
@mouseleave="open"
|
||||
:class="[openState ? 'layui-dropdown-up' : '']"
|
||||
>
|
||||
<slot></slot>
|
||||
<slot />
|
||||
<dl class="layui-anim layui-anim-upbit">
|
||||
<ul class="layui-menu layui-dropdown-menu">
|
||||
<slot name="content"></slot>
|
||||
<slot name="content" />
|
||||
</ul>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
@@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayDropdownItem', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<li><div class="layui-menu-body-title">
|
||||
<slot></slot>
|
||||
</div></li>
|
||||
<li>
|
||||
<div class="layui-menu-body-title">
|
||||
<slot />
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script setup name="LayDropdownItem" lang="ts">
|
||||
</script>
|
||||
<script setup name="LayDropdownItem" lang="ts"></script>
|
||||
|
||||
@@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayEmpty', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -3,7 +3,9 @@
|
||||
<div class="layui-empty-image">
|
||||
<img class="layui-empty-image-default" src="./index.svg" />
|
||||
</div>
|
||||
<div class="layui-empty-description">{{ description }}</div>
|
||||
<div class="layui-empty-description">
|
||||
{{ description }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayField', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
<template>
|
||||
<fieldset class="layui-elem-field">
|
||||
<legend>{{title}}</legend>
|
||||
<legend>{{ title }}</legend>
|
||||
<div class="layui-field-box">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</fieldset>
|
||||
</template>
|
||||
|
||||
<script setup name="LayField" lang="ts">
|
||||
const props =
|
||||
defineProps<{
|
||||
title?: string
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
title?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
@@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayFooter', Component)
|
||||
app.component(Component.name || 'LayFooter', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<div class="layui-footer">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LayFooter" lang="ts">
|
||||
|
||||
</script>
|
||||
<script setup name="LayFooter" lang="ts"></script>
|
||||
|
||||
@@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayForm', Component)
|
||||
app.component(Component.name || 'LayForm', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
<template>
|
||||
<form class="layui-form">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup name="LayForm" lang="ts">
|
||||
</script>
|
||||
<script setup name="LayForm" lang="ts"></script>
|
||||
|
||||
@@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayFormItem', Component)
|
||||
app.component(Component.name || 'LayFormItem', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">{{ label }}</label>
|
||||
<div :class="[mode ? 'layui-input-' + mode : '']" class="layui-input-block">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayHeader', Component)
|
||||
app.component(Component.name || 'LayHeader', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<div class="layui-header">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LayHeader" lang="ts">
|
||||
|
||||
</script>
|
||||
<script setup name="LayHeader" lang="ts"></script>
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
<template>
|
||||
<i class="layui-icon" :class="[type]"></i>
|
||||
<i class="layui-icon" :class="[type]" />
|
||||
</template>
|
||||
|
||||
<script setup name="LayIcon" lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
type?: string
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
type?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
@@ -6,30 +6,30 @@
|
||||
"
|
||||
>
|
||||
<div class="layui-inline layui-iconpicker-main">
|
||||
<i class="layui-inline layui-icon" :class="[selectedIcon]"></i>
|
||||
<i class="layui-inline layui-icon" :class="[selectedIcon]" />
|
||||
</div>
|
||||
<span class="layui-inline layui-iconpicker-suffix"
|
||||
><i class="layui-icon layui-icon-down layui-anim"></i
|
||||
></span>
|
||||
><i class="layui-icon layui-icon-down layui-anim"
|
||||
/></span>
|
||||
</div>
|
||||
<template #content>
|
||||
<div class="layui-iconpicker-view layui-iconpicker-scroll">
|
||||
<div class="layui-iconpicker-search" v-if="showSearch">
|
||||
<div v-if="showSearch" class="layui-iconpicker-search">
|
||||
<div class="layui-form layui-input-wrap layui-input-wrap-prefix">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-search"></i>
|
||||
<i class="layui-icon layui-icon-search" />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value=""
|
||||
@input="search"
|
||||
placeholder="search"
|
||||
autocomplete="off"
|
||||
class="layui-input"
|
||||
lay-affix="clear"
|
||||
@input="search"
|
||||
/>
|
||||
<div class="layui-input-suffix layui-input-affix-event layui-hide">
|
||||
<i class="layui-icon layui-icon-clear"></i>
|
||||
<i class="layui-icon layui-icon-clear" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -38,29 +38,32 @@
|
||||
<li
|
||||
v-for="icon in icones"
|
||||
:key="icon"
|
||||
@click="selectIcon(icon.class)"
|
||||
:class="[selectedIcon === icon.class ? 'layui-this' : '']"
|
||||
@click="selectIcon(icon.class)"
|
||||
>
|
||||
<i class="layui-icon" :class="[icon.class]"></i>
|
||||
<p class="layui-elip">{{ icon.name }}</p>
|
||||
<i class="layui-icon" :class="[icon.class]" />
|
||||
<p class="layui-elip">
|
||||
{{ icon.name }}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="layui-iconpicker-page" v-if="page">
|
||||
<div v-if="page" class="layui-iconpicker-page">
|
||||
<div
|
||||
class="layui-box layui-laypage layui-laypage-default"
|
||||
id="layui-laypage-1"
|
||||
class="layui-box layui-laypage layui-laypage-default"
|
||||
>
|
||||
<span class="layui-laypage-count">共 {{ total }} 个</span
|
||||
><a
|
||||
href="javascript:;"
|
||||
@click="prev()"
|
||||
class="layui-laypage-prev"
|
||||
:class="[currentPage === 1 ? 'layui-disabled' : '']"
|
||||
><i class="layui-icon layui-icon-left"></i></a
|
||||
@click="prev()"
|
||||
><i class="layui-icon layui-icon-left" /></a
|
||||
><span class="layui-laypage-curr"
|
||||
><em class="layui-laypage-em"></em
|
||||
><em>{{ currentPage }} / {{ totalPage }}</em></span
|
||||
><em class="layui-laypage-em" /><em
|
||||
>{{ currentPage }} / {{ totalPage }}</em
|
||||
></span
|
||||
><span class="layui-laypage-spr">…</span
|
||||
><a href="javascript:;" class="layui-laypage-last" title="尾页"
|
||||
>14</a
|
||||
@@ -69,8 +72,8 @@
|
||||
:class="[currentPage === totalPage ? 'layui-disabled' : '']"
|
||||
class="layui-laypage-next"
|
||||
@click="next()"
|
||||
><i class="layui-icon layui-icon-right"></i
|
||||
></a>
|
||||
><i class="layui-icon layui-icon-right"
|
||||
/></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -90,15 +93,15 @@ const props = withDefaults(
|
||||
}>(),
|
||||
{
|
||||
modelValue: 'layui-icon-face-smile',
|
||||
page: false
|
||||
page: false,
|
||||
}
|
||||
)
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const selectedIcon: Ref<String> = ref(props.modelValue as String)
|
||||
const selectedIcon: Ref<string> = ref(props.modelValue as string)
|
||||
|
||||
const selectIcon = function (icon: String) {
|
||||
const selectIcon = function (icon: string) {
|
||||
emit('update:modelValue', icon)
|
||||
selectedIcon.value = icon
|
||||
}
|
||||
@@ -116,7 +119,7 @@ if (props.page) {
|
||||
}
|
||||
|
||||
const next = function () {
|
||||
if (currentPage.value === totalPage) {
|
||||
if (currentPage.value === totalPage.value) {
|
||||
return
|
||||
}
|
||||
currentPage.value = currentPage.value + 1
|
||||
@@ -159,7 +162,7 @@ const search = function (e: any) {
|
||||
}
|
||||
}
|
||||
|
||||
const searchList = function (str: String, container: any) {
|
||||
const searchList = function (str: string, container: any) {
|
||||
var newList = []
|
||||
var startChar = str.charAt(0)
|
||||
var strLen = str.length
|
||||
@@ -190,4 +193,4 @@ const searchList = function (str: String, container: any) {
|
||||
}
|
||||
return newList
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayInput', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,22 +1,27 @@
|
||||
<template>
|
||||
<input :type="type" :value="modelValue" :placeholder="placeholder" :name="name" class="layui-input" @input="updateValue"/>
|
||||
<input
|
||||
:type="type"
|
||||
:value="modelValue"
|
||||
:placeholder="placeholder"
|
||||
:name="name"
|
||||
class="layui-input"
|
||||
@input="updateValue"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup name="LayInput" lang="ts">
|
||||
import { defineProps, defineEmits } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
name?: string
|
||||
type?: string
|
||||
modelValue?: string
|
||||
placeholder?: string
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
name?: string
|
||||
type?: string
|
||||
modelValue?: string
|
||||
placeholder?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const updateValue = function(event: InputEvent) {
|
||||
const updateValue = function (event: InputEvent) {
|
||||
emit('update:modelValue', (event.target as HTMLInputElement).value)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayLayout', Component)
|
||||
app.component(Component.name || 'LayLayout', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<div class="layui-layout layui-layout-admin">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LayLayout" lang="ts">
|
||||
|
||||
</script>
|
||||
<script setup name="LayLayout" lang="ts"></script>
|
||||
|
||||
@@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayLine', Component)
|
||||
app.component(Component.name || 'LayLine', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -5,8 +5,7 @@
|
||||
<script setup name="LayLine" lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
theme?: string
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
theme?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
@@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayLogo', Component)
|
||||
app.component(Component.name || 'LayLogo', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<div class="layui-logo">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LayLogo" lang="ts">
|
||||
|
||||
</script>
|
||||
<script setup name="LayLogo" lang="ts"></script>
|
||||
|
||||
@@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayMenu', Component)
|
||||
app.component(Component.name || 'LayMenu', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<ul class="layui-nav" :class="[tree ? 'layui-nav-tree':'']">
|
||||
<slot></slot>
|
||||
</ul>
|
||||
<ul class="layui-nav" :class="[tree ? 'layui-nav-tree' : '']">
|
||||
<slot />
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script setup name="LayMenu" lang="ts">
|
||||
@@ -13,7 +13,7 @@ const props = withDefaults(
|
||||
tree?: boolean
|
||||
}>(),
|
||||
{
|
||||
selectedKey: "",
|
||||
selectedKey: '',
|
||||
tree: false,
|
||||
}
|
||||
)
|
||||
@@ -21,6 +21,6 @@ const props = withDefaults(
|
||||
const isTree = ref(props.tree)
|
||||
const selectKey = ref(props.selectedKey)
|
||||
|
||||
provide("isTree",isTree);
|
||||
provide("selectKey",selectKey)
|
||||
provide('isTree', isTree)
|
||||
provide('selectKey', selectKey)
|
||||
</script>
|
||||
|
||||
@@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayMenuChildItem', Component)
|
||||
app.component(Component.name || 'LayMenuChildItem', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<dd :class="[selectKey === id ? 'layui-this':'']" @click="selectHandle()">
|
||||
<dd :class="[selectKey === id ? 'layui-this' : '']" @click="selectHandle()">
|
||||
<a href="javascript:void(0)">{{ title }}</a>
|
||||
</dd>
|
||||
</template>
|
||||
@@ -7,15 +7,14 @@
|
||||
<script setup name="LayMenuChildItem" lang="ts">
|
||||
import { defineProps, inject, Ref } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
id: string
|
||||
title: string
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
id: string
|
||||
title: string
|
||||
}>()
|
||||
|
||||
const selectKey: Ref<String> = inject("selectKey") as Ref<String>
|
||||
const selectKey: Ref<string> = inject('selectKey') as Ref<string>
|
||||
|
||||
const selectHandle = function() {
|
||||
selectKey.value = props.id
|
||||
const selectHandle = function () {
|
||||
selectKey.value = props.id
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayMenuItem', Component)
|
||||
app.component(Component.name || 'LayMenuItem', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
<template>
|
||||
|
||||
<li
|
||||
v-if="slots.default"
|
||||
class="layui-nav-item"
|
||||
:class="[isOpen && isTree ? 'layui-nav-itemed' : '']"
|
||||
v-if="slots.default"
|
||||
>
|
||||
<a href="javascript:void(0)" @click="openHandle">
|
||||
{{ title }}
|
||||
<i class="layui-icon layui-icon-down layui-nav-more"></i>
|
||||
<i class="layui-icon layui-icon-down layui-nav-more" />
|
||||
</a>
|
||||
<dl
|
||||
class="layui-nav-child"
|
||||
@@ -16,11 +15,16 @@
|
||||
!isTree ? 'layui-anim layui-anim-upbit' : '',
|
||||
]"
|
||||
>
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</dl>
|
||||
</li>
|
||||
|
||||
<li v-else class="layui-nav-item" @click="selectHandle()" :class="[selectKey === id ? 'layui-this':'']">
|
||||
<li
|
||||
v-else
|
||||
class="layui-nav-item"
|
||||
:class="[selectKey === id ? 'layui-this' : '']"
|
||||
@click="selectHandle()"
|
||||
>
|
||||
<a href="javascript:void(0)">{{ title }} </a>
|
||||
</li>
|
||||
</template>
|
||||
@@ -29,22 +33,21 @@
|
||||
import { defineProps, inject, Ref, ref, useSlots } from 'vue'
|
||||
const slots = useSlots()
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
id: string
|
||||
title: string
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
id: string
|
||||
title: string
|
||||
}>()
|
||||
|
||||
const isOpen = ref(false)
|
||||
|
||||
const isTree = inject('isTree')
|
||||
const selectKey: Ref<String> = inject('selectKey') as Ref<String>
|
||||
const selectKey: Ref<string> = inject('selectKey') as Ref<string>
|
||||
|
||||
const openHandle = function () {
|
||||
isOpen.value = !isOpen.value
|
||||
}
|
||||
|
||||
const selectHandle = function() {
|
||||
selectKey.value = props.id
|
||||
const selectHandle = function () {
|
||||
selectKey.value = props.id
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayPage', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="layui-box layui-laypage layui-laypage-default">
|
||||
<span class="layui-laypage-count" v-if="showCount">共 {{ total }} 条</span
|
||||
<span v-if="showCount" class="layui-laypage-count">共 {{ total }} 条</span
|
||||
><a
|
||||
href="javascript:;"
|
||||
class="layui-laypage-prev"
|
||||
@@ -10,14 +10,13 @@
|
||||
>
|
||||
<template v-if="showPage">
|
||||
<template v-for="index of totalPage" :key="index">
|
||||
<span class="layui-laypage-curr" v-if="index === currentPage"
|
||||
<span v-if="index === currentPage" class="layui-laypage-curr"
|
||||
><em
|
||||
class="layui-laypage-em"
|
||||
:class="[theme ? 'layui-bg-' + theme : '']"
|
||||
></em
|
||||
><em>{{ index }}</em></span
|
||||
/><em>{{ index }}</em></span
|
||||
>
|
||||
<a href="javascript:;" @click="jump(index)" v-else>
|
||||
<a v-else href="javascript:;" @click="jump(index)">
|
||||
{{ index }}
|
||||
</a>
|
||||
</template>
|
||||
@@ -29,7 +28,7 @@
|
||||
:class="[currentPage === totalPage ? 'layui-disabled' : '']"
|
||||
@click="next()"
|
||||
>下一页</a
|
||||
><span class="layui-laypage-limits" v-if="showLimit"
|
||||
><span v-if="showLimit" class="layui-laypage-limits"
|
||||
><select v-model="inlimit">
|
||||
<option value="10">10 条/页</option>
|
||||
<option value="20">20 条/页</option>
|
||||
@@ -37,12 +36,12 @@
|
||||
<option value="40">40 条/页</option>
|
||||
<option value="50">50 条/页</option>
|
||||
</select></span
|
||||
><a href="javascript:;" v-if="showRefresh" class="layui-laypage-refresh"
|
||||
><i class="layui-icon layui-icon-refresh"></i></a
|
||||
><span class="layui-laypage-skip" v-if="showSkip"
|
||||
><a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh"
|
||||
><i class="layui-icon layui-icon-refresh" /></a
|
||||
><span v-if="showSkip" class="layui-laypage-skip"
|
||||
>到第<input
|
||||
type="number"
|
||||
v-model="currentPageShow"
|
||||
type="number"
|
||||
class="layui-input layui-input-number"
|
||||
/>页<button type="button" class="layui-laypage-btn" @click="jumpPage()">
|
||||
确定
|
||||
@@ -67,7 +66,7 @@ const props = withDefaults(
|
||||
showRefresh?: boolean
|
||||
}>(),
|
||||
{
|
||||
limit: 10
|
||||
limit: 10,
|
||||
}
|
||||
)
|
||||
|
||||
@@ -107,7 +106,6 @@ watch(inlimit, function () {
|
||||
|
||||
watch(currentPage, function () {
|
||||
currentPageShow.value = currentPage.value
|
||||
emit('jump', {current: currentPage.value})
|
||||
emit('jump', { current: currentPage.value })
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
@@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayPanel', Component)
|
||||
app.component(Component.name || 'LayPanel', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div class="layui-panel">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="LayPanel" lang="ts">
|
||||
</script>
|
||||
<script setup name="LayPanel" lang="ts"></script>
|
||||
|
||||
@@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayProgress', Component)
|
||||
app.component(Component.name || 'LayProgress', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -19,13 +19,12 @@
|
||||
<script setup name="LayProgress" lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
percent: number | string
|
||||
theme?: string
|
||||
color?: string
|
||||
size?: string
|
||||
showText?: boolean
|
||||
text?: string
|
||||
}>()
|
||||
</script>
|
||||
const props = defineProps<{
|
||||
percent: number | string
|
||||
theme?: string
|
||||
color?: string
|
||||
size?: string
|
||||
showText?: boolean
|
||||
text?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
@@ -3,11 +3,11 @@
|
||||
<input type="radio" :value="label" :name="name" />
|
||||
<div
|
||||
class="layui-unselect layui-form-radio"
|
||||
@click="handleClick"
|
||||
:class="{
|
||||
'layui-form-radioed': modelValue == label,
|
||||
'layui-radio-disbaled layui-disabled': disabled,
|
||||
}"
|
||||
@click="handleClick"
|
||||
>
|
||||
<i
|
||||
v-if="modelValue != label"
|
||||
@@ -21,7 +21,7 @@
|
||||
:class="{ 'layui-form-radioed': modelValue == label }"
|
||||
></i
|
||||
>
|
||||
<span><slot></slot></span>
|
||||
<span><slot /></span>
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
@@ -29,13 +29,12 @@
|
||||
<script setup name="LayRadio" lang="ts">
|
||||
import { defineProps, defineEmits } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
modelValue: string
|
||||
disabled?: boolean
|
||||
label?: string
|
||||
name: string
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
modelValue: string
|
||||
disabled?: boolean
|
||||
label?: string
|
||||
name: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
@@ -45,4 +44,4 @@ const handleClick = function () {
|
||||
}
|
||||
emit('update:modelValue', props.label)
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
<template>
|
||||
<ul class="layui-rate">
|
||||
<li
|
||||
class="layui-inline"
|
||||
@mouseenter="mouseenter(index)"
|
||||
v-for="(rate, index) in rates"
|
||||
:key="rate"
|
||||
class="layui-inline"
|
||||
@mouseenter="mouseenter(index)"
|
||||
>
|
||||
<i class="layui-icon" :class="[rate]"></i>
|
||||
<i class="layui-icon" :class="[rate]" />
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { defineProps, Ref, ref, withDefaults } from 'vue'
|
||||
|
||||
const rates: Ref<Array<String>> = ref([])
|
||||
const rates: Ref<Array<string>> = ref([])
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
@@ -46,7 +46,6 @@ const mouseenter = function (index: number) {
|
||||
|
||||
// select update 时, 通知 change 事件
|
||||
|
||||
emit('update:modelValue', index+1)
|
||||
|
||||
emit('update:modelValue', index + 1)
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,170 +1,170 @@
|
||||
export default [
|
||||
{ name: "实心", class: "layui-icon-heart-fill" },
|
||||
{ name: "空心", class: "layui-icon-heart" },
|
||||
{ name: "亮度/晴", class: "layui-icon-light" },
|
||||
{ name: "时间/历史", class: "layui-icon-time" },
|
||||
{ name: "蓝牙", class: "layui-icon-bluetooth" },
|
||||
{ name: "@艾特", class: "layui-icon-at" },
|
||||
{ name: "静音", class: "layui-icon-mute" },
|
||||
{ name: "录音/麦克风", class: "layui-icon-mike" },
|
||||
{ name: "密钥/钥匙", class: "layui-icon-key" },
|
||||
{ name: "礼物/活动", class: "layui-icon-gift" },
|
||||
{ name: "邮箱", class: "layui-icon-email" },
|
||||
{ name: "RSS", class: "layui-icon-rss" },
|
||||
{ name: "WiFi", class: "layui-icon-wifi" },
|
||||
{ name: "退出/注销", class: "layui-icon-logout" },
|
||||
{ name: "Android 安卓", class: "layui-icon-android" },
|
||||
{ name: "Apple IOS 苹果", class: "layui-icon-ios" },
|
||||
{ name: "Windows", class: "layui-icon-windows" },
|
||||
{ name: "穿梭框", class: "layui-icon-transfer" },
|
||||
{ name: "客服", class: "layui-icon-service" },
|
||||
{ name: "减", class: "layui-icon-subtraction" },
|
||||
{ name: "加", class: "layui-icon-addition" },
|
||||
{ name: "滑块", class: "layui-icon-slider" },
|
||||
{ name: "打印", class: "layui-icon-print" },
|
||||
{ name: "导出", class: "layui-icon-export" },
|
||||
{ name: "列", class: "layui-icon-cols" },
|
||||
{ name: "退出全屏", class: "layui-icon-screen-restore" },
|
||||
{ name: "全屏", class: "layui-icon-screen-full"},
|
||||
{ name: "半星", class: "layui-icon-rate-half" },
|
||||
{ name: "星星-空心", class: "layui-icon-rate" },
|
||||
{ name: "星星-实心", class: "layui-icon-rate-solid" },
|
||||
{ name: "手机", class: "layui-icon-cellphone" },
|
||||
{ name: "验证码", class: "layui-icon-vercode"},
|
||||
{ name: "微信", class: "layui-icon-login-wechat" },
|
||||
{ name: "QQ", class: "layui-icon-login-qq" },
|
||||
{ name: "微博", class: "layui-icon-login-weibo" },
|
||||
{ name: "密码", class: "layui-icon-password" },
|
||||
{ name: "用户名", class: "layui-icon-username" },
|
||||
{ name: "刷新-粗", class: "layui-icon-refresh-3" },
|
||||
{ name: "授权", class: "layui-icon-auz" },
|
||||
{ name: "左向右伸缩菜单", class: "layui-icon-spread-left" },
|
||||
{ name: "右向左伸缩菜单", class: "layui-icon-shrink-right" },
|
||||
{ name: "雪花", class: "layui-icon-snowflake" },
|
||||
{ name: "提示说明", class: "layui-icon-tips" },
|
||||
{ name: "便签", class: "layui-icon-note" },
|
||||
{ name: "主页", class: "layui-icon-home" },
|
||||
{ name: "高级", class: "layui-icon-senior" },
|
||||
{ name: "刷新", class: "layui-icon-refresh" },
|
||||
{ name: "刷新", class: "layui-icon-refresh-1" },
|
||||
{ name: "旗帜", class: "layui-icon-flag" },
|
||||
{ name: "主题", class: "layui-icon-theme" },
|
||||
{ name: "消息-通知", class: "layui-icon-notice" },
|
||||
{ name: "网站", class: "layui-icon-website" },
|
||||
{ name: "控制台", class: "layui-icon-console" },
|
||||
{ name: "表情-惊讶", class: "layui-icon-face-surprised" },
|
||||
{ name: "设置-空心", class: "layui-icon-set" },
|
||||
{ name: "模板", class: "layui-icon-template-1" },
|
||||
{ name: "应用", class: "layui-icon-app" },
|
||||
{ name: "模板", class: "layui-icon-template" },
|
||||
{ name: "赞", class: "layui-icon-praise" },
|
||||
{ name: "踩", class: "layui-icon-tread" },
|
||||
{ name: "男", class: "layui-icon-male" },
|
||||
{ name: "女", class: "layui-icon-female" },
|
||||
{ name: "相机-空心", class: "layui-icon-camera" },
|
||||
{ name: "相机-实心", class: "layui-icon-camera-fill" },
|
||||
{ name: "菜单-水平", class: "layui-icon-more" },
|
||||
{ name: "菜单-垂直", class: "layui-icon-more-vertical" },
|
||||
{ name: "金额-人民币", class: "layui-icon-rmb" },
|
||||
{ name: "金额-美元", class: "layui-icon-dollar" },
|
||||
{ name: "钻石-等级", class: "layui-icon-diamond" },
|
||||
{ name: "火", class: "layui-icon-fire" },
|
||||
{ name: "返回", class: "layui-icon-return" },
|
||||
{ name: "位置-地图", class: "layui-icon-location" },
|
||||
{ name: "办公-阅读", class: "layui-icon-read" },
|
||||
{ name: "调查", class: "layui-icon-survey" },
|
||||
{ name: "表情-微笑", class: "layui-icon-face-smile" },
|
||||
{ name: "表情-哭泣", class: "layui-icon-face-cry" },
|
||||
{ name: "购物车", class: "layui-icon-cart-simple" },
|
||||
{ name: "购物车", class: "layui-icon-cart" },
|
||||
{ name: "下一页", class: "layui-icon-next" },
|
||||
{ name: "上一页", class: "layui-icon-prev" },
|
||||
{ name: "上传-空心-拖拽", class: "layui-icon-upload-drag" },
|
||||
{ name: "上传-实心", class: "layui-icon-upload" },
|
||||
{ name: "下载-圆圈", class: "layui-icon-download-circle" },
|
||||
{ name: "组件", class: "layui-icon-component" },
|
||||
{ name: "文件-粗", class: "layui-icon-file-b" },
|
||||
{ name: "用户", class: "layui-icon-user" },
|
||||
{ name: "发现-实心", class: "layui-icon-find-fill" },
|
||||
{ name: "loading", class: "layui-icon-loading" },
|
||||
{ name: "loading", class: "layui-icon-loading-1" },
|
||||
{ name: "添加", class: "layui-icon-add-1" },
|
||||
{ name: "播放", class: "layui-icon-play" },
|
||||
{ name: "暂停", class: "layui-icon-pause" },
|
||||
{ name: "音频-耳机", class: "layui-icon-headset" },
|
||||
{ name: "视频", class: "layui-icon-video" },
|
||||
{ name: "语音-声音", class: "layui-icon-voice" },
|
||||
{ name: "消息-通知-喇叭", class: "layui-icon-speaker" },
|
||||
{ name: "删除线", class: "layui-icon-fonts-del" },
|
||||
{ name: "代码", class: "layui-icon-fonts-code" },
|
||||
{ name: "HTML", class: "layui-icon-fonts-html" },
|
||||
{ name: "字体加粗", class: "layui-icon-fonts-strong" },
|
||||
{ name: "删除链接", class: "layui-icon-unlink" },
|
||||
{ name: "图片", class: "layui-icon-picture" },
|
||||
{ name: "链接", class: "layui-icon-link" },
|
||||
{ name: "表情-笑-粗", class: "layui-icon-face-smile-b" },
|
||||
{ name: "左对齐", class: "layui-icon-align-left" },
|
||||
{ name: "右对齐", class: "layui-icon-align-right" },
|
||||
{ name: "居中对齐", class: "layui-icon-align-center" },
|
||||
{ name: "字体-下划线", class: "layui-icon-fonts-u" },
|
||||
{ name: "字体-斜体", class: "layui-icon-fonts-i" },
|
||||
{ name: "Tabs 选项卡", class: "layui-icon-tabs" },
|
||||
{ name: "单选框-选中", class: "layui-icon-radio" },
|
||||
{ name: "单选框-候选", class: "layui-icon-circle" },
|
||||
{ name: "编辑", class: "layui-icon-edit" },
|
||||
{ name: "分享", class: "layui-icon-share" },
|
||||
{ name: "删除", class: "layui-icon-delete" },
|
||||
{ name: "表单", class: "layui-icon-form" },
|
||||
{ name: "手机-细体", class: "layui-icon-cellphone-fine" },
|
||||
{ name: "聊天 对话 沟通", class: "layui-icon-dialogue" },
|
||||
{ name: "文字格式化", class: "layui-icon-fonts-clear" },
|
||||
{ name: "窗口", class: "layui-icon-layer" },
|
||||
{ name: "日期", class: "layui-icon-date" },
|
||||
{ name: "水 下雨", class: "layui-icon-water" },
|
||||
{ name: "代码-圆圈", class: "layui-icon-code-circle" },
|
||||
{ name: "轮播组图", class: "layui-icon-carousel" },
|
||||
{ name: "翻页", class: "layui-icon-prev-circle" },
|
||||
{ name: "布局", class: "layui-icon-layouts" },
|
||||
{ name: "工具", class: "layui-icon-util" },
|
||||
{ name: "选择模板", class: "layui-icon-templeate-1" },
|
||||
{ name: "上传-圆圈", class: "layui-icon-upload-circle" },
|
||||
{ name: "树", class: "layui-icon-tree" },
|
||||
{ name: "表格", class: "layui-icon-table" },
|
||||
{ name: "图表", class: "layui-icon-chart" },
|
||||
{ name: "图标 报表 屏幕", class: "layui-icon-chart-screen" },
|
||||
{ name: "引擎", class: "layui-icon-engine" },
|
||||
{ name: "下三角", class: "layui-icon-triangle-d" },
|
||||
{ name: "右三角", class: "layui-icon-triangle-r" },
|
||||
{ name: "文件", class: "layui-icon-file" },
|
||||
{ name: "设置-小型", class: "layui-icon-set-sm" },
|
||||
{ name: "减少-圆圈", class: "layui-icon-reduce-circle" },
|
||||
{ name: "添加-圆圈", class: "layui-icon-add-circle" },
|
||||
{ name: "404", class: "layui-icon-404" },
|
||||
{ name: "关于", class: "layui-icon-about" },
|
||||
{ name: "箭头 向上", class: "layui-icon-up" },
|
||||
{ name: "箭头 向下", class: "layui-icon-down" },
|
||||
{ name: "箭头 向左", class: "layui-icon-left" },
|
||||
{ name: "箭头 向右", class: "layui-icon-right" },
|
||||
{ name: "圆点", class: "layui-icon-circle-dot" },
|
||||
{ name: "搜索", class: "layui-icon-search" },
|
||||
{ name: "设置-实心", class: "layui-icon-set-fill" },
|
||||
{ name: "群组", class: "layui-icon-group" },
|
||||
{ name: "好友", class: "layui-icon-friends" },
|
||||
{ name: "回复 评论 实心", class: "layui-icon-reply-fill" },
|
||||
{ name: "菜单 隐身 实心", class: "layui-icon-menu-fill" },
|
||||
{ name: "记录", class: "layui-icon-log" },
|
||||
{ name: "图片-细体", class: "layui-icon-picture-fine" },
|
||||
{ name: "表情-笑-细体", class: "layui-icon-face-smile-fine" },
|
||||
{ name: "列表", class: "layui-icon-list" },
|
||||
{ name: "发布 纸飞机", class: "layui-icon-release" },
|
||||
{ name: "对 OK", class: "layui-icon-ok" },
|
||||
{ name: "帮助", class: "layui-icon-help" },
|
||||
{ name: "客服", class: "layui-icon-chat" },
|
||||
{ name: "top 置顶", class: "layui-icon-top" },
|
||||
{ name: "收藏-空心", class: "layui-icon-star" },
|
||||
{ name: "收藏-实心", class: "layui-icon-star-fill" },
|
||||
{ name: "关闭-实心", class: "layui-icon-close-fill" },
|
||||
{ name: "关闭-空心", class: "layui-icon-close" },
|
||||
{ name: "正确", class: "layui-icon-ok-circle" },
|
||||
{ name: "添加-圆圈-细体", class: "layui-icon-add-circle-fine" },
|
||||
]
|
||||
{ name: '实心', class: 'layui-icon-heart-fill' },
|
||||
{ name: '空心', class: 'layui-icon-heart' },
|
||||
{ name: '亮度/晴', class: 'layui-icon-light' },
|
||||
{ name: '时间/历史', class: 'layui-icon-time' },
|
||||
{ name: '蓝牙', class: 'layui-icon-bluetooth' },
|
||||
{ name: '@艾特', class: 'layui-icon-at' },
|
||||
{ name: '静音', class: 'layui-icon-mute' },
|
||||
{ name: '录音/麦克风', class: 'layui-icon-mike' },
|
||||
{ name: '密钥/钥匙', class: 'layui-icon-key' },
|
||||
{ name: '礼物/活动', class: 'layui-icon-gift' },
|
||||
{ name: '邮箱', class: 'layui-icon-email' },
|
||||
{ name: 'RSS', class: 'layui-icon-rss' },
|
||||
{ name: 'WiFi', class: 'layui-icon-wifi' },
|
||||
{ name: '退出/注销', class: 'layui-icon-logout' },
|
||||
{ name: 'Android 安卓', class: 'layui-icon-android' },
|
||||
{ name: 'Apple IOS 苹果', class: 'layui-icon-ios' },
|
||||
{ name: 'Windows', class: 'layui-icon-windows' },
|
||||
{ name: '穿梭框', class: 'layui-icon-transfer' },
|
||||
{ name: '客服', class: 'layui-icon-service' },
|
||||
{ name: '减', class: 'layui-icon-subtraction' },
|
||||
{ name: '加', class: 'layui-icon-addition' },
|
||||
{ name: '滑块', class: 'layui-icon-slider' },
|
||||
{ name: '打印', class: 'layui-icon-print' },
|
||||
{ name: '导出', class: 'layui-icon-export' },
|
||||
{ name: '列', class: 'layui-icon-cols' },
|
||||
{ name: '退出全屏', class: 'layui-icon-screen-restore' },
|
||||
{ name: '全屏', class: 'layui-icon-screen-full' },
|
||||
{ name: '半星', class: 'layui-icon-rate-half' },
|
||||
{ name: '星星-空心', class: 'layui-icon-rate' },
|
||||
{ name: '星星-实心', class: 'layui-icon-rate-solid' },
|
||||
{ name: '手机', class: 'layui-icon-cellphone' },
|
||||
{ name: '验证码', class: 'layui-icon-vercode' },
|
||||
{ name: '微信', class: 'layui-icon-login-wechat' },
|
||||
{ name: 'QQ', class: 'layui-icon-login-qq' },
|
||||
{ name: '微博', class: 'layui-icon-login-weibo' },
|
||||
{ name: '密码', class: 'layui-icon-password' },
|
||||
{ name: '用户名', class: 'layui-icon-username' },
|
||||
{ name: '刷新-粗', class: 'layui-icon-refresh-3' },
|
||||
{ name: '授权', class: 'layui-icon-auz' },
|
||||
{ name: '左向右伸缩菜单', class: 'layui-icon-spread-left' },
|
||||
{ name: '右向左伸缩菜单', class: 'layui-icon-shrink-right' },
|
||||
{ name: '雪花', class: 'layui-icon-snowflake' },
|
||||
{ name: '提示说明', class: 'layui-icon-tips' },
|
||||
{ name: '便签', class: 'layui-icon-note' },
|
||||
{ name: '主页', class: 'layui-icon-home' },
|
||||
{ name: '高级', class: 'layui-icon-senior' },
|
||||
{ name: '刷新', class: 'layui-icon-refresh' },
|
||||
{ name: '刷新', class: 'layui-icon-refresh-1' },
|
||||
{ name: '旗帜', class: 'layui-icon-flag' },
|
||||
{ name: '主题', class: 'layui-icon-theme' },
|
||||
{ name: '消息-通知', class: 'layui-icon-notice' },
|
||||
{ name: '网站', class: 'layui-icon-website' },
|
||||
{ name: '控制台', class: 'layui-icon-console' },
|
||||
{ name: '表情-惊讶', class: 'layui-icon-face-surprised' },
|
||||
{ name: '设置-空心', class: 'layui-icon-set' },
|
||||
{ name: '模板', class: 'layui-icon-template-1' },
|
||||
{ name: '应用', class: 'layui-icon-app' },
|
||||
{ name: '模板', class: 'layui-icon-template' },
|
||||
{ name: '赞', class: 'layui-icon-praise' },
|
||||
{ name: '踩', class: 'layui-icon-tread' },
|
||||
{ name: '男', class: 'layui-icon-male' },
|
||||
{ name: '女', class: 'layui-icon-female' },
|
||||
{ name: '相机-空心', class: 'layui-icon-camera' },
|
||||
{ name: '相机-实心', class: 'layui-icon-camera-fill' },
|
||||
{ name: '菜单-水平', class: 'layui-icon-more' },
|
||||
{ name: '菜单-垂直', class: 'layui-icon-more-vertical' },
|
||||
{ name: '金额-人民币', class: 'layui-icon-rmb' },
|
||||
{ name: '金额-美元', class: 'layui-icon-dollar' },
|
||||
{ name: '钻石-等级', class: 'layui-icon-diamond' },
|
||||
{ name: '火', class: 'layui-icon-fire' },
|
||||
{ name: '返回', class: 'layui-icon-return' },
|
||||
{ name: '位置-地图', class: 'layui-icon-location' },
|
||||
{ name: '办公-阅读', class: 'layui-icon-read' },
|
||||
{ name: '调查', class: 'layui-icon-survey' },
|
||||
{ name: '表情-微笑', class: 'layui-icon-face-smile' },
|
||||
{ name: '表情-哭泣', class: 'layui-icon-face-cry' },
|
||||
{ name: '购物车', class: 'layui-icon-cart-simple' },
|
||||
{ name: '购物车', class: 'layui-icon-cart' },
|
||||
{ name: '下一页', class: 'layui-icon-next' },
|
||||
{ name: '上一页', class: 'layui-icon-prev' },
|
||||
{ name: '上传-空心-拖拽', class: 'layui-icon-upload-drag' },
|
||||
{ name: '上传-实心', class: 'layui-icon-upload' },
|
||||
{ name: '下载-圆圈', class: 'layui-icon-download-circle' },
|
||||
{ name: '组件', class: 'layui-icon-component' },
|
||||
{ name: '文件-粗', class: 'layui-icon-file-b' },
|
||||
{ name: '用户', class: 'layui-icon-user' },
|
||||
{ name: '发现-实心', class: 'layui-icon-find-fill' },
|
||||
{ name: 'loading', class: 'layui-icon-loading' },
|
||||
{ name: 'loading', class: 'layui-icon-loading-1' },
|
||||
{ name: '添加', class: 'layui-icon-add-1' },
|
||||
{ name: '播放', class: 'layui-icon-play' },
|
||||
{ name: '暂停', class: 'layui-icon-pause' },
|
||||
{ name: '音频-耳机', class: 'layui-icon-headset' },
|
||||
{ name: '视频', class: 'layui-icon-video' },
|
||||
{ name: '语音-声音', class: 'layui-icon-voice' },
|
||||
{ name: '消息-通知-喇叭', class: 'layui-icon-speaker' },
|
||||
{ name: '删除线', class: 'layui-icon-fonts-del' },
|
||||
{ name: '代码', class: 'layui-icon-fonts-code' },
|
||||
{ name: 'HTML', class: 'layui-icon-fonts-html' },
|
||||
{ name: '字体加粗', class: 'layui-icon-fonts-strong' },
|
||||
{ name: '删除链接', class: 'layui-icon-unlink' },
|
||||
{ name: '图片', class: 'layui-icon-picture' },
|
||||
{ name: '链接', class: 'layui-icon-link' },
|
||||
{ name: '表情-笑-粗', class: 'layui-icon-face-smile-b' },
|
||||
{ name: '左对齐', class: 'layui-icon-align-left' },
|
||||
{ name: '右对齐', class: 'layui-icon-align-right' },
|
||||
{ name: '居中对齐', class: 'layui-icon-align-center' },
|
||||
{ name: '字体-下划线', class: 'layui-icon-fonts-u' },
|
||||
{ name: '字体-斜体', class: 'layui-icon-fonts-i' },
|
||||
{ name: 'Tabs 选项卡', class: 'layui-icon-tabs' },
|
||||
{ name: '单选框-选中', class: 'layui-icon-radio' },
|
||||
{ name: '单选框-候选', class: 'layui-icon-circle' },
|
||||
{ name: '编辑', class: 'layui-icon-edit' },
|
||||
{ name: '分享', class: 'layui-icon-share' },
|
||||
{ name: '删除', class: 'layui-icon-delete' },
|
||||
{ name: '表单', class: 'layui-icon-form' },
|
||||
{ name: '手机-细体', class: 'layui-icon-cellphone-fine' },
|
||||
{ name: '聊天 对话 沟通', class: 'layui-icon-dialogue' },
|
||||
{ name: '文字格式化', class: 'layui-icon-fonts-clear' },
|
||||
{ name: '窗口', class: 'layui-icon-layer' },
|
||||
{ name: '日期', class: 'layui-icon-date' },
|
||||
{ name: '水 下雨', class: 'layui-icon-water' },
|
||||
{ name: '代码-圆圈', class: 'layui-icon-code-circle' },
|
||||
{ name: '轮播组图', class: 'layui-icon-carousel' },
|
||||
{ name: '翻页', class: 'layui-icon-prev-circle' },
|
||||
{ name: '布局', class: 'layui-icon-layouts' },
|
||||
{ name: '工具', class: 'layui-icon-util' },
|
||||
{ name: '选择模板', class: 'layui-icon-templeate-1' },
|
||||
{ name: '上传-圆圈', class: 'layui-icon-upload-circle' },
|
||||
{ name: '树', class: 'layui-icon-tree' },
|
||||
{ name: '表格', class: 'layui-icon-table' },
|
||||
{ name: '图表', class: 'layui-icon-chart' },
|
||||
{ name: '图标 报表 屏幕', class: 'layui-icon-chart-screen' },
|
||||
{ name: '引擎', class: 'layui-icon-engine' },
|
||||
{ name: '下三角', class: 'layui-icon-triangle-d' },
|
||||
{ name: '右三角', class: 'layui-icon-triangle-r' },
|
||||
{ name: '文件', class: 'layui-icon-file' },
|
||||
{ name: '设置-小型', class: 'layui-icon-set-sm' },
|
||||
{ name: '减少-圆圈', class: 'layui-icon-reduce-circle' },
|
||||
{ name: '添加-圆圈', class: 'layui-icon-add-circle' },
|
||||
{ name: '404', class: 'layui-icon-404' },
|
||||
{ name: '关于', class: 'layui-icon-about' },
|
||||
{ name: '箭头 向上', class: 'layui-icon-up' },
|
||||
{ name: '箭头 向下', class: 'layui-icon-down' },
|
||||
{ name: '箭头 向左', class: 'layui-icon-left' },
|
||||
{ name: '箭头 向右', class: 'layui-icon-right' },
|
||||
{ name: '圆点', class: 'layui-icon-circle-dot' },
|
||||
{ name: '搜索', class: 'layui-icon-search' },
|
||||
{ name: '设置-实心', class: 'layui-icon-set-fill' },
|
||||
{ name: '群组', class: 'layui-icon-group' },
|
||||
{ name: '好友', class: 'layui-icon-friends' },
|
||||
{ name: '回复 评论 实心', class: 'layui-icon-reply-fill' },
|
||||
{ name: '菜单 隐身 实心', class: 'layui-icon-menu-fill' },
|
||||
{ name: '记录', class: 'layui-icon-log' },
|
||||
{ name: '图片-细体', class: 'layui-icon-picture-fine' },
|
||||
{ name: '表情-笑-细体', class: 'layui-icon-face-smile-fine' },
|
||||
{ name: '列表', class: 'layui-icon-list' },
|
||||
{ name: '发布 纸飞机', class: 'layui-icon-release' },
|
||||
{ name: '对 OK', class: 'layui-icon-ok' },
|
||||
{ name: '帮助', class: 'layui-icon-help' },
|
||||
{ name: '客服', class: 'layui-icon-chat' },
|
||||
{ name: 'top 置顶', class: 'layui-icon-top' },
|
||||
{ name: '收藏-空心', class: 'layui-icon-star' },
|
||||
{ name: '收藏-实心', class: 'layui-icon-star-fill' },
|
||||
{ name: '关闭-实心', class: 'layui-icon-close-fill' },
|
||||
{ name: '关闭-空心', class: 'layui-icon-close' },
|
||||
{ name: '正确', class: 'layui-icon-ok-circle' },
|
||||
{ name: '添加-圆圈-细体', class: 'layui-icon-add-circle-fine' },
|
||||
]
|
||||
|
||||
@@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayRow', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
<template>
|
||||
<div class="layui-row" :class="[space?'layui-col-space'+space:'']">
|
||||
<slot></slot>
|
||||
<div class="layui-row" :class="[space ? 'layui-col-space' + space : '']">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LayRow" lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
space?: string
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
space?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
@@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayScroll', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
<template>
|
||||
<div class="layui-side-scroll"></div>
|
||||
<div class="layui-side-scroll" />
|
||||
</template>
|
||||
|
||||
<script setup name="LayScroll" lang="ts">
|
||||
|
||||
</script>
|
||||
<script setup name="LayScroll" lang="ts"></script>
|
||||
|
||||
@@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LaySelect', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
<template>
|
||||
<select :name="name" lay-verify="required">
|
||||
</select>
|
||||
<div class="layui-unselect layui-form-select" @click="open" :class="[openState?'layui-form-selected':'']">
|
||||
<select :name="name" lay-verify="required" />
|
||||
<div
|
||||
class="layui-unselect layui-form-select"
|
||||
:class="[openState ? 'layui-form-selected' : '']"
|
||||
@click="open"
|
||||
>
|
||||
<div class="layui-select-title">
|
||||
<input
|
||||
type="text"
|
||||
@@ -9,11 +12,11 @@
|
||||
:value="selectItem.label"
|
||||
readonly=""
|
||||
class="layui-input layui-unselect"
|
||||
/><i class="layui-edge"></i>
|
||||
/><i class="layui-edge" />
|
||||
</div>
|
||||
<dl class="layui-anim layui-anim-upbit" style="">
|
||||
<dd lay-value="" @click="clean" class="layui-select-tips">请选择</dd>
|
||||
<slot></slot>
|
||||
<dd lay-value="" class="layui-select-tips" @click="clean">请选择</dd>
|
||||
<slot />
|
||||
</dl>
|
||||
</div>
|
||||
</template>
|
||||
@@ -21,32 +24,30 @@
|
||||
<script setup name="LaySelect" lang="ts">
|
||||
import { defineProps, provide, reactive, ref, watch } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
modelValue?: string
|
||||
name?: string
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
modelValue?: string
|
||||
name?: string
|
||||
}>()
|
||||
|
||||
const openState = ref(false)
|
||||
|
||||
const open = function() {
|
||||
openState.value = !openState.value
|
||||
const open = function () {
|
||||
openState.value = !openState.value
|
||||
}
|
||||
|
||||
const selectItem = reactive({label:"",value:props.modelValue});
|
||||
const selectItem = reactive({ label: '', value: props.modelValue })
|
||||
|
||||
provide("selectItem",selectItem);
|
||||
provide('selectItem', selectItem)
|
||||
|
||||
// select update 时, 通知 change 事件
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
watch(selectItem, function(item) {
|
||||
watch(selectItem, function (item) {
|
||||
emit('update:modelValue', item.value)
|
||||
})
|
||||
|
||||
const clean = function() {
|
||||
selectItem.value = "";
|
||||
selectItem.label = "";
|
||||
const clean = function () {
|
||||
selectItem.value = ''
|
||||
selectItem.label = ''
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LaySelectOption', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,31 +1,33 @@
|
||||
<template>
|
||||
<dd :value="value" @click="selectHandle" :class="[selectItem.value === value?'layui-this':'']">
|
||||
{{label}}
|
||||
</dd>
|
||||
<dd
|
||||
:value="value"
|
||||
:class="[selectItem.value === value ? 'layui-this' : '']"
|
||||
@click="selectHandle"
|
||||
>
|
||||
{{ label }}
|
||||
</dd>
|
||||
</template>
|
||||
|
||||
<script setup name="LaySelectOption" lang="ts">
|
||||
import { SelectItem } from '../type'
|
||||
import { defineProps, inject } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
value?: string
|
||||
label?: string
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
value?: string
|
||||
label?: string
|
||||
}>()
|
||||
|
||||
const selectItem = inject("selectItem") as SelectItem
|
||||
const selectItem = inject('selectItem') as SelectItem
|
||||
|
||||
const selectHandle = function(){
|
||||
const selectHandle = function () {
|
||||
selectItem.value = props.value
|
||||
selectItem.label = props.label
|
||||
}
|
||||
|
||||
// init selected
|
||||
|
||||
if(selectItem.value === props.value) {
|
||||
if (selectItem.value === props.value) {
|
||||
selectItem.value = props.value
|
||||
selectItem.label = props.label
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LaySide', Component)
|
||||
app.component(Component.name || 'LaySide', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="layui-side" :class="black?'layui-bg-black':''">
|
||||
<div class="layui-side" :class="black ? 'layui-bg-black' : ''">
|
||||
<div class="layui-side-scroll">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -9,8 +9,7 @@
|
||||
<script setup name="LaySide" lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
black?: boolean
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
black?: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
||||
@@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LaySwitch', Component)
|
||||
app.component(Component.name || 'LaySwitch', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,33 +1,32 @@
|
||||
<template>
|
||||
<span @click="handleClick">
|
||||
<div class="layui-unselect layui-form-switch"
|
||||
:class="{
|
||||
'layui-form-onswitch': modelValue == true,
|
||||
'layui-checkbox-disbaled layui-disabled': disabled
|
||||
}">
|
||||
<em>{{modelValue == true ? "启用" : "禁用"}}</em>
|
||||
<i></i>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
|
||||
<span @click="handleClick">
|
||||
<div
|
||||
class="layui-unselect layui-form-switch"
|
||||
:class="{
|
||||
'layui-form-onswitch': modelValue == true,
|
||||
'layui-checkbox-disbaled layui-disabled': disabled,
|
||||
}"
|
||||
>
|
||||
<em>{{ modelValue == true ? '启用' : '禁用' }}</em>
|
||||
<i />
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup name="LaySwitch" lang="ts">
|
||||
import { defineProps, defineEmits } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
modelValue: boolean
|
||||
disabled?: boolean
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
modelValue: boolean
|
||||
disabled?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const handleClick = function() {
|
||||
if(props.disabled) {
|
||||
return false
|
||||
}
|
||||
emit('update:modelValue',!props.modelValue)
|
||||
const handleClick = function () {
|
||||
if (props.disabled) {
|
||||
return false
|
||||
}
|
||||
emit('update:modelValue', !props.modelValue)
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayTab', Component)
|
||||
app.component(Component.name || 'LayTab', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -2,16 +2,16 @@
|
||||
<div class="layui-tab" :class="[type ? 'layui-tab-' + type : '']">
|
||||
<ul class="layui-tab-title">
|
||||
<li
|
||||
@click="change(ss.props.id)"
|
||||
v-for="ss in slots"
|
||||
:key="ss"
|
||||
:class="[ss.props.id === modelValue ? 'layui-this' : '']"
|
||||
@click="change(ss.props.id)"
|
||||
>
|
||||
{{ ss.props.title }}
|
||||
</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -22,11 +22,10 @@ import { defineProps, inject, provide, ref, useSlots } from 'vue'
|
||||
const slot = useSlots() as any
|
||||
const slots = slot.default && slot.default()
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
type?: string
|
||||
modelValue?: string
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
type?: string
|
||||
modelValue?: string
|
||||
}>()
|
||||
|
||||
// select update 时, 通知 change 事件
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
@@ -38,5 +37,5 @@ const change = function (id: any) {
|
||||
active.value = id
|
||||
}
|
||||
|
||||
provide("active",active)
|
||||
provide('active', active)
|
||||
</script>
|
||||
|
||||
@@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayTabItem', Component)
|
||||
app.component(Component.name || 'LayTabItem', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,16 +1,15 @@
|
||||
<template>
|
||||
<div class="layui-tab-item" :class="[active === id?'layui-show':'']">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="layui-tab-item" :class="[active === id ? 'layui-show' : '']">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LayTabItem" lang="ts">
|
||||
import { defineProps, inject, useSlots } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
id?: string
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
id?: string
|
||||
}>()
|
||||
|
||||
const active = inject("active")
|
||||
const active = inject('active')
|
||||
</script>
|
||||
|
||||
@@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayTable', Component)
|
||||
app.component(Component.name || 'LayTable', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
<template>
|
||||
<div>
|
||||
<table class="layui-hide" id="test" lay-filter="test"></table>
|
||||
<table id="test" class="layui-hide" lay-filter="test" />
|
||||
<div
|
||||
class="layui-form layui-border-box layui-table-view layui-table-view-1"
|
||||
>
|
||||
<div class="layui-table-tool" v-if="defaultToolbar || slot.toolbar">
|
||||
<div v-if="defaultToolbar || slot.toolbar" class="layui-table-tool">
|
||||
<div class="layui-table-tool-temp">
|
||||
<div class="layui-btn-container">
|
||||
<slot name="toolbar"></slot>
|
||||
<slot name="toolbar" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-table-tool-self" v-if="defaultToolbar">
|
||||
<div v-if="defaultToolbar" class="layui-table-tool-self">
|
||||
<div class="layui-inline" title="筛选列" lay-event="LAYTABLE_COLS">
|
||||
<i class="layui-icon layui-icon-cols"></i>
|
||||
<i class="layui-icon layui-icon-cols" />
|
||||
</div>
|
||||
<div class="layui-inline" title="导出" lay-event="LAYTABLE_EXPORT">
|
||||
<i class="layui-icon layui-icon-export"></i>
|
||||
<i class="layui-icon layui-icon-export" />
|
||||
</div>
|
||||
<div class="layui-inline" title="打印" lay-event="LAYTABLE_PRINT">
|
||||
<i class="layui-icon layui-icon-print"></i>
|
||||
<i class="layui-icon layui-icon-print" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -27,13 +27,13 @@
|
||||
<table cellspacing="0" cellpadding="0" border="0" class="layui-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="layui-table-col-special" v-if="checkbox">
|
||||
<th v-if="checkbox" class="layui-table-col-special">
|
||||
<div class="layui-table-cell laytable-cell-checkbox">
|
||||
<lay-checkbox
|
||||
skin="primary"
|
||||
v-model="allSelectedKeys"
|
||||
skin="primary"
|
||||
label="all"
|
||||
></lay-checkbox>
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th v-for="column in columns" :key="column">
|
||||
@@ -53,13 +53,13 @@
|
||||
<tbody>
|
||||
<template v-for="data in dataSource" :key="data">
|
||||
<tr>
|
||||
<td class="layui-table-col-special" v-if="checkbox">
|
||||
<td v-if="checkbox" class="layui-table-col-special">
|
||||
<div class="layui-table-cell laytable-cell-checkbox">
|
||||
<lay-checkbox
|
||||
skin="primary"
|
||||
v-model="tableSelectedKeys"
|
||||
skin="primary"
|
||||
:label="data[id]"
|
||||
></lay-checkbox>
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
@@ -70,14 +70,14 @@
|
||||
:style="{ width: column.width }"
|
||||
style="padding: 0px 16px"
|
||||
>
|
||||
<slot :name="column.customSlot" :data="data"></slot>
|
||||
<slot :name="column.customSlot" :data="data" />
|
||||
</div>
|
||||
</td>
|
||||
</template>
|
||||
|
||||
<template
|
||||
v-else
|
||||
v-for="(value, key, index) in data"
|
||||
v-else
|
||||
:key="index"
|
||||
>
|
||||
<td v-if="column.key == key">
|
||||
@@ -86,7 +86,7 @@
|
||||
style="padding: 0px 16px"
|
||||
>
|
||||
<span v-if="column.slot">
|
||||
<slot :name="column.slot" :data="data"></slot>
|
||||
<slot :name="column.slot" :data="data" />
|
||||
</span>
|
||||
<span v-else> {{ value }} </span>
|
||||
</div>
|
||||
@@ -103,11 +103,11 @@
|
||||
<lay-page
|
||||
:total="page.total"
|
||||
:limit="page.limit"
|
||||
show-page
|
||||
show-limit
|
||||
show-skip
|
||||
@jump="change"
|
||||
showPage
|
||||
showLimit
|
||||
showSkip
|
||||
></lay-page>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -122,17 +122,18 @@ import {
|
||||
defineEmits,
|
||||
computed,
|
||||
} from 'vue'
|
||||
import { Recordable } from '/@src/module/type'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
skin?: string
|
||||
page?: Object
|
||||
checkbox?: Boolean
|
||||
columns?: Object[]
|
||||
dataSource: Object[]
|
||||
defaultToolbar?: Boolean
|
||||
selectedKeys: Array<String>
|
||||
page?: Recordable
|
||||
checkbox?: boolean
|
||||
columns?: Recordable[]
|
||||
dataSource: Recordable[]
|
||||
defaultToolbar?: boolean
|
||||
selectedKeys: Array<string>
|
||||
}>(),
|
||||
{
|
||||
id: 'id',
|
||||
@@ -150,14 +151,16 @@ const tableSelectedKeys = ref(props.selectedKeys)
|
||||
|
||||
watch(
|
||||
allSelectedKeys,
|
||||
function (val: String[]) {
|
||||
function (val: string[]) {
|
||||
const ids = props.dataSource.map((item: any) => {
|
||||
return item[props.id]
|
||||
})
|
||||
tableSelectedKeys.value.splice(0, ids.length)
|
||||
if (val.includes('all')) {
|
||||
ids.forEach(id => { tableSelectedKeys.value.push(id) })
|
||||
}
|
||||
ids.forEach((id) => {
|
||||
tableSelectedKeys.value.push(id)
|
||||
})
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
@@ -170,4 +173,4 @@ const slots = slot.default && slot.default()
|
||||
const change = function (page: any) {
|
||||
emit('change', page)
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayTextarea', Component)
|
||||
app.component(Component.name || 'LayTextarea', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,21 +1,25 @@
|
||||
<template>
|
||||
<textarea :value="modelValue" :placeholder="placeholder" :name="name" class="layui-textarea" @input="updateValue"></textarea>
|
||||
<textarea
|
||||
:value="modelValue"
|
||||
:placeholder="placeholder"
|
||||
:name="name"
|
||||
class="layui-textarea"
|
||||
@input="updateValue"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup name="LayTextarea" lang="ts">
|
||||
import { defineProps, defineEmits } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
name?: string
|
||||
modelValue?: string
|
||||
placeholder?: string
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
name?: string
|
||||
modelValue?: string
|
||||
placeholder?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const updateValue = function(event: InputEvent) {
|
||||
const updateValue = function (event: InputEvent) {
|
||||
emit('update:modelValue', (event.target as HTMLInputElement).value)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayTimeline', Component)
|
||||
app.component(Component.name || 'LayTimeline', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<ul class="layui-timeline">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script setup name="LayTimeline" lang="ts">
|
||||
|
||||
</script>
|
||||
<script setup name="LayTimeline" lang="ts"></script>
|
||||
|
||||
@@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayTimelineItem', Component)
|
||||
app.component(Component.name || 'LayTimelineItem', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<h3 v-else class="layui-timeline-title">
|
||||
{{ title }}
|
||||
</h3>
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
@@ -16,9 +16,8 @@
|
||||
<script setup name="LayTimelineItem" lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
title: string
|
||||
simple?: boolean
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
title: string
|
||||
simple?: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
||||
@@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayTransfer', Component)
|
||||
app.component(Component.name || 'LayTransfer', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
<div class="layui-transfer-box" style="width: 200px; height: 360px">
|
||||
<div class="layui-transfer-header">
|
||||
<lay-checkbox
|
||||
v-model="allLeftSelectedKeys"
|
||||
skin="primary"
|
||||
label="all"
|
||||
v-model="allLeftSelectedKeys"
|
||||
>
|
||||
<span>列表一</span>
|
||||
</lay-checkbox>
|
||||
@@ -17,8 +17,9 @@
|
||||
v-model="leftSelectedKeys"
|
||||
skin="primary"
|
||||
:label="dataSource[id]"
|
||||
><span>{{ dataSource.title }}</span></lay-checkbox
|
||||
>
|
||||
<span>{{ dataSource.title }}</span>
|
||||
</lay-checkbox>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -28,21 +29,21 @@
|
||||
class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled"
|
||||
data-index="0"
|
||||
>
|
||||
<i class="layui-icon layui-icon-next"></i></button
|
||||
<i class="layui-icon layui-icon-next" /></button
|
||||
><button
|
||||
type="button"
|
||||
class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled"
|
||||
data-index="1"
|
||||
>
|
||||
<i class="layui-icon layui-icon-prev"></i>
|
||||
<i class="layui-icon layui-icon-prev" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="layui-transfer-box" style="width: 200px; height: 360px">
|
||||
<div class="layui-transfer-header">
|
||||
<lay-checkbox
|
||||
v-model="allRightSelectedKeys"
|
||||
skin="primary"
|
||||
label="all"
|
||||
v-model="allRightSelectedKeys"
|
||||
>
|
||||
<span>列表二</span>
|
||||
</lay-checkbox>
|
||||
@@ -53,8 +54,9 @@
|
||||
v-model="rightSelectedKeys"
|
||||
skin="primary"
|
||||
:label="dataSource[id]"
|
||||
><span>{{ dataSource.title }}</span></lay-checkbox
|
||||
>
|
||||
<span>{{ dataSource.title }}</span>
|
||||
</lay-checkbox>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -64,12 +66,13 @@
|
||||
<script setup name="LayTransfer"></script>
|
||||
<script setup lang="ts">
|
||||
import { defineProps, ref } from 'vue'
|
||||
import { Recordable } from '/@src/module/type'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
dataSource: Object[]
|
||||
selectedKeys: Array<String>
|
||||
dataSource: Recordable[]
|
||||
selectedKeys: Array<string>
|
||||
}>(),
|
||||
{
|
||||
id: 'id',
|
||||
|
||||
@@ -7,7 +7,7 @@ export default {
|
||||
import LayIcon from '../icon'
|
||||
import { TreeNode } from '/@src/module/tree/tree.type'
|
||||
|
||||
interface TreeEntityProps{
|
||||
interface TreeEntityProps {
|
||||
node: TreeNode
|
||||
onlyIconControl: boolean
|
||||
}
|
||||
@@ -26,13 +26,14 @@ const emit = defineEmits<EmitEvent>()
|
||||
const renderLineShort = (node: TreeNode): boolean => {
|
||||
return (
|
||||
// 没有下一个节点
|
||||
node._nextSibling === null &&
|
||||
node._parentNode &&
|
||||
// 外层最后一个
|
||||
(node._parentNode._nextSibling === null ||
|
||||
//上一层父级有延伸线
|
||||
(node._parentNode._nextSibling && !node._parentNode._nextSibling.children))
|
||||
) as boolean
|
||||
(node._nextSibling === null &&
|
||||
node._parentNode &&
|
||||
// 外层最后一个
|
||||
(node._parentNode._nextSibling === null ||
|
||||
//上一层父级有延伸线
|
||||
(node._parentNode._nextSibling &&
|
||||
!node._parentNode._nextSibling.children))) as boolean
|
||||
)
|
||||
}
|
||||
/**
|
||||
* 展开收起 icon样式
|
||||
@@ -46,7 +47,7 @@ const nodeIconType = (node: TreeNode): string => {
|
||||
* 发射至外层
|
||||
* @param node
|
||||
*/
|
||||
function handleNodeClick (node: TreeNode) {
|
||||
function handleNodeClick(node: TreeNode) {
|
||||
emit('node-click', node)
|
||||
}
|
||||
|
||||
@@ -54,10 +55,9 @@ function handleNodeClick (node: TreeNode) {
|
||||
* 递归事件
|
||||
* @param node
|
||||
*/
|
||||
function innerClick (node: TreeNode) {
|
||||
function innerClick(node: TreeNode) {
|
||||
emit('node-click', node)
|
||||
}
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<template v-if="node.children && node.children.length > 0">
|
||||
@@ -69,25 +69,31 @@ function innerClick (node: TreeNode) {
|
||||
}"
|
||||
>
|
||||
<div class="layui-tree-entry">
|
||||
<div class="layui-tree-main" @click.prevent.stop="!onlyIconControl && handleNodeClick(node)">
|
||||
<div
|
||||
class="layui-tree-main"
|
||||
@click.prevent.stop="!onlyIconControl && handleNodeClick(node)"
|
||||
>
|
||||
<span class="layui-tree-iconClick layui-tree-icon">
|
||||
<LayIcon :type="nodeIconType(node)" @click.prevent.stop="handleNodeClick(node)"></LayIcon>
|
||||
<LayIcon
|
||||
:type="nodeIconType(node)"
|
||||
@click.prevent.stop="handleNodeClick(node)"
|
||||
/>
|
||||
</span>
|
||||
<span class="layui-tree-txt">{{ node.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-show="node.spread"
|
||||
class="layui-tree-pack layui-tree-showLine"
|
||||
style="display: block"
|
||||
v-show="node.spread"
|
||||
>
|
||||
<LayTreeEntity
|
||||
v-for="(item, index) in node.children"
|
||||
:key="index"
|
||||
:node="item"
|
||||
:only-icon-control="onlyIconControl"
|
||||
@node-click="innerClick"
|
||||
:onlyIconControl="onlyIconControl"
|
||||
></LayTreeEntity>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -99,9 +105,15 @@ function innerClick (node: TreeNode) {
|
||||
}"
|
||||
>
|
||||
<div class="layui-tree-entry">
|
||||
<div class="layui-tree-main" @click.prevent.stop="!onlyIconControl && handleNodeClick(node)">
|
||||
<div
|
||||
class="layui-tree-main"
|
||||
@click.prevent.stop="!onlyIconControl && handleNodeClick(node)"
|
||||
>
|
||||
<span class="layui-tree-iconClick">
|
||||
<LayIcon type="layui-icon-file" @click.prevent.stop="handleNodeClick(node)"></LayIcon>
|
||||
<LayIcon
|
||||
type="layui-icon-file"
|
||||
@click.prevent.stop="handleNodeClick(node)"
|
||||
/>
|
||||
</span>
|
||||
<span class="layui-tree-txt">{{ node.title }}</span>
|
||||
</div>
|
||||
|
||||
@@ -30,39 +30,43 @@ interface TreeData {
|
||||
* 点击节点弹出新窗口对应的 url。需开启 isJump 参数
|
||||
* 废弃,通过 on-click事件用户控制
|
||||
*/
|
||||
href: string | URL
|
||||
href?: string | URL
|
||||
/**
|
||||
* 节点是否初始展开,默认 false
|
||||
* 废弃:设置 v-model:spreadKeys
|
||||
*/
|
||||
spread: boolean
|
||||
spread?: boolean
|
||||
/**
|
||||
* 节点是否初始为选中状态(如果开启复选框的话),默认 false
|
||||
* 废弃:设置 v-model:checkedKeys
|
||||
*/
|
||||
checked: boolean
|
||||
checked?: boolean
|
||||
/**
|
||||
* 节点是否为禁用状态。默认 false
|
||||
*/
|
||||
disabled: boolean
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
export declare interface TreeProps {
|
||||
interface TreeProps {
|
||||
/**
|
||||
* 指定唯一的id
|
||||
*/
|
||||
// eslint-disable-next-line vue/require-default-prop
|
||||
key?: string
|
||||
/**
|
||||
* 选中的节点
|
||||
*/
|
||||
// eslint-disable-next-line vue/require-default-prop
|
||||
checkedKeys?: (string | number)[]
|
||||
/**
|
||||
* 展开的节点
|
||||
*/
|
||||
// eslint-disable-next-line vue/require-default-prop
|
||||
spreadKeys?: (string | number)[]
|
||||
/**
|
||||
* 数据源
|
||||
*/
|
||||
// eslint-disable-next-line vue/require-default-prop
|
||||
data?: TreeData[]
|
||||
/**
|
||||
* 是否显示复选框 默认 false
|
||||
@@ -95,6 +99,7 @@ export declare interface TreeProps {
|
||||
/**
|
||||
* 自定义各类默认文本,目前支持以下设定:
|
||||
*/
|
||||
// eslint-disable-next-line vue/require-default-prop
|
||||
text?: {
|
||||
/**
|
||||
* 节点默认名称
|
||||
@@ -107,7 +112,6 @@ export declare interface TreeProps {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
interface EmitData {
|
||||
/**
|
||||
* 当前点击的节点数据
|
||||
@@ -158,18 +162,16 @@ const props = withDefaults(defineProps<TreeProps>(), {
|
||||
|
||||
const emit = defineEmits<TreeEmits>()
|
||||
|
||||
const {
|
||||
innerTreeData,
|
||||
updateInnerTreeData,
|
||||
treeWrapperClass
|
||||
} = useTreeData(props, emit)
|
||||
const { innerTreeData, updateInnerTreeData, treeWrapperClass } = useTreeData(
|
||||
props,
|
||||
emit
|
||||
)
|
||||
|
||||
function handleNodeClick(node: TreeNode) {
|
||||
updateInnerTreeData(innerTreeData.value, node)
|
||||
const emitNode = getEmitNode(props.data!, node)
|
||||
emit('node-click', { data: emitNode! })
|
||||
}
|
||||
|
||||
</script>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
@@ -179,12 +181,12 @@ export default {
|
||||
<template>
|
||||
<div :class="treeWrapperClass">
|
||||
<TreeEntity
|
||||
v-for="(node) in innerTreeData"
|
||||
:key="node.id"
|
||||
v-for="(node, index) in innerTreeData"
|
||||
:key="node.id || index"
|
||||
:node="node"
|
||||
:onlyIconControl="onlyIconControl"
|
||||
:only-icon-control="onlyIconControl"
|
||||
@node-click="handleNodeClick"
|
||||
></TreeEntity>
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped></style>
|
||||
|
||||
@@ -3,7 +3,14 @@
|
||||
* @see https://github.com/vuejs/vue-next/issues/4294
|
||||
* 暂时 在index.vue内部单独实现一份
|
||||
*/
|
||||
import { ComputedRef, CSSProperties, Ref, UnwrapRef, VNode, VNodeChild, WritableComputedRef } from 'vue'
|
||||
import {
|
||||
ComputedRef,
|
||||
Ref,
|
||||
UnwrapRef,
|
||||
VNode,
|
||||
VNodeChild,
|
||||
WritableComputedRef,
|
||||
} from 'vue'
|
||||
import { Nullable, Recordable } from '/@src/module/type'
|
||||
|
||||
type EditAction = 'add' | 'update' | 'del'
|
||||
@@ -31,21 +38,21 @@ export declare interface TreeData {
|
||||
* 点击节点弹出新窗口对应的 url。需开启 isJump 参数
|
||||
* 废弃,通过 on-click事件用户控制
|
||||
*/
|
||||
href: string | URL
|
||||
href?: string | URL
|
||||
/**
|
||||
* 节点是否初始展开,默认 false
|
||||
* 废弃:设置 v-model:spreadKeys
|
||||
*/
|
||||
spread: boolean
|
||||
spread?: boolean
|
||||
/**
|
||||
* 节点是否初始为选中状态(如果开启复选框的话),默认 false
|
||||
* 废弃:设置 v-model:checkedKeys
|
||||
*/
|
||||
checked: boolean
|
||||
checked?: boolean
|
||||
/**
|
||||
* 节点是否为禁用状态。默认 false
|
||||
*/
|
||||
disabled: boolean
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
export declare interface TreeProps {
|
||||
|
||||
@@ -6,7 +6,10 @@ import { Nullable } from '/@src/module/type'
|
||||
* @param data
|
||||
* @param parentId
|
||||
*/
|
||||
export const generatorTreeData = (data: TreeData[] | TreeNode[], parentId: TreeNode['parentId'] = ''): TreeNode[] => {
|
||||
export const generatorTreeData = (
|
||||
data: TreeData[] | TreeNode[],
|
||||
parentId: TreeNode['parentId'] = ''
|
||||
): TreeNode[] => {
|
||||
const innerTreeData: TreeNode[] = []
|
||||
const len = data.length
|
||||
for (let i = 0; i < len; i++) {
|
||||
@@ -14,7 +17,7 @@ export const generatorTreeData = (data: TreeData[] | TreeNode[], parentId: TreeN
|
||||
const inner = {
|
||||
...item,
|
||||
parentId: parentId,
|
||||
spread: item.spread || false
|
||||
spread: item.spread || false,
|
||||
}
|
||||
if (item.children && item.children.length > 0) {
|
||||
inner.children = generatorTreeData(item.children, item.id)
|
||||
@@ -31,7 +34,7 @@ export const generatorTreeData = (data: TreeData[] | TreeNode[], parentId: TreeN
|
||||
export const setNextSiblings = (data: TreeNode[]): void => {
|
||||
const len = data.length
|
||||
for (let i = 0; i < len; i++) {
|
||||
data[i]._nextSibling = (i + 1) < len ? data[i+1] : null
|
||||
data[i]._nextSibling = i + 1 < len ? data[i + 1] : null
|
||||
if (data[i].children && data[i].children.length > 0) {
|
||||
setNextSiblings(data[i].children)
|
||||
}
|
||||
@@ -43,7 +46,10 @@ export const setNextSiblings = (data: TreeNode[]): void => {
|
||||
* @param data
|
||||
* @param parentNode
|
||||
*/
|
||||
export const setParentNode = (data: TreeNode[], parentNode?: TreeNode): void => {
|
||||
export const setParentNode = (
|
||||
data: TreeNode[],
|
||||
parentNode?: TreeNode
|
||||
): void => {
|
||||
const len = data.length
|
||||
for (let i = 0; i < len; i++) {
|
||||
data[i]._parentNode = parentNode ? parentNode : null
|
||||
@@ -71,7 +77,7 @@ export const initialTreeData = (data: TreeData[]): TreeNode[] => {
|
||||
* @param data
|
||||
*/
|
||||
export const getTreeSpreadKeys = (data: TreeData[]): (string | number)[] => {
|
||||
let keys: (string | number) [] = []
|
||||
let keys: (string | number)[] = []
|
||||
const len = data.length
|
||||
for (let i = 0; i < len; i++) {
|
||||
const id: number | string = data[i].id
|
||||
@@ -90,7 +96,10 @@ export const getTreeSpreadKeys = (data: TreeData[]): (string | number)[] => {
|
||||
* @param data
|
||||
* @param node
|
||||
*/
|
||||
export const getEmitNode = (data: TreeData[], node: TreeNode): Nullable<TreeData> => {
|
||||
export const getEmitNode = (
|
||||
data: TreeData[],
|
||||
node: TreeNode
|
||||
): Nullable<TreeData> => {
|
||||
let item: Nullable<TreeData> = null
|
||||
const len = data.length
|
||||
for (let i = 0; i < len; i++) {
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
import { TreeData, UseTreeData } from '/@src/module/tree/tree.type'
|
||||
import { computed, ref, unref, watch } from 'vue'
|
||||
import { getTreeSpreadKeys, initialTreeData } from '/@src/module/tree/treeHelper'
|
||||
import {
|
||||
getTreeSpreadKeys,
|
||||
initialTreeData,
|
||||
} from '/@src/module/tree/treeHelper'
|
||||
import { Recordable } from '/@src/module/type'
|
||||
|
||||
export const useTreeData: UseTreeData = (props, emit) => {
|
||||
@@ -14,21 +17,25 @@ export const useTreeData: UseTreeData = (props, emit) => {
|
||||
},
|
||||
set: (value: (string | number)[]) => {
|
||||
emit('update:spreadKeys', value)
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
/**
|
||||
* 渲染的data
|
||||
*/
|
||||
const innerTreeData = ref<TreeData[]>([])
|
||||
watch(() => props.data, (treeData) => {
|
||||
if (treeData) {
|
||||
innerTreeData.value = initialTreeData(treeData)
|
||||
}
|
||||
}, { immediate: true, deep: true })
|
||||
watch(
|
||||
() => props.data,
|
||||
(treeData) => {
|
||||
if (treeData) {
|
||||
innerTreeData.value = initialTreeData(treeData)
|
||||
}
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
)
|
||||
|
||||
function updateInnerTreeData(treeData: TreeData[], node: TreeData): void {
|
||||
for(let i = 0; i <treeData.length; i++) {
|
||||
for (let i = 0; i < treeData.length; i++) {
|
||||
if (treeData[i].id === node.id) {
|
||||
treeData[i].spread = !treeData[i].spread
|
||||
break
|
||||
@@ -55,6 +62,6 @@ export const useTreeData: UseTreeData = (props, emit) => {
|
||||
spreadKeys,
|
||||
innerTreeData,
|
||||
updateInnerTreeData,
|
||||
treeWrapperClass
|
||||
treeWrapperClass,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
export * from './public'
|
||||
export * from './select'
|
||||
export * from './select'
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
export interface SelectItem {
|
||||
label?: String,
|
||||
value?: String
|
||||
}
|
||||
label?: string
|
||||
value?: string
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user