本文介绍了JavaScript中阻止键盘默认事件、GTP相关概念、CSS3图形变换应用、ECharts雷达图交互、ElementUI输入组件、Vuex状态管理以及数组操作技巧，包括图片尺寸获取和ElementUI照片墙的回显。
1、阻止键盘默认事件
import screenfull from 'screenfull'
screenfull.toggle();
created() {
let that = this;
window.onresize = function () {
navigator.keyboard.lock(["Escape", "F11"]);
};
},2、gtp
3、css 图形变换 transform
CSS3 transform变换、翻转图片示例-CSDN博客
4、雷达绑定点击方法
为echarts 雷达图添加点击事件_echarts-for-react radar.indicator. name 添加标签-CSDN博客
5、雷达图例位置及样式参数
echarts legend修改形状_echarts legend形状-CSDN博客
6、带搜索建议的输入框模糊查询
Element UI input输入框实现模糊查询_element ui input模糊搜索-CSDN博客
7、vuex状态管理
vuex的超详细讲解和具体使用细节记录（篇幅略长，建议收藏） - 知乎
8、数组求和
arraySum(arr) {
return arr.reduce(
(accumulator, currentValue) => accumulator + currentValue,
0
);
},9、根据数组依次求和得到新数组
sumArray(arr) {
return arr.reduce((result, value, index) => {
if (index > 0) {
result.push(result[index - 1] + value);
}
return result;
}, [arr[0]]);
}10、获取图片宽高
// 上传图片
handleAvatarSuccess(res, file) {
let that=this;
console.log(that.fileList,'filList');
that.getImageSize(res.url, function (size) {
if (size) {
that.addform.examImgList.push({
path:res.fileName,
wide: size.width,
high: size.height
});
}
});
},
getImageSize(url, callback) {
var img = new Image();
img.onload = function () {
callback({ width: img.width, height: img.height });
};
img.onerror = function () {
callback(null);
};
img.src = url;
},11、elementUI照片墙回显
用fileList回显
12、elementUI照片墙上传闪动
//上传图片闪动
::v-deep .el-upload-list__item.is-ready {
display: none;
}
//失败进度动画闪动
::v-deep .el-upload-list__item {
transition: none !important;
}13、canvas图片添加注释、划线
<template>
<div class="outBox">
<div style="position: absolute" class="back">
<img src="@/assets/images/backs.png" alt="" />
</div>
<div class="blockInfo">
<div class="firInfo">
<div class="toptitle toptitleBox">
<div>题块名称</div>
<div>阅卷进度</div>
</div>
<!-- :class="clickIndex == index&&item.progress<100 ? 'blockListClick' : (clickIndex != index&&item.progress==100)?'blockListClickS':''" -->
<div
class="blockList"
:class="clickIndex == index? 'blockListClick' : ''"
v-for="(item, index) in blockList"
:key="index"
@click="changeBlock(item, index)"
>
<el-tooltip
class="item"
effect="dark"
:content="item.locationName"
placement="right"
>
<el-button class="blockBtn">{{ item.locationName }}</el-button>
</el-tooltip>
<!-- </div> -->
<div class="itemProgress">{{ item.progress }}%</div>
</div>
</div>
</div>
<div class="blockInfo checkTest">
<span style="position: absolute; display: inline-block; width: 80px"
>该题分页</span
>
<el-pagination
small
layout="prev, pager, next"
@current-change="changeNum"
:page-size="1"
:current-page="topNowSelPage"
:total="topTotal"
style="width: 50%; margin-left: 80px; position: absolute"
>
</el-pagination>
<canvas
height="570"
id="canvas"
ref="canvas"
width="540"
style="margin-top: 26px"
></canvas>
</div>
<div class="blockInfo paginationg">
<div class="toptitle" >
切换学生
<div style="width: 200px; margin: auto" class="pageStyle">
<el-pagination
layout="prev, pager, next"
:page-size="1"
:current-page="nowSelPage"
@current-change="handleCurrentChange"
:total="total"
>
</el-pagination>
</div>
</div>
<div style="display: flex; align-items: center; padding-right: 5px">
<span
style="
display: inline-block;
width: 130px;
text-align: center;
color: #1296db;
"
>该题得分</span
>
<el-input v-model="subData.score" placeholder="输入分数"></el-input>
</div>
<div class="tool-container" style="margin-top: 35px">
<div class="icon-div icon" @click="isShowDrawPane = !isShowDrawPane">
<div class="iconfont icon-huaban" style="color: #1296db"></div>
</div>
<div class="icon-div icon" @click="filterObject('erase')">
<div class="iconfont icon-xiangpica" style="color: #1296db"></div>
</div>
<div class="icon-div icon" @click="filterObject('undefined')">
<div class="iconfont icon-quxian" style="color: #1296db"></div>
</div>
<div class="icon-div icon" @click="filterObject('line')">
<div class="iconfont icon--_zhixian" style="color: #1296db"></div>
</div>
<div class="icon-div icon" @click="filterObject('arrows')">
<div class="iconfont icon-jiantou" style="color: #1296db"></div>
</div>
<div class="icon-div icon" @click="filterObject('rect')">
<div class="iconfont icon-juxing" style="color: #1296db"></div>
</div>
<div class="icon-div icon" @click="filterObject('checkDui')">
<i class="el-icon-folder-checked" style="color: #1296db"></i>
</div>
<div class="icon-div icon" @click="filterObject('text')">
<div class="iconfont icon-wenben" style="color: #1296db"></div>
</div>
<div class="icon-div icon" @click="clearCanvas()">
<div class="iconfont icon-shanchu" style="color: #1296db"></div>
</div>
<div class="icon-div icon" @click="redo()">
<!-- <svg-icon :icon-class="historyImageData.length > 0 ? 'redo' : 'grey-redo' " scale="4"></svg-icon> -->
<div class="iconfont icon-chehui" style="color: #1296db"></div>
</div>
<div class="icon-div icon" @click="cancelRedo()">
<!-- <svg-icon :icon-class="newHistoryImageData.length > 0 ? 'cancelRedo' : 'grey-cancelRedo' " scale="4"></svg-icon> -->
<div class="iconfont icon-fanchehui" style="color: #1296db"></div>
</div>
<!-- <div class="icon-div icon" @click="downLoad()">
<i class="el-icon-s-claim" style="color: #1296db"></i>
</div> -->
<div class="drawPane" v-show="isShowDrawPane">
<div @click="isShowDrawPane = false" class="closeIcon">
<i class="el-icon-circle-close" style="color: #1296db"></i>
</div>
<div class="colorClass">画笔大小</div>
<input
type="range"
id="lwRange"
min="1"
max="10"
value="1"
@change="LwRangeBtn"
/>
<div class="colorClass">画笔颜色</div>
<input type="color" id="lcolor" value="#f22f2f" @change="LcolorBtn" />
</div>
</div>
<el-button
type="primary"
style="width: 100%; margin-top: 15px"
@click="submitBtn"
:disabled="loading"
>点击保存</el-button
>
<textarea
id="textarea"
name="textBox"
cols="9"
rows="1"
class="text-style"
v-show="isShowText"
></textarea>
</div>
</div>
</template>
<script>
import {
getBlockList,
getBlockListInfo,
postBlockListInfo,
} from "@/api/checkBlock/index";
import pickerColor from "./pickerColor.vue";
export default {
data() {
return {
topTotal: 0,
total: 0,
blockList: [],
exId: "",
clickIndex: 0,
isShowDrawPane: false,
canvas: null,
context: null,
//线宽
lwidth: 2,
//画笔颜色
lcolor: "#f22f2f",
textColor: "#f22f2f",
// 根路径
baseURL: process.env.VUE_APP_BASE_API,
//维护绘画状态的数组
paintTypeArr: {
painting: false,
erase: false,
line: false,
arrows: false,
rect: false,
circle: false,
text: false,
checkDui: false,
},
//最近一次的canvas图片的数据
imageData: null,
//是否显示文字编写框
isShowText: false,
//保存画布图片历史的数据
historyImageData: [],
//保存已被撤销的历史画布图片数据
newHistoryImageData: [],
socket: null,
img: null,
filterType: undefined,
loading: false,
queryParams: {
pageSize: 1,
pageNum: 1,
},
nowBlockPageInfo: [],
nowCanvasImg: "",
subData: [],
nowSelPage: 1,
nowMouseEventX: 0,
nowMouseEventY: 0,
nowBlockName: "",
topNowSelPage: 1,
};
},
components: { pickerColor },
watch: {
color() {
this.context.strokeStyle = this.color;
// this.pickerVisible = false//颜色改变后消失
},
topNowSelPage(newVal, oldVal) {
let that = this;
that.init();
that.downLoad(oldVal);
console.log(that.nowBlockPageInfo[0].paths, "切换顶部页码");
if (that.nowBlockPageInfo[0].paths[newVal - 1].length > 70) {
that.nowCanvasImg = that.nowBlockPageInfo[0].paths[newVal - 1];
} else {
that.nowCanvasImg =
that.baseURL + that.nowBlockPageInfo[0].paths[newVal - 1];
}
},
},
methods: {
changeNum(val) {
this.topNowSelPage = val;
},
keyDowm() {
let that = this;
that.canvasDraw();
document.onkeydown = function (e) {
var keyNum = window.event ? e.keyCode : e.which;
if (that.filterType == "checkDui") {
if (keyNum == 68) {
that.drawText(
that.nowMouseEventX - 7,
that.nowMouseEventY - 13,
"√",
"35"
);
setTimeout(() => {
that.canvasDraw();
}, 20);
}
if (keyNum == 67) {
that.drawText(
that.nowMouseEventX - 7,
that.nowMouseEventY - 13,
"x",
"35"
);
setTimeout(() => {
that.canvasDraw();
}, 20);
}
}
};
},
handleCurrentChange(val) {
this.nowSelPage = val;
this.queryParams.pageNum = val;
this.topNowSelPage = 1;
this.init();
this.getBlockInfo(this.exId, this.nowBlockName, this.queryParams);
},
LwRangeBtn() {
this.lwidth = parseInt(document.getElementById("lwRange").value);
},
LcolorBtn() {
this.context.fillStyle = document.getElementById("lcolor").value;
this.context.strokeStyle = document.getElementById("lcolor").value;
this.textColor = document.getElementById("lcolor").value;
},
closeDialog() {
this.$emit("onClose");
},
dataURLtoFile(dataURI, type) {
let binary = atob(dataURI.split(",")[1]);
let array = [];
for (let i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], { type: type });
},
//初始化画布
init() {
let that = this;
that.$nextTick(() => {
that.canvas = document.getElementById("canvas");
that.context = that.canvas.getContext("2d");
that.imageData && that.context.putImageData(that.imageData, 0, 0);
let img = new Image();
img.setAttribute("crossOrigin", "anonymous");
let url = that.nowCanvasImg; //重点之重，这是要编辑的图片base64，如图一
img.src = url;
img.onload = () => {
if (img.complete) {
that.canvas.setAttribute("width", img.width);
that.canvas.setAttribute("height", img.height);
that.context.drawImage(img, 0, 0, img.width, img.height);
that.img = img;
that.textColor = "#f22f2f";
that.context.fillStyle = "#f22f2f";
that.context.strokeStyle = "#f22f2f";
}
this.listen();
};
this.listen();
});
},
//监听鼠标,用于画笔任意绘制和橡皮擦
listen() {
this.$nextTick(() => {
let self = this;
let lastPoint = { x: undefined, y: undefined };
let rect = self.canvas.getBoundingClientRect();
var scaleX = self.canvas.width / rect.width;
var scaleY = self.canvas.height / rect.height;
let textPoint = { x: undefined, y: undefined };
self.canvas.onmousedown = function (e) {
self.paintTypeArr["painting"] = true;
let x1 = e.offsetX + 355;
let y1 = e.offsetY + 92;
x1 -= rect.left;
y1 -= rect.top;
lastPoint = { x: x1 * scaleX, y: y1 * scaleY };
if (self.paintTypeArr["text"]) {
let textarea = document.getElementById("textarea");
if (self.isShowText) {
let textContent = textarea.value;
self.isShowText = false;
textarea.value = "";
self.drawText(
textPoint.x - 3,
textPoint.y - 7,
textContent,
"18"
);
} else if (!self.isShowText) {
self.isShowText = true;
textarea.style.left = lastPoint.x + 350 + "px";
textarea.style.top = lastPoint.y + 79 + "px";
textarea.style.color = self.textColor;
textPoint = { x: lastPoint.x, y: lastPoint.y };
}
}
if (self.paintTypeArr["erase"]) {
let ctx = self.context;
ctx.save();
ctx.globalCompositeOperation = "destination-out";
ctx.beginPath();
let radius = self.lwidth / 2 > 5 ? self.lwidth / 2 : 5;
ctx.arc(lastPoint.x, lastPoint.y, radius, 0, 2 * Math.PI);
ctx.clip();
ctx.clearRect(0, 0, self.canvas.width, self.canvas.height);
ctx.restore();
}
self.canvasDraw();
var thee = e ? e : window.event;
self.stopBubble(thee);
};
self.canvas.onmousemove = function (e) {
let x2 = e.offsetX + 355;
let y2 = e.offsetY + 92;
x2 -= rect.left;
y2 -= rect.top;
let newPoint = { x: x2 * scaleX, y: y2 * scaleY };
self.nowMouseEventX = e.offsetX;
self.nowMouseEventY = e.offsetY;
if (self.isPainting()) {
self.drawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y);
lastPoint = newPoint;
}
if (self.paintTypeArr["erase"]) {
if (!lastPoint.x && !lastPoint.y) {
return;
}
self.handleErase(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y);
lastPoint = newPoint;
}
if (self.paintTypeArr["line"]) {
// self.clearCanvas()
self.imageData && self.context.putImageData(self.imageData, 0, 0);
self.drawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y);
}
if (self.paintTypeArr["arrows"]) {
// self.clearCanvas()
self.imageData && self.context.putImageData(self.imageData, 0, 0);
self.drawArrow(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y);
}
if (self.paintTypeArr["rect"]) {
// self.clearCanvas()
self.imageData && self.context.putImageData(self.imageData, 0, 0);
self.drawRect(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y);
}
if (self.paintTypeArr["circle"]) {
self.imageData && self.context.putImageData(self.imageData, 0, 0);
self.drawCircle(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y);
}
if (self.paintTypeArr["checkDui"]) {
// self.drawText(self.nowMouseEventX, self.nowMouseEventY, "√");
self.keyDowm();
self.canvasDraw();
// // document.onkeydown = function (e) {
// // var keyNum = window.event ? e.keyCode : e.which;
// // if (that.filterType == "checkDC") {
// // if (keyNum == 68) {
// // self.drawText(that.nowMouseEventX, that.nowMouseEventY, '√');
// self.canvasDraw();
// // }
// // if (keyNum == 67) {
// // self.drawText(that.nowMouseEventX,that.nowMouseEventY, 'x');
// // self.canvasDraw();
// // }
// // }
// // };
}
var thee = e ? e : window.event;
self.stopBubble(thee);
};
self.canvas.onmouseup = function () {
lastPoint = { x: undefined, y: undefined };
self.canvasDraw();
self.filterObject(self.filterType);
};
});
},
//更新绘画类型数组paintTypeArr的状态
filterObject(type) {
let that = this;
that.filterType = type;
// if (info&&info=='check') {
// document.addEventListener("keydown", function (e) {
// var keyNum = window.event ? e.keyCode : e.which;
// if (keyNum == 68) {
// that.drawText(that.nowMouseEventX, that.nowMouseEventY + 3, "√");
// }
// if (keyNum == 67) {
// that.drawText(that.nowMouseEventX, that.nowMouseEventY + 3, "×");
// }
// });
// }
if (!type) {
for (const key in that.paintTypeArr) {
that.paintTypeArr[key] = false;
}
} else {
for (const key in that.paintTypeArr) {
key === type
? (that.paintTypeArr[key] = true)
: (that.paintTypeArr[key] = false);
}
}
// console.log(that.paintTypeArr,info, "all");
// if (type == "checkDC") {
// that.keyDowm();
// that.paintTypeArr["painting"] = true;
// }
},
//阻止事件冒泡
stopBubble(evt) {
if (evt.stopPropagation) {
evt.stopPropagation();
} else {
//ie
evt.cancelBubble = true;
}
},
//判断是否是自由绘画模式
isPainting() {
for (let key in this.paintTypeArr) {
if (key !== "painting" && this.paintTypeArr[key]) {
return false;
}
}
if (this.paintTypeArr["painting"]) {
return true;
}
return false;
},
//橡皮擦
handleErase(x1, y1, x2, y2) {
let ctx = this.context;
var asin = radius * Math.sin(Math.atan((y2 - y1) / (x2 - x1)));
var acos = radius * Math.cos(Math.atan((y2 - y1) / (x2 - x1)));
var x3 = x1 + asin;
var y3 = y1 - acos;
var x4 = x1 - asin;
var y4 = y1 + acos;
var x5 = x2 + asin;
var y5 = y2 - acos;
var x6 = x2 - asin;
var y6 = y2 + acos;
ctx.save();
ctx.beginPath();
ctx.globalCompositeOperation = "destination-out";
let radius = this.lwidth / 2 > 5 ? this.lwidth / 2 : 5;
ctx.arc(x2, y2, radius, 0, 2 * Math.PI);
ctx.clip();
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
ctx.restore();
ctx.save();
ctx.beginPath();
ctx.globalCompositeOperation = "destination-out";
ctx.moveTo(x3, y3);
ctx.lineTo(x5, y5);
ctx.lineTo(x6, y6);
ctx.lineTo(x4, y4);
ctx.closePath();
ctx.clip();
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
ctx.restore();
},
drawLine(fromX, fromY, toX, toY) {
let ctx = this.context;
ctx.beginPath();
ctx.lineWidth = this.lwidth;
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.moveTo(fromX, fromY);
ctx.lineTo(toX, toY);
ctx.stroke();
ctx.closePath();
},
drawArrow(fromX, fromY, toX, toY) {
let ctx = this.context;
var headlen = 10;
var theta = 45;
var arrowX, arrowY;
var angle = (Math.atan2(fromY - toY, fromX - toX) * 180) / Math.PI;
var angle1 = ((angle + theta) * Math.PI) / 180;
var angle2 = ((angle - theta) * Math.PI) / 180;
var topX = headlen * Math.cos(angle1);
var topY = headlen * Math.sin(angle1);
var botX = headlen * Math.cos(angle2);
var botY = headlen * Math.sin(angle2);
ctx.beginPath();
ctx.moveTo(fromX, fromY);
ctx.lineTo(toX, toY);
arrowX = toX + topX;
arrowY = toY + topY;
ctx.moveTo(arrowX, arrowY);
ctx.lineTo(toX, toY);
arrowX = toX + botX;
arrowY = toY + botY;
ctx.lineTo(arrowX, arrowY);
ctx.stroke();
ctx.closePath();
},
drawRect(topLeftX, topLeftY, botRightX, botRightY) {
let ctx = this.context;
ctx.beginPath();
ctx.strokeRect(
topLeftX,
topLeftY,
Math.abs(botRightX - topLeftX),
Math.abs(botRightY - topLeftY)
);
ctx.closePath();
},
drawCircle(circleX, circleY, endX, endY) {
let ctx = this.context;
let radius = Math.sqrt(
(circleX - endX) * (circleX - endX) +
(circleY - endY) * (circleY - endY)
);
ctx.beginPath();
ctx.arc(circleX, circleY, radius, 0, Math.PI * 2, true);
ctx.stroke();
},
drawText(startX, startY, content, num) {
let ctx = this.context;
ctx.save();
ctx.beginPath();
ctx.font = num + "px orbitron";
ctx.textBaseline = "top";
ctx.fillText(content, parseInt(startX), parseInt(startY));
ctx.restore();
ctx.closePath();
},
clearCanvas() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.init();
},
canvasDraw() {
this.imageData = this.context.getImageData(
0,
0,
this.canvas.width,
this.canvas.height
);
this.historyImageData.push(this.imageData);
},
redo() {
let historyImageData = this.historyImageData;
let newHistoryImageData = this.newHistoryImageData;
if (historyImageData.length > 0) {
let hisImg = historyImageData.pop();
newHistoryImageData.push(hisImg);
if (historyImageData.length === 0) {
this.imageData = null;
this.clearCanvas();
this.init();
} else {
this.context.putImageData(
historyImageData[historyImageData.length - 1],
0,
0
);
}
}
},
//反撤销
cancelRedo() {
if (this.newHistoryImageData.length > 0) {
const newHisImg = this.newHistoryImageData.pop();
this.imageData = newHisImg;
this.context.putImageData(newHisImg, 0, 0);
this.historyImageData.push(newHisImg);
}
},
//保存图片
downLoad(val) {
const imgUrl = this.canvas.toDataURL(" image/jpeg",1);
const a = document.createElement("a");
a.href = imgUrl;
this.subData.paths[val - 1] = imgUrl.toString();
a.download = "绘图保存记录" + new Date().getTime();
a.target = "_blank";
document.body.appendChild(a);
// document.body.removeChild(a);
},
submitBtn() {
this.downLoad(this.topNowSelPage);
//防止多次点击提交
this.loading = true;
setTimeout(() => {
this.loading = false;
}, 3000);
// let fileObj = {
// relativeType: 3,
// name: "编辑图片",
// };
// let canvas = document.getElementById("canvas");
// var file = canvas.toDataURL("image/png");
// var formData = new FormData();
// let blob = this.dataURLtoFile(file, "image/jpg");
// let fileOfBlob = new File([blob], new Date() + ".jpg");
// formData.append("file", fileOfBlob);
// formData.append("relativeType", 3);
// formData.append("name", "编辑图片");
//上传图片后提交保存，根据实际开发需求编写
// console.log(file.toString());
if (this.subData.score && this.subData.score.length > 0) {
this.subData.name = this.subData.blockName;
this.subData.base64Lists = this.subData.paths;
postBlockListInfo(this.subData).then((res) => {
this.$modal.msgSuccess("保存成功！");
this.getList(this.clickIndex);
});
} else {
this.$modal.msgError("未填写分数");
}
},
changeBlock(item, index) {
this.clickIndex = index;
this.queryParams.pageNum = 1;
this.topNowSelPage = 1;
this.nowSelPage = 1;
this.nowBlockName = item.locationName;
this.getBlockInfo(this.exId, item.locationName, this.queryParams);
this.subData = item;
},
getList(val) {
let that = this;
getBlockList(that.exId).then((res) => {
that.blockList = res.data;
if (res.data && res.data.length > 0) {
// let newArr=res.data.map(item=>{
// return item.progress==100
// })
// if(!newArr.includes(false)){
// window.history.back()
// }
that.nowBlockName = res.data[val].locationName;
that.getBlockInfo(
that.exId,
res.data[val].locationName,
that.queryParams
);
}
});
},
getBlockInfo(id, name, params) {
let that = this;
getBlockListInfo(id, name, params).then((res) => {
that.nowBlockPageInfo = res.data.records;
that.subData = res.data.records[0];
that.topTotal = res.data.records[0].paths.length;
that.total = res.data.total;
res.data.records[0].paths.map((item) => {
console.log(that.baseURL + item, "切换学生");
});
that.nowCanvasImg =
that.baseURL + res.data.records[0].paths[that.topNowSelPage - 1];
that.init();
window.onresize = function () {
that.init();
};
});
},
},
mounted() {
let self = this;
self.exId = self.$route.query.id;
self.getList(this.clickIndex);
self.init();
},
beforeMount() {},
};
</script>
<style lang="scss" scoped>
.outBox {
background-color: #f4f4f4;
margin: 0;
padding: 0;
width: 100%;
height: 95%;
display: flex;
justify-content: space-between;
.back {
display: flex;
top: -50px;
z-index: 9999999999999;
img {
width: 50px;
}
}
.blockInfo {
width: 15%;
background-color: #fff;
height: 100%;
overflow: auto;
.toptitle,
.toptitleBox {
font-weight: bold;
line-height: 30px;
padding: 20px 50px;
font-size: 20px;
text-align: center;
}
.toptitleBox {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 10px 20px;
font-weight: normal;
font-size: 16px;
}
.firInfo {
max-height: 500px;
overflow: auto;
}
.blockList {
width: 91%;
margin: auto;
padding: 10px 10px;
font-size: 20px;
color: #747070;
display: flex;
justify-content: space-between;
cursor: pointer;
align-items: center;
.blockBtn {
border: none;
background-color: transparent;
font-size: 20px;
color: #747070 !important;
overflow: hidden;
width: 40%;
white-space: nowrap;
text-overflow: ellipsis;
text-align: left;
}
}
.blockList:hover {
background-color: #f5f7fa;
.blockBtn {
border: none;
background-color: transparent;
font-size: 20px;
overflow: hidden;
width: 40%;
white-space: nowrap;
text-overflow: ellipsis;
text-align: left;
}
}
.blockListClick {
background-color: #f5f7fa;
color: #62affc;
.blockBtn {
border: none;
background-color: transparent;
font-size: 20px;
color: #62affc !important;
text-align: left;
}
}
.blockListClickS{
color: #c8cccf;
cursor:no-drop;
.blockBtn {
border: none;
background-color: transparent;
font-size: 20px;
color: #c8cccf !important;
text-align: left;
}
}
}
.checkTest {
width: 65%;
margin: auto;
height: 100%;
overflow: auto;
padding: 20px;
// display: flex;
// justify-content: center;
}
}
</style>
<style lang="scss" scoped>
.tool-container {
width: 100%;
border: 1px solid #62affc;
border-radius: 10px;
display: flex;
justify-content: space-around;
position: relative;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
align-items: center;
height: 40px;
}
.drawPane {
padding: 10px 10px;
height: 130px;
position: absolute;
top: 20px;
left: 0px;
border-radius: 5px;
border: 2px solid #f4f4f4;
background-color: #f4f4f4;
z-index: 999;
.closeIcon {
position: absolute;
top: 4px;
right: 4px;
}
}
.close-draw-pane {
position: absolute;
right: 5px;
top: 5px;
}
// .icon-div {
// margin: 4px 12px;
// }
.icon :hover {
cursor: pointer;
}
input::-webkit-slider-runnable-track {
background-color: orangered;
height: 4px;
border-radius: 5px;
}
input::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: orange;
cursor: pointer;
margin-top: -4px;
}
.text-style {
// float: left;
position: absolute;
font: 14px orbitron;
word-break: break-all;
background-color: #fff;
position: absolute;
top: 160px;
}
.colorClass {
color: orange;
}
.svg-icon {
font-size: 24px;
}
.pageStyle .el-pagination {
white-space: wrap;
}
</style>014、强制刷新
that.$forceUpdate();
15、富文本封装
vue2+quill封装富文本编辑器_vue2 quill富文本编辑器-CSDN博客
16、富文本封装vue页面
1、npm安装 "vue-ueditor-wrap"
2、全局引入 main.js
// 一个“包装”了 UEditor 的 Vue 组件
import VueUeditorWrap from 'vue-ueditor-wrap';
// 在 main.js 里将它注册为全局组件
Vue.component('vue-ueditor-wrap', VueUeditorWrap);3、组件封装 component
组件里新建文件夹 UEditor / index.vue
<template>
<div>
<script :id="id" :defaultMsg="writeMsg" type="text/plain" ></script>
</div>
</template>
<script>
//引入编辑器。我都是在子组件里面加的，我看有的说是在main.js里面添加，这样的话所有页面都引入了这个插件就很必要了。
import '../../../public/UEditor/ueditor.config.js'
import '../../../public/UEditor/ueditor.all.js'
import '../../../public/UEditor/lang/zh-cn/zh-cn.js'
//引入公式插件。我们也是通过import的方式加进来的。
import '../../../public/UEditor/kityformula-plugin/addKityFormulaDialog.js'
import '../../../public/UEditor/kityformula-plugin/getKfContent.js'
import '../../../public/UEditor/kityformula-plugin/defaultFilterFix.js'
export default {
name: "UEditor",
props: {
id: {
type: String
},
config: {
type: Object
},
writeMsg:{
type: String
}
},
// components:{util},
data() {
return {
editor: null
}
},
mounted() {
//初始化UE
this.$nextTick(()=>{//避免在切换到填空题再切回来找不到dom而报offsetWidth undefined
const _this = this;
this.editor = UE.delEditor(this.id);
this.editor = UE.getEditor(this.id,this.config);
this.editor.addListener("ready",function(){
_this.isinit=true;
})
})
},
destoryed() {
this.editor.destory();
},
methods:{
getUEContent: function(){
return this.editor.getContent();
},
getContentTxt: function(){
return this.editor.getContentTxt();
},
setUEContent: function(val){
if(this.editor && this.editor.isReady){
const _this = this;
setTimeout(function(){//过段时间在加载
_this.editor.setContent(val);
},500);
return;
}else{
const _this = this;
setTimeout(function(){//过段时间在加载
_this.setUEContent(val);
},500)
}
},
}
}
</script>4、按照组件index文件里的路径引入js文件
注释：资源文件夹中下载
5、js文件存放截图 先放在1 不行再放在2文件夹下
6、修改富文本内功能模块 注释解开就行
7、使用方法
//标签内使用
<vue-ueditor-wrap
v-if="showEditor"
v-model="form.topic"
:config="editorConfig"
:editor-id="'editor-demo-0'+editorIndex"
></vue-ueditor-wrap>
//配置项
editorConfig: {
UEDITOR_HOME_URL: "/UEditor/", // 访问 UEditor 静态资源的根路径，可参考常见问题1
serverUrl: "",
},
//说明
editor-id必须唯一 可使用变量或id17、input框判断只输入浮点数
inputRule(value) {
const regex = /^\d+(\.\d*)?$/;
// 使用正则表达式来判断是否为数字，包括整数和小数
// const regex = /(^[1-9]\d*\.\d+$|^0\.\d+$|^0$)/
// 如果输入值不符合正则表达式，则将其设置回上一个合法的值
if (!regex.test(value)) {
this.timeForm.duration = this.timeForm.duration.substring(
0,
this.timeForm.duration.length - 1
);
}
},
// v-model绑定值
// this.timeForm.duration<el-input v-model="timeForm.duration" @input="inputRule"> </el-input>
扫一扫
2399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
