【vue】列表操作小工具

<!DOCTYPE html>
<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>Document</title>
    <script type="text/javascript" src="./代码/vue_basic/js/vue.js"></script>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
      rel="stylesheet"
    />
    <!--Stylesheet-->
    <style>
      /* @import url(../css/Rainbow\ Border\ Animation/style.css); */

      * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        /* display: flex; */
        box-sizing: border-box;
        background-color: rgb(180, 177, 177);
      }

      textarea {
        padding: 3px;
      }
      .result {
        margin-top: 20px;
      }
      .rainbow {
        /* df */
        display: flex;
        /* tac */
        text-align: center;
        /* aic */
        align-items: center;
        /* jcc */
        justify-content: center;
      }
      .inputContent {
        /* df */
        display: flex;
        /* tac */
        text-align: center;
        /* aic */
        align-items: center;
        /* jcc */
        justify-content: center;
      }
      .inputContent textarea {
        height: 300px;
        width: 400px;
        border: 2px solid rgb(179, 16, 43);
        border-radius: 10px;
        outline: none;
      }
      .input {
        /* border: solid; */
        /* df */
        display: flex;
        /* tac */
        text-align: center;
        /* aic */
        align-items: center;
        /* jcc */
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;
      }
      .inputIndex {
        /* border: solid; */
        /* df */
        display: flex;
        /* tac */
        text-align: center;
        /* aic */
        align-items: center;
        /* jcc */
        justify-content: center;
      }
      .result {
        /* df */
        display: flex;
        /* tac */
        text-align: center;
        /* aic */
        align-items: center;
        /* jcc */
        justify-content: center;
      }
      .result textarea {
        height: 300px;
        width: 400px;
        border: 2px solid rgb(17, 159, 159);
        border-radius: 10px;
        outline: none;
      }
      .dashed {
        height: 1px;
        border-bottom: 1px dashed black;
      }
      .center {
        /* df */
        display: flex;
        /* tac */
        text-align: center;
        /* aic */
        align-items: center;
        /* jcc */
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="input">
        <div class="inputIndex">
          请先输入索引:<input type="text" v-model="index" @blur="checkIndex" />
          初始值:{{original}}
        </div>
        <div class="inputContent">
          <!-- <p>下面输入内容:</p> -->
          <div class="rainbow">
            <textarea
              type="text"
              v-model="text"
              placeholder="这里输入内容, 当索引框为数字,推荐点击添加索引,当索隐框为符号等,推荐点击添加指定内容,你要一样数字我也没办法"
            ></textarea>
          </div>
        </div>
      </div>

      <div class="center">
        <div class="outer button">
          <button class="click" @click.prevent.stop="update">
            点击添加索引
          </button>
          <span></span>
          <span></span>
        </div>
        <div class="outer button">
          <button class="click" @click.prevent.stop="addContent">
            点击添加指定内容
          </button>
          <span></span>
          <span></span>
        </div>
      </div>
      <div class="dashed"></div>
      <div class="result rainbow">
        <!-- <p>结果在这里</p> -->
        <textarea
          type="text"
          :value="result"
          placeholder="结果在这里"
        ></textarea>
      </div>
    </div>

    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          text: '', //用户输入的内容
          index: '', //用户输入的索引
          indexLength: 0, //索引长度,用于补位0
          result: '', //返回的结果
          original: '', //初始index
        },
        methods: {
          // 添加序号
          update() {
            // arr 保存 数据
            let arr = [];
            // a 用来记录前置0的个数
            let a = '';
            // 因为双向绑定, 防止temp变改变原数据
            let temp = this.index;
            // 空判断
            if (!this.text) {
              alert('你倒是写字啊');
              return;
            }
            if (this.index.length === 0) {
              alert('你倒是写序号啊');
              return;
            }
            //根据换行符 分割成数组
            arr = this.text.split('\n');
            //给每一项+索引,
            arr = arr.map((item, index) => {
              /* 这能提出来新函数,懒得提 */
              //非空项,添加索引
              if (item) {
                // console.log(temp)

                // 判断是几位数
                temp++;
                let tempLength = Number(String(temp).length);

                // 考虑补位情况
                let res = this.original.length - tempLength; // 1

                if (res>=0) {
                  a = String(Math.pow(10, res));
                  a = a.slice(1);
                }else{
                  a='';
                }
                // a===1 => ''
                // a===2 => 0
                // a===3 => 00

                console.log(res, a, temp, tempLength);
                return (item = `${a}${temp}-${item}`);

                // 当前值为空
              } else {
                console.log('当前值为空');
                return (item = '\n\n');
              }
            });
            console.log(arr);
            arr = arr.join('');
            this.result = arr;
          },
          // 获取输入长度,转换为number,保留原始值
          checkIndex() {
            this.indexLength = this.index.length;
            this.original = this.index;
            this.index = Number(this.index);
            // console.log('index', this.index);
          },
          // 所有列添加指定内容
          addContent() {
            //需要判断 用户输入index
            if (!this.original) {
              
              return;
            }

            // arr 保存 数据
            let arr = [];
            // a 用来记录前置内容
            let a = this.original;

            // // 因为双向绑定, 防止temp变改变原数据
            // let temp = this.index;

            // 空判断
            if (!this.text) {
              alert('你倒是写字啊');
              return;
            }

            //根据换行符 分割成数组
            arr = this.text.split('\n');
            //给每一项+前置内容,
            arr = arr.map((item, index) => {
              /* 这能提出来新函数,懒得提 */
              //非空项,添加索引
              if (item) {
                return (item = `${a}${item}`);
              } else {
                console.log('当前值为空');
                return (item = '\n\n');
              }
            });
            console.log(arr);
            arr = arr.join('');
            this.result = arr;
          },
        },
      });
    </script>
  </body>
</html>