前端工作总结273-处理预览界面

简介: 前端工作总结273-处理预览界面
<template>
  <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
    <div style="margin: 0 auto">
      <div v-if="tableData.content_type==2">
    <h1>图文详情</h1>
    <div v-html="tableData.resource">
    </div>
      </div>
      <div v-if="tableData.content_type==1">
    <h1>视频详情</h1>
    <div>
      <video  width="420" height="300" controls >
        <source :src=tableData.resource type="video/mp4"></source>
      </video>
    </div>
      </div>
    <h1>
      发布标题
    </h1>
    <p>
      {{tableData.title}}
    </p>
<h1 class="demonstration">标题/话题</h1>
    <ul v-for="(item,index) in tableData.tag">
      <li>{{item}}</li>
    </ul>
    <h1 class="demonstration">封面图片</h1>
    <el-image
        style="width: 100px; height: 100px"
        :src="tableData.thumbnail"
        fit="fit"></el-image>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
  </el-dialog>
</template>
<script>
import {getAction} from "@/api";
export default {
  name:"ContentList",
  data() {
    return {
      tableData:[],
      dialogVisible: false,
      formLabelWidth:"140px",
    };
  },
  methods: {
    show(record){
   /*   this.tableData=record*/
      /* this.id=id*/
      /*this.$router.push("/content/" + record.id);
      console.log(record.id)*/
      getAction("/content/"+record.id).then(res=>{
        console.log(res)
        this.tableData=res.data
      })
      this.dialogVisible=true
     /* this.tableData=record
      console.log(this.tableData)
      /*     getAction("/task",).then(res=>{
             console.log(res)
             let List=[]
             res.data.items.map((value,index)=>{
              /!* console.log(value.task_recode)*!/
                List.push({...value.task_recode})
             })
             this.tableData=List
             console.log(this.tableData)
         })*/
    },
    handleClose(done) {
      this.$confirm('确认关闭?')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    }
  }
};
</script>
相关文章
|
4天前
|
前端开发 API
前端界面生成PDF并导出下载
【10月更文挑战第21天】利用合适的第三方库,你可以在前端轻松实现界面生成 PDF 并导出下载的功能,为用户提供更方便的文档分享和保存方式。你还可以根据具体的需求进一步优化和定制生成的 PDF 文件,以满足不同的业务场景要求。
|
6月前
|
存储 JavaScript 前端开发
使用Vue.js构建交互式前端界面的技术探索
【5月更文挑战第20天】Vue.js是一款渐进式JavaScript框架,擅长构建交互式前端界面。其核心特性包括响应式数据绑定、组件化开发、指令系统和虚拟DOM,简化开发并提升性能。通过Vue CLI创建项目,拆分组件,结合数据绑定和事件处理实现交互,使用Vue Router管理路由,Vuex进行状态管理,能高效构建现代Web应用。
|
2月前
|
前端开发 JavaScript 开发者
现代前端框架激烈交锋,高效响应式 Web 界面的归属扑朔迷离!
【9月更文挑战第6天】本文通过实际案例,比较了主流前端框架 Vue.js、React 和 Angular 的特点与优势。Vue.js 以简洁的语法和灵活的组件化架构著称,适合小型到中型项目;React 强调性能和可扩展性,适用于大型应用;Angular 凭借全面的功能和严格架构,适合企业级开发。开发者应根据项目需求和技术栈选择合适的框架。
45 0
|
4月前
|
开发框架 前端开发 JavaScript
使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面
使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面
|
3月前
|
开发框架 前端开发 JavaScript
基于SqlSugar的开发框架循序渐进介绍(18)-- 基于代码生成工具Database2Sharp,快速生成Vue3+TypeScript的前端界面和Winform端界面
基于SqlSugar的开发框架循序渐进介绍(18)-- 基于代码生成工具Database2Sharp,快速生成Vue3+TypeScript的前端界面和Winform端界面
|
3月前
|
开发框架 前端开发 JavaScript
基于SqlSugar的开发框架循序渐进介绍(15)-- 整合代码生成工具进行前端界面的生成
基于SqlSugar的开发框架循序渐进介绍(15)-- 整合代码生成工具进行前端界面的生成
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(24)--- 修改密码的前端界面和ABP后端设置处理
循序渐进VUE+Element 前端应用开发(24)--- 修改密码的前端界面和ABP后端设置处理
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(20)--- 使用组件封装简化界面代码
循序渐进VUE+Element 前端应用开发(20)--- 使用组件封装简化界面代码
|
3月前
|
前端开发 JavaScript 机器人
中后台前端开发问题之动态标注组件渲染到界面上如何解决
中后台前端开发问题之动态标注组件渲染到界面上如何解决
29 0
|
3月前
|
前端开发 JavaScript 开发者
天崩地裂!现代前端框架激烈交锋,高效响应式 Web 界面的归属扑朔迷离!
【8月更文挑战第12天】本文通过实际案例对比了主流前端框架:Vue.js 以其简洁语法和组件化脱颖而出;React 依托虚拟DOM确保高效的界面更新;Angular 则以强大的模块系统适用于企业级应用。三者虽殊途同归,但在实现相同功能时各具特色,为高效响应式Web界面的构建提供了多样选择。
43 0