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

@ -78,4 +78,19 @@ 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>

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

@ -1,148 +1,178 @@
<template>
<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>
<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-slot" v-else><slot /></div>
</div>
<lay-icon :type="rightIcon" v-if="rightIcon" class="notice-bar-warp-right-icon" @click="onRightIconClick"></lay-icon>
</div>
</div>
<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>
<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-slot" v-else><slot /></div>
</div>
<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',
props: {
// 选值为 closeable link
mode: {
type: String,
default: () => '',
},
// 通知文本内容
text: {
type: String,
default: () => '',
},
// 通知文本颜色
color: {
type: String,
default: () => 'var(--color-warning)',
},
// 通知背景色
background: {
type: String,
default: () => 'var(--color-warning-light-9)',
},
// 字体大小，单位px
size: {
type: [Number, String],
default: () => 14,
},
// 通知栏高度，单位px
height: {
type: Number,
default: () => 40,
},
// 动画延迟时间 (s)
delay: {
type: Number,
default: () => 1,
},
// 滚动速率 (px/s)
speed: {
type: Number,
default: () => 100,
},
// 是否开启垂直滚动
scrollable: {
type: Boolean,
default: () => false,
},
// 自定义左侧图标
leftIcon: {
type: String,
default: () => '',
},
// 自定义右侧图标
rightIcon: {
type: String,
default: () => '',
},
},
setup(props, { emit }) {
const noticeBarWarpRef = ref();
const noticeBarTextRef = ref();
const state = reactive({
order: 1,
oneTime: 0,
twoTime: 0,
warpOWidth: 0,
textOWidth: 0,
isMode: false,
});
// 初始化 animation 各项参数
const initAnimation = () => {
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;}}`);
computeAnimationTime();
setTimeout(() => {
changeAnimation();
}, props.delay * 1000);
});
};
// 计算 animation 滚动时长
const computeAnimationTime = () => {
state.oneTime = state.textOWidth / props.speed;
state.twoTime = (state.textOWidth + state.warpOWidth) / props.speed;
};
// 改变 animation 动画调用
const changeAnimation = () => {
if (state.order === 1) {
noticeBarTextRef.value.style.cssText = `animation: oneAnimation ${state.oneTime}s linear; opactity: 1;}`;
state.order = 2;
} else {
noticeBarTextRef.value.style.cssText = `animation: twoAnimation ${state.twoTime}s linear infinite; opacity: 1;`;
}
};
// 监听 animation 动画的结束
const listenerAnimationend = () => {
noticeBarTextRef.value.addEventListener(
'animationend',
() => {
changeAnimation();
},
false
);
};
// 右侧 icon 图标点击
const onRightIconClick = () => {
if (!props.mode) return false;
if (props.mode === 'closeable') {
state.isMode = true;
emit('close');
} else if (props.mode === 'link') {
emit('link');
}
};
// 页面加载时
onMounted(() => {
if (props.scrollable) return false;
initAnimation();
listenerAnimationend();
});
return {
noticeBarWarpRef,
noticeBarTextRef,
onRightIconClick,
...toRefs(state),
};
},
name: "LayNoticeBar",
props: {
// 选值为 closeable link
mode: {
type: String,
default: () => "",
},
// 通知文本内容
text: {
type: String,
default: () => "",
},
// 通知文本颜色
color: {
type: String,
default: () => "var(--color-warning)",
},
// 通知背景色
background: {
type: String,
default: () => "var(--color-warning-light-9)",
},
// 字体大小，单位px
size: {
type: [Number, String],
default: () => 14,
},
// 通知栏高度，单位px
height: {
type: Number,
default: () => 40,
},
// 动画延迟时间 (s)
delay: {
type: Number,
default: () => 1,
},
// 滚动速率 (px/s)
speed: {
type: Number,
default: () => 100,
},
// 是否开启垂直滚动
scrollable: {
type: Boolean,
default: () => false,
},
// 自定义左侧图标
leftIcon: {
type: String,
default: () => "",
},
// 自定义右侧图标
rightIcon: {
type: String,
default: () => "",
},
},
setup(props, { emit }) {
const noticeBarWarpRef = ref();
const noticeBarTextRef = ref();
const state = reactive({
order: 1,
oneTime: 0,
twoTime: 0,
warpOWidth: 0,
textOWidth: 0,
isMode: false,
});
// 初始化 animation 各项参数
const initAnimation = () => {
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;}}`
);
computeAnimationTime();
setTimeout(() => {
changeAnimation();
}, props.delay * 1000);
});
};
// 计算 animation 滚动时长
const computeAnimationTime = () => {
state.oneTime = state.textOWidth / props.speed;
state.twoTime = (state.textOWidth + state.warpOWidth) / props.speed;
};
// 改变 animation 动画调用
const changeAnimation = () => {
if (state.order === 1) {
noticeBarTextRef.value.style.cssText = `animation: oneAnimation ${state.oneTime}s linear; opactity: 1;}`;
state.order = 2;
} else {
noticeBarTextRef.value.style.cssText = `animation: twoAnimation ${state.twoTime}s linear infinite; opacity: 1;`;
}
};
// 监听 animation 动画的结束
const listenerAnimationend = () => {
noticeBarTextRef.value.addEventListener(
"animationend",
() => {
changeAnimation();
},
false
);
};
// 右侧 icon 图标点击
const onRightIconClick = () => {
if (!props.mode) return false;
if (props.mode === "closeable") {
state.isMode = true;
emit("close");
} else if (props.mode === "link") {
emit("link");
}
};
// 页面加载时
onMounted(() => {
if (props.scrollable) return false;
initAnimation();
listenerAnimationend();
});
return {
noticeBarWarpRef,
noticeBarTextRef,
onRightIconClick,
...toRefs(state),
};
},
});
</script>
@ -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;
}
@ -191,4 +225,4 @@ export default defineComponent({
.notice-bar .notice-bar-warp .notice-bar-warp-right-icon:hover {
cursor: pointer;
}
</style>
</style>