vue 常用插件整理
1. 富文本编辑
https://www.kancloud.cn/wangfupeng/wangeditor3/332599
vue 中封装成组件使用要不报错
封装子组件
```javascript
<template>
<div id="wangeditor">
<div ref="editorElem" style="text-align:left;"></div>
</div>
</template>
<script>
import E from "wangeditor";
export default {
name: "Editor",
data() {
return {
editor: null,
editorContent: ''
};
},
```
// catchData是一个类似回调函数，来自父组件，当然也可以自己写一个函数，主要是用来获取富文本编辑器中的html内容用来传递给服务端
props: ['catchData'], // 接收父组件的方法
mounted() {
this.editor = new E(this.$refs.editorElem);
// 编辑器的事件，每次改变会获取其html内容
this.editor.customConfig.onchange = html => {
this.editorContent = html;
this.catchData(this.editorContent); // 把这个html通过catchData的方法传入父组件
};
this.editor.customConfig.menus = [
// 菜单配置
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
];
this.editor.create(); // 创建富文本实例
},
}
</script>
父组件调用
引用 ，注册 ， 使用
2.自定义的一些上传事件
https://www.lagou.com/lgeduarticle/99623.html
3. echarts 仪表盘参数说明
require.config({
paths:{
echarts:"js/chart"
}
});
require([
'echarts',
'echarts/chart/gauge'
],function(ec){
var option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}分"
},
toolbox: {//工具栏 如刷新、保存为图片等
show : false,
/*feature : {
mark : {show: true},
restore : {show: true},
saveAsImage : {show: true}
}*/
},
series : [
{
name:'',//仪表盘名字
type:'gauge',//类型是仪表盘
radius: 70,
data:[{value:85, name: '得分'}],//仪表盘的值为85，鼠标经过时显示的框名字为“得分”
center : ['50%', '78'],//仪表盘的位置 第一个值为x轴，第二个值为y轴
startAngle:180,//开始角度
endAngle:0,//结束角度
splitNumber: "none",//刻度的值，如果设置为0，在IE8中，左上角有多一块内容，不需要显示就设置为none，需要显示就设置具体数值，如10
axisLine: { // 坐标轴线，也就是圆圈的边框线
show: false, // 默认显示，属性show控制显示与否
lineStyle: { // 属性lineStyle控制线条样式
//color: [[0.2, 'f9fafb'],[0.4, 'orange'],[0.8, 'skyblue'],[1, '#ff4500']],
width: 10
}
},
pointer: {//point为设置指针箭头的效果
//这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
//当鼠标经过时会显示 箭头中间会显示一条白色的区域，这个区域可以通过css调整 如#map canvas[data-zr-dom-id=_zrender_hover_]{display: none!important;}
show: true,
//指针长度
length:'60%',
width:4,
color:"#000"
},
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
//color: '#333'
},
splitLine: { // 分隔线
show: false, // 默认显示，属性show控制显示与否
length :20, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
// color: '#eee',
width: 2,
type: 'solid'
}
},
title : {
show : false,
//offsetCenter: ['-65%', -10], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#333',
fontSize : 15
}
},
detail : {//最下边数值的设置
show : true,
//backgroundColor: 'rgba(0,0,0,0)',
// borderWidth: 0,
// borderColor: '#ccc',
//width: 100,
//height: 40,
offsetCenter: ['0', '10'], // x, y，单位px
formatter:'{value}%',
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#3ebf27',
fontSize : 18
}
},
axisTick: { // 坐标轴小标记
show: false, // 属性show控制显示与否，默认不显示
splitNumber: 5, // 每份split细分多少段
length :8, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: '#eee',
width: 1,
type: 'solid'
}
}
}
]
};
var authWay = ec.init(document.getElementById("map"));
authWay.setOption(option);
window.onresize = authWay.resize;
});
https://www.cnblogs.com/dongxiaolei/p/7489842.html
4. 省市区 三级联动插件
https://dwqs.github.io/vue-area-linkage/
5. 爬虫学习
