实用的VUE系列——手把手教你写个vue 插件

// 引入一个节流函数
import throttle from 'lodash/throttle';
throttle(()=>{console.log('这是一个节流函数')}，200)

// 引入一个防抖函数
import throttle from 'lodash/debounce';
debounce(()=>{console.log('这是一个防抖函数')}，200)

<template>
   //用原生的button按钮，更改了样式
  <button
    class="el-button"
    @click="handleClick"
    :disabled="buttonDisabled || loading"
    :autofocus="autofocus"
    :type="nativeType"
    :class="[
      type ? 'el-button--' + type : '',
      buttonSize ? 'el-button--' + buttonSize : '',
      {
        'is-disabled': buttonDisabled,
        'is-loading': loading,
        'is-plain': plain,
        'is-round': round,
        'is-circle': circle
      }
    ]"
  >
    <i class="el-icon-loading" v-if="loading"></i>
    <i :class="icon" v-if="icon && !loading"></i>
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>
<script>
  export default {
    name: 'ElButton',

    inject: {
      elForm: {
        default: ''
      },
      elFormItem: {
        default: ''
      }
    },
    // 根据外部传递的参数，改变当前button按钮的形态和功能
    props: {
      type: {
        type: String,
        default: 'default'
      },
      size: String,
      icon: {
        type: String,
        default: ''
      },
      nativeType: {
        type: String,
        default: 'button'
      },
      loading: Boolean,
      disabled: Boolean,
      plain: Boolean,
      autofocus: Boolean,
      round: Boolean,
      circle: Boolean
    },

    computed: {
      _elFormItemSize() {
        return (this.elFormItem || {}).elFormItemSize;
      },
      buttonSize() {
        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
      },
      buttonDisabled() {
        return this.$options.propsData.hasOwnProperty('disabled') ? this.disabled : (this.elForm || {}).disabled;
      }
    },

    methods: {
       // 给外部的回调，能让外部直接能用上@click 方法而不是@click.native
      handleClick(evt) {
        this.$emit('click', evt);
      }
    }
  };
</script>

const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {}
}
// 在模板中使用
<div v-my-directive></div>

import { Loading } from './service'
// 创建加载中遮罩层实例，并且挂在在body 中
const createInstance = (
  el: ElementLoading,
  binding: DirectiveBinding<LoadingBinding>
) => {
  const vm = binding.instance

  const getBindingProp = <K extends keyof LoadingOptions>(
    key: K
  ): LoadingOptions[K] =>
    isObject(binding.value) ? binding.value[key] : undefined

  const resolveExpression = (key: any) => {
    const data = (isString(key) && vm?.[key]) || key
    if (data) return ref(data)
    else return data
  }

  const getProp = <K extends keyof LoadingOptions>(name: K) =>
    resolveExpression(
      getBindingProp(name) ||
        el.getAttribute(`element-loading-${hyphenate(name)}`)
    )

  const fullscreen =
    getBindingProp('fullscreen') ?? binding.modifiers.fullscreen

  const options: LoadingOptions = {
    text: getProp('text'),
    svg: getProp('svg'),
    svgViewBox: getProp('svgViewBox'),
    spinner: getProp('spinner'),
    background: getProp('background'),
    customClass: getProp('customClass'),
    fullscreen,
    target: getBindingProp('target') ?? (fullscreen ? undefined : el),
    body: getBindingProp('body') ?? binding.modifiers.body,
    lock: getBindingProp('lock') ?? binding.modifiers.lock,
  }
  // 挂在实例到dom节点中，以便实例被长久保存
  el[INSTANCE_KEY] = {
    options,
    instance: Loading(options),
  }
}


// 指令对象
export const vLoading: Directive<ElementLoading, LoadingBinding> = {
  mounted(el, binding) {
    if (binding.value) {
      // 指令初始化
      createInstance(el, binding)
    }
  },
  // 指令更新重新初始化
  updated(el, binding) {
    const instance = el[INSTANCE_KEY]
    if (binding.oldValue !== binding.value) {
      if (binding.value && !binding.oldValue) {
        createInstance(el, binding)
      } else if (binding.value && binding.oldValue) {
        if (isObject(binding.value))
          updateOptions(binding.value, instance!.options)
      } else {
        instance?.instance.close()
      }
    }
  },
  // 指令卸载也要卸载当前实例
  unmounted(el) {
    el[INSTANCE_KEY]?.instance.close()
    el[INSTANCE_KEY] = null
  },
}

 <el-button 
    v-loading="fullscreenLoading"
    type="primary"
  >
    As a directive
  </el-button>

// Child.vue
<script setup>
   defineExpose({
       childName: "这是子组件的属性",
       someMethod(){
           console.log("这是子组件的方法")
       }
   })
</script>

// Parent.vue
<template>
   <child ref="comp"></child>
   <button @click="handlerClick">按钮</button>
</template>
<script setup>
   import child from "./child.vue"
   import { ref } from "vue"
   const comp = ref(null)
   const handlerClick = () => {
       console.log(comp.value.childName) // 获取子组件对外暴露的属性
       comp.value.someMethod() // 调用子组件对外暴露的方法
   }
</script>

// Child.vue
<template>

<el-dialog
   v-model="dialogVisible"
 >
   <span>This is a message</span>
 </el-dialog>
</template>
<script setup>
      import { ref } from "vue"
   const dialogVisible = ref(false)
   defineExpose({
     dialogVisible
   })
</script>

// Parent.vue
<template>
   <child ref="comp"></child>
   <button @click="handlerClick">按钮</button>
</template>
<script setup>
   import child from "./child.vue"
   import { ref } from "vue"
   const comp = ref(null)
   const handlerClick = () => {
      comp.value.dialogVisible = true
    
   }
</script>

import { ref, watch } from 'vue';
const useAdd= ({ num1, num2 })  =>{
    const addNum = ref(0)
    watch([num1, num2], ([num1, num2]) => {
        addFn(num1, num2)
    })
    const addFn = (num1, num2) => {
        addNum.value = num1 + num2
    }
    return {
        addNum,
        addFn
    }
}
export default useAdd

// 在代码中使用   

<script setup>
import { ref } from 'vue'
import useAdd from './useAdd.js'     //引入自动hook 
const num1 = ref(2)
const num2 = ref(1)
//加法功能-自定义Hook（将响应式变量或者方法形式暴露出来）
const { addNum, addFn } = useAdd({ num1, num2 })
subFn(num1.value, num2.value
console.log(addNum)
</script>

// 测试hooks 
import { ref } from "vue";
const res = ref(1);
export const useTest = () => {
  return { res };
};
// app.vue中修改
<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
import { useTest } from "./components/test";
const { res } = useTest();
setTimeout(() => {
  res.value = 333;
}, 1000);
</script>
// HelloWorld.vue中也能感受到变化，实现全局状态
<script setup lang="ts">
import { useTest } from "./test";
const { res } = useTest();
  console.log(res);
</script>
<template>
  <h1>{{ res }}</h1>
</template>

 ElMessage({
        type: 'info',
        message: '这是个弹窗',
      })

  // 生成虚拟dom ，当然可以是组件生成的
  const vnode = createVNode(
    MessageBoxConstructor,
    props,
  )
  // 保存实例
  vnode.appContext = appContext
  // 渲染
  render(vnode, container)

// 组件弹窗模板 app.vue
<template>
<div>这是一个弹窗</div>
</template>
<script setup>

</script>

// 函数
import  MessageConstructor from './app.vue'
function createMessage(){
 const container = document.createElement('div')
 const vnode = createVNode(
   MessageConstructor,
   props,
 )
 // 保存实例
 vnode.appContext = appContext
 // 渲染
 render(vnode, container)
 // 挂载
 appendTo.appendChild(container.firstElementChild!) 
}

// 代码项目中使用
createMessage()