Merge branch 'develop' of https://gitee.com/dingyongya/layui-vue into setup
This commit is contained in:
dingyongya
commit
c56a3e94e3
@ -11,15 +11,15 @@
|
||||
<lay-menu-item title="首页" id="1"></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="7">
|
||||
<lay-sub-menu title="目录" id="7">
|
||||
<lay-menu-item title="菜单一" id="8"></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="12"></lay-menu-item>
|
||||
<lay-menu-item title="菜单三" id="13"></lay-menu-item>
|
||||
</lay-menu-item>
|
||||
</lay-menu-item>
|
||||
</lay-sub-menu>
|
||||
</lay-sub-menu>
|
||||
</lay-menu>
|
||||
</template>
|
||||
|
||||
@ -48,20 +48,68 @@ export default {
|
||||
|
||||
<template>
|
||||
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" v-model:tree="isTree">
|
||||
<lay-menu-item title="首页" id="1">
|
||||
<template v-slot:title>
|
||||
<router-link to="">无感</router-link>
|
||||
</template>
|
||||
</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="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="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="12"></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>
|
||||
|
||||
@ -319,7 +319,7 @@ export default {
|
||||
::: table
|
||||
|
||||
| 备注 | 描述 | 默认值 |
|
||||
| --------------- | ------------- | -------------------------- |
|
||||
| --------------- | ------------- | --------------------------|
|
||||
| title | 标题 | -- |
|
||||
| move | 允许拖拽 | `false` |
|
||||
| maxmin | 最小化 最大化 | `false` |
|
||||
|
||||
@ -1,6 +1,3 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 横向
|
||||
:::
|
||||
|
||||
@ -56,7 +53,7 @@ export default {
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-slider v-model="value3" :range="true"></lay-slider>
|
||||
<lay-slider v-model:standardrange="value3" :range="true"></lay-slider>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -78,14 +75,14 @@ export default {
|
||||
::: demo
|
||||
|
||||
<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>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
const value4 = ref([20,50])
|
||||
const value4 = ref([23,56])
|
||||
return {
|
||||
value4
|
||||
}
|
||||
@ -94,5 +91,20 @@ export default {
|
||||
</script>
|
||||
:::
|
||||
|
||||
::: title slider 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 | 可选值 | 默认值 |
|
||||
| ------------ | --------------------- | ------------------------- | -------------- | -------- |
|
||||
| v-model | 选中值 | `number` | - | - |
|
||||
| vertical | 是否垂直 | `Boolean` | - | - |
|
||||
| range | 是否区间 | `Boolean` | - | - |
|
||||
| verticalrange | 垂直区间值 | `Array` | - | - |
|
||||
| standardrange | 水平区间值 | `Array` | - | - |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
@ -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
|
||||
@ -87,5 +120,16 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title Timeline Item 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| | | |
|
||||
| ------ | -------- | --- |
|
||||
| dot | 节点 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -11,6 +11,19 @@
|
||||
<template>
|
||||
<lay-timeline>
|
||||
<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>
|
||||
<a name="0-3-2"> </a>
|
||||
<li>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
<p>
|
||||
<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>
|
||||
</p>
|
||||
|
||||
|
||||
@ -3,13 +3,13 @@
|
||||
|
||||
<lay-card>
|
||||
<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-col>
|
||||
<lay-col md="2">
|
||||
<lay-col md="3">
|
||||
就眠仪式
|
||||
</lay-col>
|
||||
<lay-col md="10">
|
||||
<lay-col md="8">
|
||||
焦点：layui-vue
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
@ -22,13 +22,13 @@
|
||||
</lay-card>
|
||||
<lay-card>
|
||||
<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-col>
|
||||
<lay-col md="2">
|
||||
<lay-col md="3">
|
||||
落小梅
|
||||
</lay-col>
|
||||
<lay-col md="10">
|
||||
<lay-col md="8">
|
||||
焦点：tree table
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
@ -42,13 +42,13 @@
|
||||
|
||||
<lay-card>
|
||||
<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-col>
|
||||
<lay-col md="2">
|
||||
<lay-col md="3">
|
||||
halo
|
||||
</lay-col>
|
||||
<lay-col md="10">
|
||||
<lay-col md="8">
|
||||
焦点：slider
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
@ -62,13 +62,13 @@
|
||||
|
||||
<lay-card>
|
||||
<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-col>
|
||||
<lay-col md="2">
|
||||
<lay-col md="3">
|
||||
须弥
|
||||
</lay-col>
|
||||
<lay-col md="10">
|
||||
<lay-col md="8">
|
||||
焦点：layui-vue
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
@ -82,13 +82,13 @@
|
||||
|
||||
<lay-card>
|
||||
<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-col>
|
||||
<lay-col md="2">
|
||||
<lay-col md="3">
|
||||
Sight
|
||||
</lay-col>
|
||||
<lay-col md="10">
|
||||
<lay-col md="8">
|
||||
焦点：count-up backtop
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
@ -102,13 +102,13 @@
|
||||
|
||||
<lay-card>
|
||||
<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-col>
|
||||
<lay-col md="2">
|
||||
<lay-col md="3">
|
||||
finalsummer
|
||||
</lay-col>
|
||||
<lay-col md="10">
|
||||
<lay-col md="8">
|
||||
焦点：layer-vue
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
@ -122,14 +122,14 @@
|
||||
|
||||
<lay-card>
|
||||
<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-col>
|
||||
<lay-col md="2">
|
||||
<lay-col md="3">
|
||||
莫名点
|
||||
</lay-col>
|
||||
<lay-col md="10">
|
||||
焦点：skeleton
|
||||
<lay-col md="8">
|
||||
焦点：skeleton setup
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：中国 未知
|
||||
|
||||
BIN
example/src/assets/logo-new.png
Normal file
BIN
example/src/assets/logo-new.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
@ -104,12 +104,6 @@ export default {
|
||||
id: 1,
|
||||
title: "布局",
|
||||
children: [
|
||||
{
|
||||
id: 111,
|
||||
title: "骨架屏",
|
||||
subTitle: "skeleton",
|
||||
path: "/zh-CN/components/skeleton",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "布局",
|
||||
@ -140,6 +134,12 @@ export default {
|
||||
subTitle: "card",
|
||||
path: "/zh-CN/components/card",
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
title: "骨架",
|
||||
subTitle: "skeleton",
|
||||
path: "/zh-CN/components/skeleton",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@ -2885,12 +2885,10 @@ body .layui-table-tips .layui-layer-content {
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.layui-nav .layui-nav-item a {
|
||||
.layui-nav .layui-nav-item > a {
|
||||
display: block;
|
||||
padding: 0 30px;
|
||||
color: #fff;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
-webkit-transition: all 0.3s;
|
||||
}
|
||||
|
||||
.layui-nav .layui-this:after,
|
||||
@ -3010,18 +3008,18 @@ body .layui-table-tips .layui-layer-content {
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.layui-nav-tree .layui-nav-item a {
|
||||
.layui-nav-tree .layui-nav-item > a {
|
||||
position: relative;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 5px 30px 5px 30px;
|
||||
}
|
||||
|
||||
.layui-nav-tree .layui-nav-item > a {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
.layui-nav-tree .layui-nav-item * {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.layui-nav-tree .layui-nav-more {
|
||||
|
||||
18
src/index.ts
18
src/index.ts
@ -70,6 +70,7 @@ import LaySkeleton from "./module/skeleton/index";
|
||||
import LaySkeletonItem from "./module/skeletonItem/index";
|
||||
import LayStep from "./module/step/index";
|
||||
import LayStepItem from "./module/stepItem/index";
|
||||
import LaySubMenu from "./module/subMenu/index"
|
||||
|
||||
const components: Record<string, IDefineComponent> = {
|
||||
LayRadio,
|
||||
@ -136,6 +137,7 @@ const components: Record<string, IDefineComponent> = {
|
||||
LayCountUp,
|
||||
LayStep,
|
||||
LayStepItem,
|
||||
LaySubMenu
|
||||
};
|
||||
|
||||
const install = (app: App, options?: InstallOptions): void => {
|
||||
@ -148,13 +150,9 @@ const install = (app: App, options?: InstallOptions): void => {
|
||||
};
|
||||
|
||||
export {
|
||||
LayStep,
|
||||
LayStepItem,
|
||||
LaySkeleton,
|
||||
LaySkeletonItem,
|
||||
LayRadio,
|
||||
LayIcon,
|
||||
LayButton,
|
||||
LayIcon,
|
||||
LayBacktop,
|
||||
LayLayout,
|
||||
LaySide,
|
||||
@ -208,7 +206,15 @@ export {
|
||||
LayCarousel,
|
||||
LayCarouselItem,
|
||||
LayColorPicker,
|
||||
LayLayer
|
||||
LayLayer,
|
||||
LayTooltip,
|
||||
LayInputNumber,
|
||||
LaySkeleton,
|
||||
LaySkeletonItem,
|
||||
LayCountUp,
|
||||
LayStep,
|
||||
LayStepItem,
|
||||
LaySubMenu
|
||||
};
|
||||
|
||||
export { layer };
|
||||
|
||||
@ -1,39 +1,12 @@
|
||||
<template>
|
||||
<li
|
||||
v-if="slots.default"
|
||||
class="layui-nav-item"
|
||||
:class="[openKeys.includes(id) && isTree ? 'layui-nav-itemed' : '']"
|
||||
>
|
||||
<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>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LayMenuItem"
|
||||
}
|
||||
</script>
|
||||
|
||||
<li
|
||||
v-else
|
||||
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 lang="ts">
|
||||
import { defineProps, inject, Ref, useSlots } from "vue";
|
||||
|
||||
<script setup name="LayMenuItem" lang="ts">
|
||||
import { defineProps, inject, Ref, ref, useSlots } from "vue";
|
||||
const slots = useSlots();
|
||||
|
||||
const props = defineProps<{
|
||||
@ -41,19 +14,22 @@ const props = defineProps<{
|
||||
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 selectHandle = function () {
|
||||
selectedKey.value = props.id;
|
||||
};
|
||||
</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>
|
||||
@ -1,10 +1,27 @@
|
||||
<template>
|
||||
<div class="layui-slider-vertical" v-if="vertical">
|
||||
<div ref="rangetracker2" class="layui-slider-vrange" v-if="range">
|
||||
<div class="layui-slider-vertical-btn"></div>
|
||||
<div class="layui-slider-vertical-btn"></div>
|
||||
<div
|
||||
ref="rangetracker2"
|
||||
@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-rate"></div>
|
||||
<div
|
||||
:style="{
|
||||
height: verticalRangeValue[1] - verticalRangeValue[0] + '%',
|
||||
bottom: verticalRangeValue[0] + '%',
|
||||
}"
|
||||
class="layui-slider-vertical-rate"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@ -84,7 +101,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<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 "./index.less";
|
||||
|
||||
@ -98,6 +115,8 @@ interface LaySliderProps {
|
||||
step?: number;
|
||||
disabled?: boolean;
|
||||
range?: boolean;
|
||||
verticalrange?: number[];
|
||||
standardrange?: number[];
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LaySliderProps>(), {
|
||||
@ -106,17 +125,14 @@ const props = withDefaults(defineProps<LaySliderProps>(), {
|
||||
disabled: false,
|
||||
});
|
||||
|
||||
let rangeValue: Ref<number[]> = ref([0, 0]);
|
||||
if (Array.isArray(props.modelValue)) {
|
||||
// eslint-disable-next-line vue/no-step-props-destructure
|
||||
rangeValue.value = props.modelValue;
|
||||
}
|
||||
// let rangeValue: Ref<number[]> = ref([0, 0]);
|
||||
let rangeValue: Ref<number[]> | any = toRef(props, "standardrange");
|
||||
// if (Array.isArray(props.modelValue)) {
|
||||
// // eslint-disable-next-line vue/no-setup-props-destructure
|
||||
// rangeValue.value = props.modelValue;
|
||||
// }
|
||||
|
||||
let verticalRangeValue: Ref<number[]> = ref([0, 0]);
|
||||
if (Array.isArray(props.modelValue)) {
|
||||
// eslint-disable-next-line vue/no-step-props-destructure
|
||||
verticalRangeValue.value = props.modelValue;
|
||||
}
|
||||
let verticalRangeValue: Ref<number[]> | any = toRef(props, "verticalrange");
|
||||
|
||||
const standardtracker = ref<HTMLElement | null>(null);
|
||||
const verticaltracker = ref<HTMLElement | null>(null);
|
||||
@ -227,7 +243,7 @@ const starndardRangeMove = (e: MouseEvent) => {
|
||||
rangeValue.value[0] = 0;
|
||||
} else {
|
||||
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);
|
||||
if (rangeValue.value[1] > 100) {
|
||||
rangeValue.value[1] = 100;
|
||||
@ -239,12 +255,33 @@ const starndardRangeMove = (e: MouseEvent) => {
|
||||
emit("update:modelValue", rangeValue.value);
|
||||
};
|
||||
|
||||
const verticalRangeMove = (e: MouseEvent) => {};
|
||||
|
||||
function moveNeighbor(rate: number) {
|
||||
let d1 = Math.abs(rate - rangeValue.value[0]);
|
||||
let d2 = Math.abs(rate - rangeValue.value[1]);
|
||||
const verticalRangeMove = (e: MouseEvent) => {
|
||||
if (!rangetracker2.value) {
|
||||
return;
|
||||
}
|
||||
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) {
|
||||
return 1;
|
||||
} else {
|
||||
|
||||
9
src/module/subMenu/index.ts
Normal file
9
src/module/subMenu/index.ts
Normal 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
57
src/module/subMenu/index.vue
Normal 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>
|
||||
@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<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 v-if="simple" class="layui-timeline-title">
|
||||
{{ title }}
|
||||
@ -20,7 +23,9 @@ export default {
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps } from "vue";
|
||||
import { defineProps, useSlots } from "vue";
|
||||
|
||||
const slot = useSlots();
|
||||
|
||||
export interface LayTimelineItemProps {
|
||||
title: string;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user