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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值