feat(page): 初步完成 page 组件, 存在类型转换问题待处理

src/module/page/index.vue

@@ -15,28 +15,28 @@
 
     <a href="javascript:;" class="layui-laypage-next" :class="[currentPage === totalPage ? 'layui-disabled':'']" @click="next()">下一页</a
     ><span class="layui-laypage-limits"
-      ><select lay-ignore="">
-        <option value="10" selected="">{{ limit }} 条/页</option>
-        <option value="20">20 条/页</option>
-        <option value="30">30 条/页</option>
-        <option value="40">40 条/页</option>
-        <option value="50">50 条/页</option>
+      ><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 href="javascript:;" data-page="1" class="layui-laypage-refresh"
       ><i class="layui-icon layui-icon-refresh"></i></a
     ><span class="layui-laypage-skip"
-      >到第<input type="text" min="1" value="1" class="layui-input" />页<button
+      >到第<input type="text" v-model="currentPageShow" class="layui-input" />页<button
         type="button"
         class="layui-laypage-btn"
+        @click="jumpPage()"
       >
         确定
-      </button></span
-    >
+      </button></span>
   </div>
 </template>
 <script setup name="LayPage"></script>
 <script setup lang="ts">
-import { defineProps, ref } from 'vue'
+import { defineProps, ref, watch } from 'vue'
 
 const props =
   defineProps<{
@@ -44,8 +44,10 @@ const props =
     limit: number
   }>()
 
-const totalPage = ref(props.total / props.limit)
+const inlimit= ref(props.limit)
+const totalPage = ref(Math.ceil(props.total / inlimit.value)) 
 const currentPage = ref(1)
+const currentPageShow = ref(currentPage.value)
 
 const prev = function () {
   if(currentPage.value === 1) {
@@ -64,4 +66,20 @@ const next = function () {
 const jump = function (page: number) {
   currentPage.value = page
 }
+
+const jumpPage = function() {
+  currentPage.value = currentPageShow.value
+}
+
+watch(inlimit, function() {
+  currentPage.value = 1
+  totalPage.value = Math.ceil(props.total / inlimit.value)
+})
+
+watch(currentPage, function() {
+  currentPageShow.value = currentPage.value
+})
+
+
+
 </script>