一段VUE代码：通过组件封装全局方法、自定义指令和注册组件

发布时间：2024-12-17 13:54

使用可拆卸的家具组件，方便组装和调整布局 #生活技巧# #居家生活技巧# #家具摆放技巧# #多功能家具利用#

index.js

const myPlugin = {

install(app, options) {

app.config.globalProperties.globalMethod = function (value) {

return value.toLowerCase();

};

app.component('Header', Header);

app.directive('upper', function (el, binding) {

el.textContent = binding.value.toUpperCase();

if (binding.arg === 'small') {

el.style.fontSize = options.small + 'px';

} else if (binding.arg === 'medium') {

el.style.fontSize = options.medium + 'px';

} else {

el.style.fontSize = options.large + 'px';

}

});

}

};

export default myPlugin;

上面这个插件的用法：

import { createApp } from 'vue';

import App from './App.vue';

import myPlugins from './myPlugins'

const app = createApp(App);

app.use(myPlugins, {

small: 12,

medium: 24,

large: 36,

});

app.mount('#app');

posted @ 2024-11-21 09:17 充实地生活着阅读(32) 评论() 编辑收藏举报