shu-c-view/packages/color-card/index.js

rollup 打包vue@2.7组件库框架

/**
 * @desc BaseColorCard 色卡
 */
import _isArray from 'lodash/isArray';
import _isEmpty from 'lodash/isEmpty';
import _merge from 'lodash/merge';
import { devConsole } from '../helper/util.js';

const BaseColorCard = {
  name: 'BaseColorCard',
  props: {
    // 颜色数据
    colorList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 每一块=盒子的长度
    width: {
      type: Number,
      default: () => {
        return 60;
      }
    },
    // 每一块盒子的高度
    height: {
      type: Number,
      default: () => {
        return 25;
      }
    },
    // 数据信息
    dataInfo: {
      type: Array,
      default: () => {
        return [];
      }
      // color: 'red', // 标记的背景颜色
      // gearIndex: 3, // 在第几档
      // offsety: '30%', // 在所在档位的位置
      // data: 100, // 数据值
      // fontPosition: 'top', // 展示数据在标记的位置
      // fontOffset: ['-15px', '10px'], // 索引为零的为 fontPosition 的偏移量值  索引为一的为 左边的偏移量值
      // fontStyle: {
      // 数据字体样式
      //   color: '#ad8b3d',
      //   fontSize: '15px'
      // }
    },
    // 是否显示提示效果
    tipsIsDisabled: {
      type: Boolean,
      return: false
    },
    // 每个块 提示的内容
    tipsConetnt: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  watch: {},
  computed: {},
  data() {
    return {
      color: 'red'
    };
  },
  methods: {
    /**
     * @description 创建dom 元素函数
     * @date 2021-10-21
     * @param {any} i
     * @returns {any}
     */
    createNode(i) {
      const ii = i + 1;
      const newArray = [];
      this.dataInfo.forEach(e => {
        newArray.push(this.finalNode(ii, e));
      });
      return newArray;
    },

    /**
     * @description 最终创建dom 元素函数
     * @date 2021-10-21
     * @returns {any}
     */
    finalNode(a, b) {
      if (a === b.gearIndex) {
        if (b.isImage) {
          return this.$createElement('img', {
            attrs: {
              src: b.ImageRoute
            },
            style: _merge(
              {
                width: '15px',
                height: '15px',
                position: 'absolute'
              },
              b.imgStyle ? b.imgStyle : {}
            )
          });
        }
        return this.$createElement(
          'div',
          {
            style: {
              background: b.color,
              width: '3px',
              height: '160%',
              top: '-8px',
              position: 'absolute',
              left: b.offsety,
              color: b.color
            }
          },
          [
            this.$createElement(
              'span',
              {
                style: _merge(
                  {
                    position: 'absolute',
                    [b.fontPosition]: b.fontOffset[0],
                    left: b.fontOffset[0]
                  },
                  b.fontStyle ? b.fontStyle : {}
                )
              },
              [b.data]
            )
          ]
        );
      }
    }
  },
  render(h) {
    return h(
      'div',
      {
        style: {
          display: 'flex'
        }
      },
      [
        this.colorList.map((v, i) =>
          h(
            'el-tooltip',
            {
              props: {
                disabled: this.tipsIsDisabled,
                placement: 'top-start'
              }
            },
            [
              h(
                'div',
                {
                  slot: 'content'
                },
                [!this.tipsIsDisabled ? this.tipsConetnt[i] : '']
              ),
              h(
                'div',
                {
                  style: {
                    background: v,
                    width: `${this.width}px`,
                    height: `${this.height}px`,
                    position: 'relative'
                  }
                },
                this.createNode(i)
              )
            ]
          )
        )
      ]
    );
  }
};
BaseColorCard.install = function(Vue, ElComponents) {
  // 用于按需加载的时候独立使用
  devConsole(`按需加载独立组件：${BaseColorCard.name}`);
  if (_isArray(ElComponents) && !_isEmpty(ElComponents)) {
    for (let i = 0; i < ElComponents.length; i += 1) {
      if (ElComponents[i].name !== BaseColorCard.name) {
        Vue.use(ElComponents[i]);
      }
    }
  }
  Vue.component(BaseColorCard.name, BaseColorCard);
};
export { BaseColorCard };