<template> <van-stepper class="app-mobile-stepper" v-model="curValue" :disabled="disabled"/> </template> <script lang="ts"> import { Vue, Component, Prop, Provide, Emit, Watch } from 'vue-property-decorator'; import { Stepper } from 'vant'; Vue.use(Stepper); @Component({ components: { } }) export default class AppStepper extends Vue { /** * 确定的时间 * * @type {number} * @memberof AppStepper */ @Prop() public value?:number; /** * 是否禁用 * * @type {number} * @memberof AppStepper */ @Prop() public disabled?:boolean; get curValue(){ return this.value; } set curValue(value:any){ this.$emit('change',value); } public mounted(){ this.changeLabelStyle(); } /** * 修改label默认样式 * @memberof AppStepper */ public changeLabelStyle() { document.querySelectorAll(".app-mobile-stepper").forEach((element: any) => { let prev = this.getNearEle(element, 1); if(prev && prev.style){ prev.style.transform = 'none'; } }) } /** * 查找相邻前一个元素 * * @memberof AppStepper */ public getNearEle(ele: any, type: any) { type = type == 1 ? "previousSibling" : "nextSibling"; var nearEle = ele[type]; while (nearEle) { if (nearEle.nodeType === 1) { return nearEle; } nearEle = nearEle[type]; if (!nearEle) { break; } } return null; } } </script> <style lang="less"> .app-mobile-stepper{ width: 100%; text-align: right; } </style>