帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

Vue简单工具提示、弹出框、下拉菜单、菜单浮动UI组件

帝国模板之家 2022-03-13 网页特效 评论

描述:

一个 Vue.js 组件,它使用浮动 UI 库来定位浮动元素,如工具提示、弹出框、下拉列表等。

基本用法:

1. 导入并注册 Floating Vue。

import FloatingVue from 'floating-vue'
app.use(FloatingVue);
// Stylesheet
import 'floating-vue/dist/style.css'

2. 使用v-tooltip将基本工具提示附加到元素。

<button v-tooltip="'This Is A Tooltip'"></button>

3.  或者使用VTooltip指令。

<VTooltip>
  <a>Hover Me</a>
  <template #popper>
    Tooltip Content
  </template>
</VTooltip>

4.启用一个元素来切换下拉菜单。

<VDropdown
  <button>Click me</button>
  <template #popper>
    <input class="tooltip-content" v-model="msg" placeholder="Dropdowncontent" />
    <p>
      {{ msg }}
    </p>
    <ExampleComponent char="=" />
  </template>
</VDropdown>

5. 所有默认配置。

Vue.use(FloatingVue, {
  // options
})
// Disable popper components
disabled: false,
// Default position offset along main axis (px)
distance: 5,
// Default position offset along cross axis (px)
skidding: 0,
// Default container where the tooltip will be appended
container: 'body',
// Element used to compute position and size boundaries
boundary: undefined,
// Skip delay & CSS transitions when another popper is shown, so that the popper appear to instanly move to the new position.
instantMove: false,
// Auto destroy tooltip DOM nodes (ms)
disposeTimeout: 5000,
// Triggers on the popper itself
popperTriggers: [],
// Positioning strategy
strategy: 'absolute',
// Prevent overflow
preventOverflow: true,
// Flip to the opposite placement if needed
flip: true,
// Shift on the cross axis to prevent the popper from overflowing
shift: true,
// Overflow padding (px)
overflowPadding: 0,
// Arrow padding (px)
arrowPadding: 0,
// Compute arrow overflow (useful to hide it)
arrowOverflow: true,
// Themes
themes: {
  tooltip: {
    // Default tooltip placement relative to target element
    placement: 'top',
    // Default events that trigger the tooltip
    triggers: ['hover', 'focus', 'touch'],
    // Close tooltip on click on tooltip target
    hideTriggers: events => [...events, 'click'],
    // Delay (ms)
    delay: {
      show: 200,
      hide: 0,
    },
    // Update popper on content resize
    handleResize: false,
    // Enable HTML content in directive
    html: false,
    // Displayed when tooltip content is loading
    loadingContent: '...',
  },
  dropdown: {
    // Default dropdown placement relative to target element
    placement: 'bottom',
    // Default events that trigger the dropdown
    triggers: ['click'],
    // Delay (ms)
    delay: 0,
    // Update popper on content resize
    handleResize: true,
    // Hide on clock outside
    autoHide: true,
  },
  menu: {
    $extend: 'dropdown',
    triggers: ['hover', 'focus'],
    popperTriggers: ['hover', 'focus'],
    delay: {
      show: 0,
      hide: 400,
    },
  },
},
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言