Question

我创建了一个简单的组件来渲染SVG精灵中的图标。该组件应该有一个默认的CSS类来全局管理它的样式（.svg-icon）。另外，我希望有可能通过'class'属性通过类名添加一些依赖于上下文的样式。

JS：

App.SvgIconComponent = Ember.Component.extend
   layoutName: 'components/svg-icon'
   classNames: ['svg-icon']
   tagName: 'svg'
   attributeBindings: ['width', 'height', 'fill'],

   width: 16
   height: 16
   fill: 'currentColor'

模板：

<use xlink:href="#svg-icon-{{name}}"/>

用法：

{{svg-icon name="facebook" class="social__icon" width="14" height="14"}}

HTML输出：

<svg id="ember1012" width="14" height="14" fill="currentColor" class="social__icon ember-view svg-icon">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-icon-facebook"></use>
</svg>

问题在于Ember将我的默认类（.svg-icon）推送到类列表的末尾。但是，为了避免级联的一些问题，我需要在类列表的开头（class =“svg-icon social__icon ember-view”）中使用这个类。有可能实现吗？

我知道，我可以使用classNameBindings属性设置类名，但在这种情况下，我需要使用一些与'class'不同的属性。最好使用原生的“class”属性。

日Thnx。

Answer 1

试试这个，

{{svg-icon name="facebook" classNames="social__icon" width="14" height="14"}}

以上方法可行，但不使用class属性。所以它不符合你的要求。

但如果这与您的要求不符，您可以尝试在init方法中手动设置classNames。

init(){
    this._super(...arguments);
    console.log(' Classess ',this.get('classNames')); //You will get classNames, you can do rearrange the classNames array
    this.get('classNames').unshiftObject('svg-icon'); //to force svg-icon to be first in classNames array.    
  }

<强> UPDATE1

上面的init（）不起作用。所以我相信classNames值会被添加到最后。使用原生class来获得AFAIK是不可能的。但随后是你的要求

我知道，我可以使用classNameBindings属性设置类名，但在这种情况下，我需要使用一些与'class'不同的属性

您可以提到特定属性的不同类名是true。

{{my-component is_social__icon=false }}

和my-component.js

内

classNameBindings:['is_social__icon:social__icon']

<强> UPDATE2
1）您还可以在classNameBindings

中为true和false值指定类名

export default Ember.Component.extend({
  classNameBindings: ['isEnabled:enabled:disabled'],
  isEnabled: false
});

isEnabled - true - 然后它将包含enabled类名 isEnabled - false - 然后它将包含disabled类名

2）您甚至可以指定仅为虚假值添加的类名。

 classNameBindings: ['isEnabled::disabled'],

3）您可以指定多个属性

 classNameBindings:['isSocialIcon':'social__icon','isActive':'selected']

您可以为组件提供isSocialIcon和isActive属性的值。

{{my-component isSocialIcon=true isActive=(unless social.inactive) }}

如果将isActive解析为true，则会将类social__icon selected添加到my-component。

参考：https://guides.emberjs.com/v1.13.0/components/customizing-a-components-element/#toc_customizing-class-names

Ember 1.13，类名中的类名

1 个答案: