Vue3.0 使用Echarts和自定义组件全局挂载(十五)

一. 如何在setup中使用Echarts表

在Vue2.0 的时候echarts使用我就不写了,因为前面文章我大量的书写了很多,在setup中我看到的是官方文档提供引入和使用的一种 记录下来,以便自己忘记了 可以拿出来看看

一.一 首先安装

echarts 图表的安装: npm/cnpm install echarts --save  

一.二 在App.vue中相当于是全局挂载

<template>
  <router-view></router-view>
</template>

<script setup>
// 这三步是一定要写的
import * as echarts from "echarts";
import { provide } from "vue";
provide("echarts", echarts);
</script>
  

  
<style>
body {
  margin: 0px;
}
</style>
  

一.三 在需要使用图表的页面进行代码注入

<template>
  <div id="pie"></div>
  <el-button type="success" class="btn-pie" @click="GoToLine">返回折线图</el-button>
</template>

<script>
import { defineComponent, inject, onMounted } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import { inject} from "vue";
export default defineComponent({
  setup() {
    const router = useRouter()
    onMounted(() => {
      pieInit()
    })
    // 1. 获取到从App中导入的Eachart实例
    const echarts = inject('echarts')
    const pieInit = () => {
      // 2. 获取 div盒子初始化图表
      const PieCart = echarts.init(document.getElementById('pie'))

      // 3. 配置图表
      const option = {
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [50, 100],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 6
            },
            data: [
              { value: 40, name: 'rose 1' },
              { value: 38, name: 'rose 2' },
              { value: 32, name: 'rose 3' },
              { value: 30, name: 'rose 4' },
              { value: 28, name: 'rose 5' },
              { value: 26, name: 'rose 6' },
              { value: 22, name: 'rose 7' },
              { value: 18, name: 'rose 8' }
            ]
          }
        ]
      }

      // 4. 把配置好的参数放入到 div盒子实例中进行配置
      PieCart.setOption(option)

      // 5. 设置图表大小自动响应图表大小
      window.addEventListener('resize',function() {
        PieCart.resize();
      })
    }


    const GoToLine = () => {
      router.push('/line')
    }

    return {
      GoToLine
    }
  }
})
</script>

<style lang="less" scoped>
  #pie {
  min-width: 31.25rem;
  min-height: 31.25rem;
  max-height: 500px;
}
.btn-pie {
  margin-top: 20px;
  margin-left: 100px;
}
</style>

实际截图

image.png

二.如何在项目中引入自定义组件

如何在项目中去挂载全局组件呢?

二.一 首先在component/button.vue

首先在component文件夹下面创建一个 button.vue 文件

<template>
  <el-button :size="size">{{ btnText }}</el-button>
</template>

<script>
import { defineComponent } from "@vue/runtime-core";

export default defineComponent({
  name: 'component-button',
  props: {
    btnText: {
      type: String,
      default: "按钮"
    }
  }
})
</script>

<style>

</style>

二.二 在component下面创建一个 index.js文件

import hzcButton from "./button.vue";
export default {
  install(app,options) {
    app.component('hzc-button',hzcButton)
  }
}

二.三 在main.js 文件中导入需要全局挂载的文件

import { createApp } from "vue";
import App from "./App.vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import router from "./router";
import store from "./store";
import plugin from "@/components"
const app = createApp(App);
app.use(plugin)
app.use(ElementPlus).use(store).use(router).use(ElementPlus).mount("#app");
// createApp(App).use(store).mount('#app')

实际截图

image.png

三.一 基于上面的组件 我还可以注册全局的自定义指令 和上面引入完全一样

import hzcButton from "./button.vue";

export default {
    install: (app, options) => {
        console.log("我的第一个插件")
        app.component('hzc-button',hzcButton)
        app.directive("font-size", (el, binding, vnode) => {
            var size = 16;
            switch (binding.arg) {
                case "small":
                    size = 16;
                    break;
                case "large":
                    size = 32;
                    break;
                default:
                    size = 48;
                    break;
            }
            el.style.fontSize = size + "px";
        });
    }
};

三.二 现在，我就可以在项目中随时随地去使用这个指令了，例如在我们刚刚自定义的 my-banner 中使用这个指令：

<template>
    <div>
        <h1>
           <hzc-button href="http://www.javaboy.org" v-font-size:small>javaboy</hzc-button>
        </h1>
    </div>
</template>

<script>
    export default {
        name: "MyBanner"
    }
</script>

三.三. 我甚至可以通过 options 将指令中字体的大小动态的传进来，如下：

import hzcButton from "./button.vue";

export default {
    install: (app, options) => {
        console.log("我的第一个插件")
        app.component('hzc-button',hzcButton)
        app.directive("font-size", (el, binding, vnode) => {
            var size = 16;
            switch (binding.arg) {
                case "small":
                    size = options.small;
                    break;
                case "large":
                    size = options.large;
                    break;
                default:
                    size = options.defaut;
                    break;
            }
            el.style.fontSize = size + "px";
        });
    }
};

三.四 options 是插件注册时候传入的一个 JSON 参数，small、large 以及 default 分别对应的字体多大，要看插件注册时传入的值：

import { createApp } from "vue";
import App from "./App.vue";
import plugin from "@/components"
const app = createApp(App);
app.use(plugin, {small: 16, large: 32, default: 48});
app.use(ElementPlus).use(store).use(router).use(ElementPlus).mount("#app");

第二个参数,就是 options 参数的值。

四. 一 provide & inject

在插件中，也可以通过 provide 来提供一个方法，在需要使用该方法的地方，通过 inject 注入方法，然后就可以使用了，如下：

import MyBanner from "@/plugins/components/MyBanner";

export default {
    install: (app, options) => {
        console.log("我的第一个插件")
        app.component('my-banner', MyBanner);
        app.directive("font-size", (el, binding, vnode) => {
            var size = 16;
            switch (binding.arg) {
                case "small":
                    size = options.small;
                    break;
                case "large":
                    size = options.large;
                    break;
                default:
                    size = options.defaut;
                    break;
            }
            el.style.fontSize = size + "px";
        });
        const clickMe = () => {
            console.log("==========clickMe=========")
        }
        app.provide('clickMe', clickMe);
    }
};

四.二 在需要使用的地方，通过 inject 注入方法后就可以使用了，如下：

<template>
    <div>
        <h1><a href="http://www.javaboy.org" v-font-size:small>javaboy</a></h1>
    </div>
</template>

<script>

    import {inject} from "vue";

    export default {
        name: "MyBanner",
        mounted() {
            const clickMe = inject('clickMe');
            clickMe();
        }
    }
</script>

五. 整体上来说，通过这种方式来自定义插件，能够实现的内容比较丰富。如果只是想挂一个全局方法来用，那么其实是没有必要定义插件的。如果只是想挂载一个全局方法，在 Vue2 中可以按照如下方式使用：

Vue.prototype.postRequest = postRequest;

在 Vue3 中则可以通过如下方式：

app.config.globalProperties.useDict = useDict

六.从父组件将标签属性（class、id等）传给子组件中的指定的标签

image.png