vue-component-utils v1.0.43

vue-component-utils

适用于PC端项目的vue组件和可自定义的Element组件

目录

• 安装
• 使用
  • 全部引用
  • 按需引用
• 常用的scss的mixins
• scss-flex
  • 安装
  • 引用
  • 示例
  • 使用说明
    • 写在父项目的属性
    • 写在子项目的属性
• 组件介绍
  • elementUI组件
    • MyBackTop-返回页面顶部的操作按钮
    • MyCheckbox-在一组备选项中进行多选
    • MyDatePickerRange-用于选择或输入日期
    • MyRate-评分组件
    • MyCascade-级联选择器
    • MyDialog-级联选择器
    • MyInput-Input输入框
    • MyPagination-分页组件
    • MySelect-Select组件
    • MyUpload-上传组件
    • MyProgress-进度条组件
    • MyRadio-Radio组件
    • MyTable-Table组件
    • MyTimeline-可视化地呈现时间流信息
    • VerticalNavMenu-侧边垂直菜单，可内嵌子菜单
    • MyTree-树形控件
  • 其它组件
    • CollapseTransition-折叠展开动画
    • ComponentFadeOutIn-显示隐藏的Vue过渡状态
    • MyAudio-html5的audio标签
    • MyBtn-div组成的button
    • MyFlowChart-可自定义的流程图（暂时为demo）
    • MyFlvVideo-播放器组件，支持flv和mp4
    • MyVideo-播放器组件，支持m3u8、直播和mp4
    • MyMask-可自定义的全屏遮罩
    • MyQRCode-可生成带有logo的二维码
    • MySaveToPDF-将指定DOM转为PDF后下载或者打印
    • MySendMessageBox-发送验证按钮，验证码发出后倒计时
    • MySwiper-封装的Swiper组件
• 写在最后

安装

$ npm install --save vue-component-utils

使用

全部引用

在main.js中设置如下

import componentsUtils from 'vue-component-utils'
Vue.use(componentsUtils)

按需引用

1.安装babel-plugin-component插件

npm install babel-plugin-component -D

2.修改babel.config.js

plugins: [
//其它插件
[
  "component",
  {
    libraryName: "vue-component-utils",
    "camel2Dash": false,
    "style": true
  }
]
]

3.在main.js中按需引入你要用到的组件，比如MyAudio

import { MyAudio } from "vue-component-utils";
Vue.use(MyAudio);

常用的scss的mixins

全局引入

安装如下依赖

npm install sass-resources-loader

在vue.config.js中设置如下

chainWebpack: config => {
    const oneOfsMap = config.module.rule('scss').oneOfs.store
    oneOfsMap.forEach(item => {
        item
            .use('sass-resources-loader')
            .loader('sass-resources-loader')
            .options({
                resources: [
                    './node_modules/vue-component-utils/css/mixins.scss'
                ]
            })
            .end()
    })
}

使用

参考文件内的注释

引用的scss-flex插件

安装

npm install --save scss-flex

引用

在需要的地方引用即可

require('scss-flex');

示例

<div flex="main:center cross:center dir:top item:end">

使用说明

写在父项目的属性

dir：主轴方向

• top：从上到下
• right：从右到左
• bottom：从下到上
• left：从左到右（默认）

wrap: 换行方式

• nowrap：不换行（默认）
• wrap：换行，第一行在上方
• reverse：换行，第一行在下方

flow: 布局方式

• left-nowrap: 从左到右且不换行(默认)
• left-wrap: 从左到右且换行，第一行在上方
• left-reverse: 从左到右且换行，第一行在下方
• right-nowrap: 从右到左且不换行
• right-wrap: 从右到左且换行，第一行在上方
• right-reverse: 从右到左且换行，第一行在下方
• top-nowrap: 从上到下且不换行
• top-wrap: 从上到下且换行，第一行在上方
• top-reverse: 从上到下且换行，第一行在下方
• bottom-nowrap: 从下到上且不换行
• bottom-wrap: 从下到上且换行，第一行在上方
• bottom-reverse: 从下到上且换行，第一行在下方

main：主轴对齐方式

• right：从右到左
• left：从左到右（默认）
• between：两端对齐
• around: 分散对齐
• center：居中对齐

cross：交叉轴对齐方式

• top：从上到下（默认）
• bottom：从上到下
• baseline：基线对齐
• center：居中对齐
• stretch：高度并排铺满

main-cross: 主轴交叉轴对齐方式

• center: 居中

content: 多根轴线的对齐方式

• stretch: 轴线占满整个交叉轴（默认）
• start: 与交叉轴的起点对齐
• end: 与交叉轴的终点对齐
• center: 与交叉轴的中点对齐
• between: 与交叉轴两端对齐，轴线之间的间隔平均分布
• around: 每根轴线两侧的间隔都相等

box：子元素设置

• mean：子元素平分空间
• first：第一个子元素不要多余空间，其他子元素平分多余空间
• last：最后一个子元素不要多余空间，其他子元素平分多余空间
• justify：两端第一个元素不要多余空间，其他子元素平分多余空间

写在子项目的属性

item: 允许单个项目有与其他项目不一样的对齐方式

• auto: 继承父元素的 align-items 属性（默认）
• start: 居于轴顶部对齐
• end: 居于轴尾部对齐
• center：居于轴中心对齐
• baseline：居于基线对齐
• stretch：充满整个轴

order: 定义项目的排列顺序。数值越小，排列越靠前，默认为0

• 0~12
• -1~-12

flex-box: 自定义项目的放大或者缩小比例

• 0~10

组件介绍

elementUI组件

MyBackTop

示例

<my-back-top/>

MyCheckbox

示例

<my-checkbox :ifDisable="true" @getCheckboxValue="val=>{}"/>

配置参数

监听方法

getCheckboxValue：值改变时触发，参数为选中的勾选框的值数组；如果设置了extraInfo，参数变为{选中值数组，extraInfo}

MyDatePickerRange

示例

<my-date-picker-range input-hover-border-color="red" @changeValue="val=>{}"/>

配置参数

监听方法

changeValue：值改变时触发，参数为开始时间和结束时间数组，Date类型

MyRate

示例

<my-rate :value="0" @getValue="val=>{}"/>

配置参数

监听方法

getValue：分值改变时触发，返回值为改变后的分值

MyCascade

示例

<my-cascade :if-disable="true" input-hover-border-color="#000" @changeValue="val=>{}"/>

配置参数

myProps可设置参数

{
     expandTrigger:次级菜单的展开方式，可选值为'click'和'hover'，默认'click'
     multiple:是否多选，默认为false
     checkStrictly:是否严格的遵守父子节点不互相关联，默认为false
     emitPath:在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值，默认为true
     lazy:是否动态加载子节点，需与 lazyLoad 方法结合使用，默认为false
     lazyLoad:加载动态数据的方法，仅在 lazy 为 true 时有效	function(node, resolve)，node为当前点击的节点，resolve为数据加载完成的回调(必须调用)	-	-
     value:指定选项的值为选项对象的某个属性值，默认为'value'
     label:指定选项标签为选项对象的某个属性值，默认为'label'
     children:指定选项的子选项为选项对象的某个属性值，默认为'children'
     disabled:指定选项的禁用为选项对象的某个属性值，默认为'disabled'
     leaf:指定选项的叶子节点的标志位为选项对象的某个属性值，默认为'leaf'
}

监听方法

changeValue:值改变时触发，参数为options中选中的对象的value数组（级联的第一级，第二级...）

MyDialog

示例

<my-dialog width="50%" @closeFn="()=>{}"/>

配置参数

监听方法

closeFn：关闭的监听

注意事项

1. 必须在父组件中监听closeFn，设置显示隐藏的flag

MyInput

示例

<my-input ref="myInput" type="text" @changeValue="val=>{}"/>
---
this.$refs.myInput.focusFn()

配置参数

监听方法

1. changeValue：输入框的input事件，参数为input中的值，如果设置了extraInfo，参数变为{value:输入框值，info:extraInfo设置的值}
2. enterEvent：监听键盘上的回车事件
3. blurEvent：监听失去焦点事件，如果设置了extraInfo，会返回extraInfo
4. focusEvent：监听获得焦点事件
5. changeEvent：输入框的change事件。注意！因为在该监听中做了trim处理后更新了input值，所以若要在此监听取input值，需要根据情况重新做trim处理

组件方法

MyPagination

示例

<my-pagination ref="myPagination" :total="0" @pageInfoChange="pageInfo=>{}"/>
---
this.$refs.myPagination.setFlagFalse()

配置参数

监听方法

pageInfoChange：分页信息改变时会触发，返回值为{currentPageSize,pageNumber}

组件方法

MySelect

示例

<my-select audioSrc="src" @changeValue="val=>{}"/>

配置参数

监听方法

changeValue：值改变时触发，参数为选中的option的对象，如果设置了extraInfo，参数变为{value:option对象，info:extraInfo设置的值}

MyUpload

示例

<my-upload ref="myUpload" :ifDisable="false" @uploadError="()=>{}"/>
---
this.$refs.myUpload.cancelUpload()

配置参数

setDiyAjaxDataFn参数示例

<my-upload :setDiyAjaxDataFn="setDiyAjaxDataFn"/>
---
setDiyAjaxDataFn(file, suffix) {
    return {
        file: file
        suffix: suffix
    }
}

accept可选值

accept可选值

监听方法

1. uploadComplete：上传成功，如果设置了useDiySuccess，返回response，否则返回response.data
2. uploadError：上传失败
3. getFileName：文件变更的监听，参数为文件的名称
4. getCurrentFile：文件变更的监听，参数为当前文件

组件方法

注意事项

1. 加载此组件，只显示一个选择文件的按钮，如不需要，可设置btnHeight和btnWidth为0px
2. 如需做文件的大小校验，可以将autoUpload设为false，在getCurrentFile这个监听中做完校验后调用startUpload方法
3. 该组件暂只支持单文件上传！
4. 该组件含有插槽，可在隐藏自带上传按钮后自己写上传按钮或者其它内容

MyProgress

示例

<my-progress :percentage="0"/>

配置参数

MyRadio

示例

<my-radio :ifDisable="false" @getRadioValue="val=>{}"/>

配置参数

监听方法

getRadioValue：radio值改变时触发，参数为选中的Radio值；如果设置了extraInfo，参数变为{val:选中值，info:extraInfo设置的值}

MyTable

示例

<my-table ref="myTable"
          :set-title-border="true"
          :if-not-left-border="true"
          :if-not-right-border="true"
          :table-column-num="8"
          :stripe="true"
          table-diy-stripe-color="yellow"
          table-tr-background="blue"
          table-header-background="red"
          title-font-size="16px"
          title-color="#FFFFFF"
          cell-font-size="14px"
          cell-height="50px"
          title-line-height="1"
          title-height="34px"
          cell-font-color="#777777"
          border-color="#e6e6e6"
          title-border-color="#FFFFFF"
          cell-new-font-color-key="isReadFontColor"
          class="tableStyle"
          :tableSerial="{
              width: 42,
              label: '序号',
              ifCenter: true,
              cellPadding: 'cellPadding0'
          }"
          :table-title="[
                    {
                        label: '名称',
                        showOverflowTooltip: true,
                        ifCenter: true,
                        propName: 'name'
                    },
                    {
                        label: '分类',
                        showOverflowTooltip: true,
                        ifCenter: true,
                        propName: 'caseTypeName',
                        width: 149
                    },
                    {
                        label: '作者',
                        showOverflowTooltip: true,
                        ifCenter: true,
                        propName: 'authorName',
                        width: 79
                    }
                ]"
          :table-data="[
              {
                  id: '425872381732552704',
                  name: '教案数据完整性测试',
                  authorName: '???',
                  caseTypeName: '呼吸系统'
              },
              {
                  id: '425872381732552704',
                  name: '教案数据完整性测试2',
                  authorName: '???',
                  caseTypeName: '内科'
              }
          ]">
</my-table>
---
this.$refs.myTable.getTableData()

配置参数

tableTitle可设置参数

{
    id:启用拖拽时一定要加此属性
    label: 显示的表头名
    showOverflowTooltip: 是否启用当内容过长被隐藏时显示tooltip，默认不启用
    ifCenter: 表格内容是否居中，默认不居中
    propName: 该列的数据名称
    width: 该列宽度值
    ifSortable: 对应列是否可以排序
    cellPadding:修改单元格的左右边距，暂时支持的选项为'cellPadding26'、'cellPadding11'和'cellPadding0'
    ifDIYTitle1:自定义显示表头，对应的插槽为<template v-slot:header="slotProps">，slotProps.childrenInfo为对应该表头的一些属性，不用使用div，有默认样式
                                            {{(slotProps.childrenInfo.id}}
                                          </template>
    ifDIYContent1:自定义显示列，对应的插槽为<template v-slot:default="slotProps">，slotProps.childrenInfo为对应行的tableData中的数据
                                            {{(slotProps.childrenInfo.id}}
                                          </template>
    ifDIYContent2:自定义显示列，对应的插槽为<template v-slot:other1="slotProps">，slotProps.childrenInfo为对应行的tableData中的数据
                                            {{(slotProps.childrenInfo.id}}
                                          </template>
    ifDIYContent3:自定义显示列，对应的插槽为<template v-slot:other3="slotProps">，slotProps.childrenInfo为对应行的tableData中的数据
                                            {{(slotProps.childrenInfo.id}}
                                          </template>
    ifDIYContent4:自定义显示列，对应的插槽为<template v-slot:other4="slotProps">，slotProps.childrenInfo为对应行的tableData中的数据
                                            {{(slotProps.childrenInfo.id}}
                                          </template>
    ifDIYContent5:自定义显示列，对应的插槽为<template v-slot:other5="slotProps">，slotProps.childrenInfo为对应行的tableData中的数据
                                            {{(slotProps.childrenInfo.id}}
                                          </template>
}

tableSerial可设置参数

{
  width: 该列宽度值,
  label: 显示的表头名,
  ifCenter: 表格内容是否居中，默认不居中,
  cellPadding:修改单元格的左右边距，暂时支持的选项为'cellPadding26'、'cellPadding11'和'cellPadding0'
}

监听方法

1. dragEnd：拖拽结束
2. selectionChange：选择框选中的监听，参数为选中的tableData中的对象数组
3. selectCurrentVal：当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请设置ifOpenHighlightCurrentRow为true，参数为currentRow

组件方法

MyTimeline

示例

<my-timeline :activities="[]"/>

配置参数

VerticalNavMenu

示例

<vertical-nav-menu width="260px"
                   item-height="44px"
                   icon-margin-right="6px"
                   item-padding-right="16px"
                   item-padding-left="24px"
                   sub-item-padding-left="40px"
                   :menu-list="[{
                        toUrl: 'home',
                        label: '首页',
                        iconClass: 'icon-shouye'
                    },
                    {
                        label: '基础参数维护',
                        iconClass: '1',
                        children: [
                            {
                                toUrl: 'interrogation',
                                label: '问诊项目'
                            },
                            {
                                toUrl: 'aaa',
                                label: '问诊项目'
                            },
                            {
                                toUrl: 'interrogation3',
                                label: '问诊项目'
                            }
                        ]
                    },
                    {
                        toUrl: 'home2',
                        label: '首页2',
                        iconClass: '1'
                    },
                    {
                        label: '基础参数维护',
                        iconClass: '2',
                        children: [
                            {
                                toUrl: 'interrogation4',
                                label: '问诊项目'
                            },
                            {
                                toUrl: 'interrogation5',
                                label: '问诊项目'
                            },
                            {
                                toUrl: 'interrogation6',
                                label: '问诊项目'
                            }
                        ]
                    }]"
                   arrow-icon-height="6px"
                   arrow-icon-width="11px"
                   :if-use-hover-bgc1="true"
                   :if-use-active-bgc1="true"/>

配置参数

menuList中对象可设置项

{
    ifDisable:是否禁用
    toUrl:vue-router中设置的对应的路由的name
    label:菜单显示的名称
    iconClass:菜单前的图标的class（阿里矢量库的class），不使用图标不设置此属性。例如el-icon-document
    children:有二级菜单时，子菜单数组，没有不设置此属性
}

注意事项

1. 菜单的图标使用阿里巴巴矢量库的图标，font-family为font-family: "font_family" !important;
2. 菜单路径使用router中的name

MyTree

示例

<my-tree :treeData="[
            {
                id: 1,
                ifDIYContent1: true,
                ifFather: true,
                label: '影像',
                isSelected: false,
                children: [
                    {
                        id: 10,
                        ifFather: false,
                        ifDIYContent1: true,
                        label: '血液',
                        isSelected: false,
                        hasIcon: false,
                        children: []
                    },
                    {
                        id: 11,
                        ifFather: false,
                        ifDIYContent1: true,
                        label: '红细胞',
                        isSelected: false,
                        hasIcon: true,
                        children: []
                    }
                ]
            },
            {
                id: 2,
                ifFather: true,
                ifDIYContent1: true,
                label: '实验室',
                isSelected: false,
                children: [
                    {
                        id: 20,
                        ifFather: false,
                        ifDIYContent1: true,
                        label: '常规',
                        isSelected: false,
                        hasIcon: true,
                        children: []
                    }
                ]
            }
        ]"
         ref="myTree"
         :itemPaddingLeft="15"
         itemMarginRight="17px"
         :diyFilterFn="myFilterFn"
         itemMarginLeft="7px"
         activeItemBgColor="#eaeff0"
         :itemChildExtraPaddingLeft="29"
         leftTrianglePadding="0px"
         :changeStatusNameArr="['isSelected']"
         :showLeftTriangle="true"
         :notTriangle="true"
         :notBorderLeft="true"
         :notBorderRight="true">
    <template v-slot:default="slotProps">
        <div class="treeItem" flex="cross:center box:first">
            <div flex="cross:center">
                <div class="treeItemText">{{ slotProps.childrenInfo.label }}</div>
                <div v-if="slotProps.childrenInfo.hasIcon" class="treeItemIcon"></div>
            </div>
            <div class="operateDom" :class="{'isSelected': slotProps.childrenInfo.isSelected}">
                <div flex="cross:center main:right">
                    <div v-if="slotProps.childrenInfo.ifFather" flex="cross:center">
                        <div class="addIcon"></div>
                        <div class="addText">添加</div>
                    </div>
                    <div flex="cross:center">
                        <div class="editIcon"></div>
                        <div class="editText">编辑</div>
                    </div>
                    <div flex="cross:center">
                        <div class="deleteIcon"></div>
                        <div class="deleteText">删除</div>
                    </div>
                </div>
            </div>
        </div>
    </template>
</my-tree>

配置参数

treeData包含对象的具体参数配置

{
    ifDIYContent1:自定义显示内容，对应的插槽为<template v-slot:default="slotProps">，slotProps.childrenInfo为对应当前节点中的数据，slotProps.childrenLevel为对应当前节点的层数，初始是1
    disabled:设置是否禁用
    label:显示的内容，具体key名通过defaultProps配置
    children:子集的数组，具体key名通过defaultProps配置
}

监听方法

1. lastNodeClick：节点被点击时的回调，参数为传递给 treeData 属性的数组中该节点所对应的对象，其中itemLevel为当前节点的层数，初始为1
2. allowDropFn：拖拽时判定目标节点能否被放置。type 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后
3. checkChange：节点选中状态发生变化时的回调，参数为选中的节点data数组
4. nodeDropFn：拖拽成功完成时触发的事件，参数为{拖拽的节点的data，放置位置节点的data，放置方式(before、after、inner)}

组件方法

注意事项

1. treeData中必须有id属性
2. 节点被点击时，如果是父节点，会有300ms的展开/收缩动画

其它组件

CollapseTransition

示例

<collapse-transition dimension="width">
    <div>内容</div>
</collapse-transition>

配置参数

ComponentFadeOutIn

示例

<component-fade-out-in>
    <div>内容</div>
</component-fade-out-in>

MyAudio

示例

<my-audio ref="myAudio" audioSrc="src" @audioEnd="()=>{}"/>
---
this.$refs.myAudio.playAudio()

配置参数

监听方法

audioEnd：监听播放结束

组件方法

MyBtn

示例

<my-btn background-color-hover="red" :not-used="notUsed" @myClick="notUsed=true"/>

配置参数

监听方法

myClick：点击了按钮

MyFlowChart

示例

<my-flow-chart/>

MyFlvVideo

示例

<my-flv-video ref="myFlvVideo" audioSrc="src" @endedEvent="()=>{}"/>
---
this.$refs.myFlvVideo.play()

配置参数

监听方法

endedEvent：播放结束

组件方法

注意事项

1. 在父组件中需要手动调用此组件的start方法进行初始化，初始化成功后将自动播放

MyVideo

示例

<my-video ref="myVideo" audioSrc="src" @endedEvent="()=>{}"/>
---
this.$refs.myVideo.play()

配置参数

监听方法

1. onPlayerReady：组件准备就绪的监听
2. endedEvent：播放结束

组件方法

注意事项

1. 需要在模版文件引入以下

    <link href="https://unpkg.zhimg.com/video.js/dist/video-js.min.css" rel="stylesheet">
    <script src="https://unpkg.zhimg.com/video.js/dist/video.min.js"></script>

2. 在vue.config.js中需要如下配置

   configureWebpack: config => {
     config.externals = {
         'videojs': 'videojs'
     }
   }

3. 在父组件中监听onPlayerReady成功后调用此组件的play方法进行播放

MyMask

示例

<my-mask width="450px"/>

插槽

该组件共有3个插槽，分别为title（标题的dom），closeBtn（关闭按钮的dom），content（内容的dom）

<my-mask :width="width" :min-top="62" class="projectMask">
    <div slot="title" class="projectMaskTitleText" flex="cross:center">{{title}}</div>
    <div slot="closeBtn" @click="closeBtnFn" class="closeBtn"></div>
    <slot slot="content"/>
</my-mask>

配置参数

MyQRCode

示例

<my-q-r-code :logoScale="0.2"/>

配置参数

注意事项

1. logoScale不要设置的过大，否则识别不了

MySaveToPDF

示例

import { MySaveToPDF } from "vue-component-utils";
MySaveToPDF.methods.saveToPDFFn('我的模拟实践训练成绩', this.$refs.myTable)
MySaveToPDF.methods.printPDFFn(this.$refs.myTable)

组件方法

注意事项

1. printPDFFn方法只能在弹出的新窗口打印

MySendMessageBox

示例

<my-send-message-box ref="mySendMessageBox" audioSrc="src" @endedEvent="()=>{}"/>
---
this.$refs.mySendMessageBox.sendSmsSuccess()

配置参数

监听方法

sendSms：点击了按钮

组件方法

注意事项

1. 此组件需要在父组件中手动调用组件内的方法使用

MySwiper

示例

<my-swiper ref="mySwiper" :slidesArr="[]" @getCurrentActiveIndex="activeIndex=>{}"/>
---
this.$refs.mySwiper.slideToIndex(index)

插槽

<template v-slot:default="slotProps"></template>

其中slotProps.itemInfo.item为对应的数据，slotProps.itemInfo.index为对应的下标

配置参数

监听方法

getCurrentActiveIndex：监听activeIndex值的变化，返回activeIndex

组件方法

写在最后

个人开发和维护，有需求或者bug请联系我的邮箱，看到后会第一时间回复
Email：323247568@qq.com