阅读 563
我用 Vue +Fabric.js写了个简易的H5可视化图片编辑器

我用 Vue +Fabric.js写了个简易的H5可视化图片编辑器

效果图:

1627714699.jpg

127619465-7271e5f1-fa24-49d9-a1c7-73c4dd83ede0.png

技术选型

  • Vue3
  • Element-plus
  • Fabric.js
  • ES6

核心功能

主要实现H5 移动端简单的图片的可视化编辑、预览、下载等功能。

  • 文本编辑:实现画布上的文本框的添加、字体属性的设置、样式风格编辑、背景颜色个性化设置、文本内容的设置等;
  • 图片上传:点击上传图片,实现图片的读取并添加到画布编辑区上,自由设置背景图片;
  • 绘制图片:实现根据鼠标坐标自由绘制图形(目前仅实现矩形,其他类似,可自己实现);
  • 删除控件:编辑区上的控件可自由删除;
  • 预览图片:编辑完成后可预览自己编辑的图片效果,并在右侧100%显示;
  • 下载图片:可下载编辑好的图片;
  • 画布缩放:可放大或者缩小画布,画布上的内容同步缩放;
  • 一键清空:重置实现画布一键清空;
  • ...

目前仅实现以上的功能,后续在继续完善更新~~

代码

editor.vue:

<template>
  <el-container >
    <el-header >
      <el-menu
        style="background: #6A60E3"
        mode="horizontal"
      >
        <div style="width: 400px; float: left;height:70px;color: #fff; background: #5951B6;line-height: 70px">
          <h1 style="text-align: center">{{ templatesTitle }}</h1>
        </div>
        <el-form inline="inline" style="float: right; width: 1000px" >
          <el-button
              class="el-icon-plus btn_style" style="width: 140px"
              @click="addTextHandle('textbox', 'add')"
          > 添加文本框
          </el-button>
          <el-button class="el-icon-plus btn_style" @click="imgDraw" >
            <input type="file" accept="image/*"
                style="display:none"
                id="uploadfile"
                @change="uploadFile" />
            上传图片
          </el-button>
          <el-button class="el-icon-edit btn_style"
              @click="initD"
          >   绘 制 </el-button>
          <el-button
            class="btn-delete btn_style el-icon-delete"
            @click="deleteText"
          > 删除控件
          </el-button>
        </el-form>
      </el-menu>
    </el-header>
    <el-container>
      <el-aside :width="isCollapsed ? '30px' : '300px'">
        <div class="text-edit">
          <div
            @click="closeSetting"
            class="title-setting"
            :tipTitle="isCollapsed ? '展开设置' : '收起设置'"
          >
            <span class="text-setting">{{ title }}</span>
            <i :class="isCollapsed ? 'el-icon-s-unfold' : 'el-icon-close'"/>
          </div>
          <el-form ref="form" >
            <el-form-item label="文本内容:">
              <div id="textBox"  style="width: 100% ">
                <el-input type="textarea"
                    @input="changeText"
                    @focus="changeText"
                    id="in" ref="in"
                    v-model="msg" ></el-input>
              </div>
            </el-form-item>
            <el-form-item label="字体:" label-width="82px">
              <el-select  v-model="fontFamilies.value"
                  placeholder="请选择字体"
                  @change="changeFontFamily">
                <el-option
                  v-for="item in fontFamilies"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="字体颜色:" >
              <el-select v-model="fontColor.value"
              placeholder="请选择字体颜色"
                  @change="changeFontColor"
              >
                <el-option
                  v-for="item in fontColor"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="字体粗细:" >
              <el-select v-model="fontWeight.value"
              placeholder="请选择字体粗细"
                  @change="changefontWeight"
              >
                <el-option
                  v-for="item in fontWeight"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="字体风格:" >
              <el-select v-model="fontStyle.value"
              placeholder="请选择字体风格"
                  @change="changeFontStyle">
                <el-option
                  v-for="item in fontStyle"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="字体大小:" >
              <el-select v-model="fontSizes.value"
              placeholder="选择字体大小"
                  @change="changeFontSize">
                <el-option
                  v-for="item in fontSizes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="对齐方式:" >
              <el-select v-model="textAlign.value"
                  @change="changeTextAlign"
                  placeholder="选择对齐方式">
                <el-option
                  v-for="item in textAlign"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="背景颜色:" >
              <el-color-picker
                class="color-picker"
                v-model="bgcolor" circle
                size="small"
                show-alpha
                :predefine="predefineColors"
                @change="changeBgColor"
                color-format="hex"
              ></el-color-picker>
            </el-form-item>
            <el-form-item>
<!--              <ul class="template-edit" id="template-edit" @click="chooseTemplate">
                <li><img src="@/assets/logo.png" alt="" id="bg1"  style="width: 100px;height: 50px" /></li>
                <li><img src="@/assets/logo.png" alt="" id="bg2"  style="width: 100px;height: 50px" /></li>
                <li><img src="@/assets/logo.png" alt="" id="bg3"  style="width: 100px;height: 50px" /></li>
              </ul>-->
            </el-form-item>
          </el-form>
        </div>
      </el-aside>
      <el-main style="height: 1040px" >
        <div class="content-show">
          <div class="canvas">
          <canvas ref="canvas" id="editorCanvas"></canvas>
        </div>
        </div>
        <el-form class="handleSave">
          <el-button type="primary" class="btn-save" @click="downLoadImage1">预览图片</el-button>
          <el-button type="primary" class="btn-download" @click="downLoad">下载图片</el-button>
          <el-form-item inline="inline" class="btn-zoom" style="margin: 10px 0px">
            <i class="el-icon-caret-left" @click="zoomIt(0.8)"></i>
            <span> {{ zoomCounter }} % </span>
            <i class="el-icon-caret-right" @click="zoomIt(1.2)"></i>
          </el-form-item>
          <el-button type="danger" class="btn-reset" @click="resetCanvas">重 置</el-button>
        </el-form>
      </el-main>
      <el-aside :width="isCollapsed ? '30px' : '375px'">
        <div
          @click="closeSetting"
          class="title-setting"
          :tipTitle="isCollapsed ? '展开设置' : '收起设置'"
        >
          <span class="text-setting">{{ showTitle }}</span>
          <i :class="isCollapsed ? 'el-icon-s-unfold' : 'el-icon-close'"/>
        </div>
        <img :src="imageBase64" alt="">
      </el-aside>
    </el-container>
  </el-container>
</template>

<script>

  import {
    fontFamilies,
    fontSizes,
    fontColor,
    fontStyle,
    fontWeight,
    backgroundColor,
    textAlign,
  } from "@/utils/fontData";

  import { fabric } from "fabric";
  let editorCanvas = "";

  fabric.Object.prototype.set({
    cornerStrokeColor: "#66b0ef",
    cornerColor: "#60abec",
    cornerStyle: "rectangele",
    cornerSize: 8,
    borderScaleFactor: 2,
    transparentCorners: false,
    borderColor: "#61abe8",
  });

  export default {
    name: "Editor",
    data() {
      return {
        isHide: true,
        checkAll: false,
        isChecked:false,
        isIndeterminate: true,
        fontFamilies,
        fontSizes,
        fontColor,
        fontStyle,
        fontWeight,
        textAlign,
        backgroundColor,
        predefineColors: ["#ffffff", "#FF0000", "#000000","#FFF800","#00FF0A","#FD00FF","#0095FF"],
        checked: true,
        // 模板图片保存数组
        templateImgs: [],
        zoomCounter: 100,
        tipTitle: "",
        imageBase64: "",
        isCollapsed: false,
        backColor: "#eec5c5",
        backGroundStatus: false,
        bgcolor: "#ff0000",
        itemWidth: "230px",
        done: false,
        // 文本控件属性
        textStyleData: {
          type: "editText",
          text: "双击编辑文字",
          top: 50,
          left: 50,
          width: 100,
          opacity: 1,
          stroke: "#ffffff",
          strokeWidth: 0,
          textAlign: "left",
          lineHeight: 1,
          charSpacing: 1,
          fontFamily: "hyzktjjkt",
          fontSize: 40,
          fontWeight: "normal",
          fontStyle: "normal",
          fill: "#000000",
          textBackgroundColor: "rgba(0,0,0,0)",
          selectable: true,
        },
        isOpen: false,
        isMove: false,
        src: "",
        msg: "",
        canvas: null,
        templatesTitle: "H5 可视化编辑",
        title: "文本设置",
        showTitle:"100% 预览",
        templateData: {},
        mouseFrom: {},
        mouseTo: {},
        moveCount: 1,
      };
    },
    mounted() {
      this.initeditorCanvas();
    },
    methods: {
      downLoadImage1() {
        this.done = true
        let base64URl = editorCanvas.toDataURL({
          formart: 'png',
          multiplier: 1
        })
        this.imageBase64 = base64URl
        this.done = false
      },

      saveTemplates() {
        console.log("你点击了模板保存");
        let base64URl = editorCanvas.toDataURL({
          formart: "jpg",
          multiplier: 1,
        });
      },

      addTemplates() {
        console.log("添加模板");
      },

      initD() {
        // 监听鼠标按下
        const obj = editorCanvas.getActiveObject();
        editorCanvas.on("mouse:down", (options) => {
          // 记录当前鼠标的起点坐标
          if(!obj) {
            this.mouseFrom.x = options.e.clientX - editorCanvas._offset.left;
            this.mouseFrom.y = options.e.clientY - editorCanvas._offset.top;
          }
        });
        // 监听鼠标移动
        editorCanvas.on("mouse:move", (options) => {
          // 记录当前鼠标移动终点坐标
          if (!obj) {
            this.mouseTo.x = options.e.clientX - editorCanvas._offset.left
            this.mouseTo.y = options.e.clientY - editorCanvas._offset.top
            this.drawRect();
          }
        });
        editorCanvas.on("mouse:up", (options) => {
          if (!obj) {
            this.mouseFrom.x = options.e.clientX - editorCanvas._offset.left;
            this.mouseFrom.y = options.e.clientY - editorCanvas._offset.top;
            this.doDrawing = false;
            this.canvasObject = null;
            this.mouseFrom = {};
            this.mouseTo = {}
          }
        });
        editorCanvas.on("selection:created",(option) => {
          if (option) {
            this.doDrawing = false;
          }
        })
      },
      getTransformedPosX(x) {
        let zoom = Number(editorCanvas.getZoom())
        return (x - editorCanvas.viewportTransform[4]) / zoom;
      },
      getTransformedPosY(y) {
        let zoom = Number(editorCanvas.getZoom())
        return (y - editorCanvas.viewportTransform[5]) / zoom;
      },
      // 绘制矩形
      drawRect() {
        // 计算矩形长宽
        let left = this.getTransformedPosX(this.mouseFrom.x);
        let top = this.getTransformedPosY(this.mouseFrom.y);
        let width = this.mouseTo.x - this.mouseFrom.x;
        let height = this.mouseTo.y - this.mouseFrom.y;
        const canvasObject = new fabric.Rect({
          left: left,
          top: top,
          width: width,
          height: height,
          fill: "#d70202",
          strokeWidth: 2,
        });
        editorCanvas.add(canvasObject);
      },

      // 初始化模板编辑画布
      initeditorCanvas() {
        editorCanvas = new fabric.Canvas("editorCanvas", {
          devicePixelRatio: true,
          width: "375",
          height: "667",
          originX: "center",
          originY: "center",
          backgroundColor: "#ffffff",
          transparentCorners: false,
        });
        editorCanvas.preserveObjectStacking = true;
      },

      // 收起文本设置
      closeSetting() {
        this.isCollapsed = !this.isCollapsed;
      },

      // 载入图片
      imgDraw() {
        document.getElementById("uploadfile").click();
      },

      uploadFile(e) {
        editorCanvas.isDrawingMode = false;
        let file = e.target.files[0];
        let reader = new FileReader();
        reader.onload = (e) => {
          let data = e.target.result;
          fabric.Image.fromURL(data, (img) => {
            editorCanvas.add(img).renderAll();
          });
        };
        reader.readAsDataURL(file);
        e.target.value = "";
      },

      // 下载图片
      downLoad() {
        this.done = true;
        const dataURL = editorCanvas.toDataURL({
          width: editorCanvas.width,
          height: editorCanvas.height,
          left: 0,
          top: 0,
          format: "png",
        });
        const link = document.createElement("a");
        link.download = "图片.png";
        link.href = dataURL;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      },

      // 清空画布
      resetCanvas() {
        let children = editorCanvas.getObjects();
        if (children.length > 0) {
          editorCanvas.remove(...children);
        }
        editorCanvas.setBackgroundColor("#fff");
      },

      // 缩放
      zoomIt(factor) {
        let zoomCounter = this.zoomCounter;
        let cWidth = editorCanvas.width;
        let cHeight = editorCanvas.height;

        /* 同步缩小 */
        if (factor < 1 && zoomCounter > 0) {
          this.zoomCounter -= 20;
          editorCanvas.setWidth(cWidth * factor);
          editorCanvas.setHeight(cHeight * factor);

          const objects = editorCanvas.getObjects();
          for (let i in objects) {
            let scaleX = objects[i].scaleX;
            let scaleY = objects[i].scaleY;
            let left = objects[i].left;
            let top = objects[i].top;
            let tempScaleX = scaleX * factor;
            let tempScaleY = scaleY * factor;
            let tempLeft = left * factor;
            let tempTop = top * factor;
            objects[i].scaleX = tempScaleX;
            objects[i].scaleY = tempScaleY;
            objects[i].left = tempLeft;
            objects[i].top = tempTop;
            objects[i].setCoords();
            let zoomPoint = new fabric.Point(
              editorCanvas.width / 2,
              editorCanvas.height / 2
            );
            editorCanvas.zoomToPoint(zoomPoint, factor);
            editorCanvas.renderAll();
            editorCanvas.calcOffset();
          }
        }

        /* 同步放大 */
        if (factor > 1 && zoomCounter < 100) {
          this.zoomCounter += 20;
          editorCanvas.setWidth(cWidth * factor);
          editorCanvas.setHeight(cHeight * factor);
          const objects = editorCanvas.getObjects();
          for (let i in objects) {
            let scaleX = objects[i].scaleX;
            let scaleY = objects[i].scaleY;
            let left = objects[i].left;
            let top = objects[i].top;
            let tempScaleX = scaleX * factor;
            let tempScaleY = scaleY * factor;
            let tempLeft = left * factor;
            let tempTop = top * factor;
            objects[i].scaleX = tempScaleX;
            objects[i].scaleY = tempScaleY;
            objects[i].left = tempLeft;
            objects[i].top = tempTop;
            objects[i].setCoords();
          }
          let zoomPoint = new fabric.Point(
            editorCanvas.width / 2,
            editorCanvas.height / 2
          );
          editorCanvas.zoomToPoint(zoomPoint, factor);
          editorCanvas.renderAll();
          editorCanvas.calcOffset();
        } else {
          return;
        }
      },

      // 删除当前鼠标活动控件
      deleteText() {
        const obj = editorCanvas.getActiveObject();
        if (obj) {
          editorCanvas.remove(obj);
        }
        editorCanvas.renderAll();
      },

      // 更改字体大小
      changeFontSize(value) {
        let mfontSize = value;
        const obj = editorCanvas.getActiveObject();
        if (obj) {
          obj.set({
            fontSize: mfontSize,
          });
          editorCanvas.renderAll();
        }
        this.templateData.fontSize = mfontSize;
      },

      // 背景颜色
      changeBgColor(value) {
        let mbgColor = value;
        const obj = editorCanvas;
        if (obj) {
          obj.set({
            backgroundColor: mbgColor,
          });
          editorCanvas.renderAll();
        }
        this.templateData.bgColor = mbgColor;
      },

      // 字体颜色
      changeFontColor(value) {
        let mfontColor = value;
        const obj = editorCanvas.getActiveObject();
        if (obj) {
          obj.set({
            fill: mfontColor,
          });
          editorCanvas.renderAll();
        }
        this.templateData.textColor = mfontColor;
      },

      // 对齐方式
      changeTextAlign(value) {
        let mtextAlign = value;
        const obj = editorCanvas.getActiveObject();
        if (obj) {
          obj.set("textAlign", mtextAlign);
          obj.centerH();
          editorCanvas.renderAll();
        }
        this.templateData.horizontalAlign = mtextAlign;
      },

      // 字体粗细
      changefontWeight(value) {
        let mfontWeight = value;
        const obj = editorCanvas.getActiveObject();
        if (obj) {
          obj.set("fontWeight", mfontWeight);
          editorCanvas.renderAll();
        }
        this.templateData.fontWeight = mfontWeight;
      },

      // 字体风格
      changeFontStyle(value) {
        let mfontStyle = value;
        const obj = editorCanvas.getActiveObject();
        if (obj) {
          obj.set("fontStyle", mfontStyle);
          editorCanvas.renderAll();
        }
        this.templateData.fontStyle = mfontStyle;
      },

      // 字体
      changeFontFamily(value) {
        let mfontFamily = value;
        const obj = editorCanvas.getActiveObject();
        if (obj) {
          obj.set("fontFamily", mfontFamily);
          editorCanvas.renderAll();
        }
        this.templateData.fontFamily = mfontFamily;
      },

      // 设置模板画布尺寸
      chooseTemplateSize(value) {
        let mtemplateSzie = value;
        console.log(mtemplateSzie);
        let mwidth = mtemplateSzie.width;
        let mheight = mtemplateSzie.height;
        editorCanvas.setHeight(mheight);
        editorCanvas.setWidth(mwidth);
        editorCanvas.renderAll();
        this.templateData.screenSize = mtemplateSzie;
        this.templateData.screenHeight = mheight;
        this.templateData.screenWidth = mwidth;
      },

      // 文本域输入监听
      changeText() {
        const obj = editorCanvas.getActiveObject();
        let inputText = this.msg;
        if (inputText != null) {
          if (obj) {
            obj.set("text", inputText);
            editorCanvas.renderAll();
          }
        }
        this.templateData.text = inputText;
      },

      //添加文本框
      addTextHandle(actions, action) {
        switch (actions) {
          case "textbox":
            this.addTextObjectHandle(action);
            break;
          case "image":
            this.addImageObjectHandle(action);
            break;
        }
      },

      addTextObjectHandle(action) {
        let textBox;
        let currentOptionCss;
        if (action == "add") {
          currentOptionCss = this.textStyleData;
          textBox = new fabric.Textbox(currentOptionCss.text || "", currentOptionCss);
          editorCanvas.add(textBox).setActiveObject(textBox);
        }
      },

      // 图片预览
      downLoadImage() {
        let base64URl = editorCanvas.toDataURL({
          formart: "png",
          multiplier: 1,
        });
        this.imageBase64 = base64URl;
        this.done = false;
      },
    },

    components: {},
    created() {},
  };
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }
  body {
    font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
  }

  a {
    text-decoration: none
  }

  .el-aside {
    background-color: #F3F3F3;
    color: #333;
    text-align: center;
  }

  .el-main {
    background-color: #EEEEEE;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  .el-main .content-show {
    display: flex;
    flex-direction: column;
  }

  .text-edit h6 {
    height: 40px;
    color: black;
  }

  .text-edit .el-form {
    margin: 15px;
  }


  .btn-delete {
    min-height: 36px;
  }

  .template-content {
    padding: 0px;
    margin: 0px;
  }

  ton-box:hover {
    color: white;
    opacity: 1;
  }

  .templateContent {
    width: 100%;
    padding: 0px;
    background-color: #fff;
  }

  .handleSave {
    width:600px;
    margin: 100px auto;
    display: flex;
    justify-content: space-around;
  }

  .template-upload {
    width: 256px;
    height: 130px;
    border: 2px solid #adadad;
    margin: 10px auto;
    line-height: 130px;
    text-align: center;
    cursor: pointer;
  }
  .template-img {
    width: 300px;
    height: 130px;
    margin: 0px auto;
    line-height: 130px;
    text-align: center;
    cursor: pointer;
  }

  #editorCanvas {
    box-shadow: 0 0 25px #cac6c6;
    width: 100%;
    display: block;
    margin: 15px auto;
    height: 100%;
  }

  .text-setting {
    text-align: center;
    width: 80px;
    font-size: 18px;
    font-weight: 500;
    margin-right:170px;
  }

  .text-edit h4,
  .side-right h4,
  .show h1 {
    text-align: center;
    font-size: 16px;
    color: #585858;
    font-weight: normal;
    margin: 15px auto;
  }

  .show h1 {
    text-align: center;
    color: #585858;
    padding: 15px;
    font-weight: bold;
    font-size: 24px;
    margin: 15px auto;
  }

  .show .show-img .imgBase64 {
    margin: 30px auto 0px auto;
    box-shadow: 0 0 25px #cac6c6;
  }

  .title-setting {
    text-align: center;
    font-size: 18px;
    margin: 30px auto;
    padding: 2px;
  }

  .content-show {
    position: relative;
    height: 667px;
    width: 1000px;
    margin: 0 auto 50px auto;
  }

  .content-show .canvas {
    position: absolute;
    left: 32%;
    top: 5%;
  }

  .content-show .canvas #editorCanvas {
    margin: 0 auto;
    width: 60%;
    justify-content: center;
  }

  .btn-zoom {
    display: inline-block;
    line-height: 1;
    height: 40px;
    width: 104px;
    white-space: nowrap;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    -webkit-transition: 0.1s;
    transition: 0.1s;
    font-weight: 500;
    font-size: 14px;
    border-radius: 4px;
    color: #fff;
    background-color: #6A60E3;
    border-color: #6A60E3;
  }

  .btn-download,
  .btn-save,
  .btn-load,
  .btn-reset {
    display: inline-block;
    line-height: 1;
    height: 40px;
    width: 104px;
    white-space: nowrap;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    -webkit-transition: 0.1s;
    transition: 0.1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
    color: #fff;
    background-color: #6A60E3;
    margin: 10px 0px 0px 10px;
    border-color: #6A60E3;
  }

  .btn-reset {
    height: 40px;
    color: #fff;
    width: 98px;
    background-color: #6A60E3;
    margin: 10px 0px 0px 10px;
    border-color:  #6A60E3;
  }

  .el-form-item {
    margin: 15px auto;
  }

  .el-form {
    height: 70px;
    line-height: 70px;
  }

  .el-header {
    height: 60px;
  }

  .el-form--inline .el-form-item__content {
    margin: 0;
    padding: 0;
    height: 60px;
  }

  .btn_style {
    display: inline-block;
    height: 40px;
    margin-left: 15px;
    width: 120px;
    line-height: 40px;
    white-space: nowrap;
    -webkit-appearance: none;
    text-align: center;
    font-weight: 500;
    background: none;
    padding: 0px 20px 20px;
    font-size: 14px;
    border-radius: 4px;
    color: #fff;
  }

</style>


复制代码
文本属性数据:fontData.js
export const fontFamilies = [
    { label: '宋体', value: "'sans-serif, cursive"  },
    { label: '黑体', value: "'SimHei', cursive" },
    { label: '微软雅黑', value: "'Microsoft Yahei', cursive" },
    { label: '微软正黑体', value: "'Microsoft JhengHei', cursive" },
    { label: '楷体', value: "'KaiTi', cursive" },
    { label: '仿宋', value: "'FangSong', cursive" },
    { label: '苹方', value: "'PingFang SC', cursive" },
    { label: '华文黑体', value: "'STHeiti', cursive" },
    { label: '隶书', value: "'LiSu', cursive" },
    { label: '思源黑体', value: "'Source Han Sans CN', cursive" },
    { label: 'Bebas Neue', value: "'Bebas Neue', cursive" },
    { label: 'Caveat', value: "'Caveat', cursive" },
    { label: 'Courgette', value: "'Courgette', cursive" },
    { label: 'Dancing Script', value: "'Dancing Script', cursive" },
    { label: 'Indie Flower', value: "'Indie Flower', cursive" },
    { label: 'Kiwi Maru', value: "'Kiwi Maru', serif" },
    { label: 'Lato', value: "'Lato', sans-serif" },
    { label: 'Lexend', value: "'Lexend', sans-serif" },
    { label: 'Lobster', value: "'Lobster', cursive" },
    { label: 'Londrina Solid', value: "'Londrina Solid', cursive" },
    { label: 'Montserrat', value: "'Montserrat', sans-serif" },
    { label: 'New Tegomin', value: "'New Tegomin', serif" },
    { label: 'Nunito', value: "'Nunito', sans-serif" },
    { label: 'Open Sans', value: "'Open Sans', sans-serif" },
    { label: 'Pacifico', value: "'Pacifico', cursive" },
    { label: 'Permanent Marker', value: "'Permanent Marker', cursive" },
    { label: 'Roboto', value: "'Roboto', sans-serif" },
    { label: 'Shadows Into Light', value: "'Shadows Into Light', cursive" },
    { label: 'Train One', value: "'Train One', cursive" },
    { label: 'Yatra One', value: "'Yatra One', cursive" }
];

export const fontSizes = [
    { label: '9', value: 9 },
    { label: '10', value: 10 },
    { label: '12', value: 12 },
    { label: '14', value: 14 },
    { label: '16', value: 16 },
    { label: '18', value: 18 },
    { label: '20', value: 20 },
    { label: '24', value: 24 },
    { label: '28', value: 28 },
    { label: '32', value: 32 },
    { label: '36', value: 36 },
    { label: '40', value: 40 },
    { label: '42', value: 42 },
    { label: '50', value: 50 },
    { label: '60', value: 64 },
    { label: '72', value: 72 },
    { label: '82', value: 82 },
    { label: '90', value: 90 },
    { label: '96', value: 96 }
];

export const fontStyle = [
        { value: 'normal', label: '正常' },
        { value: 'italic', label: '斜体' }
];

export const  fontColor = [
    {  label: '黑色', value: 'block' },
    {  label: '白色', value: 'white' },
    {  label: '红色', value: 'red' },
    {  label: '绿色', value: 'green' },
    {  label: '蓝色', value: 'blue' },
    {  label: '紫色', value: 'purple' }
];

export const fontWeight = [
    { value: 'normal', label: '正常' },
    { value: 'bold',   label: '粗体' },
    { value: 'lighter', label: '细体' },
    { value: '100', label: '100' },
    { value: '200', label: '200' },
    { value: '300', label: '300' },
    { value: '400', label: '400' },
    { value: '500', label: '500' },
    { value: '600', label: '600' },
    { value: '700', label: '700' },
    { value: '800', label: '800' },
    { value: '900', label: '900' }
];

export const backgroundColor = [
    {  label: '黑色', value: 'block' },
    {  label: '白色', value: 'white' },
    {  label: '红色', value: 'red' },
    {  label: '绿色', value: 'green' },
    {  label: '蓝色', value: 'blue' },
    {  label: '紫色', value: 'purple' }
];

export const textAlign = [
    { label: '居中', value: 'center' },
    { label: '两端对齐', value: 'justify' }
/*    { label: '左对齐', value: 'left' },
    { label: '右对齐', value: 'right' },*/
];

复制代码
vue项目main.js:
import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

复制代码
文章分类
前端
文章标签