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

1.步骤条封装

Browse Source
This commit is contained in:
dingyongya 2022-01-04 18:12:13 +08:00
parent af5a0e0cc9
commit acef2f91b0
11 changed files with 1236 additions and 422 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

384
example/docs/zh-CN/components/step.md Normal file
View 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
:::

46
example/src/entry-server.ts
View File

@ -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 "";
}
}

469
example/src/router/zh-CN.ts
View File

@ -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;

339
example/src/view/component.vue
View File

@ -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>

12
src/index.ts
View File

@ -67,8 +67,10 @@ import LayCarouselItem from "./module/carouselItem/index";
import LayColorPicker from "./module/colorPicker/index";
import LayTooltip from "./module/tooltip/index";
import LayInputNumber from "./module/inputNumber/index";
import LaySkeleton from './module/skeleton/index';
import LaySkeletonItem from './module/skeletonItem/index';
import LaySkeleton from "./module/skeleton/index";
import LaySkeletonItem from "./module/skeletonItem/index";
import LayStep from "./module/step/index";
import LayStepItem from "./module/stepItem/index";
const components: Record<string, IDefineComponent> = {
LayRadio,
@ -134,6 +136,8 @@ const components: Record<string, IDefineComponent> = {
LaySkeleton,
LaySkeletonItem,
LayCountUp,
LayStep,
LayStepItem,
};
const install = (app: App, options?: InstallOptions): void => {
@ -146,6 +150,8 @@ const install = (app: App, options?: InstallOptions): void => {
};
export {
LayStep,
LayStepItem,
LaySkeleton,
LaySkeletonItem,
LayRadio,
@ -205,7 +211,7 @@ export {
LayCarousel,
LayCarouselItem,
LayColorPicker,
LayModal
LayModal,
};
export { layer };

4
src/module/slider/index.vue
View File

@ -108,13 +108,13 @@ const props = withDefaults(defineProps<LaySliderProps>(), {
let rangeValue: Ref<number[]> = ref([0, 0]);
if (Array.isArray(props.modelValue)) {
// eslint-disable-next-line vue/no-setup-props-destructure
// eslint-disable-next-line vue/no-step-props-destructure
rangeValue.value = props.modelValue;
}
let verticalRangeValue: Ref<number[]> = ref([0, 0]);
if (Array.isArray(props.modelValue)) {
// eslint-disable-next-line vue/no-setup-props-destructure
// eslint-disable-next-line vue/no-step-props-destructure
verticalRangeValue.value = props.modelValue;
}

191
src/module/step/index.less Normal file
View File

@ -0,0 +1,191 @@
@width-height-pace: 20px;
@step-color: #5FB878;
.lay-step{
display: flex;
flex-wrap: nowrap;
.lay-step-item{
flex-grow: 1;
}
.is-item-center{
text-align: center;
}
.lay-step-item-last {
flex-grow: 0 !important;
}
.lay-step-item-pace{
width: @width-height-pace;
height: @width-height-pace;
border: 2px #8D8D8D solid;
border-radius: 50%;
text-align: center;
line-height: @width-height-pace;
background: #FFFFFF;
}
.is-center{
margin: 0 auto;
}
.lay-step-item-active{
border: 2px @step-color solid;
color: #FFFFFF;
background: @step-color;
}
.lay-step-item-wait{
border: 2px #000000 solid;
color: #000000;
}
.lay-step-item--success {
border: 2px @step-color solid;
color: #FFFFFF;
background: @step-color;
}
.lay-step-item--fail{
border: 2px #FF5722 solid;
color: #FFFFFF;
background: #FF5722;
}
.lay-step-item--warning{
border: 2px #FFB800 solid;
color: #FFFFFF;
background: #FFB800;
}
.lay-step-item--primary{
border: 2px #1E9FFF solid;
color: #FFFFFF;
background: #1E9FFF;
}
.lay-step-item-success {
border: 2px @step-color solid;
color: #FFFFFF;
background: @step-color;
}
.lay-step-item-fail{
border: 2px #FF5722 solid;
color: #FFFFFF;
background: #FF5722;
}
.lay-step-item-warning{
border: 2px #FFB800 solid;
color: #FFFFFF;
background: #FFB800;
}
.lay-step-item-primary{
border: 2px #1E9FFF solid;
color: #FFFFFF;
background: #1E9FFF;
}
.lay-step-item-content{
color: #8D8D8D;
.lay-step-item-content-title{
font-weight: bold;
font-size: 16px;
}
}
.lay-step-item-content-active{
color: @step-color;
}
.lay-step-item-content--success{
color: @step-color;
}
.lay-step-item-content--fail{
color: #FF5722;
}
.lay-step-item-content--warning{
color: #FFB800;
}
.lay-step-item-content--primary{
color: #1E9FFF;
}
.lay-step-item-content-wait{
color: #000000;
}
.lay-step-item-content-success{
color: @step-color;
}
.lay-step-item-content-fail{
color: #FF5722;
}
.lay-step-item-content-warning{
color: #FFB800;
}
.lay-step-item-content-primary{
color: #1E9FFF;
}
.lay-step-item-line{
position: relative;
}
.lay-step-item-line:before {
z-index: -1;
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
display: block;
height: 2px;
width: 100%;
background: #C9C5C5;
}
.is-line-center:before {
left: 50%;
}
.lay-step-item-line-active:before {
transition: background 150ms;
background: #5FB878 !important;
}
.lay-step-item-line-fail:before {
transition: background 150ms;
background: #FF5722 !important;
}
.lay-step-item-line-warning:before {
transition: background 150ms;
background: #FFB800 !important;
}
.lay-step-item-line-primary:before {
transition: background 150ms;
background: #1E9FFF !important;
}
}
.lay-step-column {
height: 100%;
flex-flow: column;
.lay-step-item-line{
position: relative;
height: 100%;
width: 24px;
}
.lay-step-item-line:before {
z-index: -1;
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
display: block;
width: 2px;
height: 100%;
background: #C9C5C5;
}
.is-vertical{
display: flex;
}
}

9
src/module/step/index.ts Normal file
View File

@ -0,0 +1,9 @@
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || "laySetup", Component);
};
export default Component as IDefineComponent;

43
src/module/step/index.vue Normal file
View File

@ -0,0 +1,43 @@
<template>
<div :class="['lay-step', direction !== 'vertical' ? '' : 'lay-step-column']">
<slot></slot>
</div>
</template>
<script setup name="layStep" lang="ts">
import { ref, watch, provide, defineProps, withDefaults } from "vue";
import "./index.less";
export interface LayStepProps {
active?: number;
center?: boolean;
direction?: string;
space?: string;
currentStatus?: string;
}
const props = withDefaults(defineProps<LayStepProps>(), {
active: 0,
center: false,
direction: "horizontal",
space: "auto",
currentStatus: "primary",
});
const steps = ref([]);
watch(steps, () => {
steps.value.forEach(
(instance: { setIndex: (arg0: any) => void }, index: any) => {
instance.setIndex(index);
}
);
});
provide("LayStep", {
props,
steps,
});
</script>
<style scoped></style>

9
src/module/stepItem/index.ts Normal file
View File

@ -0,0 +1,9 @@
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || "laySetupItem", Component);
};
export default Component as IDefineComponent;

152
src/module/stepItem/index.vue Normal file
View File

@ -0,0 +1,152 @@
<template>
<div
:class="[
'lay-step-item',
isLast && !isCenter ? 'lay-step-item-last' : '',
isCenter ? 'is-item-center' : '',
isVertical ? 'is-vertical' : '',
]"
:style="{ flexBasis: space, flexGrow: space === 'auto' ? 1 : 0 }"
>
<div
:class="[
!isLast
? isLineActive
? `lay-step-item-line lay-step-item-line-${status || 'active'}`
: 'lay-step-item-line'
: '',
isCenter ? 'is-line-center' : '',
]"
>
<div
:class="[
'lay-step-item-pace',
isActive ? `lay-step-item-active` : '',
isCurrent === index ? `lay-step-item--${currentStatus}` : '',
status ? `lay-step-item-${status}` : '',
isWait ? 'lay-step-item-wait' : '',
isCenter ? 'is-center' : '',
]"
>
<slot name="pace">
<template v-if="icon">
<lay-icon :type="icon"></lay-icon>
</template>
<template v-else>
<span v-if="!isActive">{{ index + 1 }}</span>
<lay-icon
v-else
:type="status === 'fail' ? 'layui-icon-close' : 'layui-icon-ok'"
></lay-icon>
</template>
</slot>
</div>
</div>
<slot>
<div
:class="[
'lay-step-item-content',
isActive ? `lay-step-item-content-active` : '',
isCurrent === index ? `lay-step-item-content--${currentStatus}` : '',
status ? `lay-step-item-content-${status}` : '',
isWait ? 'lay-step-item-content-wait' : '',
]"
>
<div class="lay-step-item-content-title">{{ title }}</div>
<p>{{ content }}</p>
</div>
</slot>
</div>
</template>
<script setup name="LayStepItem" lang="ts">
import {
ref,
inject,
onMounted,
computed,
getCurrentInstance,
onBeforeUnmount,
reactive,
defineProps,
withDefaults,
} from "vue";
import type { ComputedRef } from "vue";
export interface LayStepItemProps {
title?: string;
content?: string;
icon?: string;
status?: string;
}
const props = withDefaults(defineProps<LayStepItemProps>(), {
title: "",
content: "",
icon: "",
status: "",
});
const index = ref(-1);
const parents: any = inject("LayStep");
const currentInstance: any = getCurrentInstance();
const setIndex = (val: number) => {
index.value = val;
};
const stepsCount = computed(() => {
return parents.steps.value.length;
});
const currentStatus = computed(() => {
return parents.props.currentStatus;
});
const isCurrent = computed(() => {
return parents.props.active;
});
console.log(isCurrent);
const space = computed(() => {
return parents.props.space;
});
const isVertical = computed(() => {
return parents.props.direction === "vertical";
});
const isCenter = computed(() => {
return parents.props.center;
});
const isLineActive: ComputedRef<boolean> = computed(() => {
return index.value <= parents.props.active - 1;
});
const isWait: ComputedRef<boolean> = computed(() => {
return index.value === parents.props.active + 1;
});
const isActive: ComputedRef<boolean> = computed(() => {
return index.value <= parents.props.active;
});
const isLast: ComputedRef<boolean> = computed(() => {
return (
parents.steps.value[stepsCount.value - 1]?.itemId === currentInstance.uid
);
});
const stepItemState = reactive({
itemId: computed(() => currentInstance?.uid),
setIndex,
});
parents.steps.value = [...parents.steps.value, stepItemState];
onMounted(() => {});
onBeforeUnmount(() => {
parents.steps.value = parents.steps.value.filter(
(instance: { itemId: any }) => instance.itemId !== currentInstance.uid
);
});
</script>