第一步
<template> <!-- 新建部门 --> <div class="container"> <el-dialog :title="fullTitle" :visible.sync="dialogFormVisible" @close="close" > <template> <div v-if="IsShow"> <el-button type="primary" @click="ChangeValuePicture">创建图文</el-button> <el-button v-if="viewMode" type="success" @click="ChangeValueVidio">创建视频</el-button> <el-button class="el-btn" @click="ListResource" type="primary">选择历史资源</el-button> </div> <!--控制页面样式判断 传递富文本的接口--> <editor-bars :setMode="setMode" v-if="attr==1" :isClear="isClear" v-model="form.resource" @ChangePicture="change1" ></editor-bars> <!--传递视屏的接口--> <edit-vidio v-if="attr==2" v-model="form.resource" style="margin-top: 20px;margin-bottom: 20px" @changeList="ChangeVideo"></edit-vidio> <!-- <div style="width: 200px;height: 200px;"> <h1>预览效果</h1> <embed v-if="true" :src="url_list" widht="100px" height="100px" autostart="false" loop="false"></embed> <!– < :src="url_list" class="avatar">–> </div>--> <div v-if="attr==2"> <h1>上传的文件视频预览名</h1> <h1 v-if="form.resource_video_tmp" :src="form.resource_video_tmp">测试:{{form.resource_video_tmp}}</h1> <!-- <embed widht="100px" height="100px" autostart="false" loop="false"></embed>--> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </div> </template>
2第二步
父子组件传值
props:["viewMode","setMode"],
3第三步
分别改变父子组件的状态
<template lang="html"> <div class="editor"> <!--定义的为表头的属性--> <div v-if="setMode" ref="toolbar" class="toolbar"> </div> <!--定义的为表格的属性--> <div ref="editor" class="text" disabled="false"> </div> </div> </template> <script>