Как отключить пользовательский компонент с атрибутом authorize custom в Aurelia - PullRequest
Новая
       42

Как отключить пользовательский компонент с атрибутом authorize custom в Aurelia

0 голосов
/ 25 июня 2018

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

my-button.html: (в настоящее время только html) 

<template bindable="icon, disabled">
  <require from="./buttons.css"></require>

  <button class="btn btn-danger" disabled.bind="disabled">
      <slot>Enter text</slot>
      <i if.bind="icon" class="fa fa-${icon}"></i>
  </button>
</template>

parent.html: 

<my-button authorized.bind="false" click.delegate="doSmth()" icon="home">NotAuth</my-button>

К сожалению, это на самом деле не работает, может, я здесь что-то не так делаю.Мой обходной путь - добавить класс disabled к элементу, к которому прикреплен атрибут, в методе valueChanged атрибута: 

private valueChanged() {
    if (this.disabledBinding) {
    [...]    
    } else {
      if (this.value === true) {
        this.el.removeAttribute('disabled');
        this.el.classList.remove('disabled');
      } else {
        this.el.setAttribute('disabled', 'disabled');
        // Added this class so that all child elements cannot be clicked, also for custom components.
        this.el.classList.add('disabled');
      }
    }
  }

вместе с 

.disabled {
  pointer-events: none;
}

Это работает вполне нормально, но стилизация все еще должна быть выполнена тогда, возможно, для каждого элемента, так как они могут отличаться.Затем я добавляю выражение disabled.bind к конкретным элементам, чтобы применять их индивидуальные отключенные стили.Я думаю, это устраняет преимущество отличного атрибута auth.

Есть ли способ, который работает с пользовательскими компонентами?

...