Vue.js备忘录应用-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_53877433/article/details/118466706
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>备忘录</title>
    <style>
        .dataBox{
            width: 100%;
            height: 100%;
            margin: 0 60px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .dataItem{
            width: 230px;
            height: 100px;
            border: 1px solid #999;
            margin:10px;
            text-align: center;
        }

        .inputModel{
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .3);
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            
        }
        .inputText{
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 400px;
            height: 300px;      
            background: #fff;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            
        }
        .inputText input{
            width: 300px;
            height: 35px;
            margin-top: 50px;
            outline: none;
            border: 1px solid #999;
            border-radius: 5px;
        }
        .button{
            display: flex;
            align-items: center;
            margin-top: 60px; 
        }
        .button button{
            padding: 10px 20px;
            border: 1px solid rgb(91, 137, 223);
            border-radius: 4px;
            color: #fff;
            background: rgb(91, 137, 223);
        }
        .newContent{
            text-align: center;
            padding: 0 10px;
            width: 200px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .newContent:hover{
            cursor: pointer;
            word-break:normal;
            width:500px;
            display:block;
            white-space:pre-wrap;
            word-wrap : break-word;
            overflow: hidden;
        }

        .dataAddItem{
            width: 230px;
            height: 100px;
            border: 1px solid chocolate;
            margin:10px;
            color: #fff;
            text-align: center;
            background: chocolate;
        }

    </style>
</head>
<body>
    <div class="dataBox" >       
        <div :class="selectIndex == index?'dataAddItem':'dataItem'" v-for="(item,index) in dataList" :key="index" @click="add(index)">
                <p>{{item.a}}</p>
                <p class="newContent">{{item.c}}</p>
         </div>

         <!-- 弹窗 -->
        <div class="inputModel" v-if="model">
            <div class="inputText" >        
                    <input type="text" :placeholder="enter" v-model='content'>
                    <div class="button">
                        <button @click="ok(0)">取消</button>
                        <button style="margin-left:40px;" @click="ok(1)">确定</button>
                    </div>               
            </div>             
        </div>
    </div>
    
</body>
</html>

<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

<script>
     new Vue({
        el:'.dataBox',//引用vue的cdn，需要写作用域
        data(){
            return{
                dataList:[],
                nowDate:'',
                day:'',
                model:false,
                enter:'',
                content:'',
                selectIndex:-1,

            }
        },
        mounted:function(){ 
            this.chart2();
        },
        methods:{

            // 设置日期函数
            formatDate(day,time) {
                let n = day;
                let date='';
                if(time){
                    date= new Date(time);
                }else{
                    date = new Date();
                }

                var targetday_milliseconds = date.getTime() + 1000 * 60 * 60 * 24 * day; //获取时间
                date.setTime(targetday_milliseconds);

                let year = date.getFullYear(); // 年
                let month = date.getMonth() + 1; // 月
                month < 10 ? "0" + month : month;
                this.day = date.getDate(); // 日

                let week = date.getDay(); // 星期
                let weekArr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
               
                date.setDate(date.getDate() - n)
         
               return this.nowDate = `${year}年${month}月${this.day}日  ${weekArr[week]}`;
            },

            // 循环天数
            chart2(){
                for(var i = 0;i< 31;i++){
                    // 使用this.$set（）方法更新数组 渲染数据           
                    this.dataList.push({a:this.formatDate(i,'2021-07-01')})                
                }
            },

            // 点击显示弹窗
            add(index){
                this.model = true;
                this.content="";
                this.selectIndex = index;
                this.enter=`请输入${index+1}号的备忘录`;
            },

            // 点击取消/确定按钮 
            ok(index){

                if(index == 0){
                    this.model=false;
                }else{                   
                    this.dataList[this.selectIndex].c = this.content
                    this.model = false;
                }
                
                this.selectIndex = -1;
            },

        }
     })


</script>