1.步骤条封装
This commit is contained in:
dingyongya
384
example/docs/zh-CN/components/step.md
Normal file
384
example/docs/zh-CN/components/step.md
Normal file
@@ -0,0 +1,384 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<lay-step :active="active">
|
||||
<lay-step-item></lay-step-item>
|
||||
<lay-step-item></lay-step-item>
|
||||
<lay-step-item></lay-step-item>
|
||||
<lay-step-item></lay-step-item>
|
||||
</lay-step>
|
||||
<lay-button size="xs" @click="nexts">下一步</lay-button>
|
||||
<lay-button size="xs" @click="previous">上一步</lay-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const loading = ref(true);
|
||||
const active = ref(-1);
|
||||
const nexts = () => {
|
||||
if (active.value++ >=3) active.value = 0
|
||||
};
|
||||
const previous = () => {
|
||||
if (active.value-- ===0) active.value = 0
|
||||
};
|
||||
return {
|
||||
loading,
|
||||
active
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 带标题带描述
|
||||
:::
|
||||
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<lay-step :active="active">
|
||||
<lay-step-item title="First" content="First step"></lay-step-item>
|
||||
<lay-step-item title="Second" content="Second step"></lay-step-item>
|
||||
<lay-step-item title="Third" content="Third step"></lay-step-item>
|
||||
<lay-step-item title="Fourth" content="Fourth step"></lay-step-item>
|
||||
</lay-step>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const loading = ref(true);
|
||||
const active = ref(-1);
|
||||
const nexts = () => {
|
||||
if (active.value++ >=3) active.value = 0
|
||||
};
|
||||
const previous = () => {
|
||||
if (active.value-- ===0) active.value = 0
|
||||
};
|
||||
return {
|
||||
loading,
|
||||
active
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 设置当前选中状态
|
||||
:::
|
||||
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<lay-step :active="active" current-status="primary">
|
||||
<lay-step-item title="First" content="First step"></lay-step-item>
|
||||
<lay-step-item title="Second" content="Second step"></lay-step-item>
|
||||
<lay-step-item title="Third" content="Third step"></lay-step-item>
|
||||
</lay-step>
|
||||
<lay-button size="xs" @click="next">下一步</lay-button>
|
||||
<lay-button size="xs" @click="previous">上一步</lay-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const loading = ref(true);
|
||||
const active = ref(-1);
|
||||
const next = () => {
|
||||
if (active.value++ >=2) active.value = 0
|
||||
};
|
||||
const previous = () => {
|
||||
if (active.value-- ===0) active.value = 0
|
||||
};
|
||||
return {
|
||||
loading,
|
||||
active
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 设置第几步状态
|
||||
:::
|
||||
|
||||
这里设置`status` 会覆盖掉`current-status`
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<lay-step :active="active" current-status="warning">
|
||||
<lay-step-item title="First" content="First step"></lay-step-item>
|
||||
<lay-step-item status="fail" title="Second" content="Second step"></lay-step-item>
|
||||
<lay-step-item title="Third" content="Third step"></lay-step-item>
|
||||
<lay-step-item title="Fourth" content="Fourth step"></lay-step-item>
|
||||
</lay-step>
|
||||
<lay-button size="xs" @click="nexts">下一步</lay-button>
|
||||
<lay-button size="xs" @click="previous">上一步</lay-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const loading = ref(true);
|
||||
const active = ref(-1);
|
||||
const nexts = () => {
|
||||
if (active.value++ >=3) active.value = 0
|
||||
};
|
||||
const previous = () => {
|
||||
if (active.value-- ===0) active.value = 0
|
||||
};
|
||||
return {
|
||||
loading,
|
||||
active
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 自定义宽度
|
||||
:::
|
||||
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<lay-step :active="active" space="200px">
|
||||
<lay-step-item title="First" content="First step"></lay-step-item>
|
||||
<lay-step-item title="Second" content="Second step"></lay-step-item>
|
||||
<lay-step-item title="Third" content="Third step"></lay-step-item>
|
||||
</lay-step>
|
||||
<lay-button size="xs" @click="next">下一步</lay-button>
|
||||
<lay-button size="xs" @click="previous">上一步</lay-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const loading = ref(true);
|
||||
const active = ref(-1);
|
||||
const next = () => {
|
||||
if (active.value++ >=2) active.value = 0
|
||||
};
|
||||
const previous = () => {
|
||||
if (active.value-- ===0) active.value = 0
|
||||
};
|
||||
return {
|
||||
loading,
|
||||
active
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 自定义图标
|
||||
:::
|
||||
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<lay-step :active="active">
|
||||
<lay-step-item title="First" content="First step" icon="layui-icon-release"></lay-step-item>
|
||||
<lay-step-item title="Second" content="Second step" icon="layui-icon-tree"></lay-step-item>
|
||||
<lay-step-item title="Third" content="Third step" icon="layui-icon-share"></lay-step-item>
|
||||
</lay-step>
|
||||
<lay-button size="xs" @click="next">下一步</lay-button>
|
||||
<lay-button size="xs" @click="previous">上一步</lay-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const loading = ref(true);
|
||||
const active = ref(-1);
|
||||
const next = () => {
|
||||
if (active.value++ >=2) active.value = 0
|
||||
};
|
||||
const previous = () => {
|
||||
if (active.value-- ===0) active.value = 0
|
||||
};
|
||||
return {
|
||||
loading,
|
||||
active
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 居中
|
||||
:::
|
||||
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<lay-step :active="active" center>
|
||||
<lay-step-item title="First" content="First step">
|
||||
<template #pace>
|
||||
<lay-icon type="layui-icon-ok"></lay-icon>
|
||||
</template>
|
||||
</lay-step-item>
|
||||
<lay-step-item title="Second" content="Second step"></lay-step-item>
|
||||
<lay-step-item title="Third" content="Third step"></lay-step-item>
|
||||
</lay-step>
|
||||
<lay-button size="xs" @click="next">下一步</lay-button>
|
||||
<lay-button size="xs" @click="previous">上一步</lay-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const loading = ref(true);
|
||||
const active = ref(-1);
|
||||
const next = () => {
|
||||
if (active.value++ >=2) active.value = 0
|
||||
};
|
||||
const previous = () => {
|
||||
if (active.value-- ===0) active.value = 0
|
||||
};
|
||||
return {
|
||||
loading,
|
||||
active
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 垂直
|
||||
:::
|
||||
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div style="height: 300px">
|
||||
<lay-step :active="active" direction="vertical">
|
||||
<lay-step-item title="First" content="First step">
|
||||
<template #pace>
|
||||
<lay-icon type="layui-icon-ok"></lay-icon>
|
||||
</template>
|
||||
</lay-step-item>
|
||||
<lay-step-item title="Second" content="Second step"></lay-step-item>
|
||||
<lay-step-item title="Third" content="Third step"></lay-step-item>
|
||||
</lay-step>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const loading = ref(true);
|
||||
const active = ref(-1);
|
||||
const next = () => {
|
||||
if (active.value++ >=2) active.value = 0
|
||||
};
|
||||
const previous = () => {
|
||||
if (active.value-- ===0) active.value = 0
|
||||
};
|
||||
return {
|
||||
loading,
|
||||
active
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title step步骤条属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 |可选值 | 默认值|
|
||||
| ----- | ---- | ------ | ---| ---|
|
||||
| active | 第几步 | number |-| 0 |
|
||||
| center | 居中布局 | boolean | `true` `false` | `false` |
|
||||
| direction | 垂直/平行布局 | string |`horizontal` `vertical` | `horizontal` |
|
||||
| space | 宽度 | string | - | `auto` |
|
||||
| currentStatus | 当前状态显示 | string | `primary` `success` `fail` `warning` | `primary` |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: title stepItem步骤条属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 |可选值 | 默认值|
|
||||
| ----- | ---- | ------ | ---| ---|
|
||||
| title| 标题 | string | - | - |
|
||||
| content | 内容描述 | string | - | -|
|
||||
| icon | 图标 | string | - | -|
|
||||
| status | 状态 | string | `primary` `success` `fail` `warning` | `primary`|
|
||||
|
||||
|
||||
:::
|
||||
|
||||
::: title stepItem步骤条slot
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 |
|
||||
| ----- | ---- |
|
||||
| pace | 圆圈内容自定义 |
|
||||
| default | 内容区域自定义 |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@@ -1,52 +1,52 @@
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-nocheck
|
||||
import { createApp } from './main'
|
||||
import { renderToString } from '@vue/server-renderer'
|
||||
import { createApp } from "./main";
|
||||
import { renderToString } from "@vue/server-renderer";
|
||||
|
||||
export async function render(url, manifest): Promise<string[]> {
|
||||
const { app, router } = createApp()
|
||||
const { app, router } = createApp();
|
||||
|
||||
// set the router to the desired URL before rendering
|
||||
router.push(url)
|
||||
await router.isReady()
|
||||
router.push(url);
|
||||
await router.isReady();
|
||||
|
||||
// passing SSR context object which will be available via useSSRContext()
|
||||
// @vitejs/plugin-vue injects code into a component's setup() that registers
|
||||
// @vitejs/plugin-vue injects code into a component's step() that registers
|
||||
// itself on ctx.modules. After the render, ctx.modules would contain all the
|
||||
// components that have been instantiated during this render call.
|
||||
const ctx = {}
|
||||
const html = await renderToString(app, ctx)
|
||||
const ctx = {};
|
||||
const html = await renderToString(app, ctx);
|
||||
|
||||
// the SSR manifest generated by Vite contains module -> chunk/asset mapping
|
||||
// which we can then use to determine what files need to be preloaded for this
|
||||
// request.
|
||||
const preloadLinks = renderPreloadLinks(ctx.modules, manifest)
|
||||
return [html, preloadLinks]
|
||||
const preloadLinks = renderPreloadLinks(ctx.modules, manifest);
|
||||
return [html, preloadLinks];
|
||||
}
|
||||
|
||||
function renderPreloadLinks(modules, manifest) {
|
||||
let links = ''
|
||||
const seen = new Set()
|
||||
let links = "";
|
||||
const seen = new Set();
|
||||
modules.forEach((id) => {
|
||||
const files = manifest[id]
|
||||
const files = manifest[id];
|
||||
if (files) {
|
||||
files.forEach((file) => {
|
||||
if (!seen.has(file)) {
|
||||
seen.add(file)
|
||||
links += renderPreloadLink(file)
|
||||
seen.add(file);
|
||||
links += renderPreloadLink(file);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
})
|
||||
return links
|
||||
});
|
||||
return links;
|
||||
}
|
||||
|
||||
function renderPreloadLink(file) {
|
||||
if (file.endsWith('.js')) {
|
||||
return `<link rel="modulepreload" crossorigin href="${file}">`
|
||||
} else if (file.endsWith('.css')) {
|
||||
return `<link rel="stylesheet" href="${file}">`
|
||||
if (file.endsWith(".js")) {
|
||||
return `<link rel="modulepreload" crossorigin href="${file}">`;
|
||||
} else if (file.endsWith(".css")) {
|
||||
return `<link rel="stylesheet" href="${file}">`;
|
||||
} else {
|
||||
return ''
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,362 +1,373 @@
|
||||
import BaseLayout from '../layouts/Layout.vue'
|
||||
import Component from '../view/component.vue'
|
||||
import Hooks from '../view/hooks.vue'
|
||||
import Guide from '../view/guide.vue'
|
||||
import Index from '../view/index.vue'
|
||||
import Ecology from '../view/ecology.vue'
|
||||
import BaseLayout from "../layouts/Layout.vue";
|
||||
import Component from "../view/component.vue";
|
||||
import Hooks from "../view/hooks.vue";
|
||||
import Guide from "../view/guide.vue";
|
||||
import Index from "../view/index.vue";
|
||||
import Ecology from "../view/ecology.vue";
|
||||
|
||||
const zhCN = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/zh-CN/index',
|
||||
path: "/",
|
||||
redirect: "/zh-CN/index",
|
||||
component: BaseLayout,
|
||||
meta: { title: '首页' },
|
||||
meta: { title: "首页" },
|
||||
children: [
|
||||
{
|
||||
path: '/zh-CN/index',
|
||||
path: "/zh-CN/index",
|
||||
component: Index,
|
||||
meta: { title: '指南' },
|
||||
meta: { title: "指南" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/ecology',
|
||||
path: "/zh-CN/ecology",
|
||||
component: Ecology,
|
||||
meta: { title: '生态' },
|
||||
meta: { title: "生态" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/guide',
|
||||
redirect: '/zh-CN/guide/introduce',
|
||||
path: "/zh-CN/guide",
|
||||
redirect: "/zh-CN/guide/introduce",
|
||||
component: Guide,
|
||||
meta: { title: '指南' },
|
||||
meta: { title: "指南" },
|
||||
children: [
|
||||
{
|
||||
path: '/zh-CN/guide/introduce',
|
||||
component: () => import('../../docs/zh-CN/guide/introduce.md'),
|
||||
meta: { title: '介绍' },
|
||||
path: "/zh-CN/guide/introduce",
|
||||
component: () => import("../../docs/zh-CN/guide/introduce.md"),
|
||||
meta: { title: "介绍" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/guide/getStarted',
|
||||
component: () => import('../../docs/zh-CN/guide/getStarted.md'),
|
||||
meta: { title: '安装' },
|
||||
path: "/zh-CN/guide/getStarted",
|
||||
component: () => import("../../docs/zh-CN/guide/getStarted.md"),
|
||||
meta: { title: "安装" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/guide/changelog',
|
||||
component: () => import('../../docs/zh-CN/guide/changelog.md'),
|
||||
meta: { title: '更新' },
|
||||
path: "/zh-CN/guide/changelog",
|
||||
component: () => import("../../docs/zh-CN/guide/changelog.md"),
|
||||
meta: { title: "更新" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/guide/problem',
|
||||
component: () => import('../../docs/zh-CN/guide/problem.md'),
|
||||
meta: { title: '问题' },
|
||||
path: "/zh-CN/guide/problem",
|
||||
component: () => import("../../docs/zh-CN/guide/problem.md"),
|
||||
meta: { title: "问题" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/guide/member',
|
||||
component: () => import('../../docs/zh-CN/guide/member.md'),
|
||||
meta: { title: '团队' },
|
||||
path: "/zh-CN/guide/member",
|
||||
component: () => import("../../docs/zh-CN/guide/member.md"),
|
||||
meta: { title: "团队" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/guide/norms',
|
||||
component: () => import('../../docs/zh-CN/guide/norms.md'),
|
||||
meta: { title: '规范' },
|
||||
path: "/zh-CN/guide/norms",
|
||||
component: () => import("../../docs/zh-CN/guide/norms.md"),
|
||||
meta: { title: "规范" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/guide/theme',
|
||||
component: () => import('../../docs/zh-CN/guide/theme.md'),
|
||||
meta: { title: '主题' },
|
||||
path: "/zh-CN/guide/theme",
|
||||
component: () => import("../../docs/zh-CN/guide/theme.md"),
|
||||
meta: { title: "主题" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/guide/sponsor',
|
||||
component: () => import('../../docs/zh-CN/guide/sponsor.md'),
|
||||
meta: { title: '赞助' },
|
||||
path: "/zh-CN/guide/sponsor",
|
||||
component: () => import("../../docs/zh-CN/guide/sponsor.md"),
|
||||
meta: { title: "赞助" },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components',
|
||||
redirect: '/zh-CN/components/color',
|
||||
path: "/zh-CN/components",
|
||||
redirect: "/zh-CN/components/color",
|
||||
component: Component,
|
||||
meta: { title: '组件' },
|
||||
meta: { title: "组件" },
|
||||
children: [
|
||||
{
|
||||
path: '/zh-CN/components/skeleton',
|
||||
component: () => import('../../docs/zh-CN/components/skeleton.md'),
|
||||
meta: { title: '骨架屏' },
|
||||
path: "/zh-CN/components/step",
|
||||
component: () => import("../../docs/zh-CN/components/step.md"),
|
||||
meta: { title: "分步" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/layout',
|
||||
component: () => import('../../docs/zh-CN/components/layout.md'),
|
||||
meta: { title: '布局' },
|
||||
path: "/zh-CN/components/skeleton",
|
||||
component: () => import("../../docs/zh-CN/components/skeleton.md"),
|
||||
meta: { title: "骨架屏" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/color',
|
||||
component: () => import('../../docs/zh-CN/components/color.md'),
|
||||
meta: { title: '颜色' },
|
||||
path: "/zh-CN/components/layout",
|
||||
component: () => import("../../docs/zh-CN/components/layout.md"),
|
||||
meta: { title: "布局" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/container',
|
||||
component: () => import('../../docs/zh-CN/components/container.md'),
|
||||
meta: { title: '容器' },
|
||||
path: "/zh-CN/components/color",
|
||||
component: () => import("../../docs/zh-CN/components/color.md"),
|
||||
meta: { title: "颜色" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/breadcrumb',
|
||||
path: "/zh-CN/components/container",
|
||||
component: () => import("../../docs/zh-CN/components/container.md"),
|
||||
meta: { title: "容器" },
|
||||
},
|
||||
{
|
||||
path: "/zh-CN/components/breadcrumb",
|
||||
component: () =>
|
||||
import('../../docs/zh-CN/components/breadcrumb.md'),
|
||||
meta: { title: '面包屑' },
|
||||
import("../../docs/zh-CN/components/breadcrumb.md"),
|
||||
meta: { title: "面包屑" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/button',
|
||||
component: () => import('../../docs/zh-CN/components/button.md'),
|
||||
meta: { title: '按钮' },
|
||||
path: "/zh-CN/components/button",
|
||||
component: () => import("../../docs/zh-CN/components/button.md"),
|
||||
meta: { title: "按钮" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/icon',
|
||||
component: () => import('../../docs/zh-CN/components/icon.md'),
|
||||
meta: { title: '图标' },
|
||||
path: "/zh-CN/components/icon",
|
||||
component: () => import("../../docs/zh-CN/components/icon.md"),
|
||||
meta: { title: "图标" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/panel',
|
||||
component: () => import('../../docs/zh-CN/components/panel.md'),
|
||||
meta: { title: '面板' },
|
||||
path: "/zh-CN/components/panel",
|
||||
component: () => import("../../docs/zh-CN/components/panel.md"),
|
||||
meta: { title: "面板" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/animation',
|
||||
component: () => import('../../docs/zh-CN/components/animation.md'),
|
||||
meta: { title: '动画' },
|
||||
path: "/zh-CN/components/animation",
|
||||
component: () => import("../../docs/zh-CN/components/animation.md"),
|
||||
meta: { title: "动画" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/card',
|
||||
component: () => import('../../docs/zh-CN/components/card.md'),
|
||||
meta: { title: '卡片' },
|
||||
path: "/zh-CN/components/card",
|
||||
component: () => import("../../docs/zh-CN/components/card.md"),
|
||||
meta: { title: "卡片" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/grid',
|
||||
component: () => import('../../docs/zh-CN/components/grid.md'),
|
||||
meta: { title: '栅格' },
|
||||
path: "/zh-CN/components/grid",
|
||||
component: () => import("../../docs/zh-CN/components/grid.md"),
|
||||
meta: { title: "栅格" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/form',
|
||||
component: () => import('../../docs/zh-CN/components/form.md'),
|
||||
meta: { title: '表单' },
|
||||
path: "/zh-CN/components/form",
|
||||
component: () => import("../../docs/zh-CN/components/form.md"),
|
||||
meta: { title: "表单" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/badge',
|
||||
component: () => import('../../docs/zh-CN/components/badge.md'),
|
||||
meta: { title: '徽章' },
|
||||
path: "/zh-CN/components/badge",
|
||||
component: () => import("../../docs/zh-CN/components/badge.md"),
|
||||
meta: { title: "徽章" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/block',
|
||||
component: () => import('../../docs/zh-CN/components/block.md'),
|
||||
meta: { title: '辅助' },
|
||||
path: "/zh-CN/components/block",
|
||||
component: () => import("../../docs/zh-CN/components/block.md"),
|
||||
meta: { title: "辅助" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/line',
|
||||
component: () => import('../../docs/zh-CN/components/line.md'),
|
||||
meta: { title: '分割' },
|
||||
path: "/zh-CN/components/line",
|
||||
component: () => import("../../docs/zh-CN/components/line.md"),
|
||||
meta: { title: "分割" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/progress',
|
||||
component: () => import('../../docs/zh-CN/components/progress.md'),
|
||||
meta: { title: '进度' },
|
||||
path: "/zh-CN/components/progress",
|
||||
component: () => import("../../docs/zh-CN/components/progress.md"),
|
||||
meta: { title: "进度" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/menu',
|
||||
component: () => import('../../docs/zh-CN/components/menu.md'),
|
||||
meta: { title: '菜单' },
|
||||
path: "/zh-CN/components/menu",
|
||||
component: () => import("../../docs/zh-CN/components/menu.md"),
|
||||
meta: { title: "菜单" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/timeline',
|
||||
component: () => import('../../docs/zh-CN/components/timeline.md'),
|
||||
meta: { title: '时间线' },
|
||||
path: "/zh-CN/components/timeline",
|
||||
component: () => import("../../docs/zh-CN/components/timeline.md"),
|
||||
meta: { title: "时间线" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/collapse',
|
||||
component: () => import('../../docs/zh-CN/components/collapse.md'),
|
||||
meta: { title: '折叠面板' },
|
||||
path: "/zh-CN/components/collapse",
|
||||
component: () => import("../../docs/zh-CN/components/collapse.md"),
|
||||
meta: { title: "折叠面板" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/table',
|
||||
component: () => import('../../docs/zh-CN/components/table.md'),
|
||||
meta: { title: '表格' },
|
||||
path: "/zh-CN/components/table",
|
||||
component: () => import("../../docs/zh-CN/components/table.md"),
|
||||
meta: { title: "表格" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/avatar',
|
||||
component: () => import('../../docs/zh-CN/components/avatar.md'),
|
||||
meta: { title: '头像' },
|
||||
path: "/zh-CN/components/avatar",
|
||||
component: () => import("../../docs/zh-CN/components/avatar.md"),
|
||||
meta: { title: "头像" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/field',
|
||||
component: () => import('../../docs/zh-CN/components/field.md'),
|
||||
meta: { title: '字段' },
|
||||
path: "/zh-CN/components/field",
|
||||
component: () => import("../../docs/zh-CN/components/field.md"),
|
||||
meta: { title: "字段" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/empty',
|
||||
component: () => import('../../docs/zh-CN/components/empty.md'),
|
||||
meta: { title: '空' },
|
||||
path: "/zh-CN/components/empty",
|
||||
component: () => import("../../docs/zh-CN/components/empty.md"),
|
||||
meta: { title: "空" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/rate',
|
||||
component: () => import('../../docs/zh-CN/components/rate.md'),
|
||||
meta: { title: '评分' },
|
||||
path: "/zh-CN/components/rate",
|
||||
component: () => import("../../docs/zh-CN/components/rate.md"),
|
||||
meta: { title: "评分" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/dropdown',
|
||||
component: () => import('../../docs/zh-CN/components/dropdown.md'),
|
||||
meta: { title: '下拉' },
|
||||
path: "/zh-CN/components/dropdown",
|
||||
component: () => import("../../docs/zh-CN/components/dropdown.md"),
|
||||
meta: { title: "下拉" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/tab',
|
||||
component: () => import('../../docs/zh-CN/components/tab.md'),
|
||||
meta: { title: '选项卡' },
|
||||
path: "/zh-CN/components/tab",
|
||||
component: () => import("../../docs/zh-CN/components/tab.md"),
|
||||
meta: { title: "选项卡" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/iconPicker',
|
||||
path: "/zh-CN/components/iconPicker",
|
||||
component: () =>
|
||||
import('../../docs/zh-CN/components/iconPicker.md'),
|
||||
meta: { title: '图标选择' },
|
||||
import("../../docs/zh-CN/components/iconPicker.md"),
|
||||
meta: { title: "图标选择" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/tree',
|
||||
component: () => import('../../docs/zh-CN/components/tree.md'),
|
||||
meta: { title: '树形组件' },
|
||||
path: "/zh-CN/components/tree",
|
||||
component: () => import("../../docs/zh-CN/components/tree.md"),
|
||||
meta: { title: "树形组件" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/page',
|
||||
component: () => import('../../docs/zh-CN/components/page.md'),
|
||||
meta: { title: '分页' },
|
||||
path: "/zh-CN/components/page",
|
||||
component: () => import("../../docs/zh-CN/components/page.md"),
|
||||
meta: { title: "分页" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/transfer',
|
||||
component: () => import('../../docs/zh-CN/components/transfer.md'),
|
||||
meta: { title: '穿梭框' },
|
||||
path: "/zh-CN/components/transfer",
|
||||
component: () => import("../../docs/zh-CN/components/transfer.md"),
|
||||
meta: { title: "穿梭框" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/checkbox',
|
||||
component: () => import('../../docs/zh-CN/components/checkbox.md'),
|
||||
meta: { title: '复选框' },
|
||||
path: "/zh-CN/components/checkbox",
|
||||
component: () => import("../../docs/zh-CN/components/checkbox.md"),
|
||||
meta: { title: "复选框" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/radio',
|
||||
component: () => import('../../docs/zh-CN/components/radio.md'),
|
||||
meta: { title: '单选框' },
|
||||
path: "/zh-CN/components/radio",
|
||||
component: () => import("../../docs/zh-CN/components/radio.md"),
|
||||
meta: { title: "单选框" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/input',
|
||||
component: () => import('../../docs/zh-CN/components/input.md'),
|
||||
meta: { title: '输入框' },
|
||||
path: "/zh-CN/components/input",
|
||||
component: () => import("../../docs/zh-CN/components/input.md"),
|
||||
meta: { title: "输入框" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/inputNumber',
|
||||
component: () => import('../../docs/zh-CN/components/inputNumber.md'),
|
||||
meta: { title: '数字输入框' },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/textarea',
|
||||
component: () => import('../../docs/zh-CN/components/textarea.md'),
|
||||
meta: { title: '文本域' },
|
||||
},
|
||||
{
|
||||
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: '滑块' },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/carousel',
|
||||
component: () => import('../../docs/zh-CN/components/carousel.md'),
|
||||
meta: { title: '轮播' },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/select',
|
||||
component: () => import('../../docs/zh-CN/components/select.md'),
|
||||
meta: { title: '下拉选择' },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/colorPicker',
|
||||
path: "/zh-CN/components/inputNumber",
|
||||
component: () =>
|
||||
import('../../docs/zh-CN/components/colorPicker.md'),
|
||||
meta: { title: '颜色选择器' },
|
||||
},{
|
||||
path: '/zh-CN/components/layer',
|
||||
component: () => import('../../docs/zh-CN/components/layer.md'),
|
||||
meta: { title: '简介' },
|
||||
import("../../docs/zh-CN/components/inputNumber.md"),
|
||||
meta: { title: "数字输入框" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/tooltip',
|
||||
component: () => import('../../docs/zh-CN/components/tooltip.md'),
|
||||
meta: { title: '文字提示' },
|
||||
path: "/zh-CN/components/textarea",
|
||||
component: () => import("../../docs/zh-CN/components/textarea.md"),
|
||||
meta: { title: "文本域" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/modal',
|
||||
component: () => import('../../docs/zh-CN/components/modal.md'),
|
||||
meta: { title: '弹层' },
|
||||
},{
|
||||
path: '/zh-CN/components/load',
|
||||
component: () => import('../../docs/zh-CN/components/load.md'),
|
||||
meta: { title: '加载' },
|
||||
},{
|
||||
path: '/zh-CN/components/confirm',
|
||||
component: () => import('../../docs/zh-CN/components/confirm.md'),
|
||||
meta: { title: '询问' },
|
||||
},{
|
||||
path: '/zh-CN/components/msg',
|
||||
component: () => import('../../docs/zh-CN/components/msg.md'),
|
||||
meta: { title: '信息' },
|
||||
},{
|
||||
path: '/zh-CN/components/backtop',
|
||||
component: () => import('../../docs/zh-CN/components/backtop.md'),
|
||||
meta: { title: '返回顶部' },
|
||||
path: "/zh-CN/components/switch",
|
||||
component: () => import("../../docs/zh-CN/components/switch.md"),
|
||||
meta: { title: "开关" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/countup',
|
||||
component: () => import('../../docs/zh-CN/components/countup.md'),
|
||||
meta: { title: '数字滚动' },
|
||||
path: "/zh-CN/components/slider",
|
||||
component: () => import("../../docs/zh-CN/components/slider.md"),
|
||||
meta: { title: "滑块" },
|
||||
},
|
||||
{
|
||||
path: "/zh-CN/components/carousel",
|
||||
component: () => import("../../docs/zh-CN/components/carousel.md"),
|
||||
meta: { title: "轮播" },
|
||||
},
|
||||
{
|
||||
path: "/zh-CN/components/select",
|
||||
component: () => import("../../docs/zh-CN/components/select.md"),
|
||||
meta: { title: "下拉选择" },
|
||||
},
|
||||
{
|
||||
path: "/zh-CN/components/colorPicker",
|
||||
component: () =>
|
||||
import("../../docs/zh-CN/components/colorPicker.md"),
|
||||
meta: { title: "颜色选择器" },
|
||||
},
|
||||
{
|
||||
path: "/zh-CN/components/layer",
|
||||
component: () => import("../../docs/zh-CN/components/layer.md"),
|
||||
meta: { title: "简介" },
|
||||
},
|
||||
{
|
||||
path: "/zh-CN/components/tooltip",
|
||||
component: () => import("../../docs/zh-CN/components/tooltip.md"),
|
||||
meta: { title: "文字提示" },
|
||||
},
|
||||
{
|
||||
path: "/zh-CN/components/modal",
|
||||
component: () => import("../../docs/zh-CN/components/modal.md"),
|
||||
meta: { title: "弹层" },
|
||||
},
|
||||
{
|
||||
path: "/zh-CN/components/load",
|
||||
component: () => import("../../docs/zh-CN/components/load.md"),
|
||||
meta: { title: "加载" },
|
||||
},
|
||||
{
|
||||
path: "/zh-CN/components/confirm",
|
||||
component: () => import("../../docs/zh-CN/components/confirm.md"),
|
||||
meta: { title: "询问" },
|
||||
},
|
||||
{
|
||||
path: "/zh-CN/components/msg",
|
||||
component: () => import("../../docs/zh-CN/components/msg.md"),
|
||||
meta: { title: "信息" },
|
||||
},
|
||||
{
|
||||
path: "/zh-CN/components/backtop",
|
||||
component: () => import("../../docs/zh-CN/components/backtop.md"),
|
||||
meta: { title: "返回顶部" },
|
||||
},
|
||||
{
|
||||
path: "/zh-CN/components/countup",
|
||||
component: () => import("../../docs/zh-CN/components/countup.md"),
|
||||
meta: { title: "数字滚动" },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/hooks',
|
||||
redirect: '/zh-CN/hooks/useStarted',
|
||||
path: "/zh-CN/hooks",
|
||||
redirect: "/zh-CN/hooks/useStarted",
|
||||
component: Hooks,
|
||||
meta: { title: 'hooks' },
|
||||
meta: { title: "hooks" },
|
||||
children: [
|
||||
{
|
||||
path: '/zh-CN/hooks/useStarted',
|
||||
path: "/zh-CN/hooks/useStarted",
|
||||
component: () => import("../../docs/zh-CN/hooks/useStarted.md"),
|
||||
meta: { title: "useStarted" },
|
||||
},
|
||||
{
|
||||
path: "/zh-CN/hooks/useClickOutside",
|
||||
component: () =>
|
||||
import('../../docs/zh-CN/hooks/useStarted.md'),
|
||||
meta: { title: 'useStarted' },
|
||||
import("../../docs/zh-CN/hooks/useClickOutside.md"),
|
||||
meta: { title: "useClickOutside" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/hooks/useClickOutside',
|
||||
component: () =>
|
||||
import('../../docs/zh-CN/hooks/useClickOutside.md'),
|
||||
meta: { title: 'useClickOutside' },
|
||||
path: "/zh-CN/hooks/useFullScreen",
|
||||
component: () => import("../../docs/zh-CN/hooks/useFullScreen.md"),
|
||||
meta: { title: "useFullScreen" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/hooks/useFullScreen',
|
||||
component: () => import('../../docs/zh-CN/hooks/useFullScreen.md'),
|
||||
meta: { title: 'useFullScreen' },
|
||||
path: "/zh-CN/hooks/useMove",
|
||||
component: () => import("../../docs/zh-CN/hooks/useMove.md"),
|
||||
meta: { title: "useMove" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/hooks/useMove',
|
||||
component: () => import('../../docs/zh-CN/hooks/useMove.md'),
|
||||
meta: { title: 'useMove' },
|
||||
}, {
|
||||
path: '/zh-CN/hooks/useState',
|
||||
component: () => import('../../docs/zh-CN/hooks/useState.md'),
|
||||
meta: { title: 'useState' },
|
||||
path: "/zh-CN/hooks/useState",
|
||||
component: () => import("../../docs/zh-CN/hooks/useState.md"),
|
||||
meta: { title: "useState" },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/hooks/useBoolean',
|
||||
component: () => import('../../docs/zh-CN/hooks/useBoolean.md'),
|
||||
meta: { title: 'useBoolean' },
|
||||
path: "/zh-CN/hooks/useBoolean",
|
||||
component: () => import("../../docs/zh-CN/hooks/useBoolean.md"),
|
||||
meta: { title: "useBoolean" },
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
];
|
||||
|
||||
export default zhCN
|
||||
export default zhCN;
|
||||
|
||||
@@ -44,362 +44,371 @@
|
||||
</lay-layout>
|
||||
</template>
|
||||
<script>
|
||||
import { ref, watch } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { ref, watch } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
export default {
|
||||
setup() {
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const currentPath = ref('/zh-CN/guide')
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const currentPath = ref("/zh-CN/guide");
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
(val) => {
|
||||
currentPath.value = val
|
||||
currentPath.value = val;
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
const menus = [
|
||||
{
|
||||
id: 1,
|
||||
title: '通用',
|
||||
title: "通用",
|
||||
children: [
|
||||
{
|
||||
id: 20,
|
||||
title: '颜色',
|
||||
subTitle: 'color',
|
||||
path: '/zh-CN/components/color',
|
||||
title: "颜色",
|
||||
subTitle: "color",
|
||||
path: "/zh-CN/components/color",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: '按钮',
|
||||
subTitle: 'button',
|
||||
path: '/zh-CN/components/button',
|
||||
title: "按钮",
|
||||
subTitle: "button",
|
||||
path: "/zh-CN/components/button",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: '图标',
|
||||
subTitle: 'iconfont',
|
||||
path: '/zh-CN/components/icon',
|
||||
title: "图标",
|
||||
subTitle: "iconfont",
|
||||
path: "/zh-CN/components/icon",
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
title: '动画',
|
||||
subTitle: 'animation',
|
||||
path: '/zh-CN/components/animation',
|
||||
title: "动画",
|
||||
subTitle: "animation",
|
||||
path: "/zh-CN/components/animation",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '布局',
|
||||
title: "布局",
|
||||
children: [
|
||||
{
|
||||
id: 111,
|
||||
title: '骨架屏',
|
||||
subTitle: 'skeleton',
|
||||
path: '/zh-CN/components/skeleton',
|
||||
title: "骨架屏",
|
||||
subTitle: "skeleton",
|
||||
path: "/zh-CN/components/skeleton",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '布局',
|
||||
subTitle: 'layout',
|
||||
path: '/zh-CN/components/layout',
|
||||
title: "布局",
|
||||
subTitle: "layout",
|
||||
path: "/zh-CN/components/layout",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: '容器',
|
||||
subTitle: 'container',
|
||||
path: '/zh-CN/components/container',
|
||||
title: "容器",
|
||||
subTitle: "container",
|
||||
path: "/zh-CN/components/container",
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
title: '栅格',
|
||||
subTitle: 'grid',
|
||||
path: '/zh-CN/components/grid',
|
||||
title: "栅格",
|
||||
subTitle: "grid",
|
||||
path: "/zh-CN/components/grid",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: '面板',
|
||||
subTitle: 'panel',
|
||||
path: '/zh-CN/components/panel',
|
||||
title: "面板",
|
||||
subTitle: "panel",
|
||||
path: "/zh-CN/components/panel",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: '卡片',
|
||||
subTitle: 'card',
|
||||
path: '/zh-CN/components/card',
|
||||
title: "卡片",
|
||||
subTitle: "card",
|
||||
path: "/zh-CN/components/card",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '导航',
|
||||
title: "导航",
|
||||
children: [
|
||||
{
|
||||
id: 16,
|
||||
title: '菜单',
|
||||
subTitle: 'nav',
|
||||
path: '/zh-CN/components/menu',
|
||||
title: "菜单",
|
||||
subTitle: "nav",
|
||||
path: "/zh-CN/components/menu",
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
title: '面包屑',
|
||||
subTitle: 'breadcrumb',
|
||||
path: '/zh-CN/components/breadcrumb',
|
||||
title: "面包屑",
|
||||
subTitle: "breadcrumb",
|
||||
path: "/zh-CN/components/breadcrumb",
|
||||
},
|
||||
{
|
||||
id: 28,
|
||||
title: '选项卡',
|
||||
subTitle: 'tab',
|
||||
path: '/zh-CN/components/tab',
|
||||
title: "选项卡",
|
||||
subTitle: "tab",
|
||||
path: "/zh-CN/components/tab",
|
||||
},
|
||||
{
|
||||
id: 27,
|
||||
title: '下拉菜单',
|
||||
subTitle: 'dropdown',
|
||||
path: '/zh-CN/components/dropdown',
|
||||
title: "下拉菜单",
|
||||
subTitle: "dropdown",
|
||||
path: "/zh-CN/components/dropdown",
|
||||
},
|
||||
{
|
||||
id: 42,
|
||||
title: '返回顶部',
|
||||
subTitle: 'backtop',
|
||||
path: '/zh-CN/components/backtop',
|
||||
title: "返回顶部",
|
||||
subTitle: "backtop",
|
||||
path: "/zh-CN/components/backtop",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '表单',
|
||||
title: "表单",
|
||||
children: [
|
||||
{
|
||||
id: 36,
|
||||
title: '开关',
|
||||
subTitle: 'switch',
|
||||
path: '/zh-CN/components/switch',
|
||||
title: "开关",
|
||||
subTitle: "switch",
|
||||
path: "/zh-CN/components/switch",
|
||||
},
|
||||
{
|
||||
id: 32,
|
||||
title: '复选框',
|
||||
subTitle: 'checkbox',
|
||||
path: '/zh-CN/components/checkbox',
|
||||
title: "复选框",
|
||||
subTitle: "checkbox",
|
||||
path: "/zh-CN/components/checkbox",
|
||||
},
|
||||
{
|
||||
id: 33,
|
||||
title: '单选框',
|
||||
subTitle: 'radio',
|
||||
path: '/zh-CN/components/radio',
|
||||
title: "单选框",
|
||||
subTitle: "radio",
|
||||
path: "/zh-CN/components/radio",
|
||||
},
|
||||
{
|
||||
id: 34,
|
||||
title: '输入框',
|
||||
subTitle: 'input',
|
||||
path: '/zh-CN/components/input',
|
||||
title: "输入框",
|
||||
subTitle: "input",
|
||||
path: "/zh-CN/components/input",
|
||||
},
|
||||
{
|
||||
id: 341,
|
||||
title: '数字输入框',
|
||||
subTitle: 'inputNumber',
|
||||
path: '/zh-CN/components/inputNumber',
|
||||
title: "数字输入框",
|
||||
subTitle: "inputNumber",
|
||||
path: "/zh-CN/components/inputNumber",
|
||||
},
|
||||
{
|
||||
id: 35,
|
||||
title: '文本域',
|
||||
subTitle: 'textarea',
|
||||
path: '/zh-CN/components/textarea',
|
||||
title: "文本域",
|
||||
subTitle: "textarea",
|
||||
path: "/zh-CN/components/textarea",
|
||||
},
|
||||
{
|
||||
id: 39,
|
||||
title: '下拉选择',
|
||||
subTitle: 'select',
|
||||
path: '/zh-CN/components/select',
|
||||
title: "下拉选择",
|
||||
subTitle: "select",
|
||||
path: "/zh-CN/components/select",
|
||||
},
|
||||
{
|
||||
id: 40,
|
||||
title: '颜色选择器',
|
||||
subTitle: 'colorPicker',
|
||||
path: '/zh-CN/components/colorPicker',
|
||||
title: "颜色选择器",
|
||||
subTitle: "colorPicker",
|
||||
path: "/zh-CN/components/colorPicker",
|
||||
},
|
||||
{
|
||||
id: 29,
|
||||
title: '图标选择器',
|
||||
subTitle: 'iconPicker',
|
||||
path: '/zh-CN/components/iconPicker',
|
||||
title: "图标选择器",
|
||||
subTitle: "iconPicker",
|
||||
path: "/zh-CN/components/iconPicker",
|
||||
},
|
||||
{
|
||||
id: 26,
|
||||
title: '评分',
|
||||
subTitle: 'rate',
|
||||
path: '/zh-CN/components/rate',
|
||||
title: "评分",
|
||||
subTitle: "rate",
|
||||
path: "/zh-CN/components/rate",
|
||||
},
|
||||
{
|
||||
id: 37,
|
||||
title: '滑块',
|
||||
subTitle: 'slider',
|
||||
path: '/zh-CN/components/slider',
|
||||
title: "滑块",
|
||||
subTitle: "slider",
|
||||
path: "/zh-CN/components/slider",
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
title: '表单',
|
||||
subTitle: 'form',
|
||||
path: '/zh-CN/components/form',
|
||||
title: "表单",
|
||||
subTitle: "form",
|
||||
path: "/zh-CN/components/form",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '展示',
|
||||
title: "展示",
|
||||
children: [
|
||||
{
|
||||
id: 18,
|
||||
title: '进度',
|
||||
subTitle: 'progress',
|
||||
path: '/zh-CN/components/progress',
|
||||
title: "进度",
|
||||
subTitle: "progress",
|
||||
path: "/zh-CN/components/progress",
|
||||
},
|
||||
{
|
||||
id: 19,
|
||||
title: '时间线',
|
||||
subTitle: 'timeline',
|
||||
path: '/zh-CN/components/timeline',
|
||||
title: "时间线",
|
||||
subTitle: "timeline",
|
||||
path: "/zh-CN/components/timeline",
|
||||
},
|
||||
{
|
||||
id: 21,
|
||||
title: '折叠面板',
|
||||
subTitle: 'collapse',
|
||||
path: '/zh-CN/components/collapse',
|
||||
title: "折叠面板",
|
||||
subTitle: "collapse",
|
||||
path: "/zh-CN/components/collapse",
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
title: '表格',
|
||||
subTitle: 'table',
|
||||
path: '/zh-CN/components/table',
|
||||
title: "表格",
|
||||
subTitle: "table",
|
||||
path: "/zh-CN/components/table",
|
||||
},
|
||||
{
|
||||
id: 23,
|
||||
title: '头像',
|
||||
subTitle: 'avatar',
|
||||
path: '/zh-CN/components/avatar',
|
||||
title: "头像",
|
||||
subTitle: "avatar",
|
||||
path: "/zh-CN/components/avatar",
|
||||
},
|
||||
{
|
||||
id: 25,
|
||||
title: '空',
|
||||
subTitle: 'empty',
|
||||
path: '/zh-CN/components/empty',
|
||||
title: "空",
|
||||
subTitle: "empty",
|
||||
path: "/zh-CN/components/empty",
|
||||
},
|
||||
{
|
||||
id: 29,
|
||||
title: '分页',
|
||||
subTitle: 'page',
|
||||
path: '/zh-CN/components/page',
|
||||
title: "分页",
|
||||
subTitle: "page",
|
||||
path: "/zh-CN/components/page",
|
||||
},
|
||||
{
|
||||
id: 30,
|
||||
title: '树形组件',
|
||||
subTitle: 'tree',
|
||||
path: '/zh-CN/components/tree',
|
||||
title: "树形组件",
|
||||
subTitle: "tree",
|
||||
path: "/zh-CN/components/tree",
|
||||
},
|
||||
{
|
||||
id: 31,
|
||||
title: '穿梭框',
|
||||
subTitle: 'transfer',
|
||||
path: '/zh-CN/components/transfer',
|
||||
title: "穿梭框",
|
||||
subTitle: "transfer",
|
||||
path: "/zh-CN/components/transfer",
|
||||
},
|
||||
{
|
||||
id: 38,
|
||||
title: '轮播',
|
||||
subTitle: 'carousel',
|
||||
path: '/zh-CN/components/carousel',
|
||||
title: "轮播",
|
||||
subTitle: "carousel",
|
||||
path: "/zh-CN/components/carousel",
|
||||
},
|
||||
{
|
||||
id: 43,
|
||||
title: '数字滚动',
|
||||
subTitle: 'countUp',
|
||||
path: '/zh-CN/components/countup',
|
||||
title: "数字滚动",
|
||||
subTitle: "countUp",
|
||||
path: "/zh-CN/components/countup",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '辅助',
|
||||
title: "辅助",
|
||||
children: [
|
||||
{
|
||||
id: 13,
|
||||
title: '徽章',
|
||||
subTitle: 'badge',
|
||||
path: '/zh-CN/components/badge',
|
||||
title: "徽章",
|
||||
subTitle: "badge",
|
||||
path: "/zh-CN/components/badge",
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
title: '区块',
|
||||
subTitle: 'block',
|
||||
path: '/zh-CN/components/block',
|
||||
title: "区块",
|
||||
subTitle: "block",
|
||||
path: "/zh-CN/components/block",
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
title: '分割',
|
||||
subTitle: 'line',
|
||||
path: '/zh-CN/components/line',
|
||||
title: "分割",
|
||||
subTitle: "line",
|
||||
path: "/zh-CN/components/line",
|
||||
},
|
||||
{
|
||||
id: 24,
|
||||
title: '字段',
|
||||
subTitle: 'field',
|
||||
path: '/zh-CN/components/field',
|
||||
title: "字段",
|
||||
subTitle: "field",
|
||||
path: "/zh-CN/components/field",
|
||||
},
|
||||
{
|
||||
id: 25,
|
||||
title: '文字提示',
|
||||
subTitle: 'tooltip',
|
||||
path: '/zh-CN/components/tooltip',
|
||||
title: "文字提示",
|
||||
subTitle: "tooltip",
|
||||
path: "/zh-CN/components/tooltip",
|
||||
},
|
||||
{
|
||||
id: 99,
|
||||
title: "分步",
|
||||
subTitle: "setup",
|
||||
path: "/zh-CN/components/step",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '反馈',
|
||||
title: "反馈",
|
||||
children: [
|
||||
{
|
||||
id: 90,
|
||||
title: '弹层',
|
||||
subTitle: 'modal',
|
||||
path: '/zh-CN/components/modal',
|
||||
},{
|
||||
title: "弹层",
|
||||
subTitle: "modal",
|
||||
path: "/zh-CN/components/modal",
|
||||
},
|
||||
{
|
||||
id: 91,
|
||||
title: '加载',
|
||||
subTitle: 'modal',
|
||||
path: '/zh-CN/components/load',
|
||||
},{
|
||||
title: "加载",
|
||||
subTitle: "modal",
|
||||
path: "/zh-CN/components/load",
|
||||
},
|
||||
{
|
||||
id: 92,
|
||||
title: '询问',
|
||||
subTitle: 'confirm',
|
||||
path: '/zh-CN/components/confirm',
|
||||
},{
|
||||
title: "询问",
|
||||
subTitle: "confirm",
|
||||
path: "/zh-CN/components/confirm",
|
||||
},
|
||||
{
|
||||
id: 93,
|
||||
title: '消息',
|
||||
subTitle: 'msg',
|
||||
path: '/zh-CN/components/msg',
|
||||
title: "消息",
|
||||
subTitle: "msg",
|
||||
path: "/zh-CN/components/msg",
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
];
|
||||
|
||||
const selected = ref(1)
|
||||
const selected = ref(1);
|
||||
|
||||
const handleClick = function (menu) {
|
||||
selected.value = menu.id
|
||||
router.push(menu.path)
|
||||
}
|
||||
selected.value = menu.id;
|
||||
router.push(menu.path);
|
||||
};
|
||||
|
||||
return {
|
||||
menus,
|
||||
selected,
|
||||
currentPath,
|
||||
handleClick,
|
||||
}
|
||||
};
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user