VUE 天气插件和日历插件

日历需要安装

cnpm i vue-calendar-component --save

其他代码如下

<template><div class="app-container home"><table style="width:100%;"><tr><td style="vertical-align:top;"><el-col style="padding-left: 10px; float: left"><el-row :gutter="10"><el-col :span="6"><el-card shadow="hover" :body-style="{ padding: '0px' }"><!-- <div class="title">标题</div> --><div class="content" style="height: 120px"><el-tabs value="first"><el-tab-pane label="替换区域" name="first">替换区域</el-tab-pane></el-tabs></div></el-card></el-col><el-col :span="6"><el-card shadow="hover" :body-style="{ padding: '0px' }"><!-- <div class="title">标题</div> --><div class="content" style="height: 120px"><el-tabs value="first"><el-tab-pane label="替换区域" name="first">替换区域</el-tab-pane></el-tabs></div></el-card></el-col><el-col :span="6"><el-card shadow="hover" :body-style="{ padding: '0px' }"><!-- <div class="title">标题</div> --><div class="content" style="height: 120px"><el-tabs value="first"><el-tab-pane label="替换区域" name="first">替换区域</el-tab-pane></el-tabs></div></el-card></el-col><el-col :span="6"><el-card shadow="hover" :body-style="{ padding: '0px' }"><!-- <div class="title">标题</div> --><div class="content" style="height: 120px"><el-tabs value="first"><el-tab-pane label="替换区域" name="first">替换区域</el-tab-pane></el-tabs></div></el-card></el-col></el-row><el-row style="margin-top: 10px" :gutter="10"><el-col :span="6"><el-card shadow="hover" :body-style="{ padding: '0px' }"><div class="title">标题</div><div class="content" style="height: 180px">替换区域</div></el-card></el-col><el-col :span="18"><el-card shadow="hover" :body-style="{ padding: '0px' }"><div class="content" style="height: 223px"><el-tabs value="first"><el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane><el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane><el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane><el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane></el-tabs></div></el-card></el-col></el-row><el-cardshadow="hover":body-style="{ padding: '0px' }"style="margin-top: 10px"><div class="title">标题</div><div class="content" style="height: 180px">替换区域</div></el-card><el-cardshadow="hover":body-style="{ padding: '0px' }"style="margin-top: 10px"><div class="title">标题</div><div class="content" style="height: 180px">替换区域</div></el-card><el-row style="margin-top: 10px" :gutter="10"><el-col :span="12"><el-card shadow="hover" :body-style="{ padding: '0px' }"><div class="title">标题</div><div class="content" style="height: 180px">替换区域</div></el-card></el-col><el-col :span="12"><el-card shadow="hover" :body-style="{ padding: '0px' }"><div class="title">标题</div><div class="content" style="height: 180px">替换区域</div></el-card></el-col></el-row><el-row style="margin-top: 10px" :gutter="10"><el-col :span="12"><el-card shadow="hover" :body-style="{ padding: '0px' }"><div class="title">标题</div><div class="content" style="height: 180px">替换区域</div></el-card></el-col><el-col :span="12"><el-card shadow="hover" :body-style="{ padding: '0px' }"><div class="title">标题</div><div class="content" style="height: 180px">替换区域</div></el-card></el-col></el-row><el-cardshadow="hover":body-style="{ padding: '0px' }"style="margin-top: 10px"><div class="title">标题</div><div class="content" style="height: 180px">替换区域</div></el-card></el-col></td><td style="width:300px;vertical-align:top;"><el-col style="padding-left: 10px; float: left"><el-cardshadow="hover"style="height: 270px; padding: 0px":body-style="{ padding: '0px' }"><div id="he-plugin-standard"></div></el-card><el-cardshadow="hover"style="height: 330px; margin-top: 10px":body-style="{ padding: '0px' }"><div class="con"><div class="now-data-myself"><div class="now-data-myself-time">{{ date }}</div><div class="now-data-myself-week">{{ week }}</div></div><Calendarv-on:choseDay="clickDay"v-on:changeMonth="changeDate"v-on:isToday="clickToday"></Calendar></div></el-card><el-card shadow="hover" style="height: 245px; margin-top: 10px">替换区域</el-card></el-col></td></tr></table></div>
</template><script>
import Calendar from "vue-calendar-component";
export default {name: "index",components: {Calendar,},created() {var now = new Date();this.date = now.getDate(); //得到日期var day = now.getDay(); //得到周几var arr_week = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");this.week = arr_week[day];//和风天气插件调用window.WIDGET = {CONFIG: {layout: "2",width: 300,height: 270,background: "1",dataColor: "FFFFFF",key: "1e6a2ab779504068bc84d42a4fc53885",},};(function (d) {var c = d.createElement("link");c.rel = "stylesheet";c.href ="https://widget.qweather.net/standard/static/css/he-standard.css?v=1.4.0";var s = d.createElement("script");s.src ="https://widget.qweather.net/standard/static/js/he-standard.js?v=1.4.0";var sn = d.getElementsByTagName("script")[0];sn.parentNode.insertBefore(c, sn);sn.parentNode.insertBefore(s, sn);s.onload = () => {//自动宽度setInterval(() => {try {document.getElementById("he-plugin-standard").style.width = "100%";document.getElementById("he-plugin-standard").style.backgroundSize ="100% 100%";document.getElementsByClassName("wv-lt-refresh")[0].style.display ="none";//document.getElementsByClassName("wv-lt-location")[0].getElementsByTagName("a")[0].style.display="none";//document.getElementsByClassName("wv-lt-location")[0].getElementsByTagName("span")[0].style.display="none";var local = document.getElementsByClassName("wv-lt-location")[0].getElementsByTagName("span")[0].innerText;document.getElementsByClassName("wv-lt-col-7")[0].innerHTML ="<div class='wv-lt-location' style='font-size:15px;'><span>" +local +"</span></div>";} catch (e) {}}, 500);};})(document);},data() {return {// 版本号version: "3.3.0",date: "",week: "",};},methods: {goTarget(href) {window.open(href, "_blank");},clickDay(data) {console.log(data); //选中某天},changeDate(data) {console.log(data); //左右点击切换月份},clickToday(data) {console.log(data); // 跳到了本月},},
};
</script><style scoped lang="scss">
.home {overflow-y: auto;height: calc(100vh - 36px);background-color: #f6f9f9;padding-bottom: 10px;padding-right: 10px;
}
.title {width: 100%;line-height: 43px;background-color: #0069e5;color: white;padding-left: 10px;
}
.content {padding: 5px;height: 70px;
}
.el-card {border-radius: 1px;
}
::v-deep .now-data-myself {width: 40%;position: absolute;border-right: 1px solid rgba(227, 227, 227, 0.6);
}
::v-deep .con {position: relative;max-width: 280px;margin: auto;
}
::v-deep .con .wh_content_all {background: transparent !important;
}
::v-deep .wh_top_changge li {color: #f56c6c !important;font-size: 15px !important;
}
::v-deep .wh_content_item,
::v-deep .wh_content_item_tag {color: #303133 !important;
}
::v-deep .wh_content_item .wh_isToday {background: #00d985 !important;color: #fff !important;
}
::v-deep .wh_content_item .wh_chose_day {background: #409eff !important;color: #ffff !important;
}
::v-deep .wh_item_date{width: 30px !important;height: 30px !important;
}
::v-deep .wh_item_date:hover {background: rgb(217, 236, 255) !important;border-radius: 100px !important;color: rgb(102, 177, 255) !important;
}
::v-deep .wh_jiantou1[data-v-2ebcbc83] {border-top: 2px solid #909399;border-left: 2px solid #909399;width: 7px;height: 7px;
}
::v-deep .wh_jiantou2[data-v-2ebcbc83] {border-top: 2px solid #909399;border-right: 2px solid #909399;width: 7px;height: 7px;
}
::v-deep .wh_top_tag[data-v-2ebcbc83] {color: #409eff;border-top: 1px solid rgba(227, 227, 227, 0.6);border-bottom: 1px solid rgba(227, 227, 227, 0.6);
}
::v-deep .wh_container[data-v-2ebcbc83] {max-width: 280px;
}
::v-deep .wh_top_changge[data-v-2ebcbc83] {display: flex;width: 50%;margin-left: 43%;
}
::v-deep .now-data-myself-time {color: #f56c6c;font-size: 23px;height: 30px;font-family: "Helvetica Neue";padding-left: 10px;
}
::v-deep .now-data-myself-week {font-size: 10px;color: #909399;padding-left: 10px;
}
::v-deep .wh_top_changge .wh_content_li[data-v-2ebcbc83] {font-family: Helvetica;
}
</style>

VUE 天气插件和日历插件相关推荐

vue中引入全年日历插件calendar.js
针对依赖amazeui的全年日历插件在vue项目中的问题 cnpm i jquery cnpm i amazeui 在当前vue中引入jquery .amazeui及相关css或这全局引入(看其他是否 ...
vue中使用FullCalendar日历插件
文章目录前言一.FullCalendar兼容二.使用步骤 1.引入库 2.载入使用总结前言因为要实现一个类似任务日历的功能,于是翻看了vue创造的日历组件发现不能符合要求的,所以又找了几个 ...
javascript日历插件
javascript日历插件原文:javascript日历插件 javascript日历插件最近在尝试着写javascript日历插件,所以也到github上看国外人日历源码,或者国内人写的好点的 ...
vue显示日历插件_一个干净轻巧的插件，用于显示属性日历
vue显示日历插件 V日历 (V-Calendar) V-Calendar is a clean and lightweight plugin for displaying simple, attri ...
前端Vue制作日历插件FullCalendar
前端Vue制作日历插件FullCalendar 官方文档:https://fullcalendar.io/ 效果图安装 Vue2:npm install --save @fullcalendar/v ...
vue 天气插件 —— 创建标准版天气插件的使用——基础积累
最近在写后台管理系统,发现有个天气的功能. 这个是同事写的,来看看他是怎么写的.挺漂亮的天气样式. 1.html代码查找代码后发现,关于天气的html部分只有一行代码: <div id=&qu ...
vue开源项目(各大插件，gitup源码)
vue开源项目(各大插件,gitup源码) 目录 UI组件开发框架实用库服务端辅助工具应用实例 Demo示例 UI组件 element★31142 - 饿了么出品的Vue2的web UI工具 ...
给开发者准备的 10 款最好的 jQuery 日历插件
1. CLNDR.js CLNDR.js 是一个日历插件,用来创建日历,允许用户随意的按照自己的想法去自定义日历.这个插件不会生成任何的标记,但是可以使用数据来填充 Underscore.js HT ...
flex插件_uniapp撸一个日历插件
最近在使用uni-app进行小程序开发,涉及到日历的开发,由于是多语言版本,需要找到能够自定义周一到周末各个名称的日历插件,逛了一圈插件市场没有找到满意的,只好自己动手,丰衣足食话不多说,直接开干, ...

VUE 天气插件和日历插件

VUE 天气插件和日历插件相关推荐

最新文章

热门文章