How to realize the small function of notepad in vue

This article mainly introduces how to achieve vue notepad small function, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor with you to understand.

The details are as follows

# 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), 00 8px rgba (102,175,233,0.6) Box-shadow: inset 0 1px 1px rgba (0,0,0,075), 00 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; 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 } notepad {{+ + index}} {{item}} Delete details number of current notepad records: {{message.length}} clear 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; / / File name of the selected file var size = selectedFile.size; / / the size of the selected file var reader = new FileReader (); reader.readAsText (selectedFile); this.path = name; console.log ("File name:" + name + "size:" + 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; / / is used to store the original file / / console.log ("this.input_file:" + this.input_file) if (file= = null | | file= = "") {alert ("input cannot be empty") } else {if (file.length > 30) {this.sub_inpufile=file.substring (0jue 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 ("do you want to delete" + index) If (flag = = true) {this.message.splice (index-1, 1) }}, show:function () {alert (this.tmp_file) / / has a word limit, customizable components}, clear: function () {this.message = [];},},})

Effect:

Thank you for reading this article carefully. I hope the article "how to achieve the small function of notepad" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!