Uniapp矩阵评分组件

news2024/11/13 14:31:49

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="icon" :style="getStyle(rowitem[valueName],colitem[valueName],colindex)"></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: "1"
						},
						{
							value: '2',
							label: "2"
						},
						{
							value: '3',
							label: "3"
						},
						{
							value: '4',
							label: "4"
						},
						{
							value: '5',
							label: "5"
						},
					];
				}
			},
		},
		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, index) {
				let style = {
					fontSize: this.iconSize
				}
				const values = this.valueCom
				let rowItem = values.find(item => {
					return item['row'] == row
				})

				if (rowItem) {
					let dataColIndex = this.columns.findIndex(item => {
						return item[this.valueName] == rowItem['col']
					})
					if (dataColIndex >= index) {
						style['color'] = this.selectIconColor
					} else {
						style['color'] = this.iconColor
					}
				} 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 iconColor="#eee" :rows="matrixrateRowDatas" :columns="matrixrateColumnDatas" v-model="matrixrate"></diy-matrixrate>
		</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: []
			};
		},
		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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1229578.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

学习UI第一天

在工作闲暇之余&#xff0c;自己画的原型图&#xff0c;再次做一次记录&#xff0c;哈哈哈 萌宠领养UI设计原型图 https://modao.cc/proto/lq2KqIVBs48xwylNZlA7OP/sharing?view_moderead_only #萌宠领养-分享 可以点击此链接&#xff0c;进行查看O(∩_∩)O哈哈~

DDPM的学习

Denoising Model 首先是宏观理解一下 Denoising Model 的输入 去噪很多步&#xff0c;用的是同一个Denoising Model&#xff0c;但是输入图片可能差距很大。解决方法&#xff1a;给Denoising Model多输入一个变量&#xff0c;表示现在的去噪阶段&#xff0c;让Denoising Mod…

硬盘无法格式化怎么办?

许多用户在尝试格式化硬盘、SD卡、USB闪存驱动器时可能会遇到无法格式化硬盘的问题&#xff0c;并且还会伴随着Windows无法完成格式化或格式化未成功完成之类的错误消息弹窗。那么&#xff0c;硬盘无法格式化原因是什么呢&#xff1f;硬盘无法格式化怎么办呢&#xff1f;下面我…

图像分割方法

常见的图像分割方法有以下几种&#xff1a; 1.基于阈值的分割方法 灰度阈值分割法是一种最常用的并行区域技术&#xff0c;它是图像分割中应用数量最多的一类。阈值分割方法实际上是输入图像f到输出图像g的如下变换&#xff1a; 其中&#xff0c;T为阈值&#xff1b;对于物体的…

宝塔站点配置

我这里使用的thinkphp 框架部署的

buildadmin+tp8表格操作(7)表格的事件监听

buildadmin 中的事件都已经在 baTable类中定义好了。我们一般不会去修改&#xff0c;万一我们要在事件上有所操作&#xff0c; 我们可以通过事件的 前置和后置 钩子函数来处理 那么我们是如何使用这些钩子呢&#xff1f; 我们只需要在 创建对象的时候&#xff0c;定义好这些钩…

二进制部署k8s集群-过程中的问题总结(接上篇的部署)

1、kube-apiserver部署过程中的问题 kube-apiserver.conf配置文件更改 2、calico的下载地址 curl https://docs.projectcalico.org/v3.20/manifests/calico.yaml -O 这里如果kubernetes的节点服务器为多网卡配置会产生报错 修改calino.yaml配置文件 解决方法&#xff1a; 调…

YB506AB是一款理电池充、放电管理专用芯片,集成锂电池充电管理和降压DC-DC电路。

YB506AB 锂电转可充电AA/AAA电池专用SOC芯片 概述: YB506AB是一款理电池充、放电管理专用芯片&#xff0c;集成锂电池充电管理和降压DC-DC电路。充电过程满足锂电池三段式滑流/恒流/恒压充电规范&#xff0c;B506内部的线性充电电路采用了恒流可配置模式&#xff0c;可以通过…

概念解析 | 光电神经网络:optoelectronic neural network

注1:本文系“概念解析”系列之一,致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是:光电神经网络。 概念解析 | 光电神经网络的原理、挑战与未来 1. 背景介绍 在过去的十年中,深度学习和神经网络在许多领域取得了显著的成就,如图像识别、自然语言处理、医疗…

如何快速将txt类型的日志文件转换为excel表格并进行数据分析报表统计图(如:饼图、折线图、柱状图)?

打开excel创建空白文档 选择一个txt文件 一动下面箭头↑竖线&#xff0c;可以拖拽左右调整要判断转换为一列的数据宽度 根据情况设置不同列的数据格式&#xff08;每一列可以点击&#xff09;&#xff0c;设置好后点击【完成】 设置单元格数据格式 手动插入第一行为每列数据的…

没收到Win11 23H2正式版的推送怎么升级到23H2

没收到Win11 23H2正式版的推送怎么升级到23H2&#xff1f;用户反映自己没有收到Win11 23H2正式版的更新推送&#xff0c;又想升级为23H2版本。接下来小编给大家详细介绍不同的升级方法&#xff0c;帮助更多的用户完成Win11 23H2系统的更新&#xff0c;升级后就能体验到Win11 23…

【C++】pow函数实现的伽马变换详解和示例

本文通过原理和示例对伽马变换进行详解&#xff0c;并通过改变变换系数展示不同的效果&#xff0c;以帮助大家理解和使用。 原理 伽马变换是一种用于图像增强的技术&#xff0c;它可以用来提高或降低图像的对比度&#xff0c;常用于医学图像处理和计算机视觉等领域。伽马变换…

3D建模基础教程:编辑多边形功能命令快捷方式

一、打开3D软件并创建新模型 首先&#xff0c;打开你的3D建模软件&#xff0c;比如Blender、Maya或3ds Max。然后&#xff0c;创建一个新的3D模型。你可以使用基本几何体来创建模型&#xff0c;也可以导入现有的模型。 二、进入编辑多边形模式 在主工具栏中&#xff0c;找到并…

《深入浅出OCR》实战:基于PGNet的端到端识别

✨专栏介绍: 经过几个月的精心筹备,本作者推出全新系列《深入浅出OCR》专栏,对标最全OCR教程,具体章节如导图所示,将分别从OCR技术发展、方向、概念、算法、论文、数据集等各种角度展开详细介绍。 💙个人主页: GoAI |💚 公众号: GoAI的学习小屋 | 💛交流群: 7049325…

[一周AI简讯]OpenAI宫斗;微软Bing Chat更名Copilot;Youtube测试音乐AI

OpenAI宫斗&#xff0c;奥特曼被解雇&#xff0c;董事会内讧 Sam Altman被解雇&#xff0c;不再担任CEO&#xff0c;董事会的理由是奥特曼在与董事会的沟通中始终不坦诚&#xff0c;阻碍了董事会履行职责的能力。原首席技术官Mira Murati担任新CEO。OpenAI宫斗剧远未结束&…

C语言-求一个整数储存在内存中的二进制中1的个数

#define _CRT_SECURE_NO_WARNINGS #include<stdio.h>int main() {/*求一个整数储存在内存中的二进制中1的个数*/int number;scanf("%d", &number);int i 0;int count 0;for (i 0; i < 32; i){if (1 ((number >> i) & 1)){count;}}printf(…

游戏服务器怎么挑选细节与技巧深度解析

随着数字娱乐的迅速崛起&#xff0c;游戏不仅成为了全球数亿人的休闲爱好&#xff0c;同时也催生了一系列关于游戏体验优化的需求。游戏服务器作为游戏体验的核心支柱&#xff0c;其性能好坏直接影响到玩家的游戏体验。本文章旨在详细探讨游戏服务器的挑选技巧与注意事项&#…

AWS云服务器EC2实例实现ByConity快速部署

1. 前言 亚马逊是全球最大的在线零售商和云计算服务提供商。AWS云服务器在全球范围内都备受推崇&#xff0c;被众多业内人士誉为“云计算服务的行业标准”。在国内&#xff0c;亚马逊AWS也以其卓越的性能和服务满足了众多用户的需求&#xff0c;拥有着较高的市场份额和竞争力。…

opencv将32位深图片合成视频跳帧解决办法

在合成视频时候&#xff0c;大多数的图片都是24位深度的&#xff08;即RGB三通道&#xff0c;一个通道8位&#xff09;&#xff0c;但是也存在少量的32位深的图片&#xff08;RGBA&#xff0c;三个颜色通道加上A这个透明度通道&#xff09;&#xff0c;32位和24位的格式是不一样…

Docker部署MinIO对象存储服务器结合Cpolar实现远程访问

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《Linux》《Cpolar》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 文章目录 前言1. Docker 部署MinIO2. 本地访问MinIO3. Linux安装Cpolar4. 配置MinIO公网地址5. 远…