创建新仓库
This commit is contained in:
207
src/renderer/components/dialog/textModel.vue
Normal file
207
src/renderer/components/dialog/textModel.vue
Normal file
@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<div class="textModel">
|
||||
<div class="box" v-draggable>
|
||||
<div class="boxHeader nav">
|
||||
<!-- <span></span> -->
|
||||
<span class="label">{{ title }}</span>
|
||||
<div class="close-box" @click="close">
|
||||
<span class="close"></span>
|
||||
<i>x</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxBody">
|
||||
<el-form :label-position="labelPosition" label-width="120px" :model="form">
|
||||
<!-- label="请输入文本信息" -->
|
||||
<el-form-item>
|
||||
<el-input type="textarea" placeholder="请输入内容" :rows="2" v-model="form.text" @input="textareaInput"
|
||||
:autosize="{ minRows: 2, maxRows: 10 }" class="input-with-select"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="display: flex;justify-content: flex-end;">
|
||||
<el-button type="primary" @click="confirm">确认</el-button>
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "textModel",
|
||||
data() {
|
||||
return {
|
||||
labelPosition: "top",
|
||||
form: {
|
||||
text: "",
|
||||
},
|
||||
title: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.$changeComponentShow(".textModel", false);
|
||||
},
|
||||
cancel() {
|
||||
this.$changeComponentShow(".textModel", false);
|
||||
this.$sendChanel("textModelContent", null);
|
||||
this.form = {
|
||||
text: "",
|
||||
};
|
||||
},
|
||||
isOnlyWhitespace(str) {
|
||||
// 使用正则表达式匹配一个或多个空白字符
|
||||
const regex = /^\s+$/;
|
||||
return regex.test(str);
|
||||
},
|
||||
textareaInput() {
|
||||
let textArray = this.form.text.split('\n')
|
||||
for (let i = 0; i < textArray.length; i++) {
|
||||
if (textArray[i].length > 80) {
|
||||
textArray[i] = textArray[i].slice(0, 80 - textArray[i].length)
|
||||
this.$message.warning("行超过80个字符,请按回车（Enter）后，继续输入")
|
||||
}
|
||||
}
|
||||
if (textArray.length > 70) {
|
||||
textArray.splice(70 - textArray.length)
|
||||
this.$message.warning("超过最大输入字符")
|
||||
}
|
||||
this.form.text = textArray.join('\n')
|
||||
},
|
||||
confirm() {
|
||||
//this.form.text去除空格
|
||||
// this.form.text = this.form.text.replace(/\s+/g, "");
|
||||
let bool = this.isOnlyWhitespace(this.form.text)
|
||||
if (this.form.text.length == 0 || bool) {
|
||||
this.$message.warning("请输入内容");
|
||||
return;
|
||||
}
|
||||
this.$sendChanel("textModelContent", this.form);
|
||||
this.$changeComponentShow(".textModel", false);
|
||||
this.form = {
|
||||
text: "",
|
||||
};
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$recvChanel("textTetlie", (text) => {
|
||||
this.title = text;
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.textModel {
|
||||
user-select: none;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.box {
|
||||
width: 20vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 45%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: var(--color-sdk-auxiliary-public);
|
||||
font-size: 14px;
|
||||
// z-index: 999999;
|
||||
background: linear-gradient(0deg, var(--color-sdk-bg-gradual)),
|
||||
rgba(0, 0, 0, 0.6);
|
||||
border: 1.5px solid;
|
||||
border-image: linear-gradient(to bottom, var(--color-sdk-gradual)) 1;
|
||||
text-align: left;
|
||||
font-family: "sy-boldface";
|
||||
|
||||
.boxHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 18px;
|
||||
line-height: 46px;
|
||||
padding: 5px 16px 5px 16px;
|
||||
height: 46px;
|
||||
|
||||
.label {
|
||||
font-family: "Ali-mother-counts-bold";
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
text-align: left;
|
||||
text-shadow: 0px 0px 9px rgb(20 118 255);
|
||||
}
|
||||
|
||||
.close-box {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: 0;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
border-radius: 0 0 0 90%;
|
||||
overflow: hidden;
|
||||
|
||||
.close {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(var(--color-sdk-base-rgb), 1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
position: absolute;
|
||||
top: -13px;
|
||||
left: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.boxBody {
|
||||
flex: auto;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
|
||||
.el-form--label-top .el-form-item__label {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.el-textarea__inner {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
background: rgba(var(--color-sdk-base-rgb), 0.2);
|
||||
border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
|
||||
color: #ffffff;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.el-button:hover {
|
||||
border-color: rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user