Merge branch 'develop' of gitee.com:layui-vue/layui-vue into develop
This commit is contained in:
halo
commit
47a00afef4
@ -119,17 +119,15 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
:::
|
||||
|
||||
::: title 设置每页数量选择范围
|
||||
::: title 完整分页
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-page :limit="limit" :total="total" :limits="[10,50,100,200]"></lay-page>
|
||||
<lay-page :limit="limit" :total="total" :show-count="showCount" :show-page="showPage" :show-limit="showLimit" :show-refresh="showRefresh" showSkip="showSkip"></lay-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -140,66 +138,6 @@ export default {
|
||||
|
||||
const limit = ref(20)
|
||||
const total = ref(100)
|
||||
|
||||
return {
|
||||
limit,
|
||||
total
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 每页数量切换事件(limit)
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-page :limit="limit" :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,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 完整分页
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-page :limit="limit" :total="9999" :show-count="showCount" @limit="limit=$event" :show-page="showPage" :show-limit="showLimit" :show-refresh="showRefresh" showSkip="showSkip"></lay-page>
|
||||
每页数量:{{limit}}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const limit = ref(5)
|
||||
const total = ref(9999)
|
||||
const showCount = ref(true)
|
||||
const showPage = ref(true)
|
||||
const showLimit = ref(true)
|
||||
@ -269,8 +207,6 @@ export default {
|
||||
| showLimit | 显示每页数量 | `false` |
|
||||
| showRefresh | 显示刷新按钮 | `false` |
|
||||
| showSkip | 显示跳转 | `false` |
|
||||
| pages | 显示切页按钮数量 | `10` |
|
||||
| limits | 切换每页数量的选择项 | `[10,20,30,40,50]` |
|
||||
|
||||
:::
|
||||
|
||||
@ -282,7 +218,6 @@ export default {
|
||||
| 事件 | 描述 | 参数 |
|
||||
| ---- | -------- | --------------------- |
|
||||
| jump | 切换回调 | { current: 当前页面 } |
|
||||
| limit | 每页数量变化 | 变化后的值 |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -64,7 +64,76 @@
|
||||
生态：暂无
|
||||
</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="6">
|
||||
焦点：layui-vue
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：未知
|
||||
</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/2469/7407590_wcg666_1640528494.png"></lay-avatar>
|
||||
</lay-col>
|
||||
<lay-col md="2">
|
||||
Sight
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
焦点：count-up backtop
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：未知
|
||||
</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/2596/7789823_finalsummer_1613993823.png"></lay-avatar>
|
||||
</lay-col>
|
||||
<lay-col md="2">
|
||||
finalsummer
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
焦点：layer-vue
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：未知
|
||||
</lay-col>
|
||||
<lay-col md="5">
|
||||
生态：暂无
|
||||
</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>
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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",
|
||||
@ -78,10 +78,5 @@
|
||||
"current node",
|
||||
"last 2 versions and > 2%",
|
||||
"ie > 10"
|
||||
],
|
||||
"config": {
|
||||
"commitizen": {
|
||||
"path": "./node_modules/cz-conventional-changelog"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,57 +1,60 @@
|
||||
<template>
|
||||
<div class="layui-box layui-laypage layui-laypage-default">
|
||||
<span v-if="showCount" class="layui-laypage-count">共 {{ total }} 条 {{ maxPage }}页</span>
|
||||
<a
|
||||
<span v-if="showCount" class="layui-laypage-count">共 {{ total }} 条</span
|
||||
><a
|
||||
href="javascript:;"
|
||||
class="layui-laypage-prev"
|
||||
:class="[currentPage === 1 ? 'layui-disabled' : '']"
|
||||
@click="prev()"
|
||||
><slot v-if="slots.prev" name="prev"></slot>
|
||||
<template v-else>上一页</template></a
|
||||
>
|
||||
<slot v-if="slots.prev" name="prev"></slot>
|
||||
<template v-else>上一页</template>
|
||||
</a>
|
||||
<template v-if="showPage">
|
||||
<template v-for="index of totalPage" :key="index">
|
||||
<span v-if="index === currentPage" class="layui-laypage-curr">
|
||||
<em class="layui-laypage-em" :class="[theme ? 'layui-bg-' + theme : '']"></em>
|
||||
<em>{{ index }}</em>
|
||||
</span>
|
||||
<a v-else href="javascript:;" @click="jump(index)">{{ index }}</a>
|
||||
<span v-if="index === currentPage" class="layui-laypage-curr"
|
||||
><em
|
||||
class="layui-laypage-em"
|
||||
:class="[theme ? 'layui-bg-' + theme : '']"
|
||||
></em
|
||||
><em>{{ index }}</em></span
|
||||
>
|
||||
<a v-else href="javascript:;" @click="jump(index)">
|
||||
{{ index }}
|
||||
</a>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<a
|
||||
href="javascript:;"
|
||||
class="layui-laypage-next"
|
||||
:class="[currentPage === maxPage ? 'layui-disabled' : '']"
|
||||
:class="[currentPage === totalPage ? 'layui-disabled' : '']"
|
||||
@click="next()"
|
||||
><slot v-if="slots.next" name="next"></slot>
|
||||
<template v-else>下一页</template></a
|
||||
><span v-if="showLimit" class="layui-laypage-limits"
|
||||
><select v-model="inlimit">
|
||||
<option value="10">10 条/页</option>
|
||||
<option value="20">20 条/页</option>
|
||||
<option value="30">30 条/页</option>
|
||||
<option value="40">40 条/页</option>
|
||||
<option value="50">50 条/页</option>
|
||||
</select></span
|
||||
><a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh"
|
||||
><i class="layui-icon layui-icon-refresh"></i></a
|
||||
><span v-if="showSkip" class="layui-laypage-skip"
|
||||
>到第<input
|
||||
v-model="currentPageShow"
|
||||
type="number"
|
||||
class="layui-input layui-input-number"
|
||||
/>页<button type="button" class="layui-laypage-btn" @click="jumpPage()">
|
||||
确定
|
||||
</button></span
|
||||
>
|
||||
<slot v-if="slots.next" name="next"></slot>
|
||||
<template v-else>下一页</template>
|
||||
</a>
|
||||
<span v-if="showLimit" class="layui-laypage-limits">
|
||||
<select v-model="inlimit">
|
||||
<option v-for="val of limits" :key="val" :value="val">{{ val }} 条/页</option>
|
||||
</select>
|
||||
</span>
|
||||
<a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh">
|
||||
<i class="layui-icon layui-icon-refresh"></i>
|
||||
</a>
|
||||
<span v-if="showSkip" class="layui-laypage-skip">
|
||||
到第
|
||||
<input v-model="currentPageShow" type="number" class="layui-input layui-input-number" />页
|
||||
<button
|
||||
type="button"
|
||||
class="layui-laypage-btn"
|
||||
@click="jumpPage()"
|
||||
:disabled="currentPageShow > maxPage"
|
||||
>确定</button>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LayPage" lang="ts">
|
||||
import { defineProps, Ref, ref, watch, useSlots, computed } from "vue";
|
||||
import { defineProps, Ref, ref, watch, useSlots, computed, ComputedRef } from "vue";
|
||||
|
||||
const slots = useSlots();
|
||||
|
||||
@ -66,8 +69,6 @@ const props = withDefaults(
|
||||
showLimit?: boolean | string;
|
||||
showInput?: boolean | string;
|
||||
showRefresh?: boolean | string;
|
||||
pages?: number,
|
||||
limits?: number[]
|
||||
}>(),
|
||||
{
|
||||
limit: 10,
|
||||
@ -78,32 +79,14 @@ const props = withDefaults(
|
||||
showLimit: true,
|
||||
showInput: false,
|
||||
showRefresh: false,
|
||||
pages: 10,
|
||||
limits: () => [10, 20, 30, 40, 50]
|
||||
}
|
||||
);
|
||||
const limits = ref(props.limits);
|
||||
const pages = props.pages / 2
|
||||
const inlimit = computed({ get() { return props.limit }, set(v: number) { emit('limit', v) } })
|
||||
const maxPage = ref(Math.ceil(props.total / props.limit));
|
||||
const totalPage = computed(() => {
|
||||
let r: number[] = [], end = maxPage.value
|
||||
if (currentPage.value <= pages) {
|
||||
end = props.pages + 1
|
||||
} else if (currentPage.value + pages > end) {
|
||||
|
||||
} else {
|
||||
end = currentPage.value + pages
|
||||
}
|
||||
for (let i = currentPage.value > pages ? currentPage.value - pages : 1; i < end; i++) {
|
||||
r.push(i)
|
||||
}
|
||||
return r;
|
||||
})
|
||||
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", "limit"]);
|
||||
const emit = defineEmits(["jump"]);
|
||||
|
||||
const prev = function () {
|
||||
if (currentPage.value === 1) {
|
||||
@ -113,7 +96,7 @@ const prev = function () {
|
||||
};
|
||||
|
||||
const next = function () {
|
||||
if (currentPage.value === maxPage.value) {
|
||||
if (currentPage.value === totalPage.value) {
|
||||
return;
|
||||
}
|
||||
currentPage.value++;
|
||||
@ -129,7 +112,7 @@ const jumpPage = function () {
|
||||
|
||||
watch(inlimit, function () {
|
||||
currentPage.value = 1;
|
||||
maxPage.value = Math.ceil(props.total / inlimit.value);
|
||||
totalPage.value = Math.ceil(props.total / inlimit.value);
|
||||
});
|
||||
|
||||
watch(currentPage, function () {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user