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

//公用工具
export default  {
  flip(){
    return `
          <div class="title_two">翻转</div>
          <div class="flex left">
            <el-button size="small" @click="Flip('X')" >左右翻转</el-button>
            <el-button size="small" @click="Flip('Y')" >上下翻转</el-button>
          </div>
      `
  },
  straw(){
    return `
          <div class="title_two">层级</div>
          <div class="flex left">
            <el-button   @click="move(editLayer,'bringToFront')"  size="small">置顶</el-button>
            <el-button   @click="move(editLayer,'sendToBack')"  size="small">置底</el-button>
          </div>
      `
  },
  opacity(){
    return `
          <div class="title_two">透明度</div>
          <div class="flex left">
         <!-- <el-input v-model="editLayer.opacity"/>-->
                <el-slider
                 size="small"
                  v-model="editLayer.opacity"
                  style="width:100%"
                  :step="0.01"
                  :min="0.01"
                  :max="1"
                  :show-tooltip="false"
                   @input.native="(val)=>editObj({label:'opacity',value:val} )"

                ></el-slider>

          </div>
      `
  },
cutout(){
  return `
    <div class="title_two">剪裁</div>
    <div class="flex left">
      <el-select v-model="clipSettings.shape" @change="applyClipPath" size="small" style="width:100px">
        <el-option label="矩形" value="rect"></el-option>
        <el-option label="圆形" value="circle"></el-option>
        <el-option label="SVG" value="svg"></el-option>
      </el-select>
    </div>
      <div v-if="clipSettings.shape === 'svg'" class="flex left" style="margin-left:10px">
        <!-- 固定地址输入框 -->
        <el-input 
          v-model="clipSettings.svgUrl" 
          placeholder="SVG地址"
          @input="applyClipPath"
          size="small"
          style="width:200px"
        />
      </div>
      <div v-if="clipSettings.shape === 'svg'" class="flex left" style="margin-left:10px">
      <el-input-number v-model="clipSettings.svgWidth" @input="applyClipPath" :step="1" :min="1" size="small" style="width:80px"/>
      <el-input-number v-model="clipSettings.svgHeight" @input="applyClipPath" :step="1" :min="1" size="small" style="width:80px"/>
      </div>
    <!-- 矩形参数 -->
    <div v-if="clipSettings.shape === 'rect'" class="flex left" style="margin-left:10px">
      <el-input-number v-model="clipSettings.width" @input="applyClipPath" :step="1" :min="1" size="small" style="width:80px"/>
      <el-input-number v-model="clipSettings.height" @input="applyClipPath" :step="1" :min="1" size="small" style="width:80px"/>
      <el-input-number v-model="clipSettings.rectRadius" @input="applyClipPath" :step="1" :min="0" size="small" style="width:60px" placeholder="圆角"/>
    </div>

    <!-- 圆形参数 -->
    <div v-else class="flex left" style="margin-left:10px">
      <el-input-number v-model="clipSettings.radius" @input="applyClipPath" :step="1" :min="1" size="small" style="width:80px"/>
    </div>

    <!-- 描边参数 -->
    <div class="flex left" style="margin-top:8px">
      <el-color-picker v-model="clipSettings.strokeColor" @change="applyClipPath" size="small"/>
      <el-input-number v-model="clipSettings.strokeWidth" @input="applyClipPath" :step="1" :min="0" :max="10" size="small" style="width:60px" placeholder="描边"/>
    </div>

    <!-- 偏移参数 -->
    <div class="flex left">
      <el-input-number v-model="clipSettings.offsetX" @input="applyClipPath" :step="1" size="small" style="width:60px"/>
      <el-input-number v-model="clipSettings.offsetY" @input="applyClipPath" :step="1" size="small" style="width:60px"/>
    </div>

    <div class="flex left">
      <el-button @click="clearClipPath" size="small">清除</el-button>
    </div>
  `
}


}