vue自定义封装全局组件与使用

以前只知道第1种局部组件。每个页面都需要引入，注册，然后才能像2一样使用！

下面学习一下全局组件的封装方法：

1、注册全局组件

在项目文件src→util→component.js文件，注册全局组件。

import transitionPage from '@/components/transition/index' //滑入滑出组件
import viewTextarea from '@/components/viewTextarea/index' //模拟textarea 展示富文本信息
export default (Vue)=>{Vue.component("transitionPage", transitionPage)Vue.component("viewTextarea", viewTextarea)
}

2、封装组件

在项目文件src→components→transition→index.vue文件（后面两个名字自取），在这写要封装的内容。（样式和布局可以复制原有的源码）

<template><div ref="transform"><!--1.关闭按钮--><div v-if="visible" class="avue-mask" @click="close"></div><!--2.弹窗内容--><transition class="nametra" name="slide-fade" mode="out-in"><div :class="visible?'transitionOpen':'transitionClose'" class="avue-drawer__wrapper" style="background-color: white"><div class="avue-drawer__content"><!--2.1弹窗标题--><div class="avue-drawer__header"><span class="avue-drawer__title">{{tableName}}</span></div><!--2.2弹窗数据表单，用子组件方式传入，可根据type类型显示对应表单，满足不同页面的表单需求--><div class="avue-drawer__body" style="height: calc(100% - 140px);overflow-y: auto;"><div class="el-scrollbar__view"><!--2.2.1会员系统-客户建议-意见建议-回复记录--><div v-if="type === 'messageData'"><message-data ref="messageData" :objectData="objectData" :arrayData="arrayData"></message-data></div><!--2.2.2消息管理-消息发送--><div v-if="type === 'messageSend'"><send-message ref="sendMessage" :tableName="tableName" :dataFrom="editData"></send-message></div><!--2.2.3微信中心-微信管理-模版参数-编辑弹窗--><div v-if="type === 'editTemplate'"><edit-template ref="editTemplate" :editTemplateId="editTemplateId" :editTemplateTitle="editTemplateTitle"></edit-template></div></div></div><!--2.3底部右下角按钮，可根据type类型显示对应按钮，满足不同页面的按钮需求--><div class="avue-drawer__footer" style="position: relative"><span  v-if="type === 'messageSend'" style="margin-right: 10px" class="dialog-footer"><el-button type="success" size="small" @click="sendMessageSubmit('saveSend')">发送</el-button></span><span  v-if="type === 'messageSend'" style="margin-right: 10px" class="dialog-footer"><el-button type="primary" size="small" @click="sendMessageSubmit('save')">暂存</el-button></span><span  v-if="(type === 'financialPro' && tableName === '新增') || (type === 'healthyPro' && tableName === '新增')|| (type === 'healthInvest' && tableName === '新增') "style="margin-right: 10px" class="dialog-footer"><el-button type="primary" size="small" @click="keepClose('save')">保存</el-button></span><span v-if="type === 'nodeConfigEdit' || type === 'editTemplate' || (type === 'giftInfo' && tableName === '编辑')|| (type === 'reportTemplate' && confirmEnding(tableName,'编辑'))" style="margin-right: 10px" class="dialog-footer"><el-button type="primary" size="small" @click="editClose">修改</el-button></span><span class="dialog-footer"><el-button type="default" size="small" @click="close">关闭</el-button></span></div></div></div></transition></div>
</template><script>/*引入需要的子组件--表单内容*/import creatView from '@/views/hygl/syslcpz/creatView/index'import cbView from '@/views/hygl/syslcspdbsx/cbView/index'import presentPoints from '@/views/hygl/rfjfzs/presentPoints/index'import memberInfo from '@/views/hygl/hyjbxx/memberInfo/index'import financialInvest from '@/views/hygl/rfjrtzjy/financialInvest/index'import healthyPro from '@/views/hygl/rfjkcpxx/healthyPro/index'import giftInfo from '@/views/hygl/rflpzlxx/giftInfo/index'import messageData from '@/views/hygl/rfyjjy/components/messageData'import editTemplate from '@/views/mp/wxmsgtemplate/editPage/index'export default {//注册components: {messageData,editTemplate,sendMessage},//向子组件传入数据props: {//通过type来判断需要那个组件type:{type: String,default: '',},//弹窗的标题tableName:{type: String,default: ''},//传入的对象objectData:{type: Object,default: function () {return {}},},//传入的数组arrayData:{type:Array,default: function () {return []},},//传入的字符串editTemplateId:{type: String,default: '',},editTemplateTitle:{type: String,default: '',}},data() {return {visible: true}},created(){},mounted(){ },methods: {confirmEnding(str, target) {var start = str.length-target.length;var arr = str.substr(start,target.length);if(arr == target){return true;}return false;},//未编辑直接关闭窗口close(){this.visible = falsesetTimeout(() => {if (this.type === 'messageData'){this.$emit('messageDataClose')}else if (this.type === 'editTemplate'){this.$emit('editTemplateClose')}else if (this.type === 'messageSend'){this.$emit('messageSendDialongClose')}}, 300);},//消息发送 保存、保存并发送sendMessageSubmit(data){this.$refs.sendMessage.submitForm()if (this.$refs.sendMessage.dynamicValidate) {var row = this.$refs.sendMessage.editDatavar wzObject = this.$refs.sendMessage.wzObjectvar fileNameUrl = this.$refs.sendMessage.fileNameUrlvar para = {}if(data === 'save'){para.type = 1}else if (data === 'saveSend'){para.type = 2}para.dsfs = falsepara.fsrid = row.fsridwzObject['jsrid'] = JSON.stringify(row.jsrid)para.wz = JSON.stringify(wzObject)para.fsfs = row.fsfspara.jsrid = []for (var i = 0;i<row.jsrid.length;i++){let m = row.jsrid[i].lengthpara.jsrid.push(row.jsrid[i][m-1])}var fileArray = []Object.keys(fileNameUrl).forEach(function(key){//opPlaceholder 为占位符，用来区别key和value分界线//可用split（'opPlaceholder'）切割获 key valuefileArray.push(key+ 'opPlaceholder' +fileNameUrl[key])});para.xxfj = fileArray.join(',')para.xxfjmc = row.xxfjmc.join(',');para.jsrid = para.jsrid.join(',');para.xxbt = row.xxbtpara.xxnr = row.xxnrrow.jssj?  para.jssj = row.jssj:  para.jssj = ''row.kssj?  para.kssj = row.kssj:  para.kssj = ''row.msrid?  para.msrid = row.msrid:  para.msrid = ''row.csrid?  para.csrid = row.csrid:  para.csrid = ''row.sfjj?  para.sfjj = row.sfjj:  para.sfjj = ''row.sfhf?  para.sfhf = row.sfhf:  para.sfhf = ''row.ggxx?  para.ggxx = row.ggxx:  para.ggxx = ''row.yhjf?  para.yhjf = row.yhjf:  para.yhjf = ''if(row.dsfssj){para.dsfssj = row.dsfssjpara.dsfs = true}else{para.dsfssj = ''para.dsfs = false}this.$emit('messageSendClose', para)}},//保存按钮事件，点击保存将子组件的需提交的对象数据通过this.$emit向父组件传达keepClose(){if (this.type === 'financialInvest') {var financialInvestData =  this.$refs.financialInvest.dataFrom//子组件的数据this.$emit('healthyProAddClose',financialInvestData)//向父组件传数据}else if (this.type === 'creatView'){this.$refs.creatView.submitForm()//子组件中的表单校验if (this.$refs.creatView.dynamicValidate) {//全部校验通过再传数据var financialProData = this.$refs.creatView.dataFromthis.$emit('creatViewAdd', financialProData)}}else if (this.type === 'healthyPro') {this.$refs.healthyPro.submitForm()if (this.$refs.healthyPro.dynamicValidate) {var healthyProData = this.$refs.healthyPro.dataFrom//传数据前可做数据处理后再传if (healthyProData.cplx.length) {healthyProData.cplx = healthyProData.cplx[healthyProData.cplx.length-1]} else if ( healthyProData.cplx) {healthyProData.cplx =  healthyProData.cplx}this.$emit('healthyProAddClose', healthyProData)}}else if (this.type === 'presentPoints') {this.$refs.presentPoints.submitForm()if (this.$refs.presentPoints.dynamicValidate) {this.$refs.presentPoints.changeRadioTabs()var presentPoints = this.$refs.presentPoints.dataFromthis.$emit('presentPointsAddClose', presentPoints)}}else if (this.type === 'memberInfo') {this.$refs.memberInfo.submitForm()if (this.$refs.memberInfo.dynamicValidate) {var memberInfo = {}if (this.$refs.memberInfo.addType == 1){memberInfo = this.$refs.memberInfo.perDataFrom}else {memberInfo = this.$refs.memberInfo.mecDataFrom}memberInfo.hylx = this.$refs.memberInfo.addTypethis.$emit('memberInfoAddClose', memberInfo)}}},//编辑完关闭窗口函数     //写法同保存按钮editClose(){if (this.type === 'editTemplate') {setTimeout(() => {this.$refs.editTemplate.editSubmit()this.$emit('editTemplateClose','fresh')//fresh 为编辑成功后刷新页面}, 300);}else if (this.type === 'giftInfo'){this.$refs.giftInfo.submitForm()if (this.$refs.giftInfo.dynamicValidate) {var dataFrom = this.$refs.giftInfo.dataFromthis.$emit('giftInfoClose',dataFrom)}}}}}
</script><style scoped>.transitionOpen{width:60%;/*height:100px;*//*position:static;*/animation:mymove .3s ;-moz-animation:mymove .3s ; /* Firefox */-webkit-animation:mymove .3s ; /* Safari and Chrome */-o-animation:mymove .3s ; /* Opera */-webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}@keyframes mymove{0%   {width:0px}100% {width:60%}}.transitionClose{width: 0px;animation:closemove .3s ;-moz-animation:closemove .3s ; /* Firefox */-webkit-animation:closemove .3s ; /* Safari and Chrome */-o-animation:closemove .3s ; /* Opera */-webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}@keyframes closemove{0%   {width:60%}100% {width:0px}}</style>

3、全局组件中的子组件

因为每个页面的表单会有不一样，所以单独作为子组件单独建立。
在需要自定义子组件的文件目录里：src→views→admin→sysxxfsgl→sendMessage→index.vue文件（后面两个名字自取），在这写要封装子组件数据表单内容。

<template><div><div class="avue-from"><el-form ref="form" :model="editData" label-width="140px"><el-row><el-col :span="23"><el-form-item label="接收人"  prop="jsrid" :rules="[ {type: 'array', required: true, message: '请选择接收人', trigger: 'blur' }]"><el-cascader:disabled="show"style="width: 100%":show-all-levels="false":options="options":props="props"v-model="editData.jsrid"clearable></el-cascader></el-form-item></el-col></el-row><el-row><el-col :span="23"><el-form-item label="主题" prop="xxbt" :rules="[ { required: true, message: '请输入标题', trigger: 'blur' }]"><el-input size="small" :disabled="show" v-model="editData.xxbt"></el-input></el-form-item></el-col></el-row><el-row><el-col :span="6"><el-form-item label="" prop="fsfs" style="display: inline-block" :rules="[ { required: true, message: '请选择发送方式', trigger: 'blur' }]"><!--<el-radio v-model="editData.fsfs" label="1" border size="medium">短信</el-radio>--><!--<el-radio v-model="editData.fsfs" label="2" border size="medium">邮件</el-radio>--><el-dropdown  style="width: 200px" @command="handleCommand"><el-button :disabled="show" size="small">{{commandTitle}}<i class="el-icon-arrow-down el-icon--right"></i></el-button><el-dropdown-menu v-if="!show" style="width: 110px" slot="dropdown"><el-dropdown-item command="系统消息">系统消息</el-dropdown-item><el-dropdown-item command="微信发送">微信发送</el-dropdown-item><el-dropdown-item command="手机短信">手机短信</el-dropdown-item></el-dropdown-menu></el-dropdown><!--<el-radio v-model="editData.fsfs" label="4" border size="medium">系统消息</el-radio>--><!--<el-radio v-model="editData.fsfs" label="3" border size="medium">微信</el-radio>--></el-form-item></el-col><el-col :span="18"><el-form-item style="display: inline-block;width: 100%"><el-upload:disabled="show"style="display: inline-block":headers="headers":show-file-list="false":on-success="handleAvatarSuccess":on-progress="uploadVideoProcess"accept=".doc,.docx,.pdf.xls,.xlsx,.wps"action="/admin/sys-file/upload":on-change="getFile"><el-button :disabled="show" size="small" icon="el-icon-link" @click="changeLoading(true)">上传附件</el-button></el-upload><el-progress v-if="processFlag === true" :stroke-width="10" :percentage="processUploadPercent" style="margin-top:-25px;margin-left:120px; width: 200px"></el-progress></el-form-item></el-col></el-row><div><template v-for="(item,index) in fileList"><el-row v-if="index % 2 == 0"><el-col :span="11" v-if="fileList[index].response"><el-form-item style="display: inline-block;margin: 0 auto" ><div class="el-upload-list__item is-success" style="margin: 0 auto"><a class="el-upload-list__item-name" style="margin-top: 0" :href="fileListUrl[fileList[index].uid]" ><i class="el-icon-document" />{{ item.name}}</a><label class="el-upload-list__item-status-label"><i class="el-icon-upload-success el-icon-circle-check"></i></label><i v-if="!show" class="el-icon-close" @click="deleteFile(item,index)"></i></div></el-form-item></el-col><el-col v-if="index+1<fileList.length && fileList[index+1].response" :span="11"><el-form-item style="display: inline-block; margin: 0 auto"><div class="el-upload-list__item is-success" style="margin: 0 auto"><a class="el-upload-list__item-name" style="margin-top: 0" :href="fileListUrl[fileList[index+1].uid]"><i class="el-icon-document" />{{ fileList[index+1].name}}</a><label class="el-upload-list__item-status-label"><i class="el-icon-upload-success el-icon-circle-check"></i></label><i v-if="!show" class="el-icon-close" @click="deleteFile(item,index+1)"></i></div></el-form-item></el-col></el-row></template></div><!--<el-row>--><!--<el-col :span="23">--><!--<el-form-item label="内容模板">--><!--<el-select style="width: 100%" v-model="editData.mbid" placeholder="请选择引入模板" @change="changeXxnr">--><!--<el-option--><!--v-for="item in TemplateList"--><!--:key="item.id"--><!--:label="item.templateName"--><!--:value="item.id"--><!--:disabled="item.disabled">--><!--<div style="width:200px; float: left" :title="item.templateContent">{{ item.templateName }}</div>--><!--<div :title="item.templateContent" style="width:100px; float: left">{{ item.templateContent }}</div>--><!--&lt;!&ndash;<div style="width:100px; float: left">{{ item.school }}</div>&ndash;&gt;--><!--</el-option>--><!--</el-select>--><!--</el-form-item>--><!--</el-col>--><!--</el-row>--><el-row><el-col :span="23"><el-form-item prop="xxnr" label="" style="margin-bottom: 30px;" :rules="[ {  required: true, message: '请输入发送内容', trigger: 'blur' }]"><Tinymce v-if="(editData.fsfs === '2' || editData.fsfs === '4') && !show" ref="editor" v-model="editData.xxnr" value="1" :height="270" /><!--<view-textarea v-if="show" :data="dataFrom.xxnr"></view-textarea>--><el-input v-if="(editData.fsfs === '1' || editData.fsfs === '3') && !show" type="textarea" :autosize="{ minRows: 6, maxRows: 10}" v-model="editData.xxnr"></el-input><view-textarea v-if="show" :data="editData.xxnr"></view-textarea></el-form-item><!--<el-form-item label="发送内容">--><!----><!--</el-form-item>--></el-col></el-row><el-row><el-col :span="23"><el-form-item label=" "><el-checkbox-group :disabled="show" v-model="checkList" @change="changeCheckList"><el-checkbox label="sfjj">紧急</el-checkbox><el-checkbox label="sfhf">需回复</el-checkbox><el-checkbox label="ggxx">公告</el-checkbox><el-checkbox label="dsfs">定时发送</el-checkbox><el-checkbox label="yhjf" >阅后即焚</el-checkbox><el-checkbox label="csz">抄送至</el-checkbox><el-checkbox label="msz">密送至</el-checkbox></el-checkbox-group></el-form-item></el-col></el-row><el-row v-if="this.checkList.indexOf('ggxx') !== -1"><el-col :span="23" ><el-form-item label=" "><el-date-picker:disabled="show"style="width: 400px"v-model="dateTimeRange"format="yyyy-MM-dd HH:mm:ss"value-format="yyyy-MM-dd HH:mm:ss"type="datetimerange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"@change="getDateTimeRange()"></el-date-picker><br/><span style="color: rgb(225,204,102)">公告日期结束后，系统自动撤回置顶</span></el-form-item></el-col></el-row><el-row v-if="this.checkList.indexOf('dsfs') !== -1"><el-col :span="23"><el-form-item label=" "><el-date-picker:disabled="show"format="yyyy-MM-dd HH:mm:ss"value-format="yyyy-MM-dd HH:mm:ss"style="width: 400px"v-model="editData.dsfssj"type="datetime"placeholder="选择日期时间"></el-date-picker><br/><span style="color: rgb(225,204,102)">消息将于上述时间定时发出</span></el-form-item></el-col></el-row><el-row v-if="this.checkList.indexOf('csz') !== -1"><el-col :span="23"><el-form-item label="抄送人："><el-cascader:disabled="show"style="width: 100%":options="options":props="props"v-model="csridArray":show-all-levels="false"@change="changeCSR"></el-cascader></el-form-item></el-col></el-row><el-row  v-if="this.checkList.indexOf('msz') !== -1"><el-col :span="23"><el-form-item label="密送人："><el-cascader:disabled="show"style="width: 100%":options="options":props="props"v-model="msridArray":show-all-levels="false"clearable@change="changeMSR"></el-cascader></el-form-item></el-col></el-row><!--{{this.editData.jsrid}}--><!--<el-row>--><!--<el-col :span="12">--><!--<el-form-item label="定时发送">--><!--<el-switch--><!--v-model="dataFrom.dsfs"--><!--active-color="#13ce66"--><!--inactive-color="#ff4949">--><!--</el-switch>--><!--</el-form-item>--><!--</el-col>--><!--<el-col :span="12">--><!--<el-form-item label="发送时间">--><!--<el-date-picker--><!--style="width: 100%"--><!--v-model="dataFrom.fsrq"--><!--align="right"--><!--type="date"--><!--placeholder="选择日期"--><!--:picker-options="pickerOptions">--><!--</el-date-picker>--><!--</el-form-item>--><!--</el-col>--><!--</el-row>--></el-form></div><!--<percent-transition v-if="isEdit" @nodeTransitionClose="nodeTransitionClose" tableName="编辑"--><!--:nodeConfigDialogVisible="isEdit" :editData="editData"></percent-transition>--></div>
</template><script>import {mapGetters,mapState} from 'vuex'import Tinymce from '@/components/Tinymce'import {exportExcel, getFileService } from '@/util/util'import {fetchList} from '@/api/mp/wxtexttemplate'import {getReceiverList} from '@/api/admin/sysxxfsgl'import store from '@/store'export default {components:{Tinymce},props: {dataFrom:{type: Object,default: function () {return {};}},editData:{type: Object,default: function () {return {};}},tableName:{type: String,default: ''},},data() {return {headers: {Authorization: 'Bearer ' + store.getters.access_token},wjmcUrl: [],fileName:'',fileList: [],fileListUrl: [],fileNameUrl: [],fileExist:false,listLoading:false,fileviewURL:"",commandTitle: '',editData: {},dealerSelect: [],value: '',receiverList: [],TemplateList: [],// props: { multiple: false },props: { multiple: true },dynamicValidate: false,options: [],checkList:[],processFlag:false,processUploadPercent: 0,jsrArray: [],csridArray: [],msridArray: [],dateTimeRange:[],wzObject: {},show: true}},computed: {...mapGetters(['permissions']),...mapState({userInfo: state => state.user.userInfo}),permissionList() {return {addBtn: this.vaildData(this.permissions.hygl_syslcjdpz_add, false),delBtn: this.vaildData(this.permissions.hygl_syslcjdpz_del, false),editBtn: this.vaildData(this.permissions.hygl_syslcjdpz_edit, false),excelBtn:this.vaildData(this.permissions.hygl_syslcjdpz_excel, false)};},isPermissions(){return [this.vaildData(this.permissions.hygl_syslcjdpz_add, false),this.vaildData(this.permissions.hygl_syslcjdpz_edit, false),this.vaildData(this.permissions.hygl_syslcjdpz_del, false),this.vaildData(this.permissions.hygl_syslcjdpz_sj, false),this.vaildData(this.permissions.hygl_syslcjdpz_fh, false),this.vaildData(this.permissions.hygl_syslcjdpz_excel, false),this.vaildData(this.permissions.hygl_syslcjdpz_import, false)]}},mounted(){this.getReceiverList()if (this.confirmEnding(this.tableName,'编辑') || this.confirmEnding(this.tableName,'新增')){this.show = false}if (this.tableName === '新增'){this.editData = {wz:'',jsrid: [],fsfs: '4'}this.commandTitle = '系统消息'}else {this.editData = JSON.parse(JSON.stringify(this.dataFrom))let wz = JSON.parse(this.editData.wz)if (this.editData.wz.indexOf('jsrid') !== -1){this.editData.jsrid = JSON.parse(wz.jsrid)}if (this.editData.wz.indexOf('msridArray') !== -1){this.msridArray = JSON.parse(wz.msridArray)this.changeMSR()}if (this.editData.wz.indexOf('csridArray') !== -1){this.csridArray = JSON.parse(wz.csridArray)this.changeCSR()}this.getcheckList()// this.editData.jsrid = JSON.parse(this.editData.wz)// this.editData.jsrid = JSON.parse(this.editData.wz)if (this.editData.fsfs && this.editData.fsfs == 4){this.commandTitle = '系统消息'} else if (this.editData.fsfs && this.editData.fsfs == 3){this.commandTitle = '微信发送'}else if (this.editData.fsfs && this.editData.fsfs == 1){this.commandTitle = '手机短息'}this.dateTimeRange=[]this.dateTimeRange.push(this.editData.kssj)this.dateTimeRange.push(this.editData.jssj)}this.editData.fsrid = this.userInfo.userIdthis.getFileInfo()this.getReceiverList()// this.getTemplateList()this.editData.xxfjmc=[]},methods: {// getJSR(){//   let idArray = []//   this.jsrArray.forEach((value) => {//     idArray.push(value[value.length-1])//   })//   this.editData.jsrid = idArray.join(',')// },confirmEnding(str, target) {// 请把你的代码写在这里var start = str.length-target.length;var arr = str.substr(start,target.length);if(arr == target){return true;}return false;},getcheckList(){this.checkList = []this.editData['sfjj'] == 1?this.checkList.push('sfjj'):0this.editData['sfhf'] == 1?this.checkList.push('sfhf'):0this.editData['ggxx'] == 1?this.checkList.push('ggxx'):0this.editData['dsfs'] == 1?this.checkList.push('dsfs'):0this.editData['yhjf'] == 1?this.checkList.push('yhjf'):0this.editData.wz.indexOf('msridArray') !== -1?this.checkList.push('msz'):0this.editData.wz.indexOf('csridArray') !== -1?this.checkList.push('csz'):0},getDateTimeRange(){this.editData.kssj = this.dateTimeRange[0]this.editData.jssj = this.dateTimeRange[1]},changeCSR(){let idArray = []this.wzObject['csridArray'] = JSON.stringify(this.csridArray)this.csridArray.forEach((value) => {idArray.push(value[value.length-1])})this.editData.csrid = idArray.join(',')},changeMSR(){let idArray = []this.wzObject['msridArray'] = JSON.stringify(this.msridArray)this.msridArray.forEach((value) => {idArray.push(value[value.length-1])})this.editData.msrid = idArray.join(',')},changeCheckList(){this.checkList.indexOf('sfjj') !== -1? this.editData['sfjj'] = 1 : this.editData['sfjj'] = 0this.checkList.indexOf('sfhf') !== -1? this.editData['sfhf'] = 1 : this.editData['sfhf'] = 0this.checkList.indexOf('ggxx') !== -1? this.editData['ggxx'] = 1 : this.editData['ggxx'] = 0this.checkList.indexOf('dsfs') !== -1? this.editData['dsfs'] = 1 : this.editData['dsfs'] = 0this.checkList.indexOf('yhjf') !== -1? this.editData['yhjf'] = 1 : this.editData['yhjf'] = 0if (this.checkList.indexOf('csz') !== -1) {this.csz = 1}else {this.csz = 0this.csridArray = []this.changeCSR()}if (this.checkList.indexOf('msz') !== -1) {this.msz = 1}else {this.msz = 0this.msridArray = []this.changeMSR()}},//删除文件deleteFile(item,index){this.dataFrom.xxfjmc.splice(index,1);for(var i=0;i<this.dataFrom.xxfjmc.length;i++){this.editData.xxfjmc.push(this.dataFrom.xxfjmc[i])}if ( this.editData.xxfj) {var xxfj = []if (this.editData.xxfj.indexOf(',') > 0) {xxfj = this.editData.xxfj.split(',')} else {xxfj.push(this.editData.xxfj)}var raw=[]for(var i=0;i<xxfj.length;i++){raw.push(xxfj[i].split('opPlaceholder')[3])}raw.splice(index,1);}delete this.fileListUrl[this.fileList[index].uid];// this.fileNameUrl.splice(index,1);this.fileList.splice(index,1);this.fileList.forEach((value,index) => {this.fileNameUrl.push(value.name + 'opPlaceholder' + value.uid+ 'opPlaceholder' + raw[index])})},changeLoading(bool){this.listLoading = bool},uploadVideoProcess(event, file, fileList){this.processFlag = true;this.processUploadPercent = file.percentage.toFixed(0);},handleAvatarSuccess(res, file) {this.processFlag = false;this.processUploadPercent = 0;this.listLoading = falsethis.wjmcUrl.push(URL.createObjectURL(file.raw)) ;this.fileName = res.data.bucketName + '-' + res.data.fileName;this.editData.xxfjmc.push(this.fileName)},getFile:function(file, fileList) {// this.fileNameUrl = []let data = {}let uid = file.uidvar fileNameUrl=[]data[uid] = URL.createObjectURL(file.raw)this.fileListUrl[uid] = URL.createObjectURL(file.raw)fileList.forEach((value) => {fileNameUrl.push(value.name + 'opPlaceholder' + value.uid+ 'opPlaceholder' + URL.createObjectURL(value.raw))})this.fileNameUrl=fileNameUrlthis.fileList = fileListthis.$forceUpdate();},handleCommand(command) {if (command === '系统消息'){if (this.commandTitle !== '系统消息'){this.commandTitle = '系统消息'this.editData.fsfs = '4'}} else if (command === '微信发送'){if (this.commandTitle !== '微信发送'){this.commandTitle = '微信发送'this.editData.fsfs = '3'}}else if (command === '手机短信'){if (this.commandTitle !== '手机短信'){this.commandTitle = '手机短信'this.editData.fsfs = '1'}}},// getTemplateContent(){//   for (var i = 0;i<this.TemplateList.length;i++){//     if (this.TemplateList[i].id === this.editData.mbid) {//       this.editData.xxnr = this.TemplateList[i].templateContent//       this.$forceUpdate();//     }//   }// },// changeXxnr(){//  if (!this.editData.xxnr){//    this.getTemplateContent()//  }else {//    this.$confirm('此操作覆盖现有发送内容, 是否继续?', '提示', {//      confirmButtonText: '确定',//      cancelButtonText: '取消',//      type: 'warning'//    }).then(() => {//      this.getTemplateContent()//    }).catch(() => {//      this.$message({//        type: 'info',//        message: '已取消'//      });//    });//  }// },submitForm() {this.$refs['form'].validate((valid) => {if (valid) {this.dynamicValidate = true} else {this.$message.error('请按提示填写必填信息！')this.dynamicValidate = false}});},getReceiverList(){getReceiverList().then(res=>{this.options = res.data.datathis.options = JSON.parse(JSON.stringify(this.options).replace(/name/g, 'label'))this.options = JSON.parse(JSON.stringify(this.options).replace(/children[0]/g, 'label'))// this.options = JSON.parse(JSON.stringify(this.options).replace(/name/g, 'value'))})},getFileInfo(){this.editData.xxfj === undefined? this.editData.xxfj= '': 0if ( this.editData.xxfj) {let xxfj = []if(this.editData.xxfj.indexOf(',')>0){xxfj=this.editData.xxfj.split(',')}else{xxfj.push(this.editData.xxfj)}let fileList = []let fileListUrl = []xxfj.forEach((value, index) =>{fileList[index] = {name: value.split('opPlaceholder')[1], response: 1,uid:value.split('opPlaceholder')[2]}fileListUrl[value.split('opPlaceholder')[2]] = value.split('opPlaceholder')[3]// fileList[index] = {name: value.split('opPlaceholder')[0], response: 1,uid:value.split('opPlaceholder')[1]}// fileListUrl[value.split('opPlaceholder')[1]] = value.split('opPlaceholder')[2]})this.fileList = fileListthis.fileListUrl = fileListUrl}},getTemplateList(){var row = {isAll:true}fetchList(row).then(res=>{this.TemplateList = res.data.data.records})},saveOrSendMessage(){},}}
</script><style scoped></style>

4、使用全局组件

    <transition-page v-if="DialogVisible" @messageSendClose="messageSendClose" @messageSendDialongClose="messageSendDialongClose" :editData="editData" type="messageSend" :DialogVisible="DialogVisible" :tableName="titleName"></transition-page>

vue自定义封装全局组件与使用相关推荐

Vue Tooltip封装全局问号提示组件
前言我们经常在网站看到一个小问号鼠标放上去会出现一段文字,移开文字消失.起到一个提示功能. 它其实是Tooltip + icon 实现的,但是有一个小问题,就是修改背景颜色和文字颜色不生效. 其实是 ...
Vue自定义InputNumber 计数器组件
1.为什么要自己封装一个InputNumber 计数器组件? 因为原始的el-element的el-input-number组件有问题: 原生组件能输入英文,不能限制只能输入数值: 原始组件能通过键盘 ...
vue自定义音频播放组件_易于创建Vue的自定义音频播放器组件
vue自定义音频播放组件音频更好 (vue-audio-better) Easy to create custom audio player components for Vue.js. 易于为Vu ...
vue自定义日历小组件
vue自定义小日历组件一.前言自己开发的项目需要用到类似博客侧边栏小日历组件,觉得自己造一个比较随心所欲,更能满足自己的需求,所以决定自己开发一个.最终效果如图所示. 二.日历样式我的这个日历组 ...
基于vue element-ui 封装上传图片组件功能:上传,删除,预览,上传图片水印,拖拽排序,上传进度条等
学习目标: 我们在开发后台时肯定避免不了上传图片的功能例如: 上传图片回显上传完成 : 预览查看 , 删除等如果是图片列表,还可能让你拖动图片排序有的后台项目可能要给图片添加水印,添加标记有 ...
Vue 自定义多选组件
Vue 自定义多选组件子组件(选项卡) checkBoxCard.vue <template><div class="checkBoxCard">< ...
前端 vue 自定义导航栏组件高度及返回箭头自定义 tabbar 图标
前端vue自定义导航栏组件高度及返回箭头自定义tabbar图标, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12986 喜 ...
vue 自定义键盘组件_使用Vue自定义数字键盘组件的方法
这篇文章主要介绍了关于使用Vue自定义数字键盘组件的方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下最近做 Vue 开发,因为有不少页面涉及到金额输入,产品老是觉得用原生的 inp ...
Vue 自定义一个全局弹框组件
前文:其实element ui有提供this.$mesage和this.$notify弹框组件可供使用,但是我们的ui设计的样式以及布局还是不完全一样的,为了达到100%的呈现效果,所以自己写了一个全 ...
Vue中封装打印组件包括基本信息、表格用途出库单、入库单、请购单等单据
1.我们在工作中,在中后台系统应用中,经常会遇到打印的问题. 2.产品需求将列表详情数据能够打印生产单据,包括列表详情的所有数据. 3.通常我们可以通过接口拿到一定格式的JSON数据. 打印组件,总的 ...