Vue implements small notepad function

This article example shares the specific code of vue to realize the small function of notepad for your reference. The specific content is as follows

Directly on the code:

<!DOCTYPE html>
<html lang="en">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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">
        Notepad
    <div>
        <div class="file-container">
            <input class="openfile-btn" type="button" value="Import from local" id="fileImport" v-on:click="clickLoad">
            <input type="file" id="files" ref="refFile" style="display: none" v-on:change="fileLoad">
            <input type="text" v-model="path" id="file_path" disabled="disabled">
            <input type="button" value="Confirm import" style="float:right; margin-right: 10px " 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">Delete</button>
                    <button @click="show(index)" class="show-btn" v-if="item.length>30">Details</button>
                </div>
            </li>
        </ul>
    </div>
    <hr>
    <div v-show="message.length>0" class="bot">
        <div style="float: left; margin-left: 10px">
            Current number of note records: {{message.length}}
        </div>
        <div class="del-btn">
            <button @click="clear"class="show-btn">Clear</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; //The 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; //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(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("Do you want to delete?" + index);
                if (flag == true) {
                    this.message.splice(index-1, 1);
                }
            },
            show:function (){
                alert(this.tmp_file) //There is a word limit, you can customize the components},
            clear: function () {
                this.message = [];
            },
        },
    })
</script>
</body>
</html>

Effect:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Detailed exploration of vuex 2.0 and building a notepad application using vuejs 2.0 + vuex 2.0
Local notepad example based on vue2.0+vuex+localStorage
Vue implementation of notepad case
Vue implements simple notepad
Vue implements simple notepad function
Detailed explanation of vue simple notepad development
Detailed explanation of Vue Notepad example
Vue implements notepad function
vue-cli+webpack notepad project creation
Vuex implements notepad function

<<: A brief analysis of the differences and functions between transition, transform, and translate in CSS3

>>: Use image to submit the form instead of using button to submit the form