Merge branch 'develop' into sightDevelop
This commit is contained in:
sight
commit
4a1451ba17
@ -1,3 +1,6 @@
|
||||
{
|
||||
|
||||
"semi": true,
|
||||
"singleQuote": false,
|
||||
"tabWidth": 2
|
||||
}
|
||||
|
||||
|
||||
109
example/docs/zh-CN/components/skeleton.md
Normal file
109
example/docs/zh-CN/components/skeleton.md
Normal file
@ -0,0 +1,109 @@
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div style="margin-bottom: 10px">
|
||||
<lay-switch v-model="loading" active-text="加载" inactive-text="关闭"></lay-switch>
|
||||
</div>
|
||||
<lay-skeleton :rows="4" :loading="loading" animated>
|
||||
<p style="margin-bottom: 18px">1 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
|
||||
<p style="margin-bottom: 18px">2 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
|
||||
<p style="margin-bottom: 18px">3 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
|
||||
<p style="margin-bottom: 18px">4 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
|
||||
</lay-skeleton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const loading = ref(true);
|
||||
return {
|
||||
loading,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 图片
|
||||
:::
|
||||
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div style="margin-bottom: 10px">
|
||||
<lay-switch v-model="loading" active-text="加载" inactive-text="关闭"></lay-switch>
|
||||
</div>
|
||||
<lay-skeleton :loading="loading" animated>
|
||||
<template #skeleton>
|
||||
<lay-skeleton-item type="image"/>
|
||||
<lay-skeleton-item type="p" style="width: 240px"/>
|
||||
</template>
|
||||
<div class="img-content">
|
||||
<img src="https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png" />
|
||||
<p style="margin-top: 18px">layui-vue 发展史....</p>
|
||||
</div>
|
||||
</lay-skeleton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const loading = ref(true);
|
||||
return {
|
||||
loading,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.img-content {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
::: title 骨架屏属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ----- | ---- | ------ |
|
||||
| loading | 是否显示 | `true` `false` |
|
||||
| rows | 显示行数 | -- |
|
||||
| animated | 是否动画 | `true` `false` |
|
||||
| type | 展示类型 | `p` `image` |
|
||||
|
||||
:::
|
||||
|
||||
::: title 骨架屏插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 可选值 |
|
||||
| ------ | -------- | ------ |
|
||||
| default| 默认插槽 | -- |
|
||||
| skeleton | 自定义插槽 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -72,5 +72,27 @@ export default {
|
||||
</script>
|
||||
:::
|
||||
|
||||
::: title 纵向区间
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-slider v-model="value3" :range="true" :vertical="true"></lay-slider>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
const value4 = ref([20,50])
|
||||
return {
|
||||
value4
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
@ -12,16 +12,18 @@
|
||||
<lay-timeline>
|
||||
<lay-timeline-item title="0.3.x">
|
||||
<ul>
|
||||
<a name="0-3-0"> </a>
|
||||
<a name="0-3-1"> </a>
|
||||
<li>
|
||||
<h3>0.3.0 <span class="layui-badge-rim">2021-12-25</span></h3>
|
||||
<h3>0.3.1 <span class="layui-badge-rim">2021-12-28</span></h3>
|
||||
<ul>
|
||||
<li>[新增] slider 滑块 range 属性, 支持区间过程。</li>
|
||||
<li>[新增] count-up 数字滚动组件。</li>
|
||||
<li>[新增] slider 滑块 range 属性, 支持区间取值。</li>
|
||||
<li>[新增] button 按钮 disabled 属性, 删除 type 属性 disabled 值。</li>
|
||||
<li>[修复] 演示站点剪贴板功能，http下不能使用的问题。</li>
|
||||
<li>[修复] checkbox 复选框 modelValue 属性必填警告。</li>
|
||||
<li>[修复] formItem 内下拉框组件校验不通过边框未标红问题。</li>
|
||||
<li>[修复] rate 评分 mouseleave 事件绑定警告。</li>
|
||||
<li>[修复] npm 安装 layui-vue 不必要的依赖警告。</li>
|
||||
<li>[集成] eslint, prettier 规范插件 。</li>
|
||||
<li>[升级] icons-vue 1.0.2。</li>
|
||||
</ul>
|
||||
|
||||
@ -9,14 +9,11 @@
|
||||
<lay-col md="2">
|
||||
就眠仪式
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
<lay-col md="10">
|
||||
焦点：layui-vue
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：China Beijing
|
||||
</lay-col>
|
||||
<lay-col md="5">
|
||||
生态：Pear Admin
|
||||
地点：中国 北京
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
其他：Gitee Github
|
||||
@ -31,14 +28,11 @@
|
||||
<lay-col md="2">
|
||||
落小梅
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
<lay-col md="10">
|
||||
焦点：tree table
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：China Hunan
|
||||
</lay-col>
|
||||
<lay-col md="5">
|
||||
生态：Pear Admin
|
||||
地点：中国 湖南
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
其他：Gitee Github
|
||||
@ -54,17 +48,94 @@
|
||||
<lay-col md="2">
|
||||
halo
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
<lay-col md="10">
|
||||
焦点：slider
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：China Beijing
|
||||
</lay-col>
|
||||
<lay-col md="5">
|
||||
生态：暂无
|
||||
地点：中国 北京
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
其他：
|
||||
其他：Gitee Github
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-card>
|
||||
|
||||
<lay-card>
|
||||
<lay-row>
|
||||
<lay-col md="1">
|
||||
<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>
|
||||
<lay-col md="10">
|
||||
焦点：layui-vue
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：中国 广州
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
其他：<a href="https://gitee.com/xumisky">Gitee</a> <a href="https://github.com/xumiSky">Github</a>
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-card>
|
||||
|
||||
<lay-card>
|
||||
<lay-row>
|
||||
<lay-col md="1">
|
||||
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2469/7407590_wcg666_1640528494.png"></lay-avatar>
|
||||
</lay-col>
|
||||
<lay-col md="2">
|
||||
Sight
|
||||
</lay-col>
|
||||
<lay-col md="10">
|
||||
焦点：count-up backtop
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：中国 未知
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
其他：Gitee Github
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-card>
|
||||
|
||||
<lay-card>
|
||||
<lay-row>
|
||||
<lay-col md="1">
|
||||
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2596/7789823_finalsummer_1613993823.png"></lay-avatar>
|
||||
</lay-col>
|
||||
<lay-col md="2">
|
||||
finalsummer
|
||||
</lay-col>
|
||||
<lay-col md="10">
|
||||
焦点：layer-vue
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：中国 未知
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
其他：Gitee Github
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-card>
|
||||
|
||||
<lay-card>
|
||||
<lay-row>
|
||||
<lay-col md="1">
|
||||
<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>
|
||||
<lay-col md="10">
|
||||
焦点：skeleton
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：中国 未知
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
其他：Gitee Github
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-card>
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:void(0)"> 0.3.0 </a>
|
||||
<a href="javascript:void(0)"> 0.3.1 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</lay-header>
|
||||
|
||||
@ -76,6 +76,11 @@ const zhCN = [
|
||||
component: Component,
|
||||
meta: { title: '组件' },
|
||||
children: [
|
||||
{
|
||||
path: '/zh-CN/components/skeleton',
|
||||
component: () => import('../../docs/zh-CN/components/skeleton.md'),
|
||||
meta: { title: '骨架屏' },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/layout',
|
||||
component: () => import('../../docs/zh-CN/components/layout.md'),
|
||||
|
||||
@ -98,6 +98,12 @@ export default {
|
||||
id: 1,
|
||||
title: '布局',
|
||||
children: [
|
||||
{
|
||||
id: 111,
|
||||
title: '骨架屏',
|
||||
subTitle: 'skeleton',
|
||||
path: '/zh-CN/components/skeleton',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '布局',
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
>
|
||||
</div>
|
||||
<div class="site-version">
|
||||
<span>当前版本：v<cite class="site-showv">0.3.0</cite></span>
|
||||
<span>当前版本：v<cite class="site-showv">0.3.1</cite></span>
|
||||
<span
|
||||
><router-link
|
||||
class="layui-inline site-down"
|
||||
@ -44,7 +44,7 @@
|
||||
rel="nofollow"
|
||||
class="site-star"
|
||||
>
|
||||
<i class="layui-icon"></i> Star <cite id="getStars">336</cite>
|
||||
<i class="layui-icon"></i> Star <cite id="getStars">521</cite>
|
||||
</a>
|
||||
<a
|
||||
href="https://gitee.com/layui-vue"
|
||||
|
||||
14
package.json
14
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@layui/layui-vue",
|
||||
"version": "0.3.0",
|
||||
"version": "0.3.1",
|
||||
"author": "sleeprite",
|
||||
"license": "MIT",
|
||||
"description": "a component library for Vue 3 base on layui-vue",
|
||||
@ -26,8 +26,9 @@
|
||||
"build": "vite build --emptyOutDir && npm run build:types",
|
||||
"build:types": "rimraf types && tsc -d",
|
||||
"build:example": "vite build example",
|
||||
"lint:eslint": "eslint \"src/**/*.{vue,ts,tsx}\" --fix",
|
||||
"lint:prettier": "prettier --write \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
|
||||
"lint:eslint": "eslint 'src/**/*.{vue,ts,tsx}' --fix",
|
||||
"lint:prettier": "prettier --write 'src/**/*'",
|
||||
"publish": "npm run build && npm publish --access=public",
|
||||
"commit": "git cz"
|
||||
},
|
||||
"dependencies": {
|
||||
@ -78,10 +79,5 @@
|
||||
"current node",
|
||||
"last 2 versions and > 2%",
|
||||
"ie > 10"
|
||||
],
|
||||
"config": {
|
||||
"commitizen": {
|
||||
"path": "./node_modules/cz-conventional-changelog"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -67,6 +67,8 @@ import LayCarouselItem from "./module/carouselItem/index";
|
||||
import LayColorPicker from "./module/colorPicker/index";
|
||||
import LayTooltip from "./module/tooltip/index";
|
||||
import LayInputNumber from "./module/inputNumber/index";
|
||||
import LaySkeleton from './module/skeleton/index';
|
||||
import LaySkeletonItem from './module/skeletonItem/index';
|
||||
|
||||
const components: Record<string, IDefineComponent> = {
|
||||
LayRadio,
|
||||
@ -129,6 +131,8 @@ const components: Record<string, IDefineComponent> = {
|
||||
LayModal,
|
||||
LayTooltip,
|
||||
LayInputNumber,
|
||||
LaySkeleton,
|
||||
LaySkeletonItem,
|
||||
LayCountUp,
|
||||
};
|
||||
|
||||
@ -142,6 +146,8 @@ const install = (app: App, options?: InstallOptions): void => {
|
||||
};
|
||||
|
||||
export {
|
||||
LaySkeleton,
|
||||
LaySkeletonItem,
|
||||
LayRadio,
|
||||
LayIcon,
|
||||
LayButton,
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
</template>
|
||||
|
||||
<script setup name="LayPage" lang="ts">
|
||||
import { defineProps, Ref, ref, watch, useSlots } from "vue";
|
||||
import { defineProps, Ref, ref, watch, useSlots, computed, ComputedRef } from "vue";
|
||||
|
||||
const slots = useSlots();
|
||||
|
||||
@ -86,7 +86,6 @@ const inlimit = ref(props.limit);
|
||||
const totalPage = ref(Math.ceil(props.total / inlimit.value));
|
||||
const currentPage: Ref<number> = ref(1);
|
||||
const currentPageShow: Ref<number> = ref(currentPage.value);
|
||||
|
||||
const emit = defineEmits(["jump"]);
|
||||
|
||||
const prev = function () {
|
||||
|
||||
72
src/module/skeleton/index.less
Normal file
72
src/module/skeleton/index.less
Normal file
@ -0,0 +1,72 @@
|
||||
.lay-skeleton{
|
||||
.lay-skeleton-item {
|
||||
height: 16px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 16px;
|
||||
background: #eeeeee;
|
||||
}
|
||||
.lay-skeleton-type--p{
|
||||
height: 16px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 16px;
|
||||
background: #eeeeee;
|
||||
}
|
||||
|
||||
.lay-skeleton-type--image{
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
background: #eeeeee;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
i{
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lay-skeleton-animated {
|
||||
.lay-skeleton-type--image{
|
||||
width: 240px;
|
||||
height: 240px !important;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
i{
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
.lay-skeleton-item {
|
||||
height: 16px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 16px;
|
||||
background: #eeeeee;
|
||||
background: linear-gradient(
|
||||
90deg,#f2f2f2 25%,#ececec 37%,#f2f2f2 63%);
|
||||
background-size: 400% 100%;
|
||||
animation: lay-skeleton-loading 1.2s ease infinite;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.lay-skeleton-first {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.lay-skeleton-last {
|
||||
width: 62.8%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes lay-skeleton-loading {
|
||||
0% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
}
|
||||
9
src/module/skeleton/index.ts
Normal file
9
src/module/skeleton/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 || 'LaySkeleton', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
34
src/module/skeleton/index.vue
Normal file
34
src/module/skeleton/index.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div :class="['lay-skeleton', animated ? 'lay-skeleton-animated': '',]" v-bind="$attrs">
|
||||
<template v-if="loading">
|
||||
<slot name="skeleton">
|
||||
<lay-skeleton-item
|
||||
v-for="item in rows"
|
||||
:class="[
|
||||
item===1? 'lay-skeleton-first': '',
|
||||
item === rows? 'lay-skeleton-last': '']"
|
||||
type="p"
|
||||
></lay-skeleton-item>
|
||||
</slot>
|
||||
</template>
|
||||
<slot v-else></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LaySkeleton" lang="ts">
|
||||
import LaySkeletonItem from '../skeletonItem/index.vue'
|
||||
import './index.less'
|
||||
import { defineProps, withDefaults} from "vue";
|
||||
|
||||
export interface LaySkeletonProps {
|
||||
rows?: number;
|
||||
loading?: boolean;
|
||||
animated?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LaySkeletonProps>(), {
|
||||
rows: 4,
|
||||
loading: false,
|
||||
animated: false,
|
||||
});
|
||||
</script>-
|
||||
9
src/module/skeletonItem/index.ts
Normal file
9
src/module/skeletonItem/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 || 'LaySkeletonItem', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
19
src/module/skeletonItem/index.vue
Normal file
19
src/module/skeletonItem/index.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div :class="['lay-skeleton-item',`lay-skeleton-type--${type}`]" v-bind="$attrs">
|
||||
<div v-if="type==='image'" >
|
||||
<lay-icon type="layui-icon-picture"></lay-icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LaySkeletonItem" lang="ts">
|
||||
import { defineProps, withDefaults} from "vue";
|
||||
|
||||
export interface LaySkeletonProps {
|
||||
type?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LaySkeletonProps>(), {
|
||||
type: 'p',
|
||||
});
|
||||
</script>-
|
||||
@ -99,3 +99,10 @@
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.layui-slider-vrange {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -1,6 +1,11 @@
|
||||
<template>
|
||||
<div class="layui-slider-vertical" v-if="vertical">
|
||||
<div v-if="range">range vertical slider</div>
|
||||
<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 class="layui-slider-vertical-line"></div>
|
||||
<div class="layui-slider-vertical-rate"></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref="verticaltracker"
|
||||
@ -26,27 +31,35 @@
|
||||
</div>
|
||||
|
||||
<div class="layui-slider-v" v-else>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div @mousedown.stop="handle_mousedown" ref="rangetracker1" class="layui-slider-srange" v-if="range">
|
||||
<div
|
||||
@mousedown.stop="handle_mousedown"
|
||||
ref="rangetracker1"
|
||||
class="layui-slider-srange"
|
||||
v-if="range"
|
||||
>
|
||||
<lay-tooltip :content="rangeValue[0] + ''">
|
||||
<div :style="{ left: rangeValue[0] + '%' }" class="layui-slider-btn-v"></div>
|
||||
<div
|
||||
:style="{ left: rangeValue[0] + '%' }"
|
||||
class="layui-slider-btn-v"
|
||||
></div>
|
||||
</lay-tooltip>
|
||||
<lay-tooltip :content="rangeValue[1]">
|
||||
<div :style="{ left: rangeValue[1] + '%' }" class="layui-slider-btn-v"></div>
|
||||
<div
|
||||
:style="{ left: rangeValue[1] + '%' }"
|
||||
class="layui-slider-btn-v"
|
||||
></div>
|
||||
</lay-tooltip>
|
||||
|
||||
<div class="layui-slider-line-v"></div>
|
||||
<div :style="{ width:rangeValue[1]-rangeValue[0] +'%', left: rangeValue[0]+'%' }" class="layui-slider-rate-v"></div>
|
||||
<div
|
||||
:style="{
|
||||
width: rangeValue[1] - rangeValue[0] + '%',
|
||||
left: rangeValue[0] + '%',
|
||||
}"
|
||||
class="layui-slider-rate-v"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div
|
||||
ref="standardtracker"
|
||||
@mousedown.stop="handle_mousedown"
|
||||
@ -71,7 +84,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { defineProps, onMounted, reactive, Ref, ref } from "vue";
|
||||
import { defineProps, reactive, Ref, ref } from "vue";
|
||||
import { on, off } from "evtd";
|
||||
import "./index.less";
|
||||
|
||||
@ -93,13 +106,23 @@ const props = withDefaults(defineProps<LaySliderProps>(), {
|
||||
disabled: false,
|
||||
});
|
||||
|
||||
let rangeValue:Ref<number[]> = ref([0,0])
|
||||
let rangeValue: Ref<number[]> = ref([0, 0]);
|
||||
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]);
|
||||
if (Array.isArray(props.modelValue)) {
|
||||
// eslint-disable-next-line vue/no-setup-props-destructure
|
||||
verticalRangeValue.value = props.modelValue;
|
||||
}
|
||||
|
||||
const standardtracker = ref<HTMLElement | null>(null);
|
||||
const verticaltracker = ref<HTMLElement | null>(null);
|
||||
const rangetracker1 = ref<HTMLElement | null>(null);
|
||||
const rangetracker2 = ref<HTMLElement | null>(null);
|
||||
|
||||
const standard_style = reactive({
|
||||
left: props.modelValue,
|
||||
width: props.modelValue,
|
||||
@ -131,6 +154,10 @@ function handle_mousemove(e: MouseEvent) {
|
||||
if (props.vertical === false && props.range === true) {
|
||||
starndardRangeMove(e);
|
||||
}
|
||||
|
||||
if (props.vertical === true && props.range === true) {
|
||||
verticalRangeMove(e);
|
||||
}
|
||||
}
|
||||
|
||||
function handle_mouseup() {
|
||||
@ -197,30 +224,31 @@ const starndardRangeMove =(e:MouseEvent)=>{
|
||||
let point_left = e.clientX;
|
||||
let distance = point_left - origin_left;
|
||||
if (distance < 0) {
|
||||
rangeValue.value[0] = 0
|
||||
rangeValue.value[0] = 0;
|
||||
} else {
|
||||
let rate = (distance / tracker_rect.width) * 100;
|
||||
let idx = moveNeighbor(Math.floor(rate))
|
||||
rangeValue.value[idx] = Math.floor(rate)
|
||||
let idx = moveNeighbor(Math.floor(rate));
|
||||
rangeValue.value[idx] = Math.floor(rate);
|
||||
if (rangeValue.value[1] > 100) {
|
||||
rangeValue.value[1] = 100
|
||||
rangeValue.value[1] = 100;
|
||||
}
|
||||
if (rangeValue.value[0] < 0) {
|
||||
rangeValue.value[0] = 0
|
||||
rangeValue.value[0] = 0;
|
||||
}
|
||||
|
||||
}
|
||||
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]);
|
||||
|
||||
if (d1 > d2) {
|
||||
return 1
|
||||
return 1;
|
||||
} else {
|
||||
return 0
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user