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/vue@2.6.14/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>
