59 lines
991 B
Vue
59 lines
991 B
Vue
<template>
|
|
<div ref="input"
|
|
:placeholder="placeholder"
|
|
class="auto-input"
|
|
contenteditable
|
|
@input="changeText">
|
|
{{ modelValue }}
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "AutoInput",
|
|
props: {
|
|
modelValue: String,
|
|
placeholder: {
|
|
type: String,
|
|
default: '留下你的精彩评论吧'
|
|
}
|
|
},
|
|
mounted() {
|
|
// this.$refs.input.setAttribute("placeholder", "改变")
|
|
},
|
|
computed: {},
|
|
data: function () {
|
|
return {}
|
|
},
|
|
methods: {
|
|
changeText(e) {
|
|
this.$emit('update:modelValue', this.$el.innerText);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
|
|
.auto-input {
|
|
width: 100%;
|
|
max-height: 7rem;
|
|
overflow-y: scroll;
|
|
padding: 0 .5rem;
|
|
outline: none;
|
|
}
|
|
|
|
.auto-input::-webkit-scrollbar {
|
|
width: 0 !important
|
|
}
|
|
|
|
.auto-input:empty::before {
|
|
/*content: "留下你的精彩评论吧";*/
|
|
content: attr(placeholder);
|
|
color: #999999;
|
|
}
|
|
|
|
.auto-input:focus::before {
|
|
content: none;
|
|
}
|
|
</style> |