Vue开发中常用组件
1.vue-countTo (它是一个vue组件,将在指定的持续时间内计入目标数)安装使用:npm install vue-count-to例子:<template><countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo></tem...
·
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>
属性:
事件:
更多推荐
已为社区贡献3条内容
所有评论(0)