vue iframe 中写script_用VUE做一个常用工具面板

最新推荐文章于 2024-04-23 15:30:39 发布
最新推荐文章于 2024-04-23 15:30:39 发布
阅读量203 收藏
点赞数
文章标签： vue iframe 中写script

d88e003255d4c84175b872bd094795ad.png

常规啰嗦

身为一个开发者，经常要用到各种在线工具，如时间戳转换器、json格式化工具、MD5摘要工具等等。或者平时工作中也经常需要管理一些常用的链接，比如产品给的原型链接、设计图链接、Jenkins部署地址、各种管理系统地址等。 73e70ae7ec3cb3cd5d737fc1e7895b82.png当然 Chrome等浏览器的 收藏夹，书签栏可以保存这些链接，一般都能满足需求了。如图

90ded7e762cc6b14fcf413aae001038d.png

但是当这些链接地址比较多时，可能就不那么美好了。你可能会说书签栏还可以建文件夹啊。没错。但是一级一级文件夹点开去找，对我这个懒货来说真是太麻烦了。并且这些链接有大部分是临时的，你换工作，项目完结可能就再也用不到了，到那时你还得一个个的去清理呢，那又是不必要的时间浪费。 4f0a15cc70d6657e9316121b18880d77.png还有一点， Chrome的书签栏一般会随 Google账户多端同步，所以我一般只会放一些个人常用的永久链接。如图

e6b0b05c27db569a7864c40e2e2b32c4.png

因此，我们需要自己搞个类似的书签栏功能，不过是要把它们放在一个辽阔的空白面板上。 f119cd247e09cea7ba4621135a4fd642.png不难明白，书签栏的原理就是 a标签 镶嵌的超链接，如果你导出过 Chrome的标签栏，可以发现生成的是一个 html文件，里面都是a 标签。如下右键书签栏-打开  书签管理器

404b7f7b4635b520c5f250d89310077a.png

页面右上 导出书签

b21b3c45a316d96079c824fcfd9ffa22.png

9583aadea5c13cb782499268511d4d05.png

7fa0b5cf7f2c3a6961831bdf975b0a6c.png

用VUE来做我的博客地址 https://blog.siyueren.com/

312a2fe0348536349b14be85b239fee2.png

空荡荡的一个首页，我只放了几个常用的工具链接。里面的代码就是很简单的 a 标签

abcd19c1e51710e994239e93d17a6450.png

这个服务器是17年夏天搭的，当时还不熟悉VUE，现在可以简单借助vue来简化下(当然 vue这个牛批的 MVVM框架能做的绝不止这些 98ed1935d2e176001bca6c5bd71f4298.png)看下我之前用VUE做的常用工具面板

df7a3fb691c1304dde55fe5c72faf878.png

江山尽收眼底~ 

省得你翻开文件夹去找。 只需 要记住大致位置，或者  CTRL+F  直接查找关键字即可，虽然简单，但是不是很方便 1f8c49520dafa1f50c5c97743d41c8e1.png代码也很简单，只是用到了 VUE 最最基础的特性 -- 自定义组件和数据自动绑定。如下 dom

1834511ce752ab12e46c91d7e3165a17.png

JavaScript

e41d012acba06183c4738f091e01b0df.png

代码中做了一个简单的组件，从外部接收属性 list，这个组件就像 Android 开发中的 Fragment。下次当你再需要实现相同的界面时就省得再去编写界面代码而只需要将数据适配好直接拿来用就可以了。 < list v-bind:list= "sites" > list >

13fe5de34d3a096c7fb9b9353b845935.png

组件中用 v-for 自动将数据渲染成a标签，使得dom操作完全透明。这样我们再添加连接时，就像加配置一样简单而不需要去考虑那些标签。最后放上代码模板，感兴趣的可以自己改改来玩 
<html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>noticetitle>    <style>        a:link {color: blue}         a:visited {color: blue}         a:hover {color: blue;text-decoration:underline;}        a:active {color: blue}         a{ text-decoration: none;}style>head><script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js">script><body style="width:100%;height: 100%;" >    <div  id="app">        <div style="width: 17%;height: 100%;float:left; overflow: scroll">            <span class="label">Code：span>            <span id="vpn">123456span><br>                        <h1>Mexicoh1>            <appver v-bind:names="apps2" v-bind:type="2">appver>            <h1>洛杉矶h1>            <appver v-bind:names="appsdk" v-bind:type="3">appver>            <appver v-bind:names="appskk" v-bind:type="4">appver>            <h1>Sitesh1>                        <list v-bind:list="sites">list>                        <list v-bind:list="jira">list>        div>        <div style="width: 83%;height: 100%;float:left;">            <iframe id="myiframe" src="https://appver.zz.com/ebjk8s/erdlc/storm" frameborder="0" align="left" width="100%"                height="175px" scrolling="no">            iframe>                        <div style="float: left">                <h1>Licaih1>                <list v-bind:list="docs">list>            div>            <div style="float: left">                <h1>Mexicoh1>                <div  style="float: left">                    <list v-bind:list="docs_abroad0">list>                div>                <div  style="float: left">                    <list v-bind:list="docs_abroad">                list>            div>            div>            <div style="float: left">                <h1>Mexico 洛杉矶 h1>                <div  style="float: left">                    <list v-bind:list="docs_lsj">                div>            div>        div>    div>body><script>    new Vue({        el: '#app',        components: {            appver:{                props: ['names','type'],                template: '
\ \ {{name}}\ \ ' }, list: { props: ['list'], template: ' \ \ {{item.name}}\ \ ' } }, data: { apps: [ 'storm', 'river', 'waterfall', 'streamlet', 'typhoon', ], appskk: [ 'crops', 'almond', 'cashew', 'chestnut', 'chocolate', 'clover', 'lotus', 'wheat' ], sites: [ { url:'https://doc.zz.com/pages/viewpage.action?pageId=27237275', name:'log jump server' }, { url:'https://ebjlog.zz.com', name:'kibana' }, { url:'', name:'' }, { url:'http://localhost:9090', name:'ZKUI' }, { url:'', name:'' }, { url:'http://localhost:3008', name:'loan-web' }, { url:'', name:'' }, { url:'', name:'' }, ], jira: [ { url:'https://jira.zz.com/secure/Dashboard.jspa', name:'JIRA' }, { url:'https://jira.zz.com/browse/OP-9646', name:'db 工单' }, { url:'https://jira.zz.com/browse/OP-9840', name:'运维上线 工单' }, { url:'', name:'' }, { url:'', name:'' }, ] } });script>html>

8067caeb2a1ac38793fe832bdfddf31d.png

weixin_39589253
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在vue中实现嵌套页面(iframe)
11-19
vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径，也可使用服务器根路径http:localhost:8088/… <iframe src=”../../static/plusPro.html” width=”1200″ height=”300″ frameborder=”0″ scrolling=”auto”style=”position:absolute;top: -300px;left: 0px;”></iframe> 补充知识：关于VUE嵌套iframe的一系列问题 此文是建立在vue-cli之上 ，当然单写也可以，下文会涉及一些关于cli的知识，
VUE开发者工具，vue-devtools-4.1.4_0。
04-16
VUE开发者工具vue-devtools-4.1.4_0。
vue iframe 中写script_使用Vue快速展示历史记录
weixin_39872044的博客
11-25 145
前言 最近使用vue做了一个历史记录界面，动态赋值的简便性令我陶醉。读完本文您将了解v-for循环，v-text赋值和{{}}赋值，v-if判断和:class=“{a：b}”动态绑定编程工具：VisualStudio2017目录 接口编写固定数据Js中写请求页面元素的动态赋值实现效果图1.接口编写固定数据 后端代码写在了flip.ashx一般处理程序中。数据全部写成固定的，在后台拼接好...
vue自定义插件结合iframe封装组件及函数实现弹窗预览文件功能
最新发布
haixtx的博客
04-23 872
在vue2中通过自定义插件，iframe嵌入网页，统一封装组件及函数挂载在vue实例上来实现一个api打开弹窗预览文件功能
vue iframe 中写script_vue: 单文件组件 render函数
weixin_39996478的博客
12-08 262
使用vue-cli创建的vue项目，如何在这种项目中使用组建?首先创建项目、启动项目我们再来了解一下目录结构，src文件夹是写逻辑代码的地方，public是最终渲染到浏览器的地方。在public下index.html中的id="app"和浏览器中的id="app"不是一样的，pulic下的index.html中的id="app"是指vue挂载的地方，浏览器中id="app"是会覆盖index.ht...
vue 改变domclass_Vue 面向对象 - 实战 - 内容管理系统（一）
weixin_39683144的博客
10-28 206
说了那么多，面向对象主要解决架构问题，而架构问题需要在实战中才能体现出威力来，单纯讲小例子只能是耍流氓那么我们来做一个简单的，利用 Vue3（当前用 @vue@composition-api 替代） 拖拽生成 Bootstrap 静态页面 的内容管理系统 首先，我们采用 ejs 做静态模板，并利用它生成个可配置组件，这样的组件结构如下：其中 test.ejs 为如下结构：只包含 style 和 t...
vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
程序员哆啦A梦，蓝胖子
12-06 6888
作者 | Jeskson 来源 | 达达前端小酒馆 Vue概述： MVX模式简介，Vue框架简介，Vue.js的安装与使用。 Vue基础语法： 实例对象，生命周期，模板语法，计算属性，methods方法 Vue渲染： 列表渲染，条件渲染 Vue事件与表单： 事件处理，事件对象，事件委派，表单处理 MVX模式简介： MVX框架模式：MVC+MVP+MVVM MVC: Model模型+V...
vue_devtools_chrome_5.3.4.crx Chrome浏览器Vue调试插件
03-28
（1）vue 2.x 调试工具：vue_devtools_chrome_5.3.4.crx Chrome浏览器Vue调试插件； （2）直接安装使用无需自己编译； （3）安装方法：打开Chrome浏览器，输入“chrome://extensions/”打开扩展程序，启用开发者模式...
vue-plugin-load-script:一个Vue插件，用于注入远程脚本
04-30
一个Vue 2插件，用于注入远程脚本。 请参阅vue3分支以获取Vue 3支持。 安装 # npm npm install --save vue-plugin-load-script # yarn yarn add vue-plugin-load-script 用 // In main.js import LoadScript ...
vue组件中使用iframe元素的示例代码
08-28
本篇文章主要介绍了vue组件中使用iframe元素的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
html子页面添加视频,(操作iframe子页面的内容)想在head里动态添加script
weixin_34353619的博客
06-03 231
这样，不用jquery：document.getElementsByTagName('head')[0].innerHTML=document.getElementsByTagName('head')[0].innerHTML+"js脚本";有人这么解释All of jQuery's insertion methods use a domManip function internally to c...
Vue中使用iframe
踩坑之路...
07-23 1860
Vue中使用iframe 1) 使用的技术: vue.js + iframe 2) 场景: a)父页面调用子页面某些DOM的高度以完成"父页面高度自适应需求"; b)子页面调用父页面的方法以完成"新增,删除,提交,保存,等操作对高度的自适应变化"; 3) 代码示例: <div id="whsZero"> <iframe ref="whZero" :src="whic...
Vue组件实现与iframe的通讯
chengcheng9876的博客
02-24 1629
Vue组件实现与iframe的通讯
vue项目vue组件和iframe通信
uuai
08-01 499
vue项目iframe通信
开发一个封装了iframe的VUE组件
左直拳的马桶_日用桶
03-25 1250
VUE的基本组成单元，我看应该是组件。用VUE开发前端项目，就是开发一个个组件，然后搭积木一样，将项目搭建出来。组件包含在页面，或者是更大的组件里面。在这里，组件与页面的界限，好像并不明显。事实上，对于单页应用，只有一个页面。 组件的好处，一是可以加强复用；二是能够将特定功能封装，利于调用；三是由于职责分明，组件高内聚，组件间低耦合，利于系统功能的优化、扩展和维护。好处多多。 开发组件，主要有2部分内容： 1、组件内部逻辑 2、外部接口 由于我这两天弄的组件，里面包含有一个<iframe>，那么
Vue项目与iframe的结合
weixin_45357101的博客
09-08 2067
背景 最近参与的一个Vue项目要改造，原本是普通管理后台项目，现在因为有业务扩展需求（实际上就是一个新的项目，但是要基于现有的UI、权限以及用户等功能，只是一部分业务不一样，两个项目必须要是同一个入口），要把菜单和头部以及一部分公共业务（比如用户、日志、权限、登录等等）拿出来新开一个项目，把原有的业务迁到另一个项目，当然，新的业务也会新开一个项目。 说白了就是三个项目合成一个（Ps：缝合怪），项目入口理所当然是公共的那一部分，右下方的业务展示部分采用了iframe展示的方案，具体方式是参考Layui Adm
【vue】iframe相关问题
Qxn530的博客
03-02 5375
iframe刷新、子页面关闭iframe所在弹窗、iframe进度条一直加载中、iframe传参、iframe页面中需要使用wordexport等功能、iframe在弹窗中、iframe展示PDF不显示
Vue微前端新探：iframe优雅升级，扬长避短，重获新生
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
07-17 3685
iframe是一个天然的微前端方案，但受限于跨域的严格限制而无法很好的应用，本文介绍一种基于iframe优雅实现全新的微前端方案，继承iframe的优点，补足 iframe 的缺点，让 iframe 焕发新生。
在Vue里面嵌套Iframe页面教程分享 解决切换页面后没有办法保留住内容的问题
csdndddsd的博客
11-17 3102
在vue的router-view同级别添加了一个iframeTemp组件，其实就是一个elementUI的tab组件，然后把tab组件的头的样式隐藏在菜单栏的下面。为了解决切换了vue的路由，然后再切回http的页面，iframe中的src属性的页面就会从新刷新，没有办法保留住内容的问题。之后的iframe组件的显示隐藏和tab切换，都是通用vuex和bus事件广播实现的。在这个功能的实现中我们用到了bus事件总线的广播和监听。还要添加一个没用的路由，因为我们的锚记还要发生变化。
给我写一个在vue前端中怎么使用iframe方法嵌入一个html的代码
06-13
当您需要在Vue前端中嵌入一个HTML页面时，可以使用 `<iframe>` 标签。下面是一个简单的示例： ```html <template> <div> <iframe src="https://www.example.com"></iframe> </div> </template> ``` 在这个示例中，我们使用 `<iframe>` 标签将一个外部网站嵌入到我们的Vue应用程序中。您可以将 `src` 属性更改为您想要嵌入的HTML页面的URL。 请注意，由于浏览器的安全性限制，您只能将与您的Vue应用程序在同一域中的HTML页面嵌入到 `<iframe>` 中。如果您需要嵌入来自不同域的HTML页面，则必须使用其他技术，如跨域资源共享（CORS）或JSONP。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值