1第一步

v-if

<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>

?

總結

以上是生活随笔為你收集整理的工作219:富文本查看 编辑状态显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。