Правильно ли я разделяю ввод диапазона на отдельный компонент Svelte? Есть ли способ лучше? - PullRequest
Новая
       60

Правильно ли я разделяю ввод диапазона на отдельный компонент Svelte? Есть ли способ лучше?

2 голосов
/ 30 мая 2020

Я новичок в Svelte и мне это нравится! Создание однокомпонентного приложения с несколькими частями пользовательского интерфейса и общим состоянием до смешного весело и легко (приходит со средними знаниями HTML, CSS, & JS и новичками в React).

В конечном итоге, однако, я надеюсь создать более сложные приложения, которые будут включать в себя множество входов и состояний, поэтому, очевидно, мне нужно понимать, как использовать состояние между компонентами.

Однако , Я немного не понимаю, как лучше всего создать настраиваемый компонент ввода и лучше всего использовать состояние в другом месте. В частности, я хочу создать компонент input type="range" с индивидуальным стилем и использовать его в родительском элементе.

В ходе написания этого вопроса я нашел подход, который, кажется, работает, но я не могу найти что-то в документации или в Google, что полностью соответствует этому случаю, поэтому я не уверен в своем решение. Вот что я придумал: https://github.com/arrowtype/svelte-slider/.

Краткое изложение моего решения

Я начал с шаблона Svelte JS (https://github.com/sveltejs/template).

My App.svelte выглядит так: 

<script>
    import SimpleSlider from './SimpleSlider.svelte'

    export let sliderValA = 0;
    export let sliderValB = 15;
</script>

<main>
    <h1>A simple SvelteJS slider component</h1>

    <p>Slider A value is {sliderValA}</p>
    <SimpleSlider bind:value={sliderValA} min="0" max="10" step="1"/>

    <p>Slider B value is {sliderValB}</p>
    <SimpleSlider bind:value={sliderValB} min="0" max="30" step="5"/>

    <p>A + B is {sliderValA + sliderValB}</p>
</main>

И SimpleSlider.svelte выглядит так: 

<script>
    export let value = 5;
    export let min = 0;
    export let max = 10;
    export let step = 1;
</script>

<div class="slider-container">
    <input type="range" bind:value={value} min={min} max={max} step={step}>
    <span>{value}</span>
</div>

<style>
    .slider-container {
        display: flex;
        align-items: center;
    }
    input {
        margin:0 0.5em 0 0;
    }
</style>

В моем тестировании это работало. Но мне было сложно добраться туда, и я не уверен, является ли это наилучшей практикой.

Должен ли я делать что-то еще, например, использовать модуль svelte/store для обработки глобального состояния (если нет , когда мне это может понадобиться)?

1 Ответ

1 голос
/ 30 мая 2020

Честно говоря, это выглядит действительно хорошо и кажется мне способом go. Зачем вам нужен глобальный магазин? Его использование означает, что данные будут везде доступны и сохранены в вашем приложении, что звучит излишне, когда компонент нужен только в одной маленькой форме. Это лучше для небольших независимых компонентов.

Есть только небольшие улучшения для вашего SimpleSlider.svelte Я могу придумать: 

<script>
  export let moreProps = {}
</script>

<div class="slider-container">
    <input type="range" bind:value {min} {max} {step} {...moreProps}>
    <span>{value}</span>
</div>

Этот подход требует Преимущество упрощенного сокращенного синтаксиса и уменьшения объема кода. moreProps будет, если вы решите передать дополнительные свойства, такие как disable, например: 

<SimpleSlider bind:value={sliderValA} min="0" max="10" step="1" moreProps={{disabled:true}}/>
...