<template>
<div class="edit-container">
<!-- 设置序号 -->
<div class="left-content">
<div class="order">
<div class="order-number" v-for="(item, index) in numList" :key="index">
<div :style="{ height: item.height + 'px' }">{{ index + 1 }}.</div>
</div>
</div>
</div>
<!-- 富文本框 -->
<a-textarea
@input="handleTextareaInput"
v-model="areaText"
@scroll="scrollTextArea"
class="area-content"
></a-textarea>
<!-- 辅助作用 -->
<div class="text-content" ref="textRef">
<div class="text-item" v-for="(item, index) in strList" :key="index">
{{ item }}
</div>
</div>
<button @click="save">保存数据</button>
</div>
</template>
<script>
export default {
name: "Textarea",
data() {
return {
areaText: `1.console.log(chooseArea);//打印这个父节点里面的内容,看是否能获取到东西,如果是null则说明你获取chooseArea这个节点的路径有问题,建议重新获取
2.我的就是获取路径有问题,所以出了问题;
3.console.log(chooseArea);//打印这个父节点里面的内容,看是否能获取到东西,如果是null则说明你获取chooseArea这个节点的路径有问题,建议重新获取
4.我的就是获取路径有问题,所以出了问题;
5.console.log(chooseArea);//打印这个父节点里面的内容,看是否能获取到东西,如果是null则说明你获取chooseArea这个节点的路径有问题,建议重新获取
6.我的就是获取路径有问题,所以出了问题;`, //富文本框的值
strList: [], //字符串列表
numList: [],
};
},
watch: {
strList() {
this.$nextTick(() => {
let classList = document.querySelectorAll(".text-item");
this.numList = [];
this.strList.forEach(() => {
let newItem = {
height: 10,
};
this.numList.push(newItem);
});
classList.forEach((item, index) => {
this.numList[index].height = item.offsetHeight || 20;
});
});
},
},
mounted() {
if (this.areaText) {
let str = this.areaText;
str = str.replace(/\r/gi, "");
str = str.split("\n");
this.strList = str.map((item, index) =>
item.replace(index + 1 + ".", "")
);
this.areaText = this.strList.map((item) => item + "\n").join("");
}
},
methods: {
// 监听滚动
scrollTextArea(e) {
// 设置旁边序号滚动
document.getElementsByClassName("order")[0].style.top =
-e.target.scrollTop + "px";
}, // 监听输入数据,换行提示
handleTextareaInput(e) {
let str = e.target.value;
str = str.replace(/\r/gi, "");
str = str.split("\n");
this.strList = str;
},
save() {
let str = "";
this.strList.forEach((item, index) => {
str += index + 1 + "." + item + "\n";
});
console.log(str);
},
},
};
</script>
<style scoped>
.edit-container {
width: 379px;
margin: 0 auto;
position: relative;
height: 200px;
font-size: 14px;
}
/* 左边设置定位 */
.left-content {
width: 30px;
height: calc(100% - 8px);
text-align: left;
line-height: 20px;
z-index: 100;
position: absolute;
left: 10px;
top: 4px;
overflow: hidden;
}
.order {
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
.order .order-number {
width: 100%;
display: block;
}
.area-content {
width: 100%;
height: 100%;
line-height: 20px;
padding-left: 40px;
word-break: break-all;
}
.text-content {
width: 100%;
height: 100%;
line-height: 20px;
word-break: break-all;
text-align: left;
position: absolute;
overflow: auto;
padding: 4px 11px;
padding-left: 40px;
top: -9000px;
left: -9000px;
}
</style>
vue a-textarea回车行头递增序号
最新推荐文章于 2024-08-13 23:37:23 发布
该文章展示了一个Vue.js组件,用于实现一个带有序号的富文本编辑器。当文本区域滚动时,序号部分会随之滚动。同时,文章描述了如何处理输入数据,监听滚动事件以及在输入时动态更新序号列表的高度。在保存时,将内容转换为特定格式。
摘要由CSDN通过智能技术生成