开发中发现的小技巧

1.利用Echart作一个词云
为了减少消耗和可复用性，将其封装成一个组件
EChart_wordcloud.vue

<template>
  <div :style="{height:height,width:width}" />
</template>
<script>
import * as echarts from 'echarts';
import "echarts-wordcloud";
// echarts theme
require('echarts/theme/macarons');
export default {
  // mixins: [resize],
  props: {
    type: {
      type: String,
      default: '1',
    },
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '345px',
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons');
      this.setOptions(this.chartData);
    },
    setOptions(val) {
      this.chart.setOption({
        // tooltip: {
        //     show: true,
        //     pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>',
        //     formatter: '{b}：{c} 热度',
        //     textStyle: {
        //     fontSize: 28           
        //     },
        //     backgroundColor: null,
        //     borderWidth:null,
        //   },
        series: [
          {
            type: "wordCloud",
            //用来调整词之间的距离
            gridSize: 10,
            //用来调整字的大小范围
            // Text size range which the value in data will be mapped to.
            // Default to have minimum 12px and maximum 60px size.
            sizeRange: [14, 60],
            // Text rotation range and step in degree. Text will be rotated randomly in range [-90,                                                                             90] by rotationStep 45
            //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
            // rotationRange: [-45, 0, 45, 90],
            // rotationRange: [ 0,90],
            rotationRange: [0, 0],
            //随机生成字体颜色
            // maskImage: maskImage,
            textStyle: {
              color: function () {
                return (
                  "rgb(" +
                  Math.round(Math.random() * 255) +
                  ", " +
                  Math.round(Math.random() * 255) +
                  ", " +
                  Math.round(Math.random() * 255) +
                  ")"
                );
              },
            },
            //位置相关设置
            // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
            // Default to be put in the center and has 75% x 80% size.
            left: "center",
            top: "center",
            right: null,
            bottom: null,
            width: "200%",
            height: "200%",
            //数据
            data: val,
          }
        ],
      })
    },
  },
};
</script>

在需要使用到词云的地方导入并添加组件标签

import EChartWordcloud from '@/components/EChart/EChart_wordcloud.vue'

<e-chart-wordcloud  :chart-data="eChartData8"/>
export default {
  components:{
   EChartWordcloud
  },
data() {
    return {
 
      eChartData8:[{
                        name: "审批",
                        value: 2500
                    },
                    {
                        name: "佣金",
                        value: 2300
                    },
                    {
                        name: "发票",
                        value: 2000
                    },

      ],
      }
    }

2. Ant Design Vue 的表单组件自定义一行序号呈现自增顺序（分页后也与前一页联系而不是相同）

   <a-table :data-source="listdata" :pagination="pagination" :loading="loading" @change="pageChange" :columns="columns" >

export default {
  data() {
    return {
      columns:[
        {
          title:'序号',
          align:'center',
          customRender: (text, record, index) => `${(this.param.pageNo - 1) *this.param.pageSize + index + 1}`,
        },
        {
          title:'名称',
          key: 'title',
          dataIndex:'title',
          align:'center',
          ellipsis:'true'
        },
      ],
      param: {
        pageNo: 1,
        pageSize: 10
      },
      pagination: {
        total: 0,
        pageSize: 10,//每页中显示10条数据
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["10", "20", "50", "100"],//每页中显示的数据
        showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据
      },
      listdata: [],
      loading: false,
      total: '',
    };
  },

    pageChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.param.pageNo = pagination.current;
      this.param.pageSize = pagination.pageSize;
      this.getPaperList()
    },
  },
}

this.param.pageNo和this.param.pageSize是自己所定义的所在页数和每页展示的数量。
3.设置背景图片周围有空白、铺不满
vue项目中有时设置背景图片会出现图片周围都有空白的情况，有可能是body、html的默认样式的原因。
如果我们直接将背景图片在body设置，就会造成vue项目的样式的污染，所以必须使用其他方法。
我们可以在当前组件或者App.vue中在组件的最外层添加一个div标签并且把背景图片赋给该div标签的样式

.bj{ background:#1d2989 url('~@/assets/index20220218_06.jpg') center center no-repeat;}![

4.前端接收到的数据内容有问题
前端从后端接收到的数据展示到页面时有时数据内容有很多不合理的空白还有图片（变成了连接）所以需要去除掉这些信息。通过正则表达式

replace(/\s*/g,'') //去除空格
replace(/<\/?.+?\/?>/g,'')//去除标签