Shinkai005
V1
2022/05/10阅读:9主题:红绯
【vue】列表操作小工具
【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>
实现的功能:
-
点击添加索引,只能是数字,然后数字递增 -
支持010这种形式 会递增011 012 013...
-
-
点击添加指定内容 -
输入索引时, 空格可以识别,但是不会显示.最终结果包含空格
-
测试:
输入080 显示正确 临界值100正确.
-
输入0080 显示正确
-
新增按钮,所有项添加指定内容
试着添加md格式
复制回来检测
ok 无敌!
作者介绍
Shinkai005
V1
公众号:深海笔记Shinkai