一段VUE程式碼：透過元件封裝全域性方法、自定義指令和註冊元件

充实地生活着發表於2024-11-21
Vue元件封裝

index.js

// 外掛定義第一種方式，物件：擁有 install() 方法的物件
const myPlugin = {
  install(app, options) {
    // 配置全域性方法
    app.config.globalProperties.globalMethod = function (value) {
      return value.toLowerCase();
    };
    // 註冊全域性元件
    app.component('Header', Header);
    // 註冊全域性指令
    app.directive('upper', function (el, binding) {
      // 透過指令引數判斷呼叫外掛的options可選引數
      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';
      }
    });
  }
};


/*
// 函式外掛：另一種方法
const myPlugin = function (app, options) {
  // 配置全域性方法
  app.config.globalProperties.globalMethod = function (value) {
    return value.toLowerCase()
  }
  // 註冊全域性元件
  app.component("Header", Header)

  // 註冊全域性指令
  app.directive("upper", function (el, binding) {
    // 透過指令引數判斷呼叫外掛的options可選引數
    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');

　　

相關文章