app-mob-slider.vue 1.7 KB
Newer Older
zcdtk's avatar
zcdtk committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
<template>
  <div class="app-mobile-slider">
      <ion-range :value="value" :disabled="disabled" min="0" max="100" pin color="secondary" @ionChange="change"></ion-range>
  </div>
</template>



<script lang="ts">
import { Vue, Component, Prop, Provide, Emit, Watch } from 'vue-property-decorator';

@Component({
    components: {
      
    }
})
export default class AppMobSlider extends Vue {
    /**
     * 值
     *
     * @type {number}
     * @memberof AppMobSlider
     */
    @Prop() public value?:number;

    /**
     * 是否禁用
     *
     * @type {boolean}
     * @memberof AppMobSlider
     */
    @Prop() public disabled?:boolean;


    /**
     * change事件
     */
    public change(data:any) {
        this.$emit('change',data.detail.value);
    }

    public mounted(){
        this.changeLabelStyle();
    }

    /**
     * 修改label默认样式
     * @memberof AppMobSlider
     */
    public changeLabelStyle() {
      document.querySelectorAll(".app-mobile-slider").forEach((element: any) => {
        let prev = this.getNearEle(element, 1);
KK's avatar
KK committed
53 54 55
        if(prev && prev.style){
          prev.style.transform = 'none';
        }
zcdtk's avatar
zcdtk committed
56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84
      })
    }

    /**
     * 查找相邻前一个元素
     * 
     *  @memberof AppMobSlider
     */
    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-slider{
  width: 100%;
}   
</style>