用来测试 autosize.js 的 HTML 代码，自动适应 textarea 高度

 

 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>

 

posted @ 2024-09-19 19:27  zzgreg  阅读(153)  评论(0)    收藏  举报