1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Vue Autosize Example</title> 7 <!-- 引入 autosize.js --> 8 <script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/4.0.2/autosize.min.js"></script> 9 <!-- 引入 Vue.js --> 10 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> 11 <style> 12 .textarea-container { 13 width: 100%; 14 margin: 20px; 15 } 16 textarea { 17 width: 100%; 18 box-sizing: border-box; 19 resize: none; /* 禁用用户手动调整大小 */ 20 padding: 10px; /* 内边距 */ 21 font-size: 16px; /* 字体大小 */ 22 border: 1px solid #ccc; /* 边框样式 */ 23 margin-bottom: 10px; /* 分隔每个 textarea */ 24 } 25 </style> 26 </head> 27 <body> 28 <div id="app"> 29 <div class="textarea-container"> 30 <ul> 31 <li v-for="(item, index) in todos" :key="index"> 32 <textarea 33 ref="autosizeTextareas" 34 v-model="item.text" 35 placeholder="请输入内容..." 36 ></textarea> 37 </li> 38 </ul> 39 </div> 40 </div> 41 42 <script> 43 new Vue({ 44 el: '#app', 45 data() { 46 return { 47 todos: [ 48 { text: '这是一个示例文本。' }, 49 { text: '这是另一个示例文本，看看它如何自动调整高度。' }, 50 { text: '' } 51 ] 52 }; 53 }, 54 mounted() { 55 this.$nextTick(() => { 56 // Ensure autosize is loaded before using it 57 if (typeof autosize !== 'undefined') { 58 this.$refs.autosizeTextareas.forEach(textarea => { 59 autosize(textarea); 60 }); 61 } 62 }); 63 }, 64 beforeDestroy() { 65 this.$nextTick(() => { 66 // Clean up autosize instances 67 if (typeof autosize !== 'undefined') { 68 this.$refs.autosizeTextareas.forEach(textarea => { 69 autosize.destroy(textarea); 70 }); 71 } 72 }); 73 } 74 }); 75 </script> 76 </body> 77 </html>
标签：nextTick,autosize,textarea,示例,text,js,forEach From： https://www.cnblogs.com/harryglory/p/18421197