[添加] 添加字体选择

charlieysx · Mar 3, 2019 · 2cd6f45 · 2cd6f45
1 parent 0e786df
commit 2cd6f45
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 8 deletions.
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
@@ -45,7 +45,8 @@ module.exports = {
       'UTIL': resolve('src/util'),
       'STORE': resolve('src/store'),
       'DATA': resolve('src/data'),
-      'MIXINS': resolve('src/mixins')
+      'MIXINS': resolve('src/mixins'),
+      'FONTS': resolve('src/assets/fonts')
     }
   },
   module: {

diff --git a/src/assets/fonts/ZCOOL-Kuaile.ttf b/src/assets/fonts/ZCOOL-Kuaile.ttf
diff --git a/src/common/pageDesign/styleWidgets/valueSelect.vue b/src/common/pageDesign/styleWidgets/valueSelect.vue
@@ -1,14 +1,16 @@
 <template>
-  <div id="value-select" ref="select">
+  <div id="value-select" ref="select" :style="{width: inputWidth}">
     <p 
       class="input-label" 
       v-if="label">
       {{ label }}
     </p>
-    <div class="input-wrap" :class="{active: inputBorder}">
+    <div class="input-wrap" :class="{active: inputBorder}" :style="{width: inputWidth}">
       <input 
         class="real-input"
+        :style="{textAlign: textAlign}"
         :class="{disable : !disable}"
+        :readonly="readonly ? 'readonly' : ''"
         type="text"
         :value="showValue"
         @input="innerValue = $event.target.value.replace(RegExp(suffix), '')"
@@ -28,10 +30,10 @@
       <ul class="list-ul" v-if="data">
         <li 
           v-for="listItem in data" 
-          :key="listItem" 
+          :key="(typeof listItem === 'object' ? listItem.name : listItem)" 
           :class="{'active': listItem == innerValue}"
           @click="selectItem(listItem)">
-          {{ listItem + suffix }}
+          {{ (typeof listItem === 'object' ? listItem.name : listItem) + suffix }}
         </li>
       </ul>
     </el-popover>
@@ -60,6 +62,15 @@ export default {
     },
     disable: {
       default: true
+    },
+    inputWidth: {
+      default: '80px'
+    },
+    textAlign: {
+      default: 'center'
+    },
+    readonly: {
+      default: false
     }
   },
   data () {
@@ -71,7 +82,7 @@ export default {
     }
   },
   created () {
-    this.innerValue = this.value
+    this.innerValue = typeof this.value === 'object' ? this.value.name : this.value
   },
   mounted () {
     this.width = this.$refs.select.offsetWidth
@@ -83,7 +94,7 @@ export default {
   },
   watch: {
     value (value) {
-      this.innerValue = value
+      this.innerValue = typeof this.value === 'object' ? this.value.name : this.value
     },
     inputBorder (value) {
       if (value) {

diff --git a/src/common/pageDesign/widgets/wText/wText.vue b/src/common/pageDesign/widgets/wText/wText.vue
@@ -5,7 +5,7 @@
     :contenteditable="editable ? 'plaintext-only' : false"
     @dblclick="(e) => dblclickText(e)"
     @blur="(e) => updateText(e)"
-    :class="[{'edit-text': editable}, params.uuid]"
+    :class="[{'edit-text': editable}, params.uuid, params.fontClass.value]"
     ref="widget"
     :style="{
       position: 'absolute',
@@ -50,6 +50,10 @@ export default {
     lineHeight: 1.5,
     letterSpacing: 0,
     fontSize: 24,
+    fontClass: {
+      name: '默认字体',
+      value: ''
+    },
     fontWeight: 'normal',
     fontStyle: 'normal',
     textDecoration: 'none',
@@ -142,6 +146,7 @@ export default {
 
 <style lang="stylus" scoped>
 @import '~STYLUS/page-design.styl'
+@import '~STYLUS/page-design-font.styl'
 #w-text
   outline: none
   cursor: pointer

diff --git a/src/common/pageDesign/widgets/wText/wTextStyle.vue b/src/common/pageDesign/widgets/wText/wTextStyle.vue
@@ -30,6 +30,16 @@
             v-model="innerElement.letterSpacing" 
             @finish="(value) => finish('letterSpacing', value)" />
         </div>
+        <div class="line-layout style-item">
+          <value-select 
+            label="字体"
+            :data="fontClassList"
+            :value="innerElement.fontClass"
+            inputWidth="280px"
+            textAlign="left"
+            :readonly="true"
+            @finish="(value) => finish('fontClass', value)" />
+        </div>
         <div class="line-layout style-item">
           <color-select label="字体颜色" v-model="innerElement.textColor" @finish="(value) => finish('textColor', value)" />
           <color-select label="背景颜色" v-model="innerElement.backgroundColor" @finish="(value) => finish('backgroundColor', value)" />
@@ -100,6 +110,16 @@ export default {
         '120',
         '144'
       ],
+      fontClassList: [
+        {
+          name: '默认字体',
+          value: ''
+        },
+        {
+          name: '站酷快乐体',
+          value: 'ZCOOL-Kuaile'
+        }
+      ],
       lineHeightList: [
         '1',
         '1.5',

diff --git a/src/stylus/page-design-font.styl b/src/stylus/page-design-font.styl
@@ -0,0 +1,8 @@
+@font-face {
+  font-family: "ZCOOL-Kuaile";
+  src: url("~FONTS/ZCOOL-Kuaile.ttf") format("truetype");
+}
+
+.ZCOOL-Kuaile {
+    font-family: 'ZCOOL-Kuaile'
+}