0.1.6 • Published 2 years ago
element-textarea-origin v0.1.6
element-textarea-origin
element-textarea 的源文件
更新
新增左右按键调整输入位置
安装
npm install --save element-textarea-origin
引入
组件和样式均需引入
import ElementTextarea from 'element-textarea-origin'
示例图
通过外部事件给文本框新增组件,组件自定义,可实现如下效果:
示例代码
<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>