前端工作总结102-富文本查看 编辑状态显示

第一步

<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>
  &lt;!&ndash;    < :src="url_list" class="avatar">&ndash;&gt;
     </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>