theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.骨架屏组件封装

Browse Source
This commit is contained in:
dingyongya
2021-12-29 15:59:15 +08:00
parent 0ea613dbb0 61325cad20
commit 62f5bb6c18
188 changed files with 3550 additions and 4962 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
example/docs/zh-CN/components/backtop.md
View File

@@ -1,12 +1,11 @@
::: title 基础使用
###### 回到顶部组件的默认样式，通过滑动来查看页面右下角的正方形按钮。
###### 回到顶部组件的默认样式，<code>lay-backtop</code> 会自动寻找最近的可滚动祖先元素，也可以使用 `target` 属性指定触发滚动事件的元素，通过滑动来查看页面右下角的正方形按钮。
:::
::: demo
<template>
<lay-backtop target=".layui-body"></lay-backtop>
<lay-backtop></lay-backtop>
</template>
:::
@@ -17,18 +16,17 @@
::: demo
<!-- 使用默认插槽自定义组件内容,也可以使用组件提供的样式属性快速定义常用样式，样式属性能满足大多数场景,lay-backtop组件可搭配 lay-tooltip 组件使用-->
<!-- 使用默认插槽自定义组件内容,也可以使用组件提供的样式属性快速定义常用样式，样式属性能满足大多数场景。lay-backtop组件可搭配 lay-tooltip 组件使用-->
<template>
<!-- 使用默认插槽自定义 -->
<lay-tooltip content="插槽自定义 backtop " position="left">
<lay-backtop target=".layui-body" :showHeight="0" :bottom="160" bgcolor="#5FB878" circular disabled>
<lay-backtop @click="handlerClick" :showHeight="0" :bottom="160" bgcolor="#5FB878" circle disabled>
<lay-icon type="layui-icon-dialogue" size="30px"></lay-icon>
</lay-backtop>
</lay-tooltip>
<!-- 使用样式属性自定义 -->
<lay-tooltip content="属性自定义 backtop " position="left">
<lay-backtop target=".layui-body" :bottom="100" bgcolor="#5FB878" icon="layui-icon-up" circular>
</lay-backtop>
<lay-backtop :bottom="100" bgcolor="#5FB878" icon="layui-icon-up" circle></lay-backtop>
</lay-tooltip>
</template>
@@ -51,20 +49,18 @@ export default {
:::
::: title 滚动容器
::: title 挂载容器
###### 通过设置 <code>target</code> 和 <code>position="absolute"</code>参数 ，可对特定容器进行返回顶部操作
###### 通过设置 <code>target</code> 和 <code>position="absolute"</code>参数，可对特定容器进行返回顶部操作
:::
::: demo
<template>
<!-- 需要用一个 div 包裹触发滚动事件的目标元素和 lay-backtop 组件 -->
<div class="scrollContainer" style="width:700px; height:300px;">
<div id="scrollContent" style="overflow-y:auto; overflow-x:auto; width:700px; height:300px;">
<p v-for="(n,index) in 50" :key="n" style="height:32px;border-bottom:0.5px solid #5FB878;margin-bottom:10px;line-height:35px">
{{index + ". &nbsp;layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式"}}
</p>
<div class="wrapper" style="width:700px; height:300px;">
<div id="scrollContent" style="overflow-y:auto; overflow-x:auto; width:700px; height:300px;background-color:whitesmoke;padding:10px;">
<lay-panel v-for="(n,index) in 50" :key="n" style="margin-top:5px;margin-bottom:5px;padding:10px;">内容</lay-panel>
</div>
<lay-backtop target="#scrollContent" :showHeight="100" :bottom="30" position="absolute"></lay-backtop>
</div>
@@ -80,26 +76,23 @@ export default {
::: table
| 属性 | 说明 | 类型 | 可选值 |
| ------------------------- | --------------------------------------------- | ------- | -------------------------- |
| <strong>通用属性</strong> |
| target | 可选，触发滚动事件的对象 | string | CSS 选择器 \| window(默认) |
| showHeight | 可选，滚动高度达到该值后显示回到顶部按钮 | number | 200(默认) |
| disabled | 可选，禁用点击返回顶部 | boolean | true \| false(默认) |
| <strong>组件样式</strong> |
| position | 可选，定位方式，特定容器内部需设置为 absolute | string | absolute \| fixed(默认) |
| right | 可选，按钮距离页面右边距，单位 px | number | 30(默认) |
| bottom | 可选，按钮距离页面底部位置，单位 px | number | 40(默认) |
| bgcolor | 可选，背景颜色 | string | \#9F9F9F(默认) |
| opacity | 可选，不透明度 | number | 0.0-1.0 |
| color | 可选，前景颜色 | string | #FFFFFF |
| borderRadius | 可选，添加圆角 | string | 2px(默认) |
| circular | 可选, 使用圆形按钮 | boolean | true \| false(默认)
| <strong>图标样式</strong> |
| icon | 可选,图标类型 | string | layui-icon-top(默认) |
| iconSize | 可选,图标大小 | number | 30 |
| iconPrefix | 可选,图标前缀 layui-icon layui-icon-top | string | layui-icon(默认) |
| iconColor | 可选,图标颜色 | string | #FFFFFF(默认) |
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| ------------ | --------------------------------------------- | ---------------- | ---------------- | ------------------------------ |
| target | 可选，触发滚动事件的对象 | string \| Window | `window` | `CSS/Element 选择器` `window` |
| showHeight | 可选，滚动高度达到该值后<br>显示回到顶部按钮 | number | `200` | — |
| disabled | 可选，禁用点击返回顶部 | boolean | `false` | `true` `false` |
| position | 可选，定位方式，特定容器内部<br>需设置为 absolute | string | `fixed` | `absolute` `fixed` |
| right | 可选，按钮距离页面右边距 | number | `30` | — |
| size | 可选，按钮大小 | string | —— | `medium` `small` |
| bottom | 可选，按钮距离页面底部位置 | number | `40` | `40` |
| bgcolor | 可选，背景颜色 | string | `#9F9F9F` | — |
| opacity | 可选，不透明度 | number | `0.95` | `0-1` |
| color | 可选，前景颜色 | string | `#FFFFFF` | — |
| borderRadius | 可选，添加圆角 | number \| string | `2` | e: 2 \| 2px \|50% |
| circle | 可选，使用圆形按钮 | boolean | `false` | `true` `false` |
| icon | 可选，图标类型 | string | `layui-icon-top` | `lay-icon`组件支持的所有类型 |
| iconSize | 可选，图标大小 | number | `30` | `30` |
| iconColor | 可选，图标颜色 | string | `#FFFFFF` | — |
:::
@@ -108,7 +101,7 @@ export default {
::: table
| 事件名 | 说明 | 回调参数 |
| 事件 | 描述 | 参数 |
| ------ | -------------------------- | -------- |
| click | 点击回到顶部按钮的回调函数 | event |
@@ -119,8 +112,8 @@ export default {
::: table
| 插槽名 | 说明 |
| 插槽 | 说明 |
| ------ | ---------- |
| — | 自定义内容 |
| default| 自定义内容 |
:::

68
example/docs/zh-CN/components/button.md
View File

@@ -1,7 +1,7 @@
::: title 基础使用
:::
::: demo 使用 lay-button 标签, 创建一个按钮
::: demo 使用 `lay-button` 标签, 创建一个按钮
<template>
<lay-button type="primary">原始按钮</lay-button>
@@ -29,7 +29,7 @@ export default {
::: title 简约按钮
:::
::: demo 使用 border 属性设置 主要按钮 边框主题
::: demo 使用 `border` 属性设置边框主题
<template>
<lay-button type="primary">原始按钮</lay-button>
@@ -57,7 +57,7 @@ export default {
::: title 按钮尺寸
:::
::: demo 传入 size 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs`
::: demo 传入 `size` 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs`
<template>
<lay-button type="primary" size="lg">原始按钮</lay-button>
@@ -85,7 +85,7 @@ export default {
::: title 流式按钮
:::
::: demo 传入 fluid 属性, 创建最大化按钮
::: demo 传入 `size` 属性, 创建最大化按钮
<template>
<lay-button type="primary" fluid>最大化按钮</lay-button>
@@ -111,7 +111,7 @@ export default {
::: title 圆角按钮
:::
::: demo 传入 radius 属性，创建圆角按钮
::: demo 传入 `radius` 属性，创建圆角按钮
<template>
<lay-button type="primary" radius>原始按钮</lay-button>
@@ -139,7 +139,7 @@ export default {
::: title 按钮分组
:::
::: demo 使用 lay-button-group 标签, 创建一个按钮组
::: demo 使用 `lay-button-group` 标签, 创建一个按钮组
<template>
<div>
@@ -173,7 +173,7 @@ export default {
::: title 图标按钮
:::
::: demo 结合 lay-icon 组件, 创建图标按钮
::: demo 结合 `lay-icon` 组件, 创建图标按钮
<template>
<lay-button-container>
@@ -199,7 +199,7 @@ export default {
::: title 按钮容器
:::
::: demo 使用 lay-button-container 标签, 创建一个按钮容器
::: demo 使用 `lay-button-container` 标签, 创建一个按钮容器
<template>
<lay-button-container>
@@ -226,7 +226,7 @@ export default {
::: title 加载按钮
:::
::: demo 传入 loading 属性, 控制按钮的加载状态
::: demo 传入 `loading` 属性, 控制按钮的加载状态
<template>
<lay-button-container>
@@ -255,7 +255,7 @@ export default {
::: title 事件处理
:::
::: demo 使用 @click 设置单击回调
::: demo 使用 `@click` 设置单击回调
<template>
<lay-button type="default" @click="clickHandle">单击事件</lay-button>
@@ -280,31 +280,57 @@ export default {
:::
::: title 按钮属性
::: title Button 属性
:::
::: table
| 属性 | 描述 | 可选值 |
| ------ | ------ | --------------------------------------------- |
| type | 主题 | `primary` `normal` `warm` `danger` `disabled` |
| size | 尺寸 | `lg` `sm` `xs` |
| fluid | 最大化 | `true` `false` |
| radius | 圆角 | `true` `false` |
| border | 边框 | `green` `blue` `orange` `red` `black` |
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| ----------- | -------- | ------- | --------- | ----------------------------------|
| type | 主题 | string | `primary` | `primary` `normal` `warm` `danger` |
| size | 尺寸 | string | -- | `lg` `sm` `xs` |
| fluid | 最大化 | boolean | `false` | `true` `false` |
| radius | 圆角 | boolean | `false` | `true` `false` |
| border | 边框 | string | `green` | `green` `blue` `orange` `red` |
| disabled | 禁用 | boolean | `false` | `true` `false` |
| loading | 加载 | boolean | `false` | `true` `false` |
| native-type | 原生类型 | string | `button` | `button` `submit` `reset` |
:::
::: title 按钮事件
::: title Button 插槽
:::
::: table
| 名称 | 描述 | 参数 |
| ----- | -------- | ---- |
| default | 默认内容 | -- |
:::
::: title Button Group 属性
:::
::: table
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| ----------- | -------- | ------- | --------- | ----------------------------------|
| - | - | - | - |
:::
::: title Button Group 插槽
:::
::: table
| 事件 | 描述 | 参数 |
| ----- | -------- | ---- |
| click | 单击事件 | `--` |
| default | 默认内容 | -- |
:::
::: comment
:::
:::

123
example/docs/zh-CN/components/countup.md Normal file
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 | 后缀 | -- |
:::

57
example/docs/zh-CN/components/slider.md
View File

@@ -1,7 +1,10 @@
::: title 横向
:::
::: demo
<template>
<lay-slider v-model="value1" :disabled="true"></lay-slider>
<lay-slider v-model="value1" :disabled="false"></lay-slider>
</template>
<script>
@@ -19,10 +22,12 @@ export default {
:::
::: title 纵向
:::
::: demo
<template>
<lay-slider v-model="value2" :vertical="vertical" :disabled="true"></lay-slider>
<lay-slider v-model="value2" :vertical="true" :disabled="true"></lay-slider>
</template>
<script>
@@ -31,11 +36,9 @@ import { ref } from 'vue'
export default {
setup() {
const vertical = ref(true)
const value2 = ref(10)
return {
vertical,
value2
}
}
@@ -44,5 +47,49 @@ export default {
:::
::: title 区间
:::
::: demo
<template>
<lay-slider v-model="value3" :range="true"></lay-slider>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const value3 = ref([20,50])
return {
value3
}
}
}
</script>
:::
::: title 纵向区间
:::
::: demo
<template>
<lay-slider v-model="value3" :range="true" :vertical="true"></lay-slider>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const value4 = ref([20,50])
return {
value4
}
}
}
</script>
:::
::: comment
:::
:::

45
example/docs/zh-CN/components/table.md
View File

@@ -270,24 +270,24 @@ export default {
:::
::: title 表格属性
::: title Table 属性
:::
::: table
| 属性 | 描述 | 可选值 |
| ------------------------ | ---------- | -------------- |
| columns | 列配置 | -- |
| dataSource | 数据源 | -- |
| checkbox | 开启复现框 | -- |
| id | 主键 | -- |
| selectedKeys ( v-model ) | 选中项 | -- |
| default-toolbar | 开启工具栏 | `lg` `md` `sm` |
| size | 尺寸 | -- |
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| -------------------- | ----------------------------- | ---- | ------ | -------------- |
| columns | 列配置 - [更多](#tableColumn) | -- | -- | -- |
| dataSource | 数据源 | -- | -- | -- |
| checkbox | 开启复选框 | -- | -- | -- |
| id | 主键 | -- | -- | -- |
| v-model:selectedKeys | 选中项 | -- | -- | -- |
| default-toolbar | 工具栏 | -- | -- | -- |
| size | 尺寸 | -- | -- | `lg` `md` `sm` |
:::
::: title 表格事件
::: title Table 事件
:::
::: table
@@ -299,29 +299,32 @@ export default {
:::
::: title 表格插槽
::: title Table 插槽
:::
::: table
| 插槽 | 描述 | 默认 |
| 插槽 | 描述 | 参数 |
| ------- | ------------ | ---- |
| toolbar | 自定义工具栏 | -- |
:::
::: title 列配置
### <div id="tableColumn"></div>
::: title Table Column 属性
:::
::: table
| 插槽 | 描述 | 默认 |
| ------- | ------------ | ---- |
| title | 列标题 | -- |
| key | 数据字段 | -- |
| customSlot | 插槽名称 | -- |
| width | 宽度 | -- |
| 插槽 | 描述 | 默认 |
| ---------- | ---------- | ---- |
| title | 列标题 | -- |
| key | 数据字段 | -- |
| customSlot | 自定义插槽 | -- |
| width | 宽度 | -- |
:::
::: comment
:::
:::

20
example/docs/zh-CN/guide/changelog.md
View File

@@ -10,6 +10,26 @@
::: demo
<template>
<lay-timeline>
<lay-timeline-item title="0.3.x">
<ul>
<a name="0-3-1"> </a>
<li>
<h3>0.3.1 <span class="layui-badge-rim">2021-12-28</span></h3>
<ul>
<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>
</li>
</ul>
</lay-timeline-item>
<lay-timeline-item title="0.2.x">
<ul>
<a name="0-2-9"> </a>

150
example/docs/zh-CN/guide/member.md
View File

@@ -1,10 +1,154 @@
::: title 贡献代码
::: title 团队成员
:::
<lay-card>
<lay-row>
<lay-col md="1">
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/1611/4835367_Jmysy_1578975358.png"></lay-avatar>
</lay-col>
<lay-col md="2">
就眠仪式
</lay-col>
<lay-col md="6">
焦点：layui-vue
</lay-col>
<lay-col md="4">
地点：China Beijing
</lay-col>
<lay-col md="5">
生态：Pear Admin
</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/1755/5267877_jobin_jia_1608578025.png"></lay-avatar>
</lay-col>
<lay-col md="2">
落小梅
</lay-col>
<lay-col md="6">
焦点：tree table
</lay-col>
<lay-col md="4">
地点：China Hunan
</lay-col>
<lay-col md="5">
生态：Pear Admin
</lay-col>
<lay-col md="6">
其他：Gitee Github
</lay-col>
</lay-row>
</lay-card>
::: describe
<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 社区伙伴
:::
::: block
在 人 的 尺 度 里，世 界 既 无 始，也 无 终，唯 一 的 信 仰 是，总 有 人 认 得 你 站 在 暴 风 雪 里 的 样 子。
:::
::: describe
[![Giteye chart](https://chart.giteye.net/gitee/layui-vue/layui-vue/DBC9Z6HQ.png)](https://giteye.net/chart/DBC9Z6HQ)
:::
:::

3
example/docs/zh-CN/guide/problem.md
View File

@@ -1,2 +1,5 @@
::: title 常见问题
:::
::: comment
:::

37
example/src/components/LayCode.vue
View File

@@ -34,9 +34,40 @@ const toggle = function () {
const copy = function () {
const foundCodes = meta.value.getElementsByClassName('language-html')
if (document.hasFocus()) {
const text = foundCodes[0].textContent || "";
const foundCode = foundCodes[0];
let successful = false;
// 使用原生系统剪贴板，只适用被授权安全的站点，http下不能使用
if (navigator.clipboard && document.hasFocus()) {
const text = foundCode.textContent || "";
navigator.clipboard.writeText(text);
successful = true;
} else if (window.getSelection()){
// 使用document.execCommand
// 代码div显示状态直接使用，隐藏状态则创建一个div
var range = document.createRange();
let copyDiv;
if (show.value) {
range.selectNode(foundCode);
} else {
copyDiv = document.createElement('div');
copyDiv.innerHTML = foundCode.innerHTML;
copyDiv.style.position="fixed";
copyDiv.style.left="-9999px";
document.body.appendChild(copyDiv);
range.selectNode(copyDiv);
}
window.getSelection()?.addRange(range);
try {
successful = document.execCommand('copy');
} catch(err) {
successful = false;
console.error(err);
}
window.getSelection()?.removeAllRanges();
copyDiv?.remove();
}
if (successful) {
layer.msg("复制成功", { icon : 1, time: 1000}, ()=>{})
} else {
layer.msg("复制失败", { icon : 2, time: 1000}, ()=>{})
@@ -155,4 +186,4 @@ function handleScroll() {
padding-left: 10px;
padding-right: 10px;
}
</style>
</style>

2
example/src/components/LayTableBox.vue
View File

@@ -28,9 +28,9 @@
.lay-table-box table th {
color: #666;
font-weight: 500;
white-space: nowrap; /*表头内容强制在一行显示*/
background-color: #fafafa;
}
.lay-table-box table th,
.lay-table-box table td {
white-space: nowrap;
}

8
example/src/layouts/Layout.vue
View File

@@ -43,7 +43,7 @@
</a>
</li>
<li class="layui-nav-item">
<a href="javascript:void(0)"> 0.2.9 </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) {

5
example/src/router/zh-CN.ts
View File

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

6
example/src/view/component.vue
View File

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

4
example/src/view/index.vue
View File

@@ -26,7 +26,7 @@
>
</div>
<div class="site-version">
<span>当前版本：v<cite class="site-showv">0.2.9</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"