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

简介: 前端工作总结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>
  <!&ndash;    < :src="url_list" class="avatar">&ndash;>
     </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>
相关文章
|
前端开发 数据可视化 网络协议
GIS前端-图形样式编辑
GIS前端-图形样式编辑
81 0
|
7月前
|
Web App开发 JavaScript 前端开发
网页VUE纯前端在线预览编辑Office,支持doc/docx、xls/xlsx、ppt/pptx、pdf等格式
随着互联网技术的不断发展,越来越多的企业开始采用在线办公模式,微软Office Word 是最好用的文档编辑工具,然而doc、docx、xls、xlsx、ppt、pptx等格式的Office文档是无法直接在浏览器中直接打开的,如果可以实现Web在线预览编辑OffIce,肯定会还带来了更高效、便捷的办公体验,为我们的工作带来了更多可能性。
1443 0
|
1月前
|
存储 前端开发 搜索推荐
(前端直接编辑CAD)网页CAD二次开发中线型表的使用方法
在DWG数据库中,线型样式存储在线型样式表 `McDbLinetypeTable` 中,每个线型表记录对象 `McDbLinetypeTableRecord` 对应一种线型样式。本文介绍了如何获取、添加、遍历、删除和修改线型样式,并提供了绘制不同线型的示例代码,包括虚线、点划线和带文字的线型。通过在线示例demo,用户可以实践修改CAD图纸中的实体线型及其样式。
|
2月前
|
自然语言处理 资源调度 前端开发
前端大模型入门(四):不同文本分割器对比和效果展示-教你如何根据场景选择合适的长文本分割方式
本文详细介绍了五种Langchain文本分割器:`CharacterTextSplitter`、`RecursiveCharacterTextSplitter`、`TokenTextSplitter`、`MarkdownTextSplitter` 和 `LatexTextSplitter`,从原理、优缺点及适用场景等方面进行了对比分析,旨在帮助开发者选择最适合当前需求的文本分割工具,提高大模型应用的处理效率和效果。
169 1
|
3月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
58 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
3月前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
70 28
|
3月前
|
前端开发 API
(WEB前端编辑DWG)在线CAD如何实现图形识别功能
mxcad 提供的图形识别功能可帮助用户快速识别和提取 CAD 图纸中的各种图形,如直线、多段线、弧线、圆及图块,显著提升设计效率。此功能不仅适用于图形分类,还能进行数量统计和快速定位,减少手动操作。用户可通过 API 进行二次开发,自定义识别逻辑。具体步骤包括打开在线示例、选择识别功能、设置识别参数并开始识别。更多开发文档请关注公众号:梦想云图网页 CAD。
|
4月前
|
开发框架 JSON 缓存
基于SqlSugar的开发框架循序渐进介绍(22)-- Vue3+TypeScript的前端工作流模块中实现统一的表单编辑和表单详情查看处理
基于SqlSugar的开发框架循序渐进介绍(22)-- Vue3+TypeScript的前端工作流模块中实现统一的表单编辑和表单详情查看处理
|
5月前
|
开发框架 JavaScript 前端开发
在Vue前端界面中,几种数据表格的展示处理,以及表格编辑录入处理操作。
在Vue前端界面中,几种数据表格的展示处理,以及表格编辑录入处理操作。
|
5月前
|
JavaScript 前端开发 网络架构
文本,展现到文章的面前,Vue结合v-for实现传参的方法,好的资料,Vue实现动态绑定,数据放到前端页面上
文本,展现到文章的面前,Vue结合v-for实现传参的方法,好的资料,Vue实现动态绑定,数据放到前端页面上