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>