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

合并

Browse Source
This commit is contained in:
castleiMac
2022-04-03 20:22:33 +08:00
parent f8fb05de41 4c653112a2
commit 71c9de04f1
46 changed files with 1077 additions and 518 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
example/docs/zh-CN/components/animation.md
View File

@@ -16,51 +16,51 @@
<div class="anim">
<ul class="layui-border-box site-doc-icon site-doc-anim">
<li style="height:auto">
<div class="layui-anim layui-anim-down">顶部往下滑入</div>
<div class="layui-anim layui-anim-down" @click="replay">顶部往下滑入</div>
<div class="code">layui-anim-down</div>
</li>
<li style="height:auto">
<div class="layui-anim layui-anim-downbit">微微往下滑入</div>
<div class="layui-anim layui-anim-downbit" @click="replay">微微往下滑入</div>
<div class="code">layui-anim-downbit</div>
</li>
<li style="height:auto">
<div class="layui-anim layui-anim-up">底部往上滑入</div>
<div class="layui-anim layui-anim-up" @click="replay">底部往上滑入</div>
<div class="code">layui-anim-up</div>
</li>
<li style="height:auto">
<div class="layui-anim layui-anim-upbit">微微往上滑入</div>
<div class="layui-anim layui-anim-upbit" @click="replay">微微往上滑入</div>
<div class="code">layui-anim-upbit</div>
</li>
<li style="height:auto">
<div class="layui-anim layui-anim-scale">平滑放大</div>
<div class="layui-anim layui-anim-scale" @click="replay">平滑放大</div>
<div class="code">layui-anim-scale</div>
</li>
<li style="height:auto">
<div class="layui-anim layui-anim-scaleSpring">弹簧式放大</div>
<div class="layui-anim layui-anim-scaleSpring" @click="replay">弹簧式放大</div>
<div class="code">layui-anim-scaleSpring</div>
</li>
<li style="height:auto">
<div class="layui-anim layui-anim-scalesmall">平滑放小</div>
<div class="layui-anim layui-anim-scalesmall" @click="replay">平滑放小</div>
<div class="code">layui-anim-scalesmall</div>
</li>
<li style="height:auto">
<div class="layui-anim layui-anim-scalesmall-spring">弹簧式放小</div>
<div class="layui-anim layui-anim-scalesmall-spring" @click="replay">弹簧式放小</div>
<div class="code">layui-anim-scalesmall-spring</div>
</li>
<li style="height:auto">
<div class="layui-anim layui-anim-fadein">渐现</div>
<div class="layui-anim layui-anim-fadein" @click="replay">渐现</div>
<div class="code">layui-anim-fadein</div>
</li>
<li style="height:auto">
<div class="layui-anim layui-anim-fadeout">渐隐</div>
<div class="layui-anim layui-anim-fadeout" @click="replay">渐隐</div>
<div class="code">layui-anim-fadeout</div>
</li>
<li style="height:auto">
<div class="layui-anim layui-anim-rotate">360度旋转</div>
<div class="layui-anim layui-anim-rotate" @click="replay">360度旋转</div>
<div class="code">layui-anim-rotate</div>
</li>
<li style="height:auto">
<div class="layui-anim layui-anim-rotate layui-anim-loop">循环动画</div>
<div class="layui-anim layui-anim-rotate layui-anim-loop" @click="replay">循环动画</div>
<div class="code">追加：layui-anim-loop</div>
</li>
</ul>
@@ -72,7 +72,16 @@ import { ref } from 'vue'
export default {
setup() {
const replay = (e) => {
const el = e.currentTarget;
const targetClass = el.classList[1];
el.classList.remove(targetClass);
setTimeout(() => {
el.classList.add(targetClass);
},100)
}
return {
replay
}
}
}
@@ -102,7 +111,5 @@ export default {
:::
::: previousNext animation
:::

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

@@ -135,7 +135,5 @@ export default {
:::
::: previousNext avatar
:::

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

@@ -37,7 +37,7 @@ export default {
::: title 简约按钮
:::
::: demo 使用 `border` 属性设置边框主题
::: demo 使用 `border` 属性设置边框颜色
<template>
<lay-button>原始按钮</lay-button>

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

@@ -217,7 +217,7 @@ export default {
| default | 默认插槽 | -- |
| header | 头部插槽 | -- |
| body | 内容插槽 | -- |
| extra | 扩展插槽 | -- |
:::

64
example/docs/zh-CN/components/datePicker.md
View File

@@ -116,7 +116,69 @@ export default {
:::
::: title 时间选择
:::
::: demo
<template>
<lay-date-picker type="time" v-model="endTime5"></lay-date-picker>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const endTime5 = ref("2022-03-04 17:35:00");
return {
endTime5
}
}
}
</script>
:::
::: title 年月选择
:::
::: demo
<template>
<lay-date-picker type="yearmonth" v-model="endTime6"></lay-date-picker>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const endTime6 = ref("2022-03-04 17:35:00");
return {
endTime6
}
}
}
</script>
:::
::: title Date Picker 属性
:::
::: table
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| ------------- | ------------------------------------------------------------ | -------------- | ------ | -------------- |
| v-model | 当前时间 | `string` | -- | — |
| type | 选择类型 | `string` | `date` | `date` `datetime` `year` `month` `time` `yearmonth` |
:::
::: previousNext transfer
:::

38
example/docs/zh-CN/components/empty.md
View File

@@ -53,6 +53,33 @@ export default {
:::
::: title 扩展插槽
:::
::: demo
<template>
<lay-empty description="刷新试试">
<template #extra>
<lay-button>刷新页面</lay-button>
</template>
</lay-empty>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::
::: title Empty 属性
:::
@@ -64,7 +91,16 @@ export default {
:::
::: title Empty 插槽
:::
::: table
| 属性 | 描述 | 可选值 |
| ----------- | -------- | ------ |
| extra | 扩展插槽 | -- |
:::
::: previousNext empty
:::

10
example/docs/zh-CN/components/exception.md
View File

@@ -14,7 +14,7 @@
<template>
<lay-exception status="401" title="401" describe="暂无相关权限">
<template #action>
<template #extra>
<lay-button>刷新</lay-button>
<lay-button type="primary">返回</lay-button>
</template>
@@ -42,7 +42,7 @@ export default {
<template>
<lay-exception status="403" title="403" describe="暂无相关权限">
<template #action>
<template #extra>
<lay-button>刷新</lay-button>
<lay-button type="primary">返回</lay-button>
</template>
@@ -70,7 +70,7 @@ export default {
<template>
<lay-exception status="404" title="404" describe="跳转页面失败">
<template #action>
<template #extra>
<lay-button>刷新</lay-button>
<lay-button type="primary">返回</lay-button>
</template>
@@ -99,7 +99,7 @@ export default {
<template>
<lay-exception status="500" title="500" describe="服务发生错误">
<template #action>
<template #extra>
<lay-button>刷新</lay-button>
<lay-button type="primary">返回</lay-button>
</template>
@@ -140,7 +140,7 @@ export default {
| 属性 | 描述 | 可选值 |
| ----------- | -------- | ------ |
| action | 操作 | -- |
| extra | 操作 | -- |
:::

4
example/docs/zh-CN/components/icon.md
View File

@@ -116,7 +116,7 @@ npm install @layui/icons-vue
<template>
<ul class="site-doc-icon">
<li v-for="(layIcon, index) of LayIconList" @click="copyIconClass(layIcon.class)">
<li v-for="(layIcon, index) of LayIconList" @click="copy(layIcon.class)">
<i :class="[`layui-icon ${layIcon.class}`]"></i>
<div class="doc-icon-name">{{ layIcon.name }}</div>
<div class="doc-icon-code">&amp;#x{{ iconsUnicode[index] }};</div>
@@ -133,7 +133,7 @@ npm install @layui/icons-vue
const iconsUnicode = reactive([]);
function copyIconClass(iconClass) {
function copy(iconClass) {
const { isSupported, copy, copied } = useClipboard()
const permissionWrite = usePermission('clipboard-write')
if (isSupported && permissionWrite.value === 'granted') {

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

@@ -311,12 +311,12 @@ export default {
| zIndex | 自定义层级 | -- |
| type | 类型 | `1: component` `2: iframe` |
| closeBtn | 显示关闭 | true |
| btn | 按钮 | |
| btn | 按钮 格式:{text:"",callback:function(){}} | -- |
| btnAlign | 按钮布局 | `l` `r` `c` |
| anim | 入场动画 | `0` `-` `6` |
| isOutAnim | 关闭动画 | `true` `false` |
| success | 显示回调 | -- |
| end | 关闭回调 | -- |
| close | 关闭回调 | -- |
:::

30
example/docs/zh-CN/components/result.md
View File

@@ -53,6 +53,34 @@ export default {
:::
::: title 完整
:::
::: demo 使用 `lay-result` 标签, 创建一个结果页面
<template>
<lay-result status="failure">
<template #extra>
<lay-button type="primary">再来一次</lay-button>
<lay-button >返回首页</lay-button>
</template>
</lay-result>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::
::: title Result 属性
:::
@@ -74,7 +102,7 @@ export default {
| 属性 | 描述 | 可选值 |
| ----------- | -------- | ------ |
| content | 内容 | -- |
| action | 操作 | -- |
| extra | 扩展 | -- |
:::

42
example/docs/zh-CN/components/switch.md
View File

@@ -146,6 +146,32 @@ export default {
:::
::: title 自定义值
:::
::: demo
<template>
<lay-switch v-model="active6" onswitch-value="dark" unswitch-value="light"></lay-switch>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const active6 = ref('dark')
return {
active6
}
}
}
</script>
:::
::: title Switch 属性
:::
@@ -156,8 +182,10 @@ export default {
| name | 原生 name 属性 | -- |
| v-model | 是否启用 | `true` `false` |
| disabled | 禁用 | `true` `false` |
| active-text | 启用描述 | `启动` |
| inactive-text | 禁用描述 | `禁用` |
| onswitch-text | 启用描述 | `启动` |
| unswitch-text | 禁用描述 | `禁用` |
| onswitch-value | 启用值 | `true` |
| unswitch-value | 禁用值 | `false` |
:::
@@ -173,6 +201,16 @@ export default {
:::
::: title Switch 插槽
:::
::: table
| 属性 | 描述 | 参数 |
| ------ | -------- | ---------------- |
| onswitch-icon | 启用图标 | -- |
| unswitch-icon | 禁用图标 | -- |
:::
::: previousNext switch
:::

50
example/docs/zh-CN/components/timeline.md
View File

@@ -111,6 +111,44 @@ export default {
}
}
</script>
:::
::: title 水平方向
:::
::: demo
<template>
<lay-timeline direction="horizontal">
<lay-timeline-item title="2015年" >2015年，layui 孵化</lay-timeline-item>
<lay-timeline-item title="2016年" >2016年，layui 首个版本发布</lay-timeline-item>
<lay-timeline-item title="2017年" >layui里程碑版本1.0发布</lay-timeline-item>
<lay-timeline-item title="2021年" >layui里程碑版本2.0发布</lay-timeline-item>
</lay-timeline>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::
::: title Timeline 属性
:::
::: table
| 属性 | 描述 | 可选值 |
|-----------|------|-----|
| direction | 排列方向 | `horizontal` `vertical` |
:::
@@ -119,10 +157,10 @@ export default {
::: table
| | | |
| ------ | -------- | --- |
| 属性 | 描述 | 可选值 |
|--------|------|-----|
| simple | 简单模式 | -- |
| title | 标题 | -- |
| title | 标题 | -- |
:::
@@ -131,9 +169,9 @@ export default {
::: table
| | | |
| ------ | -------- | --- |
| dot | 节点 | -- |
| 插槽名 | 描述 | |
|-----|-----| --- |
| dot | 节点 | -- |
:::

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

@@ -238,6 +238,7 @@ function handleClick(node) {
| onlyIconControl | 是否仅允许节点左侧图标控制展开收缩 | false |
| showLine | 是否开启连接线 | true |
| checkedKeys(v-model:checkedKeys) | 开启 showCheckbox 后, 选中的节点 | [] |
| collapse-transition | 是否开启展示收起动画 | false |
:::
@@ -253,7 +254,6 @@ function handleClick(node) {
| children | 子节点 | [] |
| disabled | 该节点是否禁用 | false |
| spread | 该节点是否展开 | false |
| collapse-transition | 是否开启展示收起动画 | false |
:::

53
example/docs/zh-CN/components/upload.md
View File

@@ -106,13 +106,13 @@ export default {
:::
::: title 自定义预览
::: title 自定义预览/上传禁用
:::
::: demo 使用 `lay-upload` 标签, 使用 `#preview` 自定义预览的UI交互
::: demo 使用 `lay-upload` 标签, 使用 `#preview` 自定义预览的UI交互,使用 `disabled` 添加上传禁用
<template>
  <lay-upload @done="getUploadFile2">
  <lay-upload @done="getUploadFile2" :disabled="true">
<template #preview>
<div class="easy-wrap">
<img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg" style="width:62.9px;height:63.2px"/>
@@ -141,6 +141,47 @@ export default {
:::
::: title 提供默认剪裁功能
::: demo 使用 `lay-upload` 标签, 添加 `cut` 开启 选择文件后剪裁功能
<template>
  <lay-upload @cutdone="getCutDone" @cutcancel="getCutCancel" :cut="true" :multiple="false" @done="getFileDone">
<template #preview>
<div class="easy-wrap" v-if="cutUrl">
<img :src="cutUrl"/>
</div>
</template>
</lay-upload>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
const cutUrl = ref("");
const getCutDone=(res)=>{
console.log("getCutDone",res);
cutUrl.value = res.msg;
};
const getCutCancel=(res)=>{
console.log("getCutCancel",res);
};
const getFileDone=(res)=>{
console.log("getFileDone",res);
};
    return {
getCutDone,
getCutCancel,
getFileDone,
cutUrl
    }
  }
}
</script>
:::
::: title Upload 属性
:::
@@ -157,6 +198,9 @@ export default {
| multiple | 是否允许多文件上传。设置 true即可开启。不支持ie8/9 | boolean | false | -- |
| number | 设置同时可上传的文件数量，一般配合 multiple 参数出现。 | number | `0(不限制)` | -- |
| drag | 是否接受拖拽的文件上传，设置 false 可禁用。不支持ie8/9 | boolean | true | -- |
| disabled | 设置文件禁用 | boolean | false | -- |
| cut | 是否开启选择图片后检测,设置true可开启 | boolean | false | -- |
| cutOptions | 开启剪裁的模态弹窗与剪裁框的配置 | object | { layerOption,copperOption } | -- |
:::
@@ -182,7 +226,8 @@ export default {
| before | 上传事务开启前的回调 | -- |
| done | 上传事务结束的回调 | -- |
| error | 上传事务中出现错误的回调 | -- |
| cutdown | 剪裁完成 | -- |
| cutclose | 剪裁取消 | -- |
:::

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

@@ -10,22 +10,47 @@
::: demo
<template>
<lay-timeline>
<lay-timeline-item title="0.4.0">
<ul>
<a name="0-4-5"> </a>
<lay-timeline-item title="1.0.x">
<ul>
<a name="1-0-1"> </a>
<li>
<h3>0.4.4 <span class="layui-badge-rim">2022-03-29</span></h3>
<h3>1.0.1 <span class="layui-badge-rim">2022-04-03</span></h3>
<ul>
<li>[新增] tab 组件 position 属性, 不同方向的选项卡标题。</li>
<li>[修复] transfer 组件 showSearch 属性类型警告。</li>
<li>[新增] upload 组件 cut cutOptions 属性, 支持上传裁剪。</li>
<li>[新增] timeline 组件 direction 属性, 支持垂直与水平布局。</li>
<li>[新增] config-proivder 组件 global-dark-background-color 夜间模式背景颜色变量。</li>
<li>[新增] config-proivder 组件 global-dark-text-color 夜间模式文字颜色变量。</li>
</ul>
</li>
</ul>
<ul>
<a name="1-0-0"> </a>
<li>
<h3>1.0.0 <span class="layui-badge-rim">2022-04-02</span></h3>
<ul>
<li>[重要] 修订 version 为 1.0.0。</li>
<li>[新增] empty 组件 extra 插槽, 支持扩展内容。</li>
<li>[新增] result 组件 extra 插槽, 支持扩展内容。</li>
<li>[新增] exception 组件 extra 插槽, 支持扩展内容。</li>
<li>[新增] switch 组件 onswitch-value 属性, 默认为 true。</li>
<li>[新增] switch 组件 unswitch-value 属性, 默认为 false。</li>
<li>[新增] date-picker 组件 time 属性, 支持 时 分 秒 选择。</li>
<li>[新增] date-picker 组件 yearmonth 属性, 支持 年 月 选择。</li>
<li>[新增] tab 组件 position 属性, 用于支持不同方向的选项卡标题。</li>
<li>[修复] date-picker 组件 type 属性为 time 时, v-model 默认不生效。</li>
<li>[修复] date-picker 组件 12 小时制为 24 小时制。</li>
<li>[修复] transfer 组件 showSearch 属性类型警告。</li>
<li>[修复] upload 组件 number 属性必填警告。</li>
<li>[修复] variable 全局变量重复导入的问题。</li>
<li>[修复] menu 组件 openKeys 属性失效。</li>
<li>[支持] animation 点击演示。</li>
<li>[支持] icon 列表复制。</li>
<li>[支持] 夜间模式。</li>
</ul>
</li>
</ul>
</lay-timeline-item>
<lay-timeline-item title="0.4.x">
<ul>
<a name="0-4-4"> </a>
<li>

7
example/docs/zh-CN/guide/dark.md
View File

@@ -1,10 +1,13 @@
::: title 夜间模式
:::
::: describe 默认情况下, 网站主题为日间模式。若需启用深夜模式, 使用 config-provider 组件。
::: describe 默认情况下, 网站主题为日间模式。
:::
```
::: describe 若启用夜间模式, 使用 "全局配置" 组件配合 theme 属性, 设置为 `dark` 值。
:::
```vue
<template>
<lay-config-provider :theme="theme">
<App />

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

@@ -10,6 +10,7 @@
<lay-icon :type="iconType" size="40"> </lay-icon>
</lay-button>
</div>
<lay-scroll :scrollWidth="0">
<ul>
<li
v-for="(anchor, index) in anchorList"
@@ -26,6 +27,7 @@
>
</li>
</ul>
</lay-scroll>
</aside>
</template>
<script setup lang="ts">

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

@@ -34,6 +34,18 @@ onMounted(() => {
--docsearch-searchbox-background: rgba(255, 255, 255, 0.02);
--docsearch-searchbox-focus-background: rgba(255, 255, 255, 0.02);
--docsearch-container-background: rgba(0, 0, 0, 0.1);
--docsearch-searchbox-shadow: inset 0 0 0 1px var(--docsearch-primary-color);
}
.DocSearch-Button{
width: 150px;
border-radius: 50px;
}
.DocSearch-Button-Container {
padding-left: 2px;
}
.DocSearch-Button-Placeholder {
padding-left: 8px;
}
.DocSearch-Button,
@@ -55,4 +67,8 @@ onMounted(() => {
.DocSearch-Button-Placeholder {
color: rgba(0, 0, 0, 0.6);
}
.DocSearch-Button-Keys {
display: none;
}
</style>

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

@@ -14,18 +14,18 @@
class="layui-nav layui-layout-left"
style="margin-top: 0px; margin-bottom: 0px"
>
<li class="layui-nav-item">
<li class="layui-nav-item" :class="{ 'layui-active':currentPath.includes('/zh-CN/index') }">
<router-link to="/zh-CN/index"> {{ t("nav.home") }} </router-link>
</li>
<li class="layui-nav-item">
<li class="layui-nav-item" :class="{ 'layui-active':currentPath.includes('/zh-CN/guide') }">
<router-link to="/zh-CN/guide"> {{ t("nav.guide") }} </router-link>
</li>
<li class="layui-nav-item">
<li class="layui-nav-item" :class="{ 'layui-active':currentPath.includes('/zh-CN/components') }">
<router-link to="/zh-CN/components">
{{ t("nav.components") }}
</router-link>
</li>
<li class="layui-nav-item">
<li class="layui-nav-item" :class="{ 'layui-active':currentPath.includes('/zh-CN/resources') }">
<router-link to="/zh-CN/resources">
{{ t("nav.resources") }}
</router-link>
@@ -109,7 +109,15 @@
<lay-color-picker
v-model="themeVariable['--global-neutral-color-8']"
></lay-color-picker>
<lay-button fluid>导 出 配 置</lay-button>
<lay-color-picker
v-model="themeVariable['--global-dark-text-color']"
></lay-color-picker
>&nbsp;
<lay-color-picker
v-model="themeVariable['--global-dark-background-color']"
></lay-color-picker>
<lay-button fluid="true">导 出 配 置</lay-button>
</div>
</template>
</lay-dropdown>
@@ -140,8 +148,10 @@
<li class="layui-nav-item">
<a href="javascript:void(0)">
<lay-switch
v-model="isDark"
v-model="theme"
class="switch"
onswitch-value="dark"
unswitch-value="light"
onswitch-color="rgba(255, 255, 255, 0.05)"
unswitch-color="rgba(255, 255, 255, 0.05)"
>
@@ -216,7 +226,6 @@ import menu from "../view/utils/menus";
import { useI18n } from "vue-i18n";
import zh_CN from "../locales/zh_CN.ts";
import en_US from "../locales/en_US.ts";
import { getLayuiVueVersion } from "../../../src/utils/getLayuiVueVersion.ts"
export default {
setup() {
@@ -224,13 +233,14 @@ export default {
const route = useRoute();
const router = useRouter();
const locale = ref("zh_CN");
const currentPath = ref("/zh-CN/guide");
const isDark = ref(false);
const locales = [
{ name: "zh_CN", locale: zh_CN, merge: true },
{ name: "en_US", locale: en_US, merge: true },
];
const theme = ref("light");
let isDark = (localStorage.getItem('layui-vue-theme-dark') !== "false") ||
window.matchMedia('prefers-color-scheme: dark').matches;
const theme = ref(isDark ? "dark":"light");
const themeVariable = ref({
"--global-primary-color": "#009688",
"--global-normal-color": "#1e9fff",
@@ -246,30 +256,32 @@ export default {
"--global-neutral-color-6": "#d2d2d2",
"--global-neutral-color-7": "#cccccc",
"--global-neutral-color-8": "#c2c2c2",
"--global-dark-text-color": "#FFFFFFc9",
"--global-dark-background-color": "#22272E",
});
const menus = [];
const currentPath = ref("/zh-CN/guide");
watch(
() => route.path,
(val) => {
currentPath.value = val;
},
{
immediate: true,
deep: true,
}
);
menu.forEach((m) => {
m.children.forEach((c) => {
menus.push(c);
});
});
const latestVer = getLayuiVueVersion();
const layuiVueVersion = computed(() =>
latestVer.value
?? import.meta.env.LAYUI_VUE_VERSION
import.meta.env.LAYUI_VUE_VERSION
)
watch(isDark, () => {
if (isDark.value) {
theme.value = "dark";
} else {
theme.value = "light";
}
});
watch(
() => route.path,
(val) => {
@@ -286,7 +298,9 @@ export default {
locale.value = lang;
};
provide("isDark",isDark);
window.matchMedia('(prefers-color-scheme: dark)')
.addListener(e => theme.value = e.matches ? "dark" : "light");
provide("theme",theme);
provide('LayuiVueVersion', layuiVueVersion);
@@ -295,12 +309,12 @@ export default {
menus,
theme,
locale,
isDark,
locales,
currentPath,
handleClick,
changeLocale,
themeVariable,
currentPath,
layuiVueVersion,
};
},
@@ -308,6 +322,7 @@ export default {
</script>
<style>
.layui-layout-document > .layui-header {
z-index: 99;
width: 100%;
@@ -358,6 +373,10 @@ export default {
background-color: transparent;
}
.layui-header > .layui-nav .layui-active * {
color: var(--global-checked-color)!important;
}
.layui-header .layui-local-badge {
font-size: 12.4px;
background: transparent;

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

@@ -16,17 +16,19 @@
<router-link class="layui-inline site-down" to="/zh-CN/guide">
Get Started
</router-link>
<a class="layui-inline site-down" href="javascript:void(0);" @click="changeTheme">
{{ isDark ? 'Turn Off' : 'Turn On'}}
<a
class="layui-inline site-down"
href="javascript:void(0);"
@click="changeTheme"
>
{{ theme === "dark" ? "Turn Off" : "Turn On" }}
</a>
</div>
<div class="site-version">
<span>{{ t('home.version') }}：v<cite class="site-showv">{{ layuiVueVersion }}</cite></span>
<span
>{{ t("home.version") }}：<cite class="site-showv"
>1.0.0</cite
></span
>{{ t("home.version") }}：<cite class="site-showv">{{
layuiVueVersion
}}</cite></span
>
<span
>{{ t("home.download") }}：<em class="site-showdowns"
@@ -34,32 +36,32 @@
></span
>
</div>
</div>
<div class="site-banner-other">
<a
href="https://gitee.com/layui-vue"
target="_blank"
rel="nofollow"
class="site-star"
>
<i class="layui-icon"></i> Star <cite id="getStars">741</cite>
</a>
<a
href="https://gitee.com/layui-vue"
target="_blank"
rel="nofollow"
class="site-fork"
>
Gitee
</a>
<a
href="https://github.com/layui-vue"
target="_blank"
rel="nofollow"
class="site-fork"
>
Github
</a>
<div class="site-banner-other">
<a
href="https://gitee.com/layui-vue"
target="_blank"
rel="nofollow"
class="site-star"
>
<i class="layui-icon"></i> Star <cite id="getStars">746</cite>
</a>
<a
href="https://gitee.com/layui-vue"
target="_blank"
rel="nofollow"
class="site-fork"
>
Gitee
</a>
<a
href="https://github.com/layui-vue"
target="_blank"
rel="nofollow"
class="site-fork"
>
Github
</a>
</div>
</div>
</div>
<div style="margin-left: 10%; margin-right: 10%; margin-top: 40px">
@@ -109,31 +111,28 @@
</template>
<script>
import { inject, provide } from 'vue';
import { inject, provide } from "vue";
import { useI18n } from "vue-i18n";
export default {
name: "index",
setup() {
const { t } = useI18n();
const layuiVueVersion = inject('LayuiVueVersion')
const isDark = inject("isDark");
const layuiVueVersion = inject("LayuiVueVersion");
const theme = inject("theme");
const changeTheme = () => {
isDark.value = !isDark.value;
if(theme.value === 'dark') {
theme.value = 'light';
if (theme.value === "dark") {
theme.value = "light";
} else {
theme.value = 'dark';
theme.value = "dark";
}
}
};
return {
t,
isDark,
theme,
changeTheme,
layuiVueVersion
layuiVueVersion,
};
},
};
@@ -187,7 +186,9 @@ body {
font-size: 16px;
color: #476582;
font-weight: 500;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
transition: all 0.5s;
-webkit-transition: all 0.5s;
letter-spacing: 0.2px;
@@ -199,7 +200,7 @@ body {
background: #009688;
color: white;
}
.site-download a+a {
.site-download a + a {
margin-left: 20px;
}
.site-zfj {
@@ -273,8 +274,9 @@ body {
margin-top: -4px;
}
.site-banner-other {
position: absolute;
position: relative;
left: 0;
top: 40px;
bottom: 90px;
width: 100%;
text-align: center;

11
example/vite.config.ts
View File

@@ -12,5 +12,16 @@ export default defineConfig({
define: {
'import.meta.env.LAYUI_VUE_VERSION': JSON.stringify(pkg.version),
},
build: {
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes("node_modules")) {
return id.toString().split("node_modules/")[1].split("/")[0].toString();
}
}
}
}
},
plugins,
})