Skip to content
No description, website, or topics provided.
Vue JavaScript CSS
Branch: master
Clone or download
Latest commit 8d35dfc Sep 12, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vuepress
docs
src Recognize $el when trigger is a custom component Sep 12, 2019
.editorconfig init Aug 12, 2019
.eslintignore Initial configuration, basic component implementation Aug 13, 2019
.eslintrc.js Initial configuration, basic component implementation Aug 13, 2019
.gitignore
.npmignore Initial configuration, basic component implementation Aug 13, 2019
CONTRIBUTING.md
LICENSE Initial configuration, basic component implementation Aug 13, 2019
README.md Release 0.1.0 Aug 22, 2019
package-lock.json Recognize $el when trigger is a custom component Sep 12, 2019
package.json Recognize $el when trigger is a custom component Sep 12, 2019
rollup.config.js Initial configuration, basic component implementation Aug 13, 2019

README.md

vue-slick-popover

Popover component using popper.js for Vue.js apps

Installation

npm install vue-slick-popover

Documentation

https://vue-slick-popover.netlify.com/docs

Demos

Simple usage

Dropdown menu

Temporary form

Onboarding

Usage

<template>
  <div id="app">
    <img ref="popoverReference" width="20%" src="./assets/logo.png" @click="openPopover">
    
    <VueSlickPopover
      v-if="isPopoverVisible"
      :popover-options="popoverOptions"
      @closePopover="closePopover"
    >
      <VueSlickPopoverContent>
        <p @closePopover="closePopover">Content</p>
      </VueSlickPopoverContent>
    </VueSlickPopover>
  </div>
</template>
import Vue from "vue"
import { VueSlickPopover, VueSlickPopoverContent } from "vue-slick-popover"
import "vue-slick-popover/dist/vue-slick-popover.css"

export default {
    components: {
        VueSlickPopover,
        VueSlickPopoverContent
    },
    
    data() {
        return {
          isPopoverVisible: false,
          popoverOptions: {
            animation: "scale-fade",
            popoverReference: null,
            placement: "top",
            offset: "0,0"
          }
        }
      },
    
      mounted() {
        this.popoverOptions.popoverReference = this.$refs.popoverReference
      },
    
      methods: {
        closePopover() {
          this.isPopoverVisible = false
        },
    
        openPopover() {
          this.isPopoverVisible = true
        }
      }
}

Development

Launch visual tests

npm run watch

Build

Bundle the js and css of to the dist folder:

npm build

Publishing

The prepare hook will ensure dist files are created before publishing. This way you don't need to commit them in your repository.

# Bump the version first
# It'll also commit it and create a tag
npm version
# Push the bumped package and tags
git push --follow-tags
# Ship it 🚀
npm publish

License

MIT

You can’t perform that action at this time.