uniapp矩阵单选组件

uniapp矩阵单选组件常见于问卷调查中。 uniapp矩阵单选组件 uniapp矩阵单选组件常见于问卷调查中，我写了一个简单的矩阵单选组件。矩阵单选将一组具有相同刻度的量表题组合成一道题目；矩阵文本是多个单行文本的组合；多表头则将一组刻度数量矩阵单选组件是将同类型的多个问题和答案排列成一个矩阵，由受访者对比参数后进行单项选择，该题型多适用于市场调研、员工评估、用户研究等场景。

<template>
	<view style="width: 100%;overflow: hidden;">
		<view class="flex-sub flex-table flex  flex-direction-column"
			:style="{ '--table-border-color': tableBorderColor }">
			<view class="flex  items-stretch">
				<view class="td td0 justify-center align-center"></view>
				<view class="td td1 justify-center align-center" v-for="(item, index) in columns">
					{{ item[labelName]}}
				</view>
			</view>
			<view class="flex items-stretch" v-for="(rowitem, rowindex) in rows">
				<view class="td td0 flex justify-center align-center">{{ rowitem[labelName] }}</view>
				<view class="td td1 flex  justify-center align-center" @click="change(rowitem[valueName],colitem[valueName])"
					v-for="(colitem, colindex) in columns">
					<text class="diy-icon-radioboxfill" :style="getStyle(rowitem[valueName],colitem[valueName])"></text>
				</view>
			</view>
		</view>
	</view>


</template>

<script>
	import Emitter from "../../libs/util/emitter.js";

	export default {
		mixins: [Emitter],
		emits: ["update:modelValue", "change"],
		props: {
			// 通过双向绑定控制组件的弹出与收起
			// 绑定的值
			value: {
				type: Array,
				default: []
			},
			// 通过双向绑定控制组件的弹出与收起
			// 绑定的值
			modelValue: {
				type: Array,
				default: []
			},
			tableBorderColor: {
				type: String,
				default: '#ebeef5',
			},
			icon: {
				type: String,
				default: 'diy-icon-starfill'
			},
			iconColor: {
				type: String,
				default: '#eee'
			},
			selectIconColor: {
				type: String,
				default: '#07c160'
			},
			initRate: {
				type: Number,
				default: 0
			},
			iconSize: {
				type: String,
				default: '24px'
			},
			disabled: {
				type: Boolean,
				default: false
			},
			// 自定义value属性名
			valueName: {
				type: String,
				default: 'value'
			},
			// 自定义label属性名
			labelName: {
				type: String,
				default: 'label'
			},
			// 行数据
			rows: {
				type: Array,
				default () {
					return [{
							value: '1',
							label: "矩阵行一"
						},
						{
							value: '2',
							label: "矩阵行二"
						},
						{
							value: '3',
							label: "矩阵行三"
						},
					];
				}
			},
			// 列数据
			columns: {
				type: Array,
				default () {
					return [{
							value: '1',
							label: "矩阵列一"
						},
						{
							value: '2',
							label: "矩阵列二"
						},
						{
							value: '3',
							label: "矩阵列三"
						}
					];
				}
			},
		},
		data() {
			return {

				uForm: {
					inputAlign: "",
					clearable: ""
				}
			};
		},
		computed: {
			valueCom() {
				// #ifndef VUE3
				return this.value;
				// #endif

				// #ifdef VUE3
				return this.modelValue;
				// #endif
			}
		},
		mounted() {
			let parent = this.$u.$parent.call(this, 'u-form');
			if (parent) {
				Object.keys(this.uForm).map(key => {
					this.uForm[key] = parent[key];
				});
			}
		},
		methods: {
			getStyle(row, col) {
				let style = {
					fontSize: this.iconSize
				}
				const values = this.valueCom
				let rowItem = values.find(item => {
					return item['row'] == row
				})
				if (rowItem && col == rowItem['col']) {
					style['color'] = this.selectIconColor
				} else {
					style['color'] = this.iconColor
				}
				return style;
			},
			change(row, col) {
				const values = JSON.parse(JSON.stringify(this.valueCom))
				let index = values.findIndex(item => {
					return item['row'] == row
				})
				if (index >= 0) {
					let rowItem = values[index]
					if (rowItem.col == col) {
						values.splice(index, 1)
					} else {
						rowItem.col = col
					}
				} else {
					let rowItem = {
						row,
						col
					}
					values.push(rowItem);
				}
				console.log(values)
				this.$emit("update:modelValue", values);
				this.$emit("change", values);
				this.dispatch("u-form-item", "onFieldChange", values);
			}
		}
	};
</script>
<style scoped lang="scss">
	.flex-table {
		--table-border-color: #ebeef5;
		border-top: 1px solid var(--table-border-color);
		border-left: 1px solid var(--table-border-color);

		.td {
			border-bottom: 1px solid var(--table-border-color);
			border-right: 1px solid var(--table-border-color);
			text-align: center;
			padding: 5px;
			min-height: 60rpx;
			line-height: 60rpx;
		}

		.td0 {
			min-width: 80px;
			flex: 1
		}

		.td1 {
			flex: 1
		}
	}
</style>

<template>
	<view class="container container23285">
		<u-form-item class="diygw-col-24 matrixrate-clz" label="矩阵评分" labelPosition="top" prop="matrixrate">
			<diy-matrixrate icon="diy-icon-android" :rows="matrixrateRowDatas" :columns="matrixrateColumnDatas" v-model="matrixrate"></diy-matrixrate>
		</u-form-item>
		<u-form-item class="diygw-col-24 matrixcheck-clz" label="矩阵多选" labelPosition="top" prop="matrixcheck">
			<diy-matrixcheck :rows="matrixcheckRowDatas" :columns="matrixcheckColumnDatas" v-model="matrixcheck"></diy-matrixcheck>
		</u-form-item>
		<u-form-item class="diygw-col-24 matrixradio-clz" label="矩阵单选" labelPosition="top" prop="matrixradio">
			<diy-matrixradio :rows="matrixradioRowDatas" :columns="matrixradioColumnDatas" v-model="matrixradio"></diy-matrixradio>
		</u-form-item>
		<u-form-item class="diygw-col-24 matrixinput-clz" label="矩阵输入" labelPosition="top" prop="matrixinput">
			<diy-matrixinput :rows="matrixinputRowDatas" :columns="matrixinputColumnDatas" v-model="matrixinput"></diy-matrixinput>
		</u-form-item>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: {},
				matrixrateRowDatas: [
					{ label: '矩阵行一', value: '1' },
					{ label: '矩阵行二', value: '2' },
					{ label: '矩阵行三', value: '3' }
				],
				matrixrateColumnDatas: [
					{ label: '1', value: '1' },
					{ label: '2', value: '2' },
					{ label: '3', value: '3' },
					{ label: '4', value: '4' },
					{ label: '5', value: '5' }
				],
				matrixrate: [],
				matrixcheckRowDatas: [
					{ label: '矩阵行一', value: '1' },
					{ label: '矩阵行二', value: '2' },
					{ label: '矩阵行三', value: '3' }
				],
				matrixcheckColumnDatas: [
					{ label: '矩阵列一', value: '1' },
					{ label: '矩阵列二', value: '2' },
					{ label: '矩阵列三', value: '3' }
				],
				matrixcheck: [],
				matrixradioRowDatas: [
					{ label: '矩阵行一', value: '1' },
					{ label: '矩阵行二', value: '2' },
					{ label: '矩阵行三', value: '3' }
				],
				matrixradioColumnDatas: [
					{ label: '矩阵列一', value: '1' },
					{ label: '矩阵列二', value: '2' },
					{ label: '矩阵列三', value: '3' }
				],
				matrixradio: [],
				matrixinputRowDatas: [
					{ label: '矩阵行一', value: '1' },
					{ label: '矩阵行二', value: '2' },
					{ label: '矩阵行三', value: '3' }
				],
				matrixinputColumnDatas: [
					{ label: '矩阵列一', value: '1' },
					{ label: '矩阵列二', value: '2' },
					{ label: '矩阵列三', value: '3' }
				],
				matrixinput: []
			};
		},
		onBackPress() {
			//官方限制不支持在onBackPress使用async
			const backPress = async () => {
				console.log(1111);
				await this.dataApi();
			};
			backPress();
			//请根据需求返回true/false
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		methods: {
			async init() {}
		}
	};
</script>

<style lang="scss" scoped>
	.container23285 {
		padding-left: 0px;
		padding-right: 0px;
	}
	.container23285 {
	}
</style>