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

docs/docs/zh-CN/components/page.md

@@ -1,7 +1,7 @@
 ::: demo
 
 <template>
-  <lay-page limit=10 total=100></lay-page>
+  <lay-page limit=20 total=100></lay-page>
 </template>
 
 <script>

docs/src/layouts/Layout.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="width:100%;height:300px">
     <lay-layout>
-      <lay-header>
+      <lay-header style="background:#393D49">
         <lay-logo>
           <img src="../assets/logo.png" />
         </lay-logo>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "a component library for Vue 3 base on layui-vue",
   "main": "lib/layui-vue.umd.js",
   "module": "lib/layui-vue.es.js",

src/css/layui.css

@@ -1057,7 +1057,7 @@ a cite {
 	top: 0;
 	left: 0;
 	right: 0;
-	background-color: #393D49
+	background-color: #23262E
 }
 
 .layui-layout-admin .layui-side {

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>