案例

最新推荐文章于 2024-02-27 09:40:58 发布
最新推荐文章于 2024-02-27 09:40:58 发布
阅读量146 收藏
点赞数
文章标签： js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44187211/article/details/114767109
版权 
<!-- <!DOCTYPE html> -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/IndexCss.css">

</head>


<body>
    <div id="app">
        <div class="header">
            <div class="tab" v-for="item in CaseDate" :key="item.CaseId" v-text="item.CaseName" @click="tagger(item.CaseId)"></div>

        </div>
        <div class="main">
            <div class="aside">
                <ul>
                    <li>侧边栏一</li>
                    <li>侧边栏二</li>
                    <li>侧边栏三</li>
                    <li>侧边栏四</li>
                </ul>
                <p>{{cateId}}</p>
                <p>{{list.EventTag}}</p>
            </div>
            <div class="article">
                <!-- 主页面组件 -->
                <div class="homeDiv" v-if="flag">
                    <span class="add" @click="add()">添加</span>
                    <div class="listDiv" v-for="(item,i) in list" :key="i">
                        <span class="title" v-text="caseName"></span>
                        <img :src="item.Picture">
                        <div class="text">
                            <p v-text="item.EventTag"></p>
                            <p v-text="item.EventDesription"></p>
                        </div>
                        <div class="optation">
                            <span class="edit" @click="edit(item.IncidentID)">编辑</span>
                            <span class="delete" @click="romove(item.IncidentID)">删除</span>
                        </div>
                    </div>

                    <div></div>
                </div>
                <!-- <home v-bind:title="caseName" v-bind:lists="list" v-if="flag" @child-add="add"></home> -->
                <!-- 添加页码组件 -->
                <div class="detailDiv" v-else>
                    <div class="opt">
                        <span @click="save">保存</span>
                        <span @click="back">返回</span>
                    </div>
                    <div class="formDiv" model="addForm">
                        <div class="formDiv_left">
                            <div>
                                <span>事件标签</span>
                                <input type="text" v-model="addForm.EventTag">
                            </div>
                            <div>
                                <span>开始时间</span>
                                <input type="date" type="text" v-model="addForm.StartTime">
                                <span>结束时间</span>
                                <input type="date" type="text" v-model="addForm.EndTime">
                            </div>
                            <div>
                                <span>事件描述</span>
                                <textarea type="text " v-model="addForm.EventDesription "></textarea>
                            </div>
                            <div>
                                <span>热度来源</span>
                                <textarea type="text " v-model="addForm.HeatSource "></textarea>
                            </div>
                            <div>
                                <span>事件案例</span>
                                <select type="text " v-model="addForm.CaseStudy ">
                                    <option :value ="item.CaseId" v-for="item in CaseDate" :key="item.CaseId">{{item.CaseName}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="formDiv_right ">
                            <div class="imgDiv">
                                <input type="file" @change="uploadImg" accept="image/*" v-if="!filePath" />
                                <img :src="filePath" v-else>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- <detail v-else="flag "></detail> -->

            </div>
        </div>
    </div>
    <!-- 主页面模板 -->
    <!-- <template id="homeDiv ">
        <div class="homeDiv ">
            <span class="add " @click="childAdd() ">添加</span>
            <div class="listDiv " >
                <span class="title " >{{title}}</span>
                <img :src="lists.Picture " >
                <div class="text ">
                    <p v-text="lists.EventTag "></p>
                    <p v-text="lists.EventDesription "></p>
                </div>
                <div class="optation ">
                    <span class="edit ">编辑</span>
                    <span class="delete ">删除</span>
                </div>
            </div>
            
            <div>{{chilidLists}}</div>
        </div>
    </template> -->

    <!-- 添加模板 -->
    <!-- <template id="detailDiv ">
    <div class="detailDiv ">
        <div class="opt ">
            <span>保存</span>
            <span>返回</span>
        </div>
        <div class="formDiv ">
            <div class="formDiv_left ">
                <div>
                    <span>表单一</span>
                    <input type="text " name=" " id=" ">
                </div>
                <div>
                    <span>表单二</span>
                    <input type="date " name=" " id=" ">
                    <span>表单二</span>
                    <input type="date " name=" " id=" ">
                </div>
                <div>
                    <span>表单三</span>
                    <textarea name=" " id=" " ></textarea>
                </div>
                <div>
                    <span>表单三</span>
                    <textarea name=" " id=" " ></textarea>
                </div>
                <div>
                    <span>选择框</span>
                    <select name=" " id=" "></select>
                </div>
           </div>
           <div class="formDiv_right ">
               <div class="img "></div>
           </div>
        </div>
    </div>
</template> -->

    <script src="./js/Upload.js "></script>
    <script src="./js/vue.js "></script>
    <script src="./js/IndexJs.js "></script>

</body>

</html>

// Vue.component('home', {
//     template: '#homeDiv',
//     props: ['title', 'lists'],
//     data() {
//         return {
//             chilidLists: []
//         }
//     },
//     created() {
//         this.chilidLists = sessionStorage.getItem('list')
//         console.log(this.chilidLists)
//     },
//     methods: {
//         childAdd: function() {
//             // console.log("ok")
//             this.$emit('child-add', false)
//         }
//     }
// })
// Vue.component('detail', {
//     template: '#detailDiv'
// })



var vm = new Vue({
    el: "#app",
    data: {
        flag: true,
        CaseDate: [{
                CaseId: 1,
                CaseName: '案例一'
            },
            {
                CaseId: 2,
                CaseName: '案例二'
            },
            {
                CaseId: 3,
                CaseName: '案例三'
            }, {
                CaseId: 4,
                CaseName: '案例四'
            }
        ],
        incidentData: [{
                IncidentID: 1,
                EventTag: '新冠事件',
                StartTime: "2020-01-20",
                EndTime: '2021-03-03',
                Picture: './image/1.png',
                EventDesription: '11111111112222222',
                HeatSource: '百度指数',
                CaseStudy: 1
            },
            {
                IncidentID: 2,
                EventTag: '新冠事件',
                StartTime: "2020-01-20",
                EndTime: '2021-03-03',
                Picture: './image/1.png',
                EventDesription: '1111111111111111111111',
                HeatSource: '百度指数',
                CaseStudy: 1
            },
            {
                IncidentID: 3,
                EventTag: '新冠事件2',
                StartTime: "2020-01-20",
                EndTime: '2021-03-03',
                Picture: './image/1.png',
                EventDesription: '2222222222222222222222',
                HeatSource: '百度指数',
                CaseStudy: 2
            },
            {
                IncidentID: 4,
                EventTag: '新冠事件3',
                StartTime: "2020-01-20",
                EndTime: '2021-03-03',
                Picture: './image/1.png',
                EventDesription: '3333333333333333333333333',
                HeatSource: '百度指数',
                CaseStudy: 3
            },
            {
                IncidentID: 5,
                EventTag: '新冠事件4',
                StartTime: "2020-01-20",
                EndTime: '2021-03-03',
                Picture: './image/1.png',
                EventDesription: '44444444444444444444444444444',
                HeatSource: '百度指数',
                CaseStudy: 4
            }
        ],
        cateId: '1',
        caseName: '案例一',
        list: [],
        addForm: {},
        filePath: '',
        isEdit: false
    },
    created() {
        this.init()
            // console.log(this.list)
        window.sessionStorage.setItem("list", JSON.stringify(this.list))
            // console.log(this.list)
            // this.list = this.incidentData[0]
        this.cateId = this.CaseDate[0].CaseId
        this.caseName = this.CaseDate[0].CaseName
            // console.log(this.cateId, this.cateName)
    },
    methods: {
        init() {
            this.incidentData.forEach(item => {
                if (item.CaseStudy == this.cateId) {
                    this.list.push(item)
                }
            });
        },
        tagger: function(caseId) {
            this.flag = true
            this.cateId = caseId
            this.CaseDate.forEach(item => {
                if (item.CaseId == caseId) {
                    this.caseName = item.CaseName
                }
            })
            this.list = []
            this.incidentData.forEach(item => {
                if (item.CaseStudy == caseId) {
                    this.list.forEach(data => {
                        if (data.CaseStudy !== caseId) {
                            this.list = []
                        }
                    })
                    this.list.push(item)
                }
            })
        },

        add() {
            this.flag = false
            this.isEdit = false
            this.filePath = ''
            this.addForm = {}
                // var click = document.getElementById('uploadimg');
        },
        // 返回
        back() {
            this.flag = true
        },
        // 保存
        save() {
            // 编辑
            if (this.isEdit) {
                this.incidentData.forEach(item => {
                    if (item.IncidentID == this.addForm.IncidentID) {
                        item = this.addForm
                    }
                })

                this.isEdit = true
                this.addForm = {}
            } else {
                // 添加
                this.$set(this.addForm, 'Picture', this.filePath)
                this.incidentData.push(this.addForm)

                this.cateId = this.addForm.CaseStudy
                    // this.CaseDate.forEach(item => {
                    //     if (item.CaseId == this.caseId) {
                    //         this.caseName = item.CaseName
                    //     }
                    // })
                    // this.list = []
                    // this.incidentData.forEach(item => {
                    //     if (item.CaseStudy == this.cateId) {
                    //         this.list.forEach(data => {
                    //             if (data.CaseStudy !== this.cateId) {
                    //                 this.list = []
                    //             }
                    //         })
                    //         this.list.push(item)
                    //     }
                    // })
                this.tagger(this.cateId)


                this.addForm = {}
                this.isEdit = false

            }
            this.flag = true;

        },
        // 上传图片
        uploadImg: function(e) {

            let that = this;
            let file = e.target.files[0];
            // let formData = new FormData(); //创建 formdata对象
            // formData.append('file', file);
            // console.log()
            this.filePath = './image/' + file.name
        },
        // 编辑
        edit(id) {
            // console.log(id)
            this.isEdit = true
            this.incidentData.forEach(item => {
                    if (item.IncidentID == id) {
                        this.addForm = item
                        this.filePath = item.Picture
                    }

                })
                // console.log(this.addForm)
            this.flag = false
        },
        // 删除
        romove(id) {
            // this.incidentData.splice(0, 1)
            // console.log(this.incidentData)
            // console.log(id)
            for (let i = 0; i < this.incidentData.length; i++) {
                console.log(this.incidentData[i].IncidentID)
                if (this.incidentData[i].IncidentID == id) {
                    this.incidentData.splice(i, 1)
                }
            }
            this.list = []
            this.incidentData.forEach(item => {
                if (item.CaseStudy == this.cateId) {
                    this.list.forEach(data => {
                        if (data.CaseStudy !== this.cateId) {
                            this.list = []
                        }
                    })
                    this.list.push(item)
                }
            })
        }


    },

});

* {
    margin: 0;
    padding: 0;
}

#app {
    height: 100%;
}

.header {
    height: 80px;
    background-color: pink;
}

.tab {
    display: inline-block;
    background-color: greenyellow;
    cursor: pointer;
    margin-left: 5px;
}

.main {
    height: calc(100% - 80px);
    /* border: 1px solid green; */
}

.aside {
    float: left;
    width: 180px;
    height: 100%;
    background-color: greenyellow;
}

ul {
    width: 100%;
}

ul li {
    height: 30px;
    margin: 0 auto;
    text-align: center;
    cursor: pointer;
}

.article {
    float: right;
    margin: 20px;
    width: calc(100% - 224px);
    height: calc(100% - 40px);
    background-color: yellow;
    overflow: auto;
}

.add {
    display: inline-block;
    width: 100px;
    height: 50px;
    line-height: 50px;
    background-color: red;
    text-align: center;
    cursor: pointer;
}

.listDiv {
    margin: 20px;
    width: calc(100%-40px);
    height: 170px;
    background-color: aqua;
}

.title,
.text,
.optation {
    margin-top: 60px;
    display: inline-block;
    vertical-align: top;
}

.listDiv img {
    margin-top: 10px;
}

.optation {
    margin-right: 20px;
    float: right;
}

.optation span {
    display: inline-block;
    background-color: red;
    cursor: pointer;
}

.opt span {
    background-color: red;
    cursor: pointer;
}

.formDiv {
    margin: 20px;
    width: calc(100%-40px);
    height: 300px;
    background-color: fuchsia;
}

.formDiv_left {
    float: left;
    width: 80%;
    border: 1px solid red;
}

.formDiv_right {
    float: right;
    width: 18%;
    height: 200px;
}

.imgDiv {
    width: 90%;
    height: 70%;
    margin: 0 auto;
    /* background-color: red; */
    border: 1px dotted #000;
}

.imgDiv input {
    opacity: 0;
    width: 90%;
    height: 70%;
    margin: 0 auto;
}

.imgDiv img {
    width: 90%;
    height: 70%;
    margin: 0 auto;
}
晓不点
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
javaScript常用案例
张张张张张高高的博客
09-06 8603
前端页面开发之javaScript常用案例
jQuery经典小案例
娃娃的博客
03-29 1万+
目录 下拉菜单案例 突出展示案例 淘宝精品案例 京东呼吸灯案例 tab栏切换案例 手风琴案例 城市选择案例 微博发布案例 弹幕效果案例 固定导航栏案例 小火箭返回顶部案例 音乐导航栏案例 下拉菜单案例 效果图： 源代码： 鼠标进入事件mouseenter 鼠标离开事件mouseleave 下拉动画slideDown /slid...
工程伦理案例分析
谁人打的太极拳的博客
11-29 13万+
工程伦理案例分析--课后作业
分享Python7个爬虫小案例（附源码）_爬虫实例
热门推荐
xiaolinyui的博客
02-27 14万+
在这篇文章中，我们将分享7个Python爬虫的小案例，帮助大家更好地学习和了解Python爬虫的基础知识。
整整1600套Axure原型图设计源文件UI UX交互设计案例
weixin_46664875的博客
06-17 4万+
网络上的Axure教程看了很多，大多数都是讲软件如何操作，讲交互逻辑和用户体验的却寥寥无几，而实际项目中却非常重交互逻辑和用户体验。把这1536套原型文件一一拆解，慢慢分析作者的设计思路，会发现，互联网产品交互设计真的很有意思，很容易掌握。 文件格式：Axure RP（为防止打不开的情况，建议使用9.0/10.0版本以上的软件打开） 文件数量：1536套 文件大小：5.95GB 资源包内包含相当丰富的项目原型，各行各业的小程序原型、APP原型、网页前端原型、中后台原型等等都有收录，涵盖教育、电商、直播及短视
finebi 新手入门案例
桃李不言下自成蹊
11-30 4万+
原始数据并没有毛利额，毛利额需要我们自己计算产生毛利额 = 销售额 - 成本额自定义图表由于纵轴指标聚合，毛利额和毛利率数值相差巨大故而毛利率显示并不明显解决方法：将纵轴指标聚合修改为指标并列设置值轴。
这些前端案例看似很简单（内附动图）
阿牛的博客
03-20 2万+
在学习前端js操作元素的时候，往往有很多的案例的做法的思想都是一样的，我们一定要会。本篇文章将从几个小demo入手，带你领略js的风采。 很常见的一些案例，一定要学会哦！！！
Lumerical案例下载
a1254098517的博客
12-24 1454
p=9345（访问密码：9345）收集到的部分Lumerical FDTD 官网案例，分享一下，（可能不是很全）如果想要新的案例也可以私信我，有空可以帮忙下。度盘用不了，先放这个盘里。
JavaScript项目案例
Anterior_condyle的博客
06-10 8163
简单案例案例一：完成“鼠标经过切换图片”的案例案例二：完成“百度换肤效果”的案例案例三：完成“鼠标展示”的案例（代码及效果图）案例四：完成“表单验证”的案例；改进并完成对密码进行确认操作。案例五：结合改进的“表单验证”优化“模态框”案例（自行设计）。案例六：完成“二级联动菜单”的案例案例七：完成“星星案例”的案例案例八：完成“图片的切换”的案例 案例一：完成“鼠标经过切换图片”的案例 代码： <!DOCTYPE html> <html> <head> <met
C++经典案例
木随风动的博客
04-08 1万+
C++学习过程中的经典案例一、水仙花数二、乘法口诀表三、数组（数据元素逆置、冒泡排序）四、函数（立方体）
jQuery案例练习.rar
07-09
jQuery案例有4个即1、手风琴显示图片效果2、方块旋转变色3、表格数据渲染删除操作 4、jquery写轮播图，也含有原生js轮播图案例，每个案例中代码注解很详细 通过案例练习熟悉jquery相关知识点
MCGS制作的案例
04-24
本压缩包包含的是由个人制作的MCGS资源案例，旨在为其他用户在进行项目开发时提供参考和灵感。 这些案例可能涵盖了多个方面，包括但不限于以下几个关键知识点： 1. **图形界面设计**：MCGS的一大特色是其丰富的...
Flexsim仿真案例集合
04-23
这个"Flexsim仿真案例集合"提供了多个实际场景的模拟示例，旨在帮助初学者理解和掌握Flexsim的基本操作和高级功能。 首先，我们来看"超市仿真系统"。在这个案例中，你可以了解到如何构建一个超市的购物环境，包括...
典型案例提炼
04-07
本资源是一个关于教育信息化典型案例整理的资料，有兴趣的童鞋们可以参考一下，仅供了解。
altl.rar_CBR _altl_matlab 案例_案例推理_案例推理 matlab
07-15
《案例推理在MATLAB中的应用探索》 案例推理（Case-Based Reasoning，CBR）是一种人工智能领域的解决问题的方法，它依赖于历史案例来解决新问题。MATLAB作为一种强大的数学计算和编程环境，为实现案例推理提供了...
基于Springboot的在线英语阅读平台的设计与实现论文
07-16
传统方式管理信息存在诸多不足，如耗时较长、数据错误率高、错误数据更正困难以及数据检索繁琐费力。因此，通过在计算机上部署在线英语阅读分级平台软件，可以充分发挥其高效的信息处理能力，从而规范信息管理流程，使管理工作更加系统化和程序化。同时，该平台的有效应用还能助力管理人员准确快速地处理信息。 在开发工具的选择上，在线英语阅读分级平台经过慎重考虑，为便于开发实现，选用了IDEA作为开发工具，并采用Mysql作为数据库工具。以此为基础搭建开发环境，实现在线英语阅读分级平台的各项功能，包括管理员对用户和新闻公告的管理。 作为一款基于软件开发技术设计实现的应用系统，在线英语阅读分级平台在信息处理方面表现出色，无论是数据添加、数据维护和统计，还是数据查询等处理需求，该平台都能轻松应对。
关于红外传感器的计数器设计.docx
07-16
传感器
中国航空研究院609研究所考研10个学院，38个专业课历年考试真题及答案汇总整理，备考资料题库视频.pdf
07-16
中国航空研究院609研究所考研10个学院，38个专业课历年考试真题及答案汇总整理，备考资料题库视频.pdf
MATLAB基础入门教程 MATLAB使用详解 第8章 函数分析 共10页.pptx
最新发布
07-16
【课程大纲】 第1章 MATLAB7.0安装与卸载 共5页.pptx 第2章 MATLAB7.0用户界面 共19页.pptx 第3章 MATLAB7.0入门 共10页.pptx 第4章 MATLAB7.0的矩阵和数组 共28页.pptx 第5章 MATLAB7.0的数据类型 共20页.pptx 第6章 元胞和构架 共12页.pptx 第7章 矩阵分析 共35页.pptx 第8章 函数分析 共10页.pptx 第9章 数据分析 共19页.pptx 第10章 高级数值计算 共32页.pptx 第11章 符号计算 共35页.pptx 第12章 二维图形 共25页.pptx 第13章 三维图形 共11页.pptx 第14章 图形对象和句柄 共29页.pptx 第15章 MATLAB7.0程序设计 共35页.pptx 第16章 程序调试、优化和出错处理 共14页.pptx 第17章 图形用户界面（GUI） 共22页.pptx 第18章 MATLAB 文件IO操作 共15页.pptx 第19章 MATLAB 7.0编译器 共16页.pptx 第20章 应用程序接口 共19页.pptx 第21章 Notebook的运用 共16页.pptx 第22章 SIMULINK入门 共50页.pptx 第23章 SIMULINK高级技术 共47页.pptx 第24章 图像处理工具箱 共27页.pptx 第25章 信号处理工具箱 共45页.pptx 第26章 小波分析工具箱 共8页.pptx

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值