精华内容
下载资源
问答
  • 效果图 首先我们看一下进度条组件运行...progressbar组件表现为.vue文件的形式,其中template部分内容如下 progressbar源文件template部分 我们可以分析一下,progressbar组件主要有这几项属性: 类型,利用type变量
  • vue进度条

    2019-08-09 16:59:21
    使用Vue.js加载旋转器的集合。 只需将yuanyan的React.js项目Halogen转换为Vue.js组件即可。 特别感谢yanyan为这个奇妙的项目。
  • 一款 ins 风格的 vue 进度条组件
  • vue自定义进度条

    2018-09-30 17:46:01
    这是一个使用vue动态开发的进度条的小例子,里面同时涵盖了多种样式的属性值动态改变的方法。
  • vue 进度条 插件 延进步 (yan-progress) This is a cascading progress bar plugin based on vue. 这是一个基于vue的级联进度栏插件。 安装 (Install) $ yarn add yan-progress 快速启动 (Qucik start) App....

    vue 进度条 插件

    延进步 (yan-progress)

    This is a cascading progress bar plugin based on vue.

    这是一个基于vue的级联进度栏插件。

    yan-progress

    安装 (Install)

    $ yarn add yan-progress

    快速启动 (Qucik start)

    App.vue

    应用程序

    <template>
        <div>
            <yan-progress :total="100" :done="60" :modify="30" />
        </div>
    </template>

    index.js

    index.js

    import Vue from 'vue';
    import YanProgress from 'yan-progress';
    import App from './App.vue';
    
    Vue.use(YanProgress);
    
    new Vue({
      el: '#app',
      render: h => h(App)
    });

    (Example)

    Check this file in index.html

    index.html检查此文件

    API (API)

    paramsdescriptiontypedefault
    totalThe total of progressnumber
    doneThe number of donenumber
    modifyThe number of modified base on donenumber
    tipCustom Style (Array contains 3 items, in turn: uncomplete, done, and modified, each item configuration as shown in iTipConfig below)iTipConfig
    参数 描述 类型 默认
    总进度 -
    做完了 完成次数 -
    修改 修改完成数量 -
    小费 自定义样式(数组包含3个项目,依次为:未完成,已完成和已修改,每个项目配置如下面的iTipConfig中所示) iTipConfig -

    iTipConfig

    iTipConfig

    paramsdescriptiontypememo
    textThe tooltip text ('X'is a placeholder)stringThe color type same with CSS
    fillStyleThe background color of progress barstringThe color type same with CSS
    参数 描述 类型 备忘录
    文本 工具提示文字(“ X”是占位符) 颜色类型与CSS相同
    fillStyle 进度条的背景色 颜色类型与CSS相同

    翻译自: https://vuejsexamples.com/a-cascading-progress-bar-plugin-based-on-vue/

    vue 进度条 插件

    展开全文
  • vue进度条阶段显示

    2021-08-03 08:25:52
    效果图(时间点过的背景色为蓝色,时间点未过的为灰色): UI设计图 html代码: <div class="main"> <div class="mainTitle">...div v-if="i.pass" :class="'mainHr'+i.b..

    效果图(时间点过的背景色为蓝色,时间点未过的为灰色):

    UI设计图

     

     

    html代码:

    <div class="main">
    				<div class="mainTitle">新人学习阶段</div>
    				<div class="mainHr">
    					<div v-for="(i,index) in item1">
    						<div v-if="i.pass" :class="'mainHr'+i.bgIndex"></div>	
    					</div>	
    				</div>
    				<div class="mainCotent" >
    					<div class="mainPlan" v-for="(i,index) in item1" >
    						<div v-if="i.pass" :class="'bg2-'+i.bgIndex" class="planItem1" >
    							<div class="planTitle1">{{i.title}}</div>
    							<div class="planHr1"></div>
    							<div class="planListBox1">
    								<div class="planList1" v-for="(j,index) in i.list">
    									{{j.name}}
    								</div>
    							</div>	
    						</div>
    						<div v-if="!i.pass" :class="'bg1-'+i.bgIndex" class="planItem2">
                                <!--planShadow是鼠标悬浮边框加阴影,可以不管 -->
    							<div class="planShadow">
                                    <!--planHover是鼠标悬浮上边框变粗div,可以不管 -->
    								<div class="planHover"></div>   
    								<div class="planTitle2">{{i.title}}</div>
    								<div class="planHr2"></div>
    								<div class="planListBox2">
    									<div class="planList2" v-for="(j,index) in i.list">
    										{{j.name}}
    									</div>
    								</div>
    							</div>		
    						</div>		
    					</div>
    				</div>
    			</div>

     js代码:

    <script type="text/javascript">
    		var app = new Vue({
    			el:'#app',
    			data:{
    				item1:[
    				 {
    				 	title:"第一天计划",
    				 	pass:true,
    				 	bgIndex:"1",
    				 	list:[
    				 	{
    				 		name:"入职登记"
    				 	},{
    				 		name:"上网申请"
    				 	},{
    				 		name:"认识同事"
    				 	},{
    				 		name:"新人露脸"
    				 	},{
    				 		name:"关注公众号"
    				 	},{
    				 		name:"申请邮箱"
    				 	},{
    				 		name:"新员工入职任务"
    				 	},{
    				 		name:"了解考勤制度"
    				 	},{
    				 		name:"办公用品申领"
    				 	},
    				 	],
    				 },{
    				 	title:"第一周计划",
    				 	bgIndex:"2",
    				 	pass:true,
    				 	list:[
    				 	 {
    				 	 	name:"新人学习任务"
    				 	 },{
    				 	 	name:"了解公司制度"
    				 	 },{
    				 	 	name:"了解试用期考核"
    				 	 },{
    				 	 	name:"社保&公积金"
    				 	 },{
    				 	 	name:"请休假流程"
    				 	 },{
    				 	 	name:"业绩考核制度"
    				 	 },{
    				 	 	name:"售后服务制度"
    				 	 },{
    				 	 	name:"提交周报总结"
    				 	 },{
    				 	 	name:"参加入职考试"
    				 	 },
    				 	],
    				 },{
    				 	title:"第一月计划",
    				 	bgIndex:'3',
    				 	pass:true,
    				 	list:[
    				 	 {
    				 	 	name:"新员工应知应会"
    				 	 },{
    				 	 	name:"开发岗考核制度"
    				 	 },{
    				 	 	name:"学习线上课程"
    				 	 },{
    				 	 	name:"业务模块"
    				 	 },{
    				 	 	name:"了解财务报销"
    				 	 },{
    				 	 	name:"了解营销案例"
    				 	 },{
    				 	 	name:"加入企业俱乐部"
    				 	 },{
    				 	 	name:"提交月底考核"
    				 	 },
    				 	]
    				 },{
    				 	title:"第二月计划",
    				 	bgIndex:'4',
    				 	pass:false,
    				 	list:[
    				 	 {
    				 	 	name:"新员工每日一学"
    				 	 },{
    				 	 	name:"了解公司产品"
    				 	 },{
    				 	 	name:"进入学习地图"
    				 	 },{
    				 	 	name:"营销流程合集"
    				 	 },{
    				 	 	name:"有问题问导师"
    				 	 },{
    				 	 	name:"记得提交周总结"
    				 	 },{
    				 	 	name:"提交月度考核"
    				 	 },
    				 	]
    				 },{
    				 	title:"第三月计划",
    				 	bgIndex:'5',
    				 	pass:false,
    				 	list:[
    				 	 {
    				 	 	name:"新人学习任务"
    				 	 },{
    				 	 	name:"提交周总结"
    				 	 },{
    				 	 	name:"准备转正答辩"
    				 	 },{
    				 	 	name:"我的转正答辩"
    				 	 },{
    				 	 	name:"转正薪酬沟通"
    				 	 },{
    				 	 	name:"提交转正申请"
    				 	 },{
    				 	 	name:"名片制作申请"
    				 	 },
    				 	]
    				 },
    				],
                   }
                 })

    css代码:

    .main{
    	width: 112.5rem;
    	height: 38.625rem;
        margin:0.625rem auto;
    	background-image: url(img/阶段背景.png);
    	position: relative;
    }
    .mainTitle{
    	width: 13.875rem;
    	height: 2.875rem;
    	background-color: #457BF7;
    	position: absolute;
    	top: 1.25rem;
    	left: 49.3125rem;
    	color: #FFFFFF;
    	line-height: 2.875rem;/*让黄色div中的文字内容垂直居中*/
        text-align: center;
    }
    .mainHr{
    	width:98.25rem;
    	height: 0.125rem;
    	position: absolute;
    	top: 6.625rem;
    	left:7.125rem;
    	background-color: #DBE1E9;
    	display: flex;
    }
    .mainHr1{
    	width: 13.8125rem;
    	height: 0.125rem;
    	background-color: #457BF7;/*主轴那条灰色线*/
    }
    .mainHr2{
    	width:17.65625rem;
    	height: 0.125rem;
    	background-color: #457BF7;/*主轴分成五段,第1段*/
    }
    .mainHr3{
    	width:17.65625rem;
    	height: 0.125rem;
    	background-color: #457BF7;
    }
    .mainHr4{
    	width:17.65625rem;
    	height: 0.125rem;
    	background-color: #457BF7;
    }
    .mainHr5{
    	width:31.46875rem;
    	height: 0.125rem;	
    	background-color: #457BF7;
    }
    .mainCotent{
    	display: flex;
    	flex-direction: row;
    	justify-content:center;
    	align-items: flex-start;
    	height: 38.625rem;
    	position: relative;
    }
    .mainPlan{
    	height: 38.625rem;
    }
    .planItem1{
        width: 15.125rem;
    	height: 29.5rem;
    	position: relative;
    	top: 6rem;
    	margin:0 20px;
        justify-content: center;
        align-items: center;
        flex-direction: column;	
        text-align: center;						
    }
    	
    .planTitle1{
    	position: absolute;
    	top: 4rem;
        width: 15.125rem;
    	font-size: 16px;
    	font-family: Source Han Sans CN;
    	font-weight: 400;
    	color: #444444;
    }
    .planHr1{
    	width: 12.5rem;
    	position: absolute;
    	top: 5.5625rem;
    	left: 1.3125rem;
    	background-color: #F4F5F7;
    	height: 1px;
    }
    .planListBox1{
        position: absolute;
    	top:6rem;
    }
    .planList1{
    	width: 15rem;
    	height: 1.875rem;
    	margin-top:0.125rem;
    	margin-bottom: 0.125rem;
    	margin-left: auto;
    	margin-right: auto;
    	font-size: 14px;
    	font-family: Source Han Sans CN;
    	font-weight: 400;
    	color: #5C5C5C;
    	line-height: 1.875rem;
    }
    .planList1:hover{
    	background-color:#F0F2F5;
    	color: #457BF7;
    }
    .planItem2{
    	width: 15.125rem;
    	height: 29.5rem;
    	position: absolute;
    	top: 6rem;
    	margin:0 20px;
        justify-content: center;
        align-items: center;
        position: relative;
        flex-direction: column;	
        text-align: center;
    }
    .planShadow{
    	width: 15.125rem;
    	height: 26.375rem;
    	position: absolute;
    	top: 3rem;
    }
    .planTitle2{
    	position: absolute;
    	top: 1rem;
    	width: 15.125rem;
    	font-size: 16px;
    	font-family: Source Han Sans CN;
    	font-weight: 400;
    	color: #444444;
    }
    .planHr2{
    	width: 12.5rem;
    	position: absolute;
    	top: 2.5625rem;
    	left: 1.3125rem;
    	background-color: #F4F5F7;
    	height: 1px;
    }
    .planListBox2{
    	position: absolute;
    	top:3rem;
    }
    .planList2{
    	width: 15rem;
    	height: 1.875rem;
    	margin-top:0.125rem;
    	margin-bottom: 0.125rem;
    	margin-left: auto;
    	margin-right: auto;
    	font-size: 14px;
    	font-family: Source Han Sans CN;
    	font-weight: 400;
    	color: #5C5C5C;
    	line-height: 1.875rem;
    }
    .planList2:hover{
    	background-color:#F0F2F5;
    	color: #457BF7;
    }
    .planHover{
        width: 240px;
    	height: 4px;
    	position: absolute;
    	background: white;
    	border-radius: 2px 2px 0px 0px;
    }
    .planItem2:hover .planShadow{
    	border: 1px solid #E8EAEF;
    	box-shadow: 0px 3px 6px 0px rgba(0, 12, 98, 0.2);
    	border-radius: 2px;
    }
    .planItem2:hover .planHover{
    	background: #454B60;
    }
    .bg1-1{
    	background-image: url(img/未到-1.png);
            }
    .bg1-2{
    	background-image: url(img/未到-2.png);
    		}
    .bg1-3{
    	background-image: url(img/未到-3.png);
            }
    .bg1-4{
    	background-image: url(img/未到-4.png);
    		}
    .bg1-5{
    	background-image: url(img/未到-5.png);
    		}
    		
    .bg2-1{
    	background-image: url(img/到达-1.png);
    		}
    .bg2-2{
    	background-image: url(img/到达-2.png);
    		}
    .bg2-3{
    	background-image: url(img/到达-3.png);
    		}
    .bg2-4{
    	background-image: url(img/到达-4.png);
    		}
    .bg2-5{
    	background-image: url(img/到达-5.png);
    		}

    背景图:

    展开全文
  • 最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录。来看下 npm 搜索组件时候的效果:so 下面咱们一起动手实现一下呗。定义...

    3ec9acb70f600eec90e77bc23da849f7.png

    最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录。

    来看下 npm 搜索组件时候的效果:

    9bf67d83b83cfcbd4ffaa8d85beb42a8.gif

    so 下面咱们一起动手实现一下呗。

    定义使用方式

    想实现一个组件的前提,一定要想好你的需求是什么,还要自己去定义一个舒服的使用方法,这其中也是有原则的,对使用者来说,使用方式越简单越好。那么对应的代价就是写这个组件的复杂度会变高。

    我想要的使用方式是这样的:可以在任意的地方去调用到这个方法,可以随时控制其状态。

    看下对应的代码:

    async someFunction () {

    this.$progress.start()

    try {

    const ret = await axios.get('/xxx')

    // some code ...

    this.$progress.finish()

    } catch (err) {

    // cache err ...

    this.$progress.fail()

    }

    }

    当然,想在任意地方使用,少不了一个步骤,就是在全局注册这个组件:

    import progressBar from 'xxx/progress-bar'

    Vue.use(progressBar, { // some config ... })

    如果不想全局注册,你也可以在某个组件内单独使用,只要你开心就好。

    实现过程

    先来建立一个文件夹和其中两个文件:

    progress-bar

    - 01 progress-bar.vue

    - 02 index.js

    打开progress-bar.vue,先来写结构和样式,这里很简单:

    .bar {

    position: fixed;

    z-index: 99999;

    opacity: 1;

    }

    在注册组件的时候,我想可以自定义一些功能,比如

    成功的颜色

    失败的颜色

    进度条的位置

    动画过渡时间

    加载方向

    高度

    是否可以自动完成

    当然只要你想到的都可以添加,那么这些可以定制的属性,自然而然就成为了组件的 props:

    export default {

    name: 'progressBar',

    props: {

    options: {

    type: Object,

    default () {

    return {

    succColor: 'rgb(76, 164, 214)',

    failColor: 'rgb(218, 26, 101)',

    position: 'top',

    transition: {

    widthSpeed: 200,

    opacitySpeed: 400,

    duration: 300 // 定义消失时间 ms

    },

    inverse: false, // 进度条的加载方向

    thickness: 2 // 进度条的高度

    }

    }

    }

    }

    }

    除了要定义的属性以外,那么组件本身总要有一些自己的属性,用来控制自己的状态,比如这个组件,你要控制进度条的长度、显示和隐藏等状态。

    添加 vue 的 data 属性:

    data () {

    return {

    percent: 0, // 进度条长度

    show: false, // 显示和隐藏

    canSuccess: true // 是否是成功的状态

    }

    }

    有了这些属性,这个进度条就要根据这些属性的变化来“自己动”。所以这个时候首先想到的当然就是 Vue 的计算属性:

    computed: {

    style () {

    // 先拿到乱七八糟的属性

    const { succColor, failColor, location, transition, inverse, thickness } = this.options

    const { widthSpeed, opacitySpeed } = transition

    const { canSuccess, preset, show } = this

    // 定义 css 样式

    const style = {

    backgroundColor: canSuccess ? succColor : failColor,

    opacity: show ? 1 : 0

    }

    if (position !== 'top' || position !== 'bottom') {

    throw new Error('The wrong config of position!')

    }

    style[position] = 0

    if (inverse) {

    style.left = 0

    } else {

    style.right = 0

    }

    style.width = preset + '%' // 设置进度条长度

    style.height = thickness + 'px' // 设置显示高度

    style.transition = `width ${widthSpeed}ms, opacity ${opacitySpeed}ms` // 设置过度样式

    return style

    }

    }

    到这里这个 vue 组件其实就完成了,接下来就是如何去控制它。打开index.js,先来写一个标准的组件格式:

    import progressBar from './progress-bar.vue'

    export default {

    install (Vue, options = {}) {

    // 注册组件

    Vue.component(progressBar.name, progressBar)

    }

    }

    之后咱们要用到 Vue 提供的扩展方法,来完成咱们的需求。

    第一步,添加 autoFinish 属性,用来设定动画是否可以自动完成,默认是 true,当然如果某个路由或请求一直处于 pending 状态,你可以可以设置让其永远不完成动画的动作。

    第二步,来写一个对象,其中包含 start 、 finish 、 fail 方法以及动画代码。

    第三步,将这个对象挂在到 Vue 的原型

    完整的代码和说明如下:

    import progressBar from './progress-bar.vue'

    export default {

    install (Vue, options = {}) {

    // 注册组件

    Vue.component(progressBar.name, progressBar)

    // 创建一个 Vue 子类

    const Component = Vue.extend(progressBar)

    // 拿到自定义的属性

    const { autoFinish, ...res } = options

    // 创建组件实例

    const vm = new Component({

    data: {

    autoFinish: typeof autoFinish === 'boolean' ? autoFinish : true

    }

    })

    // 将 progressBar 的默认 options 与 自定义的 options 合并

    options = Object.assign(vm.$props.options, { ...res })

    //合并新的 props

    vm.$propsData = options

    vm.$mount()

    // 如果是服务端渲染那么不继续执行

    if (!vm.$isServer) {

    document.body.appendChild(vm.$el)

    }

    let timer = null

    const progress = {

    start () {

    if (Vue.$isServer) return

    // 每次调用 start 都重新初始化一次,比如多次点击某个按钮连续请求,那么每次都从0开始

    vm.percent = 0

    vm.show = true

    vm.canSuccess = true

    // 定一个增量,这个值可以改成参数,也可以按照使用经验来设定

    const CUT_SCALE = 5

    // 定义每 100 秒来执行一次动画

    timer = setInterval(() => {

    // 每次执行增量动画

    this.increase((CUT_SCALE - 1) * Math.random() + 1)

    // 如果进度大于 95%,并且设置了自动完成,那么执行结束动作

    if (vm.percent > 95 && vm.autoFinish) {

    this.finish()

    }

    }, 100)

    },

    increase (cut) {

    vm.percent = Math.min(99, vm.percent + cut)

    },

    hide () {

    clearInterval(timer)

    // 这里面有2个定时器,外层定时器是让用户可以看到这个 进度已经完成啦

    // 内层定时器,由于 opacity 消失需要一定的过渡时间,所以要等待它消失以后

    // 在将其进度设置为0,等待下次调用,如果不延迟,那么会看到进度到100后又回到0的动画

    setTimeout(() => {

    vm.show = false

    setTimeout(() => {

    vm.percent = 0

    timer = null

    }, vm.options.transition.opacitySpeed)

    }, vm.options.transition.duration)

    },

    // 下面这2个方法就很简单了,只需要完成进度,然后执行隐藏即可

    finish () {

    if (Vue.$isServer) return

    vm.percent = 100

    this.hide()

    },

    fail () {

    if (Vue.$isServer) return

    // 修改未成功的状态,实际效果就是改变最后的颜色

    vm.canSuccess = false

    vm.percent = 100

    this.hide()

    }

    }

    // 最后挂在到全局

    Vue.prototype.$progress = progress

    }

    }

    到这里,一个进度条组件就完成了。大家可以自己动手实践一下,起一个项目,使用 vue-router 的 beforeResolve 声明周期钩子,或者写一个定时器模拟异步来测试一下。

    以上是笔者归纳总结,如有误之处,欢迎指出。

    订阅号ID:Miaovclass

    关注妙味订阅号:“妙味前端”,为您带来优质前端技术干货;

    展开全文
  • 主要为大家详细介绍了vue实现简单loading进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Vue进度条

    2021-08-25 16:27:53
    <template> <div> <div class="Progress"> <div class="jindu" :style="{ width: jindu + '%' }"></div> ...el-button @click="start()" type="primary" plai...

    <template>
      <div>
        <div class="Progress">
          <div class="jindu" :style="{ width: jindu + '%' }"></div>
        </div>
        <div class="Progress-button">
          <el-button @click="start()" type="primary" plain>开始</el-button>
          <el-button @click="stop()" type="primary" plain>停止</el-button>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          jindu: 0,
        };
      },
      created() {},
      mounted() {},
      methods: {
        progress(data) {
          let _this = this;
          _this.clearInt = setInterval(function () {
            if (_this.jindu < data) {
              _this.jindu++;
            } else {
              clearInterval(_this.clearInt);
            }
          }, 100);
        },
        start() {
          this.progress(100);
        },
        stop() {
          // var num = Math.floor(Math.random() * 40 + 50);
          clearInterval(this.clearInt);
        },
      },
    };
    </script>
    
    <style lang="less" scoped>
    .Progress {
      height: 30px;
      margin: 0 auto;
      margin-top: 50px;
      border-radius: 100px;
      background-color: #ebeef5;
      .jindu {
        background-color: #409eff;
        border-radius: 100px;
        height: 100%;
        overflow: hidden;
      }
    }
    .Progress-button {
      margin-top: 20px;
    }
    </style>
    

     

    展开全文
  • 脚本简介基于VUE步骤进度条样式代码是一款响应式带图标的步骤进度条代码。
  • 最简单的使用方式:vue项目的每次路由切换时,都加载进度条 安装 npm install --save nprogress 引入 在路由配置文件中引入,写到路由加载前和加载后的两个钩子函数中 // 引入 import NProgress from 'nprogress'; ...
  • vue进度条+定时器,实现自动变化

    千次阅读 2019-07-17 11:38:16
    1.添加一个class名为Progress 的 div,即进度条外边框。 2.接着,在上面的 div 内,添加一个class名为jindu的div 3.class.jindu的style宽度使用百分比,例如 style=“50%”; 表示进度条在 50% 的位置。 代码 <div...
  • 一款基于 Vue 的建议进度条组件
  • Vue给项目添加进度条

    2021-01-08 03:46:07
      在PC端项目的开发过程中,有时我们需要给项目添加一个进度条来展示界面是否已经完成加载的情况。那么如何才能成功添加进度条呢? 添加方式   1.引入插件Nprogress npm install --save nprogress   2.在main...
  • 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="vue...
  • vue进度条插件vue-nprogress

    千次阅读 2018-06-15 10:29:39
    我们在vue项目开发中经常会遇到的需求是,在跳转或者请求接口时要求有一个加载的进度条,现在我们介绍的是vue其中的一个进度条插件vue-nprogress安装$ npm install nprogress --save 使用在main.js中引入依赖import ...
  • vue进度条组件 径向进程 (vue-radial-progress) A radial progress bar component for Vue.js. Vue.js的径向进度条组件。 现场演示 (live demo) https://wyzant-dev.github.io/vue-radial-progress/ ...
  • vue-ins-progress-bar:一种ins风格的Vue进度条组件
  • vue 进度条 组件

    2021-01-10 16:37:34
    <template> <div class="step-face"> <div v-for="(item, index) in stepArray" class="step" :class="index+1>value?'will-step':index+1==value?'doing-step':index+1<...
  • 本文实例为大家分享了vue使用nprogress进度条展示的具体代码,供大家参考,具体内容如下 安装 npm i nprogress -S 使用 在main.js中 import NProgress from 'nprogress' import 'nprogress/nprogress.css' //使用...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,310
精华内容 3,324
关键字:

vue进度条

vue 订阅