【问题标题】:How to disable multi-select-component in ember-widgets如何在 ember-widgets 中禁用多选组件
【发布时间】:2014-08-19 03:35:49
【问题描述】:

有没有办法从 addepar 的 ember-widgets 中禁用多选组件?

这适用于单个select-component

{{select-component
  contentBinding="selectCountries"
  prompt="Select a Country"
  value=selectSelected
  disabled=true
}}

同样不适用于multi-select-component

{{multi-select-component
  contentBinding="selectCountries"
  prompt="Select a Country"
  selections=multiSelectSelected
  disabled=true
}}

这是一个不起作用的 JS bin 示例。我查看了源代码,似乎没有这个选项。

【问题讨论】:

    标签: select ember.js multiple-select


    【解决方案1】:

    除了编辑源代码之外,我能想到的最快方法是这样(更新JS bin):

    我定义了一个 Ember 组件,它接受一个字符串数组 (selections) 作为其唯一参数。我使用了 multi-select-component 使用的所有类,所以我不必重新定义所有 CSS:

    <script type="text/x-handlebars" id="components/disabled-multi-select">
      <div class="ember-view ember-select multi-select-disabled" tabindex="-1">
        <div class="ember-select-container ember-select-multi dropdown-toggle js-dropdown-toggle">
          <ul class="form-control ember-select-choices">
            {{#each selection in selections}}
            <li class="ember-view ember-select-search-choice">
              <div>{{selection}}</div>
              <div class="ember-select-search-choice-close">×</div>
            </li>
            {{/each}}
          </ul>
        </div>
      </div>
    </script>
    

    然后我添加了一些 css 使它看起来像一个禁用的选择:

    .ember-select.multi-select-disabled > .ember-select-container > .form-control {
      cursor: not-allowed;
      background-color: #EEE;
      opacity: 1;
    }
    .ember-select.multi-select-disabled > .ember-select-container .ember-select-search-choice {
      background-color: #D8D8D8;
      cursor: not-allowed;
    }
    .ember-select.multi-select-disabled > .ember-select-container .ember-select-search-choice .ember-select-search-choice-close {
      cursor: not-allowed;
    }
    .ember-select.multi-select-disabled > .ember-select-container .ember-select-search-choice .ember-select-search-choice-close:hover {
      background-color: #D8D8D8;
    }
    

    它是这样使用的:

    {{#if isInputDisabled}}
      // Stick your multi-select-component in here
    {{else}}
      {{disabled-multi-select selections=multiSelectSelected}}
    {{/if}}
    

    【讨论】:

    • 原来是我可能需要修复的bug
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-08-26
    • 1970-01-01
    • 2021-06-26
    • 1970-01-01
    • 1970-01-01
    • 2012-11-16
    相关资源
    最近更新 更多