如何使用

安装

• 项目中需要先安装Vue3、Element Plus
• yarn add element-plus
• yarn add vue3-elementplus-component-ah
• 在入口文件中导入样式 import 'vue3-elementplus-component-ah/dist/style.css'

入口文件

// main.ts 
import { createApp } from 'vue'
import App from './App.vue'
// 完整引入element
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// @ts-ignore 引入FbUi
import FbUi from 'vue3-elementplus-component-ah'
import 'vue3-elementplus-component-ah/dist/style.css'
createApp(App).use(ElementPlus).use(FbUi).mount('#app')

<!-- App.vue -->
<script lang='ts' setup>
// import Test from './FbButton.vue'
import Test from './FbBottomSection.vue'
</script>
<template>
  <Test></Test>
</template>

FbBottomSection

<!-- FbBottomSection.vue -->
<template>
    <h1>表单底部栏</h1>
    <FbBottomSection>
      <el-button type="primary" style="margin-left: 10px;">提交</el-button>
      <el-button>取消</el-button>
    </FbBottomSection>
</template>

FbButton

<!-- FbButton.vue -->
<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
const handleClick = () => {
    count.value++
}
</script>
<template>
     <h1>防抖按钮</h1>
    <FbButton type="primary" :debounceWait="500" @click="handleClick">
        提交 
    </FbButton>
    <div>点击{{ count }}次</div>
</template>

启动开发1:普通方式

• yarn
• yarn build
• yarn dev

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
// @ts-ignore
import FbUi from '../../dist/fb-ui.js'
import '../../dist/style.css'
createApp(App).use(FbUi).mount('#app')

启动开发2:link方式

• yarn
• yarn link
• yarn link vue3-elementplus-component-ah
• yarn build
• yarn dev

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
// @ts-ignore
import FbUi from 'vue3-elementplus-component-ah'
import 'vue3-elementplus-component-ah/dist/style.css'
createApp(App).use(FbUi).mount('#app')