Je crée une barre d'outils, qui sera utilisée pour l'édition de texte.
Chaque élément de la barre d'outils est en cours de création avec ce code: p>
import {Component, h, Prop, Event, EventEmitter} from '@stencil/core';
@Component({
tag: 'spa-toolbar-item',
styleUrl: 'spa-toolbar-item.scss',
})
export class spaToolbarItem {
@Prop({reflectToAttr: true, mutable: true}) toggle: boolean = false;
@Prop({reflectToAttr: true}) type: string;
@Event() onToggle: EventEmitter;
toggleComponent(): void {
this.toggle = !this.toggle;
this.onToggle.emit({visible: this.toggle});
}
render() {
return [
<button onClick={() => this.toggleComponent()}>
<slot/>
</button>,
<div class={this.toggle ? 'is-active' : null}>
{this.type == 'font'
? <div class={this.type}>
<span class="arial">Arial</span>
<span class="georgia">Georgia</span>
<span class="palatino">Palatino</span>
<span class="tahoma">Tahoma</span>
<span class="times">Times New Roman</span>
<span class="helvetica">Helvetica</span>
<span class="courier">Courier New</span>
<span class="lucida">Lucida Sans Typewriter</span>
<span class="verdana">Verdana</span>
</div>
: null}
</div>
]
}
}
3 Réponses :
Ce que vous pouvez faire avec pure JavaScript est, itérer à travers tous les éléments avec la classe est-actif et définissez les propriétés de la bascule de chacune à 0 (ou quelle que soit la façon dont vous le faites)
exemple) : Qu'est-ce que c'est fait, recherchez tous les éléments avec le IS-actif , itérier à eux et définissez une fonction, dans cette Fonction Le paramètre E est égal à l'élément actuel, vous pouvez définir votre propriété là-bas.
Mais comment accéder à la propriété bascule à l'intérieur de la boucle?
Donc, l'idée est d'appliquer Comme vous pouvez le constater, nous avons deux événements qui appellent le clickManager. Le premier est le document et le second est la liste déroulante que vous avez cliquée sur. Bien sûr, vous devez supprimer l'événement OnClick sur le bouton, mais ce code ne fonctionne pas comme prévu. Maintenant, vous pouvez décider de ce qui se passe si vous cliquez dans la liste déroulante et que se passe-t-il avec toutes les déposées non actives. C'est le concept de base qui est libre d'adapter et de modifier si nécessaire. < / p> AddeventListener sur votre document et sur le composant lui-même (l'hôte - Dropdown). Pour cela, vous pouvez utiliser un mode de vie comme composantDidLoad .
Merci Christian, j'ai fini par utiliser cette solution en dessous.
import {Component, h, Prop, Host, Element} from '@stencil/core';
@Component({
tag: 'spa-toolbar-item',
styleUrl: 'spa-toolbar-item.scss',
})
export class spaToolbarItem {
@Prop({reflectToAttr: true, mutable: true}) isOpen: string = 'false';
@Prop({reflectToAttr: true}) type: string;
@Element() el: HTMLElement;
openDropdown() {
function closeDropdown() {
let dropdowns = document.querySelectorAll('spa-toolbar-item[is-open]');
dropdowns.forEach(item => {
item.setAttribute('is-open', 'false')
});
}
if (this.el.getAttribute('is-open') == 'true') {
closeDropdown();
return
}
if (this.el.getAttribute('is-open') == 'false') {
closeDropdown();
this.el.setAttribute('is-open', 'true')
}
}
render() {
return (
<Host>
<button onClick={this.openDropdown.bind(this)}>
<slot/>
</button>
<div class={this.type}>
{this.type == 'font'
? <div>
<span class="arial">Arial</span>
<span class="georgia">Georgia</span>
<span class="palatino">Palatino</span>
<span class="tahoma">Tahoma</span>
<span class="times">Times New Roman</span>
<span class="helvetica">Helvetica</span>
<span class="courier">Courier New</span>
<span class="lucida">Lucida Sans Typewriter</span>
<span class="verdana">Verdana</span>
</div>
: null}
</div>
</Host>
)
}
}