Vue开发中常用组件

1. vue-countTo (它是一个vue组件，将在指定的持续时间内计入目标数)

安装使用:

		npm install vue-count-to    

例子:

<template>
  <countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
</template>

<script>
  import countTo from 'vue-count-to';
  export default {
    components: { countTo },
    data () {
      return {
        startVal: 0,
        endVal: 2017
      }
    }
  }
</script>

演示demo: http://panjiachen.github.io/countTo/demo/

属性:

功能:

2. vue-area-linkage (省市区三级联动PC端插件)

安装 :

	npm i –save-dev vue-area-linkage area-data 

全局注册 :

	import Vue from 'vue';
	area-data组件提供数据（不建议全局注册这个,在页面里引用）
	// import { pca, pcaa } from 'area-data';
	import 'vue-area-linkage/dist/index.css'; // v2 or higher
	import VueAreaLinkage from 'vue-area-linkage';
	
	Vue.use(VueAreaLinkage)

演示demo: https://dwqs.github.io/vue-area-linkage/

例子1 :

<template>
	<div class="area">
	  <area-select type="text" :data="pcaa" :placeholders="placeholders" :level="2" v-model="selected" placeholder="请选择" ></area-select>
	</div>
</template>
<script>
  // 根据需要按需引入数据
  import { pca, pcaa } from "area-data";
  export default {
    data() {
      return {
        pcaa: pcaa,//最多省市区三级，结合:level='2'选择，0省、1省市、2省市区
    	placeholders: ['选择省','选择市','选择区'],
        selected: [],
      }
    }
  }
</script>

例子2 :

<template>
	 <area-cascader :level="1" v-model="selected" :data="pcaa" placeholder="请选择地区"/>
</template>
<script>
  // 根据需要按需引入数据
  import { pca, pcaa } from "area-data";
  export default {
    data() {
      return {
        pcaa: pcaa,//最多省市区三级和省市二级联动，结合:level='1'选择，0省市、1省市区
        selected: [],
      }
    }
  }
</script>

属性:

事件: