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

This commit is contained in:
鄢鹏权 2021-12-28 03:01:56 +00:00 committed by Gitee
commit a2b7828026
15 changed files with 374 additions and 66 deletions

View File

@ -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 | 后缀 | -- |
:::

View File

@ -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 | 每页数量变化 | 变化后的值 |
:::

View File

@ -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>

View File

@ -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 社区伙伴

View File

@ -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) {

View File

@ -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: '数字滚动' },
},
],
},
{

View File

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

View File

@ -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"

View File

@ -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"
}
}
]
}

View File

@ -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 => {

View File

@ -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;

View File

@ -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>

View File

@ -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>
<a
<span v-if="showCount" class="layui-laypage-count"> {{ total }} </span
><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">
<em class="layui-laypage-em" :class="[theme ? 'layui-bg-' + theme : '']"></em>
<em>{{ index }}</em>
</span>
<a v-else href="javascript:;" @click="jump(index)">{{ index }}</a>
<span v-if="index === currentPage" class="layui-laypage-curr"
><em
class="layui-laypage-em"
:class="[theme ? 'layui-bg-' + theme : '']"
></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", "limit"]);
const emit = defineEmits(["jump"]);
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 () {