Svelte中Easepicker的LockPlugin功能无法正常使用

你遇到的LockPlugin无效果但无报错的问题，根源是插件配置键名使用错误——Easepick要求用插件对应的小写名称作为配置项的键，而非插件类名。

问题原因 #

LockPlugin的内部名称是lock（可通过插件源码或官方文档确认），而非你使用的LockPlugin。Easepick会根据这个小写名称匹配插件和对应的配置，键名错误会导致配置被忽略，插件以默认状态运行。

修正后的代码 #

简化测试组件版本

<script lang="ts">
    import {onMount} from 'svelte';
    import {easepick} from '@easepick/core';
    import {RangePlugin} from '@easepick/range-plugin';
    import {LockPlugin} from '@easepick/lock-plugin';

    let picker: easepick.Core;
    onMount(() => {
        picker = new easepick.create({
            element: document.getElementById('datepicker'),
            css: [
                'https://cdn.jsdelivr.net/npm/@easepick/core@1.2.1/dist/index.css',
                'https://cdn.jsdelivr.net/npm/@easepick/range-plugin@1.2.1/dist/index.css',
            ],
            plugins: [RangePlugin, LockPlugin],
            // 将LockPlugin改为lock
            lock: {
                minDate: new Date(2023, 0, 1),
                maxDays: 5
            },
        });
    })
</script>

<input id="datepicker" type="text" />

条件渲染场景版本

let plugins = [LockPlugin, RangePlugin];
async function initDatePicker() {
    if (picker) {
        picker.destroy();
    }
    await tick();
    const element = document.getElementById('datepicker');
    if (element) {
        picker = new easepick.create({
            element,
            css: ['https://cdn.jsdelivr.net/npm/@easepick/core@1.2.1/dist/index.css', 'https://cdn.jsdelivr.net/npm/@easepick/range-plugin@1.2.1/dist/index.css', customCSS],
            plugins,
            // 修正配置键名
            lock: {
                minDate: new Date(2023, 0, 1),
                maxDays: 5
            }
        });
    }
}

补充说明 #

所有Easepick插件都遵循这个规则：配置键名是插件内部定义的name属性的小写值。比如RangePlugin的配置键是range，如果后续需要配置该插件也需要注意这一点。

内容的提问来源于stack exchange，提问作者Siebe