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

最新推荐文章于 2024-04-23 15:30:39 发布

weixin_39589253

最新推荐文章于 2024-04-23 15:30:39 发布

阅读量203

点赞数

文章标签： vue iframe 中写script

常规啰嗦

身为一个开发者，经常要用到各种在线工具，如时间戳转换器、json格式化工具、MD5摘要工具等等。或者平时工作中也经常需要管理一些常用的链接，比如产品给的原型链接、设计图链接、Jenkins部署地址、各种管理系统地址等。

当然 Chrome等浏览器的 收藏夹，书签栏可以保存这些链接，一般都能满足需求了。如图

但是当这些链接地址比较多时，可能就不那么美好了。你可能会说书签栏还可以建文件夹啊。没错。但是一级一级文件夹点开去找，对我这个懒货来说真是太麻烦了。并且这些链接有大部分是临时的，你换工作，项目完结可能就再也用不到了，到那时你还得一个个的去清理呢，那又是不必要的时间浪费。

还有一点， Chrome的书签栏一般会随 Google账户多端同步，所以我一般只会放一些个人常用的永久链接。如图

因此，我们需要自己搞个类似的书签栏功能，不过是要把它们放在一个辽阔的空白面板上。

不难明白，书签栏的原理就是 a标签 镶嵌的超链接，如果你导出过 Chrome的标签栏，可以发现生成的是一个 html文件，里面都是a 标签。如下右键书签栏-打开 书签管理器

页面右上 导出书签

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

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

这个服务器是17年夏天搭的，当时还不熟悉VUE，现在可以简单借助vue来简化下(当然 vue这个牛批的 MVVM框架能做的绝不止这些

)看下我之前用VUE做的常用工具面板

江山尽收眼底~

省得你翻开文件夹去找。只需要记住大致位置，或者 CTRL+F 直接查找关键字即可，虽然简单，但是不是很方便

代码也很简单，只是用到了 VUE 最最基础的特性 -- 自定义组件和数据自动绑定。如下 dom

JavaScript

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

组件中用 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>

weixin_39589253

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue iframe 中写script_用VUE做一个常用工具面板

常规啰嗦身为一个开发者，经常要用到各种在线工具，如时间戳转换器、json格式化工具、MD5摘要工具等等。或者平时工作中也经常需要管理一些常用的链接，比如产品给的原型链接、设计图链接、Jenkins部署地址、各种管理系统地址等。当然Chrome等浏览器的收藏夹，书签栏可以保存这些链接，一般都能满足需求了。如图但是当这些链接地址比较多时，可能就不那么美好了。你可能会说书签栏还可以建文件夹啊。...
复制链接

扫一扫

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

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