Effect:
Technology selection
- Vue3
- Element-plus
- Fabric.js
- ES6
The core function
It mainly realizes visual editing, preview, download and other functions of simple pictures on H5 mobile terminal.
- Text editing: the realization of the canvas on the text box to add, font property Settings, style editing, background color personalized Settings, text content Settings, etc.
- Picture upload: Click upload picture to read the picture and add it to the canvas editing area, and set the background picture freely.
- Drawing pictures: to achieve free drawing graphics according to mouse coordinates (currently only rectangle, other similar, can be achieved by their own);
- Delete control: the control in the edit area can be deleted freely;
- Preview picture: after editing, you can preview the effect of the picture you edited and display it 100% on the right side;
- Download pictures: can download edited pictures;
- Canvas scaling: The canvas can be zoomed in or out, and the contents on the canvas can be zoomed in synchronously.
- One-click cleanup: Resets the canvas to one-click cleanup;
- .
At present, only the above functions are realized, and will be improved and updated in the future
code
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')"
>Add text field</el-button>
<el-button class="el-icon-plus btn_style" @click="imgDraw" >
<input type="file" accept="image/*"
style="display:none"
id="uploadfile"
@change="uploadFile" />To upload pictures</el-button>
<el-button class="el-icon-edit btn_style"
@click="initD"
>The paint system</el-button>
<el-button
class="btn-delete btn_style el-icon-delete"
@click="deleteText"
>Delete control</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 ? 'Expand Settings' :' Fold Settings '"
>
<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="Text content:">
<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="Font:" label-width="82px">
<el-select v-model="fontFamilies.value"
placeholder="Please select font"
@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="Font color:" >
<el-select v-model="fontColor.value"
placeholder="Please select font color"
@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="Font size:" >
<el-select v-model="fontWeight.value"
placeholder="Please select font size"
@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="Font Style:" >
<el-select v-model="fontStyle.value"
placeholder="Please select font style"
@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="Font size:" >
<el-select v-model="fontSizes.value"
placeholder="Select font size"
@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="Alignment:" >
<el-select v-model="textAlign.value"
@change="changeTextAlign"
placeholder="Select alignment">
<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="Background color:" >
<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">The preview image</el-button>
<el-button type="primary" class="btn-download" @click="downLoad">Download the pictures</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">Heavy set</el-button>
</el-form>
</el-main>
<el-aside :width="isCollapsed ? '30px' : '375px'">
<div
@click="closeSetting"
class="title-setting"
:tipTitle="isCollapsed ? 'Expand Settings' :' Fold Settings '"
>
<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.// Template images save arrays
templateImgs: [].zoomCounter: 100.tipTitle: "".imageBase64: "".isCollapsed: false.backColor: "#eec5c5".backGroundStatus: false.bgcolor: "#ff0000".itemWidth: "230px".done: false.// Text control properties
textStyleData: {
type: "editText".text: "Double click edit 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 Visual Editing".title: "Text Settings".showTitle:"100% preview".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("You hit template save");
let base64URl = editorCanvas.toDataURL({
formart: "jpg".multiplier: 1}); },addTemplates() {
console.log("Add template");
},
initD() {
// Listen for mouse clicks
const obj = editorCanvas.getActiveObject();
editorCanvas.on("mouse:down".(options) = > {
// Record the starting point of the current mouse
if(! obj) {this.mouseFrom.x = options.e.clientX - editorCanvas._offset.left;
this.mouseFrom.y = options.e.clientY - editorCanvas._offset.top; }});// Monitor mouse movement
editorCanvas.on("mouse:move".(options) = > {
// Record the end coordinates of the current mouse movement
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;
},
// Draw a rectangle
drawRect() {
// Calculate the length and width of the rectangle
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); },// Initialize the template to edit the canvas
initeditorCanvas() {
editorCanvas = new fabric.Canvas("editorCanvas", {
devicePixelRatio: true.width: "375".height: "667".originX: "center".originY: "center".backgroundColor: "#ffffff".transparentCorners: false}); editorCanvas.preserveObjectStacking =true;
},
// Fold up the text Settings
closeSetting() {
this.isCollapsed = !this.isCollapsed;
},
// Load the image
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 the image
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 = "Pictures. PNG";
link.href = dataURL;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
},
// Empty the canvas
resetCanvas() {
let children = editorCanvas.getObjects();
if (children.length > 0) { editorCanvas.remove(... children); } editorCanvas.setBackgroundColor("#fff");
},
/ / zoom
zoomIt(factor) {
let zoomCounter = this.zoomCounter;
let cWidth = editorCanvas.width;
let cHeight = editorCanvas.height;
/* Synchronize shrink */
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(); }}/* Sync zoom */
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; }},// Delete the current mouse active control
deleteText() {
const obj = editorCanvas.getActiveObject();
if (obj) {
editorCanvas.remove(obj);
}
editorCanvas.renderAll();
},
// Change the font size
changeFontSize(value) {
let mfontSize = value;
const obj = editorCanvas.getActiveObject();
if (obj) {
obj.set({
fontSize: mfontSize,
});
editorCanvas.renderAll();
}
this.templateData.fontSize = mfontSize;
},
// Background color
changeBgColor(value) {
let mbgColor = value;
const obj = editorCanvas;
if (obj) {
obj.set({
backgroundColor: mbgColor,
});
editorCanvas.renderAll();
}
this.templateData.bgColor = mbgColor;
},
// Font color
changeFontColor(value) {
let mfontColor = value;
const obj = editorCanvas.getActiveObject();
if (obj) {
obj.set({
fill: mfontColor,
});
editorCanvas.renderAll();
}
this.templateData.textColor = mfontColor;
},
// Alignment
changeTextAlign(value) {
let mtextAlign = value;
const obj = editorCanvas.getActiveObject();
if (obj) {
obj.set("textAlign", mtextAlign);
obj.centerH();
editorCanvas.renderAll();
}
this.templateData.horizontalAlign = mtextAlign;
},
// Font size
changefontWeight(value) {
let mfontWeight = value;
const obj = editorCanvas.getActiveObject();
if (obj) {
obj.set("fontWeight", mfontWeight);
editorCanvas.renderAll();
}
this.templateData.fontWeight = mfontWeight;
},
// Font style
changeFontStyle(value) {
let mfontStyle = value;
const obj = editorCanvas.getActiveObject();
if (obj) {
obj.set("fontStyle", mfontStyle);
editorCanvas.renderAll();
}
this.templateData.fontStyle = mfontStyle;
},
/ / font
changeFontFamily(value) {
let mfontFamily = value;
const obj = editorCanvas.getActiveObject();
if (obj) {
obj.set("fontFamily", mfontFamily);
editorCanvas.renderAll();
}
this.templateData.fontFamily = mfontFamily;
},
// Set the template canvas size
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;
},
// Text field input listener
changeText() {
const obj = editorCanvas.getActiveObject();
let inputText = this.msg;
if(inputText ! =null) {
if (obj) {
obj.set("text", inputText); editorCanvas.renderAll(); }}this.templateData.text = inputText;
},
// Add a text box
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); }},// Image preview
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.1 s;
transition: 0.1 s;
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.1 s;
transition: 0.1 s;
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>
Copy the codeText attribute data: fontdata.js
export const fontFamilies = [
{ label: '宋体'.value: "'sans-serif, cursive" },
{ label: 'bold'.value: "'SimHei', cursive" },
{ label: Microsoft Yahei.value: "'Microsoft Yahei', cursive" },
{ label: 'Microsoft in boldface'.value: "'Microsoft JhengHei', cursive" },
{ label: 'regular script'.value: "'KaiTi', cursive" },
{ label: 'imitation song dynasty style typeface'.value: "'FangSong', cursive" },
{ label: 'apple party'.value: "'PingFang SC', cursive" },
{ label: 'Chinese bold'.value: "'STHeiti', cursive" },
{ label: 'official script'.value: "'LiSu', cursive" },
{ label: 'Siyuan Black body'.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: The '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: 'normal' },
{ value: 'italic'.label: 'italics'}];export const fontColor = [
{ label: 'black'.value: 'block' },
{ label: 'white'.value: 'white' },
{ label: 'red'.value: 'red' },
{ label: 'green'.value: 'green' },
{ label: 'blue'.value: 'blue' },
{ label: 'purple'.value: 'purple'}];export const fontWeight = [
{ value: 'normal'.label: 'normal' },
{ value: 'bold'.label: 'bold' },
{ value: 'lighter'.label: 'the thin body' },
{ 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: 'black'.value: 'block' },
{ label: 'white'.value: 'white' },
{ label: 'red'.value: 'red' },
{ label: 'green'.value: 'green' },
{ label: 'blue'.value: 'blue' },
{ label: 'purple'.value: 'purple'}];export const textAlign = [
{ label: 'center'.value: 'center' },
{ label: 'Align both ends'.value: 'justify' }
/ * {value: label: 'the left', 'left'}, {label: 'right alignment, value:' right '}, * /
];
Copy the codeVue project 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')
Copy the code