popover.js_基于VueJS 2.x popover组件的popper.js

最新推荐文章于 2024-09-13 22:35:56 发布

cuk5239

最新推荐文章于 2024-09-13 22:35:56 发布

阅读量1k

点赞数

文章标签： vue javascript js html less ViewUI

原文链接：https://vuejsexamples.com/vuejs-2-x-popover-component-based-popper-js/

版权

本文介绍了如何使用popover.js，这是一个基于popper.js的VueJS 2.x popover组件。提供了NPM、Yarn和Bower等多种安装方式，以及VueJS单个文件组件和浏览器ES5环境的使用指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

popover.js

vue-popperjs (vue-popperjs)

VueJS popover component based on popper.js

基于popper.js的VueJS popover组件

View demo 查看演示 Download Source 下载源

安装 (Install)

CDN

Recommended: https://unpkg.com/vue-popperjs, which will reflect the latest version as soon as it is published to npm. You can also browse the source of the npm package at https://unpkg.com/vue-popperjs/

NPM (NPM)

npm install vue-popperjs --save

纱 (Yarn)

yarn add vue-popperjs

凉亭 (Bower)

bower install vue-popperjs --save

开发设置 (Development Setup)

# install dependencies
npm install

# build dist files
npm run build

用法 (Usage)

VueJS单个文件(ECMAScript 2015) (VueJS single file (ECMAScript 2015))

<template>
  <popper trigger="click" :options="{placement: 'top'}">
    <div class="popper">
      Popper Content
    </div>

    <button slot="reference">
      Reference Element
    </button>
  </popper>
</template>

<script>
  import Popper from 'vue-popperjs';
  import 'vue-popperjs/dist/css/vue-popper.css';
  
  export default {
    components: {
      'popper': Popper
    },
  }
</script>

浏览器(ES5) (Browser (ES5))

<script type="text/javascript" src="popper.js"></script>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-popper.js"></script>
<script type="text/javascript" src="vue-popper.css"></script>

<div id="app">
  <popper trigger="click" :options="{placement: 'top'}">
    <div class="popper">
      Popper Content
    </div>

    <button slot="reference">
      Reference Element
    </button>
  </popper>
</div>

<script type="text/javascript">
  new Vue({
    el: '#app',
    components: {
      'popper': VuePopper
    }
  });
</script>