Merge branch 'develop' of gitee.com:layui-vue/layui-vue into develop

example/docs/zh-CN/components/countup.md

@@ -0,0 +1,123 @@
+::: title 基础使用
+:::
+
+::: demo
+
+<template>
+  <h1 style="padding:20px 15px">
+      <lay-count-up :end-val="countVal" :decimalPlaces="2"></lay-count-up>
+  </h1>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const countVal = 2862.9888;
+    return {
+      
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 自定义前缀&后缀
+:::
+
+::: demo
+
+<template>
+  <!-- 属性 -->
+  <lay-card style="width:200px;height:120px;display:inline-block; border:1px solid #eeeeee;box-shadow: 3px 3px 5px #888888">
+    <h1 style="padding:20px 15px">
+      <lay-count-up :end-val="countVal2" prefix="¥" suffix="↑"></lay-count-up>
+    </h1>
+  </lay-card>
+  <!-- 插槽 -->
+  <lay-card style="width:200px;height:120px;display:inline-block; margin-left:50px; border:1px solid #eeeeee;box-shadow: 3px 3px 5px #888888">
+    <h1 style="padding:20px 15px">
+      <lay-count-up :end-val="18" :duration="1">
+        <template #prefix>
+          <span style="font-size:75%">雷雨&nbsp</span>
+        </template>
+        <template #suffix>
+          <span style="font-size:75%">
+            <sub>℃</sub> ⛈
+          </span>
+        </template>
+      </lay-count-up>
+    </h1>
+  </lay-card>
+  <lay-button @click="handlerClick" type="primary" border="blue" size="sm" style="margin:0px 30px;">更新</lay-button>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const countVal2 = ref(98626);
+    const handlerClick = () => {
+      countVal2.value += 1000;
+    }
+    return {
+      handlerClick,
+    }
+  }
+}
+</script>
+
+:::
+
+::: title countUp 属性
+:::
+
+::: table
+
+| 属性          | 描述                                                         | 类型           | 默认值 | 可选值         |
+| ------------- | ------------------------------------------------------------ | -------------- | ------ | -------------- |
+| endVal        | 显示的值                                                     | number         | `0`    | —             |
+| decimalPlaces | 小数位数                                                     | number         | `0`    | —             |
+| useGrouping   | 使用千位分隔符                                               | boolean        | `true` | `true` `false` |
+| separator     | 分隔符                                                       | string         | `,`    | —             |
+| useEasing     | 使用动画                                                     | boolean        | `true` | `true` `false` |
+| duration      | 动画持续时间                                                 | number         | `2`    | —             |
+| prefix        | 前缀                                                         | string         | —    | —             |
+| suffix        | 后缀                                                         | string         | —     | —             |
+| option        | 选项，用于多实例的总体设置，<br>props会覆盖option的属性，使用更灵活 | CountUpOptions | —     | 参见[CountUpOptions](#opts)   |
+
+:::
+
+
+::: title CountUpOptions 属性
+::: 
+
+::: table
+
+| 属性          | 描述                                                         | 类型           | 默认值 | 可选值         |
+| ------------- | ------------------------------------------------------------ | -------------- | ------ | -------------- |
+| startVal      | 开始值                                                      | number         | `0`    | —             |
+| decimalPlaces | 小数位数                                                     | number         | `0`    | —             |
+| useGrouping   | 使用千位分隔符                                               | boolean        | `true` | `true` `false` |
+| separator     | 分隔符                                                       | string         | `,`    | —             |
+| useEasing     | 使用动画                                                     | boolean        | `true` | `true` `false` |
+| duration      | 动画持续时间                                                 | number         | `2`    | —             |
+| prefix        | 前缀                                                         | string         | —    | —             |
+| suffix        | 后缀                                                         | string         | —     | —             |   |
+
+:::
+
+::: title countUp 插槽
+:::
+
+::: table
+
+| 名称    | 描述     | 参数 |
+| -----   | -------- | ---- |
+| prefix  | 前缀     | --   |
+| suffix  | 后缀     | --   |
+
+:::

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

@@ -119,11 +119,9 @@ export default {
 }
 </script>
 
-
-
 :::
 
-::: title 设置每页数量选择范围
+::: title 完整分页
 :::
 
 ::: demo
@@ -269,8 +267,6 @@ export default {
 | showLimit   | 显示每页数量 | `false` |
 | showRefresh | 显示刷新按钮 | `false` |
 | showSkip    | 显示跳转     | `false` |
-| pages       | 显示切页按钮数量     | `10` |
-| limits       | 切换每页数量的选择项     | `[10,20,30,40,50]` |
 
 :::
 
@@ -282,7 +278,6 @@ export default {
 | 事件 | 描述     | 参数                  |
 | ---- | -------- | --------------------- |
 | jump | 切换回调 | { current: 当前页面 } |
-| limit | 每页数量变化 | 变化后的值 |
 
 :::
 

example/docs/zh-CN/guide/changelog.md

@@ -12,16 +12,18 @@
 <lay-timeline>
   <lay-timeline-item title="0.3.x">
   <ul> 
-      <a name="0-3-0"> </a> 
+      <a name="0-3-1"> </a> 
       <li> 
-        <h3>0.3.0 <span class="layui-badge-rim">2021-12-25</span></h3> 
+        <h3>0.3.1 <span class="layui-badge-rim">2021-12-28</span></h3> 
         <ul> 
-          <li>[新增] slider 滑块 range 属性, 支持区间过程。</li>
+          <li>[新增] count-up 数字滚动组件。</li>
+          <li>[新增] slider 滑块 range 属性, 支持区间取值。</li>
           <li>[新增] button 按钮 disabled 属性, 删除 type 属性 disabled 值。</li>  
           <li>[修复] 演示站点剪贴板功能，http下不能使用的问题。</li>  
           <li>[修复] checkbox 复选框 modelValue 属性必填警告。</li>  
           <li>[修复] formItem 内下拉框组件校验不通过边框未标红问题。</li>  
           <li>[修复] rate 评分 mouseleave 事件绑定警告。</li>
+          <li>[修复] npm 安装 layui-vue 不必要的依赖警告。</li>  
           <li>[集成] eslint, prettier 规范插件 。</li>  
           <li>[升级] icons-vue 1.0.2。</li>  
         </ul> 

example/docs/zh-CN/guide/member.md

@@ -46,6 +46,98 @@
     </lay-row>
 </lay-card>
 
+<lay-card>
+    <lay-row>
+        <lay-col md="1">
+            <lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/702/2106738_wanglin300_1639442830.png"></lay-avatar>
+        </lay-col>
+        <lay-col md="2">
+            halo
+        </lay-col>
+        <lay-col md="6">
+            焦点：slider
+        </lay-col>
+        <lay-col md="4">
+            地点：China Beijing
+        </lay-col>
+        <lay-col md="5">
+            生态：暂无
+        </lay-col>
+        <lay-col md="6">
+            其他：Gitee Github
+        </lay-col>
+    </lay-row>
+</lay-card>
+
+<lay-card>
+    <lay-row>
+        <lay-col md="1">
+            <lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/1871/5614379_xumisky_1607057214.png"></lay-avatar>
+        </lay-col>
+        <lay-col md="2">
+            须弥
+        </lay-col>
+        <lay-col md="6">
+            焦点：layui-vue
+        </lay-col>
+        <lay-col md="4">
+            地点：未知
+        </lay-col>
+        <lay-col md="5">
+            生态：暂无
+        </lay-col>
+        <lay-col md="6">
+            其他：Gitee Github
+        </lay-col>
+    </lay-row>
+</lay-card>
+
+<lay-card>
+    <lay-row>
+        <lay-col md="1">
+            <lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2469/7407590_wcg666_1640528494.png"></lay-avatar>
+        </lay-col>
+        <lay-col md="2">
+            Sight
+        </lay-col>
+        <lay-col md="6">
+            焦点：count-up backtop
+        </lay-col>
+        <lay-col md="4">
+            地点：未知
+        </lay-col>
+        <lay-col md="5">
+            生态：暂无
+        </lay-col>
+        <lay-col md="6">
+            其他：Gitee Github
+        </lay-col>
+    </lay-row>
+</lay-card>
+
+<lay-card>
+    <lay-row>
+        <lay-col md="1">
+            <lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2596/7789823_finalsummer_1613993823.png"></lay-avatar>
+        </lay-col>
+        <lay-col md="2">
+            finalsummer
+        </lay-col>
+        <lay-col md="6">
+            焦点：layer-vue
+        </lay-col>
+        <lay-col md="4">
+            地点：未知
+        </lay-col>
+        <lay-col md="5">
+            生态：暂无
+        </lay-col>
+        <lay-col md="6">
+            其他：Gitee Github
+        </lay-col>
+    </lay-row>
+</lay-card>
+
 <br>
 
 ::: title 社区伙伴

example/src/layouts/Layout.vue

@@ -43,7 +43,7 @@
           </a>
         </li>
         <li class="layui-nav-item">
-          <a href="javascript:void(0)"> 0.3.0 </a>
+          <a href="javascript:void(0)"> 0.3.1 </a>
         </li>
       </ul>
     </lay-header>
@@ -333,6 +333,12 @@ export default {
         subTitle: 'backtop',
         path: '/zh-CN/components/backtop',
       },
+      {
+        id: 43,
+        title: '数字滚动',
+        subTitle: 'countup',
+        path: '/zh-CN/components/countup',
+      },
     ]
 
     const handleClick = function (menu) {

example/src/router/zh-CN.ts

@@ -304,6 +304,11 @@ const zhCN = [
             component: () => import('../../docs/zh-CN/components/backtop.md'),
             meta: { title: '返回顶部' },
           },
+          {
+            path: '/zh-CN/components/countup',
+            component: () => import('../../docs/zh-CN/components/countup.md'),
+            meta: { title: '数字滚动' },
+          },
         ],
       },
       {

example/src/view/component.vue

@@ -308,6 +308,12 @@ export default {
             subTitle: 'carousel',
             path: '/zh-CN/components/carousel',
           },
+          {
+            id: 43,
+            title: '数字滚动',
+            subTitle: 'countUp',
+            path: '/zh-CN/components/countup',
+          },
         ],
       },
       {

example/src/view/index.vue

@@ -26,7 +26,7 @@
           >
         </div>
         <div class="site-version">
-          <span>当前版本：v<cite class="site-showv">0.3.0</cite></span>
+          <span>当前版本：v<cite class="site-showv">0.3.1</cite></span>
           <span
             ><router-link
               class="layui-inline site-down"
@@ -44,7 +44,7 @@
           rel="nofollow"
           class="site-star"
         >
-          <i class="layui-icon"></i> Star <cite id="getStars">336</cite>
+          <i class="layui-icon"></i> Star <cite id="getStars">521</cite>
         </a>
         <a
           href="https://gitee.com/layui-vue"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "author": "sleeprite",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",
@@ -35,9 +35,10 @@
     "@layui/icons-vue": "^1.0.2",
     "@layui/layer-vue": "^1.2.2",
     "async-validator": "^4.0.7",
-    "vue-router": "^4.0.12",
+    "countup.js": "^2.0.8",
     "evtd": "^0.2.3",
-    "vue": "^3.2.26"
+    "vue": "^3.2.26",
+    "vue-router": "^4.0.12"
   },
   "devDependencies": {
     "@babel/core": "^7.15.8",
@@ -77,10 +78,5 @@
     "current node",
     "last 2 versions and > 2%",
     "ie > 10"
-  ],
+  ]
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
-  }
 }

src/index.ts

@@ -37,6 +37,7 @@ import LaySwitch from "./module/switch/index";
 import LayCollapse from "./module/collapse/index";
 import LayCollapseItem from "./module/collapseItem/index";
 import LayContainer from "./module/container/index";
+import LayCountUp from "./module/countUp/index";
 import LayMenu from "./module/menu/index";
 import LayMenuItem from "./module/menuItem/index";
 import LayMenuChildItem from "./module/menuChildItem/index";
@@ -128,6 +129,7 @@ const components: Record<string, IDefineComponent> = {
   LayModal,
   LayTooltip,
   LayInputNumber,
+  LayCountUp,
 };
 
 const install = (app: App, options?: InstallOptions): void => {

src/module/countUp/index.ts

@@ -0,0 +1,9 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+import type { IDefineComponent } from "../type/index";
+
+Component.install = (app: App) => {
+  app.component(Component.name || "LayCountUp", Component);
+};
+
+export default Component as IDefineComponent;

src/module/countUp/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <slot name="prefix"></slot>
+  <span ref="counterRef" style="font-family:sans-serif;" />
+  <slot name="suffix"></slot>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+import { CountUp } from 'countup.js'
+import type { CountUpOptions } from 'countup.js'
+
+export interface LayCountupProps {
+  endVal?: number; //显示的值
+  decimalPlaces?: number; // 小数位数
+  useGrouping?: boolean; // 是否使用千位分隔符
+  separator?: string; // 千位分隔符
+  useEasing?: boolean;  // 使用动画
+  duration?: number; // 动画持续时间
+  prefix?: string; // 前缀
+  suffix?: string; // 后缀
+  option?: CountUpOptions; // 选项
+}
+
+const props = withDefaults(defineProps<LayCountupProps>(), {
+  endVal: 0,
+  option: () => {
+    return {}
+  }
+});
+
+const counterRef = ref<HTMLDivElement | null>(null);
+const instance = ref<CountUp | null>(null);
+const {decimalPlaces,useGrouping,separator,useEasing,duration,prefix,suffix} = props;
+const defaultOptions: CountUpOptions = {
+  startVal: 0, // 开始数字
+  decimalPlaces: decimalPlaces ? decimalPlaces : 0, // 小数位数
+  useEasing: useEasing ? useEasing : true,  // 使用缓动动画
+  duration: duration ? duration : 2, // 动画持续时间
+  useGrouping: useGrouping ? useGrouping : true, // 是否使用千位分隔符
+  separator:separator ? separator : ",", // 千位分隔符
+  decimal:".", // 小数点分隔符
+  prefix: prefix ? prefix : "", // 前缀
+  suffix: suffix ? suffix : "", // 后缀
+}
+
+watch(
+  () => props.endVal,
+  () => {
+    update(props.endVal)
+  }
+);
+
+onMounted(() => {
+  createCounter()
+})
+
+const createCounter = () => {
+  if (!counterRef.value) return
+  const opts: CountUpOptions = Object.assign(defaultOptions, props.option)
+  instance.value = new CountUp(counterRef?.value, props.endVal, opts);
+  start();
+}
+
+const start = () => {
+  if (!instance.value) return
+  instance?.value.start();
+}
+
+const update = (newEndVal: number) => {
+  if (!instance.value) return
+  instance?.value.update(newEndVal);
+}
+
+</script>

src/module/page/index.vue

@@ -1,57 +1,60 @@
 <template>
   <div class="layui-box layui-laypage layui-laypage-default">
-    <span v-if="showCount" class="layui-laypage-count">共 {{ total }} 条 {{ maxPage }}页</span>
+    <span v-if="showCount" class="layui-laypage-count">共 {{ total }} 条</span
-    <a
+    ><a
       href="javascript:;"
       class="layui-laypage-prev"
       :class="[currentPage === 1 ? 'layui-disabled' : '']"
       @click="prev()"
+      ><slot v-if="slots.prev" name="prev"></slot>
+      <template v-else>上一页</template></a
     >
-      <slot v-if="slots.prev" name="prev"></slot>
-      <template v-else>上一页</template>
-    </a>
     <template v-if="showPage">
       <template v-for="index of totalPage" :key="index">
-        <span v-if="index === currentPage" class="layui-laypage-curr">
+        <span v-if="index === currentPage" class="layui-laypage-curr"
-          <em class="layui-laypage-em" :class="[theme ? 'layui-bg-' + theme : '']"></em>
+          ><em
-          <em>{{ index }}</em>
+            class="layui-laypage-em"
-        </span>
+            :class="[theme ? 'layui-bg-' + theme : '']"
-        <a v-else href="javascript:;" @click="jump(index)">{{ index }}</a>
+          ></em
+          ><em>{{ index }}</em></span
+        >
+        <a v-else href="javascript:;" @click="jump(index)">
+          {{ index }}
+        </a>
       </template>
     </template>
 
     <a
       href="javascript:;"
       class="layui-laypage-next"
-      :class="[currentPage === maxPage ? 'layui-disabled' : '']"
+      :class="[currentPage === totalPage ? 'layui-disabled' : '']"
       @click="next()"
+      ><slot v-if="slots.next" name="next"></slot>
+      <template v-else>下一页</template></a
+    ><span v-if="showLimit" class="layui-laypage-limits"
+      ><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 v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh"
+      ><i class="layui-icon layui-icon-refresh"></i></a
+    ><span v-if="showSkip" class="layui-laypage-skip"
+      >到第<input
+        v-model="currentPageShow"
+        type="number"
+        class="layui-input layui-input-number"
+      />页<button type="button" class="layui-laypage-btn" @click="jumpPage()">
+        确定
+      </button></span
     >
-      <slot v-if="slots.next" name="next"></slot>
-      <template v-else>下一页</template>
-    </a>
-    <span v-if="showLimit" class="layui-laypage-limits">
-      <select v-model="inlimit">
-        <option v-for="val of limits" :key="val" :value="val">{{ val }} 条/页</option>
-      </select>
-    </span>
-    <a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh">
-      <i class="layui-icon layui-icon-refresh"></i>
-    </a>
-    <span v-if="showSkip" class="layui-laypage-skip">
-      到第
-      <input v-model="currentPageShow" type="number" class="layui-input layui-input-number" />页
-      <button
-        type="button"
-        class="layui-laypage-btn"
-        @click="jumpPage()"
-        :disabled="currentPageShow > maxPage"
-      >确定</button>
-    </span>
   </div>
 </template>
 
 <script setup name="LayPage" lang="ts">
-import { defineProps, Ref, ref, watch, useSlots, computed } from "vue";
+import { defineProps, Ref, ref, watch, useSlots, computed, ComputedRef } from "vue";
 
 const slots = useSlots();
 
@@ -66,8 +69,6 @@ const props = withDefaults(
     showLimit?: boolean | string;
     showInput?: boolean | string;
     showRefresh?: boolean | string;
-    pages?: number,
-    limits?: number[]
   }>(),
   {
     limit: 10,
@@ -78,8 +79,6 @@ const props = withDefaults(
     showLimit: true,
     showInput: false,
     showRefresh: false,
-    pages: 10,
-    limits: () => [10, 20, 30, 40, 50]
   }
 );
 const limits = ref(props.limits);
@@ -98,8 +97,7 @@ const totalPage = computed(() => {
 })
 const currentPage: Ref<number> = ref(1);
 const currentPageShow: Ref<number> = ref(currentPage.value);
-
+const emit = defineEmits(["jump"]);
-const emit = defineEmits(["jump", "limit"]);
 
 const prev = function () {
   if (currentPage.value === 1) {
@@ -109,7 +107,7 @@ const prev = function () {
 };
 
 const next = function () {
-  if (currentPage.value === maxPage.value) {
+  if (currentPage.value === totalPage.value) {
     return;
   }
   currentPage.value++;
@@ -125,7 +123,7 @@ const jumpPage = function () {
 
 watch(inlimit, function () {
   currentPage.value = 1;
-  maxPage.value = Math.ceil(props.total / inlimit.value);
+  totalPage.value = Math.ceil(props.total / inlimit.value);
 });
 
 watch(currentPage, function () {