Merge pull request #18 from pengloo53/master

fix default select & add custom font-size
SJTU-UMJI-Tech · Apr 20, 2019 · 7121518 · 7121518
2 parents 02d4313 + 96a34a9
commit 7121518
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 12 deletions.
diff --git a/src/assets/scripts/editor.js b/src/assets/scripts/editor.js
@@ -10,12 +10,16 @@ var app = new Vue({
       currentEditorTheme: 'base16-light',
       editor: null,
       builtinFonts: [
-        { label: '衬线', value: 'serif', fonts: "Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif"},
-        { label: '无衬线', value: 'sans-serif', fonts: "Roboto, Oxygen, Ubuntu, Cantarell, PingFangSC-light, PingFangTC-light, 'Open Sans', 'Helvetica Neue', sans-serif"}
+        { label: '衬线', value: "Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif"},
+        { label: '无衬线', value: "Roboto, Oxygen, Ubuntu, Cantarell, PingFangSC-light, PingFangTC-light, 'Open Sans', 'Helvetica Neue', sans-serif"}
+      ],
+      currentFont: "Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif",
+      currentSize: '16px',
+      sizeOption: [
+        { label: '16px', value: '16px', desc: '默认' },
+        { label: '17px', value: '17px', desc: '正常' },
+        { label: '18px', value: '18px', desc: '稍大' }
       ],
-      currentFont: {
-        label: '', value: ''
-      },
       aboutDialogVisible: false
     }
   },
@@ -31,10 +35,11 @@ var app = new Vue({
     this.editor.on("change", function(cm, change) {
       self.refresh()
     })
-    this.currentFont = this.builtinFonts[0]
+    // this.currentFont = this.builtinFonts[0],
     this.wxRenderer = new WxRenderer({
       theme: defaultTheme,
-      fonts: this.currentFont.fonts
+      fonts: this.currentFont,
+      size: this.currentSize
     })
     axios({
       method: 'get',
@@ -60,6 +65,12 @@ var app = new Vue({
       })
       this.refresh()
     },
+    sizeChanged: function(size){
+      this.wxRenderer.setOptions({
+        size: size
+      })
+      this.refresh()
+    },
     refresh: function () {
       this.output = this.renderWeChat(this.editor.getValue())
     },

diff --git a/src/assets/scripts/renderers/wx-renderer.js b/src/assets/scripts/renderers/wx-renderer.js
@@ -14,7 +14,8 @@ var WxRenderer = function (opts) {
   this.buildTheme = function (themeTpl) {
     var mapping = {}
     var base = COPY(themeTpl.BASE, {
-      'font-family': this.opts.fonts
+      'font-family': this.opts.fonts,
+      'font-size': this.opts.size
     })
     var base_block = COPY(base, {
       'margin': '20px 10px'

diff --git a/src/assets/scripts/themes/default.js b/src/assets/scripts/themes/default.js
@@ -2,8 +2,7 @@ var defaultTheme = {
   BASE: {
     'text-align': 'left',
     'color': '#3f3f3f',
-    'line-height': '1.5',
-    'font-size': '16px',
+    'line-height': '1.5'
   },
   BASE_BLOCK: {
     'margin': '20px 10px'

diff --git a/src/index.html b/src/index.html
@@ -39,15 +39,26 @@
         <el-form label-width="80px" size="mini" class="ctrl">
           <el-form-item label="Fonts">
             <el-select v-model="currentFont" size="mini" placeholder="选择字体" @change="fontChanged">
-              <el-option v-for="font in builtinFonts"  :style="{fontFamily: font.fonts}"
+              <el-option v-for="font in builtinFonts"  :style="{fontFamily: font.value}"
                 :key="font.value"
                 :label="font.label"
-                :value="font.fonts">
+                :value="font.value">
                 <span style="float: left">{{ font.label }}</span>
                 <span style="float: right; color: #8492a6; font-size: 13px" >Abc</span>
               </el-option>
             </el-select>
           </el-form-item>
+          <el-form-item label="Font Size">
+            <el-select v-model="currentSize" size="mini" placeholder="选择段落字体大小" @change="sizeChanged">
+              <el-option v-for="size in sizeOption"
+                :key="size.value"
+                :label="size.label"
+                :value="size.value">
+                <span style="float: left">{{ size.label }}</span>
+                <span style="float: right; color: #8492a6; font-size: 13px" >{{ size.desc }}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
         </el-form>
         <el-button class="about" @click="aboutDialogVisible = true">关于</el-button>
       </el-header>