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
commit e9a3642733
30 changed files with 515 additions and 377 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
README.en.md
View File

@ -7,7 +7,7 @@
<a href="https://coveralls.io/r/sentsin/layui?branch=master"><img alt="Test Coverage" src="https://img.shields.io/coveralls/sentsin/layui/master.svg"></a>
</p>
**[🔶 Explore the docs »](http://layui-vue.pearadmin.com)**
**[🔶 Explore the docs »](http://www.layui-vue.com)**
An enterprise-class UI components based on Layui and Vue.
@ -73,14 +73,6 @@ This project follows the [all-contributors](https://github.com/layui-vue/layui-v
<img src="https://contrib.rocks/image?repo=layui-vue/layui-vue" />
</a>
## Backers
Thank you to all our backers! 🙏 [[Become a backers](https://opencollective.com/layui-vue#backer)]
## Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/layui-vue#sponsor)]
## Open Source Licence
## Licence
Layui vue is licensed under the [MIT license](https://opensource.org/licenses/MIT).

30
README.md
View File

@ -1,4 +1,4 @@
## 介绍
## Introduction
<p>
<a href="https://www.npmjs.com/package/@layui/layui-vue"><img src="https://img.shields.io/npm/v/@layui/layui-vue.svg?sanitize=true" alt="Version"></a>
@ -7,15 +7,15 @@
<a href="https://coveralls.io/r/sentsin/layui?branch=master"><img alt="Test Coverage" src="https://img.shields.io/coveralls/sentsin/layui/master.svg"></a>
</p>
**[🔶 Explore the docs »](http://layui-vue.pearadmin.com)**
**[🔶 Explore the docs »](http://www.layui-vue.com)**
layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.
An enterprise-class UI components based on Layui and Vue.
**Run with code Sandbox.**
[![Edit layui-vue](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/11mvy)
## 特性
## Features
A few of the things you can do with layui vue:
@ -25,9 +25,9 @@ A few of the things you can do with layui vue:
* Support theme customization
* Support internationalization
## 安装
## Get Started
使用 npm 安装.
Use npm to install.
```bash
npm i @layui/layui-vue
@ -43,7 +43,7 @@ import '@layui/layui-vue/lib/index.css'
createApp(App).use(layui).mount('#app')
```
我们在[主页](http://layui-vue.pearadmin.com)上有不少例子，这是让您入门的第一个：
We have several examples on the [website](http://layui-vue.pearadmin.com). Here is the first one to get you started:
```
<template>
@ -53,19 +53,19 @@ createApp(App).use(layui).mount('#app')
</template>
```
## 反馈
## Feedback
Feel free to send us feedback on [file an issue](https://github.com/layui-vue/layui-vue/issues/new). Feature requests are always welcome. If you wish to contribute, please take a quick look at the [guidelines](./CONTRIBUTING.md)!
If there's anything you'd like to chat about, please feel free to join our [Gitter chat](https://gitter.im/layui-vue/community)!
## 构建
## Build Process
- `build` Packaged component library
Please take a look at the [contributing guidelines](./CONTRIBUTING.md) for a detailed process on how to build your application as well as troubleshooting information.
## 贡献
## Contributors
This project follows the [all-contributors](https://github.com/layui-vue/layui-vue/graphs/contributors) specification and is brought to you by these [awesome contributors](https://github.com/layui-vue/layui-vue/graphs/contributors).
@ -73,14 +73,6 @@ This project follows the [all-contributors](https://github.com/layui-vue/layui-v
<img src="https://contrib.rocks/image?repo=layui-vue/layui-vue" />
</a>
## 支持
Thank you to all our backers! 🙏 [[Become a backers](https://opencollective.com/layui-vue#backer)]
## 赞助
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/layui-vue#sponsor)]
## 开源
## Licence
Layui vue is licensed under the [MIT license](https://opensource.org/licenses/MIT).

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
在 人 的 尺 度 里，世 界 既 无 始，也 无 终，唯 一 的 信 仰 是，总 有 人 认 得 你 站 在 暴 风 雪 里 的 样 子。
:::

142
example/src/components/LaySearch.vue
View File

@ -1,124 +1,40 @@
<template>
<select :name="name" lay-verify="required" />
<div
class="layui-unselect layui-form-select layui-search"
:class="[openState ? 'layui-form-selected' : '']"
@click="open"
style="margin-left: 20px"
>
<div class="layui-select-title">
<input
type="text"
placeholder="Search"
class="layui-input layui-unselect"
:value="name"
style="
background: rgba(255, 255, 255, 0.05);
border: none;
color: rgba(255, 255, 255, 0.7);
width: 196px;
height: 34px;
"
@input="change"
/><i class="layui-edge"></i>
</div>
<dl class="layui-anim layui-anim-upbit" style="">
<dd v-if="menus.length <= 0" class="layui-select-tips">无内容</dd>
<dd
v-for="data in menus"
v-else
:key="data"
:value="name"
class="layui-select-tips"
@click="jump(data)"
>
{{ data.title }}
</dd>
</dl>
</div>
<div id="docsearch"></div>
</template>
<script setup name="LaySelect" lang="ts">
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Recordable } from '../../../src/types'
// @ts-ignore
import docsearch from "@docsearch/js";
import { onMounted } from "vue";
import "@docsearch/css";
const props = defineProps<{
datas?: Recordable[]
}>()
const route = useRoute()
const router = useRouter()
const openState = ref(false)
const menus = ref(props.datas)
const name = ref('')
const open = function () {
openState.value = !openState.value
}
const jump = function (data: any) {
name.value = data.title
router.push(data.path)
}
const change = function (e: any) {
name.value = e.target.value
if (e.target.value === '') {
menus.value = props.datas
} else {
menus.value = searchList(e.target.value, props.datas)
}
}
const searchList = function (str: string, container: any) {
var newList = []
var startChar = str.charAt(0)
var strLen = str.length
for (var i = 0; i < container.length; i++) {
var obj = container[i]
var isMatch = false
for (var p in obj) {
if (typeof obj[p] == 'function') {
obj[p]()
} else {
var curItem = ''
if (obj[p] != null) {
curItem = obj[p]
}
for (var j = 0; j < curItem.length; j++) {
if (curItem.charAt(j) == startChar) {
if (curItem.substring(j).substring(0, strLen) == str) {
isMatch = true
break
}
}
}
}
}
if (isMatch) {
newList.push(obj)
}
}
return newList
}
onMounted(() => {
docsearch({
container: "#docsearch",
appId: "Y8NT7MICRP",
apiKey: "fb23e7bbc001828e56c50d66e6be26b2",
indexName: "indexName"
});
});
</script>
<style>
.layui-search .layui-anim::-webkit-scrollbar {
width: 6px;
height: 6px;
.DocSearch-Button {
outline: none;
box-shadow: none;
}
.layui-search .layui-anim::-webkit-scrollbar-corner {
background: #f6f6f6;
.DocSearch-Button .DocSearch-Search-Icon,
.DocSearch-Button-Placeholder {
color: whitesmoke;
}
.layui-search .layui-anim::-webkit-scrollbar-thumb {
background: #e6e6e6;
border-radius: 2px;
:root {
--docsearch-logo-color: var(--global-primary-color);
--docsearch-primary-color: var(--global-primary-color) ;
--docsearch-searchbox-background: rgba(255, 255, 255, 0.05);
--docsearch-searchbox-focus-background: rgba(255, 255, 255, 0.05);
--docsearch-container-background: rgba(0, 0, 0, 0.1);;
}
.layui-search .layui-anim::-webkit-scrollbar-track {
background: white;
border-radius: 2px;
}
</style>
</style>

3
example/src/plugin/usePlayground.ts
View File

@ -59,8 +59,7 @@ export const usePlayGround = (source: string, convertSetupSugar: boolean) => {
}
const encoded = utoa(JSON.stringify(originCode))
const link = `https://layui-vue.gitee.io/layui-vue-playground/#${encoded}`
//const link = `http://localhost:3001/layui-vue-playground/#${encoded}`
const link = `https://layui-vue.gitee.io/sandbox-vue/#${encoded}`
return {
code,
encoded,

2
example/src/view/extend.vue
View File

@ -13,7 +13,7 @@
<ul class="layui-row layui-col-space6">
<li class="layui-col-sm12">
<div class="alone">
<a href="https://gitee.com/layui-vue/layer-vue" target="_blank"
<a href="http://layer.layui-vue.com" target="_blank"
>layer - vue<cite>通用型弹出层组件</cite></a
>
</div>

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

@ -1,20 +1,20 @@
<template>
<div
style="
margin-top: 60px;
background-color: whitesmoke;
height: 100%;
width: 100%;
"
<div class="site-container"
>
<div class="site-banner">
<div class="site-banner-main">
<div class="site-zfj site-zfj-anim">
<img src="../assets/logo.jpg" style="width: 200px;border-radius: 10px;box-shadow: 2px 0 6px rgb(0 21 41 / 35%);" />
<img
src="../assets/logo.jpg"
style="width: 220px; border-radius: 10px"
/>
</div>
<div class="layui-anim site-desc site-desc-anim">
<p class="web-font-desc">layui - vue</p>
<cite>layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.</cite>
<cite
>layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件
库.</cite
>
</div>
<div class="site-download">
<router-link class="layui-inline site-down" to="/zh-CN/guide"
@ -109,15 +109,18 @@
</div>
</template>
<style>
.site-container {
margin-top: 60px;
background-color: whitesmoke;
height: 100%;
width: 100%;
}
.site-banner {
position: relative;
height: 600px;
text-align: center;
overflow: hidden;
background-color: #393d49;
background-image: url(../assets/background.svg);
background-repeat: no-repeat;
background-size: 100%;
}
.site-banner-bg {
background-position: center 0;

52
example/src/view/material.vue
View File

@ -9,35 +9,17 @@
<div class="layui-container" style="width: 80%">
<div class="layui-row layui-col-space16">
<div class="layui-col layui-col-md6">
<div class="project-list-item">
<img
class="project-list-item-cover"
src="https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png"
/>
<div class="project-list-item-body">
<h2>Sandbox</h2>
<div class="project-list-item-text layui-text">
生命就像一盒巧克力，结果往往出人意料。
</div>
<div class="project-list-item-desc">
<span class="time">几秒前</span>
<div class="ew-head-list"></div>
</div>
</div>
</div>
</div>
<div class="layui-col layui-col-md6">
<div class="project-list-item">
<a href="https://github.com/scopewu/qrcode.vue">
<div class="project-list-item">
<img
class="project-list-item-cover"
src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png"
/>
<div class="project-list-item-body">
<h2>Sandbox</h2>
<h2>Qrcode.vue</h2>
<div class="project-list-item-text layui-text">
没有锚的船当然也可以航行，只是紧张充满你的一生。
A Vue.js component to generate qrcode。
</div>
<div class="project-list-item-desc">
<span class="time">几秒前</span>
@ -45,21 +27,39 @@
</div>
</div>
</div>
</a>
</div>
<div class="layui-col layui-col-md6">
<a href="https://github.com/rstacruz/nprogress">
<div class="project-list-item">
<img
class="project-list-item-cover"
src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png"
/>
<div class="project-list-item-body">
<h2>Nprogress</h2>
<div class="project-list-item-text layui-text">
For slim progress bars like on YouTube, Medium。
</div>
<div class="project-list-item-desc">
<span class="time">几秒前</span>
<div class="ew-head-list"></div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</template>
<script>
</script>
<style>
.alone-banner {
margin-top: 60px;
height: 190px;
text-align: center;
font-weight: 300;
background-color: #009688;
color: #fff;
}
.alone-banner h1 {

5
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@layui/layui-vue",
"version": "0.3.9-alpha.2",
"version": "0.3.9-alpha.4",
"author": "就眠儀式",
"license": "MIT",
"description": "a component library for Vue 3 base on layui-vue",
@ -37,10 +37,9 @@
},
"dependencies": {
"@layui/icons-vue": "^1.0.7",
"@layui/layer-vue": "^1.3.5",
"@layui/layer-vue": "^1.3.8",
"@vueuse/core": "^7.6.2",
"async-validator": "^4.0.7",
"countup.js": "^2.0.8",
"evtd": "^0.2.3",
"vue": "^3.2.31",
"vue-i18n": "^9.1.9",

17
src/component/backTop/index.vue
View File

@ -5,7 +5,15 @@ export default {
</script>
<script lang="ts" setup>
import { ref, shallowRef, withDefaults, computed, onMounted } from "vue";
import {
ref,
shallowRef,
withDefaults,
computed,
onMounted,
onBeforeUnmount,
} from "vue";
import { useThrottle } from "@vueuse/core";
import LayIcon from "../icon/index";
import "./index.less";
@ -186,6 +194,13 @@ onMounted(() => {
scrollTarget.value = getScrollTarget();
scrollTarget.value.addEventListener("scroll", throttle(handleScroll, 300));
});
onBeforeUnmount(() => {
scrollTarget.value?.removeEventListener(
"scroll",
throttle(handleScroll, 300)
);
});
</script>
<template>

4
src/component/button/index.less
View File

@ -56,7 +56,7 @@
}
.layui-btn-primary {
border-color: @global-neutral-color-3;
border-color: @button-border-color;
background: 0 0;
color: #666;
}
@ -113,4 +113,4 @@
color: #d2d2d2 !important;
cursor: not-allowed !important;
opacity: 1;
}
}

124
src/component/countUp/index.vue
View File

@ -1,9 +1,3 @@
<template>
<slot name="prefix"></slot>
<span ref="counterRef" style="font-family: sans-serif" />
<slot name="suffix"></slot>
</template>
<script lang="ts">
export default {
name: "LayCountUp",
@ -11,77 +5,103 @@ export default {
</script>
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { CountUp } from "countup.js";
import type { CountUpOptions } from "countup.js";
import { computed, onMounted, Ref, ref, watch } from "vue";
import { TransitionPresets, useTransition } from "@vueuse/core";
export interface LayCountupProps {
startVal?: number; // 起始值
endVal?: number; //显示的值
decimal?: string; // 小数点
decimalPlaces?: number; // 小数位数
useGrouping?: boolean; // 是否使用千位分隔符
separator?: string; // 千位分隔符
autoplay?: boolean; //是否自动播放
useEasing?: boolean; // 使用动画
easingFn?: any; //动画类型
duration?: number; // 动画持续时间
prefix?: string; // 前缀
suffix?: string; // 后缀
option?: CountUpOptions; // 选项
}
const props = withDefaults(defineProps<LayCountupProps>(), {
startVal: 0,
endVal: 0,
option: () => {
return {};
},
decimal: ".",
decimalPlaces: 0,
useGrouping: true,
separator: ",",
autoplay: true,
useEasing: true,
easingFn: TransitionPresets.easeInOutCubic,
duration: 2000,
prefix: "",
suffix: "",
});
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 : "", // 后缀
let localStartVal: Ref<number> = ref(props.startVal);
const isNumber = (val: string) => !isNaN(parseFloat(val));
/**
* from: https://github.com/PanJiaChen/vue-countTo/blob/master/src/vue-countTo.vue
* @description 格式化数字
* @param num 要格式化的数字
* @returns 格式化后的数字
*/
const formatNumber = (num: number | string): string => {
if (typeof num != "number") return "0";
num = num.toFixed(props.decimalPlaces);
num += "";
const x = num.split(".");
let x1 = x[0];
const x2 = x.length > 1 ? props.decimal + x[1] : "";
const rgx = /(\d+)(\d{3})/;
if (props.separator && !isNumber(props.separator)) {
while (rgx.test(x1)) {
x1 = x1.replace(rgx, "$1" + props.separator + "$2");
}
}
return props.prefix + x1 + x2 + props.suffix;
};
const printVal = useTransition(localStartVal, {
delay: 0,
duration: props.duration,
disabled: !props.useEasing,
transition:
typeof props.easingFn === "string"
? TransitionPresets[props.easingFn]
: props.easingFn,
});
const displayValue = computed(() => formatNumber(printVal.value));
const start = function () {
localStartVal.value = props.endVal;
};
watch(
() => props.endVal,
() => {
update(props.endVal);
if (props.autoplay) {
localStartVal.value = props.endVal;
}
}
);
onMounted(() => {
createCounter();
if (props.autoplay) {
start();
}
});
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);
};
defineExpose({
start,
});
</script>
<template>
<slot name="prefix"></slot>
<!-- <span style="font-family: sans-serif" /> -->
<span>{{ displayValue }}</span>
<slot name="suffix"></slot>
</template>

2
src/component/formItem/cnValidateMessage.ts
View File

@ -29,7 +29,7 @@ export default {
len: "%s必须是长度为%s个字符",
min: "%s最小长度为%s个字符",
max: "%s最长%s个字符",
range: "%s字符长度需要在%s和%s直接",
range: "%s字符长度需要在%s和%s之间",
},
number: {
len: "%s长度必须为%s",

9
src/component/fullscreen/index.vue
View File

@ -20,10 +20,6 @@ export interface LayFullscreenProps {
immersive?: boolean;
position?: string;
zIndex?: string;
// top?: string;
// left?: string;
// width?: string;
// height?: string;
}
const props = withDefaults(defineProps<LayFullscreenProps>(), {
@ -182,11 +178,6 @@ const styleLayFullscreen = function (
) {
el.style.position = isRemove ? "" : props.position || "";
el.style.zIndex = isRemove ? "" : props.zIndex || "";
// 实验内容
// el.style.top = isRemove ? "" : (props.top || "");
// el.style.left = isRemove ? "" : (props.left || "");
// el.style.width = isRemove ? "" : (props.width || "");
// el.style.height = isRemove ? "" : (props.height || "");
};
const activeEl = computed(() => (targetEl.value = props.target));

8
src/component/layer/index.ts
View File

@ -1,8 +0,0 @@
import type { App } from "vue";
import { LayLayer } from "@layui/layer-vue";
LayLayer.install = (app: App) => {
app.component(LayLayer.name, LayLayer);
};
export default LayLayer;

14
src/component/menu/index.less
View File

@ -159,7 +159,6 @@
text-align: center;
}
//
.layui-nav.layui-nav-collapse {
width: 60px;
span {
@ -170,11 +169,10 @@
}
}
.layui-nav-tree {
width: 200px;
padding: 0;
width: 200px;
transition: all .3s;
}
.layui-nav-tree .layui-nav-item {
@ -190,7 +188,7 @@
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding: 5px 30px 5px 30px;
padding: 5px 23px 5px 23px;
}
.layui-nav-tree .layui-nav-item * {
@ -205,6 +203,10 @@
padding: 5px 0;
}
.layui-nav-tree .layui-nav-item span {
margin-left: 3px;
}
.layui-nav-tree .layui-nav-bar {
width: 5px;
height: 0;
@ -322,7 +324,7 @@
}
.layui-nav-tree.inverted .layui-this > a {
padding: 5px 24px 5px 24px;
padding: 5px 17px 5px 17px;
}
.layui-nav-tree.level {

23
src/component/menu/index.vue
View File

@ -5,7 +5,7 @@ export default {
</script>
<script setup lang="ts">
import { computed, provide } from "vue";
import { computed, provide, ref, watch } from "vue";
import "./index.less";
export interface LayMenuProps {
@ -30,14 +30,17 @@ const props = withDefaults(defineProps<LayMenuProps>(), {
collapse: false,
});
let oldOpenKeys = ref<string[]>([]);
const isTree = computed(() => props.tree);
const isCollapse = computed(() => props.collapse);
const openKeys = computed({
get() {
return props.openKeys;
},
set(val) {
emit("update:selectedKey", val);
emit("update:openKeys", val);
},
});
@ -50,9 +53,25 @@ const selectedKey = computed({
},
});
watch(
() => props.collapse,
() => {
if (props.collapse) {
// 删除所有打开
oldOpenKeys.value = props.openKeys;
emit("update:openKeys", []);
} else {
// 赋值所有打开
emit("update:openKeys", oldOpenKeys.value);
}
},
{ immediate: true }
);
provide("isTree", isTree);
provide("selectedKey", selectedKey);
provide("openKeys", openKeys);
provide("isCollapse", isCollapse);
</script>
<template>

11
src/component/menuItem/index.vue
View File

@ -27,8 +27,15 @@ const selectHandle = function () {
@click="selectHandle()"
>
<a href="javascript:void(0)">
<slot v-if="slots.default"></slot>
<span v-else>{{ title }}</span>
<i v-if="slots.icon">
<slot name="icon"></slot>
</i>
<span v-if="slots.title">
<slot name="title"></slot>
</span>
<span v-else>
<slot></slot>
</span>
</a>
</li>
</template>

19
src/component/subMenu/index.vue
View File

@ -28,6 +28,7 @@ const props = defineProps<LaySubMenuProps>();
const isTree: Ref<boolean> = inject("isTree") as Ref<boolean>;
const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
const isCollapse: Ref<boolean> = inject("isCollapse") as Ref<boolean>;
const isOpen = computed(() => {
return openKeys.value.includes(props.id);
@ -43,10 +44,12 @@ watch(isOpen, () => {
});
const openHandle = function () {
if (openKeys.value.includes(props.id)) {
openKeys.value.splice(openKeys.value.indexOf(props.id), 1);
} else {
openKeys.value.push(props.id);
if (!isCollapse.value) {
if (openKeys.value.includes(props.id)) {
openKeys.value.splice(openKeys.value.indexOf(props.id), 1);
} else {
openKeys.value.push(props.id);
}
}
};
@ -84,8 +87,12 @@ onBeforeUnmount(() => window.removeEventListener("resize", setPosition));
:class="[isOpen && isTree ? 'layui-nav-itemed' : '']"
>
<a href="javascript:void(0)" @click="openHandle()">
<slot v-if="slots.title" name="title"></slot>
<span v-else>{{ title }}</span>
<i>
<slot v-if="slots.icon" name="icon"></slot>
</i>
<span>
<slot v-if="slots.title" name="title"></slot>
</span>
<i
:class="[isOpen && !isTree ? 'layui-nav-mored' : '']"
class="layui-icon layui-icon-down layui-nav-more"

9
src/index.ts
View File

@ -3,10 +3,10 @@ import type { App, Component } from "vue";
import "./theme/index.less";
import "@layui/layer-vue/lib/index.css";
import "@layui/icons-vue/lib/index.css";
import { layer, useLayer } from "@layui/layer-vue";
import { layer } from "@layui/layer-vue";
import layerInstall from "@layui/layer-vue";
import i18n from "./language";
import LayLayer from "./component/layer/index";
import LayBacktop from "./component/backTop/index";
import LayAvatar from "./component/avatar/index";
import LayAvatarList from "./component/avatarList/index";
@ -140,7 +140,6 @@ const components: Record<string, Component> = {
LayCarousel,
LayCarouselItem,
LayColorPicker,
LayLayer,
LayTooltip,
LayInputNumber,
LaySkeleton,
@ -161,6 +160,7 @@ const install = (app: App, options?: InstallOptions): void => {
app.component(item.name || key, item);
}
app.use(i18n);
app.use(layerInstall);
};
export {
@ -223,7 +223,6 @@ export {
LayCarousel,
LayCarouselItem,
LayColorPicker,
LayLayer,
LayTooltip,
LayInputNumber,
LaySkeleton,
@ -238,6 +237,6 @@ export {
LayConfigProvider,
};
export { layer, useLayer };
export { layer };
export default { install };

2
src/theme/index.less
View File

@ -3492,4 +3492,4 @@ body .layui-util-face .layui-layer-content {
.layui-anim-fadeout {
-webkit-animation-name: layui-fadeout;
animation-name: layui-fadeout;
}
}