Element-textarea NPM

element-textarea

更新

0.1.8 新增左右按键调整输入位置

安装

npm install --save element-textarea

引入

组件和样式均需引入

import ElementTextarea from 'element-textarea'
import 'element-textarea/lib/element-textarea.css'

示例图

通过外部事件给文本框新增组件，组件自定义，可实现如下效果：示例图

示例代码

<template>
    <div class="formula__content">
      <div class="content-input">
        <input placeholder="请输入" v-model="numInput" class="num-input" @keyup.13="addNum" />
        <button class="add-num" @click="addNum" :disabled="numInput === ''">添加元素</button>
      </div>
      <element-textarea class="content-textarea" v-model="eleItems" :insertIdx.sync="insertIdx">
        <template v-slot="{data}">
          <!-- 这里使用自定义组件 -->
          <div class="content-textarea__item">{{data.value}}</div>
        </template>
      </element-textarea>
    </div>
</template>

<script>
import ElementTextarea from 'element-textarea'
import 'element-textarea/lib/element-textarea.css'

export default {
  components: {
    ElementTextarea,
  },

  data() {
    return {
      numInput: '',
      eleItems: [],
      insertIdx: -1,
    }
  },

  methods: {
    // 获取uuid
    generateUUID() {
      var d = new Date().getTime();
      if (window.performance && typeof window.performance.now === "function") {
          d += performance.now(); //use high-precision timer if available
      }
      var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
          var r = (d + Math.random() * 16) % 16 | 0;
          d = Math.floor(d / 16);
          return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
      });
      return uuid;
    }

    /**
     * 新增组件
     */
    addFormulaItem(type, value) {
      const uuid = this.generateUUID()
      const res = { uuid, type, value }

      // 定点插入和直接放到最后
      if (this.insertIdx < 0) {
        this.eleItems.push(res)
      } else {
        this.eleItems.splice(this.insertIdx, 0, res)
        // 最前面插入无需加1
        if (this.insertIdx !== 0) {
          this.insertIdx += 1
        }
      }
    },

    // 数字组件为例
    addNum() {
      if(this.numInput) {
        this.addFormulaItem('NUM', this.numInput)
        this.numInput = ''
      }
    },
  },

}
</script>

<style scoped>
.content-textarea {
  height: 400px;
  margin: 20px;
  padding: 20px;
}
.content-textarea__item {
  display: inline-block;
  height: 24px;
  line-height: 24px;
  padding: 0 8px;
  background: #ecf5ff;
  border: 1px solid #d9ecff;
  border-radius: 2px;
}
</style>