VUE简易计划清单

目录

效果预览图

完整代码 


效果预览图

完整代码 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #app{
            width: 600px;
            height: 800px;
            background: #ccc;
            margin: 50px auto;
            padding: 20px;
        }
        #app>input{
            width: 450px;
            height: 50px;
            border: none;
            margin: 30px;
        }
        #app>button{
            width: 80px;
            height: 50px;
            border: none;
            background: #9ddeec;
        }
        h3{
            margin-left: 30px;
        }
        ul{
            list-style-type: none;
            height: 300px;
            overflow: auto;
            margin-top: 10px;
        }
        .t{
            width: 530px;
            margin: 0 auto;
            height: 40px;
            margin-top: 10px;
            background: #fff;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            position: relative;
        }
        li{
            position: relative;
        }
        span{
            display: inline-block;
            width: 250px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #app>ul>li>button{
            height: 30px;
            width: 60px;
            border: none;
            cursor: pointer;
        }
        var{
            font-size: 12px;
            color: #ccc;
        }
        #app .ck{
            width: 530px;
            height: 100px;
            margin: 0 auto;
            display: none;
            background: #fff;
            z-index: 100;
            position: relative;
            overflow: auto;
            
        }
        .kk{
             white-space: wrap;
        }
        .ck button{
            width: 30px;
            height: 30px;
            border: none;
            position: absolute;
            right: 3px;
            bottom: 3px;
            cursor: pointer;
        }
        li .m{
            border: none;
            background: #8cbde5;
            width: 60px;
            height: 30px;
            border-radius: 5px;
            color: #fff;
        }
        .hc{
           position: absolute;
           width: 100%;
           height: 100%;
           background: rgba(0,0,0,0.3);
           border-radius: 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-model="val">
        <button @click="add">添加</button>
        <h3>待完成事项</h3>
        <ul>
            <li v-for="(item,index) in arr">
                <div class="t">
                     <input type="checkbox" v-model="item.bol" @change="xz(index)">
                 <span>{{arr[index].name}}</span> 
                 <var>{{arr[index].time}}</var>
                <button class="m" @click="sc(index)">删除</button>
                <button class="m" @click="ck(index)">查看详情</button> 
                </div>
                  <div :style="{display:n == index ?'block':'none'}" class="ck">
                    <p class="kk">{{arr[index].name}}</p> 
                    <button @click="sq">收起</button>
                  </div>
            </li>
           
            
        </ul>
        <h3>已完成事项</h3>
        <ul>
            <li v-for="(item,index) in arr2">
                <div class="t">
                     <input type="checkbox" v-model="item.bol" @change="xz(index)">
                 <span>{{arr2[index].name}}</span> 
                 <var>{{arr2[index].time}}</var>
                 <div class="hc" @click="bb"></div>
            </li>
        </ul>
    </div>
</body>
</html>
<script type="module">
 import {createApp} from './js/vue.esm-browser.js'
 createApp({
    data() {
        return {
            arr:[
                {name:'早上:早起背面试题',time:'2023/11/22 18:36:00',bol:false},
                {name:'上午:学习',time:'2023/11/22 18:06:00',bol:false},
                {name:'中午:午休',time:'2023/11/22 17:35:00',bol:false},
                {name:'晚上:复习',time:'2023/11/22 14:36:00',bol:false},
            ],
            arr2:[],
            val:'',
            n:-1,
            num:0,
            fl:1,
          }
    },
    methods: {
        sc(index){
           
            let userResponse = window.confirm("确定要删除该计划吗?");
            if (userResponse) {
                this.arr.splice(index,1)
            } else {
              
            }
        },
        xz(index){
            let userResponse = window.confirm("确定已经完成了该计划吗");
            if (userResponse) {
            this.arr2.push(this.arr[index])
            this.arr.splice(index,1)
            console.log(this.arr2);
            } else {
              this.arr[index].bol = false
            }
        },
        add(){
           let nn = new Date().toLocaleString()
            console.log(this.val);
            if (this.val!='') {
                 let obj={
                name:this.val,
                time:nn
            }
            this.arr.unshift(obj)
            this.val=''
            }else if (this.val=='') {
                alert('内容不能为空')
            }
        },
        ck(index){
           this.n = index;
        },
        sq(){
            this.n = -1
        },
        bb(){
            alert('已经确定完成的计划不能查看点击!')
        }
    },

 }).mount('#app')    
</script>

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要在 Vue 中实现简易在线客服功能,你可以使用第三方库或者自己编代码。 如果你想使用第三方库,可以考虑使用 `vue-chat-widget` 或 `vue-beautiful-chat`。这些库都提供了可定制的聊天窗口组件,你只需要将其添加到你的 Vue 应用中即可。 如果你想自己编代码,可以按以下步骤操作: 1. 创建一个聊天窗口组件 你可以使用 Vue 的模板语法创建一个聊天窗口组件。该组件应该包含一个输入框和一个消息列表。 2. 处理用户输入 当用户在输入框中输入消息时,你需要将该消息添加到消息列表中。你可以使用 `v-model` 指令来绑定输入框的值,并在输入框上添加一个 `@keyup.enter` 监听器来处理用户按下回车键时的事件。 3. 处理客服回复 当客服回复消息时,你需要将该消息添加到消息列表中。你可以使用一个数组来存储消息,并在组件中循环遍历该数组以显示所有消息。 4. 实现在线客服功能 为了实现在线客服功能,你需要将用户的消息发送到服务器,并从服务器获取客服的回复。你可以使用 `axios` 库来发送网络请求。 当用户发送消息时,你可以将该消息作为参数发送到服务器,服务器将返回客服的回复。你可以在组件中添加一个方法来处理网络请求,并在该方法中更新消息列表。 当客服发送消息时,服务器可以使用 WebSockets 或长轮询等技术向客户端推送新消息。你可以使用 `socket.io` 库来实现 WebSockets 功能。 以上是实现简易在线客服功能的基本步骤,你可以根据自己的需求进行定制和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小姚学前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值