|
@@ -1,67 +1,68 @@
|
|
|
<template>
|
|
|
- <div class="edit-div"
|
|
|
- v-html="innerText"
|
|
|
- :contenteditable="canEdit"
|
|
|
- @focus="isLocked = true"
|
|
|
- @blur="isLocked = false"
|
|
|
- @input="changeText"
|
|
|
- placeholder="输入">
|
|
|
- </div>
|
|
|
+ <div
|
|
|
+ class="edit-div"
|
|
|
+ v-html="innerText"
|
|
|
+ :contenteditable="canEdit"
|
|
|
+ @focus="isLocked = true"
|
|
|
+ @blur="isLocked = false"
|
|
|
+ @input="changeText"
|
|
|
+ placeholder="输入"
|
|
|
+ ></div>
|
|
|
</template>
|
|
|
<script>
|
|
|
export default {
|
|
|
- name: 'editDiv',
|
|
|
- props: {
|
|
|
- value: {
|
|
|
- type: String,
|
|
|
- default: ''
|
|
|
- },
|
|
|
- canEdit: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- }
|
|
|
- },
|
|
|
- data(){
|
|
|
- return {
|
|
|
- innerText: this.value,
|
|
|
- isLocked: false
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- 'value'(){
|
|
|
- if (!this.isLocked || !this.innerText) {
|
|
|
- this.innerText = this.value;
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- changeText(){
|
|
|
- if(this.$el.innerHTML.length<210){
|
|
|
- this.$emit('input', this.$el.innerHTML);
|
|
|
- }else{
|
|
|
- this.$el.innerHTML= this.$el.innerHTML.substring(0,210)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ name: "editDiv",
|
|
|
+ props: {
|
|
|
+ value: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ canEdit: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ innerText: this.value,
|
|
|
+ isLocked: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ value() {
|
|
|
+ if (!this.isLocked && !this.innerText) {
|
|
|
+ this.innerText = this.value;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeText() {
|
|
|
+ if (this.$el.innerHTML.length < 210) {
|
|
|
+ this.$emit("input", this.$el.innerHTML);
|
|
|
+ } else {
|
|
|
+ this.$el.innerHTML = this.$el.innerHTML.substring(0, 210);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="scss" rel="stylesheet/scss">
|
|
|
- .edit-div {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- overflow: auto;
|
|
|
- word-break: break-all;
|
|
|
- outline: none;
|
|
|
- user-select: text;
|
|
|
- white-space: pre-wrap;
|
|
|
- text-align: left;
|
|
|
- &[contenteditable=true]{
|
|
|
- user-modify: read-write-plaintext-only;
|
|
|
- &:empty:before {
|
|
|
- content: attr(placeholder);
|
|
|
- display: block;
|
|
|
- color: #ccc;
|
|
|
- }
|
|
|
- }
|
|
|
+.edit-div {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ word-break: break-all;
|
|
|
+ outline: none;
|
|
|
+ user-select: text;
|
|
|
+ white-space: pre-wrap;
|
|
|
+ text-align: left;
|
|
|
+ &[contenteditable="true"] {
|
|
|
+ user-modify: read-write-plaintext-only;
|
|
|
+ &:empty:before {
|
|
|
+ content: attr(placeholder);
|
|
|
+ display: block;
|
|
|
+ color: #ccc;
|
|
|
}
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|