拉取目录下的所有java文件,然后点击展示java文件后查看详细的代码,所以code最开始是空,点击展开后,调接口查询详细代码, 然后高亮展示。 在main.js里引用组件 import hljs from "highlight.js"; import"highlight.js/styles/atom-one-dark.css"; Vue.directive("highlight",function(el) { let blocks= el.quer...
},cancelMove() {this.isCanMove=false} 通过这些新增的代码,这个弹窗就具有了拖拽的功能。 最后附上这个弹窗组件的完整代码 <template>{{ title }}<slot></slot><el-buttonround@click="hideModal">取消</el-button><el-buttontype="primary"round@click="submit">确认</el-button></template> exportdefaul...
vue-code-view是一个基于 vue 2.x、轻量级的代码交互组件,在网页中实时编辑运行代码、预览效果的代码交互组件。官方手册:Vue Code View参考文章:[个人开源]vue-code-view:一个在线编辑、实时预览的代码交互组件Vue Code View: A Vue 2 SFC REPL component...
Prop可以理解为在组件上注册的一些自定义属性,这些属性的值可以通过组件的props选项接收到。 在本例中,在组件AgeStatistics中希望①获得根组件的数据title②获得静态属性bg-color,可以这样传递属性: PS:html模板中属性要使用短横线分隔命名法(kebab-case)命名 代码解读 <age-statistics v-bind:unit="title" bg-color...
在上面的代码中,我们通过v-if指令来根据showChildComponent变量的取值来决定是否展示子组件。当点击按钮时,showChildComponent的取值会发生变化,从而实现了点击展示子组件的功能。 使用v-show指令 除了v-if指令之外,Vue还提供了v-show指令,它也可以用来控制元素的显示与隐藏。与v-if不同的是,v-show并不会真正地销毁...
在data方法中定义了一个javaCode变量,它存储了需要展示的 Java 代码。 在mounted钩子中调用Prism.highlightAll()方法来应用高亮效果。 引入了 Prism 的 CSS 样式文件,让高亮效果更美观。 步骤4: 在主应用中渲染组件 接下来,我们需要在src/App.vue中引入和展示这个组件: ...
组件简介 vue-code-view是一个基于 vue 2.x、轻量级的代码交互组件,在网页中实时编辑运行代码、预览效果的代码交互组件。使用此组件, 不论 vue 页面还是 Markdown 文档中的示例代码,效果如下: 组件的由来当项目…
1:需要安装 npm install vue-prism-editor --save npm install prismjs --save 2:在安装后就可以直接引入下边的组件了,需要注意的是vue-prism-editor要求 Vue 的版本高于2.6.11 <template> <prism-editor class="my-editor height-300" v-model="code" ...
一、项目简介 基于UI组件的Vue可视化布局、快速生成.vue代码 二、实现功能 通用(文本、链接、换行、div、图片) 支持elementUI 支持iViewUI(button 、icon、radio、select、slider、时间、form表单) 支持mintUI(button 、slider) 支持museUI(导航栏、浮动按钮、列表、时间选择器、开关、菜单栏、分割线、滑动控件、日期...
也支持按需引入。按需引入仅支持基于ES module的tree shaking,示例如下: 代码语言:javascript 复制 import{borderBox1}from'@jiaminghi/data-view'Vue.use(borderBox1) 组件展示 DataV有15个大类的组件库。 大家可以根据自己的需求进行选择。 最后再来一个瞎混搭的页面!有点丑~...