Bladeren bron

support array of objects in style binding

Evan You 10 jaren geleden
bovenliggende
commit
56788288bf
2 gewijzigde bestanden met toevoegingen van 19 en 3 verwijderingen
  1. 5 3
      src/directives/internal/style.js
  2. 14 0
      test/unit/specs/directives/internal/style_spec.js

+ 5 - 3
src/directives/internal/style.js

@@ -11,10 +11,12 @@ module.exports = {
   deep: true,
 
   update: function (value) {
-    if (typeof value === 'object') {
-      this.objectHandler(value)
-    } else {
+    if (typeof value === 'string') {
       this.el.style.cssText = value
+    } else if (_.isArray(value)) {
+      this.objectHandler(value.reduce(_.extend, {}))
+    } else {
+      this.objectHandler(value)
     }
   },
 

+ 14 - 0
test/unit/specs/directives/internal/style_spec.js

@@ -90,6 +90,20 @@ if (_.inBrowser) {
       expect(el.style.getPropertyValue('padding')).toBeFalsy()
     })
 
+    it('array of objects', function () {
+      el.style.padding = '10px'
+
+      dir.update([{color: 'red'}, {marginRight: '30px'}])
+      expect(el.style.getPropertyValue('color')).toBe('red')
+      expect(el.style.getPropertyValue('margin-right')).toBe('30px')
+      expect(el.style.getPropertyValue('padding')).toBe('10px')
+
+      dir.update([{color: 'blue'}, {padding: null}])
+      expect(el.style.getPropertyValue('color')).toBe('blue')
+      expect(el.style.getPropertyValue('margin-right')).toBeFalsy()
+      expect(el.style.getPropertyValue('padding')).toBeFalsy()
+    })
+
     it('updates object deep', function (done) {
       el.setAttribute('bind-style', 'divStyling')
       var vm = new Vue({