LanternJS

这是一个前端小插件，可以快速引入一个可控显示的灯笼挂饰，使用方便快捷、方便。

一、说明

这个插件使用非常方便，您只需要给一个wrapper标签，然后通过实例化Class Lantern为一个对象即可为网页添加喜庆小灯笼。下面是效果图：

二、使用

npm i lanternjs-seayj

或者

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lantern.min.js"></script>

1）给一个wrapper标签

首先，你需要在页面任意地方添加如下代码：

<div id="lantern-wrapper" class="lantern-wrapper" no-select></div>

[must] id="lantern-wrapper"

这个id非常重要，如果没有我们将不知道代码需要插入在哪里。

[optional] no-select

在灯笼中会用到文字，而这些文字有可能会被用户选中，可能会影响用户体验，而这些已经被我们考虑到了。

您只需要在标签中添加no-select属性即可快速实现禁止选中效果，并且兼容多浏览器(不包括IE)。

2）实例化对象

你需要在合适的地方(在引入插件代码和wrapper标签代码之后的任意位置)实例化一个对象，就像下面这样：

let lantern = new Lantern('lantern-wrapper', {
    date: {
        from: '12-20',
        to: '1-21',
    },
    postion: {
        zIndex: '1',
        lanternTop: [10, 150, 150, 10],
        lanternRL: [0, 0, 0, 0],
    },
    content: '新年快乐',
});

或者这样(使用默认设置)：

let lantern = new Lantern('lantern-wrapper', {});

[must] lantern-wrapper

这个参数是必须的，并且值为wrapper标签的id名称，用来帮助我们找到装内容的盒子。

[must] {}

这个参数是一个对象，如果你不想过多设置(全部使用默认设置)，那么可以传一个空对象。注意，它可以为空但是必须要有！ 如果你需要进行一些个性化设置，那么你将需要用到这个对象里面的一些属性。下面一一为您介绍：

[optional] date

可选参数：

from

to

这个参数代表你需要展示的日期区间，我们将会在from给出的日期开始展示灯笼，并且在to给出的日期结束展示。

您需要做的就是给出格式为 月-日 的日期即可。您不用考虑闰年问题，也不用考虑每月天数不一样问题，更不要考虑跨年问题(我们允许from的时间大于to的时间，这表示从当前跨越到下一年的设置)，您只需要按照每个月31天来处理即可，剩下的交给我们。

注意： 如果您只设置了from而不设置to，这并不代表一直展示。因为我们对于未给出的设置，通通默许为默认值(后面除特殊说明外均一致)。

[optional] postion

可选参数：

zIndex

lanternTop

lanternRL

我们提供常用的一些样式设置，你可以直接使用以避免新增CSS样式来覆盖他们。

首先是zIndex参数，这个用来设置整体的z-index样式，防止被覆盖，默认为9999。

然后是lanternTop参数，这个参数代表灯笼距离顶部的距离，默认为[0, 0, 0, 0]。当然，你可以按照数组的方式从左往右给每一个灯笼设置不同的顶部距离，也可以直接给出一个数字或者字符串，例如：0或'0'。我们会同时将这个值设置为四个灯笼的顶部距离。

最后是lanternRL参数，这个参数代表灯笼距离最近侧的距离，默认值为[10, 150, 150, 10]。简单说就是左侧灯笼距离左侧距离，右侧灯笼距离右侧距离。设置顺序还是按照从左往右依次设置。注意的是，这里必须采用数组的方式传值，给一个数字或者字符串是不被认可的。（这也好理解，不然灯笼就会挤到一块去了，不是吗？）

[optional] content

这个值顾名思义，就是添加一个你需要展示的内容。例如：content: '万事如意'。我们会选中前四个字符，同时对于未给出的值依旧采取默认值。

三、最后

如果有任何问题，欢迎提出issues。 如果可以的话，可以给个小小的star吗？这对我真的很重要🥰，谢谢了！