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="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>



目录
相关文章
|
30天前
|
数据挖掘
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
51 10
|
30天前
|
搜索推荐 JavaScript 数据可视化
uniapp/vue个性化单选、复选组件
uniapp/vue个性化单选、复选组件
65 5
|
28天前
|
数据可视化 大数据 API
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
66 2
|
28天前
|
存储 API 数据库
uniapp APP自动更新组件
uniapp APP自动更新组件
59 1
|
14天前
|
移动开发 编解码 数据可视化
低代码可视化-uniapp SliderRange区间组件-代码生成器
SliderRange区间组件是一种用户界面元素,允许用户通过拖动滑块选择数值范围。组件支持微信小程序、H5和App,具有高度可定制性、响应式设计和多种事件处理功能。适用于价格筛选、音量调节等场景。代码实现包括滑动区域、滑块、事件处理等部分,支持可视化配置步长、颜色等属性。使用时需注意选择合适步长、提供清晰标签和考虑无障碍设计。
35 0
|
30天前
|
编解码 数据可视化 API
DIY可视化UniApp表格组件
DIY可视化UniApp表格组件
32 0
|
1月前
|
机器学习/深度学习 算法 数据可视化
UniApp手机滑块验证组件代码生成器
UniApp手机滑块验证组件代码生成器
56 0
|
1月前
|
前端开发 JavaScript
uniapp纯CSS实现圆形进度条组件
uniapp纯CSS实现圆形进度条组件
79 0
|
4月前
|
移动开发 前端开发 小程序
uniapp内置组件uni.navigateTo跳转后页面空白问题解决
【7月更文挑战第1天】uniapp内置组件uni.navigateTo跳转后页面空白问题解决
108 4
|
4月前
uniapp实战 —— 轮播图【数字下标】(含组件封装,点击图片放大全屏预览)
uniapp实战 —— 轮播图【数字下标】(含组件封装,点击图片放大全屏预览)
89 1
下一篇
无影云桌面