Vue.js 的自定义工具提示组件 - vue-custom-tooltip

Vue.js 的自定义工具提示组件 - vue-custom-tooltip
插件名称 vue-custom-tooltip
版本号 v2.0.2
发布时间 2021年6月12日
插件作者 adamdehaven

Vue.js 3 和 2 的另一个可定制、可重用、反应式工具提示组件。

安装和下载:

# Yarn
$ yarn add @adamdehaven/vue-custom-tooltip

# NPM
$ npm i @adamdehaven/vue-custom-tooltip

使用

1. 导入并注册自定义工具提示组件。

import Vue from 'vue'
import VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'
Vue.use(VueCustomTooltip,{
  // 此处为选项
})
// 或
export default {
  components: {
    VueCustomTooltip,
  },
}

2. 将工具提示附加到您指定的元素。

<VueCustomTooltip label="这是一个 tooltip">
  移动我这里
</VueCustomTooltip>

3. 可用的组件道具。

label: {
  handler(value) {
    this.labelText = value
  },
  immediate: true,
},
active: {
  handler(value) {
    this.isActive = value
  },
  immediate: true,
},
sticky: {
  handler(value) {
    this.isSticky = value
  },
  immediate: true,
},
multiline: {
  handler(value) {
    this.isMultiline = value
  },
  immediate: true,
},
underlined: {
  handler(value) {
    this.isUnderlined = value
  },
  immediate: true,
},
abbreviation: {
  handler(value) {
    this.isAbbreviation = value
  },
  immediate: true,
},
position: {
  // is-top / is-bottom / is-left / is-right
  handler(value) {
    this.hasPosition = value
  },
  immediate: true,
},
size: {
  // is-small / is-medium / is-large
  handler(value) {
    this.hasSize = value
  },
  immediate: true,
},

4. 默认选项。

Vue.use(VueCustomTooltip, {
  name: 'VueCustomTooltip',
  color: '#fff',
  background: '#000',
  borderRadius: 12,
  fontWeight: 400,
})

变更日志:

v2.0.2 (06/10/2021)

  • 更新工具提示顶部填充

v2.0.1 (06/09/2021)

  • Vue 3 和 TypeScript 支持