vue-popper:基于VueJS popover组件的popper.js

  • k7_166511
    了解作者
  • 95.1KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-04-04 22:13
    上传日期
vue-popperjs 基于 popover组件 例 安装 CDN 推荐: : ,它将在发布到npm时立即反映最新版本。 您也可以在浏览npm软件包的源代码。 NPM npm install vue-popperjs --save 纱 yarn add vue-popperjs 凉亭 bower install vue-popperjs --save 开发设置 # install dependencies npm install # build dist files npm run build 用法 VueJS单个文件(ECMAScript 2015) < template>
vue-popper-master.zip
  • vue-popper-master
  • .github
  • FUNDING.yml
    28B
  • src
  • component
  • popper.js.vue
    10.1KB
  • index.js
    78B
  • doc
  • logo.png
    48.2KB
  • example
  • build
  • rollup.config.js
    623B
  • prerelease.sh
    38B
  • dist
  • vue-popper.min.js
    6.4KB
  • vue-popper.min.css
    1.3KB
  • vue-popper.js
    13.6KB
  • vue-popper.css
    1.6KB
  • circle.yml
    559B
  • .gitattributes
    52B
  • yarn.lock
    110.5KB
  • .eslintrc.js
    543B
  • bower.json
    894B
  • .babelrc
    103B
  • .npmignore
    128B
  • .codeclimate.yml
    228B
  • .travis.yml
    275B
  • LICENSE
    1KB
  • README.md
    8.9KB
  • .editorconfig
    161B
  • .gitignore
    239B
  • _config.yml
    26B
  • CHANGELOG.md
    0B
  • .eslintignore
    69B
  • package.json
    1.6KB
内容介绍
<p align="center"> <img width="250" src="https://cdn.rawgit.com/RobinCK/vue-popper/4431e4cc/doc/logo.png"> </p> <p align="center"> <a href="https://opencollective.com/vue-popper" alt="Financial Contributors on Open Collective" rel='nofollow' onclick='return false;'><img src="https://opencollective.com/vue-popper/all/badge.svg?label=financial+contributors" /></a> <a href="https://github.com/RobinCK/vue-popper" rel='nofollow' onclick='return false;'><img src="https://img.shields.io/badge/vuejs-2.x-brightgreen.svg?style=flat-square"></a> <a href="https://www.npmjs.com/package/vue-popperjs" rel='nofollow' onclick='return false;'><img src="https://img.shields.io/npm/dt/vue-popperjs.svg?style=flat-square"></a> <a href="https://david-dm.org/RobinCK/vue-popper" rel='nofollow' onclick='return false;'><img src="https://david-dm.org/RobinCK/vue-popper.svg?style=flat-square"></a> <a href="https://david-dm.org/RobinCK/vue-popper?type=dev" rel='nofollow' onclick='return false;'><img src="https://david-dm.org/RobinCK/vue-popper/dev-status.svg?style=flat-square"></a> </p> <p align="center"> <a href="https://github.com/RobinCK/vue-popper" rel='nofollow' onclick='return false;'><img src="https://img.shields.io/bower/v/vue-popperjs.svg?style=flat-square"></a> <a href="https://github.com/RobinCK/vue-popper" rel='nofollow' onclick='return false;'><img src="https://img.shields.io/npm/v/vue-popperjs.svg?style=flat-square"></a> <a href="https://github.com/RobinCK/vue-popper/blob/master/LICENSE" rel='nofollow' onclick='return false;'><img src="https://img.shields.io/npm/l/vue-popperjs.svg?style=flat-square"></a> </p> # vue-popperjs [![Greenkeeper badge](https://badges.greenkeeper.io/RobinCK/vue-popper.svg)](https://greenkeeper.io/) VueJS popover component based on <a href="https://popper.js.org/" rel='nofollow' onclick='return false;'>popper.js</a> ## Example [jsFiddle](https://jsfiddle.net/Robin_ck/n840tvp2/) ## 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 ``` bash npm install vue-popperjs --save ``` #### Yarn ``` bash yarn add vue-popperjs ``` #### Bower ``` bash bower install vue-popperjs --save ``` ## Development Setup ``` bash # install dependencies npm install # build dist files npm run build ``` ## Usage ### VueJS single file (ECMAScript 2015) ```html <template> <popper trigger="clickToOpen" :options="{ placement: 'top', modifiers: { offset: { offset: '0,10px' } } }"> <div class="popper"> Popper Content </div> <button slot="reference"> Reference Element </button> </popper> </template> <script> import Popper from 'vue-popperjs'; import 'vue-popperjs/dist/vue-popper.css'; export default { components: { 'popper': Popper }, } </script> ``` ### Browser (ES5) ```html <link rel="stylesheet" href="vue-popper.css"> <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> <div id="app"> <popper trigger="clickToOpen" :options="{ placement: 'top', modifiers: { offset: { offset: '0,10px' } } }"> <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> ``` ## Props | Props | Type | Default | Description | | --------------------|:----------| ------------------------------------------------|--------------| | disabled | Boolean | false | | | delay-on-mouse-over | Number | 10 | Delay in ms before showing popper during a mouse over | | delay-on-mouse-out | Number | 10 | Delay in ms before hiding popper during a mouse out | | append-to-body | Boolean | false | | | visible-arrow | Boolean | true | | | force-show | Boolean | false | | | trigger | String | hover | Optional value: <br><ul><li>**hover** - hover to open popper content</li><li>**clickToOpen** - every click on the popper triggers open, only clicking outside of the popper closes it</li><li>**clickToToggle** - click on the popper toggles it's visibility</li><li>**click** (deprecated - same as **clickToToggle**)</li><li>**focus** - opens popper on focus event, closes on blur.</li> | | content | String | null | | | enter-active-class | String | null | | | leave-active-class | String | null | | | boundaries-selector | String | null | | | transition | String | empty | | | options | Object | { placement: 'bottom', gpuAcceleration: false } | [popper.js](https://popper.js.org/popper-documentation.html) options | | data-value | Any | null | data of popper | | stop-propagation | Boolean | false | | | prevent-default | Boolean | false | | | root-class | String | empty | Class name for root element | ## Events | Name | Params | Description | | ----------------|:-------------------------|--------------| | created | context[Object] | Created popper component | | show | | Show popover | | hide | | Hide popover | | document-click | | | ## Other my Vue JS plugins | Project | Status | Description | |---------|--------|-------------| | [vue-ls](https://github.com/RobinCK/vue-ls) | ![npm](https://img.shields.io/npm/v/vue-ls.svg) | Vue plugin for work with local storage, session storage and memory storage from Vue context | | [vue-gallery](https://github.com/RobinCK/vue-gallery) | ![npm](https://img.shields.io/npm/v/vue-gallery.svg) | Responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers | ## Contributors ### Code Contributors This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)]. <a href="https://github.com/RobinCK/vue-popper/graphs/contributors" rel='nofollow' onclick='return false;'><img src="https://opencollective.com/vue-popper/contributors.svg?width=890&button=false" /></a> ### Financial Contributors Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/vue-popper/contribute)] #### Individuals <a href="https://opencollective.com/vue-popper" rel='nofollow' onclick='return false;'><img src="https://opencollective.com/vue-popper/individuals.svg?width=890"></a> #### Organizations Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/vue-popper/contribute)] <a href="https://opencollective.com/vue-popper/organization/0/website" rel='nofollow' onclick='return false;'><img src="https://opencollective.com/vue-popper/organization/0/avatar.svg"></a> <a href="https://opencollective.com/vue-popper/organization/1/website" rel='nofollow' onclick='return false;'><img src="https://opencollective.com/vue-popper/organization/1/avatar.svg"></a> <a href="https://opencollective.com/vue-popper/organization/2/website" rel='nofollow' onclick='return false;'><img src="https://opencollective.com/vue-popper/organization/2/avatar.svg"></a> <a href="https://opencollective.com/vue-popper/organization/3/website" rel='nofollow' onclick='return false;'><img src="https://opencollective.com/vue-popper/organization/3/avatar.svg"></a> <a href="https://opencollective.com/vue-p
评论
    相关推荐