第一次好好学习插件的开发，有什么不正确的地方麻烦指正。另外写这篇文章，纯粹是当作自己的学习笔记。
推荐插件实例：element UI ，源码下载地址
目录结构
yc.js
export default class {
/**
* 获取文件名后缀
*/
getFileExt(path) {
let ext = path.substr(path.lastIndexOf(".") + 1);
return ext.toLocaleLowerCase();
}
/**
* 是否是图片
*/
isImage(path) {
let ext = this.getFileExt(path);
return ["bmp", "jpg", "gif", "jpeg", "png", "tif"].includes(ext);
}
/**
* 是否是word
*/
isWord(path) {
let ext = this.getFileExt(path);
return ["doc", "docx"].includes(ext);
}
/**
* 是否是execl
*/
isExcel(path) {
let ext = this.getFileExt(path);
return ["xls", "xlsx"].includes(ext);
}
/**
* 去除后面无用的逗号
*/
removeLastComma(str) {
let newStr = str.replaceAll("，", ",");
let l = newStr.length - 1;
if (newStr.charAt(l) == ",") {
this.removeLastComma(newStr.substr(0, l));
} else {
return newStr;
}
}
}
index.js
import Tool from "./js/yc";
export default {
tool: new Tool(),
};
main.js
vue3.0和2.0有些区别，vue2.0可以通过Vue.prototype.的方式挂载一些方法。3.0中需要使用app.config.globalProperties 来挂载方法。
//我的自定义工具方法
import MyTool from "../src/tool/index";
const app = createApp(App);
//先
app.config.globalProperties.$myTool = MyTool;
//后
app
.use(store)
.use(router)
.use(ElementPlus)
.mount("#app");
注：要先挂载实例方法，之后在挂载app应用
目录结构
参考的element里的目录结构和实现方式
text-color 下的main.vue
<template>
<div>
<el-button type="primary" @click="changeColor('red')">红色</el-button>
<el-button type="primary" @click="changeColor('blue')">蓝色</el-button>
<el-button type="primary" @click="changeColor('black')">重置</el-button>
<div class="textarea" :style="{ color: textColor }">
<slot name="default"></slot>
</div>
</div>
</template>
<script>
import { ref } from "vue";
export default {
name: "text-color",
setup() {
//文字颜色
let textColor = ref("black");
//改变文字颜色
let changeColor = (color) => {
textColor.value = color;
};
return {
textColor,
changeColor,
};
},
};
</script>
<style scoped lang="scss">
.textarea {
margin: 40px;
width: 200px;
height: 100px;
padding: 10px;
text-align: center;
border: 1px solid #409eff;
border-radius: 10px;
}
</style>
text-color 下的index.js
import TextColor from "./src/main.vue";
TextColor.install = function (Vue) {
Vue.component(TextColor.name, TextColor);
};
export default TextColor;
components下的index.js
import TextColor from "./text-color";
const components = [TextColor];
const install = function (Vue, opts = {}) {
components.forEach((component) => {
Vue.component(component.name, component);
});
};
export default {
install,
};
项目的main.js
import { createApp } from "vue";
import App from "./App.vue";
import { router } from "./router";
import store from "./store";
import ElementPlus from "element-plus";
import "element-plus/lib/theme-chalk/index.css";
import MyApp from '../src/components/index'
createApp(App).use(store).use(router).use(ElementPlus).use(MyApp).mount("#app");
主要看MyApp这个就好
使用
<template>
<div>
<text-color>
哈哈哈
</text-color>
</div>
</template>
<script>
export default {
setup(){}
};
</script>
<style scoped lang="scss">
</style>
效果
该实例是vue3.0语法，与2.0语法有不少区别
目录结构
add-sign下的 main.js
let value = (el, binding) => {
if (binding.modifiers.before && binding.modifiers.after) {
el.innerHTML = `<span style="color:red;">不允许同时使用两个修饰符</span>`;
return false;
}
if (binding.modifiers.before) {
el.innerHTML = `
<span style="color:red;">${binding.value}</span> ${el.innerHTML}
`;
}
if (binding.modifiers.after) {
el.innerHTML = `
${el.innerHTML} <span style="color:red;">${binding.value}</span>
`;
}
};
export default {
name: "add-sign",
mounted: value,
updated: value,
};
add-sign下的index.js
import addSign from "./src/main";
addSign.install=function(Vue){
Vue.directive(addSign.name,addSign)
}
export default addSign;
directives下的index.js
import addSign from "./add-sign/index";
const directives = [addSign];
const install = function (Vue, opts = {}) {
directives.forEach((directive) => {
Vue.directive(directive.name, directive);
});
};
export default {
install,
};
项目的main.js
//我的自定义指令
import MyDirective from '../src/directives/index';
createApp(App).use(store).use(router).use(ElementPlus).use(MyComponent).use(MyDirective).mount("#app");
使用
<template>
<div v-add-sign.before="sign">姓名</div>
</template>
<script>
import { ref } from "vue";
export default {
setup() {
let sign = ref("*");
return {
sign,
};
},
};
</script>
<style scoped lang="scss">
</style>
效果
1、在components和directives目录下单独写一个index.js文件是作为所有组件（指令的入口文件），这样在项目的main.js里导入这个文件就好，这样不会显的特别乱