vue3-plugin-demo

import { createApp } from "vue"
import vue3PluginDemo from "./vue3-plugin-demo/plugin"
import APP from "./app.vue"

const app = createApp(APP)

// 加载插件
app.use(vue3PluginDemo)
app.mount("#app");

import button from "./button.vue"
import directive from "./directive"

const install = (app: any, options: any) => {
    
    // 方法
    app.config.globalProperties.sayHello = function () {
        alert('Hello, Nancy!');
    }

    // 指令
    app.directive("my-directive", directive)

    // 组件
    app.component('my-button', button)
}

export default install

<template>
  <span :style="{ 'color': props.fontColor, 'font-size': props.fontSize + 'px' }" class="bt">
    <slot></slot>
  </span>
</template>

<script setup>
const props = defineProps({
  fontColor: { type: String, default: '' },
  fontSize: { type: Number, default: 14 }
})
</script>

<style scoped>
.bt {
  border: 1px solid black;
  border-radius: 3px;
  padding: 5px 10px;
}
</style>

const focusRange = {
    // 当挂载时
    mounted(el: any, binding: any, vnode: any, prevNode: any) {
        // color
        el.___newColor = binding.value + ""
        el.___oldColor = el.style.borderColor
        el.onclick = () => {
            if (el.style.borderColor == el.___oldColor) {
                el.style.borderColor = el.___newColor
            } else {
                el.style.borderColor = el.___oldColor
            }
        }
    },
    // 当值更新时
    update(el: any, binding: any, vnode: any, prevNode: any) {
        el.___newColor = binding.value + ""
        el.style.borderColor = el.___newColor
    },
    unmounted(el: any, binding: any, vnode: any, prevNode: any) {
    },
}
export default focusRange