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

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

Browse Source
This commit is contained in:
halo
2022-03-09 07:29:22 +08:00
parent 1a388229f6 2c5bf79041
commit e9a3642733
30 changed files with 515 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
example/docs/zh-CN/components/color.md
View File

@@ -111,7 +111,7 @@ export default {
<template>
<ul class="layui-row site-doc-color site-doc-necolor">
<li class="layui-col-md12">
<div style="background-color: @global-neutral-color-1;">
<div style="background-color: #FAFAFA;">
<p>#FAFAFA</p><p>
</p></div>
</li>

73
example/docs/zh-CN/components/countup.md
View File

@@ -7,8 +7,8 @@
::: demo
<template>
<h1 style="padding:20px 15px">
<lay-count-up :end-val="countVal" :decimalPlaces="2"></lay-count-up>
<h1 style="padding:20px 15px; font-family: sans-serif">
<lay-count-up :startVal="0" :endVal="3600" :decimalPlaces="2"></lay-count-up>
</h1>
</template>
@@ -17,9 +17,9 @@ import { ref } from 'vue'
export default {
setup() {
const countVal = 2862.9888;
return {
}
}
}
@@ -38,14 +38,14 @@ export default {
<br/>
<!-- 属性 -->
<lay-card style="width:200px;height:120px;display:inline-block;">
<h1 style="padding:20px 15px">
<h1 style="padding:20px 15px; font-family: sans-serif">
<lay-count-up :end-val="countVal2" prefix="¥" suffix="↑"></lay-count-up>
</h1>
</lay-card>
<!-- 插槽 -->
<lay-card style="width:200px;height:120px;display:inline-block;">
<h1 style="padding:20px 15px">
<lay-count-up :end-val="18" :duration="1">
<lay-count-up :end-val="18" :duration="2000">
<template #prefix>
<span style="font-size:75%">雷雨&nbsp</span>
</template>
@@ -84,15 +84,18 @@ export default {
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| ------------- | ------------------------------------------------------------ | -------------- | ------ | -------------- |
| startVal | 起始值 | number | `0` | — |
| endVal | 显示的值 | number | `0` | — |
| decimal | 小数点 | string | `.` | — |
| decimalPlaces | 小数位数 | number | `0` | — |
| useGrouping | 使用千位分隔符 | boolean | `true` | `true` `false` |
| useGrouping | 是否使用千位分隔符 | boolean | `true` | `true` `false` |
| separator | 分隔符 | string | `,` | — |
| useEasing | 使用动画 | boolean | `true` | `true` `false` |
| duration | 动画持续时间 | number | `2` | — |
| autoplay | 是否自动播放 | boolean | `true` | `true` `false` |
| useEasing | 是否使用动画 | boolean | `true` | `true` `false` |
| easingFn | 动画类型 | Array \| Function \| string | `easeInOutCubic` | — |
| duration | 动画持续时间,单位: ms | number | `2000` | — |
| prefix | 前缀 | string | — | — |
| suffix | 后缀 | string | — | — |
| option | 选项，用于多实例的总体设置，<br>props会覆盖option的属性，使用更灵活 | CountUpOptions | — | 参见[CountUpOptions](#opts) |
:::
@@ -108,23 +111,45 @@ export default {
:::
::: title Count Up Options 属性
::: title Count Up 动画类型
:::
::: 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 | — | — | |
::: describe 可使用贝塞尔曲线定义动画
:::
```
easingFn: [0.75, 0, 0.25, 1]
```
::: describe 也可以使用自定义函数
:::
```
const easeOutElastic = (n) => {
return n === 0
? 0
: n === 1
? 1
: (2 ** (-10 * n)) * Math.sin((n * 10 - 0.75) * ((2 * Math.PI) / 3)) + 1
}
easingFn: easeOutElastic
```
::: describe 通过以下字符串快速设置动画类型
:::
```
easeInSine easeOutSine easeInOutSine
easeInQuad easeOutQuad easeInOutQuad
easeInCubic easeOutCubic easeInOutCubic
easeInQuart easeOutQuart easeInOutQuart
easeInQuint easeOutQuint easeInOutQuint
easeInExpo easeOutExpo easeInOutExpo
easeInCirc easeOutCirc easeInOutCirc
easeInBack easeOutBack easeInOutBack
linear
```
::: previousNext countUp
:::

6
example/docs/zh-CN/components/load.md
View File

@@ -1,6 +1,12 @@
::: anchor
:::
::: title 基本介绍
:::
::: describe 页面正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。
:::
::: title 基础使用
:::

252
example/docs/zh-CN/components/menu.md
View File

@@ -14,20 +14,22 @@
<template>
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys1">
<lay-menu-item title="首页" id="1"></lay-menu-item>
<lay-menu-item title="用户" id="2"></lay-menu-item>
<lay-menu-item title="角色" id="3"></lay-menu-item>
<lay-sub-menu title="目录" id="7">
<lay-menu-item title="菜单1" id="8"></lay-menu-item>
<lay-menu-item title="菜单2" id="9"></lay-menu-item>
<lay-sub-menu title="菜单3" id="10">
<lay-menu-item title="菜单3-1" id="11"></lay-menu-item>
<lay-menu-item title="菜单3-2" id="12"></lay-menu-item>
<lay-sub-menu title="菜单3-3" id="13">
<lay-menu-item title="菜单3-3-1" id="14"></lay-menu-item>
<lay-menu-item title="菜单3-3-2" id="15"></lay-menu-item>
<lay-menu-item title="菜单3-3-3" id="16"></lay-menu-item>
</lay-sub-menu>
<lay-menu-item id="1">首页</lay-menu-item>
<lay-menu-item id="2">首页</lay-menu-item>
<lay-menu-item id="3">首页</lay-menu-item>
<lay-sub-menu id="7">
<template #title>
首页
</template>
<lay-menu-item id="8">首页</lay-menu-item>
<lay-menu-item id="9">首页</lay-menu-item>
<lay-sub-menu title="菜单" id="10">
<template #title>
首页
</template>
<lay-menu-item id="11">首页</lay-menu-item>
<lay-menu-item id="12">首页</lay-menu-item>
<lay-menu-item id="13">首页</lay-menu-item>
</lay-sub-menu>
</lay-sub-menu>
</lay-menu>
@@ -58,16 +60,22 @@ export default {
<template>
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys2" :tree="true">
<lay-menu-item title="首页" id="1"></lay-menu-item>
<lay-menu-item title="用户" id="2"></lay-menu-item>
<lay-menu-item title="角色" id="3"></lay-menu-item>
<lay-sub-menu title="目录" id="7">
<lay-menu-item title="菜单" id="8"></lay-menu-item>
<lay-menu-item title="菜单" id="9"></lay-menu-item>
<lay-menu-item id="1">首页</lay-menu-item>
<lay-menu-item id="2">首页</lay-menu-item>
<lay-menu-item id="3">首页</lay-menu-item>
<lay-sub-menu id="7">
<template #title>
首页
</template>
<lay-menu-item id="8">首页</lay-menu-item>
<lay-menu-item id="9">首页</lay-menu-item>
<lay-sub-menu title="菜单" id="10">
<lay-menu-item title="菜单" id="11"></lay-menu-item>
<lay-menu-item title="菜单" id="12"></lay-menu-item>
<lay-menu-item title="菜单" id="13"></lay-menu-item>
<template #title>
首页
</template>
<lay-menu-item id="11">首页</lay-menu-item>
<lay-menu-item id="12">首页</lay-menu-item>
<lay-menu-item id="13">首页</lay-menu-item>
</lay-sub-menu>
</lay-sub-menu>
</lay-menu>
@@ -99,16 +107,22 @@ export default {
<template>
<lay-menu level="true" v-model:selectedKey="selectedKey" inverted="true" v-model:openKeys="openKeys3" :tree="true">
<lay-menu-item title="首页" id="1"></lay-menu-item>
<lay-menu-item title="用户" id="2"></lay-menu-item>
<lay-menu-item title="角色" id="3"></lay-menu-item>
<lay-sub-menu title="目录" id="7">
<lay-menu-item title="菜单" id="8"></lay-menu-item>
<lay-menu-item title="菜单" id="9"></lay-menu-item>
<lay-sub-menu title="菜单" id="10">
<lay-menu-item title="菜单" id="11"></lay-menu-item>
<lay-menu-item title="菜单" id="12"></lay-menu-item>
<lay-menu-item title="菜单" id="13"></lay-menu-item>
<lay-menu-item id="1">首页</lay-menu-item>
<lay-menu-item id="2">首页</lay-menu-item>
<lay-menu-item id="3">首页</lay-menu-item>
<lay-sub-menu id="7">
<template #title>
首页
</template>
<lay-menu-item id="8">首页</lay-menu-item>
<lay-menu-item id="9">首页</lay-menu-item>
<lay-sub-menu id="10">
<template #title>
首页
</template>
<lay-menu-item id="11">首页</lay-menu-item>
<lay-menu-item id="12">首页</lay-menu-item>
<lay-menu-item id="13">首页</lay-menu-item>
</lay-sub-menu>
</lay-sub-menu>
</lay-menu>
@@ -140,16 +154,44 @@ export default {
<template>
<lay-menu v-model:selectedKey="selectedKey" theme="light" v-model:openKeys="openKeys4" :tree="true">
<lay-menu-item title="首页" id="1"></lay-menu-item>
<lay-menu-item title="用户" id="2"></lay-menu-item>
<lay-menu-item title="角色" id="3"></lay-menu-item>
<lay-sub-menu title="目录" id="7">
<lay-menu-item title="菜单" id="8"></lay-menu-item>
<lay-menu-item title="菜单" id="9"></lay-menu-item>
<lay-menu-item id="1">
<template #title>
菜单
</template>
</lay-menu-item>
<lay-menu-item id="2">
<template #title>
菜单
</template>
</lay-menu-item>
<lay-menu-item id="3">
<template #title>
菜单
</template>
</lay-menu-item>
<lay-sub-menu id="7">
<template #title>
目录
</template>
<lay-menu-item id="8">
菜单
</lay-menu-item>
<lay-menu-item id="9">
菜单
</lay-menu-item>
<lay-sub-menu title="菜单" id="10">
<lay-menu-item title="菜单" id="11"></lay-menu-item>
<lay-menu-item title="菜单" id="12"></lay-menu-item>
<lay-menu-item title="菜单" id="13"></lay-menu-item>
<template #title>
目录
</template>
<lay-menu-item id="11">
菜单
</lay-menu-item>
<lay-menu-item id="12">
菜单
</lay-menu-item>
<lay-menu-item id="13">
菜单
</lay-menu-item>
</lay-sub-menu>
</lay-sub-menu>
</lay-menu>
@@ -241,19 +283,107 @@ export default {
<br/>
<br/>
<lay-menu v-model:selectedKey="selectedKey" v-model:tree="isTree" v-model:openKeys="openKeys6" :collapse="collapse">
<lay-menu-item title="首页" id="1"></lay-menu-item>
<lay-menu-item title="用户" id="2"></lay-menu-item>
<lay-menu-item title="角色" id="3"></lay-menu-item>
<lay-menu-item id="1">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-menu-item id="2">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-menu-item id="3">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-sub-menu title="目录" id="7">
<lay-menu-item title="菜单1" id="8"></lay-menu-item>
<lay-menu-item title="菜单2" id="9"></lay-menu-item>
<lay-sub-menu title="菜单3" id="10">
<lay-menu-item title="菜单3-1" id="11"></lay-menu-item>
<lay-menu-item title="菜单3-2" id="12"></lay-menu-item>
<lay-sub-menu title="菜单3-3" id="13">
<lay-menu-item title="菜单3-3-1" id="14"></lay-menu-item>
<lay-menu-item title="菜单3-3-2" id="15"></lay-menu-item>
<lay-menu-item title="菜单3-3-3" id="16"></lay-menu-item>
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
<lay-menu-item id="8">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-menu-item id="9">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-sub-menu id="10">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
<lay-menu-item id="11">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-menu-item id="12">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-sub-menu id="13">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
<lay-menu-item id="14">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-menu-item id="15">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
<lay-menu-item id="16">
<template #icon>
<lay-icon type="layui-icon-home"></lay-icon>
</template>
<template #title>
首页
</template>
</lay-menu-item>
</lay-sub-menu>
</lay-sub-menu>
</lay-sub-menu>
@@ -287,13 +417,13 @@ export default {
::: table
| 属性 | 描述 | 备注 |
| ------------------- | ------ | ---- |
| v-model:selectedKey | 选中项 | -- |
| v-model:openKeys | 打开项 | -- |
| theme | 菜单主题 | `dark` `light` |
| inverted | 特殊的激活样式 | `true` `false` |
| level | 菜单层级 | `true` `false` |
| 属性 | 描述 | 备注 |
| ------------------- | -------------- | -------------- |
| v-model:selectedKey | 选中项 | -- |
| v-model:openKeys | 打开项 | -- |
| theme | 菜单主题 | `dark` `light` |
| inverted | 特殊的激活样式 | `true` `false` |
| level | 菜单层级 | `true` `false` |
:::

3
example/docs/zh-CN/components/modal.md
View File

@@ -16,6 +16,7 @@
<script>
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
export default {
setup() {
const visible1 = ref(false)
@@ -158,7 +159,7 @@ export default {
<template>
<lay-button @click="changeVisible5" type="primary">远程窗体</lay-button>
<lay-layer title="加载 Iframe 内容" width="500px" height="400px" maxmin="true" v-model="visible5" move="true" :type="type5" content="http://www.pearadmin.com"></lay-layer>
<lay-layer title="加载 Iframe 内容" :area="['500px','400px']" maxmin="true" v-model="visible5" move="true" :type="type5" content="http://www.pearadmin.com"></lay-layer>
</template>
<script>

6
example/docs/zh-CN/components/msg.md
View File

@@ -1,6 +1,12 @@
::: anchor
:::
::: title 基本介绍
:::
::: describe 全局展示操作反馈信息。
:::
::: title 基础使用
:::

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

@@ -11,6 +11,23 @@
<template>
<lay-timeline>
<lay-timeline-item title="0.3.x">
<ul>
<a name="0-3-9"></a>
<li>
<h3>0.3.9 <span class="layui-badge-rim">2022-03-08</span></h3>
<ul>
<li>[重构] count-up 组件。</li>
<li>[新增] algolia 文档搜索引擎。</li>
<li>[新增] theme 主题 neutral 辅色配置。</li>
<li>[新增] menuItem 与 subMenu 组件 title 与 icon 插槽。</li>
<li>[新增] menu 菜单 collapse 属性, 支持折叠。</li>
<li>[修复] menu 菜单 inverted 跟随主题配置。</li>
<li>[删除] menuItem 菜单项 title 属性。</li>
<li>[删除] subMenu 菜单集 title 属性。</li>
<li>[升级] layer-vue 1.3.8 版本。</li>
</ul>
</li>
</ul>
<ul>
<a name="0-3-8"> </a>
<li>

12
example/docs/zh-CN/guide/getStarted.md
View File

@@ -5,21 +5,21 @@
<p>
<a href="http://layui-vue.pearadmin.com" style="margin-left:30px;">
<img src="https://portrait.gitee.com/uploads/avatars/namespace/2868/8605626_layui_1634311144.png" alt="layui" width="110" style="border-radius:12px;">
<img src="https://portrait.gitee.com/uploads/avatars/namespace/2868/8605626_layui_1634311144.png" alt="layui" width="105" style="border-radius:12px;">
</a>
<span style="font-size:30px;color:#e2e2e2;margin:30px;">+</span>
<span style="font-size:32px;color:#e2e2e2;margin:30px;">+</span>
<a href="http://layui-vue.pearadmin.com">
<img src="https://qn.antdv.com/vue.png" alt="layui" width="110" style="border-radius:12px;">
<img src="https://qn.antdv.com/vue.png" alt="layui" width="105" style="border-radius:12px;">
</a>
<span style="font-size:30px;color:#e2e2e2;margin:30px;">=</span>
<span style="font-size:32px;color:#e2e2e2;margin:30px;">=</span>
<a href="http://layui-vue.pearadmin.com">
<img src="../../../src/assets/logo.jpg" alt="layui" width="110" style="border-radius:12px;">
<img src="../../../src/assets/logo.jpg" alt="layui" width="105" style="border-radius:12px;">
</a>
</p>
<br>
::: describe 使用 (npm, yarn, pnpm) 工具安装 layui vue, 然后你就可以使用打包工具, 如 vite
::: describe 使用 npm 工具安装 layui vue, 然后你就可以使用打包工具, 如 vite rollup.
:::
```

4
example/docs/zh-CN/guide/introduce.md
View File

@@ -3,7 +3,7 @@
<p>
<a href="http://layui-vue.pearadmin.com">
<img src="../../../src/assets/logo-new.png" alt="layui" width="400">
<img src="../../../src/assets/logo-new.png" alt="layui" width="440">
</a>
</p>
@@ -14,7 +14,7 @@ layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库 ,
:::
<lay-timeline>
<lay-timeline-item title="2021年，layui vue 孵化" simple></lay-timeline-item>
<lay-timeline-item title="2021年，layui-vue 首个版本发布" simple></lay-timeline-item>
<lay-timeline-item title="2017年，layui 里程碑版本 2.0 发布" simple></lay-timeline-item>
<lay-timeline-item title="2016年，layui 首个版本发布" simple></lay-timeline-item>
<lay-timeline-item title="2015年，layui 孵化" simple></lay-timeline-item>

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

@@ -145,7 +145,7 @@
::: title 社区伙伴
:::
::: block
::: quote
在 人 的 尺 度 里，世 界 既 无 始，也 无 终，唯 一 的 信 仰 是，总 有 人 认 得 你 站 在 暴 风 雪 里 的 样 子。
:::