297 lines
7.1 KiB
Vue
297 lines
7.1 KiB
Vue
<template>
|
||
<view class="highlight-box">
|
||
<template v-if="type === 'textarea'">
|
||
<view v-if="value"
|
||
class="textarea-outer"
|
||
ref="textareaOuter"
|
||
>
|
||
<view ref="outerInner" class="outer-inner"
|
||
v-html="highlightHtml(value)">
|
||
</view>
|
||
</view>
|
||
<textarea
|
||
ref="textareaBox"
|
||
maxlength="1000"
|
||
auto-height
|
||
:autoSize="true"
|
||
@blur="blur"
|
||
:placeholder="placeholder"
|
||
v-model:value="value">
|
||
</textarea>
|
||
</template>
|
||
<template v-if="type === 'input'">
|
||
<view v-if="value"
|
||
class="input-outer"
|
||
v-html="highlightHtml(value)">
|
||
</view>
|
||
<a-input type="text" class="ant-input"
|
||
:placeholder="placeholder"
|
||
v-model:value.trim="value"/>
|
||
</template>
|
||
</view>
|
||
</template>
|
||
|
||
<script >
|
||
export default {
|
||
name: 'HighlightTextarea',
|
||
data() {
|
||
return {
|
||
value: ''
|
||
};
|
||
},
|
||
props: {
|
||
placeholder: {
|
||
type: String,
|
||
required: false,
|
||
default: '请输入'
|
||
},
|
||
text: {
|
||
type: String,
|
||
required: false,
|
||
default: ''
|
||
},
|
||
highlightKey: {
|
||
type: Array,
|
||
require: false,
|
||
default: () => []
|
||
},
|
||
type: {
|
||
type: String,
|
||
required: true,
|
||
default: 'textarea'
|
||
},
|
||
maxHeight: {
|
||
type: Number,
|
||
required: false,
|
||
default: 220
|
||
},
|
||
modelValue: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
},
|
||
watch: {
|
||
value (v) {
|
||
// this.value = this.text.replace(/(^\s*)|(\s*$)/g, '').replace(/<br \/>|<br\/>|<br>/g, '\n');
|
||
this.$emit("input", v);
|
||
},
|
||
modelValue: {
|
||
deep: true,
|
||
immediate: true,
|
||
handler(v) {
|
||
console.log(v, 'modelValue 3333')
|
||
|
||
this.value = v ? this.modelValue : ''
|
||
},
|
||
},
|
||
disabled: {
|
||
deep: true,
|
||
immediate: true,
|
||
handler(v) {
|
||
// this.editorConfig.readOnly = v
|
||
// this.$nextTick(() => {
|
||
// if (this.editor) v ? this.editor.disable() : this.editor.enable();
|
||
// })
|
||
},
|
||
}
|
||
},
|
||
created() {
|
||
// this.value = this.text.replace(/(^\s*)|(\s*$)/g, '').replace(/<br \/>|<br\/>|<br>/g, '\n');
|
||
},
|
||
mounted() {
|
||
// this.scrollMousewheel();
|
||
},
|
||
methods: {
|
||
setValue(newValue) {
|
||
this.value = newValue;
|
||
// 触发所有必要的事件
|
||
this.$emit('input', newValue);
|
||
this.$emit('update:modelValue', newValue);
|
||
this.$emit('change', newValue);
|
||
},
|
||
|
||
highlightHtml(str) {
|
||
if ((!str || !this.highlightKey || this.highlightKey.length === 0) && this.type !== 'textarea') {
|
||
return str;
|
||
}
|
||
let rebuild = str;
|
||
if (this.type === 'textarea') {
|
||
rebuild = rebuild.replace(/\n/g, '<br/>').replace(/\s/g, ' ');
|
||
// textarea有滚动条时，view底部不能和textarea重合，故加一个<br/>
|
||
// const wrap = this.$refs.textareaBox;
|
||
// if (wrap && wrap.scrollHeight > this.maxHeight) {
|
||
// rebuild = rebuild + '<br/>';
|
||
// }
|
||
}
|
||
if (this.highlightKey.filter(item => ~str.indexOf(item)).length) {
|
||
let regStr = '';
|
||
let regExp = null;
|
||
this.highlightKey.forEach(list => {
|
||
regStr = this.escapeString(list);
|
||
regExp = new RegExp(regStr, 'g');
|
||
rebuild = rebuild.replace(regExp,`<span style="color:red">${list}</span>`);
|
||
});
|
||
}
|
||
|
||
return rebuild;
|
||
},
|
||
blur(){
|
||
this.$emit("blur")
|
||
},
|
||
syncScrollTop() {
|
||
const wrap = this.$refs.textareaBox;
|
||
const outerWrap = this.$refs.textareaOuter;
|
||
const outerInner = this.$refs.outerInner;
|
||
if (wrap.scrollHeight > this.maxHeight && outerInner.scrollHeight !== wrap.scrollHeight) {
|
||
outerInner.style.height = `${wrap.scrollHeight}px`;
|
||
}
|
||
if (wrap.scrollTop !== outerWrap.scrollTop) {
|
||
outerWrap.scrollTop = wrap.scrollTop;
|
||
}
|
||
},
|
||
// scrollMousewheel() {
|
||
// if (this.type === 'input') {
|
||
// return;
|
||
// }
|
||
// this.$nextTick(() => {
|
||
// this.eventHandler('add');
|
||
// });
|
||
// },
|
||
// 处理字符串中可能对正则有影响的字符
|
||
escapeString(value) {
|
||
const characterss = ['(', ')', '[', ']', '{', '}', '^', '$', '|', '?', '*', '+', '.'];
|
||
let str = value.replace(new RegExp('\\\\', 'g'), '\\\\');
|
||
characterss.forEach(function (characters) {
|
||
let r = new RegExp('\\' + characters, 'g');
|
||
str = str.replace(r, '\\' + characters);
|
||
});
|
||
return str;
|
||
},
|
||
eventHandler(type) {
|
||
const wrap = this.$refs.textareaBox;
|
||
if (wrap) {
|
||
let mousewheelevt = (/Firefox/i.test(navigator.userAgent))
|
||
? 'DOMMouseScroll' : 'mousewheel';
|
||
wrap[`${type}EventListener`](mousewheelevt, this.syncScrollTop);
|
||
wrap[`${type}EventListener`]('scroll', this.syncScrollTop);
|
||
}
|
||
}
|
||
},
|
||
destroyed() {
|
||
// this.eventHandler('remove');
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="less">
|
||
@width: 100%; // 500px
|
||
.highlight-box {
|
||
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
||
position: relative;
|
||
display: flex;
|
||
//font-size: 12px;
|
||
width: @width;
|
||
//position: relative;
|
||
//color: #333333;
|
||
background: #ffffff;
|
||
border-radius: 2px;
|
||
overflow: hidden;
|
||
.textarea-outer,
|
||
.input-outer {
|
||
box-sizing: border-box;
|
||
width: @width;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
// border: 1px solid transparent;
|
||
border-top: 0;
|
||
// 鼠标事件失效 ie6-10不支持
|
||
pointer-events: none;
|
||
cursor: text;
|
||
|
||
color: #333333;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
span {
|
||
color: red; // #F27C49
|
||
}
|
||
&:hover {
|
||
border-color: #4C84FF;
|
||
}
|
||
}
|
||
.textarea-outer {
|
||
overflow-y: auto;
|
||
//line-height: 20px;
|
||
word-break: break-all;
|
||
.outer-inner {
|
||
// padding: 5px 8px;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
textarea {
|
||
width: @width;
|
||
//line-height: 20px;
|
||
resize: none;
|
||
}
|
||
.input-outer,
|
||
input {
|
||
width: @width;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
}
|
||
.input-outer {
|
||
bottom: 0;
|
||
padding: 0 8px;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
textarea,
|
||
input {
|
||
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
||
//font-size: 12px;
|
||
// position: relative;
|
||
// z-index: 2;
|
||
// 光标的颜色
|
||
//color: #333333;
|
||
// 文本颜色
|
||
text-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||
-webkit-text-fill-color: transparent;
|
||
// color: transparent;
|
||
// color: #333333;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
min-height: 300rpx;
|
||
background: transparent;
|
||
border-radius: 2px;
|
||
// border: 1px solid #d9d9d9;
|
||
padding: 0px;
|
||
box-sizing: border-box;
|
||
//&::placeholder {
|
||
// -webkit-text-fill-color: #d5d5d5;
|
||
//}
|
||
//&:hover {
|
||
// border-color: #36cfc9;
|
||
//}
|
||
//&:focus {
|
||
// border-color:#36cfc9;
|
||
// box-shadow: 0 0 0 2px #DBE4FF;
|
||
// outline: none;
|
||
//}
|
||
.textarea-placeholder{
|
||
-webkit-text-fill-color: #B8B8B8;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #B8B8B8;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
</style> |