tool.vue 2.73 KB
Newer Older
wanli's avatar
wanli committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
<template>
  <div class="app-container">
    <el-alert
      title="将文本转换为类似C的文字,转义换行符,制表符,双引号和反斜杠。"
      type="success"
    ></el-alert>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <h5>请输入要转换的文本:</h5>
        <el-input
          type="textarea"
          :autosize="{ minRows: 30, maxRows: 50 }"
          resize="none"
          placeholder="请输入内容"
          v-model="inputString"
        ></el-input>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <h5>转换结果:</h5>
        <el-input
          type="textarea"
          :autosize="{ minRows: 30, maxRows: 50 }"
          resize="none"
          placeholder="转换结果"
          v-model="outputString"
        ></el-input>
      </el-col>
    </el-row>
    <div style="margin: 10px 0px">
      <el-form>
        <el-form-item>
          <el-button type="primary" @click="getConvertString">转换</el-button>
          <el-button type="success" @click="downloadFile">下载</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
40
import { getConvertString } from "@/api/store";
wanli's avatar
wanli committed
41 42 43 44 45 46 47 48

export default {
  name: "AppTool",
  data() {
    return {
      inputString: null,
      outputString: null,
      filename: "app.js",
49
      page: "tools.vue"
wanli's avatar
wanli committed
50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
    };
  },
  methods: {
    createFile(content, filename) {
      const a = document.createElement("a");
      const blob = new Blob([content]);
      const url = window.URL.createObjectURL(blob);
      a.href = url;
      a.download = filename;
      a.click();
      window.URL.revokeObjectURL(url);
    },
    downloadFile() {
      if (!this.inputString) return this.$message.error("输入内容不能为空");

      this.$prompt("请输入文件名", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValue: this.filename,
        inputErrorMessage: "文件名格式不正确",
      })
        .then(({ value }) => {
wanli's avatar
wanli committed
72
          if (value) this.filename = value;
wanli's avatar
wanli committed
73
          this.createFile(this.outputString, this.filename);
wanli's avatar
wanli committed
74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    getConvertString() {
      getConvertString({ string: this.inputString })
        .then((res) => {
          this.outputString = res.data;
          this.$message.success(res.message);
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
  },
  mounted() {},
  created() {},
};
</script>
<style lang="scss" scoped>
.app-container {
  & > div.page-wrapper {
    margin: 10px 0px;
  }
}
</style>