Fix issues with multiline text settings
This commit is contained in:
parent
382ee68125
commit
26404843c2
|
@ -54,7 +54,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-form-textarea {
|
.bd-form-textarea {
|
||||||
.bd-form-textarea-wrap {
|
.bd-form-textarea-wrap,
|
||||||
|
textarea.bd-textarea {
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
background: rgba(0, 0, 0, 0.1);
|
background: rgba(0, 0, 0, 0.1);
|
||||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
|
@ -62,6 +63,7 @@
|
||||||
color: #b9bbbe;
|
color: #b9bbbe;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
max-height: 140px;
|
max-height: 140px;
|
||||||
|
transition: border-color .2s ease, color .2s ease;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
@ -71,9 +73,24 @@
|
||||||
@include scrollbar;
|
@include scrollbar;
|
||||||
}
|
}
|
||||||
|
|
||||||
div[contenteditable] {
|
div[contenteditable],
|
||||||
|
textarea {
|
||||||
padding: 11px;
|
padding: 11px;
|
||||||
cursor: text;
|
cursor: text;
|
||||||
|
min-height: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
resize: none;
|
||||||
|
outline: none;
|
||||||
|
width: 100%;
|
||||||
|
color: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow-y: visible;
|
||||||
|
max-height: 140px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -16,18 +16,21 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="bd-hint">{{ setting.hint }}</div>
|
<div class="bd-hint">{{ setting.hint }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bd-form-textarea-wrap">
|
<textarea class="bd-textarea" ref="textarea" @keyup.stop @input="recalculateHeight" v-model="setting.value" :disabled="setting.disabled"></textarea>
|
||||||
<div contenteditable="true" @keyup.stop @input="input">{{ setting.value }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: ['setting', 'change'],
|
props: ['setting'],
|
||||||
methods: {
|
methods: {
|
||||||
input(e) {
|
recalculateHeight() {
|
||||||
this.change(e.target.textContent);
|
const { textarea } = this.$refs;
|
||||||
|
textarea.style.height = '1px';
|
||||||
|
textarea.style.height = textarea.scrollHeight + 2 + 'px';
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.recalculateHeight();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue