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

✨(component): release 1.4.3

Browse Source
This commit is contained in:
就眠儀式 2022-08-16 15:48:50 +08:00
parent 0bb87c9c2e
commit 600bf608ba
7 changed files with 138 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package/component/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@layui/layui-vue", "name": "@layui/layui-vue",
"version": "1.4.2", "version": "1.4.3",
"author": "就眠儀式", "author": "就眠儀式",
"license": "MIT", "license": "MIT",
"description": "a component library for Vue 3 base on layui-vue", "description": "a component library for Vue 3 base on layui-vue",

71
package/component/src/component/page/index.vue
View File

@ -46,24 +46,16 @@ const limits = ref(props.limits);
const pages = Math.floor(props.pages / 2); const pages = Math.floor(props.pages / 2);
const currentPage: Ref<number> = ref(props.modelValue); const currentPage: Ref<number> = ref(props.modelValue);
const currentPageShow: Ref<number> = ref(currentPage.value); const currentPageShow: Ref<number> = ref(currentPage.value);
const inlimit = computed({ const inlimit = ref(props.limit);
get() {
return props.limit; watch(() => props.limit, () => {
}, inlimit.value = props.limit;
set(v: number) { })
emit("limit", v);
},
});
const totalPage = computed(() => { const totalPage = computed(() => {
maxPage.value = Math.ceil(props.total / props.limit); maxPage.value = Math.ceil(props.total / inlimit.value);
let r: number[] = [], let r: number[] = [];
start = let start = maxPage.value <= props.pages ? 1 : currentPage.value > pages ? currentPage.value - pages : 1;
maxPage.value <= props.pages
? 1
: currentPage.value > pages
? currentPage.value - pages
: 1;
for (let i = start; ; i++) { for (let i = start; ; i++) {
if (r.length >= props.pages || i > maxPage.value) { if (r.length >= props.pages || i > maxPage.value) {
break; break;
@ -73,43 +65,53 @@ const totalPage = computed(() => {
return r; 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) { if (currentPage.value === 1) {
return; return;
} }
currentPage.value--; currentPage.value--;
emit("change", { current: currentPage.value, limit: inlimit.value });
}; };
const next = function () { const next = () => {
if (currentPage.value === maxPage.value) { if (currentPage.value === maxPage.value) {
return; return;
} }
currentPage.value++; currentPage.value++;
emit("change", { current: currentPage.value, limit: inlimit.value });
}; };
const jump = function (page: number) { const jump = (page: number) => {
currentPage.value = page; currentPage.value = page;
emit("change", { current: currentPage.value, limit: inlimit.value });
}; };
const jumpPage = function () { const jumpPage = () => {
currentPage.value = currentPageShow.value; currentPage.value = currentPageShow.value;
emit("change", { current: currentPage.value, limit: inlimit.value });
}; };
watch(inlimit, function () { const changelimit = () => {
currentPage.value = 1; currentPage.value = 1;
}); emit("change", { current: currentPage.value, limit: inlimit.value });
}
watch(currentPage, function () { const refresh = () => {
if (currentPage.value > totalPage.value[totalPage.value.length - 1]) { emit("change", { current: currentPage.value, limit: inlimit.value });
currentPage.value = totalPage.value[totalPage.value.length - 1]; }
}
if (currentPage.value < totalPage.value[0]) { watch(inlimit, () => {
currentPage.value = totalPage.value[0]; 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; currentPageShow.value = currentPage.value;
emit("jump", { current: currentPage.value });
emit("update:modelValue", currentPage.value); emit("update:modelValue", currentPage.value);
}); });
@ -157,7 +159,6 @@ watch(
> >
</template> </template>
</template> </template>
<a <a
href="javascript:;" href="javascript:;"
class="layui-laypage-next" class="layui-laypage-next"
@ -171,13 +172,13 @@ watch(
<template v-else>{{ t("page.next") }}</template> <template v-else>{{ t("page.next") }}</template>
</a> </a>
<span v-if="showLimit" class="layui-laypage-limits"> <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"> <option v-for="val of limits" :key="val" :value="val">
{{ val }} 条/页 {{ val }} 条/页
</option> </option>
</select> </select>
</span> </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> <i class="layui-icon layui-icon-refresh"></i>
</a> </a>
<span v-if="props.showSkip" class="layui-laypage-skip"> <span v-if="props.showSkip" class="layui-laypage-skip">
@ -192,7 +193,7 @@ watch(
type="button" type="button"
class="layui-laypage-btn" class="layui-laypage-btn"
@click="jumpPage()" @click="jumpPage()"
:disabled="currentPageShow > maxPage" :disabled="currentPageShow > maxPage || currentPageShow == currentPage"
> >
确定 确定
</button> </button>

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

@ -859,13 +859,13 @@ onBeforeUnmount(() => {
</div> </div>
<div v-if="page" class="layui-table-page"> <div v-if="page" class="layui-table-page">
<lay-page <lay-page
show-page :show-page="true"
show-skip :show-skip="true"
show-limit :show-limit="true"
:total="page.total" :total="page.total"
:limit="page.limit" v-model:limit="page.limit"
v-model="page.current" v-model:modelValue="page.current"
@jump="change" @change="change"
> >
<template #prev> <template #prev>
<lay-icon type="layui-icon-left" /> <lay-icon type="layui-icon-left" />

13
package/document-component/src/document/zh-CN/components/card.md
View File

@ -216,12 +216,13 @@ export default {
::: table ::: table
| 插槽 | 描述 | 可选值 | | 插槽 | 描述 | 可选值 | 版本 |
| ------- | -------- | ------ | | ------- | -------- | ------ |------ |
| default | 默认插槽 | -- | | default | 默认插槽 | -- |-- |
| header | 头部插槽 | -- | | header | 头部插槽 | -- |-- |
| body | 内容插槽 | -- | | body | 内容插槽 | -- |-- |
| extra | 扩展插槽 | -- | | extra | 扩展插槽 | -- |-- |
| footer | 扩展插槽 | -- |`1.4.3` |
::: :::
::: contributor card ::: contributor card

192
package/document-component/src/document/zh-CN/components/page.md
View File

@ -13,7 +13,7 @@
::: demo 使用 `lay-page` 标签, 创建分页 ::: demo 使用 `lay-page` 标签, 创建分页
<template> <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> </template>
<script> <script>
@ -24,13 +24,11 @@ export default {
const limit = ref(20) const limit = ref(20)
const total = ref(100) const total = ref(100)
const showPage = ref(true)
const currentPage = ref(2); const currentPage = ref(2);
return { return {
limit, limit,
total, total,
showPage,
currentPage currentPage
} }
} }
@ -39,13 +37,13 @@ export default {
::: :::
::: title 简单模式 ::: title 简洁模式
::: :::
::: demo ::: demo
<template> <template>
<lay-page :limit="limit" @limit="limit = $event" :total="total"></lay-page> <lay-page :limit="limit1" v-model="current1" :total="total1"></lay-page>
</template> </template>
<script> <script>
@ -54,12 +52,14 @@ import { ref } from 'vue'
export default { export default {
setup() { setup() {
const limit = ref(20) const limit1 = ref(10);
const total = ref(100) const total1 = ref(100);
const current1 = ref(1);
return { return {
limit, limit1,
total total1,
current1
} }
} }
} }
@ -67,16 +67,13 @@ export default {
::: :::
::: title 插槽使用 ::: title 设置主题
::: :::
::: demo ::: demo
<template> <template>
<lay-page :limit="limit" @limit="limit = $event" :total="total"> <lay-page :limit="limit2" :total="total2" :show-page="true" theme="blue"></lay-page>
<template v-slot:prev>上</template>
<template v-slot:next>下</template>
</lay-page>
</template> </template>
<script> <script>
@ -85,12 +82,12 @@ import { ref } from 'vue'
export default { export default {
setup() { setup() {
const limit = ref(20) const limit2 = ref(20)
const total = ref(100) const total2 = ref(100)
return { return {
limit, limit2,
total total2,
} }
} }
} }
@ -98,17 +95,13 @@ export default {
::: :::
::: title 不同主题 ::: title 分页容量
::: :::
::: demo ::: demo
<template> <template>
<lay-page :limit="limit" @limit="limit = $event" :total="total" :show-page="showPage" theme="red"></lay-page> <lay-page :limit="limit3" :total="total3" showCount showPage :limits="limits3"></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>
</template> </template>
<script> <script>
@ -117,14 +110,14 @@ import { ref } from 'vue'
export default { export default {
setup() { setup() {
const limit = ref(20) const limit3 = ref(5)
const total = ref(100) const total3 = ref(100)
const showPage = ref(true) const limits3 = ref([5, 10, 50, 100, 200])
return { return {
limit, limit3,
total, total3,
showPage limits3
} }
} }
} }
@ -132,58 +125,33 @@ export default {
::: :::
::: title 指定分页容量
::: title 回调事件
::: :::
::: demo ::: demo
<template> <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> </template>
<script> <script>
import { ref } from 'vue' import { ref } from 'vue'
import { layer } from "@layui/layui-vue";
export default { export default {
setup() { setup() {
const limit = ref(20) const limit4 = ref(20)
const total = ref(100) const total4 = ref(100)
const change4 = ({ current, limit }) => {
layer.msg("current:" + current + " limit:" + limit);
}
return { return {
limit, limit4,
total total4,
} change4
}
}
</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,
} }
} }
} }
@ -197,8 +165,12 @@ export default {
::: demo ::: demo
<template> <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> <lay-button-container>
每页数量:{{limit1}} <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> </template>
<script> <script>
@ -207,60 +179,27 @@ import { ref } from 'vue'
export default { export default {
setup() { setup() {
const limit1 = ref(5) const limit5 = ref(10)
const total1 = ref(99) const total5 = ref(99)
const showCount1 = ref(true) const pages5 = ref(6);
const showPage1 = ref(true) const current5 = ref(1);
const showLimit1 = ref(true) const changeCurrent5 = () => {
const showRefresh1 = ref(true) current5.value = 2;
const showSkip1 = ref(true) }
const pages1 = ref(6); const changeLimit5 = () => {
limit5.value = 20;
}
const change5 = ({ current, limit }) => {
layer.msg("current:" + current + " limit:" + limit);
}
return { return {
limit1, limit5,
total1, total5,
pages1, pages5,
showCount1, current5,
showPage1, changeCurrent5,
showLimit1, changeLimit5,
showRefresh1, change5
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
} }
} }
} }
@ -294,10 +233,11 @@ export default {
::: table ::: table
| 事件 | 描述 | 参数 | | 事件 | 描述 | 参数 | 版本 |
| ---- | -------- | --------------------- | | ---- | -------- | --------------------- |--------------------- |
| jump | 切换回调 | { current: 当前页面 } | | jump | 切换回调 | { current: 当前页面 } | `移除` |
| limit | 每页数量变化 | 变化后的值 | | limit | 每页数量变化 | 变化后的值 | `移除` |
| change | 分页事件 | { current: 当前页码, limit: 每页数量 } | `1.4.3` |
::: :::

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

@ -119,23 +119,25 @@ export default {
::: demo ::: demo
<template> <template>
page props: {{ page3 }}
<lay-table :columns="columns3" :data-source="dataSource3" :page="page3" @change="change3"></lay-table> <lay-table :columns="columns3" :data-source="dataSource3" :page="page3" @change="change3"></lay-table>
</template> </template>
<script> <script>
import { ref } from 'vue' import { ref } from 'vue';
import { layer } from "@layui/layer-vue";
export default { export default {
setup() { setup() {
const page3 = { const page3 = ref({
total: 100, total: 100,
limit: 10, limit: 10,
current: 2 current: 2
} })
const change3 = function({ current }){ const change3 = ({ current, limit }) => {
console.log("当前页:" + JSON.stringify(current)) layer.msg("current:" + current + " limit:" + limit);
} }
const columns3 = [ const columns3 = [
@ -1466,7 +1468,7 @@ export default {
| row | 行单击 | data : 当前行 | | row | 行单击 | data : 当前行 |
| row-double | 行双击 | data : 当前行 | | row-double | 行双击 | data : 当前行 |
| row-contextmenu | 行右击 | data : 当前行 | | row-contextmenu | 行右击 | data : 当前行 |
| change | 分页事件 | { current: 当前页码, limit: 每页数量 } |
::: :::
::: title Table 插槽 ::: title Table 插槽

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

@ -11,6 +11,22 @@
<template> <template>
<lay-timeline> <lay-timeline>
<lay-timeline-item title="1.4.x"> <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> <ul>
<a name="1-4-2"></a> <a name="1-4-2"></a>
<li> <li>