1

我正在 Wakanda 中创建一个自定义小部件。

此小部件必须更改属性功能中的类。例如，如果属性 shadowDepth=2 则我将类设置为mdl-shadow--2dp，否则如果 shadowDepth=6 我将类设置为 mdl-shadow--6dp。

我怎么能这样改变班级？

4

1 回答 1

0

最常用的方法如下：

  1. 将enum属性添加到自定义 Widget。
  2. 考虑 Widget 初始化时的现有类。
  3. 触发onChange应用您想要的课程。

让我们分别查看每个步骤：

1.添加枚举自定义属性

我希望您知道如何创建自定义小部件。让我们将属性添加到小部件定义中widget.js：

var myWidget = widget.create('myWidget', {
  // widget attributes
});

对于enum属性，您可以按如下方式定义它：

shadowDepth: widget.property({
  type: 'enum',
  description: 'Shadow depth for MDL widget',
  values: {
    'mdl-shadow--1dp': '1',
    'mdl-shadow--2dp': '2',
    'mdl-shadow--3dp': '3',
    'mdl-shadow--4dp': '4',
    'mdl-shadow--5dp': '5',
    'mdl-shadow--6dp': '6'
  },
  defaultValue: 'mdl-shadow--2dp',
  bindable: false
})

这样，您就添加enum了暂时没有任何作用的属性。

2.如果widget已经有其中一个类，设置property属性值（initialValue）

为了检索可以在 DOM 中分配的小部件的初始值，我们defaultValueCallback在属性属性中定义函数，如下所示defaultValue：

  defaultValueCallback: function() {
    var r = /mdl-shadow--\ddp/.exec(this.node.className); // regex are cool
    return r[r.length - 1] || 'mdl-shadow--2dp'; // return the latest occurrence of the class or the default value
  },

3. onChange 触发器

在init小部件的属性声明中添加以下代码：

init: function() {
  // first call to set the attribute
  this._changeShadowDepth(this.shadowDepth());
  // onChange event
  this.shadowDepth.onChange(this._changeShadowDepth);
}

并添加_changeShadowDepth如下功能：

_changeShadowDepth: function(value) {
  var $node = $(this.node); // jQuery is included in the prototype, do not worry
  [
    'mdl-shadow--1dp', 'mdl-shadow--2dp', 'mdl-shadow--3dp',
    'mdl-shadow--4dp', 'mdl-shadow--5dp', 'mdl-shadow--6dp'
  ].forEach(function(klass) {
    $node.removeClass(klass);
  });
  if (value) {
    $node.addClass(value);
  }
},

这与官方Image 小部件用于更改对齐（背景对齐）属性的方法完全相同。

于 2016-08-22T09:16:24.900 回答