|
|
@@ -0,0 +1,374 @@
|
|
|
+<!-- eslint-disable vue/no-v-html -->
|
|
|
+<template>
|
|
|
+ <div class="matching-preview">
|
|
|
+ <ul ref="list" class="option-list">
|
|
|
+ <li v-for="(item, i) in data.option_list" :key="i" class="list-item">
|
|
|
+ <div
|
|
|
+ v-for="({ content, mark }, j) in item"
|
|
|
+ :key="mark"
|
|
|
+ :class="['item-wrapper', `item-${mark}`]"
|
|
|
+ :style="{ cursor: disabled ? 'default' : 'pointer' }"
|
|
|
+ @mousedown="mousedown($event, i, j, mark)"
|
|
|
+ @mouseup="mouseup($event, i, j, mark)"
|
|
|
+ @click="handleClickConnection($event, i, j, mark)"
|
|
|
+ >
|
|
|
+ <span class="content rich-text" v-html="sanitizeHTML(content)"></span>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getMatchingData, svgNS } from '@/views/book/courseware/data/matching';
|
|
|
+
|
|
|
+import PreviewMixin from '../common/PreviewMixin';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'MatchingPreview',
|
|
|
+ mixins: [PreviewMixin],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ data: getMatchingData(),
|
|
|
+ answerList: [], // 答案列表
|
|
|
+ curConnectionPoint: { i: -1, j: -1, mark: '' }, // 当前连线点
|
|
|
+ // 拖拽相关
|
|
|
+ drag: false,
|
|
|
+ mouseEvent: {
|
|
|
+ clientX: 0,
|
|
|
+ clientY: 0,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ 'data.option_list': {
|
|
|
+ handler(val) {
|
|
|
+ this.clearLine();
|
|
|
+ if (!val) return;
|
|
|
+ let list = val.map((item) => {
|
|
|
+ return item.map(({ mark }) => {
|
|
|
+ return { mark, preMark: '', nextMark: '' };
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.$set(this, 'answerList', list);
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ document.addEventListener('click', this.handleEventConnection);
|
|
|
+ document.addEventListener('mousemove', this.documentMousemouse);
|
|
|
+ document.addEventListener('mouseup', this.documentMouseup);
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ document.removeEventListener('click', this.handleEventConnection);
|
|
|
+ document.removeEventListener('mousemove', this.documentMousemouse);
|
|
|
+ document.removeEventListener('mouseup', this.documentMouseup);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /* 用 mouse 事件模拟拖拽 开始*/
|
|
|
+ documentMousemouse(e) {
|
|
|
+ if (!this.drag) return;
|
|
|
+ // 使用 svg 绘制跟随鼠标移动的连接线
|
|
|
+ let svg = document.querySelector('.move-connection');
|
|
|
+ let list = this.$refs.list.getBoundingClientRect(); // 列表的位置
|
|
|
+ let { clientX, clientY } = e;
|
|
|
+ let isLeft = clientX < this.mouseEvent.clientX; // 鼠标是否向左移动
|
|
|
+ // 计算 svg 的宽度，宽度不能超过列表的宽度
|
|
|
+ let width = Math.min(list.width, isLeft ? list.width - clientX + list.left - 1 : clientX - list.left - 1);
|
|
|
+ if (svg) {
|
|
|
+ svg.setAttribute(
|
|
|
+ 'style',
|
|
|
+ `position: absolute; ${isLeft ? 'right: 0;' : 'left: 0;'} width: ${width}px; height: 100%;`,
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ svg = document.createElementNS(svgNS, 'svg');
|
|
|
+ svg.classList.add('move-connection');
|
|
|
+ svg.setAttribute('style', `position: absolute; width: ${width}px; height: 100%;`);
|
|
|
+ let path = document.createElementNS(svgNS, 'path');
|
|
|
+ this.setPathAttr(path);
|
|
|
+ svg.appendChild(path);
|
|
|
+ this.$refs.list.appendChild(svg);
|
|
|
+ }
|
|
|
+ let top = this.mouseEvent.clientY - list.top;
|
|
|
+ let left = isLeft
|
|
|
+ ? this.mouseEvent.clientX - list.left - Math.abs(width - list.width)
|
|
|
+ : this.mouseEvent.clientX - list.left;
|
|
|
+ let mouseX = isLeft ? clientX - list.left - Math.abs(width - list.width) : clientX - list.left;
|
|
|
+ let mouseY = clientY - list.top;
|
|
|
+ let path = svg.querySelector('path');
|
|
|
+ path.setAttribute('d', `M ${left} ${top} L ${mouseX} ${mouseY}`);
|
|
|
+ },
|
|
|
+ documentMouseup() {
|
|
|
+ if (!this.drag) return;
|
|
|
+ this.drag = false;
|
|
|
+ document.querySelector('.move-connection')?.remove();
|
|
|
+ document.body.style.userSelect = 'auto'; // 允许选中文本
|
|
|
+ this.mousePointer = { i: -1, j: -1, mark: '' };
|
|
|
+ this.mouseEvent = { clientX: 0, clientY: 0 };
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 鼠标按下事件，设置当前连线点
|
|
|
+ * @param {PointerEvent} e 事件对象
|
|
|
+ * @param {number} i 选项列表索引
|
|
|
+ * @param {number} j 选项索引
|
|
|
+ * @param {string} mark 选项标识
|
|
|
+ */
|
|
|
+ mousedown(e, i, j, mark) {
|
|
|
+ this.drag = true;
|
|
|
+ document.body.style.userSelect = 'none'; // 禁止选中文本
|
|
|
+ this.mouseEvent = { clientX: e.clientX, clientY: e.clientY };
|
|
|
+ this.mousePointer = { i, j, mark };
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 鼠标抬起事件，如果是一个合适的连接点，则创建连接线
|
|
|
+ * @param {PointerEvent} e 事件对象
|
|
|
+ * @param {Number} i 选项列表索引
|
|
|
+ * @param {Number} j 选项索引
|
|
|
+ * @param {String} mark 选项标识
|
|
|
+ */
|
|
|
+ mouseup(e, i, j, mark) {
|
|
|
+ let { i: curI, j: curJ, mark: curMark } = this.mousePointer;
|
|
|
+ if (curI === -1 && curJ === -1) return;
|
|
|
+ if (Math.abs(curJ - j) > 1 || mark === curMark) return;
|
|
|
+ this.changeConnectionList(mark, j, true);
|
|
|
+ this.createLine(mark, true);
|
|
|
+ },
|
|
|
+ /* 用 mouse 事件模拟拖拽 结束 */
|
|
|
+
|
|
|
+ // 重置当前连线点
|
|
|
+ resetCurConnectionPoint() {
|
|
|
+ this.curConnectionPoint = { i: -1, j: -1, mark: '' };
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 当点击的不是连线点时，清除所有连线点的选中状态
|
|
|
+ * @param {PointerEvent} e
|
|
|
+ */
|
|
|
+ handleEventConnection(e) {
|
|
|
+ let currentNode = e.target;
|
|
|
+ while (currentNode !== null) {
|
|
|
+ if (currentNode.classList && currentNode.classList.contains('item-wrapper')) {
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ currentNode = currentNode.parentNode;
|
|
|
+ }
|
|
|
+ if (currentNode) return;
|
|
|
+ Array.from(document.getElementsByClassName('item-wrapper')).forEach((item) => {
|
|
|
+ item.classList.remove('focus');
|
|
|
+ });
|
|
|
+ this.resetCurConnectionPoint();
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 处理点击连线
|
|
|
+ * @param {PointerEvent} e 事件对象
|
|
|
+ * @param {Number} i 选项列表索引
|
|
|
+ * @param {Number} j 选项索引
|
|
|
+ * @param {String} mark 选项标识
|
|
|
+ */
|
|
|
+ handleClickConnection(e, i, j, mark) {
|
|
|
+ let { i: curI, j: curJ, mark: curMark } = this.curConnectionPoint;
|
|
|
+ // 获取 item-wrapper 元素
|
|
|
+ let currentNode = e.target;
|
|
|
+ while (currentNode !== null) {
|
|
|
+ if (currentNode.classList && currentNode.classList.contains('item-wrapper')) {
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ currentNode = currentNode.parentNode;
|
|
|
+ }
|
|
|
+ // 如果当前连线点不存在或就是当前连线点，则设置当前连线点
|
|
|
+ if ((curI === -1 && curJ === -1) || mark === curMark) {
|
|
|
+ this.curConnectionPoint = { i, j, mark };
|
|
|
+ currentNode.classList.add('focus');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 如果当前连线点存在，清除所有连线点的选中状态
|
|
|
+ Array.from(this.$refs.list.getElementsByClassName('item-wrapper')).forEach((item) => {
|
|
|
+ item.classList.remove('focus');
|
|
|
+ });
|
|
|
+ // 如果当前连线点与上一个连线点不在相邻的位置，则设置点击的连接点为当前连线点
|
|
|
+ if (Math.abs(curJ - j) > 1 || mark === curMark || (curJ === j && curI !== i)) {
|
|
|
+ this.curConnectionPoint = { i, j, mark };
|
|
|
+ currentNode.classList.add('focus');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.changeConnectionList(mark, j);
|
|
|
+ // 如果当前连线点与上一个连线点在相邻的位置，则创建连接线
|
|
|
+ this.createLine(mark);
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 创建连接线
|
|
|
+ * @param {String} mark 选项标识
|
|
|
+ * @param {Boolean} isDrag 是否是拖拽
|
|
|
+ */
|
|
|
+ createLine(mark, isDrag = false) {
|
|
|
+ let { offsetWidth, offsetLeft, offsetTop, offsetHeight } = document.getElementsByClassName(`item-${mark}`)[0];
|
|
|
+ const { curOffsetWidth, curOffsetLeft, curOffsetTop, curMark } = this.computedCurConnectionPoint(isDrag);
|
|
|
+ let top = Math.min(offsetTop + offsetHeight / 2, curOffsetTop + offsetHeight / 2);
|
|
|
+ let left = Math.min(offsetLeft + offsetWidth, curOffsetLeft + curOffsetWidth);
|
|
|
+ let width = Math.abs(
|
|
|
+ offsetLeft > curOffsetLeft
|
|
|
+ ? curOffsetLeft - offsetLeft + offsetWidth
|
|
|
+ : offsetLeft - curOffsetLeft + curOffsetWidth,
|
|
|
+ );
|
|
|
+ let height = Math.abs(offsetTop - curOffsetTop);
|
|
|
+ let size = offsetLeft > curOffsetLeft ? offsetTop > curOffsetTop : offsetTop < curOffsetTop; // 判断是左上还是右下
|
|
|
+ // 创建一个空的SVG元素
|
|
|
+ let svg = document.createElementNS(svgNS, 'svg');
|
|
|
+ svg.setAttribute(
|
|
|
+ 'style',
|
|
|
+ `position:absolute; width: 62px; height: ${Math.max(8, height)}px; top: ${top}px; left: ${left}px;`,
|
|
|
+ );
|
|
|
+ svg.classList.add('connection-line', `svg-${mark}-${curMark}`); // 添加类名
|
|
|
+ // 向SVG元素添加 path 元素
|
|
|
+ let path = document.createElementNS(svgNS, 'path');
|
|
|
+ path.setAttribute('d', `M ${size ? 0 : width} 0 L ${size ? width : 0} ${height}`); // 设置路径数据
|
|
|
+ this.setPathAttr(path);
|
|
|
+ svg.appendChild(path);
|
|
|
+ this.$refs.list.appendChild(svg); // 将SVG元素插入到文档中
|
|
|
+
|
|
|
+ // 清除当前连线点
|
|
|
+ this.resetCurConnectionPoint();
|
|
|
+ },
|
|
|
+ // 设置 path 公用属性
|
|
|
+ setPathAttr(path) {
|
|
|
+ path.setAttribute('stroke-width', '2'); // 设置线条宽度
|
|
|
+ path.setAttribute('stroke-linecap', 'round'); // 设置线段的两端样式
|
|
|
+ path.setAttribute('stroke', '#306eff'); // 设置填充颜色
|
|
|
+ path.setAttribute('transform', `translate(2, 2)`); // 设置偏移量
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 计算当前连线点的位置
|
|
|
+ * @param {Boolean} isDrag 是否是拖拽
|
|
|
+ */
|
|
|
+ computedCurConnectionPoint(isDrag = false) {
|
|
|
+ const { mark } = isDrag ? this.mousePointer : this.curConnectionPoint;
|
|
|
+ let dom = document.getElementsByClassName(`item-${mark}`)[0];
|
|
|
+ return {
|
|
|
+ curOffsetWidth: dom.offsetWidth,
|
|
|
+ curOffsetLeft: dom.offsetLeft,
|
|
|
+ curOffsetTop: dom.offsetTop,
|
|
|
+ curOffsetHeight: dom.offsetHeight / 2,
|
|
|
+ curMark: mark,
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ // 清除所有连接线
|
|
|
+ clearLine() {
|
|
|
+ document.querySelectorAll('svg.connection-line').forEach((item) => {
|
|
|
+ item.remove();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 修改连接列表
|
|
|
+ * @param {String} mark 选项标识
|
|
|
+ * @param {Boolean} isDrag 是否是拖拽
|
|
|
+ */
|
|
|
+ changeConnectionList(mark, j, isDrag = false) {
|
|
|
+ const { mark: curMark, j: curJ } = isDrag ? this.mousePointer : this.curConnectionPoint;
|
|
|
+ this.changeAnswerList(curMark, mark, curJ < j);
|
|
|
+ this.changeAnswerList(mark, curMark, curJ > j);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 改变答案列表
|
|
|
+ * @param {String} curMark 当前选项标识
|
|
|
+ * @param {String} mark 选项标识
|
|
|
+ */
|
|
|
+ changeAnswerList(curMark, mark, isPre) {
|
|
|
+ let oldPointer = { mark: '', position: '' };
|
|
|
+ // 找到当前选项，修改 preMark 或 nextMark
|
|
|
+ this.answerList.find((item) =>
|
|
|
+ item.find((li) => {
|
|
|
+ if (li.mark === curMark) {
|
|
|
+ if (isPre) {
|
|
|
+ if (li.nextMark) {
|
|
|
+ oldPointer = { mark: li.nextMark, position: 'next' };
|
|
|
+ }
|
|
|
+ li.nextMark = mark;
|
|
|
+ } else {
|
|
|
+ if (li.preMark) {
|
|
|
+ oldPointer = { mark: li.preMark, position: 'pre' };
|
|
|
+ }
|
|
|
+ li.preMark = mark;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ }),
|
|
|
+ );
|
|
|
+ // 如果当前选项有 preMark 或 nextMark，则清除原来的连线
|
|
|
+ if (!oldPointer.mark) return;
|
|
|
+ document.querySelector(`svg.connection-line.svg-${curMark}-${oldPointer.mark}`)?.remove();
|
|
|
+ document.querySelector(`svg.connection-line.svg-${oldPointer.mark}-${curMark}`)?.remove();
|
|
|
+
|
|
|
+ // 找到原来的选项，清除 preMark 或 nextMark
|
|
|
+ this.answerList.find((item) =>
|
|
|
+ item.find((li) => {
|
|
|
+ if (li.mark === oldPointer.mark) {
|
|
|
+ if (oldPointer.position === 'pre') {
|
|
|
+ li.nextMark = '';
|
|
|
+ } else {
|
|
|
+ li.preMark = '';
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ }),
|
|
|
+ );
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+@use '@/styles/mixin.scss' as *;
|
|
|
+
|
|
|
+.matching-preview {
|
|
|
+ @include preview-base;
|
|
|
+
|
|
|
+ .option-list {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ row-gap: 16px;
|
|
|
+
|
|
|
+ .list-item {
|
|
|
+ display: flex;
|
|
|
+ column-gap: 8px;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .item-wrapper {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ column-gap: 24px;
|
|
|
+ align-items: center;
|
|
|
+ min-height: 48px;
|
|
|
+ padding: 12px 24px;
|
|
|
+ background-color: $content-color;
|
|
|
+ border-radius: 40px;
|
|
|
+
|
|
|
+ &:not(:last-child) {
|
|
|
+ margin-right: 52px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.focus {
|
|
|
+ background-color: #dcdbdd;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.right {
|
|
|
+ background-color: $right-bc-color;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.wrong {
|
|
|
+ box-shadow: 0 0 0 1px $error-color;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
zq