Merge branch 'develop' of https://gitee.com/layui-vue/layui-vue into develop
This commit is contained in:
sight
commit
47b6158d78
@ -102,8 +102,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext animation
|
::: previousNext animation
|
||||||
:::
|
:::
|
||||||
@ -135,8 +135,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext avatar
|
::: previousNext avatar
|
||||||
:::
|
:::
|
||||||
|
|||||||
@ -68,8 +68,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext badge
|
::: previousNext badge
|
||||||
:::
|
:::
|
||||||
@ -110,8 +110,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext breadcrumb
|
::: previousNext breadcrumb
|
||||||
:::
|
:::
|
||||||
@ -341,8 +341,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext button
|
::: previousNext button
|
||||||
:::
|
:::
|
||||||
|
|||||||
@ -220,8 +220,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext card
|
::: previousNext card
|
||||||
:::
|
:::
|
||||||
|
|||||||
@ -182,8 +182,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext carousel
|
::: previousNext carousel
|
||||||
:::
|
:::
|
||||||
@ -220,8 +220,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext checkbox
|
::: previousNext checkbox
|
||||||
:::
|
:::
|
||||||
@ -249,8 +249,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext collapse
|
::: previousNext collapse
|
||||||
:::
|
:::
|
||||||
@ -170,8 +170,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext color
|
::: previousNext color
|
||||||
:::
|
:::
|
||||||
@ -66,8 +66,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext colorPicker
|
::: previousNext colorPicker
|
||||||
:::
|
:::
|
||||||
@ -83,8 +83,7 @@ layer.confirm(content, options)
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext confirm
|
::: previousNext confirm
|
||||||
:::
|
:::
|
||||||
@ -85,8 +85,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext container
|
::: previousNext container
|
||||||
:::
|
:::
|
||||||
@ -112,8 +112,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext transfer
|
::: previousNext transfer
|
||||||
:::
|
:::
|
||||||
@ -104,8 +104,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext dropdown
|
::: previousNext dropdown
|
||||||
:::
|
:::
|
||||||
@ -64,8 +64,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext empty
|
::: previousNext empty
|
||||||
:::
|
:::
|
||||||
@ -144,8 +144,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext field
|
::: previousNext field
|
||||||
:::
|
:::
|
||||||
@ -75,8 +75,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext field
|
::: previousNext field
|
||||||
:::
|
:::
|
||||||
@ -580,8 +580,7 @@ export default {
|
|||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext form
|
::: previousNext form
|
||||||
:::
|
:::
|
||||||
@ -188,8 +188,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext grid
|
::: previousNext grid
|
||||||
:::
|
:::
|
||||||
@ -1137,8 +1137,7 @@ npm install @layui/icons-vue
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext iconfont
|
::: previousNext iconfont
|
||||||
:::
|
:::
|
||||||
@ -145,8 +145,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext iconPicker
|
::: previousNext iconPicker
|
||||||
:::
|
:::
|
||||||
@ -192,8 +192,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext input
|
::: previousNext input
|
||||||
:::
|
:::
|
||||||
@ -147,8 +147,7 @@
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext inputNumber
|
::: previousNext inputNumber
|
||||||
:::
|
:::
|
||||||
@ -263,8 +263,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext layout
|
::: previousNext layout
|
||||||
:::
|
:::
|
||||||
@ -48,8 +48,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext line
|
::: previousNext line
|
||||||
:::
|
:::
|
||||||
@ -133,8 +133,7 @@ layer.load(load, options)
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext load
|
::: previousNext load
|
||||||
:::
|
:::
|
||||||
@ -534,8 +534,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext nav
|
::: previousNext nav
|
||||||
:::
|
:::
|
||||||
|
|||||||
@ -320,8 +320,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext modal
|
::: previousNext modal
|
||||||
:::
|
:::
|
||||||
@ -94,8 +94,7 @@ layer.msg(content, options)
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext msg
|
::: previousNext msg
|
||||||
:::
|
:::
|
||||||
@ -94,8 +94,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext transfer
|
::: previousNext transfer
|
||||||
:::
|
:::
|
||||||
@ -308,8 +308,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext page
|
::: previousNext page
|
||||||
:::
|
:::
|
||||||
@ -62,8 +62,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext panel
|
::: previousNext panel
|
||||||
:::
|
:::
|
||||||
@ -135,8 +135,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext progress
|
::: previousNext progress
|
||||||
:::
|
:::
|
||||||
@ -61,8 +61,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext block
|
::: previousNext block
|
||||||
:::
|
:::
|
||||||
@ -127,8 +127,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext radio
|
::: previousNext radio
|
||||||
:::
|
:::
|
||||||
@ -315,8 +315,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext rate
|
::: previousNext rate
|
||||||
:::
|
:::
|
||||||
@ -78,8 +78,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext field
|
::: previousNext field
|
||||||
:::
|
:::
|
||||||
@ -46,8 +46,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext field
|
::: previousNext field
|
||||||
:::
|
:::
|
||||||
@ -235,8 +235,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext select
|
::: previousNext select
|
||||||
:::
|
:::
|
||||||
@ -113,8 +113,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext skeleton
|
::: previousNext skeleton
|
||||||
:::
|
:::
|
||||||
@ -117,8 +117,7 @@ export default {
|
|||||||
| max | 最大值 | `Number` | - | - |
|
| max | 最大值 | `Number` | - | - |
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext slider
|
::: previousNext slider
|
||||||
:::
|
:::
|
||||||
|
|||||||
@ -116,8 +116,7 @@
|
|||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext splitPanel
|
::: previousNext splitPanel
|
||||||
:::
|
:::
|
||||||
@ -468,8 +468,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext step
|
::: previousNext step
|
||||||
:::
|
:::
|
||||||
@ -172,8 +172,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext switch
|
::: previousNext switch
|
||||||
:::
|
:::
|
||||||
@ -304,8 +304,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext tab
|
::: previousNext tab
|
||||||
:::
|
:::
|
||||||
|
|||||||
@ -390,8 +390,7 @@ export default {
|
|||||||
| titleSlot | 标题插槽 | -- |
|
| titleSlot | 标题插槽 | -- |
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext table
|
::: previousNext table
|
||||||
:::
|
:::
|
||||||
@ -118,8 +118,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext textarea
|
::: previousNext textarea
|
||||||
:::
|
:::
|
||||||
@ -137,8 +137,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext timeline
|
::: previousNext timeline
|
||||||
:::
|
:::
|
||||||
@ -128,8 +128,7 @@
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext tooltip
|
::: previousNext tooltip
|
||||||
:::
|
:::
|
||||||
@ -185,8 +185,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext transfer
|
::: previousNext transfer
|
||||||
:::
|
:::
|
||||||
@ -268,8 +268,7 @@ function handleClick(node) {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext tree
|
::: previousNext tree
|
||||||
:::
|
:::
|
||||||
|
|||||||
@ -186,7 +186,6 @@ export default {
|
|||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: previousNext button
|
::: previousNext button
|
||||||
|
|||||||
17
example/docs/zh-CN/guide/dark.md
Normal file
17
example/docs/zh-CN/guide/dark.md
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
::: title 夜间模式
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: describe 默认情况下, 网站主题为日间模式。若需启用深夜模式, 使用 config-provider 组件。
|
||||||
|
:::
|
||||||
|
|
||||||
|
```
|
||||||
|
<template>
|
||||||
|
<lay-config-provider :theme="theme">
|
||||||
|
<App />
|
||||||
|
</lay-config-provider>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
const theme = ref('dark')
|
||||||
|
</script>
|
||||||
|
```
|
||||||
@ -4,5 +4,4 @@
|
|||||||
::: describe 以下整理了一些 Layui Vue 社区常见的问题和官方答复，在提问之前建议找找有没有类似的问题。
|
::: describe 以下整理了一些 Layui Vue 社区常见的问题和官方答复，在提问之前建议找找有没有类似的问题。
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: comment
|
|
||||||
:::
|
|
||||||
@ -1,3 +1,33 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="100%" height="100%" viewBox="0 0 1400 800">
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="100%" height="100%" viewBox="0 0 1400 800">
|
||||||
|
|
||||||
|
<rect x="1300" y="400" rx="40" ry="40" width="300" height="300" stroke="rgb(129, 201, 149)" fill="rgb(129, 201, 149)">
|
||||||
|
<animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="0 1450 550" to="360 1450 550" repeatCount="indefinite"/>
|
||||||
|
</rect>
|
||||||
|
|
||||||
|
<path d="M 100 350 A 150 150 0 1 1 400 350 Q400 370 380 370 L 250 370 L 120 370 Q100 370 100 350" stroke="rgb(253, 214, 99)" fill="rgb(253, 214, 99)">
|
||||||
|
<animateMotion path="M 800 -200 L 800 -300 L 800 -200" dur="20s" begin="0s" repeatCount="indefinite"/>
|
||||||
|
<animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="30s" type="rotate" values="0 210 530 ; -30 210 530 ; 0 210 530" keyTimes="0 ; 0.5 ; 1" repeatCount="indefinite"/>
|
||||||
|
</path>
|
||||||
|
|
||||||
|
<circle cx="200" cy="150" r="30" stroke="#1a73e8" fill="#1a73e8">
|
||||||
|
<animateMotion path="M 0 0 L 40 20 Z" dur="5s" repeatCount="indefinite"/>
|
||||||
|
</circle>
|
||||||
|
|
||||||
|
<!-- 三角形 -->
|
||||||
|
<path d="M 165 580 L 270 580 Q275 578 270 570 L 223 483 Q220 480 217 483 L 165 570 Q160 578 165 580" stroke="rgb(238, 103, 92)" fill="rgb(238, 103, 92)">
|
||||||
|
<animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="0 210 530" to="360 210 530" repeatCount="indefinite"/>
|
||||||
|
</path>
|
||||||
|
|
||||||
|
<circle cx="1200" cy="600" r="30" stroke="rgb(241, 243, 244)" fill="rgb(241, 243, 244)">
|
||||||
|
<animateMotion path="M 0 0 L -20 40 Z" dur="9s" repeatCount="indefinite"/>
|
||||||
|
</circle>
|
||||||
|
|
||||||
|
<path d="M 100 350 A 40 40 0 1 1 180 350 L 180 430 A 40 40 0 1 1 100 430 Z" stroke="rgb(241, 243, 244)" fill="rgb(241, 243, 244)">
|
||||||
|
<animateMotion path="M 140 390 L 180 360 L 140 390" dur="20s" begin="0s" repeatCount="indefinite"/>
|
||||||
|
<animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="30s" type="rotate" values="0 140 390; -60 140 390; 0 140 390" keyTimes="0 ; 0.5 ; 1" repeatCount="indefinite"/>
|
||||||
|
</path>
|
||||||
|
|
||||||
|
<rect x="400" y="600" rx="40" ry="40" width="100" height="100" stroke="rgb(129, 201, 149)" fill="rgb(129, 201, 149)">
|
||||||
|
<animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="-30 550 750" to="330 550 750" repeatCount="indefinite"/>
|
||||||
|
</rect>
|
||||||
</svg>
|
</svg>
|
||||||
|
Before Width: | Height: | Size: 131 B After Width: | Height: | Size: 2.3 KiB |
BIN
example/src/assets/logo-png.png
Normal file
BIN
example/src/assets/logo-png.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
@ -236,6 +236,7 @@ const throttle = (func: Function, wait: number) => {
|
|||||||
box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
|
box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
|
||||||
transition: none;
|
transition: none;
|
||||||
-webkit-transition: none;
|
-webkit-transition: none;
|
||||||
|
color: rgba(0, 0, 0, 0.8);
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: #e2e2e2;
|
background-color: #e2e2e2;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,24 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div id="comment"></div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'Utterances',
|
|
||||||
methods: {
|
|
||||||
initValine () {
|
|
||||||
const utterances = document.createElement('script');
|
|
||||||
utterances.type = 'text/javascript';
|
|
||||||
utterances.async = true;
|
|
||||||
utterances.setAttribute('issue-term', 'pathname')
|
|
||||||
utterances.setAttribute('theme','github-light')
|
|
||||||
utterances.setAttribute('repo',`layui-vue/layui-doc`)
|
|
||||||
utterances.crossorigin = 'anonymous';
|
|
||||||
utterances.src = 'https://utteranc.es/client.js';
|
|
||||||
window.document.getElementById('comment').appendChild(utterances);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted: function(){
|
|
||||||
this.initValine()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -31,8 +31,28 @@ onMounted(() => {
|
|||||||
:root {
|
:root {
|
||||||
--docsearch-logo-color: var(--global-primary-color);
|
--docsearch-logo-color: var(--global-primary-color);
|
||||||
--docsearch-primary-color: var(--global-primary-color);
|
--docsearch-primary-color: var(--global-primary-color);
|
||||||
--docsearch-searchbox-background: rgba(255, 255, 255, 0.05);
|
--docsearch-searchbox-background: rgba(255, 255, 255, 0.02);
|
||||||
--docsearch-searchbox-focus-background: rgba(255, 255, 255, 0.05);
|
--docsearch-searchbox-focus-background: rgba(255, 255, 255, 0.02);
|
||||||
--docsearch-container-background: rgba(0, 0, 0, 0.1);
|
--docsearch-container-background: rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.DocSearch-Button,
|
||||||
|
.DocSearch-Button:hover,
|
||||||
|
.DocSearch-Button:active,
|
||||||
|
.DocSearch-Button:focus {
|
||||||
|
border: 1px solid rgb(224, 224, 230);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DocSearch-Button-Key {
|
||||||
|
border: 1px solid rgba(60, 60, 60, .29);
|
||||||
|
background: transparent;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DocSearch-Button
|
||||||
|
.DocSearch-Search-Icon,
|
||||||
|
.DocSearch-Button-Placeholder {
|
||||||
|
color: rgba(0, 0, 0, 0.6);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -5,10 +5,10 @@
|
|||||||
:locales="locales"
|
:locales="locales"
|
||||||
:themeVariable="themeVariable"
|
:themeVariable="themeVariable"
|
||||||
>
|
>
|
||||||
<lay-layout class="layui-layout-document">
|
<lay-layout class="layui-layout-document" style="height:100%">
|
||||||
<lay-header
|
<lay-header
|
||||||
><lay-logo style="box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.15)">
|
><lay-logo>
|
||||||
<img src="../assets/logo.png" />
|
<img src="../assets/logo-png.png" /><span style="margin-left:12px;font-size:20px;color: rgba(0, 0, 0, 0.8);letter-spacing: -0.2px;opacity: 0.8;">layui - vue</span>
|
||||||
</lay-logo>
|
</lay-logo>
|
||||||
<ul
|
<ul
|
||||||
class="layui-nav layui-layout-left"
|
class="layui-nav layui-layout-left"
|
||||||
@ -30,11 +30,6 @@
|
|||||||
{{ t("nav.resources") }}
|
{{ t("nav.resources") }}
|
||||||
</router-link>
|
</router-link>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item">
|
|
||||||
<router-link to="/zh-CN/material">
|
|
||||||
{{ t("nav.material") }}
|
|
||||||
</router-link>
|
|
||||||
</li>
|
|
||||||
<li class="layui-nav-item">
|
<li class="layui-nav-item">
|
||||||
<lay-form>
|
<lay-form>
|
||||||
<lay-search :datas="menus" />
|
<lay-search :datas="menus" />
|
||||||
@ -52,7 +47,6 @@
|
|||||||
size="15px"
|
size="15px"
|
||||||
type="layui-icon-theme"
|
type="layui-icon-theme"
|
||||||
style="
|
style="
|
||||||
color: rgba(255, 255, 255, 0.7);
|
|
||||||
padding-left: 30px;
|
padding-left: 30px;
|
||||||
padding-right: 30px;
|
padding-right: 30px;
|
||||||
"
|
"
|
||||||
@ -122,7 +116,7 @@
|
|||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item">
|
<li class="layui-nav-item">
|
||||||
<a href="https://gitee.com/layui-vue/layui-vue">
|
<a href="https://gitee.com/layui-vue/layui-vue">
|
||||||
<lay-icon type="layui-icon-fonts-code" size="15px"></lay-icon>
|
Gitee
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item">
|
<li class="layui-nav-item">
|
||||||
@ -143,11 +137,6 @@
|
|||||||
>
|
>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item">
|
|
||||||
<a href="https://gitee.com/layui-vue/layui-vue/issues">
|
|
||||||
<lay-icon type="layui-icon-chat" size="15px"></lay-icon>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="layui-nav-item">
|
<li class="layui-nav-item">
|
||||||
<a href="javascript:void(0)">
|
<a href="javascript:void(0)">
|
||||||
<lay-switch
|
<lay-switch
|
||||||
@ -298,6 +287,9 @@ export default {
|
|||||||
};
|
};
|
||||||
|
|
||||||
provide('LayuiVueVersion', layuiVueVersion)
|
provide('LayuiVueVersion', layuiVueVersion)
|
||||||
|
provide("isDark",isDark);
|
||||||
|
provide("theme",theme);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
t,
|
t,
|
||||||
menus,
|
menus,
|
||||||
@ -320,8 +312,8 @@ export default {
|
|||||||
z-index: 99;
|
z-index: 99;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
background: #393d49;
|
background: #ffffff;
|
||||||
border-bottom: 1px solid #404553;
|
border-bottom: 1px solid #EEEEEE;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-layout-document > .layui-layout > .layui-side {
|
.layui-layout-document > .layui-layout > .layui-side {
|
||||||
@ -330,13 +322,7 @@ export default {
|
|||||||
margin-top: 60px;
|
margin-top: 60px;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
height: calc(100% - 60px);
|
height: calc(100% - 60px);
|
||||||
box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
|
border-right: 1px solid #EEEEEE;
|
||||||
}
|
|
||||||
|
|
||||||
.layui-layout-document .layui-body,
|
|
||||||
.layui-layout-document .layui-menu,
|
|
||||||
.layui-layout-document .lay-aside {
|
|
||||||
background-color: var(--global-back-color);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-layout-document > .layui-layout > .layui-body {
|
.layui-layout-document > .layui-layout > .layui-body {
|
||||||
@ -347,11 +333,25 @@ export default {
|
|||||||
height: calc(100% - 60px);
|
height: calc(100% - 60px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.layui-layout-document .layui-header .layui-form-switch {
|
||||||
|
border: 1px solid rgba(60, 60, 60, .29);
|
||||||
|
background-color: #f1f1f1!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-layout-document .layui-header .layui-nav .layui-nav-item > a,
|
||||||
|
.layui-layout-document .layui-header .layui-nav .layui-nav-item > a:hover {
|
||||||
|
color: rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-layout-document .layui-header .layui-logo {
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
.layui-logo img {
|
.layui-logo img {
|
||||||
height: 31px;
|
height: 45px;
|
||||||
width: 82px;
|
|
||||||
left: 15px;
|
left: 15px;
|
||||||
top: 16px;
|
top: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-header > .layui-nav {
|
.layui-header > .layui-nav {
|
||||||
@ -361,13 +361,6 @@ export default {
|
|||||||
.layui-header .layui-local-badge {
|
.layui-header .layui-local-badge {
|
||||||
font-size: 12.4px;
|
font-size: 12.4px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: rgba(255, 255, 255, 0.7);
|
|
||||||
border-color: rgba(255, 255, 255, 0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.layui-header > .layui-local:hover {
|
|
||||||
color: white;
|
|
||||||
border-color: white;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-menu-docs {
|
.layui-menu-docs {
|
||||||
|
|||||||
@ -6,7 +6,6 @@ import layui from '../../src/index'
|
|||||||
import LayCode from './components/LayCode.vue'
|
import LayCode from './components/LayCode.vue'
|
||||||
import LaySearch from './components/LaySearch.vue'
|
import LaySearch from './components/LaySearch.vue'
|
||||||
import LayTableBox from './components/LayTableBox.vue'
|
import LayTableBox from './components/LayTableBox.vue'
|
||||||
import LayComment from './components/LayComment.vue'
|
|
||||||
import LayAnchor from './components/LayAnchor.vue'
|
import LayAnchor from './components/LayAnchor.vue'
|
||||||
import './assets/css/index.css'
|
import './assets/css/index.css'
|
||||||
|
|
||||||
@ -24,7 +23,6 @@ export function createApp(): {
|
|||||||
.component('LayCode', LayCode)
|
.component('LayCode', LayCode)
|
||||||
.component('LaySearch', LaySearch)
|
.component('LaySearch', LaySearch)
|
||||||
.component('LayTableBox', LayTableBox)
|
.component('LayTableBox', LayTableBox)
|
||||||
.component('LayComment', LayComment)
|
|
||||||
.component('LayAnchor',LayAnchor)
|
.component('LayAnchor',LayAnchor)
|
||||||
|
|
||||||
return { app, router }
|
return { app, router }
|
||||||
|
|||||||
@ -8,7 +8,6 @@ import createTitle from "./create-title";
|
|||||||
import createQuote from "./create-quote";
|
import createQuote from "./create-quote";
|
||||||
import createDescribe from "./create-describe";
|
import createDescribe from "./create-describe";
|
||||||
import createTable from "./create-table";
|
import createTable from "./create-table";
|
||||||
import createComment from "./create-comment";
|
|
||||||
import createAnchor from "./create-anchor";
|
import createAnchor from "./create-anchor";
|
||||||
import preWrapper from "./pre-wrapper";
|
import preWrapper from "./pre-wrapper";
|
||||||
import previousNext from "./previous-next";
|
import previousNext from "./previous-next";
|
||||||
@ -32,7 +31,6 @@ const plugins = [
|
|||||||
.use(...createQuote("quote", ""))
|
.use(...createQuote("quote", ""))
|
||||||
.use(...createTitle("title", ""))
|
.use(...createTitle("title", ""))
|
||||||
.use(...createDescribe("describe", ""))
|
.use(...createDescribe("describe", ""))
|
||||||
.use(...createComment("comment", ""))
|
|
||||||
.use(...createAnchor("anchor", ""))
|
.use(...createAnchor("anchor", ""))
|
||||||
.use(...previousNext("previousNext", ""));
|
.use(...previousNext("previousNext", ""));
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,27 +0,0 @@
|
|||||||
import container from 'markdown-it-container'
|
|
||||||
import type Token from 'markdown-it/lib/token'
|
|
||||||
|
|
||||||
type ContainerArgs = [
|
|
||||||
typeof container, string,
|
|
||||||
{ render(tokens: Token[], idx: number): string }
|
|
||||||
]
|
|
||||||
|
|
||||||
export default function createContainer(
|
|
||||||
klass: string,
|
|
||||||
defaultTitle: string
|
|
||||||
): ContainerArgs {
|
|
||||||
return [
|
|
||||||
container,
|
|
||||||
klass,
|
|
||||||
{
|
|
||||||
render(tokens, idx) {
|
|
||||||
const token = tokens[idx]
|
|
||||||
if (token.nesting === 1) {
|
|
||||||
return `<lay-comment>`
|
|
||||||
} else {
|
|
||||||
return '</lay-comment>\n'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -30,7 +30,7 @@ export default function createContainer(
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
if (token.nesting === 1) {
|
if (token.nesting === 1) {
|
||||||
return `<div style="display: flex; justify-content: space-between">
|
return `<div style="display: flex; justify-content: space-between; margin-top:20px;">
|
||||||
<div><router-link to="${
|
<div><router-link to="${
|
||||||
menusChild[prevIndex]?.path
|
menusChild[prevIndex]?.path
|
||||||
}" class="lay-link" style="display: ${
|
}" class="lay-link" style="display: ${
|
||||||
|
|||||||
@ -68,6 +68,11 @@ const zhCN = [
|
|||||||
component: () => import("../../docs/zh-CN/guide/locale.md"),
|
component: () => import("../../docs/zh-CN/guide/locale.md"),
|
||||||
meta: { title: "语言" },
|
meta: { title: "语言" },
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/zh-CN/guide/dark",
|
||||||
|
component: () => import("../../docs/zh-CN/guide/dark.md"),
|
||||||
|
meta: { title: "夜间" },
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@ -91,6 +91,11 @@ export default {
|
|||||||
title: '主题',
|
title: '主题',
|
||||||
subTitle: 'theme',
|
subTitle: 'theme',
|
||||||
path: '/zh-CN/guide/theme',
|
path: '/zh-CN/guide/theme',
|
||||||
|
},{
|
||||||
|
id: 3,
|
||||||
|
title: '夜间',
|
||||||
|
subTitle: 'dark',
|
||||||
|
path: '/zh-CN/guide/dark',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
|
|||||||
@ -4,31 +4,35 @@
|
|||||||
<div class="site-banner-main">
|
<div class="site-banner-main">
|
||||||
<div class="site-zfj site-zfj-anim">
|
<div class="site-zfj site-zfj-anim">
|
||||||
<img
|
<img
|
||||||
src="../assets/logo.jpg"
|
src="../assets/logo-png.png"
|
||||||
style="width: 220px; border-radius: 10px"
|
style="width: 220px; border-radius: 10px"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-anim site-desc site-desc-anim">
|
<div class="layui-anim site-desc site-desc-anim">
|
||||||
<p class="web-font-desc">layui - vue</p>
|
<p class="web-font-desc">layui - vue</p>
|
||||||
<cite
|
<cite>{{ t("home.description") }}</cite>
|
||||||
>{{ t('home.description') }}</cite
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="site-download">
|
<div class="site-download">
|
||||||
<router-link class="layui-inline site-down" to="/zh-CN/guide"
|
<router-link class="layui-inline site-down" to="/zh-CN/guide">
|
||||||
>Get Started</router-link
|
Get Started
|
||||||
>
|
</router-link>
|
||||||
|
<a class="layui-inline site-down" href="javascript:void(0);" @click="changeTheme">
|
||||||
|
|
||||||
|
{{ isDark ? 'Turn Off' : 'Turn On'}}
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="site-version">
|
<div class="site-version">
|
||||||
<span>{{ t('home.version') }}：v<cite class="site-showv">{{ layuiVueVersion }}</cite></span>
|
<span>{{ t('home.version') }}：v<cite class="site-showv">{{ layuiVueVersion }}</cite></span>
|
||||||
<span
|
<span
|
||||||
><router-link
|
>{{ t("home.version") }}：<cite class="site-showv"
|
||||||
class="layui-inline site-down"
|
>1.0.0</cite
|
||||||
to="/zh-CN/guide/changelog"
|
></span
|
||||||
>{{ t('home.changelog') }}</router-link
|
>
|
||||||
|
<span
|
||||||
|
>{{ t("home.download") }}：<em class="site-showdowns"
|
||||||
|
>5463</em
|
||||||
></span
|
></span
|
||||||
>
|
>
|
||||||
<span>{{ t('home.download') }}：<em class="site-showdowns">5463</em></span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="site-banner-other">
|
<div class="site-banner-other">
|
||||||
@ -38,7 +42,7 @@
|
|||||||
rel="nofollow"
|
rel="nofollow"
|
||||||
class="site-star"
|
class="site-star"
|
||||||
>
|
>
|
||||||
<i class="layui-icon"></i> Star <cite id="getStars">716</cite>
|
<i class="layui-icon"></i> Star <cite id="getStars">741</cite>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="https://gitee.com/layui-vue"
|
href="https://gitee.com/layui-vue"
|
||||||
@ -58,7 +62,7 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="margin-left: 10%; margin-right: 10%">
|
<div style="margin-left: 10%; margin-right: 10%; margin-top: 40px">
|
||||||
<div>
|
<div>
|
||||||
<ul class="layui-row layui-col-space30 site-idea">
|
<ul class="layui-row layui-col-space30 site-idea">
|
||||||
<li class="layui-col-md8">
|
<li class="layui-col-md8">
|
||||||
@ -98,48 +102,68 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer footer-index">
|
<div class="footer footer-index">
|
||||||
<p>
|
<p>Released under the <a href="/index.html">MIT License</a>.</p>
|
||||||
Copyright © 2022 <a href="/index.html">www.layui-vue.com</a> mit
|
<p>Copyright © 2021-2022 layui-vue.com</p>
|
||||||
licence
|
|
||||||
</p>
|
|
||||||
<p></p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { inject } from "vue";
|
import { inject, provide } from 'vue';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from "vue-i18n";
|
||||||
export default {
|
export default {
|
||||||
name: "index",
|
name: "index",
|
||||||
setup() {
|
setup() {
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const layuiVueVersion = inject('LayuiVueVersion')
|
const layuiVueVersion = inject('LayuiVueVersion')
|
||||||
|
const isDark = inject("isDark");
|
||||||
|
const theme = inject("theme");
|
||||||
|
|
||||||
|
const changeTheme = () => {
|
||||||
|
isDark.value = !isDark.value;
|
||||||
|
if(theme.value === 'dark') {
|
||||||
|
theme.value = 'light';
|
||||||
|
} else {
|
||||||
|
theme.value = 'dark';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
t,
|
t,
|
||||||
|
isDark,
|
||||||
|
theme,
|
||||||
|
changeTheme,
|
||||||
layuiVueVersion
|
layuiVueVersion
|
||||||
}
|
};
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
|
#app,
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
.site-container {
|
.site-container {
|
||||||
|
background: #fff;
|
||||||
margin-top: 60px;
|
margin-top: 60px;
|
||||||
background-color: whitesmoke;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.site-banner {
|
.site-banner {
|
||||||
position: relative;
|
height: 100%;
|
||||||
height: 600px;
|
|
||||||
text-align: center;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: #393d49;
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
background-image: url(../assets/background.svg);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
}
|
}
|
||||||
.site-banner-bg {
|
.site-banner-bg {
|
||||||
background-position: center 0;
|
background-position: center 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-banner-bg,
|
.site-banner-bg,
|
||||||
.site-banner-main {
|
.site-banner-main {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -154,21 +178,29 @@ export default {
|
|||||||
}
|
}
|
||||||
.site-download a {
|
.site-download a {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 0 50px 0 50px;
|
padding: 0 20px 0 20px;
|
||||||
height: 60px;
|
height: 40px;
|
||||||
line-height: 60px;
|
line-height: 40px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border: 1px solid #c2c2c2;
|
background: #f1f1f1;
|
||||||
border-color: rgba(255, 255, 255, 0.2);
|
border: 1px solid #f1f1f1;
|
||||||
font-size: 24px;
|
font-size: 16px;
|
||||||
color: #ccc;
|
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;
|
||||||
transition: all 0.5s;
|
transition: all 0.5s;
|
||||||
-webkit-transition: all 0.5s;
|
-webkit-transition: all 0.5s;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
}
|
}
|
||||||
.site-download a:hover {
|
.site-download a:hover {
|
||||||
background-color: rgba(255, 255, 255, 0.05);
|
border-radius: 10px;
|
||||||
border-radius: 50px;
|
}
|
||||||
color: #ccc;
|
.site-download a:first-child {
|
||||||
|
background: #009688;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.site-download a+a {
|
||||||
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
.site-zfj {
|
.site-zfj {
|
||||||
padding-top: 25px;
|
padding-top: 25px;
|
||||||
@ -203,26 +235,30 @@ export default {
|
|||||||
}
|
}
|
||||||
.site-desc .web-font-desc {
|
.site-desc .web-font-desc {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: #213547;
|
||||||
font-size: 51px;
|
font-size: 52px;
|
||||||
|
opacity: 0.82;
|
||||||
}
|
}
|
||||||
.web-font-desc {
|
.web-font-desc {
|
||||||
font-style: normal;
|
font-size: 76px;
|
||||||
font-weight: 300;
|
line-height: 1.25;
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: -1.5px;
|
||||||
|
max-width: 960px;
|
||||||
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
.site-desc cite {
|
.site-desc cite {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -40px;
|
bottom: -40px;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
color: #c2c2c2;
|
color: rgba(60, 60, 60, 0.7);
|
||||||
color: rgba(255, 255, 255, 0.66);
|
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
.site-version {
|
.site-version {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: 18px;
|
margin-top: 18px;
|
||||||
color: #ccc;
|
color: rgba(60, 60, 60, 0.7);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
.site-version span {
|
.site-version span {
|
||||||
@ -232,18 +268,23 @@ export default {
|
|||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
.site-version a {
|
.site-version a {
|
||||||
color: #e2e2e2;
|
color: rgba(60, 60, 60, 0.7);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
margin-top: -4px;
|
margin-top: -4px;
|
||||||
}
|
}
|
||||||
.site-banner-other {
|
.site-banner-other {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: 35px;
|
bottom: 90px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.site-container .layui-field-title {
|
||||||
|
border-top: 1px solid #d2d2d2;
|
||||||
|
}
|
||||||
|
|
||||||
.site-banner-other a {
|
.site-banner-other a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
@ -252,10 +293,8 @@ export default {
|
|||||||
margin: 0 6px;
|
margin: 0 6px;
|
||||||
padding: 0 8px;
|
padding: 0 8px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
color: #c2c2c2;
|
color: rgba(60, 60, 60, 0.7);
|
||||||
color: rgba(255, 255, 255, 0.8);
|
border: 1px solid rgba(60, 60, 60, 0.7);
|
||||||
border: 1px solid #c2c2c2;
|
|
||||||
border-color: rgba(255, 255, 255, 0.2);
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
transition: all 0.5s;
|
transition: all 0.5s;
|
||||||
-webkit-transition: all 0.5s;
|
-webkit-transition: all 0.5s;
|
||||||
@ -265,7 +304,9 @@ export default {
|
|||||||
padding: 30px 15px;
|
padding: 30px 15px;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #666;
|
color: rgba(60, 60, 60, 0.7);
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
|
font-size: 13.6px;
|
||||||
|
background: #f9f9f9;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="alone-banner layui-bg-black">
|
<div class="alone-banner">
|
||||||
<div class="layui-main">
|
<div class="layui-main">
|
||||||
<h1>物 料 市 场</h1>
|
<h1>物 料 市 场</h1>
|
||||||
<p class="layui-hide-xs">让 每 一 个 轮 子 产 生 价 值 ✨<a style="color:white;" href="https://gitee.com/layui-vue/layui-vue/issues/new?issue%5Bassignee_id%5D=0&issue%5Bmilestone_id%5D=0">【投递】</a></p>
|
<p class="layui-hide-xs">让 每 一 个 轮 子 产 生 价 值 ✨<a style="color:white;" href="https://gitee.com/layui-vue/layui-vue/issues/new?issue%5Bassignee_id%5D=0&issue%5Bmilestone_id%5D=0">【投递】</a></p>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@layui/layui-vue",
|
"name": "@layui/layui-vue",
|
||||||
"version": "0.4.4",
|
"version": "0.4.5-alpha.1",
|
||||||
"author": "就眠儀式",
|
"author": "就眠儀式",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"description": "a component library for Vue 3 base on layui-vue",
|
"description": "a component library for Vue 3 base on layui-vue",
|
||||||
@ -43,6 +43,7 @@
|
|||||||
"@layui/layer-vue": "^1.3.11",
|
"@layui/layer-vue": "^1.3.11",
|
||||||
"@vueuse/core": "^7.6.2",
|
"@vueuse/core": "^7.6.2",
|
||||||
"async-validator": "^4.0.7",
|
"async-validator": "^4.0.7",
|
||||||
|
"darkreader": "^4.9.46",
|
||||||
"evtd": "^0.2.3",
|
"evtd": "^0.2.3",
|
||||||
"moment": "^2.29.1",
|
"moment": "^2.29.1",
|
||||||
"uuid": "^8.3.2",
|
"uuid": "^8.3.2",
|
||||||
|
|||||||
@ -13,7 +13,7 @@ import {
|
|||||||
ButtonSize,
|
ButtonSize,
|
||||||
ButtonType,
|
ButtonType,
|
||||||
} from "./interface";
|
} from "./interface";
|
||||||
import { BooleanOrString, String } from "src/types";
|
import { BooleanOrString, String } from "../../types";
|
||||||
|
|
||||||
export interface LayButtonProps {
|
export interface LayButtonProps {
|
||||||
type?: ButtonType;
|
type?: ButtonType;
|
||||||
|
|||||||
@ -7,7 +7,7 @@ export default {
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, useSlots } from "vue";
|
import { computed, useSlots } from "vue";
|
||||||
import "./index.less";
|
import "./index.less";
|
||||||
import { String } from "src/types";
|
import { String } from "../../types";
|
||||||
import { CardShadow } from "./interface";
|
import { CardShadow } from "./interface";
|
||||||
|
|
||||||
const slot = useSlots();
|
const slot = useSlots();
|
||||||
|
|||||||
@ -105,7 +105,7 @@ const handleClick = function () {
|
|||||||
:lay-skin="skin"
|
:lay-skin="skin"
|
||||||
>
|
>
|
||||||
<span v-if="$slots?.default"><slot></slot></span>
|
<span v-if="$slots?.default"><slot></slot></span>
|
||||||
<i class="layui-icon layui-icon-ok"></i>
|
<i :class="{ 'layui-icon layui-icon-ok': isChecked }"></i>
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
1
src/component/datePicker/interface.ts
Normal file
1
src/component/datePicker/interface.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export type DatePickerType = "date" | "datetime" | "year" | "time" | "month";
|
||||||
@ -36,6 +36,7 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 位置开始 */
|
/** 位置开始 */
|
||||||
.layui-tab.is-right {
|
.layui-tab.is-right {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -216,26 +217,36 @@
|
|||||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-tab-card > .layui-tab-title {
|
.layui-tab-card > .layui-tab-head.is-top,
|
||||||
|
.layui-tab-card > .layui-tab-head.is-bottom {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-tab-card > .layui-tab-head > .layui-tab-title.is-top,
|
||||||
|
.layui-tab-card > .layui-tab-head > .layui-tab-title.is-bottom {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-tab-card > .layui-tab-head > .layui-tab-title {
|
||||||
background-color: @global-neutral-color-1;
|
background-color: @global-neutral-color-1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-tab-card > .layui-tab-title li {
|
.layui-tab-card > .layui-tab-head > .layui-tab-title li {
|
||||||
margin-right: -1px;
|
margin-right: -1px;
|
||||||
margin-left: -1px;
|
margin-left: -1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-tab-card > .layui-tab-title .layui-this {
|
.layui-tab-card > .layui-tab-head > .layui-tab-title .layui-this {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-tab-card > .layui-tab-title .layui-this:after {
|
.layui-tab-card > .layui-tab-head > .layui-tab-title .layui-this:after {
|
||||||
border-top: none;
|
border-top: none;
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-bottom-color: #fff;
|
border-bottom-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-tab-card > .layui-tab-title .layui-tab-bar {
|
.layui-tab-card > .layui-tab-head > .layui-tab-title .layui-tab-bar {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
|||||||
@ -18,7 +18,7 @@ import {
|
|||||||
watch,
|
watch,
|
||||||
} from "vue";
|
} from "vue";
|
||||||
|
|
||||||
export type tabPositionType = "top" | "bottom" | "left" | "right" ;
|
export type tabPositionType = "top" | "bottom" | "left" | "right";
|
||||||
|
|
||||||
export interface LayTabProps {
|
export interface LayTabProps {
|
||||||
type?: string;
|
type?: string;
|
||||||
@ -46,7 +46,7 @@ const setItemInstanceBySlot = function (nodeList: VNode[]) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const props = withDefaults(defineProps<LayTabProps>(), {
|
const props = withDefaults(defineProps<LayTabProps>(), {
|
||||||
tabPosition: "top"
|
tabPosition: "top",
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(["update:modelValue", "change", "close"]);
|
const emit = defineEmits(["update:modelValue", "change", "close"]);
|
||||||
@ -98,26 +98,29 @@ provide("slotsChange", slotsChange);
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="layui-tab"
|
class="layui-tab"
|
||||||
:class="[type ? 'layui-tab-' + type : '',
|
:class="[
|
||||||
props.tabPosition ? `is-${tabPosition}` : '']"
|
type ? 'layui-tab-' + type : '',
|
||||||
|
props.tabPosition ? `is-${tabPosition}` : '',
|
||||||
|
]"
|
||||||
v-if="active"
|
v-if="active"
|
||||||
>
|
>
|
||||||
<div v-if="tabPosition === 'bottom'" class="layui-tab-content">
|
<div v-if="tabPosition === 'bottom'" class="layui-tab-content">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div :class="[
|
<div
|
||||||
'layui-tab-head',
|
:class="['layui-tab-head', props.tabPosition ? `is-${tabPosition}` : '']"
|
||||||
props.tabPosition ? `is-${tabPosition}` : ''
|
>
|
||||||
]">
|
<ul
|
||||||
<ul :class="[
|
:class="[
|
||||||
'layui-tab-title',
|
'layui-tab-title',
|
||||||
props.tabPosition ? `is-${tabPosition}` : ''
|
props.tabPosition ? `is-${tabPosition}` : '',
|
||||||
]">
|
]"
|
||||||
|
>
|
||||||
<li
|
<li
|
||||||
v-for="(children, index) in childrens"
|
v-for="(children, index) in childrens"
|
||||||
:key="children"
|
:key="children"
|
||||||
:class="[children.props.id === active ? 'layui-this' : '',]"
|
:class="[children.props.id === active ? 'layui-this' : '']"
|
||||||
@click.stop="change(children.props.id)"
|
@click.stop="change(children.props.id)"
|
||||||
>
|
>
|
||||||
{{ children.props.title }}
|
{{ children.props.title }}
|
||||||
|
|||||||
@ -7,6 +7,11 @@ export default {
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { watch } from "vue";
|
import { watch } from "vue";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
|
import {
|
||||||
|
enable as enableDarkMode,
|
||||||
|
disable as disableDarkMode,
|
||||||
|
} from "darkreader";
|
||||||
|
|
||||||
const { locale, setLocaleMessage, mergeLocaleMessage } = useI18n();
|
const { locale, setLocaleMessage, mergeLocaleMessage } = useI18n();
|
||||||
|
|
||||||
export interface LayConfigProviderProps {
|
export interface LayConfigProviderProps {
|
||||||
@ -34,8 +39,30 @@ const changeLocales = (lang: string, locales: any, merge: boolean) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const changeTheme = (theme: string) => {
|
const changeTheme = (theme: string) => {
|
||||||
document.body.removeAttribute("lay-theme");
|
if (theme === "dark") {
|
||||||
document.body.setAttribute("lay-theme", theme);
|
enableDarkMode(
|
||||||
|
{
|
||||||
|
mode: 1,
|
||||||
|
brightness: 100,
|
||||||
|
contrast: 90,
|
||||||
|
sepia: 0,
|
||||||
|
// darkSchemeTextColor: 'rgba(255, 255, 255, 0.9)',
|
||||||
|
// darkSchemeBackgroundColor: '#22272E'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
invert: [],
|
||||||
|
css: ``,
|
||||||
|
ignoreInlineStyle: [
|
||||||
|
".layui-colorpicker-trigger-span",
|
||||||
|
"div.layui-color-picker *",
|
||||||
|
],
|
||||||
|
ignoreImageAnalysis: [],
|
||||||
|
disableStyleSheetsProxy: false,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
disableDarkMode();
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const changeThemeVariable = (vars: any) => {
|
const changeThemeVariable = (vars: any) => {
|
||||||
|
|||||||
@ -276,7 +276,6 @@ a cite {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
color: @global-primary-color;
|
color: @global-primary-color;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-layout-left {
|
.layui-layout-left {
|
||||||
|
|||||||
@ -44,33 +44,6 @@
|
|||||||
|
|
||||||
--global-border-radius: 2px;
|
--global-border-radius: 2px;
|
||||||
|
|
||||||
--global-fore-color: #333;
|
|
||||||
|
|
||||||
--global-back-color: #ffffff;
|
|
||||||
|
|
||||||
--global-neutral-color-1: #FAFAFA;
|
|
||||||
|
|
||||||
--global-neutral-color-2: #F6F6F6;
|
|
||||||
|
|
||||||
--global-neutral-color-3: #eeeeee;
|
|
||||||
|
|
||||||
--global-neutral-color-4: #e2e2e2;
|
|
||||||
|
|
||||||
--global-neutral-color-5: #dddddd;
|
|
||||||
|
|
||||||
--global-neutral-color-6: #d2d2d2;
|
|
||||||
|
|
||||||
--global-neutral-color-7: #cccccc;
|
|
||||||
|
|
||||||
--global-neutral-color-8: #c2c2c2;
|
|
||||||
}
|
|
||||||
|
|
||||||
body[lay-theme="dark"] {
|
|
||||||
|
|
||||||
--global-fore-color: #ffffff;
|
|
||||||
|
|
||||||
--global-back-color: #333;
|
|
||||||
|
|
||||||
--global-neutral-color-1: #FAFAFA;
|
--global-neutral-color-1: #FAFAFA;
|
||||||
|
|
||||||
--global-neutral-color-2: #F6F6F6;
|
--global-neutral-color-2: #F6F6F6;
|
||||||
@ -86,4 +59,5 @@ body[lay-theme="dark"] {
|
|||||||
--global-neutral-color-7: #cccccc;
|
--global-neutral-color-7: #cccccc;
|
||||||
|
|
||||||
--global-neutral-color-8: #c2c2c2;
|
--global-neutral-color-8: #c2c2c2;
|
||||||
|
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user