一. 如何在setup中使用Echarts表
在Vue2.0 的时候echarts使用我就不写了,因为前面文章我大量的书写了很多,在setup中我看到的是官方文档提供引入和使用的一种 记录下来,以便自己忘记了 可以拿出来看看
一.一 首先安装
echarts 图表的安装: npm/cnpm install echarts --save
一.二 在App.vue中相当于是全局挂载
一.三 在需要使用图表的页面进行代码注入
返回折线图
实际截图
image.png
二.如何在项目中引入自定义组件
如何在项目中去挂载全局组件呢?
二.一 首先在component/button.vue
首先在component文件夹下面创建一个 button.vue 文件
{{ btnText }}
二.二 在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 中使用这个指令：
javaboy
三.三. 我甚至可以通过 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 注入方法后就可以使用了，如下：
五. 整体上来说，通过这种方式来自定义插件，能够实现的内容比较丰富。如果只是想挂一个全局方法来用，那么其实是没有必要定义插件的。如果只是想挂载一个全局方法，在 Vue2 中可以按照如下方式使用：
Vue.prototype.postRequest = postRequest;
在 Vue3 中则可以通过如下方式：
app.config.globalProperties.useDict = useDict
六.从父组件将标签属性（class、id等）传给子组件中的指定的标签
image.png