chore: prepare notice bar component refactoring

This commit is contained in:
就眠儀式
2022-04-15 10:13:49 +08:00
parent 8ad11a94e4
commit cd0e46d37e
8 changed files with 278 additions and 764 deletions

View File

@@ -1,129 +0,0 @@
::: anchor
:::
::: title 基本介绍
:::
::: describe 全局展示操作反馈信息。
:::
::: title 基础使用
:::
::: demo
<template>
<lay-notice-bar text="以写作为工具,为道途,先帮助自己一程,再以自己的领悟帮助他人一程, 这是一种服务 。" mode="link"></lay-notice-bar>
</template>
<script>
import { layer } from "@layui/layer-vue"
export default {
setup() {
return {
}
}
}
</script>
:::
::: title 使用图标
:::
::: demo
<template>
<lay-notice-bar leftIcon="layui-icon-mute" text="最好的爱是两个人彼此做个伴,不要束缚,不要缠绕,不要占有,不渴望从对方那里得到,只是并肩站在一起,看看这个世界。"></lay-notice-bar>
</template>
<script>
import { ref } from "vue"
export default {
setup() {
return {
}
}
}
</script>
:::
::: title 允许关闭
:::
::: demo
<template>
<lay-notice-bar leftIcon="layui-icon-mute" rightIcon="layui-icon-close" text="所有发生过的都是既定的。是应该发生。只能发生。" mode="closeable"></lay-notice-bar>
</template>
<script>
import { ref } from "vue"
export default {
setup() {
const visible = ref(true);
return {
visible
}
}
}
</script>
:::
::: 垂直滚动
:::
::: demo
<template>
<lay-notice-bar :scrollable="true" leftIcon="layui-icon-mute" :textlist="list"></lay-notice-bar>
</template>
<script>
import { ref,reactive } from "vue"
export default {
setup() {
const list = reactive([
'通知一users !',
'通知二world !',
'通知三friend !',
'通知四ok!',
])
return {
list
}
}
}
</script>
:::
::: title Notice Bar 属性
:::
::: table
| 事件 | 描述 | 参数 |
| ---- | -------- | --------------------- |
| mode | 模式 | 'link' 'closeable' |
| text | 内容 | 滚动内容 |
| leftIcon | 左侧图标 | -- |
| rightIcon | 右侧图标 | -- |
| scrollable | 是否开启垂直滚动|true,false|
| textlist | 垂直滚动内容| Array|
:::
::: previousNext transfer
:::

View File

@@ -371,12 +371,6 @@ const zhCN = [
component: () => import("../document/zh-CN/components/scroll.md"),
meta: { title: "虚拟滚动" },
},
{
path: "/zh-CN/components/noticeBar",
component: () =>
import("../document/zh-CN/components/noticeBar.md"),
meta: { title: "通知栏" },
},
{
path: "/zh-CN/components/transition",
component: () =>

View File

@@ -41,7 +41,7 @@ const menus = [
},
{
id: 103,
title: "波纹",
title: "波纹",
subTitle: "ripple",
path: "/zh-CN/components/ripple",
},
@@ -350,13 +350,7 @@ const menus = [
title: "虚拟滚动",
subTitle: "scroll",
path: "/zh-CN/components/scroll",
},
{
id: 100,
title: "通知栏",
subTitle: "noticeBar",
path: "/zh-CN/components/noticeBar",
},
}
],
},
{