博客

1. 首先安装一下animate.css

npm install animate.css -S
或者
yarn add animate.css

2. 在需要用到动画的vue文件内引用一下

    import 'animate.css'

3. 选定想要的动画效果后在transition标签内加入对应的类名，类名前不要忘记加上‘animate__animated’，否则会失效，enter-active显示时的动画，leave-active隐藏时的动画
   
   

        <Transition enter-active-class="animate__animated animate__rotateIn"
            leave-active-class="animate__animated animate__lightSpeedInRight">
            <div v-if="flag" style="background-color:aqua;width: 100px;height: 100px;"></div>
        </Transition>

1. 安装mitt库

npm install mitt

2. main.ts中初始化

import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt'

const Mit = mitt()

//TypeScript注册
// 由于必须要拓展ComponentCustomProperties类型才能获得类型提示
declare module "vue" {
    export interface ComponentCustomProperties {
        $Bus: typeof Mit
    }
}

const app = createApp(App)

//Vue3挂载全局API
app.config.globalProperties.$Bus = Mit

app.mount('#app')

3. 使用方法通过emit派发， on 方法添加事件，off 方法移除，clear 清空所有。

A组件派发（emit）

<template>
    <div>
        <h1>我是A</h1>
        <button @click="emit1">emit1</button>
        <button @click="emit2">emit2</button>
    </div>
</template>

<script setup lang='ts'>
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance();
const emit1 = () => {
    instance?.proxy?.$Bus.emit('on-num', 100)
}
const emit2 = () => {
    instance?.proxy?.$Bus.emit('*****', 500)
}
</script>

B组件监听（on）

<template>
    <div>
        <h1>我是B</h1>
    </div>
</template>

<script setup lang='ts'>
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
instance?.proxy?.$Bus.on('on-num', (num) => {
    console.log(num,'===========>B')
})
</script>

监听所有事件（ on(“*”) ）

instance?.proxy?.$Bus.on('*',(type,num)=>{
    console.log(type,num,'===========>B')
})

移除监听事件（off）

const Fn = (num: any) => {
    console.log(num, '===========>B')
}
instance?.proxy?.$Bus.on('on-num',Fn)//listen
instance?.proxy?.$Bus.off('on-num',Fn)//unListen

清空所有监听（clear）

instance?.proxy?.$Bus.all.clear() 

1. 下载

npm i -D unplugin-auto-import

2. vite.config.ts配置

import AutoImport from "unplugin-auto-import/vite"
export default defineConfig({
  plugins: [
    ...
     AutoImport ({
      imports: ["vue", "vue-router"], // 自动导入vue和vue-router相关函数
      dts: "src/auto-import.d.ts" // 生成 `auto-import.d.ts` 全局声明
    })
  ]
})

3. 现在vue组件中可以直接使用composition api

before

<template>
  <button @click="add">add</button>
  <button @click="routerPush">go</button>
  {{count}}
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const count = ref(0)
const router = useRouter()
function add() {
  count.value++
}
function routerPush(){
	router.push('a')
}
</script>

after

<template>
  <button @click="add">add</button>
  <button @click="routerPush">go</button>
  {{count}}
</template>

<script lang="ts" setup>
const count = ref(0)
const router = useRouter()
function add() {
  count.value++
}
function routerPush(){
	router.push('a')
}
</script>

• 动画（Animation）—包含易于使用的过渡、超时和计时函数

• 浏览器（Browser）—可用于不同的屏幕控制、剪贴板、首选项等

• 组件（Component）— 为不同的组件方法提供简写

• Formatters – 提供反应时间格式化功能

• 传感器（Sensors ）—用于监听不同的 DOM 事件、输入事件和网络事件

• 状态（State ）—管理用户状态（全局、本地存储、会话存储）

• 实用程序（Utility）—不同的实用程序函数，如 getter、条件、引用同步等

• Watch —更高级的观察者类型，如可暂停观察者、去抖动观察者和条件观察者

• 杂项（Misc）— 事件、WebSockets 和 Web Worker 的不同类型的功能

• 安装

npm i @vueuse/core

• 引入需要的功能，例如拷贝

import { useClipboard } from '@vueuse/core'

const source = ref('Hello')
const { text, copy, copied, isSupported } = useClipboard({ source })