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="pad-10">
          <!-- 文字内容输入 -->
          <div>
            <div class="title_two">文字内容</div>
            <el-input
              type="textarea"
              :model-value="editLayer.text"
              @input="(val) => setLayerAttr('text', val)"
             :autosize="{ minRows: 2, maxRows: 8}"
              placeholder="请输入文字内容"
              class="mar-top-5"
              resize="none"
            />
          </div>

          <!-- 字体设置 -->
          <div class="mar-top-15">
            <div class="title_two">字体样式</div>
            <div class="">
              <div class="flex left mar-top-10" style="align-items: center; margin-right: 15px;">
                <span class="label-text">字体：</span>
                <el-select
                  v-model="fontFamilyStyle"
                  :clearable="false"
                  style="width: 140px"
                  class="mar-left-5"
                  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: 80%; height: 24px;">
                  </el-option>
                </el-select>
              </div>

              <div class="flex left mar-top-10" style="align-items: center;">
                <span class="label-text">大小：</span>
                <el-select
                  :model-value="layerState.fontSize"
                  @update:model-value="val=>setLayerAttr('fontSize', val)"
                  :clearable="false"
                  style="width: 60px"
                  class="mar-left-5"
                  size="small"
                >
                  <el-option v-for="item,index in TextboxConfig.fontSize" :key="index" :value="item">{{item}}</el-option>
                </el-select>
                <span class="mar-left-10 c-999 fs-12">px</span>
              </div>
            </div>
          </div>

          <!-- 颜色和排版 -->
          <div class="mar-top-15">
            <div class="title_two">颜色与排版</div>
            <div class=" ">
              <div class="flex left " style="align-items: center; margin-right: 15px;">
                <span class="label-text">颜色：</span>
                <el-color-picker
                  :model-value="layerState.fill"
                  @change="(val)=>setLayerAttr('fill', val)"
                  size="small"
                  class="mar-left-5"
                />
              </div>

                <div class="mar-top-10 flex left">
                  <div class="flex left" >
                    <span class="label-text">行高：</span>
                    <el-input-number
                      v-model="layerState.lineHeight"
                      controls-position="right"
                      :precision="2"
                      :step="0.01"
                      size="small"
                      style="width: 100px"
                      class="mar-left-5"
                      @change="(val)=>setLayerAttr('lineHeight',val)"
                      :min="0.01"
                      :max="10"
                    />
                  </div>
              </div>

                <div class="mar-top-10 flex left">
    
                  <div class="flex left" style="align-items: center;">
                    <span class="label-text">字距：</span>
                    <el-input-number
                      v-model="layerState.charSpacing"
                      style="width: 100px"
                      class="mar-left-5"
                      size="small"
                      controls-position="right"
                      :precision="1"
                      :step="1"
                      @change="(val)=>setLayerAttr('charSpacing',val)"
                    />
                  </div>
              </div>
            </div>
          </div>

          <!-- 文字装饰 -->
          <div class="mar-top-15">
            <div class="title_two">文字装饰</div>
            <div class="flex left mar-top-10">
              <el-button
                size="small"
                :type="editLayer.underline ? 'primary' : 'default'"
                @click="editObj({label:'underline',value:!editLayer.underline})"
                class="mar-right-5"
              >
                <el-tooltip effect="dark" content="下划线" placement="top">
                  <img src="${underline}" style="height: 10px">
                </el-tooltip>
              </el-button>

              <el-button
                size="small"
                :type="editLayer.linethrough ? 'primary' : 'default'"
                @click="editObj({label:'linethrough',value:!editLayer.linethrough})"
              >
                <el-tooltip effect="dark" content="删除线" placement="top">
                  <img src="${linethrough}" style="height: 10px">
                </el-tooltip>
              </el-button>
            </div>
          </div>

          <!-- 对齐方式 -->
          <div class="mar-top-15">
            <div class="title_two">对齐方式</div>
            <div class="flex left mar-top-10">
              <el-button
                size="small"
                :type="editLayer.textAlign === 'left' ? 'primary' : 'default'"
                @click="editObj({label:'textAlign',value:'left'})"
                class="mar-right-5"
              >
                <el-tooltip effect="dark" content="左对齐" placement="top">
                  <img src="${textalignLeft}" style="height: 12px">
                </el-tooltip>
              </el-button>

              <el-button
                size="small"
                :type="editLayer.textAlign === 'center' ? 'primary' : 'default'"
                @click="editObj({label:'textAlign',value:'center'})"
                class="mar-right-5"
              >
                <el-tooltip effect="dark" content="居中对齐" placement="top">
                  <img src="${textalignCenter}" style="height: 12px">
                </el-tooltip>
              </el-button>

              <el-button
                size="small"
                :type="editLayer.textAlign === 'right' ? 'primary' : 'default'"
                @click="editObj({label:'textAlign',value:'right'})"
                class="mar-right-5"
              >
                <el-tooltip effect="dark" content="右对齐" placement="top">
                  <img src="${textalignRight}" style="height: 12px">
                </el-tooltip>
              </el-button>

              <el-button
                size="small"
                :type="editLayer.textAlign === 'justify' ? 'primary' : 'default'"
                @click="editObj({label:'textAlign',value:'justify'})"
              >
                <el-tooltip effect="dark" content="两端对齐" placement="top">
                  <img src="${textalignLR}" style="height: 12px">
                </el-tooltip>
              </el-button>
            </div>
          </div>

          <!-- 其他工具 -->
          <div class="mar-top-15">
            <div class="title_two">其他工具</div>
            <div>
              ${tools.flip()}
              ${tools.straw()}
              ${tools.opacity()}
            </div>
          </div>

<!--
          <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>
      </div>
     `
}

export default textbox