[新增] iconPicker 组件 page 属性, 支持分页

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

@@ -65,10 +65,6 @@ export default {
   }
 }
 </script>
-
-<style>
-
-</style>
 :::
 
 |  |  |  |

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

@@ -1,5 +1,27 @@
 ::: demo
 
+<template>
+  <lay-icon-picker type="layui-icon-face-smile"></lay-icon-picker>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const icon = ref("layui-icon-home")
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: demo
+
 <template>
   <lay-icon-picker v-model="icon" type="layui-icon-face-smile"></lay-icon-picker>
 </template>
@@ -19,3 +41,25 @@ export default {
 </script>
 
 :::
+
+::: demo
+
+<template>
+  <lay-icon-picker v-model="icon" type="layui-icon-face-smile" page></lay-icon-picker>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const icon = ref("layui-icon-home")
+
+    return {
+    }
+  }
+}
+</script>
+
+:::

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "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

@@ -4415,7 +4415,7 @@ body .layui-table-tips .layui-layer-content {
 	z-index: 899;
 	min-width: 100%;
 	border: 1px solid #eee;
-	max-height: 300px;
+	max-height: 360px;
 	overflow-y: auto;
 	background-color: #fff;
 	border-radius: 2px;

src/module/iconPicker/index.vue

@@ -15,10 +15,7 @@
     <template #content>
       <div class="layui-iconpicker-view layui-iconpicker-scroll">
         <div class="layui-iconpicker-search">
-          <div
+          <div class="layui-form layui-input-wrap layui-input-wrap-prefix">
-            class="layui-form layui-input-wrap layui-input-wrap-prefix"
-            lay-filter="LAY-ICON-FORM-DF-3"
-          >
             <div class="layui-input-prefix">
               <i class="layui-icon layui-icon-search"></i>
             </div>
@@ -28,7 +25,6 @@
               placeholder="search"
               autocomplete="off"
               class="layui-input"
-              lay-filter="LAY-ICON-INPUT-3"
               lay-affix="clear"
             />
             <div class="layui-input-suffix layui-input-affix-event layui-hide">
@@ -39,7 +35,7 @@
         <div class="layui-iconpicker-list">
           <ul>
             <li
-              v-for="icon in icons"
+              v-for="icon in icones"
               :key="icon"
               @click="selectIcon(icon.class)"
               :class="[selectedIcon === icon.class ? 'layui-this' : '']"
@@ -49,6 +45,33 @@
             </li>
           </ul>
         </div>
+        <div class="layui-iconpicker-page" v-if="page">
+          <div
+            class="layui-box layui-laypage layui-laypage-default"
+            id="layui-laypage-1"
+          >
+            <span class="layui-laypage-count">共 {{ total }} 个</span
+            ><a
+              href="javascript:;"
+              @click="prev()"
+              class="layui-laypage-prev"
+              :class="[currentPage === 1 ? 'layui-disabled' : '']"
+              ><i class="layui-icon layui-icon-left"></i></a
+            ><span class="layui-laypage-curr"
+              ><em class="layui-laypage-em"></em
+              ><em>{{ currentPage }} / {{ totalPage }}</em></span
+            ><span class="layui-laypage-spr">…</span
+            ><a href="javascript:;" class="layui-laypage-last" title="尾页"
+              >14</a
+            ><a
+              href="javascript:;"
+              :class="[currentPage === totalPage ? 'layui-disabled' : '']"
+              class="layui-laypage-next"
+              @click="next()"
+              ><i class="layui-icon layui-icon-right"></i
+            ></a>
+          </div>
+        </div>
       </div>
     </template>
   </lay-dropdown>
@@ -58,10 +81,16 @@
 import { defineProps, Ref, ref } from 'vue'
 import icons from '../resource/icons'
 
-const props =
+const props = withDefaults(
   defineProps<{
     modelValue?: string
-  }>()
+    page?: boolean
+  }>(),
+  {
+    modelValue: 'layui-icon-face-smile',
+    page: false,
+  }
+)
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -71,4 +100,36 @@ const selectIcon = function (icon: String) {
   emit('update:modelValue', icon)
   selectedIcon.value = icon
 }
+
+const icones: Ref = ref([])
+
+const total = icons.length
+const totalPage = total / 12
+const currentPage: Ref = ref(1)
+
+if (props.page) {
+  icones.value = icons.slice(0, 12)
+} else {
+  icones.value = icons
+}
+
+const next = function () {
+  if (currentPage.value === totalPage) {
+    return
+  }
+  currentPage.value = currentPage.value + 1
+  const start = (currentPage.value - 1) * 12
+  const end = start + 12
+  icones.value = icons.slice(start, end)
+}
+
+const prev = function () {
+  if (currentPage.value === 1) {
+    return
+  }
+  currentPage.value = currentPage.value - 1
+  const start = (currentPage.value - 1) * 12
+  const end = start + 12
+  icones.value = icons.slice(start, end)
+}
 </script>