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

补充组件描述, 起草 lay-config-provider 全局配置

Browse Source
This commit is contained in:
就眠儀式 2022-02-08 11:36:36 +08:00
parent dc03f2a65b
commit 3787e80ff0
12 changed files with 135 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,7 +30,7 @@ export default {
::: demo ::: demo
<template> <template>
<lay-block :nm="nm">引用区域的文字</lay-block> <lay-block nm="true">引用区域的文字</lay-block>
</template> </template>
<script> <script>

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

@ -307,7 +307,7 @@ export default {
::: table ::: table
| 属性 | 描述 | 类型 | 默认值 | 可选值 | | 属性 | 描述 | 类型 | 默认值 | 可选值 |
| ----------- | -------- | ------- | --------- | ----------------------------------| | ----------- | -------- | ------- | --------- | ---------------------------------- |
| type | 主题 | string | `primary` | `primary` `normal` `warm` `danger` | | type | 主题 | string | `primary` | `primary` `normal` `warm` `danger` |
| size | 尺寸 | string | -- | `lg` `sm` `xs` | | size | 尺寸 | string | -- | `lg` `sm` `xs` |
| fluid | 最大化 | boolean | `false` | `true` `false` | | fluid | 最大化 | boolean | `false` | `true` `false` |
@ -325,8 +325,8 @@ export default {
::: table ::: table
| 名称 | 描述 | 参数 | | 名称 | 描述 | 参数 |
| ----- | -------- | ---- | | ------- | -------- | ---- |
| default | 默认内容 | -- | | default | 默认内容 | -- |
::: :::
@ -335,10 +335,9 @@ export default {
::: table ::: table
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| 属性 | 描述 | 类型 | 默认值 | 可选值 | | ---- | ---- | ---- | ------ | ------ |
| ----------- | -------- | ------- | --------- | ----------------------------------| | - | - | - | - |
| - | - | - | - |
::: :::
@ -347,9 +346,9 @@ export default {
::: table ::: table
| 事件 | 描述 | 参数 | | 事件 | 描述 | 参数 |
| ----- | -------- | ---- | | ------- | -------- | ---- |
| default | 默认内容 | -- | | default | 默认内容 | -- |
::: :::
@ -357,4 +356,4 @@ export default {
::: :::
::: previousNext button ::: previousNext button
::: :::

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

@ -1,6 +1,12 @@
::: anchor ::: anchor
::: :::
::: title 基本介绍
:::
::: describe 最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。
:::
::: title 基础使用 ::: title 基础使用
::: :::

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

@ -1,6 +1,12 @@
::: anchor ::: anchor
::: :::
::: title 基本介绍
:::
::: describe 内置 icon 图标选择组件, 常用于权限管理, 菜单定制。
:::
::: title 基础使用 ::: title 基础使用
::: :::

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

@ -1,6 +1,12 @@
::: anchor ::: anchor
::: :::
::: title 基本介绍
:::
::: describe 提供极致的分页逻辑，既可轻松胜任异步分页，也可作为页面刷新式分页。
:::
::: title 基础使用 ::: title 基础使用
::: :::

7
example/docs/zh-CN/components/splitPanel.md
View File

@ -1,10 +1,15 @@
::: anchor ::: anchor
::: :::
::: title 基本介绍
:::
::: describe 更灵活的布局方案。
:::
::: title 基础使用 ::: title 基础使用
::: :::
::: demo ::: demo
<template> <template>

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

@ -1,60 +1,62 @@
<template> <template>
<lay-layout class="layui-layout-document"> <lay-config-provider :theme="theme">
<lay-header <lay-layout class="layui-layout-document">
><lay-logo style="box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.15)"> <lay-header
<img src="../assets/logo.png" /> ><lay-logo style="box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.15)">
</lay-logo> <img src="../assets/logo.png" />
<ul </lay-logo>
class="layui-nav layui-layout-left" <ul
style="margin-top: 0px; margin-bottom: 0px" class="layui-nav layui-layout-left"
> style="margin-top: 0px; margin-bottom: 0px"
<li class="layui-nav-item"> >
<router-link to="/zh-CN/index"> 首页 </router-link> <li class="layui-nav-item">
</li> <router-link to="/zh-CN/index"> 首页 </router-link>
<li class="layui-nav-item"> </li>
<router-link to="/zh-CN/guide"> 指南 </router-link> <li class="layui-nav-item">
</li> <router-link to="/zh-CN/guide"> 指南 </router-link>
<li class="layui-nav-item"> </li>
<router-link to="/zh-CN/components"> 组件 </router-link> <li class="layui-nav-item">
</li> <router-link to="/zh-CN/components"> 组件 </router-link>
<li class="layui-nav-item"> </li>
<router-link to="/zh-CN/ecology"> 生态 </router-link> <li class="layui-nav-item">
</li> <router-link to="/zh-CN/ecology"> 生态 </router-link>
<li class="layui-nav-item"> </li>
<lay-form> <li class="layui-nav-item">
<lay-search :datas="menus" /> <lay-form>
</lay-form> <lay-search :datas="menus" />
</li> </lay-form>
</ul> </li>
<ul </ul>
class="layui-nav layui-layout-right" <ul
style="margin-top: 0px; margin-bottom: 0px" class="layui-nav layui-layout-right"
> style="margin-top: 0px; margin-bottom: 0px"
<li class="layui-nav-item"> >
<a <li class="layui-nav-item">
href="https://layui-vue.gitee.io/layui-vue-playground" <a
target="_blank" href="https://layui-vue.gitee.io/layui-vue-playground"
> target="_blank"
<lay-icon type="layui-icon-util" size="15px"></lay-icon> >
</a> <lay-icon type="layui-icon-util" size="15px"></lay-icon>
</li> </a>
<li class="layui-nav-item"> </li>
<a href="https://gitee.com/layui-vue"> <li class="layui-nav-item">
<lay-icon type="layui-icon-fonts-code" size="15px"></lay-icon> <a href="https://gitee.com/layui-vue">
</a> <lay-icon type="layui-icon-fonts-code" size="15px"></lay-icon>
</li> </a>
<li class="layui-nav-item"> </li>
<a href="https://gitee.com/layui-vue/layui-vue/issues"> <li class="layui-nav-item">
<lay-icon type="layui-icon-chat" size="15px"></lay-icon> <a href="https://gitee.com/layui-vue/layui-vue/issues">
</a> <lay-icon type="layui-icon-chat" size="15px"></lay-icon>
</li> </a>
<li class="layui-nav-item"> </li>
<a href="javascript:void(0)"> 0.3.7 </a> <li class="layui-nav-item">
</li> <a href="javascript:void(0)"> 0.3.7 </a>
</ul> </li>
</lay-header> </ul>
<router-view></router-view> </lay-header>
</lay-layout> <router-view></router-view>
</lay-layout>
</lay-config-provider>
</template> </template>
<script> <script>
import { ref, watch } from "vue"; import { ref, watch } from "vue";
@ -65,7 +67,6 @@ export default {
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const currentPath = ref("/zh-CN/guide"); const currentPath = ref("/zh-CN/guide");
const theme = ref(false);
const menus = []; const menus = [];
@ -90,6 +91,10 @@ export default {
router.push(menu.path); router.push(menu.path);
}; };
const theme = {
"@global-primary-color":"red"
}
return { return {
menus, menus,
theme, theme,

2
example/src/plugin/create-block.ts
View File

@ -18,7 +18,7 @@ export default function createContainer(
const token = tokens[idx] const token = tokens[idx]
const info = token.info.trim().slice(klass.length).trim() const info = token.info.trim().slice(klass.length).trim()
if (token.nesting === 1) { if (token.nesting === 1) {
return `<lay-block style="margin-left:8px;margin-bottom:40px;">${info}` return `<lay-block style="margin-left:0px;margin-right:0px;margin-top:20px;margin-bottom:40px;">${info}`
} else { } else {
return '</lay-block>\n' return '</lay-block>\n'
} }

6
package.json
View File

@ -38,7 +38,7 @@
"async-validator": "^4.0.7", "async-validator": "^4.0.7",
"countup.js": "^2.0.8", "countup.js": "^2.0.8",
"evtd": "^0.2.3", "evtd": "^0.2.3",
"vue": "^3.2.29", "vue": "^3.2.30",
"vue-router": "^4.0.12" "vue-router": "^4.0.12"
}, },
"devDependencies": { "devDependencies": {
@ -52,8 +52,8 @@
"@typescript-eslint/eslint-plugin": "^5.8.0", "@typescript-eslint/eslint-plugin": "^5.8.0",
"@typescript-eslint/parser": "^5.8.0", "@typescript-eslint/parser": "^5.8.0",
"@vitejs/plugin-vue": "^1.9.3", "@vitejs/plugin-vue": "^1.9.3",
"@vue/compiler-sfc": "^3.2.29", "@vue/compiler-sfc": "^3.2.30",
"@vue/server-renderer": "^3.2.29", "@vue/server-renderer": "^3.2.30",
"commitizen": "^4.2.4", "commitizen": "^4.2.4",
"cz-conventional-changelog": "3.3.0", "cz-conventional-changelog": "3.3.0",
"escape-html": "^1.0.3", "escape-html": "^1.0.3",

2
src/component/block/index.vue
View File

@ -8,7 +8,7 @@ export default {
import "./index.less"; import "./index.less";
const props = defineProps<{ const props = defineProps<{
nm?: boolean; nm?: boolean | string;
}>(); }>();
</script> </script>

2
src/component/tabItem/index.ts
View File

@ -5,4 +5,4 @@ Component.install = (app: App) => {
app.component(Component.name, Component); app.component(Component.name, Component);
}; };
export default Component; export default Component;

39
src/provider/index.vue
View File

@ -1,19 +1,44 @@
<script lang="ts"> <script lang="ts">
import { watch } from '@vue/runtime-core';
export default { export default {
name: "lay-config-provider" name: "lay-config-provider",
} };
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
// 切换主题 (通过 less 特性提供的 api 更改变量) export interface LayConfigProviderProps {
theme?: object;
}
// 切换语言 (通过 i18n 框架切换内置的语言包) const props = withDefaults(defineProps<LayConfigProviderProps>(),
{
}
);
const changeTheme = (vars: any) => {
// @ts-ignore
if (!window.less || !window.less.modifyVars) {
return;
}
// @ts-ignore
window.less.modifyVars(vars).then((res) => {
console.log(res);
}).catch((res: any) => {
console.log(res);
});
};
watch(() => props.theme, (vars) => {
changeTheme(vars);
},{immediate: true})
</script> </script>
<template> <template>
<div class="lay-config-provider"> <div class="lay-config-provider">
<slot></slot> <slot></slot>
</div> </div>
</template> </template>