Multiple properties

LogCreative · LogCreative · commit d9208fbef3e7 · 2020-10-12T18:57:09.000+08:00
diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="web/css/main.css">
     <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
     <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
 </head>
 <body>
     <div class="nav">
@@ -43,8 +44,11 @@
                     参数
                 </summary>
                 <div>
-                    <table>
+                    <table id="propcon">
                         <property chname="标题" propkey="title"></property>
+                        <tr>x轴</tr>
+                        <property chname="最小" propkey="xmin"></property>
+                        <property chname="最大" propkey="xmax"></property>
                     </table>
                 </div>
             </details>
diff --git a/web/js/main.js b/web/js/main.js
@@ -1,27 +1,28 @@
+var paramDic = new Array();
+
 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 + "},";
+            value: "",                //属性的值
         }
     },
     methods:{
         on_change: function(){
-            if(this.value!="")
-                app.param = this.paramString;
-            else
-                app.param = "";
+            paramDic[this.propkey] = this.value;
+
+            app.param = "";
+            for(var key in paramDic)
+                if(paramDic[key]!="")
+                    app.param += key + "={" + paramDic[key] + "},";
+            
         }
     }
 });
 
+
 var app = new Vue({
     el: '#app',
     data:{
@@ -30,15 +31,13 @@ var app = new Vue({
         premable:"\\documentclass[tikz]{standalone}\n\
 \\usepackage{pgfplots}\n\
 \\pgfplotsset{compat=1.14}\n\
-\\begin{document}\n\
-\\begin{tikzpicture}",
-        suffix:"\\end{tikzpicture}\n\
-\\end{document}",
+\\begin{document}\n",
+        suffix:"\\end{document}",
         curl:"",
     },
     computed:{
         content: function(){
-            return "\\begin{axis}["+this.param+"]\n "+this.series+"\n\\end{axis}";
+            return "\\begin{tikzpicture}\n\\begin{axis}["+this.param+"]\n "+this.series+"\n\\end{axis}\n\\end{tikzpicture}";
         },
         file: function(){
             return this.premable+this.content+this.suffix;
