Merge branch 'next' into doc-demand
This commit is contained in:
就眠儀式
commit
ed0b508a0f
79
README.zh.md
Normal file
79
README.zh.md
Normal file
@ -0,0 +1,79 @@
|
||||
## 介绍
|
||||
|
||||
<p>
|
||||
<a href="https://www.npmjs.com/package/@layui/layui-vue"><img src="https://img.shields.io/npm/v/@layui/layui-vue.svg?sanitize=true" alt="Version"></a>
|
||||
<a href="https://www.npmjs.com/package/@layui/layui-vue"><img src="https://img.shields.io/npm/l/@layui/layui-vue.svg?sanitize=true" alt="License"></a>
|
||||
<a href="https://travis-ci.org/sentsin/layui"><img alt="Build Status" src="https://img.shields.io/travis/sentsin/layui/master.svg"></a>
|
||||
<a href="https://coveralls.io/r/sentsin/layui?branch=master"><img alt="Test Coverage" src="https://img.shields.io/coveralls/sentsin/layui/master.svg"></a>
|
||||
</p>
|
||||
|
||||
**[🔶 www.layui-vue.com »](http://www.layui-vue.com)**
|
||||
|
||||
layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.
|
||||
|
||||
**Run with code Sandbox.**
|
||||
|
||||
[](https://codesandbox.io/s/11mvy)
|
||||
|
||||
## 功能
|
||||
|
||||
你可以用layui vue做的一些事情：
|
||||
|
||||
* 使用 setup script 编写组件
|
||||
* 多达 60 个高品质组件
|
||||
* 提供 Axure 设计资源
|
||||
* 支持 夜间模式
|
||||
* 支持 多主题
|
||||
* 支持 国际化
|
||||
|
||||
## 开始使用
|
||||
|
||||
使用 npm 安装
|
||||
|
||||
```bash
|
||||
npm i @layui/layui-vue
|
||||
```
|
||||
使用前需要将layui vue挂载到vue并引入index.css样式文件
|
||||
|
||||
```
|
||||
import App from './App.vue'
|
||||
import { createApp } from 'vue'
|
||||
import layui from '@layui/layui-vue'
|
||||
import '@layui/layui-vue/lib/index.css'
|
||||
|
||||
createApp(App).use(layui).mount('#app')
|
||||
```
|
||||
|
||||
我们在[网站](http://layui-vue.pearadmin.com)上有几个例子。这是第一个让您入门的方法：
|
||||
|
||||
```
|
||||
<template>
|
||||
<lay-button-container>
|
||||
<lay-button>Hello Word</lay-button>
|
||||
</lay-button-container>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 反馈
|
||||
|
||||
欢迎在[提交问题](https://github.com/layui-vue/layui-vue/issues/new)上向我们反馈。欢迎功能请求。如果您想贡献，请查看[快速指南](./CONTRIBUTING.md)！
|
||||
|
||||
如果您有什么想聊的，请随时加入我们的[Gitter chat](https://gitter.im/layui-vue/community)！
|
||||
|
||||
## 构建过程
|
||||
|
||||
- `build` 打包组件库
|
||||
|
||||
请看一下[贡献指南](./CONTRIBUTING.md)，以获得关于如何构建应用程序的详细过程以及排除故障的信息。
|
||||
|
||||
## 贡献者
|
||||
|
||||
这个项目遵循[所有贡献者](https://github.com/layui-vue/layui-vue/graphs/contributors)规范，感谢这些[出色的贡献者](https://github.com/layui-vue/layui-vue/graphs/contributors)。
|
||||
|
||||
<a href="https://github.com/layui-vue/layui-vue/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=layui-vue/layui-vue" />
|
||||
</a>
|
||||
|
||||
## 开源许可
|
||||
|
||||
Layui vue是基于[MIT协议](https://opensource.org/licenses/MIT)提供。
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@layui/layui-vue",
|
||||
"version": "1.0.5-alpha.1",
|
||||
"version": "1.0.6",
|
||||
"author": "就眠儀式",
|
||||
"license": "MIT",
|
||||
"description": "a component library for Vue 3 base on layui-vue",
|
||||
@ -32,7 +32,7 @@
|
||||
"dependencies": {
|
||||
"@layui/icons-vue": "^1.0.8",
|
||||
"@layui/layer-vue": "^1.3.13",
|
||||
"@vueuse/core": "^8.3.0",
|
||||
"@vueuse/core": "^8.3.1",
|
||||
"animate.css": "^4.1.1",
|
||||
"async-validator": "^4.0.7",
|
||||
"cropperjs": "^1.5.12",
|
||||
@ -40,7 +40,7 @@
|
||||
"dayjs": "^1.11.0",
|
||||
"evtd": "^0.2.3",
|
||||
"uuid": "^8.3.2",
|
||||
"vue-i18n": "^9.2.0-beta.34"
|
||||
"vue-i18n": "^9.1.9"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.17.9",
|
||||
|
||||
@ -1,44 +1,34 @@
|
||||
.scrollbar-box {
|
||||
.layui-scroll {
|
||||
height: 100%;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.scrollbar-y {
|
||||
.layui-scroll-y {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
.scroll-wrap {
|
||||
|
||||
.layui-scroll-wrap {
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
scrollbar-width: none; /* firefox */
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.scrollbar-track {
|
||||
.layui-scroll-track {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 8px;
|
||||
z-index: 20;
|
||||
.scrollbar-thumb {
|
||||
.layui-scroll-thumb {
|
||||
margin: 0 auto;
|
||||
border-radius: 6px;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
.scrollbar-y ::-webkit-scrollbar {
|
||||
|
||||
.layui-scroll-y ::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
//移动端隐藏自定义滚动条
|
||||
.hide.scrollbar-box .scrollbar-track {
|
||||
display: none;
|
||||
}
|
||||
//移动端显示原生滑块
|
||||
.hide.scrollbar-box .scrollbar-y ::-webkit-scrollbar {
|
||||
display: block;
|
||||
}
|
||||
.hide.scrollbar-box .scrollbar-y .scroll-wrap {
|
||||
scrollbar-width: auto;
|
||||
-ms-overflow-style: scrollbar;
|
||||
}
|
||||
}
|
||||
@ -1,32 +1,28 @@
|
||||
<template>
|
||||
<div
|
||||
class="scrollbar-box"
|
||||
:class="{ hide: winWidth < 500 }"
|
||||
class="layui-scroll"
|
||||
:class="{ hide: data.winWidth < 500 }"
|
||||
:style="{ height: height }"
|
||||
>
|
||||
<div class="scrollbar-y">
|
||||
<div ref="scrollRef" class="scroll-wrap" @scroll="onMosewheel">
|
||||
<div class="layui-scroll-y">
|
||||
<div ref="scrollRef" class="layui-scroll-wrap" @scroll="onMosewheel">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div
|
||||
ref="barRef"
|
||||
class="scrollbar-track"
|
||||
class="layui-scroll-track"
|
||||
:style="{
|
||||
backgroundColor: heightPre == 1 ? 'rgba(0,0,0,0)' : slotColor,
|
||||
backgroundColor: data.heightPre == 1 ? 'rgba(0,0,0,0)' : trackColor,
|
||||
}"
|
||||
>
|
||||
<!--
|
||||
没有滑块方式，背景色透明：使用v-show窗口变大，滑块不出现，所以使用背景色控制
|
||||
backgroundColor: heightPre == 1 ? 'rgba(0,0,0,0)' : scrollColor,
|
||||
-->
|
||||
<div
|
||||
:style="{
|
||||
height: barHeight + 'px',
|
||||
width: scrollWidth + 'px',
|
||||
transform: 'translateY(' + translateY + 'px)',
|
||||
backgroundColor: heightPre == 1 ? 'rgba(0,0,0,0)' : scrollColor,
|
||||
height: data.barHeight + 'px',
|
||||
width: thumbWidth + 'px',
|
||||
transform: 'translateY(' + data.translateY + 'px)',
|
||||
backgroundColor: data.heightPre == 1 ? 'rgba(0,0,0,0)' : thumbColor,
|
||||
}"
|
||||
class="scrollbar-thumb"
|
||||
class="layui-scroll-thumb"
|
||||
@mousedown.stop.prevent="moveStart"
|
||||
></div>
|
||||
</div>
|
||||
@ -34,202 +30,199 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import "./index.less";
|
||||
import {
|
||||
defineComponent,
|
||||
toRefs,
|
||||
onMounted,
|
||||
nextTick,
|
||||
reactive,
|
||||
onUnmounted,
|
||||
} from "vue";
|
||||
export default defineComponent({
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LayScroll",
|
||||
props: {
|
||||
height: {
|
||||
type: String,
|
||||
default: "100%",
|
||||
},
|
||||
slotColor: {
|
||||
//滑块槽颜色 :slotColor="'red'"
|
||||
type: String,
|
||||
default: "rgba(0,0,0,0)",
|
||||
},
|
||||
scrollColor: {
|
||||
//滑块颜色 :scrollColor="'red'"
|
||||
type: String,
|
||||
default: "#eeeeee",
|
||||
},
|
||||
scrollWidth: {
|
||||
//滑块宽度 :scrollWidth="7"
|
||||
type: Number,
|
||||
default: 6,
|
||||
},
|
||||
},
|
||||
setup(props, ctx) {
|
||||
const data = reactive({
|
||||
scrollRef: null, // 内容盒子
|
||||
barRef: null, // 滚动条轨道
|
||||
translateY: 0, // 滚动块平移的距离
|
||||
heightPre: 0, // 可视高度和内容高度比
|
||||
barHeight: 0, // 滑块高度
|
||||
winWidth: document.body.clientWidth, //初始化浏览器页面宽度
|
||||
});
|
||||
let time = null; // 定时器
|
||||
let isMove = false; // 判断鼠标是否点击滑块（为松开）
|
||||
let moveClientY = 0; // 鼠标点击滑块时，相对滑块的位置
|
||||
let trackHeight = 0; // 滚动条轨道高度
|
||||
let wrapHeight = 0; // 容器高度（可视高度）
|
||||
let wrapContentHeight = 0; // 内容高度（可滚动内容的高度）
|
||||
|
||||
// 页面挂载后计算滚动条
|
||||
onMounted(() => {
|
||||
monitorWindow(); //监听窗口尺寸
|
||||
monitorScrollBar(); //监听内容元素尺寸
|
||||
nextTick(() => {
|
||||
//dom渲染后
|
||||
calculationLength(); //初始化延迟更新滚动条
|
||||
});
|
||||
});
|
||||
// 页面卸载清除定时器
|
||||
onUnmounted(() => {
|
||||
window.clearInterval(time);
|
||||
time = null;
|
||||
});
|
||||
// 监听页面尺寸改变计算滚动条
|
||||
const monitorWindow = function () {
|
||||
let time; //定时器，防抖，窗口持续变化，延迟更新滚动条
|
||||
window.addEventListener("resize", () => {
|
||||
data.winWidth = document.body.clientWidth; //页面改变监听宽度控制移动端隐藏滚动条
|
||||
clearTimeout(time);
|
||||
time = setTimeout(() => {
|
||||
//页面宽度变化继续监听，如果小于500就关闭自定义滚动条
|
||||
// console.log("浏览器窗口变化更新滚动条");
|
||||
initScrollListner();
|
||||
}, 500);
|
||||
});
|
||||
};
|
||||
|
||||
//监听内容元素尺寸变化
|
||||
const monitorScrollBar = function () {
|
||||
var monitorUl = data.scrollRef.children[0];
|
||||
// var monitorDiv= document; // 监听document
|
||||
let MutationObserver =
|
||||
window.MutationObserver ||
|
||||
window.WebKitMutationObserver ||
|
||||
window.MozMutationObserver;
|
||||
let observer = new MutationObserver(function (mutations) {
|
||||
// console.log("内容元素变化更新滚动条");
|
||||
initScrollListner();
|
||||
});
|
||||
|
||||
// childList 观察子节点变动
|
||||
// 监听子节点增加或者内容撑起的尺寸
|
||||
observer.observe(monitorUl, {
|
||||
attributes: true,
|
||||
childList: true,
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化延迟监听滚动条
|
||||
const calculationLength = function () {
|
||||
// 直接执行initScrollListner函数，获取滚动条长度部准确
|
||||
// 因为页面渲染有延迟，获取dom元素需要延迟
|
||||
// 每间隔10毫秒更新滑块长度
|
||||
time = setInterval(() => {
|
||||
// 计算滚动条长度
|
||||
initScrollListner();
|
||||
}, 50);
|
||||
// 间隔500毫秒清除定时器，滑块缩短会有动画效果，时间可延长没有影响
|
||||
setTimeout(() => {
|
||||
window.clearInterval(time);
|
||||
time = null;
|
||||
}, 2000);
|
||||
};
|
||||
// 计算滚动条高度
|
||||
const initScrollListner = function () {
|
||||
let scroll = data.scrollRef;
|
||||
let bar = data.barRef;
|
||||
// scroll有时候拿不到元素，要判断一下
|
||||
if (scroll) {
|
||||
wrapContentHeight = scroll.scrollHeight;
|
||||
wrapHeight = scroll.clientHeight;
|
||||
trackHeight = bar.clientHeight;
|
||||
// console.log(wrapContentHeight ,wrapHeight);
|
||||
// 容器高度 / 内容高度 100 150
|
||||
data.heightPre = wrapHeight / wrapContentHeight;
|
||||
// 滑动块的高度 根据 容器和内容的比 乘以 滚动轨道 计算出 滑动块的高度
|
||||
data.barHeight = data.heightPre * trackHeight;
|
||||
}
|
||||
};
|
||||
// 内容滚动时，计算滑块移动的距离
|
||||
const onMosewheel = function (e) {
|
||||
// scrollTop页面顶部滚出的高度
|
||||
// offsetHeight页面可视区域高度
|
||||
// scrollHeight页面正文全文高度
|
||||
// data.translateY滚动块平移的距离
|
||||
data.translateY = e.target.scrollTop * data.heightPre;
|
||||
if (data.translateY == 0) {
|
||||
// 到达顶部
|
||||
arrive("top");
|
||||
} else if (
|
||||
e.target.scrollTop + e.target.offsetHeight ==
|
||||
e.target.scrollHeight
|
||||
) {
|
||||
// 滚出高度 + 可视区域高度 == 内容高度
|
||||
arrive("bottom");
|
||||
}
|
||||
};
|
||||
// 到达顶部或者底部通知父级元素
|
||||
const arrive = function name(tb) {
|
||||
ctx.emit("arrive", tb);
|
||||
};
|
||||
// 鼠标点击滑块时
|
||||
const moveStart = function (e) {
|
||||
isMove = true;
|
||||
// clientY：当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）y轴的位置
|
||||
// data.translateY 滚动块平移的距离
|
||||
// moveClientY 鼠标点击滑块时，相对滑块的位置
|
||||
moveClientY = e.clientY - data.translateY;
|
||||
moveTo(); //移动时
|
||||
moveEnd(); //鼠标松开时
|
||||
};
|
||||
// 鼠标移动，改变thumb的位置以及容器scrollTop的位置
|
||||
const moveTo = function () {
|
||||
document.onmousemove = (e) => {
|
||||
// 移动时候判断是不是松开，松开就不在执行滑块移动操作
|
||||
if (isMove) {
|
||||
// 移动滑块时，判断时候到达顶部或者底部
|
||||
if (e.clientY - moveClientY > trackHeight - data.barHeight) {
|
||||
// 滑块到达 底部 就不在改变滑块translateY值
|
||||
data.translateY = trackHeight - data.barHeight;
|
||||
} else if (e.clientY - moveClientY < 0) {
|
||||
// 滑块到达 顶部 就不在改变滑块translateY值
|
||||
data.translateY = 0;
|
||||
} else {
|
||||
//改变滑块位置
|
||||
data.translateY = e.clientY - moveClientY;
|
||||
}
|
||||
// 计算出内容盒子滚出顶部的距离
|
||||
data.scrollRef.scrollTop = data.translateY / data.heightPre;
|
||||
}
|
||||
};
|
||||
};
|
||||
// 鼠标从滑块松开时，不在监听滑块移动操作
|
||||
const moveEnd = function () {
|
||||
document.onmouseup = (e) => {
|
||||
if (isMove) {
|
||||
isMove = false;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(data),
|
||||
onMosewheel,
|
||||
moveStart,
|
||||
};
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import "./index.less";
|
||||
import { toRefs, onMounted, nextTick, reactive, onUnmounted, ref } from "vue";
|
||||
|
||||
export interface LayScrollProps {
|
||||
height?: string;
|
||||
trackColor?: string;
|
||||
thumbColor?: string;
|
||||
thumbWidth?: number;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LayScrollProps>(), {
|
||||
height: "100%",
|
||||
trackColor: "rgba(0,0,0,0)",
|
||||
thumbColor: "#eeeeee",
|
||||
thumbWidth: 6,
|
||||
});
|
||||
|
||||
const emit = defineEmits(["arrive"]);
|
||||
|
||||
const scrollRef = ref<HTMLElement | null>(null);
|
||||
const barRef = ref<HTMLElement | null>(null);
|
||||
|
||||
const data = reactive({
|
||||
translateY: 0, // 滚动块平移的距离
|
||||
heightPre: 0, // 可视高度和内容高度比
|
||||
barHeight: 0, // 滑块高度
|
||||
winWidth: document.body.clientWidth, //初始化浏览器页面宽度
|
||||
});
|
||||
|
||||
let time = null; // 定时器
|
||||
let isMove = false; // 判断鼠标是否点击滑块（为松开）
|
||||
let moveClientY = 0; // 鼠标点击滑块时，相对滑块的位置
|
||||
let trackHeight = 0; // 滚动条轨道高度
|
||||
let wrapHeight = 0; // 容器高度（可视高度）
|
||||
let wrapContentHeight = 0; // 内容高度（可滚动内容的高度）
|
||||
|
||||
// 页面挂载后计算滚动条
|
||||
onMounted(() => {
|
||||
monitorWindow(); //监听窗口尺寸
|
||||
monitorScrollBar(); //监听内容元素尺寸
|
||||
nextTick(() => {
|
||||
//dom渲染后
|
||||
calculationLength(); //初始化延迟更新滚动条
|
||||
});
|
||||
});
|
||||
|
||||
// 页面卸载清除定时器
|
||||
onUnmounted(() => {
|
||||
window.clearInterval(time);
|
||||
time = null;
|
||||
});
|
||||
|
||||
// 监听页面尺寸改变计算滚动条
|
||||
const monitorWindow = function () {
|
||||
let time; //定时器，防抖，窗口持续变化，延迟更新滚动条
|
||||
window.addEventListener("resize", () => {
|
||||
data.winWidth = document.body.clientWidth; //页面改变监听宽度控制移动端隐藏滚动条
|
||||
clearTimeout(time);
|
||||
time = setTimeout(() => {
|
||||
//页面宽度变化继续监听，如果小于500就关闭自定义滚动条
|
||||
// console.log("浏览器窗口变化更新滚动条");
|
||||
initScrollListner();
|
||||
}, 500);
|
||||
});
|
||||
};
|
||||
|
||||
//监听内容元素尺寸变化
|
||||
const monitorScrollBar = function () {
|
||||
var monitorUl = scrollRef.value.children[0];
|
||||
// var monitorDiv= document; // 监听document
|
||||
let MutationObserver =
|
||||
window.MutationObserver ||
|
||||
// @ts-ignore
|
||||
window.WebKitMutationObserver ||
|
||||
// @ts-ignore
|
||||
window.MozMutationObserver;
|
||||
let observer = new MutationObserver(function (mutations) {
|
||||
// console.log("内容元素变化更新滚动条");
|
||||
initScrollListner();
|
||||
});
|
||||
|
||||
// 监听子节点增加或者内容撑起的尺寸
|
||||
observer.observe(monitorUl, {
|
||||
attributes: true,
|
||||
childList: true,
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化延迟监听滚动条
|
||||
const calculationLength = function () {
|
||||
// 直接执行initScrollListner函数，获取滚动条长度部准确
|
||||
// 因为页面渲染有延迟，获取dom元素需要延迟
|
||||
// 每间隔10毫秒更新滑块长度
|
||||
time = setInterval(() => {
|
||||
// 计算滚动条长度
|
||||
initScrollListner();
|
||||
}, 50);
|
||||
// 间隔500毫秒清除定时器，滑块缩短会有动画效果，时间可延长没有影响
|
||||
setTimeout(() => {
|
||||
window.clearInterval(time);
|
||||
time = null;
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
// 计算滚动条高度
|
||||
const initScrollListner = function () {
|
||||
let scroll = scrollRef.value;
|
||||
let bar = barRef.value;
|
||||
// scroll有时候拿不到元素，要判断一下
|
||||
if (scroll) {
|
||||
wrapContentHeight = scroll.scrollHeight;
|
||||
wrapHeight = scroll.clientHeight;
|
||||
trackHeight = bar.clientHeight;
|
||||
// console.log(wrapContentHeight ,wrapHeight);
|
||||
// 容器高度 / 内容高度 100 150
|
||||
data.heightPre = wrapHeight / wrapContentHeight;
|
||||
// 滑动块的高度 根据 容器和内容的比 乘以 滚动轨道 计算出 滑动块的高度
|
||||
data.barHeight = data.heightPre * trackHeight;
|
||||
}
|
||||
};
|
||||
|
||||
// 内容滚动时，计算滑块移动的距离
|
||||
const onMosewheel = function (e) {
|
||||
// scrollTop页面顶部滚出的高度
|
||||
// offsetHeight页面可视区域高度
|
||||
// scrollHeight页面正文全文高度
|
||||
// data.translateY滚动块平移的距离
|
||||
data.translateY = e.target.scrollTop * data.heightPre;
|
||||
if (data.translateY == 0) {
|
||||
// 到达顶部
|
||||
arrive("top");
|
||||
} else if (
|
||||
e.target.scrollTop + e.target.offsetHeight ==
|
||||
e.target.scrollHeight
|
||||
) {
|
||||
// 滚出高度 + 可视区域高度 == 内容高度
|
||||
arrive("bottom");
|
||||
}
|
||||
};
|
||||
|
||||
// 到达顶部或者底部通知父级元素
|
||||
const arrive = function name(tb) {
|
||||
emit("arrive", tb);
|
||||
};
|
||||
|
||||
// 鼠标点击滑块时
|
||||
const moveStart = function (e) {
|
||||
isMove = true;
|
||||
// clientY：当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）y轴的位置
|
||||
// data.translateY 滚动块平移的距离
|
||||
// moveClientY 鼠标点击滑块时，相对滑块的位置
|
||||
moveClientY = e.clientY - data.translateY;
|
||||
moveTo(); //移动时
|
||||
moveEnd(); //鼠标松开时
|
||||
};
|
||||
|
||||
// 鼠标移动，改变thumb的位置以及容器scrollTop的位置
|
||||
const moveTo = function () {
|
||||
document.onmousemove = (e) => {
|
||||
// 移动时候判断是不是松开，松开就不在执行滑块移动操作
|
||||
if (isMove) {
|
||||
// 移动滑块时，判断时候到达顶部或者底部
|
||||
if (e.clientY - moveClientY > trackHeight - data.barHeight) {
|
||||
// 滑块到达 底部 就不在改变滑块translateY值
|
||||
data.translateY = trackHeight - data.barHeight;
|
||||
} else if (e.clientY - moveClientY < 0) {
|
||||
// 滑块到达 顶部 就不在改变滑块translateY值
|
||||
data.translateY = 0;
|
||||
} else {
|
||||
//改变滑块位置
|
||||
data.translateY = e.clientY - moveClientY;
|
||||
}
|
||||
// 计算出内容盒子滚出顶部的距离
|
||||
scrollRef.value.scrollTop = data.translateY / data.heightPre;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// 鼠标从滑块松开时，不在监听滑块移动操作
|
||||
const moveEnd = function () {
|
||||
document.onmouseup = (e) => {
|
||||
if (isMove) {
|
||||
isMove = false;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
let dataRef = toRefs(data);
|
||||
</script>
|
||||
|
||||
@ -1,3 +1,9 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "StandardVue",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Ref, ref } from "vue";
|
||||
import { on, off } from "evtd";
|
||||
@ -11,6 +17,7 @@ interface Prop {
|
||||
min?: number;
|
||||
max?: number;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Prop>(), {
|
||||
disabled: false,
|
||||
val: 0,
|
||||
|
||||
@ -1,8 +1,15 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "StandardRange",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, toRef, Ref } from "vue";
|
||||
import { on, off } from "evtd";
|
||||
import { throttle } from "./utils/index";
|
||||
import LayTooltip from "../tooltip/index.vue";
|
||||
|
||||
interface Prop {
|
||||
rangeValue: Array<number>;
|
||||
disabled?: boolean;
|
||||
@ -17,6 +24,7 @@ const props = withDefaults(defineProps<Prop>(), {
|
||||
max: 100,
|
||||
disabled: false,
|
||||
});
|
||||
|
||||
let rv = toRef(props, "rangeValue");
|
||||
|
||||
const moveAction = throttle(rangeMove);
|
||||
|
||||
@ -1,3 +1,9 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "Vertical",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Ref, ref } from "vue";
|
||||
import { on, off } from "evtd";
|
||||
@ -11,6 +17,7 @@ interface Prop {
|
||||
min?: number;
|
||||
max?: number;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Prop>(), {
|
||||
disabled: true,
|
||||
val: 0,
|
||||
|
||||
@ -1,8 +1,15 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "VerticalRange",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, toRef, Ref } from "vue";
|
||||
import { on, off } from "evtd";
|
||||
import { throttle } from "./utils/index";
|
||||
import LayTooltip from "../tooltip/index.vue";
|
||||
|
||||
interface Prop {
|
||||
rangeValue: Array<number>;
|
||||
disabled?: boolean;
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
.layui-slider-btn-v {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: var(--global-back-color);
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
border: 2px solid var(--global-primary-color);
|
||||
border-radius: 50%;
|
||||
@ -73,7 +73,7 @@
|
||||
.layui-slider-vertical-btn {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: var(--global-back-color);
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
border: 2px solid var(--global-primary-color);
|
||||
border-radius: 50%;
|
||||
|
||||
@ -1,6 +1,12 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LaySlider",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Ref, toRef } from "vue";
|
||||
import "./index.less";
|
||||
import { Ref, toRef } from "vue";
|
||||
import StandardVue from "./Standard.vue";
|
||||
import StandardRange from "./StandardRange.vue";
|
||||
import Vertical from "./Vertical.vue";
|
||||
|
||||
@ -1,168 +0,0 @@
|
||||
<template>
|
||||
<div id="sliderVerify" class="slider-item">
|
||||
<div class="slider-bg layui-bg-green"></div>
|
||||
<div class="slider-text">
|
||||
{{ prototype.isOk == false ? prototype.text : prototype.success }}
|
||||
</div>
|
||||
<div
|
||||
:class="
|
||||
prototype.isOk == false
|
||||
? 'slider-btn layui-icon layui-icon-next'
|
||||
: 'slider-btn layui-icon layui-icon-ok-circle slider-btn-success'
|
||||
"
|
||||
@mousedown.stop="down"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, defineProps } from "vue";
|
||||
import { on, off } from "evtd";
|
||||
import { throttle, handle_select } from "./utils/index";
|
||||
interface Prop {
|
||||
disabled?: boolean;
|
||||
bg?: string;
|
||||
text?: string;
|
||||
end?: string;
|
||||
success?: Function;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Prop>(), {
|
||||
disabled: false,
|
||||
});
|
||||
|
||||
//默认配置
|
||||
const prototype = reactive({
|
||||
isOk: false,
|
||||
bg: props.bg, //默认滑块颜色
|
||||
text: props.text ? props.text : "请拖动滑块验证",
|
||||
success: props.end ? props.end : "验证通过",
|
||||
ok: props.success,
|
||||
});
|
||||
|
||||
//是否为移动端
|
||||
/* prototype.isMobile = function () {
|
||||
return (
|
||||
device.os == "ios" ||
|
||||
device.os == "android" ||
|
||||
device.android ||
|
||||
device.ios ||
|
||||
(device.weixin && typeof device.weixin === Boolean)
|
||||
);
|
||||
}; */
|
||||
|
||||
const moveAction = throttle(move);
|
||||
let distance;
|
||||
let downX;
|
||||
|
||||
//按下
|
||||
const down = function (e) {
|
||||
e = e || window.event;
|
||||
console.log(e.path);
|
||||
distance = e.path[1].offsetWidth - e.path[0].offsetWidth;
|
||||
//按下的坐标
|
||||
downX = e.clientX;
|
||||
on("selectstart", window, handle_select, { once: true });
|
||||
on("mouseup", window, stop);
|
||||
on("mousemove", window, moveAction);
|
||||
};
|
||||
|
||||
//移动
|
||||
function move(e) {
|
||||
e = e || window.event;
|
||||
let moveX = e.clientX;
|
||||
//鼠标水平位置的偏移量（鼠标移动时的位置 - 鼠标按下时的位置）
|
||||
let offsetX = moveX - downX;
|
||||
if (offsetX > 0) {
|
||||
e.path[0].style.left = offsetX + "px";
|
||||
e.path[1].childNodes[0].style.width = offsetX + "px";
|
||||
//鼠标的水平移动距离 >= 滑动成功的宽度
|
||||
if (offsetX >= distance) {
|
||||
prototype.isOk = true;
|
||||
//成功后，清除掉鼠标按下事件和移动事件（因为移动时并不会涉及到鼠标松开事件）
|
||||
off("mousedown", window, down);
|
||||
off("mousemove", window, moveAction);
|
||||
//最后调用回调
|
||||
if (prototype.ok) prototype.ok();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//放开
|
||||
const stop = function (e) {
|
||||
//鼠标松开，如果滑到了终点，则验证通过
|
||||
if (prototype.isOk === true) {
|
||||
return;
|
||||
} else {
|
||||
e.path[0].style.left = 0;
|
||||
e.path[1].childNodes[0].style.width = 0;
|
||||
}
|
||||
|
||||
//鼠标松开了，不需要拖动就清除鼠标移动和松开事件。
|
||||
off("selectstart", document, handle_select);
|
||||
off("mouseup", window, stop);
|
||||
off("mousemove", window, moveAction);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.slider-item {
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
background-color: #d0d0d0;
|
||||
position: relative;
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
.slider-bg {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.slider-btn {
|
||||
width: 40px;
|
||||
height: 96%;
|
||||
position: absolute;
|
||||
border: 1px solid #ccc;
|
||||
cursor: move;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
user-select: none;
|
||||
color: #666;
|
||||
z-index: 120;
|
||||
}
|
||||
|
||||
.slider-btn:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.slider-btn-success {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.slider-text {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
z-index: 120;
|
||||
}
|
||||
|
||||
.slider-error {
|
||||
animation: glow 800ms ease-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
0% {
|
||||
border-color: #e6e6e6;
|
||||
}
|
||||
|
||||
100% {
|
||||
border-color: #ff5722;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -270,12 +270,12 @@ onMounted(() => {
|
||||
</th>
|
||||
<template v-for="column in columns" :key="column">
|
||||
<th
|
||||
v-if="tableColumnKeys.includes(column.key)"
|
||||
class="layui-table-cell"
|
||||
:style="{
|
||||
textAlign: column.align,
|
||||
flex: column.width ? '0 0 ' + column.width : '1',
|
||||
}"
|
||||
v-if="tableColumnKeys.includes(column.key)"
|
||||
>
|
||||
<span>
|
||||
<template v-if="column.titleSlot">
|
||||
@ -285,10 +285,11 @@ onMounted(() => {
|
||||
{{ column.title }}
|
||||
</template>
|
||||
</span>
|
||||
<!-- 插槽 -->
|
||||
<span
|
||||
v-if="column.sort"
|
||||
class="layui-table-sort layui-inline"
|
||||
lay-sort=""
|
||||
lay-sort
|
||||
>
|
||||
<i
|
||||
@click.stop="sortTable($event, column.key, 'asc')"
|
||||
|
||||
@ -116,6 +116,11 @@ a:hover {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
a cite {
|
||||
font-style: normal;
|
||||
*cursor: pointer;
|
||||
}
|
||||
|
||||
.layui-border-box,
|
||||
.layui-border-box * {
|
||||
box-sizing: border-box;
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<lay-icon :type="iconType" size="40"> </lay-icon>
|
||||
</lay-button>
|
||||
</div>
|
||||
<lay-scroll :scrollWidth="0">
|
||||
<lay-scroll :thumbWidth="0">
|
||||
<ul>
|
||||
<li
|
||||
v-for="(anchor, index) in anchorList"
|
||||
|
||||
@ -40,9 +40,9 @@ export default {
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ----------- | -------- | ------ |
|
||||
| height | 高度 | -- |
|
||||
| scrollWidth | 滑块宽度 | -- |
|
||||
| scrollColor | 滑块颜色 | -- |
|
||||
| slotColor | 滑槽颜色 | -- |
|
||||
| thumbWidth | 滑块宽度 | -- |
|
||||
| thumbColor | 滑块颜色 | -- |
|
||||
| trackColor | 滑槽颜色 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
@ -167,7 +167,6 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: title 开启排序
|
||||
:::
|
||||
|
||||
@ -311,15 +310,15 @@ export default {
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| -------------------- | ----------------------------- | ---- | ------ | -------------- |
|
||||
| columns | 列配置 - [更多](#tableColumn) | -- | -- | -- |
|
||||
| dataSource | 数据源 | -- | -- | -- |
|
||||
| checkbox | 开启复选框 | `boolean` | `false` | `true` `false` |
|
||||
| id | 主键 | `string` | -- | -- |
|
||||
| v-model:selectedKeys | 选中项 | -- | -- | -- |
|
||||
| default-toolbar | 工具栏 | `boolean` | `false` | `true` `false` |
|
||||
| size | 尺寸 | `string` | `md` | `lg` `md` `sm` |
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| -------------------- | ----------------------------- | --------- | ------- | -------------- |
|
||||
| columns | 列配置 - [更多](#tableColumn) | -- | -- | -- |
|
||||
| dataSource | 数据源 | -- | -- | -- |
|
||||
| checkbox | 开启复选框 | `boolean` | `false` | `true` `false` |
|
||||
| id | 主键 | `string` | -- | -- |
|
||||
| v-model:selectedKeys | 选中项 | -- | -- | -- |
|
||||
| default-toolbar | 工具栏 | `boolean` | `false` | `true` `false` |
|
||||
| size | 尺寸 | `string` | `md` | `lg` `md` `sm` |
|
||||
|
||||
:::
|
||||
|
||||
@ -353,18 +352,17 @@ export default {
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| ---------- | ---------- | ---- |---- |---- |
|
||||
| title | 列标题 | -- |-- |-- |
|
||||
| key | 数据字段 | -- |-- |-- |
|
||||
| customSlot | 自定义插槽 | -- |-- |-- |
|
||||
| width | 宽度 | -- |-- |-- |
|
||||
| sort | 排序 | -- |-- |-- |
|
||||
| titleSlot | 标题插槽 | -- |-- |-- |
|
||||
| align | 对齐方式 | `string` | `left` | `left` `right` `center` |
|
||||
| 插槽 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| ---------- | ---------- | -------- | ------ | ----------------------- |
|
||||
| title | 列标题 | -- | -- | -- |
|
||||
| key | 数据字段 | -- | -- | -- |
|
||||
| customSlot | 自定义插槽 | -- | -- | -- |
|
||||
| width | 宽度 | -- | -- | -- |
|
||||
| sort | 排序 | -- | -- | -- |
|
||||
| titleSlot | 标题插槽 | -- | -- | -- |
|
||||
| align | 对齐方式 | `string` | `left` | `left` `right` `center` |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
::: previousNext table
|
||||
:::
|
||||
:::
|
||||
|
||||
@ -12,7 +12,38 @@
|
||||
<lay-timeline>
|
||||
<lay-timeline-item title="1.0.x">
|
||||
<ul>
|
||||
<a name="1-0-4"> </a>
|
||||
<a name="1-0-6"></a>
|
||||
<li>
|
||||
<h3>1.0.6 <span class="layui-badge-rim">2022-05-02</span></h3>
|
||||
<ul>
|
||||
<li>[修复] scroll 组件 height 属性必填警告。</li>
|
||||
<li>[修复] scroll 组件 slotColor 属性必填警告。</li>
|
||||
<li>[修复] scroll 组件 scrollColor 属性必填警告。</li>
|
||||
<li>[修复] scroll 组件 scrollWidth 属性必填警告。</li>
|
||||
<li>[修正] scroll 组件 slotColor 属性为 thackColor。</li>
|
||||
<li>[修正] scroll 组件 scrollColor 属性为 thumbColor。</li>
|
||||
<li>[修正] scroll 组件 scrollWidth 属性为 thumbWidth。</li>
|
||||
<li>[升级] vueuse/core 8.3.1。</li>
|
||||
<li>[升级] vue-i18n 9.1.9。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="1-0-5"></a>
|
||||
<li>
|
||||
<h3>1.0.5 <span class="layui-badge-rim">2022-05-01</span></h3>
|
||||
<ul>
|
||||
<li>[新增] dropdown 组件 context-menu 属性。</li>
|
||||
<li>[修复] layer 组件 tooltip 组件 index 层级冲突。</li>
|
||||
<li>[修复] table 组件 columns 宽度超出 table-box 错位。</li>
|
||||
<li>[修复] table 组件 selected-keys 属性 deep 监听。</li>
|
||||
<li>[修复] slider 组件 btn 背景色。</li>
|
||||
<li>[修复] upload 组件 url 失效。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="1-0-4"></a>
|
||||
<li>
|
||||
<h3>1.0.4 <span class="layui-badge-rim">2022-04-21</span></h3>
|
||||
<ul>
|
||||
@ -33,7 +64,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="1-0-3"> </a>
|
||||
<a name="1-0-3"></a>
|
||||
<li>
|
||||
<h3>1.0.3 <span class="layui-badge-rim">2022-04-17</span></h3>
|
||||
<ul>
|
||||
@ -69,7 +100,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="1-0-1"> </a>
|
||||
<a name="1-0-1"></a>
|
||||
<li>
|
||||
<h3>1.0.1 <span class="layui-badge-rim">2022-04-06</span></h3>
|
||||
<ul>
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
rel="nofollow"
|
||||
class="site-star"
|
||||
>
|
||||
<i class="layui-icon"></i> Star <cite id="getStars">746</cite>
|
||||
<i class="layui-icon"></i> Star <cite id="getStars">863</cite>
|
||||
</a>
|
||||
<a
|
||||
href="https://gitee.com/layui-vue"
|
||||
|
||||
113
pnpm-lock.yaml
generated
113
pnpm-lock.yaml
generated
@ -55,7 +55,7 @@ importers:
|
||||
'@vitejs/plugin-vue': ^2.3.1
|
||||
'@vue/compiler-sfc': ^3.2.33
|
||||
'@vue/server-renderer': ^3.2.33
|
||||
'@vueuse/core': ^8.3.0
|
||||
'@vueuse/core': ^8.3.1
|
||||
animate.css: ^4.1.1
|
||||
async-validator: ^4.0.7
|
||||
cropperjs: ^1.5.12
|
||||
@ -68,11 +68,11 @@ importers:
|
||||
typescript: ^4.6.3
|
||||
uuid: ^8.3.2
|
||||
vite: 2.9.2
|
||||
vue-i18n: ^9.2.0-beta.34
|
||||
vue-i18n: ^9.1.9
|
||||
dependencies:
|
||||
'@layui/icons-vue': link:../icons
|
||||
'@layui/layer-vue': link:../layer
|
||||
'@vueuse/core': 8.3.0_vue@3.2.33
|
||||
'@vueuse/core': 8.3.1_vue@3.2.33
|
||||
animate.css: 4.1.1
|
||||
async-validator: 4.0.7
|
||||
cropperjs: 1.5.12
|
||||
@ -80,7 +80,7 @@ importers:
|
||||
dayjs: 1.11.0
|
||||
evtd: 0.2.3
|
||||
uuid: 8.3.2
|
||||
vue-i18n: 9.2.0-beta.34_vue@3.2.33
|
||||
vue-i18n: 9.1.9_vue@3.2.33
|
||||
devDependencies:
|
||||
'@babel/core': 7.17.9
|
||||
'@babel/preset-env': 7.16.11_@babel+core@7.17.9
|
||||
@ -2554,6 +2554,18 @@ packages:
|
||||
resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
|
||||
dev: true
|
||||
|
||||
/@intlify/core-base/9.1.9:
|
||||
resolution: {integrity: sha512-x5T0p/Ja0S8hs5xs+ImKyYckVkL4CzcEXykVYYV6rcbXxJTe2o58IquSqX9bdncVKbRZP7GlBU1EcRaQEEJ+vw==}
|
||||
engines: {node: '>= 10'}
|
||||
dependencies:
|
||||
'@intlify/devtools-if': 9.1.9
|
||||
'@intlify/message-compiler': 9.1.9
|
||||
'@intlify/message-resolver': 9.1.9
|
||||
'@intlify/runtime': 9.1.9
|
||||
'@intlify/shared': 9.1.9
|
||||
'@intlify/vue-devtools': 9.1.9
|
||||
dev: false
|
||||
|
||||
/@intlify/core-base/9.2.0-beta.34:
|
||||
resolution: {integrity: sha512-MwWvL7GMpFeYBfFOU2fDj8V+kodtoGv3ZjK0qxnQtJ6oWtmv2ldqRuIu1NxPSmykYYg4iljrG174EzZnQkIcqA==}
|
||||
engines: {node: '>= 12'}
|
||||
@ -2564,6 +2576,13 @@ packages:
|
||||
'@intlify/vue-devtools': 9.2.0-beta.34
|
||||
dev: false
|
||||
|
||||
/@intlify/devtools-if/9.1.9:
|
||||
resolution: {integrity: sha512-oKSMKjttG3Ut/1UGEZjSdghuP3fwA15zpDPcjkf/1FjlOIm6uIBGMNS5jXzsZy593u+P/YcnrZD6cD3IVFz9vQ==}
|
||||
engines: {node: '>= 10'}
|
||||
dependencies:
|
||||
'@intlify/shared': 9.1.9
|
||||
dev: false
|
||||
|
||||
/@intlify/devtools-if/9.2.0-beta.34:
|
||||
resolution: {integrity: sha512-Q/MNzslMLKpVygLJDE2poOwzQFed3KTpAn6hPsN10pgBPNHwJGVi6LgBYsO/6TVszN0w4GA1cv+6nT3iIyW7+A==}
|
||||
engines: {node: '>= 12'}
|
||||
@ -2571,6 +2590,15 @@ packages:
|
||||
'@intlify/shared': 9.2.0-beta.34
|
||||
dev: false
|
||||
|
||||
/@intlify/message-compiler/9.1.9:
|
||||
resolution: {integrity: sha512-6YgCMF46Xd0IH2hMRLCssZI3gFG4aywidoWQ3QP4RGYQXQYYfFC54DxhSgfIPpVoPLQ+4AD29eoYmhiHZ+qLFQ==}
|
||||
engines: {node: '>= 10'}
|
||||
dependencies:
|
||||
'@intlify/message-resolver': 9.1.9
|
||||
'@intlify/shared': 9.1.9
|
||||
source-map: 0.6.1
|
||||
dev: false
|
||||
|
||||
/@intlify/message-compiler/9.2.0-beta.34:
|
||||
resolution: {integrity: sha512-l7JjkXJBW2l6cFZqPvI6oWU6QZn/i70agU6QB02W1O+6quFCFNpsiPswgYyQrmfHt4F4qYhLJUMZltIW/cqcbw==}
|
||||
engines: {node: '>= 12'}
|
||||
@ -2579,11 +2607,39 @@ packages:
|
||||
source-map: 0.6.1
|
||||
dev: false
|
||||
|
||||
/@intlify/message-resolver/9.1.9:
|
||||
resolution: {integrity: sha512-Lx/DBpigeK0sz2BBbzv5mu9/dAlt98HxwbG7xLawC3O2xMF9MNWU5FtOziwYG6TDIjNq0O/3ZbOJAxwITIWXEA==}
|
||||
engines: {node: '>= 10'}
|
||||
dev: false
|
||||
|
||||
/@intlify/runtime/9.1.9:
|
||||
resolution: {integrity: sha512-XgPw8+UlHCiie3fI41HPVa/VDJb3/aSH7bLhY1hJvlvNV713PFtb4p4Jo+rlE0gAoMsMCGcsiT982fImolSltg==}
|
||||
engines: {node: '>= 10'}
|
||||
dependencies:
|
||||
'@intlify/message-compiler': 9.1.9
|
||||
'@intlify/message-resolver': 9.1.9
|
||||
'@intlify/shared': 9.1.9
|
||||
dev: false
|
||||
|
||||
/@intlify/shared/9.1.9:
|
||||
resolution: {integrity: sha512-xKGM1d0EAxdDFCWedcYXOm6V5Pfw/TMudd6/qCdEb4tv0hk9EKeg7lwQF1azE0dP2phvx0yXxrt7UQK+IZjNdw==}
|
||||
engines: {node: '>= 10'}
|
||||
dev: false
|
||||
|
||||
/@intlify/shared/9.2.0-beta.34:
|
||||
resolution: {integrity: sha512-hbUKcVbTOkLVpnlSeZE1OPgEI7FpvhuZF/gb84xECTjXEImIa3u0fIcJKUUffv3dlAx8fMOE5xKgDzngidm0tw==}
|
||||
engines: {node: '>= 12'}
|
||||
dev: false
|
||||
|
||||
/@intlify/vue-devtools/9.1.9:
|
||||
resolution: {integrity: sha512-YPehH9uL4vZcGXky4Ev5qQIITnHKIvsD2GKGXgqf+05osMUI6WSEQHaN9USRa318Rs8RyyPCiDfmA0hRu3k7og==}
|
||||
engines: {node: '>= 10'}
|
||||
dependencies:
|
||||
'@intlify/message-resolver': 9.1.9
|
||||
'@intlify/runtime': 9.1.9
|
||||
'@intlify/shared': 9.1.9
|
||||
dev: false
|
||||
|
||||
/@intlify/vue-devtools/9.2.0-beta.34:
|
||||
resolution: {integrity: sha512-0fEUqxZ2XibWNpWr1OTQrz0hBgqiWdXOvg5D6NjYBYIrSlJ13cPFfkfPBlnKUkrfBdw7RG6l+SlcUwIPj0ViGA==}
|
||||
engines: {node: '>= 12'}
|
||||
@ -2991,10 +3047,31 @@ packages:
|
||||
vue-demi: 0.12.5_vue@3.2.33
|
||||
dev: false
|
||||
|
||||
/@vueuse/core/8.3.1_vue@3.2.33:
|
||||
resolution: {integrity: sha512-WiXUgVyPG9elGx3G8UV8g+zqbEJ2hYacrPICogAxDdW6hnxxcUFdF7FtvDroJ/DxWmo2pg8XNNz07ybfnZyJbw==}
|
||||
peerDependencies:
|
||||
'@vue/composition-api': ^1.1.0
|
||||
vue: ^2.6.0 || ^3.2.0
|
||||
peerDependenciesMeta:
|
||||
'@vue/composition-api':
|
||||
optional: true
|
||||
vue:
|
||||
optional: true
|
||||
dependencies:
|
||||
'@vueuse/metadata': 8.3.1
|
||||
'@vueuse/shared': 8.3.1_vue@3.2.33
|
||||
vue: 3.2.33
|
||||
vue-demi: 0.12.5_vue@3.2.33
|
||||
dev: false
|
||||
|
||||
/@vueuse/metadata/8.3.0:
|
||||
resolution: {integrity: sha512-7R/LNPQWp1r/owa2e71l3dFlJ21p89YE3ks14ZclP2VOTvhC6AzDRcpk+ChISNetv8spsFbWZj/Z7sFjbFZfuw==}
|
||||
dev: false
|
||||
|
||||
/@vueuse/metadata/8.3.1:
|
||||
resolution: {integrity: sha512-1aZaFL44HzXXkfN6Q7KMDOXBFKTHDClHlOJBxtN8rTBXIIScoGOrJCpxWiQ4kuVg95MzG/pHrd3P4wd8poL9XQ==}
|
||||
dev: false
|
||||
|
||||
/@vueuse/shared/8.3.0_vue@3.2.33:
|
||||
resolution: {integrity: sha512-xehtLfevPw9nsVIGFe/tWMtFvbvZjeAfXh7DT9Fptt/6/C5rLwpJtxsVguIBtPybjwobO4KCpQYS78aa9fg5Sw==}
|
||||
peerDependencies:
|
||||
@ -3010,6 +3087,21 @@ packages:
|
||||
vue-demi: 0.12.5_vue@3.2.33
|
||||
dev: false
|
||||
|
||||
/@vueuse/shared/8.3.1_vue@3.2.33:
|
||||
resolution: {integrity: sha512-7HKLCcxp4dtONq6QSSoavblo9riYgqzw7jhqiC0/VUYMXKzqj1G/GznOzTmY8Wi8uKKT197JqjKQ1DKt2j/0+A==}
|
||||
peerDependencies:
|
||||
'@vue/composition-api': ^1.1.0
|
||||
vue: ^2.6.0 || ^3.2.0
|
||||
peerDependenciesMeta:
|
||||
'@vue/composition-api':
|
||||
optional: true
|
||||
vue:
|
||||
optional: true
|
||||
dependencies:
|
||||
vue: 3.2.33
|
||||
vue-demi: 0.12.5_vue@3.2.33
|
||||
dev: false
|
||||
|
||||
/JSONStream/1.3.5:
|
||||
resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
|
||||
hasBin: true
|
||||
@ -5838,6 +5930,19 @@ packages:
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/vue-i18n/9.1.9_vue@3.2.33:
|
||||
resolution: {integrity: sha512-JeRdNVxS2OGp1E+pye5XB6+M6BBkHwAv9C80Q7+kzoMdUDGRna06tjC0vCB/jDX9aWrl5swxOMFcyAr7or8XTA==}
|
||||
engines: {node: '>= 10'}
|
||||
peerDependencies:
|
||||
vue: ^3.0.0
|
||||
dependencies:
|
||||
'@intlify/core-base': 9.1.9
|
||||
'@intlify/shared': 9.1.9
|
||||
'@intlify/vue-devtools': 9.1.9
|
||||
'@vue/devtools-api': 6.1.4
|
||||
vue: 3.2.33
|
||||
dev: false
|
||||
|
||||
/vue-i18n/9.2.0-beta.34_vue@3.2.33:
|
||||
resolution: {integrity: sha512-AKzOMn91OKBKHTPVWrDF+kBSbYYNGfBeeBhuihkxW2ZTXd1l8vp7WBqA6weV9kb9EDv7HO61Qhctqcr79TmHVw==}
|
||||
engines: {node: '>= 12'}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user