位置: IT常识 - 正文

【vue】vue 在线编辑、实时预览的代码交互组件 vue-code-view(vue+)

编辑:rootadmin
【vue】vue 在线编辑、实时预览的代码交互组件 vue-code-view 文章目录前言实现安装依赖vue.config.js配置main.js 全局注册参数配置新建vue单文件组件库混合使用错误处理前言

推荐整理分享【vue】vue 在线编辑、实时预览的代码交互组件 vue-code-view(vue+),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue?,vue+,vue在线教程,vue在线教程,vue!,vue.org,vue!,vue在线教程,内容如对您有帮助,希望把文章链接给更多的朋友!

vue-code-view是一个基于 vue 2.x、轻量级的代码交互组件,在网页中实时编辑运行代码、预览效果的代码交互组件。

官方手册: Vue Code View 参考文章: [个人开源]vue-code-view:一个在线编辑、实时预览的代码交互组件 Vue Code View: A Vue 2 SFC REPL component

使用此组件, 不论 vue 页面还是 Markdown 文档中的示例代码,效果如下:

实现安装依赖npm i vue-code-view# oryarn add vue-code-viewvue.config.js配置【vue】vue 在线编辑、实时预览的代码交互组件 vue-code-view(vue+)

注意:这里用的是or(或)

module.exports = { runtimeCompiler: true, // or chainWebpack: (config) => { config.resolve.alias .set("vue$", "vue/dist/vue.esm.js"); },}; main.js 全局注册// vue-code-viewimport CodeView from "vue-code-view";Vue.use(CodeView);参数配置参数说明类型默认值版本themeMode主题theme mode,默认light,支持 dark`` 或 dark``showCode是否显示代码编辑器,只有在layout值为top生效booleanfalsesource运行示例源码string-layoutrender 视图布局top 或 right 或 lefttop0.4.0

个人感觉手册里配置写的不是很好,使用者不知道具体怎么使用,可以参考下面我的使用方法

新建vue单文件<script>const code_example = `<template> <div id="app"> <img alt="Vue logo" class="logo" src="https://www.yuucn.com/wp-content/uploads/2023/05/1684248044-a9ca298e41e926e.png" /> <h1>Welcome to Vue.js !</h1> </div></template> `;export default { name: "demo", render() { return ( <div> <code-viewer source={code_example} showCode={true} layout={`right`} themeMode={`light`} ></code-viewer> </div> ); },};</script><style scoped lang=scss>/* code-viewer */.vue-repl { height: 800px;}</style>组件库混合使用

项目引入其他组件库后,组件的示例源代码中直接使用即可,实现预览调试功能

错误处理

组件内置了错误预处理,目前支持代码为空、代码格式错误(内容不存在)等,以文字的形式显示在示例区域,也提供了自定义错误方式 errorHandler(使用 Notice 组件进行信息告知)。

render() { return ( <div > <code-viewer source={code_example} showCode={false} errorHandler={(errorMsg) => { this.$notify.error({ title: "Info", message: errorMsg, }); }} ></code-viewer> </div> )}

示例使用了antd vue 的 notify组件进行消息提醒,效果如下:

下班~

本文链接地址:https://www.jiuchutong.com/zhishi/290265.html 转载请保留说明!

上一篇:奥林匹克国家公园中的可可西里雨林,华盛顿州 (© Jorge Romano/Offset by Shutterstock)(奥林匹克国家公园)

下一篇:Vue3+TypeScript项目报错: 找不到名称“require”。是否需要为节点安装类型定义?(vue-cli typescript)

  • word表格怎么调整行高间距拉不动(word表格怎么调行高)

    word表格怎么调整行高间距拉不动(word表格怎么调行高)

  • 红米k40有否有呼吸灯(redmi k40有呼吸灯吗)

    红米k40有否有呼吸灯(redmi k40有呼吸灯吗)

  • 华为荣耀8c是4g手机吗(华为荣耀8C是什么屏)

    华为荣耀8c是4g手机吗(华为荣耀8C是什么屏)

  • 苹果xs突然不能向上划屏解锁(苹果xs突然不能快充)

    苹果xs突然不能向上划屏解锁(苹果xs突然不能快充)

  • 三星s6打不进电话是怎么回事(三星s6不开机充电不开机)

    三星s6打不进电话是怎么回事(三星s6不开机充电不开机)

  • 剪映美颜在哪(剪映美颜在哪里找)

    剪映美颜在哪(剪映美颜在哪里找)

  • 相机遮光罩的作用(相机遮光罩的作用包括)

    相机遮光罩的作用(相机遮光罩的作用包括)

  • 拼单返现消失怎么办(拼单返现消失怎么找回)

    拼单返现消失怎么办(拼单返现消失怎么找回)

  • 荣耀20pro可以当遥控器使用吗(荣耀20pro支持nfc吗)

    荣耀20pro可以当遥控器使用吗(荣耀20pro支持nfc吗)

  • 三星语音助手怎么唤醒(三星语音助手怎么设置语音唤醒)

    三星语音助手怎么唤醒(三星语音助手怎么设置语音唤醒)

  • 该照片可见的朋友是什么意思(该照片可见的朋友新加的人能看到吗)

    该照片可见的朋友是什么意思(该照片可见的朋友新加的人能看到吗)

  • 华为手机主题怎么设置自己喜欢的照片(华为手机主题怎么设置自己的照片)

    华为手机主题怎么设置自己喜欢的照片(华为手机主题怎么设置自己的照片)

  • 开个人热点费电吗(开个人热点耗电快)

    开个人热点费电吗(开个人热点耗电快)

  • 防火墙自身会不会被攻击(防火墙自身不需要抵抗攻击)

    防火墙自身会不会被攻击(防火墙自身不需要抵抗攻击)

  • 微信朋友圈怎么发长时间的视频(微信朋友圈怎么发文字不发图片)

    微信朋友圈怎么发长时间的视频(微信朋友圈怎么发文字不发图片)

  • 手机怎么把两首歌合并(手机怎么把两首音乐剪辑到一起)

    手机怎么把两首歌合并(手机怎么把两首音乐剪辑到一起)

  • pr视频添加动画效果(pr怎么给视频加动态效果)

    pr视频添加动画效果(pr怎么给视频加动态效果)

  • 苹果怎么购买qq音乐专辑(苹果怎么购买qq装扮)

    苹果怎么购买qq音乐专辑(苹果怎么购买qq装扮)

  • ba02是魅族几电池(ba923是魅族几)

    ba02是魅族几电池(ba923是魅族几)

  • led灯对眼睛有影响吗(led灯对眼睛的伤害)

    led灯对眼睛有影响吗(led灯对眼睛的伤害)

  • 抖音里的设置在哪(抖音里的设置在那个地方视频看)

    抖音里的设置在哪(抖音里的设置在那个地方视频看)

  • realmex多重(realme x手机重量)

    realmex多重(realme x手机重量)

  • 勿扰模式怎么关闭提醒(勿扰模式怎么关闭安卓手机)

    勿扰模式怎么关闭提醒(勿扰模式怎么关闭安卓手机)

  • 360极速浏览器如何进入管理加载项(360极速浏览器如何倍速播放)

    360极速浏览器如何进入管理加载项(360极速浏览器如何倍速播放)

  • 白条分期需要什么条件(白条分期什么时候还第一期)

    白条分期需要什么条件(白条分期什么时候还第一期)

  • 费改税是哪一年
  • 税收实体法有哪18种
  • 合伙企业需要报工商年报吗
  • 税票百分之十三怎么算
  • 车辆购置税计入成本吗
  • 出口退税勾选后多久可以申报退税
  • 餐费可以抵扣吗
  • 进项大于销项的会计分录怎么做?
  • 企业处置固定资产
  • 进项税转出申报表能填负数吗
  • 其他综合收益为什么要结转
  • 借用另一家公司名义
  • 收到知识产权专用发票
  • 转账支票必须对着开发票单位吗?
  • 5%征收率的适用范围
  • 增值税一般纳税人认定标准
  • 合伙企业的所得税政策
  • 房租费可以计入研发费用加计扣除吗
  • 房地产开发劳务合同范本
  • 企业注销后资金处理
  • 发票冲红有时间要求吗
  • 跨月预缴如何做账
  • 公司作为二房东怎么给别人开发票
  • 管理费用和财务费用在资产负债表怎么填
  • 鸿蒙系统超级终端手机连手机
  • 非房地产企业的基建管理办法
  • 文件被占用无法删除
  • 新浪怎么样了
  • 贷款损失准备的会计核算
  • PHP函数func_num_args用法实例分析
  • 艾叶泡脚的功效与作用及禁忌
  • echarts饼图背景图片
  • 简述php中常用魔术方法及其各自的作用
  • php常用的魔术方法有哪些
  • php中的正则表达式怎么使用
  • 报销钱大写数字
  • r在数据分析中表示什么意思
  • 深度学习分析NASA电池数据(1 数据读取)
  • 出口退税退运费的税吗
  • 织梦怎么改文字
  • mysql null+1
  • mongodb主从复制和副本集架构有什么联系和区别
  • 专用发票金额与专票不符
  • 农民专业合作组织法律制度的类型包括哪些?
  • 税率减按1.5%计算是什么意思
  • 以件数为印花税计税的有哪些
  • 如何完成资产负债表
  • pos机收款不开票怎么做账
  • 小规模纳税人月销售额超过10万怎么交税
  • 小微企业是怎样自己认定的呢
  • 注册公司时企业类型为什么没有自然人独资
  • 车船税手续费返还时间
  • 挂靠在运输公司的车辆为什么要记入"固定资产"科目?
  • 城镇土地使用税怎么算
  • 财务费用为零的原因
  • 同一客户有应收应付可以相互抵消吗
  • 个人发票抬头写真名吗
  • 费用先付款后收到发票的会计分录
  • 防伪税控技术维护费
  • 租赁办公楼
  • 五证合一的办理流程是什么
  • mysql coalesce函数用法
  • mac链接其他屏幕
  • ubuntu20.04怎么样
  • 怎么用u盘装xp系统教程
  • centos安装教程详解
  • win7系统安全软件
  • cocos2d原理
  • opengles 抗锯齿
  • ubuntu系统怎么安装
  • vue组件互相嵌套
  • nodejs mysql库
  • 安卓中的HTTP编程
  • js显示word
  • java script入门
  • 安卓系统手机图片文件夹在哪里
  • jquery给输入框赋值
  • 个体工商户税务年报网上怎么申报
  • 南京电子税务局咨询电话
  • 福建省电子税务局操作指南
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设