需求:
首先,从excel表格中或是.txt文档中复制文字或oe号粘贴到input框里,然后根据换行符把粘贴内容填充到input框里,同时调接口获取名称和价格展示出来。
环境:
vue+vue-cli+iview
效果:
未复制粘贴时 粘贴内容后代码:
<template>
<div>
<table>
<thead></thead>
<tbody>
<tr v-for="(product,productIndex) in productList" :index="productIndex">
<td>
<input
type="text" autocomplete="off"
class="oeInput1"
placeholder="请输入oe"
v-model="product.inputVal"
@paste="onPasteDone($event)">
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
const EMPTY_LINE = {
inputVal: ''
}
export default{
data(){
return{
productList: [
Object.assign({}, EMPTY_LINE) // 默认表格中只显示一行
]
}
},
methods:{
onPasteDone(e){
let _this = this;
if (!(e && e.clipboardData)) {
e = window.event;
}
// 添加到事件对象中的访问系统剪贴板的接口
let clipboardData = e.clipboardData,
items,
item;
if (clipboardData) {
items = clipboardData.items;
if (!items) {
return;
}
item = items[0];
if (item && item.kind === "string") {
//str是你当前粘贴到input框里的所有搜索内容
item.getAsString(function (str) {
let content = str.split(/[\n]/); //以换行符来切割
for (let kk in content) {
let val = content[kk];
if ($.trim(val).length == 0) {
continue;
}
//替换粘贴时的第一行
var res = val.replace(/[\r\n]/g,"");
var product ={
inputVal:res
};
//confirmCurrentOe是调的后台接口来获取标准名称和价格
_this.confirmCurrentOe(product);
}
_this.productList.splice(0)
})
}
}
return true;
}
}
}
</script>
网友评论