npm 包 vue-component-toptip 使用教程

介绍

vue-component-toptip 是一个基于 Vue.js 的提示组件库，它提供了丰富的提示类型，让我们在前端页面中快速实现各种提示。

安装

我们可以通过 npm 来安装 Vue-component-toptip。

npm install vue-component-toptip --save

使用

Vue-component-toptip 提供了两种使用方式：

1. 作为全局组件
2. 作为局部组件

作为全局组件

在 Vue 项目的入口文件中，我们可以全局注册 Vue-component-toptip 组件。

import Vue from 'vue'
import toptip from 'vue-component-toptip'

Vue.component('toptip', toptip)

现在我们可以在任意一个组件中使用 Toptip 了。

<template>
  <div>
    <toptip message="这是一个默认的提示"></toptip>
  </div>
</template>

作为局部组件

我们也可以在需要使用的组件内，将 vue-component-toptip 作为局部组件来使用。

-- -------------------- ---- -------
------ ------ ---- ----------------------

------ ------- -
  ----------- -
    ------
  --
  -------- -
    ----------- -- -
      ----------------------------------
    -
  -
-

<template>
  <div>
    <!-- 使用 $refs 引用组件 -->
    <toptip ref="toptip"></toptip>
    <button @click="handleClick">点击弹出提示</button>
  </div>
</template>

API

Props

Type

当前支持的类型包括：

• info
• success
• warning
• error

Methods

通过组件的实例方法，可以个性化的调用 vue-component-toptip 提供的方法。

show

打开提示框。

this.$refs.toptip.show('这是一个弹框提示')

hide

隐藏提示框。

this.$refs.toptip.hide()

示例

我们来实现一个上船提示的案例。

-- -------------------- ---- -------
----------
  -----
    ------- ------------ -----------------------
    ------- ----------------------------------
  ------
-----------

--------
------ ------ ---- ----------------------

------ ------- -
  ----------- -
    ------
  --
  -------- -
    ----------- -- -
      ---------------------- - ---------
      ------------------------- - ------
      ----------------------- - ----
      ------------------------
      ------------- -- -
        --------------------------
      -- -----
    -
  -
-
---------

在这个案例中，我们通过给提示框设置类型、内容和延迟时间，来实现了一个上船提示的场景。

总结

Vue-component-toptip 提供了非常灵活且易于扩展的组件，可以满足前端页面中各种提示的场景需求。在使用的过程中，我们可以根据 API 来灵活的掌握其使用方式，让我们开发更加高效和舒适。

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