circle-percent-vue v0.0.3

circle

A circular ring component used to represent a percentage for Vue2.x.

Install

npm install circle-percent-vue --save

Usage

register components:

// main.js

// import cir-swipe files into main.js
import 'circle-percent-vue/dist/circle.css';
import { Swipe, SwipeItem,circlePercent } from 'circle-percent-vue';

// global register components
Vue.component('swipe', Swipe);
Vue.component('swipe-item', SwipeItem);
Vue.component('circle-percent', circlePercent);

Use in .vue files.

  // value is percent ;
 <circle-percent :value="30" ></circle-perfect>

new Vue({
  data: function () {
    return {
      index: 0, // two way
    };
  },
});

Or, you want import it by html tag

<link href="../node-modules/circle-percent-vue/dist/circle.css" rel="stylesheet"></head>
<script type="text/javascript" src="../node-modules/circle-percent-vue/dist/circle.js"></script>

var vueSwipe = swipe.Swipe;
var vueSwipeItem = swipe.SwipeItem;

new Vue({
  el: 'body',
  // register components
  components: {
    'swipe': vueSwipe,
    'swipe-item': vueSwipeItem
  }
  // ...
  // ...
});

Options

Methods

• swipe.reset()

The cir-swipe internally recalculates the width of the Swipe and calculates the scroll distance based on the new width. This solves the problem that the cir-swipe scroll distance is not correct after the container is resized.

Example:

<swipe ref="swipe">
  <swipe-item>item1</swipe-item>
  <swipe-item>item2</swipe-item>
  <swipe-item>item3</swipe-item>
</swipe>

<script>
  export default {
    // ...
    // ...

    handleResize() {
      this.$refs.swipe.reset();
    }

    mounted() {
      // Avoid losing context
      this.handleResize = this.handleResize.bind(this);

      window.addEventListener('resize', this.handleResize);
    },

    destroyed() {
      window.removeEventListener('resize', this.handleResize);
    }

    // ...
    // ...
  }
</script>
 
# License

MIT