param: small component

Author: LogCreative

index.html

@@ -38,27 +38,18 @@
                     <span v-show="series">{{series}}</span>
                 </div>
             </details>
-            <details>
-                <summary>
-                    坐标
-                </summary>
-                <div>
-                    <input type="text" v-model="axis">
-                    <span v-show="axis">{{axis}}</span>
-                </div>
-            </details>
             <details>
                 <summary>
                     参数
                 </summary>
                 <div>
-                    <input type="text" v-model="param">
-                    <span v-show="param">{{param}}</span>
+                    <table>
+                        <property chname="标题" propkey="title"></property>
+                    </table>
                 </div>
             </details>
             <button v-on="{click: compile}">编译</button><br>
             <iframe v-bind:src="curl" id="compilePrev"></iframe>
-            <footer>Powered by <a href="https://github.com/aslushnikov/latex-online" target="_blank">LatexOnline</a></footer>
         </div>
         <div class="textext">
             <textarea v-model="premable"></textarea>
@@ -68,7 +59,7 @@
 <textarea v-model="suffix"></textarea>
         </div>
     </div>
-    <script src="web/js/vue.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
     <script src="web/js/main.js"></script>
 </body>
 </html>

web/js/main.js

@@ -1,8 +1,31 @@
+Vue.component('property',{
+    template:'<tr><td>{{chname}}</td><td>{{propkey}}</td><td><input :type="type" v-model="value" @keyup="on_change"></td></tr>',
+    props: ['chname','propkey'],
+    data: function(){
+        return {
+            type: "text",             //属性的数据类型
+            value: "",         //属性的值
+        }
+    },
+    computed:{
+        paramString: function(){
+            return this.propkey + "={" + this.value + "},";
+        }
+    },
+    methods:{
+        on_change: function(){
+            if(this.value!="")
+                app.param = this.paramString;
+            else
+                app.param = "";
+        }
+    }
+});
+
 var app = new Vue({
     el: '#app',
     data:{
         series: "",
-        axis: null,
         param: "",
         premable:"\\documentclass[tikz]{standalone}\n\
 \\usepackage{pgfplots}\n\