插件的使用

一、富文本编辑器

使用通用在线编辑器tinymce

1. 安装

npm i @tinymce/tinymce-vue -S

2. 导入

import Editor from '@tinymce/tinymce-vue';

3. 渲染

<Editor ref="editorref" :init="{plugins: 'wordcount'}" />

4. 操作实例,获取内容

editorref.value.getEditor().getContent()

二、ehcarts 图表

1. 安装

npm i echarts

2. 导入

import * as echarts from 'echarts';

3. 初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

注意: 一定要在组件挂载完成后 再执行初始化

4. 绘制图表

myChart.setOption({})

三、百度地图

1. 申请百度账号和ak

登录百度账号

2. 引用百度地图API文件

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥"> </script>

3. 创建地图容器元素并设置大小

4. 创建地图实例, 位于BMapGL命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。

var map = new BMapGL.Map("container");

注意: 一定要在组件挂载完成后 再创建地图实例

5. 设置中心点坐标 , 这里我们使用BMapGL命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。（为天安门坐标）

var point = new BMapGL.Point(116.404, 39.915);

6. 地图初始化，同时设置地图展示级别, 在创建地图实例后，我们需要对其进行初始化，BMapGL.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作

map.centerAndZoom(point, 15);

7. 开启鼠标滚轮缩放地图

map.enableScrollWheelZoom(true);

8. 设置地图类型为地球模式(相当于卫星模式)

map.setMapType(BMAP_EARTH_MAP);

地图类型常量：

1.标准地图：BMAP_NORMAL_MAP

2.地球模式：BMAP_EARTH_MAP

3.普通卫星地图：BMAP_SATELLITE_MAP

四、excel导入导出

1. 依赖

file-saver 用于文件操作

xlsx官网地址 用于excel文件处理

依赖安装：

npm i xlsx@0.17.0 -S

npm i file-saver@2.0.5 -S

import * as XLSX from 'xlsx' import filesaver from 'file-saver'

2. 导入功能实现

2.1 导入逻辑

httpRequest(data) {
  const { file } = data
  const types = file.name.split('.')[1]
  const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt'].some(
    (item) => item === types
  )
  if (!fileType) {
    this.$message.error('格式错误！请重新选择')
    return
  }

  // 方式1（官网推荐、如果有报错就使用方式2）：
  file.arrayBuffer().then(ab => {
    /* Parse file */
    const wb = XLSX.read(ab);
    const ws = wb.Sheets[wb.SheetNames[0]];

    /* Generate HTML */
    document.getElementById('TableContainer').innerHTML = XLSX.utils.sheet_to_html(ws)
  });

  // 方式2：
  const reader = new FileReader()
  reader.readAsArrayBuffer(file, 'utf-8')
  reader.onloadend = function (e) {
    const data = e.target.result
    const wb = XLSX.read(data, {
      type: 'buffer'
    })

    const ws = wb.Sheets[wb.SheetNames[0]]
    /* Generate HTML */
    document.getElementById('TableContainer').innerHTML = XLSX.utils.sheet_to_html(ws)
  }
}

 2.2 upload样式

<style lang="scss" scoped>
.avatar-uploader {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  margin-bottom: 18px;
  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 128px;
    height: 128px;
    text-align: center;
    border: 3px dashed var(--el-border-color);
    border-radius: 6px;
    &:hover {
      color: var(--el-color-primary);
      font-weight: bolder;
      border-color: var(--el-color-primary);
    }
  }
}
:deep(table) {
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto;
  text-align: center;
  td,
  th {
    min-height: 80px;
    border: 1px solid #cad9ea;
    color: #666;
  }
  thead th {
    background-color: #cce8eb;
    width: 100px;
  }
  tr:nth-child(odd) {
    background: #fff;
  }
  tr:nth-child(even) {
    background: #f5fafa;
  }
}
</style>

3. 导出功能实现

3.1 使用dom元素导出

// 自动分析dom元素导出excel
export function excelExport(table, filename) {
  // workbook,
  const wb = XLSX.utils.table_to_book(table)

  /* Export to file (start a download) */
  const defaultCellStyle = {
    font: { name: 'Verdana', sz: 13, color: 'FF00FF88' },
    fill: { fgColor: { rgb: 'FFFFAA00' } },
  }
  const wopts = {
    bookType: 'xlsx',
    bookSST: false,
    type: 'binary',
    cellStyle: true,
    defaultCellStyle: defaultCellStyle,
    showGridLines: false,
  }
  const wbout = XLSX.write(wb, wopts)
  const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
  fs.saveAs(blob, filename+'.xlsx')
}

 

3.2 使用table数据导出

// 使用数据导出excel
export function excelExport2(data, headers, filename) {
  // 使用深克隆不影响原table数据的展示
  const json = cloneDeep(data)

  json.forEach(item => {
    for(let key in item){
      if(headers.hasOwnProperty(key)){
        item[headers[key]] = item[key]
      }
      delete item[key]
    }
  })

  // excel 对象
  const wb = XLSX.utils.book_new()
  // 创建sheet
  const ws = XLSX.utils.json_to_sheet(json, {header: Object.values(headers)})
  // excel 添加sheet名称
  wb.SheetNames.push(filename)
  // excel 添加sheet
  wb.Sheets[filename] = ws
  
  const defaultCellStyle = {
    font: { name: 'Verdana', sz: 13, color: 'FF00FF88' },
    fill: { fgColor: { rgb: 'FFFFAA00' } },
  }
  const wopts = {
    bookType: 'xlsx',
    bookSST: false,
    type: 'binary',
    cellStyle: true,
    defaultCellStyle: defaultCellStyle,
    showGridLines: false,
  }
  const wbout = XLSX.write(wb, wopts)
  const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
  fs.saveAs(blob, filename+'.xlsx')
}

var s2ab = (s) => {
  if (typeof ArrayBuffer !== 'undefined') {
    const buf = new ArrayBuffer(s.length);
    const view = new Uint8Array(buf);
    for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
    return buf;
  } else {
    const buf = new Array(s.length);
    for (let i = 0; i !== s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff;
    return buf;
  }
}