npm 包 @haztivity/core 使用教程

什么是 @haztivity/core

@haztivity/core 是一款基于 Vue.js 开发的前端 UI 组件库，主要针对移动端的 UI 交互做了优化和封装。在实际的开发中，引入 @haztivity/core 可以大大减少我们的时间成本，提高开发效率，并且保证了移动端交互的流畅度和稳定性。

如何使用 @haztivity/core

安装

在项目中安装 @haztivity/core，可以通过以下命令进行安装：

npm install @haztivity/core --save

引入

在使用 @haztivity/core 前，需要进行引入。可以在项目入口文件中，全局注册 @haztivity/core：

import Vue from 'vue'
import HaztivityCore from '@haztivity/core'
import '@haztivity/core/dist/haztivity-core.css'

Vue.use(HaztivityCore)

这里可以看到，@haztivity/core 同时提供了 CSS 样式。如果你使用了类似 vue-cli 的脚手架工具，可能还需要在 webpack 配置中对 CSS 进行处理。

使用

@haztivity/core 提供了一系列组件和工具方法，可以满足我们在移动端开发中的多种需求。

Button 按钮

Button 是移动端开发里很常用的组件，@haztivity/core 提供了多样化的 Button 组件，通过 props 的不同，可以实现不同的样式和交互。

<template>
  <hzt-button>默认按钮</hzt-button>
  <hzt-button type="primary">主要按钮</hzt-button>
  <hzt-button type="warning">警告按钮</hzt-button>
  <hzt-button type="error">错误按钮</hzt-button>
</template>

可以看到，通过设置不同的 type 属性，可以实现不同的按钮样式。

Toast 弹框提示

在移动端开发中，Toast 组件也是必不可少的。通过 @haztivity/core，我们可以方便地使用 Toast 弹出提示。

this.$toast('提示内容')

Scroll 滚动组件

在移动端，滚动组件也是很常用的。@haztivity/core 提供了一款滚动组件，可以实现滚动效果。

<template>
  <hzt-scroll>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.text }}</li>
    </ul>
  </hzt-scroll>
</template>

ActionSheet 操作列表

ActionSheet 是一种常用的操作列表组件，@haztivity/core 提供了 ActionSheet 组件，可以方便地使用它。

<template>
  <hzt-actionsheet :show="showActionsheet" :cancel="cancel" :menus="menus" />
  <button @click="showActionSheet">弹出操作列表</button>
</template>

通过设置 menus 属性，可以实现不同的操作选项。同时，我们也可以通过 cancel 属性，设置取消操作的提示。而 showActionsheet 则可以控制 ActionSheet 是否显示。

总结

通过本篇文章，我们学习了如何安装和使用 @haztivity/core，以及它提供的一些组件和方法。在实际开发中，@haztivity/core 可以大大提高我们的开发效率，并且保证了移动端交互的流畅性。我相信，通过不断的实践和学习，我们可以更加熟练地掌握 @haztivity/core，并将它应用到实际的项目中。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/haztivity-core