CameraMachine/frontend/src/views/components/PictureEditor/mixin/edit/module/textbox.js

// 文字
import tools from '@/views/components/PictureEditor/mixin/edit/module/tools'
import linethrough from '@/views/components/PictureEditor/mixin/edit/images/linethrough.svg'
import underline from '@/views/components/PictureEditor/mixin/edit/images/underline.svg'
import textalignCenter from '@/views/components/PictureEditor/mixin/edit/images/textalign-center.svg'
import textalignLeft from '@/views/components/PictureEditor/mixin/edit/images/textalign-left.svg'
import textalignLR from '@/views/components/PictureEditor/mixin/edit/images/textalign-lr.svg'
import textalignRight from '@/views/components/PictureEditor/mixin/edit/images/textalign-right.svg'

const textbox = () => {
  return `
      <div class="edit-wrap">
          <div class="title step-label"><span class="step-row_color">编辑内容</span></div>
          <div class="flex left mar-top-10">
            字体
            <el-select
            v-model="fontFamilyStyle"
            :clearable="false"
            style="width: 120px"
            class="mar-left-10"
            placeholder="请选择"
            @change="setFontFamily"
             >
              <el-option
                v-for="item in options"
                :key="item.name"
                :label="item.name"
                :value="item.name">
                <img :src="item.thumbnail" style="max-width: 80%; height: 32px;">
              </el-option>
            </el-select>
          </div>


          <div class="flex left mar-top-10">
            <div class="edit-font-size flex left position-r" style="margin-right: 10px">
                <el-select
                     :model-value="layerState.fontSize"
                     @update:model-value="val=>setLayerAttr('fontSize', val)"
                     :clearable="false"
                     style="width: 80px"
                 >
                     <el-option v-for="item,index in TextboxConfig.fontSize" :key="index" :value="item">{{item}}</el-option>
                 </el-select>
                 <div class="bq fs-14 c-999">px</div>
             </div>
             <el-color-picker
               class="mar-left-10"
               :model-value="layerState.fill"
               @change="(val)=>setLayerAttr('fill', val)"
             ></el-color-picker>
          </div>
          <div class="flex left">
               <div class="label title_two">行高</div>
                 <el-input-number
                 v-model="layerState.lineHeight"
                  controls-position="right"
                  :precision="2"
                  :step="0.01"
                  class="mar-left-10"
                  style="width: 100px"
                   @change="(val)=>setLayerAttr('lineHeight',val)"
                  :min="0.01"
                   :max="100"/>
          </div>

          <div class="flex left">
               <div class="label title_two">字距</div>

                 <el-input-number
                 v-model="layerState.charSpacing"
                  style="width: 100px"
                  class="mar-left-10"
                  controls-position="right"
                  :precision="1"
                  :step="1"
                   @change="(val)=>setLayerAttr('charSpacing',val)"/> 
          </div>

          <div class="flex line-20 mar-top-10">
            <el-button size="small" class="flex-item"  @click="editObj({label:'underline',value:!editLayer.underline})">
             <el-tooltip   effect="dark" content="下划线" placement="top"><img src="${underline}" style="height: 12px"></el-tooltip>
            </el-button>
            <el-button size="small" class="flex-item"  @click="editObj({label:'linethrough',value:!editLayer.linethrough})">
             <el-tooltip  effect="dark" content="删除线" placement="top"><img src="${linethrough}" style="height: 12px"></el-tooltip>
            </el-button>
          </div>
          <div class="title_two">对齐方式</div>
          <div class="flex left line-20">
            <el-button size="small" style="padding: 15px 10px !important;" @click="editObj({label:'textAlign',value:'left'})">
             <el-tooltip  effect="dark" content="左对齐" placement="top"><img src="${textalignLeft}" style="height: 12px"></el-tooltip>
            </el-button>
            <el-button size="small" style="padding: 15px 10px !important"   @click="editObj({label:'textAlign',value:'center'})">
             <el-tooltip  effect="dark" content="居中对齐" placement="top"><img src="${textalignCenter}" style="height: 12px"></el-tooltip>
            </el-button>
            <el-button size="small" style="padding: 15px 10px !important"   @click="editObj({label:'textAlign',value:'right'})">
             <el-tooltip  effect="dark" content="右对齐" placement="top"><img src="${textalignRight}" style="height: 12px"></el-tooltip>
            </el-button>
            <el-button size="small" style="padding: 15px 10px !important"   @click="editObj({label:'textAlign',value:'justify'})">
             <el-tooltip  effect="dark" content="两端对齐" placement="top"><img src="${textalignLR}" style="height: 12px"></el-tooltip>
            </el-button>
          </div>
          ${tools.flip()}
          ${tools.straw()}
          ${tools.opacity()}

<!--
          <div class="title_two">描边</div>
          <div class="flex left" style="padding-left: 10px">
                <el-slider
                  :value="editLayer.strokeWidth"
                  style="width:60%"
                  :step="0.1"
                   @input="(val)=>editObj({label:'strokeWidth',value:val} )"
                  :min="0"
                  :max="5"
                ></el-slider>
              <el-color-picker class="mar-left-10" size="mini" :value="editLayer.stroke" @change="(val)=>editObj({label:'stroke',value:val})"></el-color-picker>

          </div>
          <div class="title_two">阴影</div>
          <div>

                <div class="flex left">
                    <div class="flex left flex-item">
                    x轴:
                       <el-input-number
                        v-model="shadowText.x"
                        style="width:90px; margin-left: 5px;"
                        size="small"
                        controls-position="right"
                        :step="1"
                         @change="(val)=>editObj({label:'shadow',value:shadow})"/>
                    </div>
                    <div class="flex left flex-item mar-left-10">
                    y轴:
                       <el-input-number
                        v-model="shadowText.y"
                        style="width:90px; margin-left: 5px;"
                        size="small"
                        controls-position="right"
                        :step="1"
                         @change="(val)=>editObj({label:'shadow',value:shadow})"/>
                    </div>
                 </div>


                <div class="flex left mar-top-10">
                    <div class="flex left flex-item">
                    模糊:
                         <el-input-number
                          v-model="shadowText.vague"
                          style="width:90px; margin-left: 5px;"
                          size="small"
                          controls-position="right"
                          :step="1"
                           @change="(val)=>editObj({label:'shadow',value:shadow})"/>
                    </div>
                    <div class="flex left flex-item mar-left-10">
                    颜色:
                        <el-color-picker
                        size="small" class="mar-left-10" v-model="shadowText.color" @change="(val)=>editObj({label:'shadow',value:shadow})"></el-color-picker>
                    </div>
                 </div>
          </div>-->
      </div>
     `
}

export default textbox