Use dialog-input-components

Author: dark-flames

src/components/Dialog.vue

@@ -11,10 +11,7 @@
                     <div class="mp-dialog-body">
                         <div class="mp-dialog-form">
                             <div class="mp-dialog-field" v-for="field in request.body">
-                                <label>{{ field.title }}</label>
-                                <input class="mp-dialog-input" v-if="field.type === 'input'" v-model="responseData[field.name]">
-                                <textarea class="mp-dialog-input" v-if="field.type === 'textarea'" v-model="responseData[field.name]"></textarea>
-                                <br>
+                                <component :is="field.type" :requestField="field" :param="field.param" @change="handleUpdate"></component>
                             </div>
                         </div>
 
@@ -73,31 +70,10 @@
     }
 
     .mp-dialog-field {
-        margin-bottom: 8px;
+        margin: 10px 8px;
         overflow:auto;
     }
-    .dialog-field label  {
-        padding-top: 5px;
-        display: inline-block;
-        vertical-align: top;
-        width: 75px;
-        font-size: 14px;
-        color: #666;
-    }
 
-    .dialog-field textarea {
-        resize: none;
-        height: 250px;
-        overflow: auto;
-    }
-
-    .mp-dialog-input {
-        display: inline-block;
-        width: 220px;
-        color: #999;
-        padding: 8px;
-        border: 1px solid #ddd;
-    }
     .mp-dialog-footer {
         overflow:auto;
     }
@@ -137,6 +113,7 @@
 
 <script>
 import 'font-awesome/css/font-awesome.css'
+import DialogComponents from './dialog-input-components/components'
 
 export default {
     name: 'editor-dialog',
@@ -172,7 +149,11 @@ export default {
         },
         finish () {
             this.$emit('finish', this.response)
+        },
+        handleUpdate(request) {
+            this.responseData[request.name] = request.value
         }
-    }
+    },
+    components: DialogComponents
 }
 </script>

src/components/Toolbar.vue

@@ -82,7 +82,7 @@ import 'font-awesome/css/font-awesome.css'
      *         reqeust: {
      *             title: "",
      *             body: [
-     *              {name,title,default}
+     *              {name, title, type, param, default}
      *             ],
      *             callback(){} //return the code that needed to be inserted
      *         }

src/components/dialog-input-components/Input.vue

@@ -0,0 +1,52 @@
+<template>
+    <div id="mp-dialog-input">
+        <label>{{ request.title }}</label>
+        <input v-model="value">
+    </div>
+</template>
+
+<style>
+    #mp-dialog-input {
+        overflow: auto;
+    }
+
+    #mp-dialog-input label {
+        float: left;
+        padding-top: 5px;
+        vertical-align: top;
+        width: 20%;
+        font-size: 14px;
+        color: #666;
+    }
+
+    #mp-dialog-input input {
+        float: left;
+        width: 73%;
+        color: #999;
+        padding: 8px;
+        border: 1px solid #ddd;
+    }
+</style>
+
+<script>
+    export default {
+        name: 'dialog-input',
+        props: {
+            requestField: {
+                type: Object
+            }
+        },
+        data() {
+            return {
+                request: this.requestField,
+                value :this.requestField.default ? this.requestField.default : ''
+            }
+        },
+        watch: {
+            value(newValue) {
+                this.request.value = newValue
+                this.$emit('change', this.request)
+            }
+        }
+    }
+</script>

src/components/dialog-input-components/components.js

@@ -0,0 +1,5 @@
+import Input from './input.vue'
+
+export default  {
+    'dialog-input': Input
+}

src/components/toolbar-button/btn-img.js

@@ -9,13 +9,13 @@ export default {
                 {
                     name: 'address',
                     title: '图片地址',
-                    type: 'input',
+                    type: 'dialog-input',
                     default: ''
                 },
                 {
                     name: 'description',
                     title: '图片描述',
-                    type: 'input',
+                    type: 'dialog-input',
                     default: ''
                 }
             ],

src/components/toolbar-button/btn-link.js

@@ -9,13 +9,13 @@ export default {
                 {
                     name: 'url',
                     title: '链接地址',
-                    type: 'input',
+                    type: 'dialog-input',
                     default: ''
                 },
                 {
                     name: 'description',
                     title: '链接标题',
-                    type: 'input',
+                    type: 'dialog-input',
                     default: ''
                 }
             ],

src/components/toolbar-button/btn-table.js

@@ -9,13 +9,13 @@ export default {
                 {
                     name: 'row',
                     title: '行数',
-                    type: 'input',
+                    type: 'dialog-input',
                     default: '3'
                 },
                 {
                     name: 'col',
                     title: '列数',
-                    type: 'input',
+                    type: 'dialog-input',
                     default: '2'
                 }
             ],