在 Vue 项目中引入 tinymce 富文本编辑器

base64上传图片

<template>
  <a ref="link" class="download-btn" v-on:click="handleClick">导出</a>
</template>
<script type="text/javascript">
export default {
  props: {
    header: {
      type: Array,
      default: function() {
        return [];
      }
    },
    data: {
      type: Array,
      default: function() {
        return [];
      }
    },
    fileName: {
      type: String,
      default: 'data.csv'
    }
  },
  methods: {
    handleClick: function() {
      if (!this.data || this.data.length <= 0) {
        this.$message({
          message: '请先进行查询,并等待查询结果返回!',
          type: 'error'
        });
        return;
      }
      var csvContent = 'data:text/csv;charset=utf-8,\ufeff';
      csvContent += this.headerLabel + '\n';
      this.data.forEach((item, index) => {
        let dataString = '';
        for (let i = 0; i < this.headerProp.length; i++) {
          dataString += item[this.headerProp[i]] + ',';
        }
        csvContent += index < this.data.length ? dataString.replace(/,$/, '\n') : dataString.replace(/,$/, '');
      });
      this.$refs.link.setAttribute('href', encodeURI(csvContent));
      this.$refs.link.setAttribute('download', this.fileName);
    }
  },
  computed: {
    // 要求head是数组，数组中的每个元素是对象，并且每个对象都有label属性
    headerLabel: function() {
      let result;
      result = this.header.map((item) => {
        return item.label;
      })
      result = result.join(',');
      return result;
    },
    headerProp: function() {
      let result;
      result = this.header.map((item) => {
        return item.prop;
      })
      return result;
    }
  }
}

</script>
<style lang="scss" scoped>
.download-btn {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 15px;
  font-size: 12px;
  border-radius: 4px;
  color: #FFF;
  background-color: #f7ba2a;
  border-color: #f7ba2a;
  outline: 0;
  text-align: center;
  -webkit-appearence: none;
  appearence: none;
  cursor: pointer;
}

</style>

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
复制代码

webpack中使用ECharts文档 ECharts按需引入模块文档 接下来我们就要在vue中声明初始化ECharts了。因为ECharts初始化必须绑定dom，所以我们只能在vue的mounted生命周期里初始化。

mounted() {
  this.initCharts();
},
methods: {
  this.initCharts() {
    this.chart = echarts.init(this.$el);
    this.setOptions();
  },
  setOptions() {
    this.chart.setOption({
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    })
  }
}

<template>
  <span ref='countup'></span>
</template>

<script>
import CountUp from 'countup.js'
export default {
  name: 'countup-demo',
  data () {
    return {
      numAnim:null
    }
  },
   props: {
            start: {
                type: Number,
                default: 0
            },
            end: {
                type: Number,
                default: 2018
            },
            decimal: {
                type: Number,
                default: 0
            },
            duration: {
                type: Number,
                default: 2.5
            },
            options: {
                type: Object
            }
        },
  mounted(){
    this.initCountUp()
  },
  methods:{
    initCountUp(){
      this.numAnim = new CountUp(this.$refs.countup, this.start,
                        this.end,
                        this.decimal,
                        this.duration,
                        this.options
                );
      this.numAnim.start();
    }
  }
}
</script>