vue实现记事本小功能

 更新时间:2021-12-17 12:02:01   作者:佚名   我要评论(0)

本文实例为大家分享了vue实现记事本小功能的具体代码,供大家参考,具体内容如下
直接上代码:


<!DOCTYPE html>
<html lang="en">
<script

本文实例为大家分享了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" style="display: none" v-on:change="fileLoad">
            <input type="text" v-model="path" id="file_path" disabled="disabled">
            <input type="button" value="确定导入" 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">删除</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 style="float: left; margin-left: 10px">
            当前记事本记录数:{{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记事本实例详解
  • vue实现记事本功能
  • 详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
  • vue-cli+webpack记事本项目创建
  • 基于vue2.0+vuex+localStorage开发的本地记事本示例
  • Vue实现简易记事本功能

您可能感兴趣的文章:

相关文章

  • vue实现记事本小功能

    vue实现记事本小功能

    本文实例为大家分享了vue实现记事本小功能的具体代码,供大家参考,具体内容如下 直接上代码: <!DOCTYPE html> <html lang="en"> <script
    2021-12-17
  • vue插值表达式和v-text指令的区别

    vue插值表达式和v-text指令的区别

    目录1.使用插件表达式2.在插件表达式中使用v-cloak解决闪烁问题3.插件表达式{{message}} 语法只能在标签内容中使用 {{}}这种语法叫做插值表达
    2021-12-17
  • JavaScript之String常见的方法详解

    JavaScript之String常见的方法详解

    目录1、charAt语法参数index返回值2、concat语法参数str2 [, …strN]返回值3、indexOf语法参数searchValuefromIndex(可选)返回值特殊情况4
    2021-12-17
  • vue指令v-html和v-text

    vue指令v-html和v-text

    目录1、v-text 文本渲染指令2、 v-html1、v-text 文本渲染指令 (只能渲染文本不能渲染标签) ? <div id="test"> <p v-text="
    2021-12-17
  • vue指令?v-bind的使用和注意需要注意的点

    vue指令?v-bind的使用和注意需要注意的点

    目录1、v-bind:可以为元素的属性绑定一些数据2、v-bind:可以简写成 : 推荐直接写冒号3、v-bind:指令表达式的拼接,1、v-bind:可以为元素的
    2021-12-17
  • JavaScript之Array常见的方法详解

    JavaScript之Array常见的方法详解

    目录不改变原数组的方法1、concat语法:参数:返回值:2、join语法:参数:返回值:注意:3、slice语法:参数:返回值:4、toString语法:返
    2021-12-17
  • vue+webrtc(腾讯云) 实现直播功能的实践

    vue+webrtc(腾讯云) 实现直播功能的实践

    目录1.直播效果2.开直播步骤2.1引入腾讯web端(快直播)脚本2.2在需要使用直播的界面 添加一个视频容器(开启直播后,显示视频的位置)2.3创建直
    2021-12-17
  • JS实现canvas仿ps橡皮擦刮卡效果详解

    JS实现canvas仿ps橡皮擦刮卡效果详解

    目录效果演示: 主要JS代码实现 <div class="box" id="bb"> <canvas id="cas" width="1366" height="651"></canvas> </div>
    2021-12-17
  • vue利用openlayers加载天地图和高德地图

    vue利用openlayers加载天地图和高德地图

    目录一、天地图部分1、在vue中安装openlayers二、高德地图部分一、天地图部分 1、在vue中安装openlayers npm i --save ol 这里说的vue是
    2021-12-17
  • .NET垃圾回收GC诊断工具dotnet-gcmon使用

    .NET垃圾回收GC诊断工具dotnet-gcmon使用

    今天介绍一个新的诊断工具 dotnet-gcmon, 也是全局 .NET CLI 工具, 它可以监控到 .NET 程序的 GC, 能获取到的信息也很详细, 另外 maoni 大佬
    2021-12-17

最新评论