✨(component): release 1.4.3
This commit is contained in:
就眠儀式
parent
0bb87c9c2e
commit
600bf608ba
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@layui/layui-vue",
|
||||
"version": "1.4.2",
|
||||
"version": "1.4.3",
|
||||
"author": "就眠儀式",
|
||||
"license": "MIT",
|
||||
"description": "a component library for Vue 3 base on layui-vue",
|
||||
|
||||
@ -46,24 +46,16 @@ const limits = ref(props.limits);
|
||||
const pages = Math.floor(props.pages / 2);
|
||||
const currentPage: Ref<number> = ref(props.modelValue);
|
||||
const currentPageShow: Ref<number> = ref(currentPage.value);
|
||||
const inlimit = computed({
|
||||
get() {
|
||||
return props.limit;
|
||||
},
|
||||
set(v: number) {
|
||||
emit("limit", v);
|
||||
},
|
||||
});
|
||||
const inlimit = ref(props.limit);
|
||||
|
||||
watch(() => props.limit, () => {
|
||||
inlimit.value = props.limit;
|
||||
})
|
||||
|
||||
const totalPage = computed(() => {
|
||||
maxPage.value = Math.ceil(props.total / props.limit);
|
||||
let r: number[] = [],
|
||||
start =
|
||||
maxPage.value <= props.pages
|
||||
? 1
|
||||
: currentPage.value > pages
|
||||
? currentPage.value - pages
|
||||
: 1;
|
||||
maxPage.value = Math.ceil(props.total / inlimit.value);
|
||||
let r: number[] = [];
|
||||
let start = maxPage.value <= props.pages ? 1 : currentPage.value > pages ? currentPage.value - pages : 1;
|
||||
for (let i = start; ; i++) {
|
||||
if (r.length >= props.pages || i > maxPage.value) {
|
||||
break;
|
||||
@ -73,43 +65,53 @@ const totalPage = computed(() => {
|
||||
return r;
|
||||
});
|
||||
|
||||
const emit = defineEmits(["jump", "limit", "update:modelValue"]);
|
||||
const emit = defineEmits(["update:modelValue", "update:limit", "change"]);
|
||||
|
||||
const prev = function () {
|
||||
const prev = () => {
|
||||
if (currentPage.value === 1) {
|
||||
return;
|
||||
}
|
||||
currentPage.value--;
|
||||
emit("change", { current: currentPage.value, limit: inlimit.value });
|
||||
};
|
||||
|
||||
const next = function () {
|
||||
const next = () => {
|
||||
if (currentPage.value === maxPage.value) {
|
||||
return;
|
||||
}
|
||||
currentPage.value++;
|
||||
emit("change", { current: currentPage.value, limit: inlimit.value });
|
||||
};
|
||||
|
||||
const jump = function (page: number) {
|
||||
const jump = (page: number) => {
|
||||
currentPage.value = page;
|
||||
emit("change", { current: currentPage.value, limit: inlimit.value });
|
||||
};
|
||||
|
||||
const jumpPage = function () {
|
||||
const jumpPage = () => {
|
||||
currentPage.value = currentPageShow.value;
|
||||
emit("change", { current: currentPage.value, limit: inlimit.value });
|
||||
};
|
||||
|
||||
watch(inlimit, function () {
|
||||
const changelimit = () => {
|
||||
currentPage.value = 1;
|
||||
});
|
||||
emit("change", { current: currentPage.value, limit: inlimit.value });
|
||||
}
|
||||
|
||||
watch(currentPage, function () {
|
||||
if (currentPage.value > totalPage.value[totalPage.value.length - 1]) {
|
||||
currentPage.value = totalPage.value[totalPage.value.length - 1];
|
||||
}
|
||||
if (currentPage.value < totalPage.value[0]) {
|
||||
currentPage.value = totalPage.value[0];
|
||||
}
|
||||
const refresh = () => {
|
||||
emit("change", { current: currentPage.value, limit: inlimit.value });
|
||||
}
|
||||
|
||||
watch(inlimit, () => {
|
||||
emit("update:limit", inlimit.value);
|
||||
})
|
||||
|
||||
watch(currentPage, () => {
|
||||
const min = totalPage.value[0];
|
||||
const max = totalPage.value[totalPage.value.length - 1];
|
||||
if (currentPage.value > max) currentPage.value = max;
|
||||
if (currentPage.value < min) currentPage.value = min;
|
||||
currentPageShow.value = currentPage.value;
|
||||
emit("jump", { current: currentPage.value });
|
||||
emit("update:modelValue", currentPage.value);
|
||||
});
|
||||
|
||||
@ -157,7 +159,6 @@ watch(
|
||||
>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<a
|
||||
href="javascript:;"
|
||||
class="layui-laypage-next"
|
||||
@ -171,13 +172,13 @@ watch(
|
||||
<template v-else>{{ t("page.next") }}</template>
|
||||
</a>
|
||||
<span v-if="showLimit" class="layui-laypage-limits">
|
||||
<select v-model="inlimit">
|
||||
<select v-model="inlimit" @change="changelimit">
|
||||
<option v-for="val of limits" :key="val" :value="val">
|
||||
{{ val }} 条/页
|
||||
</option>
|
||||
</select>
|
||||
</span>
|
||||
<a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh">
|
||||
<a v-if="showRefresh" href="javascript:;" @click="refresh" class="layui-laypage-refresh">
|
||||
<i class="layui-icon layui-icon-refresh"></i>
|
||||
</a>
|
||||
<span v-if="props.showSkip" class="layui-laypage-skip">
|
||||
@ -192,7 +193,7 @@ watch(
|
||||
type="button"
|
||||
class="layui-laypage-btn"
|
||||
@click="jumpPage()"
|
||||
:disabled="currentPageShow > maxPage"
|
||||
:disabled="currentPageShow > maxPage || currentPageShow == currentPage"
|
||||
>
|
||||
确定
|
||||
</button>
|
||||
|
||||
@ -859,13 +859,13 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
<div v-if="page" class="layui-table-page">
|
||||
<lay-page
|
||||
show-page
|
||||
show-skip
|
||||
show-limit
|
||||
:show-page="true"
|
||||
:show-skip="true"
|
||||
:show-limit="true"
|
||||
:total="page.total"
|
||||
:limit="page.limit"
|
||||
v-model="page.current"
|
||||
@jump="change"
|
||||
v-model:limit="page.limit"
|
||||
v-model:modelValue="page.current"
|
||||
@change="change"
|
||||
>
|
||||
<template #prev>
|
||||
<lay-icon type="layui-icon-left" />
|
||||
|
||||
@ -216,12 +216,13 @@ export default {
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 可选值 |
|
||||
| ------- | -------- | ------ |
|
||||
| default | 默认插槽 | -- |
|
||||
| header | 头部插槽 | -- |
|
||||
| body | 内容插槽 | -- |
|
||||
| extra | 扩展插槽 | -- |
|
||||
| 插槽 | 描述 | 可选值 | 版本 |
|
||||
| ------- | -------- | ------ |------ |
|
||||
| default | 默认插槽 | -- |-- |
|
||||
| header | 头部插槽 | -- |-- |
|
||||
| body | 内容插槽 | -- |-- |
|
||||
| extra | 扩展插槽 | -- |-- |
|
||||
| footer | 扩展插槽 | -- |`1.4.3` |
|
||||
:::
|
||||
|
||||
::: contributor card
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
::: demo 使用 `lay-page` 标签, 创建分页
|
||||
|
||||
<template>
|
||||
<lay-page v-model="currentPage" :limit="limit" @limit="limit = $event" :total="total" :show-page="showPage"></lay-page>
|
||||
<lay-page v-model="currentPage" :limit="limit" :total="total" :show-page="true"></lay-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -24,13 +24,11 @@ export default {
|
||||
|
||||
const limit = ref(20)
|
||||
const total = ref(100)
|
||||
const showPage = ref(true)
|
||||
const currentPage = ref(2);
|
||||
|
||||
return {
|
||||
limit,
|
||||
total,
|
||||
showPage,
|
||||
currentPage
|
||||
}
|
||||
}
|
||||
@ -39,13 +37,13 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 简单模式
|
||||
::: title 简洁模式
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-page :limit="limit" @limit="limit = $event" :total="total"></lay-page>
|
||||
<lay-page :limit="limit1" v-model="current1" :total="total1"></lay-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -54,12 +52,14 @@ import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const limit = ref(20)
|
||||
const total = ref(100)
|
||||
const limit1 = ref(10);
|
||||
const total1 = ref(100);
|
||||
const current1 = ref(1);
|
||||
|
||||
return {
|
||||
limit,
|
||||
total
|
||||
limit1,
|
||||
total1,
|
||||
current1
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -67,16 +67,13 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 插槽使用
|
||||
::: title 设置主题
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-page :limit="limit" @limit="limit = $event" :total="total">
|
||||
<template v-slot:prev>上</template>
|
||||
<template v-slot:next>下</template>
|
||||
</lay-page>
|
||||
<lay-page :limit="limit2" :total="total2" :show-page="true" theme="blue"></lay-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -85,12 +82,12 @@ import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const limit = ref(20)
|
||||
const total = ref(100)
|
||||
const limit2 = ref(20)
|
||||
const total2 = ref(100)
|
||||
|
||||
return {
|
||||
limit,
|
||||
total
|
||||
limit2,
|
||||
total2,
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -98,17 +95,13 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 不同主题
|
||||
::: title 分页容量
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-page :limit="limit" @limit="limit = $event" :total="total" :show-page="showPage" theme="red"></lay-page>
|
||||
<br>
|
||||
<lay-page :limit="limit" @limit="limit = $event" :total="total" :show-page="showPage" theme="blue"></lay-page>
|
||||
<br>
|
||||
<lay-page :limit="limit" @limit="limit = $event" :total="total" :show-page="showPage" theme="orange"></lay-page>
|
||||
<lay-page :limit="limit3" :total="total3" showCount showPage :limits="limits3"></lay-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -117,14 +110,14 @@ import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const limit = ref(20)
|
||||
const total = ref(100)
|
||||
const showPage = ref(true)
|
||||
const limit3 = ref(5)
|
||||
const total3 = ref(100)
|
||||
const limits3 = ref([5, 10, 50, 100, 200])
|
||||
|
||||
return {
|
||||
limit,
|
||||
total,
|
||||
showPage
|
||||
limit3,
|
||||
total3,
|
||||
limits3
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -132,58 +125,33 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 指定分页容量
|
||||
|
||||
::: title 回调事件
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-page :limit="limit" :total="total" showCount showPage :limits="[10,50,100,200]" @limit="limit=$event"></lay-page>
|
||||
<lay-page :limit="limit4" :total="total4" @change="change4" :show-page="true"></lay-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import { layer } from "@layui/layui-vue";
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const limit = ref(20)
|
||||
const total = ref(100)
|
||||
const limit4 = ref(20)
|
||||
const total4 = ref(100)
|
||||
const change4 = ({ current, limit }) => {
|
||||
layer.msg("current:" + current + " limit:" + limit);
|
||||
}
|
||||
|
||||
return {
|
||||
limit,
|
||||
total
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 每页数量切换事件(limit)
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-page :limit="limit" showPage showCount :total="total" @limit="limit=$event" :show-limit="showLimit" ></lay-page>
|
||||
<div>每页数量:{{limit}}</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const limit = ref(5)
|
||||
const total = ref(9999)
|
||||
const showLimit = ref(true)
|
||||
|
||||
return {
|
||||
limit,
|
||||
total,
|
||||
showLimit,
|
||||
limit4,
|
||||
total4,
|
||||
change4
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -197,8 +165,12 @@ export default {
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-page :limit="limit1" :pages="pages1" :total="total1" :show-count="showCount1" @limit="limit1=$event" :show-page="showPage1" :show-limit="showLimit1" :show-refresh="showRefresh1" :showSkip="showSkip1"></lay-page>
|
||||
每页数量:{{limit1}}
|
||||
<lay-button-container>
|
||||
<lay-button type="primary" size="sm" @click="changeCurrent5">update model {{ current5 }}</lay-button>
|
||||
<lay-button type="primary" size="sm" @click="changeLimit5">update limit {{ limit5 }}</lay-button>
|
||||
</lay-button-container>
|
||||
<br/>
|
||||
<lay-page v-model="current5" v-model:limit="limit5" :pages="pages5" :total="total5" :show-count="true" :show-page="true" :show-limit="true" :show-refresh="true" :showSkip="true" @change="change5"></lay-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -207,60 +179,27 @@ import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const limit1 = ref(5)
|
||||
const total1 = ref(99)
|
||||
const showCount1 = ref(true)
|
||||
const showPage1 = ref(true)
|
||||
const showLimit1 = ref(true)
|
||||
const showRefresh1 = ref(true)
|
||||
const showSkip1 = ref(true)
|
||||
const pages1 = ref(6);
|
||||
|
||||
const limit5 = ref(10)
|
||||
const total5 = ref(99)
|
||||
const pages5 = ref(6);
|
||||
const current5 = ref(1);
|
||||
const changeCurrent5 = () => {
|
||||
current5.value = 2;
|
||||
}
|
||||
const changeLimit5 = () => {
|
||||
limit5.value = 20;
|
||||
}
|
||||
const change5 = ({ current, limit }) => {
|
||||
layer.msg("current:" + current + " limit:" + limit);
|
||||
}
|
||||
return {
|
||||
limit1,
|
||||
total1,
|
||||
pages1,
|
||||
showCount1,
|
||||
showPage1,
|
||||
showLimit1,
|
||||
showRefresh1,
|
||||
showSkip1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 页码切换事件(jump)
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-page :limit="limit" :total="total" @jump="jump" @limit="limit = $event" :show-page="showSkip"></lay-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const limit = ref(20)
|
||||
const total = ref(100)
|
||||
const showPage = ref(true)
|
||||
const showSkip = ref(true)
|
||||
const jump = function({ current }) {
|
||||
console.log("当前页:" + current)
|
||||
}
|
||||
|
||||
return {
|
||||
limit,
|
||||
total,
|
||||
jump,
|
||||
showPage,
|
||||
showSkip
|
||||
limit5,
|
||||
total5,
|
||||
pages5,
|
||||
current5,
|
||||
changeCurrent5,
|
||||
changeLimit5,
|
||||
change5
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -294,10 +233,11 @@ export default {
|
||||
|
||||
::: table
|
||||
|
||||
| 事件 | 描述 | 参数 |
|
||||
| ---- | -------- | --------------------- |
|
||||
| jump | 切换回调 | { current: 当前页面 } |
|
||||
| limit | 每页数量变化 | 变化后的值 |
|
||||
| 事件 | 描述 | 参数 | 版本 |
|
||||
| ---- | -------- | --------------------- |--------------------- |
|
||||
| jump | 切换回调 | { current: 当前页面 } | `移除` |
|
||||
| limit | 每页数量变化 | 变化后的值 | `移除` |
|
||||
| change | 分页事件 | { current: 当前页码, limit: 每页数量 } | `1.4.3` |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
@ -119,23 +119,25 @@ export default {
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
page props: {{ page3 }}
|
||||
<lay-table :columns="columns3" :data-source="dataSource3" :page="page3" @change="change3"></lay-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import { ref } from 'vue';
|
||||
import { layer } from "@layui/layer-vue";
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const page3 = {
|
||||
const page3 = ref({
|
||||
total: 100,
|
||||
limit: 10,
|
||||
current: 2
|
||||
}
|
||||
})
|
||||
|
||||
const change3 = function({ current }){
|
||||
console.log("当前页:" + JSON.stringify(current))
|
||||
const change3 = ({ current, limit }) => {
|
||||
layer.msg("current:" + current + " limit:" + limit);
|
||||
}
|
||||
|
||||
const columns3 = [
|
||||
@ -1466,7 +1468,7 @@ export default {
|
||||
| row | 行单击 | data : 当前行 |
|
||||
| row-double | 行双击 | data : 当前行 |
|
||||
| row-contextmenu | 行右击 | data : 当前行 |
|
||||
|
||||
| change | 分页事件 | { current: 当前页码, limit: 每页数量 } |
|
||||
:::
|
||||
|
||||
::: title Table 插槽
|
||||
|
||||
@ -11,6 +11,22 @@
|
||||
<template>
|
||||
<lay-timeline>
|
||||
<lay-timeline-item title="1.4.x">
|
||||
<ul>
|
||||
<a name="1-4-3"></a>
|
||||
<li>
|
||||
<h3>1.4.3 <span class="layui-badge-rim">2022-08-16</span></h3>
|
||||
<ul>
|
||||
<li>[新增] page 组件 change 事件。</li>
|
||||
<li>[新增] card 组件 footer 插槽, 用于自定义底部。</li>
|
||||
<li>[新增] table 组件 change 事件 limit 参数, 代表每页数量。</li>
|
||||
<li>[修复] scroll 组件 default slots 改变时, 滑块不更新的问题。</li>
|
||||
<li>[修复] table 组件 loading 属性造成的单元格错位。</li>
|
||||
<li>[优化] page 组件 跳转 操作, 当输入页码为当前页启用禁用状态。</li>
|
||||
<li>[过时] page 组件 limit 事件, 由 change 事件代替。</li>
|
||||
<li>[过时] page 组件 jump 事件, 由 change 事件代替。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="1-4-2"></a>
|
||||
<li>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user