From 569d08155363a6dd435397a5558e2714c7b4c9be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Thu, 17 Mar 2022 09:48:27 +0800
Subject: [PATCH] feat: add page component v-model props

---
 example/docs/zh-CN/components/page.md  |   6 +-
 example/docs/zh-CN/components/table.md |   3 +-
 src/component/colorPicker/index.vue    | 184 ++++++++++++-------------
 src/component/table/index.vue          |   3 +-
 4 files changed, 100 insertions(+), 96 deletions(-)

diff --git a/example/docs/zh-CN/components/page.md b/example/docs/zh-CN/components/page.md
index 2238e874..8d9ff66f 100644
--- a/example/docs/zh-CN/components/page.md
+++ b/example/docs/zh-CN/components/page.md
@@ -13,7 +13,7 @@
 ::: demo 使用 `lay-page` 标签, 创建分页
 
 <template>
-  <lay-page :limit="limit" 	@limit="limit = $event" :total="total" :show-page="showPage"></lay-page>
+  <lay-page v-model="currentPage" :limit="limit" 	@limit="limit = $event" :total="total" :show-page="showPage"></lay-page>
 </template>
 
 <script>
@@ -25,11 +25,13 @@ export default {
     const limit = ref(20)
     const total = ref(100)
     const showPage = ref(true)
+    const currentPage = ref(2);
 
     return {
       limit,
       total,
-      showPage
+      showPage,
+      currentPage
     }
   }
 }
diff --git a/example/docs/zh-CN/components/table.md b/example/docs/zh-CN/components/table.md
index 1f6efaa6..703a0a21 100644
--- a/example/docs/zh-CN/components/table.md
+++ b/example/docs/zh-CN/components/table.md
@@ -151,7 +151,8 @@ export default {
     
     const page = {
       total: 100,
-      limit: 10
+      limit: 10,
+      current: 2
     }
 
     const change = function({ current }){
diff --git a/src/component/colorPicker/index.vue b/src/component/colorPicker/index.vue
index 2f4993eb..be235fa8 100644
--- a/src/component/colorPicker/index.vue
+++ b/src/component/colorPicker/index.vue
@@ -1,95 +1,3 @@
-<template>
-  <lay-dropdown>
-    <div class="layui-unselect layui-colorpicker">
-      <span>
-        <span
-          class="layui-colorpicker-trigger-span"
-          lay-type=""
-          :style="`background-color: ${colorObj.rgba}`"
-        >
-          <i class="layui-icon layui-colorpicker-trigger-i layui-icon-down"></i>
-        </span>
-      </span>
-    </div>
-    <template #content>
-      <div class="layui-color-picker">
-        <div
-          class="saturation-value"
-          ref="saturationValue"
-          @mousedown="mousedownSV"
-        >
-          <div :style="`background-color: hsl(${hue}, 100%, 50%);`">
-            <div class="point" :style="pointStyle"></div>
-          </div>
-          <div class="saturation-value-2"></div>
-          <div class="saturation-value-3"></div>
-        </div>
-        <div class="layui-color-picker-middle">
-          <div style="flex: auto">
-            <div class="hue-slider" ref="hueSlider" @mousedown="mousedownHue">
-              <div class="slider" :style="hueSliderStyle"></div>
-            </div>
-            <div
-              class="alpha-slider"
-              ref="alphaSlider"
-              @mousedown="mousedownAlpha"
-            >
-              <div class="slider" :style="alphaSliderStyle"></div>
-              <div
-                :style="`background: linear-gradient(to right, rgba(0,0,0,0), ${colorObj.rgb});width: 100%;height: 100%`"
-              ></div>
-            </div>
-          </div>
-          <div class="color-diamond">
-            <div
-              :style="`background-color: ${colorObj.rgba};width: 100%;height: 100%;box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), inset 0 0 4px rgba(0, 0, 0, .25);`"
-            ></div>
-          </div>
-        </div>
-        <div class="color-value">
-          <div class="hex">
-            <label>
-              <input
-                :value="colorObj.hex8"
-                @input="hexChange"
-                spellcheck="false"
-              />
-            </label>
-          </div>
-          <div class="rgba-r">
-            <label>
-              <input :value="red" @input="redChange" />
-            </label>
-          </div>
-          <div class="rgba-g">
-            <label>
-              <input :value="green" @input="greenChange" />
-            </label>
-          </div>
-          <div class="rgba-b">
-            <label>
-              <input :value="blue" @input="blueChange" />
-            </label>
-          </div>
-          <div class="rgba-a">
-            <label>
-              <input :value="alpha" @input="alphaChange" />
-            </label>
-          </div>
-        </div>
-        <ul class="preset">
-          <li
-            v-for="item in preset"
-            :key="item"
-            :style="`background-color: ${item}`"
-            @click="presetChange(item)"
-          ></li>
-        </ul>
-      </div>
-    </template>
-  </lay-dropdown>
-</template>
-
 <script lang="ts">
 export default {
   name: "LayColorPicker",
@@ -484,3 +392,95 @@ function hex2rgba(s: any) {
   }
 }
 </script>
+
+<template>
+  <lay-dropdown>
+    <div class="layui-unselect layui-colorpicker">
+      <span>
+        <span
+          class="layui-colorpicker-trigger-span"
+          lay-type=""
+          :style="`background-color: ${colorObj.rgba}`"
+        >
+          <i class="layui-icon layui-colorpicker-trigger-i layui-icon-down"></i>
+        </span>
+      </span>
+    </div>
+    <template #content>
+      <div class="layui-color-picker">
+        <div
+          class="saturation-value"
+          ref="saturationValue"
+          @mousedown="mousedownSV"
+        >
+          <div :style="`background-color: hsl(${hue}, 100%, 50%);`">
+            <div class="point" :style="pointStyle"></div>
+          </div>
+          <div class="saturation-value-2"></div>
+          <div class="saturation-value-3"></div>
+        </div>
+        <div class="layui-color-picker-middle">
+          <div style="flex: auto">
+            <div class="hue-slider" ref="hueSlider" @mousedown="mousedownHue">
+              <div class="slider" :style="hueSliderStyle"></div>
+            </div>
+            <div
+              class="alpha-slider"
+              ref="alphaSlider"
+              @mousedown="mousedownAlpha"
+            >
+              <div class="slider" :style="alphaSliderStyle"></div>
+              <div
+                :style="`background: linear-gradient(to right, rgba(0,0,0,0), ${colorObj.rgb});width: 100%;height: 100%`"
+              ></div>
+            </div>
+          </div>
+          <div class="color-diamond">
+            <div
+              :style="`background-color: ${colorObj.rgba};width: 100%;height: 100%;box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), inset 0 0 4px rgba(0, 0, 0, .25);`"
+            ></div>
+          </div>
+        </div>
+        <div class="color-value">
+          <div class="hex">
+            <label>
+              <input
+                :value="colorObj.hex8"
+                @input="hexChange"
+                spellcheck="false"
+              />
+            </label>
+          </div>
+          <div class="rgba-r">
+            <label>
+              <input :value="red" @input="redChange" />
+            </label>
+          </div>
+          <div class="rgba-g">
+            <label>
+              <input :value="green" @input="greenChange" />
+            </label>
+          </div>
+          <div class="rgba-b">
+            <label>
+              <input :value="blue" @input="blueChange" />
+            </label>
+          </div>
+          <div class="rgba-a">
+            <label>
+              <input :value="alpha" @input="alphaChange" />
+            </label>
+          </div>
+        </div>
+        <ul class="preset">
+          <li
+            v-for="item in preset"
+            :key="item"
+            :style="`background-color: ${item}`"
+            @click="presetChange(item)"
+          ></li>
+        </ul>
+      </div>
+    </template>
+  </lay-dropdown>
+</template>
\ No newline at end of file
diff --git a/src/component/table/index.vue b/src/component/table/index.vue
index a1211d48..0883b8c9 100644
--- a/src/component/table/index.vue
+++ b/src/component/table/index.vue
@@ -235,6 +235,7 @@ onMounted(() => {
         <LayPage
           :total="page.total"
           :limit="page.limit"
+          v-model="page.current"
           show-page
           show-limit
           show-skip
@@ -246,4 +247,4 @@ onMounted(() => {
       </div>
     </div>
   </div>
-</template>
+</template>
\ No newline at end of file