600字范文 > vue自定义封装全局组件与使用

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

时间：2020-11-12 06:25:46

相关推荐

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

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

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

1、注册全局组件

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

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

2、封装组件

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

<template><div ref="transform"><div v-if="visible" class="avue-mask" @click="close"></div><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"><div class="avue-drawer__header"><span class="avue-drawer__title">{{tableName}}</span></div><div class="avue-drawer__body" style="height: calc(100% - 140px);overflow-y: auto;"><div class="el-scrollbar__view"><div v-if="type === 'messageData'"><message-data ref="messageData" :objectData="objectData" :arrayData="arrayData"></message-data></div><div v-if="type === 'messageSend'"><send-message ref="sendMessage" :tableName="tableName" :dataFrom="editData"></send-message></div><div v-if="type === 'editTemplate'"><edit-template ref="editTemplate" :editTemplateId="editTemplateId" :editTemplateTitle="editTemplateTitle"></edit-template></div></div></div><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-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-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 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" /><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-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></el-form></div></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'}mandTitle = '系统消息'}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){mandTitle = '系统消息'} else if (this.editData.fsfs && this.editData.fsfs == 3){mandTitle = '微信发送'}else if (this.editData.fsfs && this.editData.fsfs == 1){mandTitle = '手机短息'}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 (mandTitle !== '系统消息'){mandTitle = '系统消息'this.editData.fsfs = '4'}} else if (command === '微信发送'){if (mandTitle !== '微信发送'){mandTitle = '微信发送'this.editData.fsfs = '3'}}else if (command === '手机短信'){if (mandTitle !== '手机短信'){mandTitle = '手机短信'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>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。