theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'develop' of https://gitee.com/dingyongya/layui-vue into setup

Browse Source
This commit is contained in:
dingyongya 2022-01-05 16:51:44 +08:00
commit c56a3e94e3
16 changed files with 333 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
example/docs/zh-CN/components/menu.md
View File

@ -11,15 +11,15 @@
<lay-menu-item title="首页" id="1"></lay-menu-item> <lay-menu-item title="首页" id="1"></lay-menu-item>
<lay-menu-item title="用户" id="2"></lay-menu-item> <lay-menu-item title="用户" id="2"></lay-menu-item>
<lay-menu-item title="角色" id="3"></lay-menu-item> <lay-menu-item title="角色" id="3"></lay-menu-item>
<lay-menu-item title="目录" id="7"> <lay-sub-menu title="目录" id="7">
<lay-menu-item title="菜单一" id="8"></lay-menu-item> <lay-menu-item title="菜单一" id="8"></lay-menu-item>
<lay-menu-item title="菜单二" id="9"></lay-menu-item> <lay-menu-item title="菜单二" id="9"></lay-menu-item>
<lay-menu-item title="菜单三" id="10"> <lay-sub-menu title="菜单三" id="10">
<lay-menu-item title="菜单一" id="11"></lay-menu-item> <lay-menu-item title="菜单一" id="11"></lay-menu-item>
<lay-menu-item title="菜单二" id="12"></lay-menu-item> <lay-menu-item title="菜单二" id="12"></lay-menu-item>
<lay-menu-item title="菜单三" id="13"></lay-menu-item> <lay-menu-item title="菜单三" id="13"></lay-menu-item>
</lay-menu-item> </lay-sub-menu>
</lay-menu-item> </lay-sub-menu>
</lay-menu> </lay-menu>
</template> </template>
@ -48,20 +48,68 @@ export default {
<template> <template>
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" v-model:tree="isTree"> <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" v-model:tree="isTree">
<lay-menu-item title="首页" id="1"> <lay-menu-item title="首页" id="1"></lay-menu-item>
<template v-slot:title>
<router-link to="">无感</router-link>
</template>
</lay-menu-item>
<lay-menu-item title="用户" id="2"></lay-menu-item> <lay-menu-item title="用户" id="2"></lay-menu-item>
<lay-menu-item title="角色" id="3"></lay-menu-item> <lay-menu-item title="角色" id="3"></lay-menu-item>
<lay-menu-item title="目录" id="7"> <lay-sub-menu title="目录" id="7">
<lay-menu-item title="菜单一" id="8"></lay-menu-item> <lay-menu-item title="菜单一" id="8"></lay-menu-item>
<lay-menu-item title="菜单二" id="9"></lay-menu-item> <lay-menu-item title="菜单二" id="9"></lay-menu-item>
<lay-menu-item title="菜单三" id="10"> <lay-sub-menu title="菜单三" id="10">
<lay-menu-item title="菜单一" id="11"></lay-menu-item> <lay-menu-item title="菜单一" id="11"></lay-menu-item>
<lay-menu-item title="菜单二" id="12"></lay-menu-item> <lay-menu-item title="菜单二" id="12"></lay-menu-item>
<lay-menu-item title="菜单三" id="13"></lay-menu-item> <lay-menu-item title="菜单三" id="13"></lay-menu-item>
</lay-sub-menu>
</lay-sub-menu>
</lay-menu>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const isTree = ref(true)
const selectedKey = ref("5")
const openKeys = ref(["7"])
return {
isTree,
openKeys,
selectedKey
}
}
}
</script>
:::
::: title 菜单插槽
:::
::: demo
<template>
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" v-model:tree="isTree">
<lay-menu-item id="1">
<template v-slot:title>
<router-link to="">首页</router-link>
</template>
</lay-menu-item>
<lay-menu-item id="7">
<template v-slot:title>
<router-link to="">目录</router-link>
</template>
<lay-menu-item id="8">
<template v-slot:title>
<router-link to="">菜单一</router-link>
</template>
</lay-menu-item>
<lay-menu-item id="9">
<template v-slot:title>
<router-link to="">菜单二</router-link>
</template>
</lay-menu-item> </lay-menu-item>
</lay-menu-item> </lay-menu-item>
</lay-menu> </lay-menu>

2
example/docs/zh-CN/components/modal.md
View File

@ -319,7 +319,7 @@ export default {
::: table ::: table
| 备注 | 描述 | 默认值 | | 备注 | 描述 | 默认值 |
| --------------- | ------------- | -------------------------- | | --------------- | ------------- | --------------------------|
| title | 标题 | -- | | title | 标题 | -- |
| move | 允许拖拽 | `false` | | move | 允许拖拽 | `false` |
| maxmin | 最小化 最大化 | `false` | | maxmin | 最小化 最大化 | `false` |

24
example/docs/zh-CN/components/slider.md
View File

@ -1,6 +1,3 @@
::: anchor
:::
::: title 横向 ::: title 横向
::: :::
@ -56,7 +53,7 @@ export default {
::: demo ::: demo
<template> <template>
<lay-slider v-model="value3" :range="true"></lay-slider> <lay-slider v-model:standardrange="value3" :range="true"></lay-slider>
</template> </template>
<script> <script>
@ -78,14 +75,14 @@ export default {
::: demo ::: demo
<template> <template>
<lay-slider v-model="value3" :range="true" :vertical="true"></lay-slider> <lay-slider v-model:verticalrange="value4" :range="true" :vertical="true"></lay-slider>
</template> </template>
<script> <script>
import { ref } from 'vue' import { ref } from 'vue'
export default { export default {
setup() { setup() {
const value4 = ref([20,50]) const value4 = ref([23,56])
return { return {
value4 value4
} }
@ -94,5 +91,20 @@ export default {
</script> </script>
::: :::
::: title slider 属性
:::
::: table
| 属性 | 描述 | 类型 | 可选值 | 默认值 |
| ------------ | --------------------- | ------------------------- | -------------- | -------- |
| v-model | 选中值 | `number` | - | - |
| vertical | 是否垂直 | `Boolean` | - | - |
| range | 是否区间 | `Boolean` | - | - |
| verticalrange | 垂直区间值 | `Array` | - | - |
| standardrange | 水平区间值 | `Array` | - | - |
:::
::: comment ::: comment
::: :::

46
example/docs/zh-CN/components/timeline.md
View File

@ -75,7 +75,40 @@ export default {
::: :::
::: title timeline-item attributes
::: title 节点插槽
:::
::: demo
<template>
<lay-timeline>
<lay-timeline-item title="2021年，layui vue 里程碑版本 1.0 发布" simple></lay-timeline-item>
<lay-timeline-item title="2017年，layui 里程碑版本 2.0 发布" simple></lay-timeline-item>
<lay-timeline-item title="2016年，layui 首个版本发布" simple></lay-timeline-item>
<lay-timeline-item title="2015年，layui 孵化" simple>
<template #dot>
<lay-icon type="layui-icon-face-smile" color="red"></lay-icon>
</template>
</lay-timeline-item>
</lay-timeline>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::
::: title Timeline Item 属性
::: :::
::: table ::: table
@ -87,5 +120,16 @@ export default {
::: :::
::: title Timeline Item 属性
:::
::: table
| | | |
| ------ | -------- | --- |
| dot | 节点 | -- |
:::
::: comment ::: comment
::: :::

13
example/docs/zh-CN/guide/changelog.md
View File

@ -11,6 +11,19 @@
<template> <template>
<lay-timeline> <lay-timeline>
<lay-timeline-item title="0.3.x"> <lay-timeline-item title="0.3.x">
<ul>
<a name="0-3-3"> </a>
<li>
<h3>0.3.3 <span class="layui-badge-rim">2022-01-05</span></h3>
<ul>
<li>[新增] setup 步骤条组件。</li>
<li>[新增] slider 滑块组件 vertical 属性, 支持垂直布局。</li>
<li>[新增] timeline-item 时间线组件 dot 插槽, 支持自定义节点内容。</li>
<li>[新增] sub-menu 目录组件, 与 menu-item 组合使用。</li>
<li>[修复] menu 组件 layui-nav-more 切换动画。</li>
</ul>
</li>
</ul>
<ul> <ul>
<a name="0-3-2"> </a> <a name="0-3-2"> </a>
<li> <li>

2
example/docs/zh-CN/guide/introduce.md
View File

@ -3,7 +3,7 @@
<p> <p>
<a href="http://layui-vue.pearadmin.com"> <a href="http://layui-vue.pearadmin.com">
<img src="https://sentsin.gitee.io/res/images/layui/layui.png" alt="layui" width="500"> <img src="../../../src/assets/logo-new.png" alt="layui" width="500">
</a> </a>
</p> </p>

44
example/docs/zh-CN/guide/member.md
View File

@ -3,13 +3,13 @@
<lay-card> <lay-card>
<lay-row> <lay-row>
<lay-col md="1"> <lay-col md="2">
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/1611/4835367_Jmysy_1578975358.png"></lay-avatar> <lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/1611/4835367_Jmysy_1578975358.png"></lay-avatar>
</lay-col> </lay-col>
<lay-col md="2"> <lay-col md="3">
就眠仪式 就眠仪式
</lay-col> </lay-col>
<lay-col md="10"> <lay-col md="8">
焦点：layui-vue 焦点：layui-vue
</lay-col> </lay-col>
<lay-col md="4"> <lay-col md="4">
@ -22,13 +22,13 @@
</lay-card> </lay-card>
<lay-card> <lay-card>
<lay-row> <lay-row>
<lay-col md="1"> <lay-col md="2">
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/1755/5267877_jobin_jia_1608578025.png"></lay-avatar> <lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/1755/5267877_jobin_jia_1608578025.png"></lay-avatar>
</lay-col> </lay-col>
<lay-col md="2"> <lay-col md="3">
落小梅 落小梅
</lay-col> </lay-col>
<lay-col md="10"> <lay-col md="8">
焦点：tree table 焦点：tree table
</lay-col> </lay-col>
<lay-col md="4"> <lay-col md="4">
@ -42,13 +42,13 @@
<lay-card> <lay-card>
<lay-row> <lay-row>
<lay-col md="1"> <lay-col md="2">
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/702/2106738_wanglin300_1639442830.png"></lay-avatar> <lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/702/2106738_wanglin300_1639442830.png"></lay-avatar>
</lay-col> </lay-col>
<lay-col md="2"> <lay-col md="3">
halo halo
</lay-col> </lay-col>
<lay-col md="10"> <lay-col md="8">
焦点：slider 焦点：slider
</lay-col> </lay-col>
<lay-col md="4"> <lay-col md="4">
@ -62,13 +62,13 @@
<lay-card> <lay-card>
<lay-row> <lay-row>
<lay-col md="1"> <lay-col md="2">
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/1871/5614379_xumisky_1607057214.png"></lay-avatar> <lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/1871/5614379_xumisky_1607057214.png"></lay-avatar>
</lay-col> </lay-col>
<lay-col md="2"> <lay-col md="3">
须弥 须弥
</lay-col> </lay-col>
<lay-col md="10"> <lay-col md="8">
焦点：layui-vue 焦点：layui-vue
</lay-col> </lay-col>
<lay-col md="4"> <lay-col md="4">
@ -82,13 +82,13 @@
<lay-card> <lay-card>
<lay-row> <lay-row>
<lay-col md="1"> <lay-col md="2">
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2469/7407590_wcg666_1640528494.png"></lay-avatar> <lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2469/7407590_wcg666_1640528494.png"></lay-avatar>
</lay-col> </lay-col>
<lay-col md="2"> <lay-col md="3">
Sight Sight
</lay-col> </lay-col>
<lay-col md="10"> <lay-col md="8">
焦点：count-up backtop 焦点：count-up backtop
</lay-col> </lay-col>
<lay-col md="4"> <lay-col md="4">
@ -102,13 +102,13 @@
<lay-card> <lay-card>
<lay-row> <lay-row>
<lay-col md="1"> <lay-col md="2">
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2596/7789823_finalsummer_1613993823.png"></lay-avatar> <lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2596/7789823_finalsummer_1613993823.png"></lay-avatar>
</lay-col> </lay-col>
<lay-col md="2"> <lay-col md="3">
finalsummer finalsummer
</lay-col> </lay-col>
<lay-col md="10"> <lay-col md="8">
焦点：layer-vue 焦点：layer-vue
</lay-col> </lay-col>
<lay-col md="4"> <lay-col md="4">
@ -122,14 +122,14 @@
<lay-card> <lay-card>
<lay-row> <lay-row>
<lay-col md="1"> <lay-col md="2">
<lay-avatar src="http://mms0.baidu.com/it/u=1690972933,1482111264&fm=253&app=138&f=JPEG&fmt=auto&q=75?w=500&h=500"></lay-avatar> <lay-avatar src="http://mms0.baidu.com/it/u=1690972933,1482111264&fm=253&app=138&f=JPEG&fmt=auto&q=75?w=500&h=500"></lay-avatar>
</lay-col> </lay-col>
<lay-col md="2"> <lay-col md="3">
莫名点 莫名点
</lay-col> </lay-col>
<lay-col md="10"> <lay-col md="8">
焦点：skeleton 焦点：skeleton setup
</lay-col> </lay-col>
<lay-col md="4"> <lay-col md="4">
地点：中国 未知 地点：中国 未知

BIN
example/src/assets/logo-new.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

12
example/src/view/component.vue
View File

@ -104,12 +104,6 @@ export default {
id: 1, id: 1,
title: "布局", title: "布局",
children: [ children: [
{
id: 111,
title: "骨架屏",
subTitle: "skeleton",
path: "/zh-CN/components/skeleton",
},
{ {
id: 4, id: 4,
title: "布局", title: "布局",
@ -140,6 +134,12 @@ export default {
subTitle: "card", subTitle: "card",
path: "/zh-CN/components/card", path: "/zh-CN/components/card",
}, },
{
id: 10,
title: "骨架",
subTitle: "skeleton",
path: "/zh-CN/components/skeleton",
},
], ],
}, },
{ {

12
src/css/layui.css
View File

@ -2885,12 +2885,10 @@ body .layui-table-tips .layui-layer-content {
line-height: 60px; line-height: 60px;
} }
.layui-nav .layui-nav-item a { .layui-nav .layui-nav-item > a {
display: block; display: block;
padding: 0 30px; padding: 0 30px;
color: #fff;
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
-webkit-transition: all 0.3s;
} }
.layui-nav .layui-this:after, .layui-nav .layui-this:after,
@ -3010,18 +3008,18 @@ body .layui-table-tips .layui-layer-content {
line-height: 42px; line-height: 42px;
} }
.layui-nav-tree .layui-nav-item a { .layui-nav-tree .layui-nav-item > a {
position: relative; position: relative;
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
padding: 5px 30px 5px 30px;
} }
.layui-nav-tree .layui-nav-item > a { .layui-nav-tree .layui-nav-item * {
padding-top: 5px; color: rgba(255, 255, 255, 0.7);
padding-bottom: 5px;
} }
.layui-nav-tree .layui-nav-more { .layui-nav-tree .layui-nav-more {

18
src/index.ts
View File

@ -70,6 +70,7 @@ import LaySkeleton from "./module/skeleton/index";
import LaySkeletonItem from "./module/skeletonItem/index"; import LaySkeletonItem from "./module/skeletonItem/index";
import LayStep from "./module/step/index"; import LayStep from "./module/step/index";
import LayStepItem from "./module/stepItem/index"; import LayStepItem from "./module/stepItem/index";
import LaySubMenu from "./module/subMenu/index"
const components: Record<string, IDefineComponent> = { const components: Record<string, IDefineComponent> = {
LayRadio, LayRadio,
@ -136,6 +137,7 @@ const components: Record<string, IDefineComponent> = {
LayCountUp, LayCountUp,
LayStep, LayStep,
LayStepItem, LayStepItem,
LaySubMenu
}; };
const install = (app: App, options?: InstallOptions): void => { const install = (app: App, options?: InstallOptions): void => {
@ -148,13 +150,9 @@ const install = (app: App, options?: InstallOptions): void => {
}; };
export { export {
LayStep,
LayStepItem,
LaySkeleton,
LaySkeletonItem,
LayRadio, LayRadio,
LayIcon,
LayButton, LayButton,
LayIcon,
LayBacktop, LayBacktop,
LayLayout, LayLayout,
LaySide, LaySide,
@ -208,7 +206,15 @@ export {
LayCarousel, LayCarousel,
LayCarouselItem, LayCarouselItem,
LayColorPicker, LayColorPicker,
LayLayer LayLayer,
LayTooltip,
LayInputNumber,
LaySkeleton,
LaySkeletonItem,
LayCountUp,
LayStep,
LayStepItem,
LaySubMenu
}; };
export { layer }; export { layer };

64
src/module/menuItem/index.vue
View File

@ -1,39 +1,12 @@
<template> <script lang="ts">
<li export default {
v-if="slots.default" name: "LayMenuItem"
class="layui-nav-item" }
:class="[openKeys.includes(id) && isTree ? 'layui-nav-itemed' : '']" </script>
>
<a href="javascript:void(0)" @click="openHandle">
{{ title }}
<i class="layui-icon layui-icon-down layui-nav-more"></i>
</a>
<dl
class="layui-nav-child"
:class="[
openKeys.includes(id) && !isTree ? 'layui-show' : '',
!isTree ? 'layui-anim layui-anim-upbit' : '',
]"
>
<slot></slot>
</dl>
</li>
<li <script setup lang="ts">
v-else import { defineProps, inject, Ref, useSlots } from "vue";
class="layui-nav-item"
:class="[selectedKey === id ? 'layui-this' : '']"
@click="selectHandle()"
>
<slot v-if="slots.title" name="title"></slot>
<a v-else href="javascript:void(0)">
{{ title }}
</a>
</li>
</template>
<script setup name="LayMenuItem" lang="ts">
import { defineProps, inject, Ref, ref, useSlots } from "vue";
const slots = useSlots(); const slots = useSlots();
const props = defineProps<{ const props = defineProps<{
@ -41,19 +14,22 @@ const props = defineProps<{
title: string; title: string;
}>(); }>();
const isTree = inject("isTree");
const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>; const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
const openHandle = function () {
if (openKeys.value.includes(props.id)) {
openKeys.value.splice(openKeys.value.indexOf(props.id), 1);
} else {
openKeys.value.push(props.id);
}
};
const selectHandle = function () { const selectHandle = function () {
selectedKey.value = props.id; selectedKey.value = props.id;
}; };
</script> </script>
<template>
<li
class="layui-nav-item"
:class="[selectedKey === id ? 'layui-this' : '']"
@click="selectHandle()"
>
<a href="javascript:void(0)">
<slot v-if="slots.default"></slot>
<span v-else>{{ title }}</span>
</a>
</li>
</template>

79
src/module/slider/index.vue
View File

@ -1,10 +1,27 @@
<template> <template>
<div class="layui-slider-vertical" v-if="vertical"> <div class="layui-slider-vertical" v-if="vertical">
<div ref="rangetracker2" class="layui-slider-vrange" v-if="range"> <div
<div class="layui-slider-vertical-btn"></div> ref="rangetracker2"
<div class="layui-slider-vertical-btn"></div> @mousedown.stop="handle_mousedown"
class="layui-slider-vrange"
v-if="range"
>
<div
:style="{ bottom: verticalRangeValue[1] + '%' }"
class="layui-slider-vertical-btn"
></div>
<div
:style="{ bottom: verticalRangeValue[0] + '%' }"
class="layui-slider-vertical-btn"
></div>
<div class="layui-slider-vertical-line"></div> <div class="layui-slider-vertical-line"></div>
<div class="layui-slider-vertical-rate"></div> <div
:style="{
height: verticalRangeValue[1] - verticalRangeValue[0] + '%',
bottom: verticalRangeValue[0] + '%',
}"
class="layui-slider-vertical-rate"
></div>
</div> </div>
<div <div
@ -84,7 +101,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { defineProps, reactive, Ref, ref } from "vue"; import { defineProps, reactive, Ref, ref, toRef } from "vue";
import { on, off } from "evtd"; import { on, off } from "evtd";
import "./index.less"; import "./index.less";
@ -98,6 +115,8 @@ interface LaySliderProps {
step?: number; step?: number;
disabled?: boolean; disabled?: boolean;
range?: boolean; range?: boolean;
verticalrange?: number[];
standardrange?: number[];
} }
const props = withDefaults(defineProps<LaySliderProps>(), { const props = withDefaults(defineProps<LaySliderProps>(), {
@ -106,17 +125,14 @@ const props = withDefaults(defineProps<LaySliderProps>(), {
disabled: false, disabled: false,
}); });
let rangeValue: Ref<number[]> = ref([0, 0]); // let rangeValue: Ref<number[]> = ref([0, 0]);
if (Array.isArray(props.modelValue)) { let rangeValue: Ref<number[]> | any = toRef(props, "standardrange");
// eslint-disable-next-line vue/no-step-props-destructure // if (Array.isArray(props.modelValue)) {
rangeValue.value = props.modelValue; // // eslint-disable-next-line vue/no-setup-props-destructure
} // rangeValue.value = props.modelValue;
// }
let verticalRangeValue: Ref<number[]> = ref([0, 0]); let verticalRangeValue: Ref<number[]> | any = toRef(props, "verticalrange");
if (Array.isArray(props.modelValue)) {
// eslint-disable-next-line vue/no-step-props-destructure
verticalRangeValue.value = props.modelValue;
}
const standardtracker = ref<HTMLElement | null>(null); const standardtracker = ref<HTMLElement | null>(null);
const verticaltracker = ref<HTMLElement | null>(null); const verticaltracker = ref<HTMLElement | null>(null);
@ -227,7 +243,7 @@ const starndardRangeMove = (e: MouseEvent) => {
rangeValue.value[0] = 0; rangeValue.value[0] = 0;
} else { } else {
let rate = (distance / tracker_rect.width) * 100; let rate = (distance / tracker_rect.width) * 100;
let idx = moveNeighbor(Math.floor(rate)); let idx = moveNeighbors(Math.floor(rate), rangeValue);
rangeValue.value[idx] = Math.floor(rate); rangeValue.value[idx] = Math.floor(rate);
if (rangeValue.value[1] > 100) { if (rangeValue.value[1] > 100) {
rangeValue.value[1] = 100; rangeValue.value[1] = 100;
@ -239,12 +255,33 @@ const starndardRangeMove = (e: MouseEvent) => {
emit("update:modelValue", rangeValue.value); emit("update:modelValue", rangeValue.value);
}; };
const verticalRangeMove = (e: MouseEvent) => {}; const verticalRangeMove = (e: MouseEvent) => {
if (!rangetracker2.value) {
function moveNeighbor(rate: number) { return;
let d1 = Math.abs(rate - rangeValue.value[0]); }
let d2 = Math.abs(rate - rangeValue.value[1]); let tracker_rect = rangetracker2.value.getBoundingClientRect();
let origin_bottom = tracker_rect.bottom;
let point_bottom = e.clientY;
let distance = (point_bottom - origin_bottom) * -1;
if (distance < 0) {
rangeValue.value[0] = 0;
} else {
let rate = (distance / tracker_rect.height) * 100;
let idx = moveNeighbors(Math.floor(rate), verticalRangeValue);
verticalRangeValue.value[idx] = Math.floor(rate);
if (verticalRangeValue.value[1] > 100) {
verticalRangeValue.value[1] = 100;
}
if (verticalRangeValue.value[0] < 0) {
verticalRangeValue.value[0] = 0;
}
}
emit("update:modelValue", verticalRangeValue.value);
};
function moveNeighbors(rate: number, rangeValues: any) {
let d1 = Math.abs(rate - rangeValues.value[0]);
let d2 = Math.abs(rate - rangeValues.value[1]);
if (d1 > d2) { if (d1 > d2) {
return 1; return 1;
} else { } else {

9
src/module/subMenu/index.ts Normal file
View File

@ -0,0 +1,9 @@
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || "laySubMenu", Component);
};
export default Component as IDefineComponent;

57
src/module/subMenu/index.vue Normal file
View File

@ -0,0 +1,57 @@
<script lang="ts">
export default {
name: "LaySubMenu",
};
</script>
<script setup lang="ts">
import { computed, defineProps, inject, Ref, useSlots } from "vue";
const slots = useSlots();
const props = defineProps<{
id: string;
title: string;
}>();
const isTree = inject("isTree");
const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
const openHandle = function () {
if (openKeys.value.includes(props.id)) {
openKeys.value.splice(openKeys.value.indexOf(props.id), 1);
} else {
openKeys.value.push(props.id);
}
};
const isOpen = computed(() => {
return openKeys.value.includes(props.id);
});
</script>
<template>
<li
class="layui-nav-item"
:class="[isOpen && isTree ? 'layui-nav-itemed' : '']"
>
<a href="javascript:void(0)" @click="openHandle()">
<slot v-if="slots.title" name="title"></slot>
<span v-else>{{ title }}</span>
<i
:class="[isOpen && !isTree ? 'layui-nav-mored' : '']"
class="layui-icon layui-icon-down layui-nav-more"
></i>
</a>
<dl
class="layui-nav-child"
:class="[
isOpen && !isTree ? 'layui-show' : '',
!isTree ? 'layui-anim layui-anim-upbit' : '',
]"
>
<slot></slot>
</dl>
</li>
</template>

9
src/module/timelineItem/index.vue
View File

@ -1,6 +1,9 @@
<template> <template>
<li class="layui-timeline-item"> <li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i> <i class="layui-icon layui-timeline-axis" v-if="slot.dot">
<slot name="dot"></slot>
</i>
<i class="layui-icon layui-timeline-axis" v-else></i>
<div class="layui-timeline-content layui-text"> <div class="layui-timeline-content layui-text">
<div v-if="simple" class="layui-timeline-title"> <div v-if="simple" class="layui-timeline-title">
{{ title }} {{ title }}
@ -20,7 +23,9 @@ export default {
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
import { defineProps } from "vue"; import { defineProps, useSlots } from "vue";
const slot = useSlots();
export interface LayTimelineItemProps { export interface LayTimelineItemProps {
title: string; title: string;