【sgCreatePinyin】自定义小工具：敏捷开发→自动化生成拼音字段名称（字段名生成工具）

<template>
  <!-- 
前往https://blog.csdn.net/qq_37860634/article/details/136126311
查看使用说明
-->
  <div :class="$options.name">
    <div class="sg-head">拼音字段生成工具</div>
    <div class="sg-container">
      <div class="sg-start">
        <div style="margin-bottom: 10px">字段中文名</div>
        <el-input
          style="margin-bottom: 10px"
          type="textarea"
          :placeholder="`请粘贴字段中文名`"
          v-model="textareaValue1"
          show-word-limit
        />
 
        <el-button type="primary" @click="createResult">生成拼音字段</el-button>
      </div>
      <div class="sg-center">→</div>
 
      <div class="sg-end">
        <div style="margin-bottom: 10px">生成结果</div>
        <el-input
          style="margin-bottom: 10px"
          type="textarea"
          :placeholder="`请复制字段`"
          v-model="textareaValue2"
          show-word-limit
        />
 
        <el-button type="primary" @click="copyResult">复制</el-button>
      </div>
    </div>
  </div>
</template>
 
<script>
import pinyin from "@/js/pinyin";
export default {
  name: "sgCreatePinyin",
  data() {
    return {
      textareaValue1: "",
      textareaValue2: "",
    };
  },
  watch: {
    textareaValue1(newValue, oldValue) {
      newValue && this.createResult(newValue);
    },
  },
  methods: {
    createResult(d) {
      let texts = this.textareaValue1
        .split("\n")
        .map((v) => v.split("\t").join("").trim());
      texts = texts.filter((v, i, ar) => v !== ``);
 
      let pinyinTexts = texts.map((v) => pinyin.getCamelChars(v));
 
      this.textareaValue2 = pinyinTexts.join("\n");
 
      this.copyResult(); //自动复制生成结果
    },
    copyResult(d) {
      this.$g.copy(this.textareaValue2, true);
    },
  },
};
</script>
 
<style lang="scss" scoped>
.sgCreatePinyin {
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  padding: 20px;
 
  .sg-head {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    color: #409eff;
    margin-bottom: 10px;
  }
 
  .sg-container {
    display: flex;
    flex-wrap: nowrap;
    height: calc(100vh - 70px);
 
    & > .sg-start {
      width: calc(50% - 20px);
      height: 100%;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
    }
 
    & > .sg-center {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-grow: 1;
      margin: 0 10px;
      font-size: 24px;
      color: #409eff;
      font-weight: bold;
    }
 
    & > .sg-end {
      width: calc(50% - 20px);
      height: 100%;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
    }
 
    >>> .el-textarea {
      width: 100%;
      height: 100%;
      textarea {
        width: 100%;
        height: 100%;
        max-height: revert;
      }
    }
  }
}
</style>