🐛(component): [修复] page 组件 外部更改v-model视图不刷新问题

package/component/package.json

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

package/component/src/component/page/index.vue

@@ -63,8 +63,8 @@ const totalPage = computed(() => {
       maxPage.value <= props.pages
         ? 1
         : currentPage.value > pages
-        ? currentPage.value - pages
+          ? currentPage.value - pages
-        : 1;
+          : 1;
   for (let i = start; ; i++) {
     if (r.length >= props.pages || i > maxPage.value) {
       break;
@@ -77,7 +77,7 @@ const totalPage = computed(() => {
 const currentPage: Ref<number> = ref(props.modelValue);
 const currentPageShow: Ref<number> = ref(currentPage.value);
 
-const emit = defineEmits(["jump", "limit"]);
+const emit = defineEmits(["jump", "limit", 'update:modelValue']);
 
 const prev = function () {
   if (currentPage.value === 1) {
@@ -106,56 +106,47 @@ watch(inlimit, function () {
 });
 
 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];
+  }
   currentPageShow.value = currentPage.value;
   emit("jump", { current: currentPage.value });
+  emit('update:modelValue', currentPage.value)
 });
+watch(() => props.modelValue, function () {
+  currentPage.value = props.modelValue
+  currentPageShow.value = currentPage.value
+})
 </script>
 
 <template>
   <div class="layui-laypage layui-laypage-default">
-    <span v-if="showCount" class="layui-laypage-count"
+    <span v-if="showCount" class="layui-laypage-count">共 {{ total }} 条 {{ maxPage }} 页</span>
-      >共 {{ total }} 条 {{ maxPage }} 页</span
+    <a href="javascript:;" class="layui-laypage-prev" :class="[
-    >
+      currentPage === 1 ? 'layui-disabled' : '',
-    <a
+      theme && currentPage !== 1 ? 'layui-laypage-a-' + theme : '',
-      href="javascript:;"
+    ]" @click="prev()">
-      class="layui-laypage-prev"
-      :class="[
-        currentPage === 1 ? 'layui-disabled' : '',
-        theme && currentPage !== 1 ? 'layui-laypage-a-' + theme : '',
-      ]"
-      @click="prev()"
-    >
       <slot v-if="slots.prev" name="prev"></slot>
       <template v-else>{{ t("page.prev") }}</template>
     </a>
     <template v-if="showPage">
       <template v-for="index of totalPage" :key="index">
         <span v-if="index === currentPage" class="layui-laypage-curr">
-          <em
+          <em class="layui-laypage-em" :class="[theme ? 'layui-bg-' + theme : '']"></em>
-            class="layui-laypage-em"
-            :class="[theme ? 'layui-bg-' + theme : '']"
-          ></em>
           <em>{{ index }}</em>
         </span>
-        <a
+        <a v-else href="javascript:;" @click="jump(index)" :class="[theme ? 'layui-laypage-a-' + theme : '']">{{ index
-          v-else
+        }}</a>
-          href="javascript:;"
-          @click="jump(index)"
-          :class="[theme ? 'layui-laypage-a-' + theme : '']"
-          >{{ index }}</a
-        >
       </template>
     </template>
 
-    <a
+    <a href="javascript:;" class="layui-laypage-next" :class="[
-      href="javascript:;"
+      currentPage === maxPage ? 'layui-disabled' : '',
-      class="layui-laypage-next"
+      theme && currentPage !== maxPage ? 'layui-laypage-a-' + theme : '',
-      :class="[
+    ]" @click="next()">
-        currentPage === maxPage ? 'layui-disabled' : '',
-        theme && currentPage !== maxPage ? 'layui-laypage-a-' + theme : '',
-      ]"
-      @click="next()"
-    >
       <slot v-if="slots.next" name="next"></slot>
       <template v-else>{{ t("page.next") }}</template>
     </a>
@@ -171,18 +162,9 @@ watch(currentPage, function () {
     </a>
     <span v-if="props.showSkip" class="layui-laypage-skip">
       到第
-      <input
+      <input v-model="currentPageShow" @keypress.enter="jumpPage()" type="number"
-        v-model="currentPageShow"
+        class="layui-input layui-input-number" />页
-        @keypress.enter="jumpPage()"
+      <button type="button" class="layui-laypage-btn" @click="jumpPage()" :disabled="currentPageShow > maxPage">
-        type="number"
-        class="layui-input layui-input-number"
-      />页
-      <button
-        type="button"
-        class="layui-laypage-btn"
-        @click="jumpPage()"
-        :disabled="currentPageShow > maxPage"
-      >
         确定
       </button>
     </span>

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

@@ -17,6 +17,7 @@
         <h3>1.3.0 <span class="layui-badge-rim">2022-07-12</span></h3> 
         <ul>         
           <li><span style="color:#FF5722">[破坏性更新]</span> 统一checkbox与radio属性语义 两个组件受到影响 label代表显示值，value代表绑定值。 by @SmallWai</li> 
+          <li>[修复] page 组件 外部更改v-model视图不刷新问题。 by @SmallWai</li> 
         </ul>
       </li>
     </ul>