feat(slider): 初步集成 slider 滑块组件
This commit is contained in:
@@ -1,3 +1,6 @@
|
||||
::: field 后台布局
|
||||
:::
|
||||
|
||||
<br>
|
||||
|
||||
<img src="../../../src/assets/layout.png"/>
|
||||
@@ -5,7 +8,7 @@
|
||||
<br>
|
||||
<br>
|
||||
|
||||
layui 之所以赢得如此多人的青睐,更多是在于它「前后界面兼备」的能力。既可编织出绚丽的前台页面,又可满足繁杂的管理系统界面需求。layui 致力于让每一位开发者都能轻松搭建自己的管理界面。下面是演示代码 :
|
||||
<p>layui 之所以赢得如此多人的青睐,更多是在于它「前后界面兼备」的能力。既可编织出绚丽的前台页面,又可满足繁杂的管理系统界面需求。layui 致力于让每一位开发者都能轻松搭建自己的管理界面。下面是演示代码 :</p>
|
||||
|
||||
<br>
|
||||
|
||||
|
||||
42
docs/docs/zh-CN/components/slider.md
Normal file
42
docs/docs/zh-CN/components/slider.md
Normal file
@@ -0,0 +1,42 @@
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-slider></lay-slider>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-slider :vertical="vertical"></lay-slider>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const vertical = ref(true)
|
||||
|
||||
return {
|
||||
vertical
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
@@ -1,7 +1,13 @@
|
||||
::: demo
|
||||
::: field 更新记录
|
||||
:::
|
||||
|
||||
::: demo
|
||||
<template>
|
||||
<lay-timeline>
|
||||
<lay-timeline-item title="0.1.4">
|
||||
[新增] menu 菜单 title 插槽,允许自定义菜单项。<br>
|
||||
[新增] menu 菜单 title 插槽,允许自定义菜单项。<br>
|
||||
</lay-timeline-item>
|
||||
<lay-timeline-item title="0.1.1">
|
||||
[新增] menu 菜单 title 插槽,允许自定义菜单项。<br>
|
||||
[新增] table 表格 toolbar 插槽, 用于自定义工具栏。<br>
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: field 快速上手
|
||||
:::
|
||||
|
||||
<br>
|
||||
|
||||
使用 npm 下载
|
||||
@@ -31,7 +31,7 @@
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:void(0)"> 0.1.3 </a>
|
||||
<a href="javascript:void(0)"> 0.1.4 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</lay-header>
|
||||
@@ -74,12 +74,15 @@ export default {
|
||||
setup() {
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const currentPath = ref('hahaha')
|
||||
const currentPath = ref('/zh-CN/guide')
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
(newValue, oldValue) => {
|
||||
currentPath.value = route.path
|
||||
(val) => {
|
||||
currentPath.value = val
|
||||
},{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
|
||||
@@ -87,19 +90,19 @@ export default {
|
||||
{
|
||||
id: 1,
|
||||
title: '介绍',
|
||||
subTitle: 'Getting Started',
|
||||
path: '/zh-CN/guide',
|
||||
subTitle: 'introduce',
|
||||
path: '/zh-CN/guide/introduce',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '安装',
|
||||
subTitle: 'install',
|
||||
path: '/zh-CN/guide/install',
|
||||
subTitle: 'get started',
|
||||
path: '/zh-CN/guide/getStarted',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '更新',
|
||||
subTitle: 'changelog',
|
||||
subTitle: 'change log',
|
||||
path: '/zh-CN/guide/changelog',
|
||||
},
|
||||
{
|
||||
@@ -301,6 +304,11 @@ export default {
|
||||
title: '开关',
|
||||
subTitle: 'switch',
|
||||
path: '/zh-CN/components/switch',
|
||||
},{
|
||||
id: 37,
|
||||
title: '滑块',
|
||||
subTitle: 'slider',
|
||||
path: '/zh-CN/components/slider',
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@ export default function createContainer(
|
||||
if (token.nesting === 1) {
|
||||
return `<lay-field title="${
|
||||
info || defaultTitle
|
||||
}" style="margin-top:40px">`
|
||||
}" style="margin-top:10px;margin-bottom: 10px;">`
|
||||
} else {
|
||||
return '</lay-field>\n'
|
||||
}
|
||||
|
||||
@@ -3,18 +3,18 @@ import BaseLayout from '../layouts/Layout.vue'
|
||||
const zhCN = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/zh-CN/guide/',
|
||||
redirect: '/zh-CN/guide/introduce',
|
||||
component: BaseLayout,
|
||||
meta: { title: '指南', icon: 'el-icon-position' },
|
||||
children: [
|
||||
{
|
||||
path: '/zh-CN/guide/',
|
||||
component: () => import('../../docs/zh-CN/guide/home.md'),
|
||||
path: '/zh-CN/guide/introduce',
|
||||
component: () => import('../../docs/zh-CN/guide/introduce.md'),
|
||||
meta: { title: '介绍' },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/guide/install',
|
||||
component: () => import('../../docs/zh-CN/guide/install.md'),
|
||||
path: '/zh-CN/guide/getStarted',
|
||||
component: () => import('../../docs/zh-CN/guide/getStarted.md'),
|
||||
meta: { title: '安装' },
|
||||
},
|
||||
{
|
||||
@@ -194,6 +194,10 @@ const zhCN = [
|
||||
path: '/zh-CN/components/switch',
|
||||
component: () => import('../../docs/zh-CN/components/switch.md'),
|
||||
meta: { title: '开关' },
|
||||
},{
|
||||
path: '/zh-CN/components/slider',
|
||||
component: () => import('../../docs/zh-CN/components/slider.md'),
|
||||
meta: { title: '滑块' },
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@@ -1,32 +1,9 @@
|
||||
:root {
|
||||
--c-white: #ffffff;
|
||||
--c-black: #000000;
|
||||
|
||||
--c-divider-light: rgba(60, 60, 67, 0.12);
|
||||
--c-divider-dark: rgba(84, 84, 88, 0.48);
|
||||
|
||||
--c-text-light-1: #2c3e50;
|
||||
--c-text-light-2: #476582;
|
||||
--c-text-light-3: #90a4b7;
|
||||
|
||||
--c-brand-light: #4abf8a;
|
||||
|
||||
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
--shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
|
||||
--shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
|
||||
--shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
|
||||
--shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
:root {
|
||||
--c-divider: var(--c-divider-light);
|
||||
|
||||
--c-text: var(--c-text-light-1);
|
||||
--c-text-light: var(--c-text-light-2);
|
||||
--c-text-lighter: var(--c-text-light-3);
|
||||
|
||||
--c-bg: var(--c-white);
|
||||
|
||||
--code-line-height: 24px;
|
||||
--code-font-family: var(--font-family-mono);
|
||||
--code-font-size: 14px;
|
||||
|
||||
Reference in New Issue
Block a user