161 lines
12 KiB
JavaScript
161 lines
12 KiB
JavaScript
import { w as withInstall } from "../badge/index2.js";
|
|
import { defineComponent, ref, reactive, onUnmounted, onMounted, withDirectives, openBlock, createElementBlock, normalizeStyle, createElementVNode, createBlock, unref, createCommentVNode, toDisplayString, createVNode, withCtx, Fragment, renderList, createTextVNode, vShow, nextTick } from "vue";
|
|
import { a as _sfc_main$1, _ as _sfc_main$2 } from "../carousel/index2.js";
|
|
import { _ as _sfc_main$2W } from "../_chunks/@layui/index.js";
|
|
var index_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => '.layui-carousel{position:relative;left:0;top:0;background-color:#f8f8f8}.layui-carousel>[carousel-item]{position:relative;width:100%;height:100%;overflow:hidden}.layui-carousel>[carousel-item]:before{position:absolute;content:"\\e63d";left:50%;top:50%;width:100px;line-height:20px;margin:-10px 0 0 -50px;text-align:center;color:var(--global-neutral-color-8);font-family:layui-icon!important;font-size:30px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.layui-carousel>[carousel-item]>*{position:absolute;left:0;top:0;width:100%;height:100%;background-color:#f8f8f8;transition-duration:.3s;-webkit-transition-duration:.3s;overflow:hidden;visibility:hidden}.layui-carousel-updown>*{-webkit-transition:.3s ease-in-out up;transition:.3s ease-in-out up}.layui-carousel-arrow{display:none\\ ;opacity:0;position:absolute;left:10px;top:50%;margin-top:-18px;width:36px;height:36px;line-height:36px;text-align:center;font-size:20px;border:0;border-radius:50%;background-color:#0003;color:#fff;-webkit-transition-duration:.3s;transition-duration:.3s;cursor:pointer}.layui-carousel-arrow[lay-type=add]{left:auto!important;right:10px}.layui-carousel:hover .layui-carousel-arrow[lay-type=add],.layui-carousel[lay-arrow=always] .layui-carousel-arrow[lay-type=add]{right:20px}.layui-carousel[lay-arrow=always] .layui-carousel-arrow{opacity:1;left:20px}.layui-carousel[lay-arrow=none] .layui-carousel-arrow{display:none}.layui-carousel-arrow:hover,.layui-carousel-ind ul:hover{background-color:#00000059}.layui-carousel:hover .layui-carousel-arrow{display:block\\ ;opacity:1;left:20px}.layui-carousel-ind{position:relative;top:-35px;width:100%;line-height:0!important;text-align:center;font-size:0}.layui-carousel[lay-indicator=outside]{margin-bottom:30px}.layui-carousel[lay-indicator=outside] .layui-carousel-ind{top:10px}.layui-carousel[lay-indicator=outside] .layui-carousel-ind ul{background-color:#00000080}.layui-carousel[lay-indicator=none] .layui-carousel-ind{display:none}.layui-carousel-ind ul{display:inline-block;padding:5px;background-color:#0003;border-radius:10px;-webkit-transition-duration:.3s;transition-duration:.3s}.layui-carousel-ind li{display:inline-block;width:10px;height:10px;margin:0 3px;font-size:14px;background-color:var(--global-neutral-color-3);background-color:#ffffff80;border-radius:50%;cursor:pointer;-webkit-transition-duration:.3s;transition-duration:.3s}.layui-carousel-ind li:hover{background-color:#ffffffb3}.layui-carousel-ind li.layui-this{background-color:#fff}.layui-carousel>[carousel-item]>.layui-carousel-next,.layui-carousel>[carousel-item]>.layui-carousel-prev,.layui-carousel>[carousel-item]>.layui-this{display:block}.layui-carousel>[carousel-item]>.layui-this{left:0}.layui-carousel>[carousel-item]>.layui-carousel-prev{left:-100%}.layui-carousel>[carousel-item]>.layui-carousel-next{left:100%}.layui-carousel>[carousel-item]>.layui-carousel-next.layui-carousel-left,.layui-carousel>[carousel-item]>.layui-carousel-prev.layui-carousel-right{left:0}.layui-carousel>[carousel-item]>.layui-this.layui-carousel-left{left:-100%}.layui-carousel>[carousel-item]>.layui-this.layui-carousel-right{left:100%}.layui-carousel[lay-anim=updown] .layui-carousel-arrow{left:50%!important;top:20px;margin:0 0 0 -18px}.layui-carousel[lay-anim=updown]>[carousel-item]>*,.layui-carousel[lay-anim=fade]>[carousel-item]>*{left:0!important}.layui-carousel[lay-anim=updown] .layui-carousel-arrow[lay-type=add]{top:auto!important;bottom:20px}.layui-carousel[lay-anim=updown] .layui-carousel-ind{position:absolute;top:50%;right:20px;width:auto;height:auto;transform:translateY(-50%)}.layui-carousel[lay-anim=updown] .layui-carousel-ind ul{padding:3px 5px}.layui-carousel[lay-anim=updown] .layui-carousel-ind li{display:block;margin:6px 0}.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-this{top:0}.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-prev{top:-100%}.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-next{top:100%}.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-next.layui-carousel-left,.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-prev.layui-carousel-right{top:0}.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-this.layui-carousel-left{top:-100%}.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-this.layui-carousel-right{top:100%}.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-next,.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-prev{opacity:0}.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-next.layui-carousel-left,.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-prev.layui-carousel-right{opacity:1}.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-this.layui-carousel-left,.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-this.layui-carousel-right{opacity:0}.layui-notice-bar{padding:0 15px;border-radius:4px}.layui-notice-bar .layui-notice-bar-warp{display:flex;align-items:center;width:100%;height:inherit}.layui-notice-bar .layui-notice-bar-warp .layui-notice-bar-warp-text-box{flex:1;height:inherit;display:flex;align-items:center;overflow:hidden;position:relative}.layui-notice-bar .layui-notice-bar-warp .layui-notice-bar-warp-text-box .layui-notice-bar-warp-text{white-space:nowrap;position:absolute;left:0}@keyframes around1{0%{left:0}to{left:calc(0px - var(--textWidth--))}}@keyframes around2{0%{left:calc(var(--textWidth--))}to{left:0}}.layui-notice-bar .layui-notice-bar-warp .layui-notice-bar-warp-text-box .layui-notice-bar-warp-slot{width:100%;white-space:nowrap}.layui-notice-bar .layui-notice-bar-warp .layui-notice-bar-warp-text-box .layui-notice-bar-warp-slot .layui-carousel>[carousel-item] *{display:flex;align-items:center}.layui-notice-bar .layui-notice-bar-warp .layui-notice-bar-warp-left-icon{width:24px;font-size:inherit!important}.layui-notice-bar .layui-notice-bar-warp .layui-notice-bar-warp-right-icon{width:24px;text-align:right;font-size:inherit!important}.layui-notice-bar .layui-notice-bar-warp .layui-notice-bar-warp-right-icon:hover{cursor:pointer}\n')();
|
|
const _hoisted_1 = {
|
|
key: 1,
|
|
class: "layui-notice-bar-warp-slot"
|
|
};
|
|
const __default__ = {
|
|
name: "LayNoticeBar"
|
|
};
|
|
const _sfc_main = defineComponent({
|
|
...__default__,
|
|
props: {
|
|
mode: null,
|
|
text: { default: "" },
|
|
textlist: { default: () => [] },
|
|
color: { default: () => "var(--color-warning)" },
|
|
background: { default: () => "var(--color-warning-light-9)" },
|
|
size: { default: 14 },
|
|
height: { default: 40 },
|
|
delay: { default: 1 },
|
|
speed: { default: 100 },
|
|
scrollable: { type: Boolean, default: false },
|
|
leftIcon: null,
|
|
rightIcon: null
|
|
},
|
|
emits: ["close", "link"],
|
|
setup(__props, { emit }) {
|
|
var _a;
|
|
const props = __props;
|
|
const noticeBarWarpRef = ref();
|
|
const noticeBarTextRef = ref();
|
|
const active = ref((_a = props.textlist[0]) == null ? void 0 : _a.id);
|
|
const state = reactive({
|
|
order: 1,
|
|
oneTime: 0,
|
|
twoTime: 0,
|
|
warpOWidth: 0,
|
|
textOWidth: 0,
|
|
isMode: false,
|
|
height: 40
|
|
});
|
|
var timer;
|
|
const initAnimation = () => {
|
|
nextTick(() => {
|
|
state.warpOWidth = noticeBarWarpRef.value.offsetWidth;
|
|
state.textOWidth = noticeBarTextRef.value.offsetWidth;
|
|
computeAnimationTime();
|
|
timer = setTimeout(() => {
|
|
changeAnimation();
|
|
}, props.delay * 1e3);
|
|
});
|
|
};
|
|
onUnmounted(() => {
|
|
clearInterval(timer);
|
|
timer = null;
|
|
});
|
|
const computeAnimationTime = () => {
|
|
state.oneTime = state.textOWidth / props.speed;
|
|
state.twoTime = (state.textOWidth + state.warpOWidth) / props.speed;
|
|
};
|
|
const changeAnimation = () => {
|
|
if (state.order === 1) {
|
|
noticeBarTextRef.value.style.cssText = `animation: around1 ${state.oneTime}s linear; opactity: 1;`;
|
|
state.order = 2;
|
|
} else {
|
|
noticeBarTextRef.value.style.cssText = `animation: around2 ${state.twoTime}s linear ; opactity: 1;`;
|
|
state.order = 1;
|
|
}
|
|
};
|
|
const listenerAnimationend = () => {
|
|
noticeBarTextRef.value.addEventListener("animationend", () => {
|
|
changeAnimation();
|
|
}, false);
|
|
};
|
|
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 (_ctx, _cache) => {
|
|
return withDirectives((openBlock(), createElementBlock("div", {
|
|
class: "layui-notice-bar",
|
|
style: normalizeStyle({ background: __props.background, height: `${__props.height}px` })
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: "layui-notice-bar-warp",
|
|
style: normalizeStyle({ color: __props.color, "font-size": `${__props.size}px` })
|
|
}, [
|
|
__props.leftIcon ? (openBlock(), createBlock(unref(_sfc_main$2W), {
|
|
key: 0,
|
|
class: "layui-notice-bar-warp-left-icon",
|
|
type: __props.leftIcon
|
|
}, null, 8, ["type"])) : createCommentVNode("", true),
|
|
createElementVNode("div", {
|
|
class: "layui-notice-bar-warp-text-box",
|
|
ref_key: "noticeBarWarpRef",
|
|
ref: noticeBarWarpRef,
|
|
style: normalizeStyle("--textWidth--:" + __props.text.length + "em")
|
|
}, [
|
|
!__props.scrollable ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: "layui-notice-bar-warp-text",
|
|
ref_key: "noticeBarTextRef",
|
|
ref: noticeBarTextRef
|
|
}, toDisplayString(__props.text), 513)) : (openBlock(), createElementBlock("div", _hoisted_1, [
|
|
createVNode(_sfc_main$1, {
|
|
modelValue: active.value,
|
|
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => active.value = $event),
|
|
indicator: "none",
|
|
anim: "updown",
|
|
arrow: "none",
|
|
style: { height: `40px` }
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.textlist, (item) => {
|
|
return openBlock(), createBlock(_sfc_main$2, {
|
|
key: item.id,
|
|
id: item.id,
|
|
class: "layui-anim layui-anim-up"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(item.text), 1)
|
|
]),
|
|
_: 2
|
|
}, 1032, ["id"]);
|
|
}), 128))
|
|
]),
|
|
_: 1
|
|
}, 8, ["modelValue"])
|
|
]))
|
|
], 4),
|
|
__props.rightIcon ? (openBlock(), createBlock(unref(_sfc_main$2W), {
|
|
key: 1,
|
|
type: __props.rightIcon,
|
|
class: "layui-notice-bar-warp-right-icon",
|
|
onClick: onRightIconClick
|
|
}, null, 8, ["type"])) : createCommentVNode("", true)
|
|
], 4)
|
|
], 4)), [
|
|
[vShow, !state.isMode]
|
|
]);
|
|
};
|
|
}
|
|
});
|
|
const component = withInstall(_sfc_main);
|
|
export { component as default };
|