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

docs: update

Browse Source
This commit is contained in:
就眠儀式 2022-03-18 00:11:29 +08:00
parent 1d252424c8
commit 60b2ec48fa
4 changed files with 193 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
example/docs/zh-CN/components/noticeBar.md
View File

@ -79,3 +79,18 @@ export default {
</script>
:::
::: title Notice Bar 事件
:::
::: table
| 事件 | 描述 | 参数 |
| ---- | -------- | --------------------- |
| mode | 模式 | { current: 当前页面 } |
| text | 内容 | 滚动内容 |
| leftIcon | 左侧图标 | { current: 当前页面 } |
| rightIcon | 右侧图标 | 滚动内容 |
:::

1
example/docs/zh-CN/components/page.md
View File

@ -271,6 +271,7 @@ export default {
| 属性 | 描述 | 默认值 |
| ----------- | ------------ | ------- |
| v-model | 当前页 | -- |
| limit | 每页数量 | -- |
| total | 总条数 | -- |
| showCount | 显示总数 | `false` |

1
example/docs/zh-CN/guide/changelog.md
View File

@ -16,6 +16,7 @@
<li>
<h3>0.4.0 <span class="layui-badge-rim">2022-03-17</span></h3>
<ul>
<li>[新增] notice-bar 通告栏。</li>
<li>[新增] scroll 虚拟滚动组件。</li>
<li>[新增] water-marker 水印组件。</li>
<li>[新增] table 表格组件 excel 导出工具栏。</li>

74
src/component/noticeBar/index.vue
View File

@ -1,40 +1,66 @@
<template>
<div class="notice-bar" :style="{ background, height: `${height}px` }" v-show="!isMode">
<div
class="notice-bar"
:style="{ background, height: `${height}px` }"
v-show="!isMode"
>
<div class="notice-bar-warp" :style="{ color, fontSize: `${size}px` }">
<lay-icon v-if="leftIcon" class="notice-bar-warp-left-icon" :type="leftIcon"></lay-icon>
<lay-icon
v-if="leftIcon"
class="notice-bar-warp-left-icon"
:type="leftIcon"
></lay-icon>
<div class="notice-bar-warp-text-box" ref="noticeBarWarpRef">
<div class="notice-bar-warp-text" ref="noticeBarTextRef" v-if="!scrollable">{{ text }}</div>
<div
class="notice-bar-warp-text"
ref="noticeBarTextRef"
v-if="!scrollable"
>
{{ text }}
</div>
<div class="notice-bar-warp-slot" v-else><slot /></div>
</div>
<lay-icon :type="rightIcon" v-if="rightIcon" class="notice-bar-warp-right-icon" @click="onRightIconClick"></lay-icon>
<lay-icon
:type="rightIcon"
v-if="rightIcon"
class="notice-bar-warp-right-icon"
@click="onRightIconClick"
></lay-icon>
</div>
</div>
</template>
<script lang="ts">
import { toRefs, reactive, defineComponent, ref, onMounted, nextTick } from 'vue';
import {
toRefs,
reactive,
defineComponent,
ref,
onMounted,
nextTick,
} from "vue";
export default defineComponent({
name: 'LayNoticeBar',
name: "LayNoticeBar",
props: {
// 选值为 closeable link
mode: {
type: String,
default: () => '',
default: () => "",
},
// 通知文本内容
text: {
type: String,
default: () => '',
default: () => "",
},
// 通知文本颜色
color: {
type: String,
default: () => 'var(--color-warning)',
default: () => "var(--color-warning)",
},
// 通知背景色
background: {
type: String,
default: () => 'var(--color-warning-light-9)',
default: () => "var(--color-warning-light-9)",
},
// 字体大小，单位px
size: {
@ -64,12 +90,12 @@ export default defineComponent({
// 自定义左侧图标
leftIcon: {
type: String,
default: () => '',
default: () => "",
},
// 自定义右侧图标
rightIcon: {
type: String,
default: () => '',
default: () => "",
},
},
setup(props, { emit }) {
@ -88,8 +114,12 @@ export default defineComponent({
nextTick(() => {
state.warpOWidth = noticeBarWarpRef.value.offsetWidth;
state.textOWidth = noticeBarTextRef.value.offsetWidth;
document.styleSheets[0].insertRule(`@keyframes oneAnimation {0% {left: 0px;} 100% {left: -${state.textOWidth}px;}}`);
document.styleSheets[0].insertRule(`@keyframes twoAnimation {0% {left: ${state.warpOWidth}px;} 100% {left: -${state.textOWidth}px;}}`);
document.styleSheets[0].insertRule(
`@keyframes oneAnimation {0% {left: 0px;} 100% {left: -${state.textOWidth}px;}}`
);
document.styleSheets[0].insertRule(
`@keyframes twoAnimation {0% {left: ${state.warpOWidth}px;} 100% {left: -${state.textOWidth}px;}}`
);
computeAnimationTime();
setTimeout(() => {
changeAnimation();
@ -113,7 +143,7 @@ export default defineComponent({
// 监听 animation 动画的结束
const listenerAnimationend = () => {
noticeBarTextRef.value.addEventListener(
'animationend',
"animationend",
() => {
changeAnimation();
},
@ -123,11 +153,11 @@ export default defineComponent({
// 右侧 icon 图标点击
const onRightIconClick = () => {
if (!props.mode) return false;
if (props.mode === 'closeable') {
if (props.mode === "closeable") {
state.isMode = true;
emit('close');
} else if (props.mode === 'link') {
emit('link');
emit("close");
} else if (props.mode === "link") {
emit("link");
}
};
// 页面加载时
@ -175,7 +205,11 @@ export default defineComponent({
width: 100%;
white-space: nowrap;
}
.notice-bar .notice-bar-warp .notice-bar-warp-text-box .notice-bar-warp-slot ::v-deep(.el-carousel__item) {
.notice-bar
.notice-bar-warp
.notice-bar-warp-text-box
.notice-bar-warp-slot
::v-deep(.el-carousel__item) {
display: flex;
align-items: center;
}