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

Merge branch 'next' into doc-demand

Browse Source
This commit is contained in:
就眠儀式
2022-05-03 17:41:27 +08:00
parent 9803b09ee6 9431b27389
commit ed0b508a0f
19 changed files with 511 additions and 442 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
package/component/package.json
View File

@@ -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",

30
package/component/src/component/scroll/index.less
View File

@@ -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;
}
}

417
package/component/src/component/scroll/index.vue
View File

@@ -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>

7
package/component/src/component/slider/Standard.vue
View File

@@ -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,

8
package/component/src/component/slider/StandardRange.vue
View File

@@ -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);

7
package/component/src/component/slider/Vertical.vue
View File

@@ -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,

7
package/component/src/component/slider/VerticalRange.vue
View File

@@ -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;

4
package/component/src/component/slider/index.less
View File

@@ -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%;

8
package/component/src/component/slider/index.vue
View File

@@ -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";

168
package/component/src/component/slider/sliderVerify.vue
View File

@@ -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>

5
package/component/src/component/table/index.vue
View File

@@ -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')"

5
package/component/src/theme/public.less
View File

@@ -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;

2
package/document/src/components/LayAnchor.vue
View File

@@ -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"

6
package/document/src/document/zh-CN/components/scroll.md
View File

@@ -40,9 +40,9 @@ export default {
| 属性 | 描述 | 可选值 |
| ----------- | -------- | ------ |
| height | 高度 | -- |
| scrollWidth | 滑块宽度 | -- |
| scrollColor | 滑块颜色 | -- |
| slotColor | 滑槽颜色 | -- |
| thumbWidth | 滑块宽度 | -- |
| thumbColor | 滑块颜色 | -- |
| trackColor | 滑槽颜色 | -- |
:::

42
package/document/src/document/zh-CN/components/table.md
View File

@@ -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
:::
:::

37
package/document/src/document/zh-CN/guide/changelog.md
View File

@@ -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>

2
package/document/src/view/index.vue
View File

@@ -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"