Я пытаюсь реализовать компонент флажка с настраиваемыми стилями, но не могу найти способ привязки прокси. Вот как теперь выглядит компонент (не работает):
<input
id = "{id}"
bind:group
bind:checked
type = "checkbox">
<label for = "{id}">
<slot></slot>
</label>
<script>
const rndID = (size) => [...Array(size)].map(i => (~~(Math.random()*36)).toString(36)).join('')
export default {
data: () => ({
id: rndID(15),
}),
}
</script>
<style>
...
</style>
Я хочу, чтобы его можно было использовать как обычно с привязками checked
или group
. Но теперь без группы выдает ошибку. Есть ли способ делать такие вещи со Svelte?
🤔 А знаете ли вы, что...
Svelte предоставляет множество готовых компонентов и библиотек для ускорения разработки.
Вот мой подход. Я создаю многоразовый компонент флажка и вызываю его из любых форм, которые в нем нуждаются. Обратите внимание на привязка: проверено = проверено
<div class = "pure-control-group">
<label class = "form-check-label" for = {id}>{@html label}</label>
<input type = "checkbox" class = "form-check-input" id = {id}
name = {name} bind:value=value bind:checked=checked>
<slot name = "afterlabel"></slot>
</div>
<script>
export default {
oncreate() { },
methods: { }
};
</script>
Я вызываю это из такого представления, обратите внимание, что привязка: проверено = user.usrRoles.reports - это логическое значение:
<fieldset>
<Checkbox name = "roles" value = "reports" id = "role-valid" label = "Reports Page" bind:checked=user.usrRoles.reports>
<div class = "pure-form-message-inline " slot = "afterlabel">View Reports Page</div></Checkbox>
</fieldset>
<script>
export default {
components: {
Checkbox: './forms/form-field-checkbox.html'
},
};
</script>