优化 字体大小 间距 段距 输入

src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue

@@ -22,15 +22,30 @@
     <Divider />
     
     <SelectGroup class="row formatFontsBox">
-      <el-select v-model="richTextAttrs.fontname" placeholder="" filterable
-      @change="emitRichTextCommand('fontname', richTextAttrs.fontname)">
-        <el-option
-            v-for="item in formatFonts"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-        />
-      </el-select>
+      <span class="selectText">
+        <el-select v-model="richTextAttrs.fontname" placeholder="" filterable
+        @change="emitRichTextCommand('fontname', richTextAttrs.fontname)">
+          <el-option
+              v-for="item in formatFonts"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+      </span>
+      <span class="selectTextInput">
+        <el-autocomplete
+          v-model="richTextAttrs.fontsize"
+          :fetch-suggestions="(queryString: string, cb: any)=>querySearchFont(queryString,cb,'fontsize')"
+          class="inline-input w-50"
+          placeholder="例:14px"
+          @select="handleSelect('fontsize')"
+          @blur="handleSelect('fontsize')">
+          <template #suffix>
+            <IconAddText />
+          </template>
+      </el-autocomplete>
+      </span>
       <!-- <Select
         class="font-select"
         style="width: 60%;"
@@ -43,7 +58,7 @@
         <template #icon>
           <IconFontSize />
         </template>
-      </Select> -->
+      </Select>
       <Select
         style="width: 40%;"
         :value="richTextAttrs.fontsize"
@@ -55,7 +70,7 @@
         <template #icon>
           <IconAddText />
         </template>
-      </Select>
+      </Select> -->
     </SelectGroup>
 
     <ButtonGroup class="row" passive>
@@ -276,7 +291,20 @@
 
     <div class="row">
       <div style="width: 40%;">行间距：</div>
-      <Select style="width: 60%;"
+      <span class="selectText selectTextLH border2">
+        <el-autocomplete
+          v-model="lineHeight"
+          :fetch-suggestions="(queryString: string, cb: any)=>querySearchFont(queryString,cb,'lineHeight')"
+          class="inline-input w-50"
+          placeholder="字体行间距"
+          @select="handleSelect('lineHeight')"
+          @blur="handleSelect('lineHeight')">
+          <template #suffix>
+            <IconRowHeight />
+          </template>
+      </el-autocomplete>
+      </span>
+      <!-- <Select style="width: 60%;"
         :value="lineHeight || 1"
         @update:value="value => updateLineHeight(value as number)"
         :options="lineHeightOptions.map(item => ({
@@ -286,11 +314,24 @@
         <template #icon>
           <IconRowHeight />
         </template>
-      </Select>
+      </Select> -->
     </div>
     <div class="row">
       <div style="width: 40%;">段间距：</div>
-      <Select style="width: 60%;"
+      <span class="selectText selectTextLH border2">
+        <el-autocomplete
+          v-model="paragraphSpace"
+          :fetch-suggestions="(queryString: string, cb: any)=>querySearchFont(queryString,cb,'paragraphSpace')"
+          class="inline-input w-50"
+          placeholder="字体段间距"
+          @select="handleSelect('paragraphSpace')"
+          @blur="handleSelect('paragraphSpace')">
+          <template #suffix>
+            <IconVerticalSpacingBetweenItems />
+          </template>
+      </el-autocomplete>
+      </span>
+      <!-- <Select style="width: 60%;"
         :value="paragraphSpace || 0"
         @update:value="value => updateParagraphSpace(value as number)"
         :options="paragraphSpaceOptions.map(item => ({
@@ -300,11 +341,24 @@
         <template #icon>
           <IconVerticalSpacingBetweenItems />
         </template>
-      </Select>
+      </Select> -->
     </div>
     <div class="row">
       <div style="width: 40%;">字间距：</div>
-      <Select style="width: 60%;"
+      <span class="selectText selectTextLH border2">
+        <el-autocomplete
+          v-model="wordSpace"
+          :fetch-suggestions="(queryString: string, cb: any)=>querySearchFont(queryString,cb,'wordSpace')"
+          class="inline-input w-50"
+          placeholder="字体字间距"
+          @select="handleSelect('wordSpace')"
+          @blur="handleSelect('wordSpace')">
+          <template #suffix>
+            <IconFullwidth />
+          </template>
+      </el-autocomplete>
+      </span>
+      <!-- <Select style="width: 60%;"
         :value="wordSpace || 0"
         @update:value="value => updateWordSpace(value as number)"
         :options="wordSpaceOptions.map(item => ({
@@ -314,7 +368,7 @@
         <template #icon>
           <IconFullwidth />
         </template>
-      </Select>
+      </Select> -->
     </div>
     <div class="row">
       <div style="width: 40%;">文本框填充：</div>
@@ -478,14 +532,90 @@ const fontSizeOptions = [
   '36px', '40px', '44px', '48px', '54px', '60px', '66px', '72px', '76px',
   '80px', '88px', '96px', '104px', '112px', '120px',
 ]
+const fontSizes = ref<Array>([])
+for(let i=0;i<fontSizeOptions.length;i++){
+  let obj = {
+    label: fontSizeOptions[i],
+    value: fontSizeOptions[i],
+  }
+  fontSizes.value.push(obj)
+}
 const lineHeightOptions = [0.9, 1.0, 1.15, 1.2, 1.4, 1.5, 1.8, 2.0, 2.5, 3.0]
-const wordSpaceOptions = ref([])
+const lineHeights = ref<Array>([])
+for(let i=0;i<lineHeightOptions.length;i++){
+  let obj = {
+    label: lineHeightOptions[i]+'倍',
+    value: lineHeightOptions[i],
+  }
+  lineHeights.value.push(obj)
+}
 
+const wordSpaceOptions = ref([])
 for(let i=0;i<31;i++){
-  wordSpaceOptions.value.push(i)
+  let obj = {
+    label: `${i}`,
+    value: i,
+  }
+  wordSpaceOptions.value.push(obj)
 }
 
 const paragraphSpaceOptions = [0, 5, 10, 15, 20, 25, 30, 40, 50, 80]
+const paragraphSpaces = ref<Array>([])
+for(let i=0;i<paragraphSpaceOptions.length;i++){
+  let obj = {
+    label: paragraphSpaceOptions[i]+'px',
+    value: paragraphSpaceOptions[i],
+  }
+  paragraphSpaces.value.push(obj)
+}
+
+interface RestaurantItem {
+  value: string
+  label: string
+}
+const handleSelect = (font:string) => {
+  let value
+  if(font=='fontsize') {
+    value = richTextAttrs.value.fontsize
+    emitRichTextCommand('fontsize', value as string)
+  }else if(font=='lineHeight'){
+    value = lineHeight.value
+    updateLineHeight(value)
+  }else if(font=='paragraphSpace'){
+    value = paragraphSpace.value
+    updateParagraphSpace(value)
+  }else if(font=='wordSpace'){
+    value = wordSpace.value
+    updateWordSpace(value)
+  }
+  
+}
+
+const createFilter = (queryString: string) => {
+  return (restaurant:RestaurantItem) => {
+    return (
+      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+    )
+  }
+}
+
+const querySearchFont = (queryString: string, cb: any, font:string) => {
+  let results
+  if(font=='fontsize'){
+    results = queryString? fontSizes.value.filter(createFilter(queryString))
+    : fontSizes.value
+  }else if(font=='lineHeight'){
+    results = queryString? lineHeights.value.filter(x=>{return x.label.indexOf(queryString)!=-1})
+    : lineHeights.value
+  }else if(font=='paragraphSpace'){
+    results = queryString? paragraphSpaces.value.filter(x=>{return x.label.indexOf(queryString)!=-1})
+    : paragraphSpaces.value
+  }else if(font=='wordSpace'){
+    results = queryString? wordSpaceOptions.value.filter(x=>{return x.label.indexOf(queryString)!=-1})
+    : wordSpaceOptions.value
+  }
+    cb(results)
+}
 
 // 设置行高
 const updateLineHeight = (value: number) => {
@@ -577,6 +707,33 @@ watch(handleElement, () => {
 </script>
 
 <style lang="scss" scoped>
+.selectText.selectTextLH::v-deep(.el-input__wrapper){
+  border-radius: 2px;
+}
+.selectTextInput::v-deep(.el-input__wrapper){
+  border-radius: 0 2px 2px 0;
+  padding: 1px 10px;
+  border-left: 0;
+}
+.selectTextInput{
+  width: 40%;
+  position: absolute;
+  right: 1px;
+  top: 0;
+}
+.selectText::v-deep(.el-input__wrapper){
+  border-radius: 2px 0 0 2px;
+  padding: 1px 10px;
+}
+.selectText{
+  width: 140px;
+}
+.formatFontsBox{
+  position: relative;
+}
+.formatFontsBox::v-deep(.el-input__wrapper):hover{
+  border: 0;
+}
 .text-style-panel {
   user-select: none;
 }

src/views/Editor/Toolbar/SlideDesignPanel.vue

@@ -140,15 +140,18 @@
     </div>
     <div class="row formatFontsBox">
       <div style="width: 40%;">字体：</div>
-      <el-select v-model="theme.fontName" placeholder="" filterable style="width: 137px;"
-      @change="updateTheme({ fontName: theme.fontName })">
-        <el-option
-            v-for="item in formatFonts"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-        />
-      </el-select>
+      <span class="selectText">
+        <el-select v-model="theme.fontName" placeholder="" filterable style="width: 137px;"
+        @change="updateTheme({ fontName: theme.fontName })">
+          <el-option
+              v-for="item in formatFonts"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+      </span>
+      
       <!-- <Select
         style="width: 60%;"
         :value="theme.fontName"
@@ -442,6 +445,13 @@ const updateViewportRatio = (value: number) => {
 </script>
 
 <style lang="scss" scoped>
+.selectText::v-deep(.el-input__wrapper){
+  border-radius: 2px;
+  padding: 1px 10px;
+}
+.selectText{
+  width: 140px;
+}
 .slide-design-panel {
   user-select: none;
 }