- 增加 options 参数的双向绑定处理

Author: mm-sam

README.md

@@ -56,4 +56,8 @@
 - `added`, 对应`plupload` 事件 `FilesAdded`。
 - `progress`, 对应`plupload` 事件 `UploadProgress`。
 - `uploaded`, 对应`plupload` 事件 `FileUploaded`。
-- `error`, 对应`plupload` 事件 `Error`。
+- `error`, 对应`plupload` 事件 `Error`。
+
+## 属性
+
+组件暴露 一个属性 `uploader` 指向所创建的 `plupload` 实例。

dist/vue-plupload.js

@@ -17,7 +17,12 @@
             <h1>Plupload wrapper for Vue 1.x <small>Example：</small></h1>
         </div>
         <div class="jumbotron">
-            <vue-plupload @added="handleAdded" @progress="handleProgress" @error="handleError" @uploaded="handleUploaded" :options="uploadOpt"></vue-plupload>
+            <vue-plupload @added="handleAdded" @progress="handleProgress" @error="handleError" @uploaded="handleUploaded" :options.sync="uploadOpt"></vue-plupload>
+            <div class="btn-group">
+                <button @click="setOption(1)" class="btn btn-default" type="button">With Params 1</button>
+                <button @click="setOption(2)" class="btn btn-default" type="button">With Params 2</button>
+                <button @click="setOption(3)" class="btn btn-default" type="button">With Params 3</button>
+            </div>
         </div>
         <div class="form-group">
             <label>Log:</label>
@@ -45,6 +50,9 @@ <h1>Plupload wrapper for Vue 1.x <small>Example：</small></h1>
             },
 
             methods: {
+                setOption : function(val) {
+                    Vue.set(this.uploadOpt, "multipart_params", {test: val});
+                },
                 handleAdded: function (uploader, files) {
                     files.forEach(function (file) {
                         vm.log += "begin upload file:" + file.name + "\n";

dist/vue-plupload.js.map

@@ -1,6 +1,6 @@
 {
     "name": "vue-plupload",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "description": "plupload wrapper for vue 1.x",
     "main": "index.js",
     "scripts": {

docs/bundle.js

@@ -50,17 +50,41 @@ module.exports = Vue.extend({
             }
         }
     },
+    
+    data : function() {
+        return {
+            uploader: null
+        }
+    },
 
     detached: function() {
 
     },
-
-    attached: function () {
-        var self = this;
-
-        Vue.nextTick(function () {
-
-            var opt = _.merge(uploaderDefaultOption, self.options, {
+    
+    watch : {
+        "options" : {
+            handler: function(val, oldVal) {
+                var self = this;
+                
+                if (!self.uploader) {
+                    self.renderPlupload();
+                } else {
+                    var opt = self.mergeOptions(val);
+                    self.uploader.setOption(opt);
+                }
+                
+                console.log("options change!");
+                console.log(val)
+            },
+            deep: true
+        }
+    },
+    
+    methods: {
+        mergeOptions: function(val) {
+            var self = this;
+        
+            return _.merge(uploaderDefaultOption, val, {
 
                 browse_button: self.$els.btn,
 
@@ -85,12 +109,24 @@ module.exports = Vue.extend({
                         self.$emit("error", up, err)
                     }
                 }
-            })
+            });
+        },
+        renderPlupload: function() {
+            var self = this;
+
+            Vue.nextTick(function () {
+
+                var opt = self.mergeOptions(self.options);
 
-            var uploader = new plupload.Uploader(opt);
+                self.uploader = new plupload.Uploader(opt);
 
-            uploader.init();
-        });
+                self.uploader.init();
+            });
+        }
+    },
+
+    attached: function () {
+        this.renderPlupload();
     }
 });