文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue如何实现记事本小功能

2023-06-25 16:57

关注

这篇文章主要介绍了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;                    }        .bot{            height: 30px;        }        .show-details{            float: right;            margin-right: 10px;        }        .show-btn{                        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如何实现记事本小功能

感谢你能够认真阅读完这篇文章,希望小编分享的“vue如何实现记事本小功能”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网行业资讯频道,更多相关知识等着你来学习!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 资料下载
  • 历年真题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯