inleft
2024-05-18 57e3bead08715d72efaeffe90fafa179b8366473
commit | author | age
271ca6 1 <template>
I 2     <div id="area">
3         <a-form-item>
4             <a-textarea ref="targetArea" :rows="4" v-model="visitorContent" :placeholder="this.$attrs.replyHolder"
5                 class="OwO-textarea" />
6         </a-form-item>
7         <MyOwO @insertOwO="insertOwO"></MyOwO>
8     </div>
9 </template>
10
11 <script>
12     import MyOwO from './MyOwO.vue'
13
14     export default {
15         components: {
16             MyOwO
17         },
18         props: {
19             content: String
20         },
21         data() {
22             return {
23                 visitorContent: '',
24             }
25         },
26         watch: {
27             visitorContent: function(newValue, oldValue) {
28                 // if (newValue.length > 0) {
29                 //     if (!this.init) {
30                 //         this.showTip = true;
31                 //         setTimeout(() => {
32                 //             this.showTip = false;
33                 //         }, 5000);
34                 //     }
35                 //     this.init = true;
36                 //     this.initOwO();
37                 // }
38                 this.$emit("update:content", newValue)
39             },
40         },
41         methods: {
42             insertOwO(text) {
43                 console.log(text);
44                 this.insertInputTxt(text)
45             },
46             insertInputTxt(insertTxt) {
47                 var elInput = this.$refs.targetArea.$el
48                 var startPos = elInput.selectionStart
49                 var endPos = elInput.selectionEnd
50                 if (startPos === undefined || endPos === undefined) return
51                 var txt = elInput.value
52                 var result = txt.substring(0, startPos) + insertTxt + txt.substring(endPos)
53                 elInput.value = result
54                 this.visitorContent = result
55                 elInput.focus()
56                 elInput.selectionStart = startPos + insertTxt.length
57                 elInput.selectionEnd = startPos + insertTxt.length
58
59                 this.$emit("update:content", this.visitorContent)
60             }
61         }
62     }
63 </script>
64
65 <style>
66
67 </style>