vue实现记事本小功能

2024-08-01 23:37:24

本文实例为大家分享了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实现记事本功能的具体代码,供大家参考,具体内容如下实例功能点不多,主要难点在于笔记文本对象数组的添加,删除,以及对组件的绑定同步事件. 核心代码 <section id="todoapp">  <header class="header"> <h1>记事本</h1> <input v-model="note" autofocus=
vue简易记事本开发详解

本文实例为大家分享了vue实现易记事本的具体代码,供大家参考,具体内容如下 css代码 #todoapp { margin: 0 400px; width: 600px; background-color: gray; text-align: center; } .content { margin:0px 100px; } .todo { margin: 10px; text-align: left; background-color:green; } .btn { float: right;
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用

前言首先说明这并不是一个教程贴,而记事本应用是网上早有的案例,对于学习 vuex 非常有帮助.我的目的是探索 vuex 2.0 ,然后使用 vuejs 2.0 + vuex 2.0 重写这个应用,其中最大的问题是使用 vue-cli 构建应用时遇到的问题.通过这些问题深入探索 vue 以及 vuex . 我对于框架的学习一直断断续续,最先接触的是 react,所以有一些先入为主的观念,喜欢 react 更多一点,尤其在应用的构建层面来说.之所以断断续续,是因为自己 JS 基础较弱,刚开始学习的
基于vue2.0+vuex+localStorage开发的本地记事本示例

本文采用vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本.兼容PC端和移动端. 实现效果功能说明支持回车添加事件支持事件状态切换添加事件 -> 进入未完成列表未完成 -> 已完成(勾选checkbox) 未完成 -> 已取消(点击取消按钮) 已完成 -> 未完成(取消勾选checkbox) 已取消 -> 未完成(点击恢复按钮) 支持控制台打印所有事件数据支持筛选事件支持编辑事件支持删除事件支持清空所有事件
vue-cli+webpack记事本项目创建

vue-cli+webpack记事本项目使用的是vue-cli2.0里面的项目构建工具webpack 项目的准备工作: 1.了解vue2.0 2.了解一些ES6 3.储备一些webpack知识参照项目地址:vue2.0构建单页应用最佳实战我们将会选择使用一些vue周边的库 vue-cli , vue-router , vue-resource , vuex 1.使用vue-cli创建项目 2.使用vue-router实现单页路由 3.用vuex管理我们的数据流 4.使用vue-resourc
vue实现记事本功能

本文实例为大家分享了vue实现记事本功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>记事本</title> <meta http-equiv="X-UA-Compatible&q
vue实现记事本小功能

本文实例为大家分享了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=&q
vue实现搜索小功能

本文实例为大家分享了vue实现搜索小功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <input type="text" v-model=&qu
Android实现记事本小功能

本文实例为大家分享了Android实现记事本功能的具体代码,供大家参考,具体内容如下首先声明,本人是android的小白,主要是新人项目写了这个程序,思路可能不是很清晰,可优化的地方也有很多,望路过的大佬不吝赐教. 该记事本包含创建新条目,数据库增删改查,条目可编辑,滑动删除与拖拽排序,简单闹钟实现(还有个简陋背景音乐开关就不提了太简单),接下来逐一介绍一下. build.gradle导入 apply plugin: 'kotlin-kapt' ''' implementation 'com.
Vue实现倒计时小功能

很多项目中都需要实现倒计时功能,例:发送验证码.现在举例实现一个简单的倒计时按钮功能.简单布局,简单操作,简单效果,最主要的是思路和倒计时步骤理解!!! 例.代码如下: 要求:点击提交按钮倒计时五秒,倒计时期间输入框和提交按钮禁用,倒计时结束后输入框和提交按钮再变成正常状态 1.先实现要求的html布局,添加点击事件 <div>  输入框:<input type="text" :disabled="
基于vue开发微信小程序mpvue-docs跳转页面功能

打开github,把项目克隆下来https://github.com/F-loat/mpvue-quickstart 跳转页面,废话不多说直接点... 打开pages.js 默认是有两个页面的, 现在新添加一个newpage的页面这样加就行了! 然后是用模版上的方法去跳转页面已测试OK, 虽然是很简单的问题,但是没找到在哪写的,所以给记录下来!希望对你有用总结以上所述是小编给大家介绍的基于vue开发微信小程序mpvue-docs跳转页面功能,希望对大家有所帮助,如果大家有任何疑问请给我留
Vue实现typeahead组件功能(非常靠谱)

前言之前那个typeahead写的太早,不满足当前的业务需求. 而且有些瑕疵,还有也不方便传入数据和响应数据.. 于是就推倒了重来,写了个V2的版本看图,多了一些细节的考虑;精简了实现的逻辑代码效果图实现的功能 1: 鼠标点击下拉框之外的区域关闭下拉框 2: 支持键盘上下键选择,支持鼠标选择 3: 支持列表过滤搜索 4: 支持外部传入列表JSON格式的映射 5: 支持placeholder的传入 6: 选中对象的响应(.sync vue2.3的组件通讯的语法糖) 7: 箭头icon的映
Vue 仿百度搜索功能实现代码

无上下选择 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jsonp</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, us
Vue实现选择城市功能

查看完整的代码请到我的github地址 https://github.com/qianyinghuanmie/vue2.0-demos 一.结果展示二.前期准备: 1.引入汉字转拼音的插件,利用NPM安装代码指令为 npm install pinyin --save ,详细步骤请到pinyin 2.引入vue-resource,调用json文件,可以参考目录中的city.json,有条件的也可以自己去扒三. 分析所实现的功能点: 1.获取json数据展示城市列表 . 2.侧边字母
vue.js实现备忘录功能的方法

这个vue实现备忘录的功能demo是K在github上找到的,K觉得这是一个用来对vue.js入门的一个非常简单的demo,所以拿在这里共享一下. (尊重他人劳动成果,从小事做起~ demo原github地址:https://github.com/vuejs/vue) 一.实现效果二.代码展示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>备忘录&l

vue实现记事本小功能

相关推荐

随机推荐