h-element
安装
npm install @hekaiyu/element --save
使用方法
全局使用
在 main.ts (使用ts开发) 或者 main.js,写入以下代码
// 引入所有组件
import HElement from '@hekaiyu/element'
// 引入样式
import '@hekaiyu/element/dist/index.css'
import App from './App.vue'
// 全局使用
createApp(App).use(HElement).mount('#app')
页面上使用组件
<template>
<h-button>我是 HButton</h-button>
<h-button plain>Plain h-button</h-button>
<h-button round>Round h-button</h-button>
<h-button circle>VK</h-button>
<h-button disabled>Disabled h-button</h-button><br /><br />
<h-button type="primary">Primary</h-button>
<h-button type="success">Success</h-button>
<h-button type="info">Info</h-button>
<h-button type="warning">Warning</h-button>
<h-button type="danger">Danger</h-button><br /><br />
<h-button type="primary" plain>Primary</h-button>
<h-button type="success" plain>Success</h-button>
<h-button type="info" plain>Info</h-button>
<h-button type="warning" plain>Warning</h-button>
<h-button type="danger" plain>Danger</h-button><br /><br />
<h-button size="large">Large</h-button>
<h-button size="small">Small</h-button><br /><br />
<h-button size="large" loading>Loading</h-button>
<h-button size="large" icon="arrow-up">Icon</h-button><br /><br />
</template>
单个导入
H-Element 提供了基于 ES Module 的开箱即用的 Tree Shaking 功能。
在 main.ts (使用ts开发) 或者 main.js,写入以下代码
// 引入样式
import '@hekaiyu/element/dist/index.css'
<template>
<Button>我是 HButton</Button>
</template>
<script>
import { Button } from '@hekaiyu/element'
export default {
components: { Button },
}
</script>