Vue插件之ElementPlus

<template>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</template>

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
/** 引入element组件 */
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App)
    .use(router)
    .use(store)
    .use(ElementPlus)
    .mount('#app')

<template>
    <div class="info-wrap">
        <div class="name">{{currAttr.JZMC}}</div>
        <el-scrollbar style="height: 200px;" class="scroll-wrap" ref="scrollbar">
        </el-scrollbar>
    </div>
</template>

<script>

export default {
  setup(){
    const scrollbar = ref();  // scrollbar是页面ref后面对应的名字
    // 组件挂载时执行
    onMounted(()=>{
      nextTick(()=>{
        // 监听鼠标滚轮事件，禁止冒泡，解决高德info穿透的bug
        let scrollWrap=scrollbar.value.scrollbar;
        scrollWrap.addEventListener("wheel",function(e){
            e.stopPropagation();
            return false;
        })
      })
    });

    return {
      scrollbar,
    }
  }
}

</script>

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})