f8749dbb5c
- 抽离 preview 矩阵的验证内容，多选矩阵的校验放到 PreviewMatrixCheckbox 内 - 添加新的错误提示支持 - 增加 矩阵 类型 - 添加矩阵测试文件
100 lines
2.5 KiB
Vue
100 lines
2.5 KiB
Vue
<template>
|
||
<input
|
||
type="checkbox"
|
||
class="mobilefont"
|
||
:name="`R${rowIndex + 1}`"
|
||
:checked="isOptionChecked(rowIndex, colIndex)"
|
||
@change="handleMatrixCheckboxChange(rowIndex, colIndex)"
|
||
/>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import type { IQuestion } from '@/types/question';
|
||
import type { IMatrixCheckboxConfig } from '@/types/questions/matrixCheckbox';
|
||
|
||
// 接受获取到的 col row 的索引参数
|
||
const rowIndex = defineModel<number>('rowIndex', { required: true, default: 0 });
|
||
const colIndex = defineModel<number>('colIndex', { required: true, default: 0 });
|
||
|
||
const rowRecord = defineModel<number[][]>('rowRecord', { required: false, default: () => [] });
|
||
|
||
const element = defineModel<IQuestion<IMatrixCheckboxConfig>>('element', {
|
||
required: false,
|
||
default: () => {
|
||
/**/
|
||
}
|
||
});
|
||
const emit = defineEmits(['update:matrixAnswer', 'update:rowRecord', 'update:element']);
|
||
|
||
// 判断是否选中
|
||
const isOptionChecked = (rowIndex: number, colIndex: number): boolean => {
|
||
// [
|
||
// [0, 1],
|
||
// [0, 1]
|
||
// ]
|
||
if (!rowRecord.value[rowIndex]) {
|
||
return false;
|
||
}
|
||
return rowRecord.value[rowIndex].includes(colIndex);
|
||
};
|
||
|
||
// 当 matrix radio 选中时，更新 rowRecord 和 matrixAnswer
|
||
function handleMatrixCheckboxChange(row: number, col: number) {
|
||
// 获取 colIndexArray
|
||
if (!rowRecord.value[row]) {
|
||
// 如果没有对应的row，创建一个
|
||
rowRecord.value[row] = [];
|
||
}
|
||
// cols 的逻辑 和 handleMatrixRadioChange 一致
|
||
const cols = rowRecord.value[row];
|
||
|
||
// 检查 cols 对应的 col 是否有 数值
|
||
if (cols.includes(col)) {
|
||
// 如果有，删除
|
||
cols.splice(cols.indexOf(col), 1);
|
||
} else {
|
||
// 如果没有，添加
|
||
cols.push(col);
|
||
}
|
||
}
|
||
|
||
const emitValue = (/* val: unknown */) => {
|
||
emit('update:element', element.value);
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
@import '@/assets/css/main';
|
||
|
||
input[type='checkbox'] {
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
width: 16px;
|
||
height: 16px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 1px;
|
||
outline: none;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
position: relative;
|
||
transition: border-color 0.4s ease;
|
||
|
||
&:checked {
|
||
border-color: $theme-color;
|
||
background: $theme-color;
|
||
|
||
&::after {
|
||
content: '\2713';
|
||
font-family: 'Arial', sans-serif; // 确保符号正常显示
|
||
color: #fff; // 勾选符号的颜色
|
||
font-size: 12px; // 勾选符号的大小
|
||
display: block;
|
||
position: absolute;
|
||
background: $theme-color;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
}
|
||
}
|
||
</style>
|