溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了vue如何實現記事本小功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
具體內容如下
<!DOCTYPE html> <html lang="en"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <style> #app { margin: 0px auto; width: 500px; border: 1px solid gainsboro; height: auto; } .title { line-height: 50px; text-align: center; height: 50px; font-weight: 20; font-size: 36px; background: #42b983; border-bottom: 1px solid black; } input:focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6) } .file-container{ overflow: hidden; margin-top: 10px; } .openfile-btn{ float: left; margin-left: 10px; } #file_path{ margin-left: 10px; width: 300px; } #file_con{ display: block; border:0; border-radius:5px; background-color:rgba(241,241,241,.98); width: 480px; height: 250px; margin-top: 10px; margin-left: 10px; resize: none; } ul, li { padding: 0; margin: 0; list-style: none; } .li-div { text-align: center; overflow: hidden; margin-top: 5px; /*border: 3px solid blanchedalmond;*/ } .bot{ height: 30px; } .show-details{ float: right; margin-right: 10px; } .show-btn{ /*display: block;*/ float: right; margin-right: 10px; } </style> </head> <body> <div id="app"> <div class="title"> 記事本 </div> <div> <div class="file-container"> <input class="openfile-btn" type="button" value="從本地導入" id="fileImport" v-on:click="clickLoad"> <input type="file" id="files" ref="refFile" v-on:change="fileLoad"> <input type="text" v-model="path" id="file_path" disabled="disabled"> <input type="button" value="確定導入" v-on:click="addfile"></button> <textarea type="text" id="file_con" autoHeight="true" v-model="input_file"></textarea> </div> </div> <hr> <div class="content"> <ul> <li v-for="(item, index) in message"> <div class="li-div"> <span>{{++index}}</span> <label>{{item}}</label> <button @click="remove(index)" class="show-btn">刪除</button> <button @click="show(index)" class="show-btn" v-if="item.length>30">詳情</button> </div> </li> </ul> </div> <hr> <div v-show="message.length>0" class="bot"> <div > 當前記事本記錄數：{{message.length}} </div> <div class="del-btn"> <button @click="clear"class="show-btn">清空</button> </div> </div> </div> <script> let app = new Vue({ el: '#app', data: { //tmp: "", message: [], path:'', input_file:'', sub_inpufile:'', tmp_file:'' }, methods: { clickLoad: function (){ this.$refs.refFile.dispatchEvent(new MouseEvent('click')) }, fileLoad() { const selectedFile = this.$refs.refFile.files[0]; var name = selectedFile.name; //選中文件的文件名 var size = selectedFile.size; //選中文件的大小 var reader = new FileReader(); reader.readAsText(selectedFile); this.path = name; console.log("文件名:" + name + "大小:" + size); reader.onload = function() { let file_s = this.result; document.getElementById('file_con').value=file_s; } }, addfile:function (){ var file = document.getElementById('file_con').value; this.input_file=file; this.tmp_file=file; //用來存儲原文件 //console.log("this.input_file："+this.input_file) if (file == null || file == "") { alert("輸入不能為空"); } else { if(file.length>30) { this.sub_inpufile=file.substring(0,30)+'...' this.message.push(this.sub_inpufile); this.input_file='' this.path='' console.log(this.sub_inpufile) } else{ this.message.push(this.input_file); this.input_file='' this.path='' } } }, remove: function (index) { var flag = confirm("是否要刪除刪除" + index); if (flag == true) { this.message.splice(index-1, 1); } }, show:function (){ alert(this.tmp_file) //有字數限制，可自定義組件 }, clear: function () { this.message = []; }, }, }) </script> </body> </html>
效果：
感謝你能夠認真閱讀完這篇文章，希望小編分享的“vue如何實現記事本小功能”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
