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

LICENSE

@@ -17,4 +17,4 @@ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
 FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
 COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

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>[修复] 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"
-    }
-  }
 }

shims-vue.d.ts

@@ -22,4 +22,4 @@ interface ImportMeta {
     DEV: boolean
     SSR: boolean
   }
-}
+}

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,11 +123,11 @@ 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 () {
   currentPageShow.value = currentPage.value;
   emit("jump", { current: currentPage.value });
 });
-</script>
+</script>