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> </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 | 每页数量 | -- | | limit | 每页数量 | -- |
| total | 总条数 | -- | | total | 总条数 | -- |
| showCount | 显示总数 | `false` | | showCount | 显示总数 | `false` |

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

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

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

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