vue 小案例-05 和风天气插件使用

礼小七

已于 2022-08-20 17:51:05 修改

阅读量562

点赞数

分类专栏： vue JS 文章标签： vue.js html javascript

于 2022-08-18 18:43:25 首次发布

本文链接：https://blog.csdn.net/lixiaoqidecsdn/article/details/126411733

版权

JS 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

vue

10 篇文章 0 订阅

订阅专栏

打开官网，选择版本，填写样式，导出代码。

gitee地址 vue-demo01: 大屏项目：整理小demo，企业常用。

效果：

代码：

<template>
  <div class="box">
    <BackBtn></BackBtn>
    <div id="he-plugin-standard"></div>
  </div>
</template>
<script>
import BackBtn from "@/components/backBtn";
export default {
  name: "container-weather01",
  components: {
    BackBtn,
  },
  data() {
    return {};
  },
  created() {
    window.WIDGET = {
      CONFIG: {
        layout: "1",
        width: "450",
        height: "150",
        background: "4",
        dataColor: "FFFFFF",
        backgroundColor: "666666",
        borderRadius: "5",
        key: "acfb0fb515a84c14b717f892429804b9",
      },
    };
    let script = document.createElement("script");
    script.src =
      "https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0";
    document.getElementsByTagName("head")[0].appendChild(script);
  },
  methods: {},
};
</script>
<style lang='less' scoped>
.box {
  display: flex;
  justify-content: flex-end;
  width: 1200px;
  margin-left: 200px;
  height: 800px;
  background-color: rgb(18, 172, 243);
}
/deep/#he-plugin-standard {
margin: 25px 25px 0 0;
}
</style>