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="label title_two">字体</div>
          <div class="flex left">
            <el-select
            v-model="fontFamilyStyle || editLayer.fontFamily"
            :clearable="false"
            placeholder="请选择"
            @change="setFontFamily"
            size="small"
             >
              <el-option
                v-for="item in options"
                :key="item.name"
                :label="item.name"
                :value="item.name">
                <img :src="item.thumbnail" style="max-width: 100%; height: 32px;">
              </el-option>
            </el-select>
          </div>


          <div class="flex left mar-top-10">
            <div class="edit-font-size flex left position-r">
                <el-select :value="editLayer.fontSize" :clearable="false"
                     size="small"
                 @change="(val)=>editObj({label:'fontSize',value:val})">
                     <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" :value="editLayer.fill"
                     size="small"
               @change="(val)=>editObj({label:'fill',value:val})"></el-color-picker>
          </div>
          <div class="flex left">
            <div class="flex-item">
               <div class="label title_two">行高</div>
               <div class="value">
                 <el-input-number
                 v-model="editLayer.lineHeight"
                     size="small"
                   style="width:130px"
                  controls-position="right"
                  :precision="2"
                  :step="0.01"
                   @change="(val)=>editObj({label:'lineHeight',value:val} )"
                  :min="0.01"
                   :max="100"/>
                 </div>
            </div>
            <div class="flex-item mar-left-10">
               <div class="label title_two">字距</div>
               <div class="edit-font-size flex left">

                 <el-input-number
                 :value="editLayer.charSpacing"
                     size="small"
                   style="width:130px"
                  controls-position="right"
                  :precision="1"
                  :step="1"
                   @change="(val)=>editObj({label:'charSpacing',value:val})"/>
                 </div>
             </div>
          </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 line-20">
            <el-button size="small" class="flex-item"  @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" class="flex-item"  @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" class="flex-item"  @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" class="flex-item"  @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>
            <el-input
            v-model="editLayer.text"
             type="textarea"
             :autosize="{ minRows: 2, maxRows: 8}"
             maxlength="255"
             @input.native="(val)=> editObj({label:'text',value:val})"
            />

          </div>

          <div class="title_two">描边</div>
          <div class="flex left">
                <el-slider
                  :value="editLayer.strokeWidth"
                  style="width:100%"
                  :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