首页 探索 帮助
登录
asiainfo
/
static
关注 2
点赞 0
派生 0
代码 工单管理 0 合并请求 0 提交历史 563 版本发布 4 Wiki
浏览代码

1、新增全屏功能2、优化历史请求参数显示问题3、优化返回报文显示问题

fangwei 6 年之前
父节点
109b6e61c2
当前提交
3a2810809e
共有 4 个文件被更改，包括 43 次插入 和 3 次删除
分列视图 显示文件统计
  1. 1 0
      static-res/json-edit/package.json
  2. 2 1
      static-res/json-edit/public/index.html
  3. 10 0
      static-res/json-edit/src/style/css/jsonedit.less
  4. 30 2
      static-res/json-edit/src/views/jsonedit.vue

+ 1 - 0
static-res/json-edit/package.json
查看文件 

@ -12,6 +12,7 @@
12 12 
    "element-ui": "^2.4.8",
13 13 
    "jsoneditor": "^5.24.7",
14 14 
    "nprogress": "^0.2.0",
15 
    "screenfull": "^4.1.0",
15 16 
    "vue": "^2.5.17",
16 17 
    "vue-router": "^3.0.1"
17 18 
  },

+ 2 - 1
static-res/json-edit/public/index.html
查看文件 

@ -5,7 +5,8 @@
5 5 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 6 
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 7 
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8 
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_887867_020opdxvexyg.css">
8 
    <!-- <link rel="stylesheet" href="https://at.alicdn.com/t/font_887867_020opdxvexyg.css"> -->
9 
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_887867_24frop46l1q.css">
9 10 
    <title>IPU项目请求模拟器</title>
10 11 
  </head>
11 12 
  <body>

+ 10 - 0
static-res/json-edit/src/style/css/jsonedit.less
查看文件 

@ -26,6 +26,16 @@
26 26 
      color: #2b2b2b;
27 27 
      margin-top: 16px;
28 28 
    }
29 
    .full-screen{
30 
      float: right;
31 
      cursor: pointer;
32 
      margin-top: 22px;
33 
      margin-right: 32px;
34 
      .icon{
35 
        font-size: 30px;
36 
        color: #a0a09d;
37 
      }
38 
    }
29 39 
  }
30 40 
  .hand-content{
31 41 
    margin-left: 50px;

+ 30 - 2
static-res/json-edit/src/views/jsonedit.vue
查看文件 

@ -7,6 +7,8 @@
7 7 
      <div class="head clearfix">
8 8 
        <div class="left"><img src="../assets/IPU.png" alt=""></div>
9 9 
        <div class="right">请求模拟器</div>
10 
        <div v-if="!isFullscreen" class="full-screen" title="全屏" @click="handFullScreen()"><i class="iconfont icon-quanping icon"></i></div>
11 
        <div v-else class="full-screen" title="取消全屏" @click="handFullScreen()"><i class="iconfont icon-quxiaoquanping icon"></i></div>
10 12 
      </div>
11 13 
      <div class="hand-content">
12 14 
        <div class="request clearfix">
 
@ -59,6 +61,7 @@
59 61 
<script>
60 62 
import 'jsoneditor/dist/jsoneditor.min.css'
61 63 
import JSONEditor from 'jsoneditor/dist/jsoneditor.min.js'
64 
import screenfull from 'screenfull'
62 65 
const Qs = require('qs')
63 66 
export default {
64 67 
  data () {
 
@ -91,10 +94,11 @@ export default {
91 94 
      responseContainer: '', // 结果返回容器
92 95 
      responser: '', // 结果返回实例挂载
93 96 
      responserOption: { // 结果返回初始化选项
94 
        mode: 'text'
97 
        mode: 'view'
95 98 
      },
96 99 
      history: [],
97 
      historyShow: false
100 
      historyShow: false,
101 
      isFullscreen: false
98 102 
    }
99 103 
  },
100 104 
  mounted () {
 
@ -121,8 +125,31 @@ export default {
121 125 
        type: 'warning'
122 126 
      })
123 127 
    }
128 
    // 检测全屏状态
129 
    if (screenfull.enabled) {
130 
      screenfull.on('change', () => {
131 
        screenfull.isFullscreen ? this.isFullscreen = true : this.isFullscreen = false
132 
      })
133 
    }
134 
    document.onkeydown = e => {
135 
      let key = e.keyCode
136 
      if (key === 122) {
137 
        this.isFullscreen = !this.isFullscreen
138 
      }
139 
    }
124 140 
  },
125 141 
  methods: {
142 
    // 全屏切换
143 
    handFullScreen() {
144 
      if (!screenfull.enabled) {
145 
        this.$message({
146 
          message: '您的浏览器不支持全屏模式！',
147 
          type: 'warning'
148 
        })
149 
        return false
150 
      }
151 
      screenfull.toggle()
152 
    },
126 153 
    blankClick () {
127 154 
      this.historyShow = false
128 155 
    },
 
@ -264,6 +291,7 @@ export default {
264 291 
      this.requestType = item.type
265 292 
      this.editor.set(item.params)
266 293 
      this.coder.set(item.params)
294 
      this.collapseArr = ['request']
267 295 
      this.historyShow = false
268 296 
      this.isLocalhostWith = false
269 297 
      this.isCross()