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>