内置组件

vue 注册组件有 2 种方式

局部注册在对应页使用 components注册组件。

<template>
  <mavon-editor ref="md"></mavon-editor>
</template>

<script>
  import { mavonEditor } from "mavon-editor";
  export default {
    components: { mavonEditor },
    data() {
      return {};
    },
  };
</script>

全局注册在 src/main.js 文件下进行注册

import { mavonEditor } from "mavon-editor";
Vue.component("mavonEditor", mavonEditor);

<template>
  <mavon-editor ref="md"></mavon-editor>
</template>

上传图片

<UploadImage v-model="form.icon" column="icon"  @input="handleUploadSuccess" />

<UploadImage v-model="icon" :data="{ uploadType: 1 }" />


//自定义icon显示
<template #icon>
	<el-icon><plus /></el-icon>
</template>

//自定义组件大小显示
<UploadImage v-model="icon" :style="{ 'width': '100px' }" />

组件参数说明：

参数	类型	默认值	描述	Vue2	Vue3
column	string	无	列字段名		X
input	event		上传成功事件		X
uploadType	string	/Common/UploadFile	后端上传地址，可选（/Common/UploadFileAliyun）上传到阿里云，默认上传到本地		X
fileType	Array	上传格式	默认(.png, .jpg, .jpeg, .webp)
fileSize	Number	5	上传大小限制默认(单位 M)
limit	Number	5	图片数量限制(单位 M)
data	Object	无	上传携带额外请求参数
style	Object	无	组件显示大小设置	X

上传成功方法处理

Vue2

//图片上传成功方法
handleUploadSuccess(column, filelist) {
	this.form[column] = filelist;
	console.log(JSON.stringify(this.form), JSON.stringify(filelist))
},

上传文件

<UploadFile ref="uploadRef" v-model="form.icon" />

<UploadFile ref="upload" v-model="form.icon" :autoUpload="false" column="icon" @input="handleUploadSuccess" />

组件参数说明：

参数	类型	默认值	描述	Vue3
limit	Number	1	文件数量限制
column	string	无	回显 form 列字段名	X
input	event	handleUploadSuccess	上传成功事件	X
uploadType	string	/Common/UploadFile	后端上传地址，默认上传到本地。上传到其他地方	X
fileType	Array	.doc, .xls, .ppt, .json 等	文件类型, 例如['png', 'jpg', 'jpeg']
fileSize	Number	5	大小限制(MB)
drag	Boolean	false	是否允许拖拽上传
autoUpload	Boolean	true	是否自动上传
data	Object	文件上传提交额外字段	storeType: 1 存储类型 1、本地 2、阿里云

上传成功方法处理

Vue2

//文件上传成功方法
handleUploadSuccess(column, filelist) {
	this.form[column] = filelist;
	console.log(JSON.stringify(this.form), JSON.stringify(filelist))
},

复制文字

Vue3

<el-button
  class="btn-copy"
  v-clipboard:copy="content"
  v-clipboard:success="copySuccess"
  v-clipboard:error="copyError"
>复制</el-button>

const content = ref('我是复制内容')

function copySuccess(){ // 复制成功 }
function copyError(){ // 复制失败 }

使用图标

<svg-icon icon-class="user" />

<svg-icon name="user" />

如果使用 element ui 图标在图标前面添加“ele-” 前缀比如：<svg-icon name="ele-user" />

如何添加自定义 svg 图标

将下载的 iconfontsvg 图标放到 /src/assets/icons/svg 目录就可以通过name进行访问

图片预览

<ImagePreview src="http://localhost:8888/head.png"></ImagePreview>

组件参数说明：

属性	类型	默认值	描述	Vue2
src	String		图片地址
width	[Number, String]		图片显示宽度，默认像素，可自带单位
height	[Number, String]		图片显示高度
split	string	,	地址分割符，可预览多个地址	X

字典显示

//字符串类型
<dict-tag :options="[]" value="1"  />

//数组类型
<dict-tag :options="[]" value="[1,2]"  />

//字符串拼接类型
<dict-tag :options="[]" value="1,3" split=","  />

组件参数说明

属性	类型	默认值	描述	Vue2
options	Arrary		字典数据
value	[Number, String, Array, Boolean]		字典值
showValue	boolean	false	是否显示字典值
split	string	null		X

富文本

<editor v-model="form.content" />

组件参数说明

属性	类型	默认值	描述	Vue2	Vue3
toolbarConfig	Object		工具栏配置	X

toolbarConfig 可配置选项

const toolbarConfig = ref({
  toolbarKeys: [
    // 菜单 key
    "headerSelect",
    "bold", // 加粗
    "italic", // 斜体
    "through", // 删除线
    "underline", // 下划线
    "bulletedList", // 无序列表
    "numberedList", // 有序列表
    "color", // 文字颜色
    "insertLink", // 插入链接
    "fontSize", // 字体大小
    "lineHeight", // 行高
    "uploadImage", // 上传图片
    "delIndent", // 缩进
    "indent", // 增进
    "deleteImage", //删除图片
    "divider", // 分割线
    "insertTable", // 插入表格
    "justifyCenter", // 居中对齐
    "justifyJustify", // 两端对齐
    "justifyLeft", // 左对齐
    "justifyRight", // 右对齐
    "undo", // 撤销
    "redo", // 重做
    "clearStyle", // 清除格式
    "fullScreen", // 全屏
  ],
});

zr-dialog

此 dialog 在 el-dialog 的基础上增加了可以全屏的显示，其他属性同 el-dialog，具体效果见通知公告页面

<zr-dialog v-model="open" @close="cancel">我是内容</zr-dialog>

const open = ref(false)

function cancel(){
	open.value = false
}

常用组件参数说明

属性	类型	默认值	描述
modelValue	Boolean	false	是否打开 dialog
title	String		标题
width	[Number, String]	0	宽度
fullScreen	Boolean	false	是否全屏
draggable	Boolean	false	是否可拖拽
lockScroll	Boolean	true	是否锁定滚动背景

拖拽组件

官方文档

import Sortable from "sortablejs";

const columns = ref([{ sort: 1 }, { sort: 2 }]);

// 拖动排序
const tableSort = () => {
  const tbody = document.querySelector(".el-table__body > tbody");

  Sortable.create(tbody, {
    dragClass: "sortable-ghost",
    onEnd: (evt) => {
      const targetRow = columns.value.splice(evt.oldIndex, 1)[0];
      columns.value.splice(evt.newIndex, 0, targetRow);
      for (const index in columns.value) {
        columns.value[index].sort = parseInt(index) + 1;
      }
    },
  });
};

onMounted(() => {
  tableSort();
});

省市区联动

包 element-china-area-data 暂未集成

需要手动安装 npm intall element-china-area-data

流程图组件

LogicFlow

导出 Excel

前端实现导出 Excel (学习记录)

官方文档