当前位置: 首页 > article >正文

【sgCreateCallAPIFunctionParam】自定义小工具:敏捷开发→调用接口方法参数生成工具

 

 

<template>
  <div :class="$options.name" class="sgDevTool">
    <sgHead />
    <div class="sg-container">
      <div class="sg-start">
        <div style="margin-bottom: 10px">
          参数列表[逗号模式]
          <el-tooltip
            :content="`如何获取参数列表[逗号模式]?`"
            :effect="`dark`"
            :enterable="false"
            :placement="`top`"
            :transition="`none`"
          >
            <el-link
              icon="el-icon-info"
              :underline="false"
              @click="$refs.image.showViewer = true"
            />
          </el-tooltip>

          <el-image
            ref="image"
            style="display: none"
            :preview-src-list="[`~@/../static/img/${$options.name}.gif`]"
          />
        </div>

        <el-input
          style="margin-bottom: 10px"
          ref="textareaValue1"
          type="textarea"
          :placeholder="`请粘贴apifox.com网站对应接口-运行-body-[x-www-form-urlencoded]-批量编辑-逗号模式,复制内容`"
          v-model="textareaValue1"
          show-word-limit
        />

        <el-button type="primary" @click="createResult">运行</el-button>
      </div>
      <div class="sg-center">→</div>

      <div class="sg-end">
        <ouputTextarea ref="ouputTextarea" v-model="textareaValue2" />
      </div>
    </div>
  </div>
</template>

<script>
import sgHead from "@/vue/components/sgHead";
import ouputTextarea from "@/vue/components/ouputTextarea";
export default {
  name: "sgCreateCallAPIFunctionParam",
  components: {
    sgHead,
    ouputTextarea,
  },
  data() {
    return {
      textareaValue1: localStorage[`sgDevTool/leftTextArea`],
      textareaValue2: "",
    };
  },
  computed: {},

  watch: {
    textareaValue1(newValue, oldValue) {
      newValue && this.createResult(newValue);
      localStorage[`sgDevTool/leftTextArea`] = newValue;
    },
  },
  created() {},
  methods: {
    createResult(d) {
      if (this.textareaValue1.includes("true,")) {
        let texts = this.$g.getMultiLineTexts(this.textareaValue1);

        let r = [];
        texts.forEach((v) => {
          if (v.includes("true,")) {
            r.push(
              v
                .split("true,")[1]
                .split(",")[0]
                .replace(/\[/g, ``)
                .replace(/\]/g, ``)
                .replace(/\s+/g, "")
            );
          }
        });

        let params1 = r.join(",");
        let params2 = r.join(",\n");
        this.textareaValue2 = `${params1}

${params2},
`;

        this.$refs.ouputTextarea.copyResult(); //自动复制生成结果
      } else {
        return this.$message.error(this.$refs.textareaValue1.$attrs.placeholder);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/css/sgDevTool";
</style>


http://www.kler.cn/a/313861.html

相关文章:

  • Spring框架 了解
  • Python基于Django的图像去雾算法研究和系统实现(附源码,文档说明)
  • 使用 Docker 部署 Java 项目(通俗易懂)
  • 【redis】redis-cli命令行工具的使用
  • 深度学习图像算法中的网络架构:Backbone、Neck 和 Head 详解
  • 【Unity】unity3D 调用LoadSceneAsync 场景切换后比较暗 部门材质丢失
  • 执行 npm报错 Cannot find module ‘../lib/cli.js‘
  • 电脑技巧:Win11家庭版和专业版之间的区别详解
  • KVM环境下制作ubuntu qcow2格式镜像
  • xml中的转义字符
  • 【我的 PWN 学习手札】tcache stash with fastbin double free —— tcache key 绕过
  • 前端web端项目运行的时候没有ip访问地址
  • 【信创】Linux上如何创建和管理自定义的 systemd 服务 _ 统信 _ 麒麟 _ 方德
  • 滑动窗口算法专题(1)
  • pgsql 分组查询方法
  • Python基础知识——字典排序(不断补充)
  • 数据库课程设计mysql
  • python-SZ斐波那契数列/更相减损数
  • 【Python】Anaconda插件:Sublime Text中的Python开发利器
  • 【数据结构初阶】链式二叉树接口实现超详解
  • InnoDB锁机制全解析
  • VScode快速配置c++(菜鸟版)
  • 基于SpringBoot的招生宣传管理系统【附源码】
  • 计算机网络(Hub 集线器、交换机、路由器)
  • linux-安全管理-防火墙与网络安全
  • Golang | Leetcode Golang题解之第413题等差数列划分