Vue 의 이벤트 응답 식 진행 바 구성 요소 인 스 턴 스 상세 설명

앞 에 쓰다
많은 vue 진도 바 구성 요 소 를 찾 았 습 니 다.드래그 와 클릭 이 벤트 는 포함 되 지 않 습 니 다.input range 는 원래 input 와 change 이 벤트 를 포함 하지만 input range 를 기반 으로 진도 바 를 만 들 면 스타일 부분 은 대량의 조정 과 호환성 처 리 를 해 야 합 니 다.잘 되 더 라 도 앞 으로 는 외관 을 고 쳐 야 한 다 는 것 이 또 한 번 의 고생 이다.
상기 두 가지 원인 을 바탕 으로 input 와 change 이벤트(즉,하 나 는 진 도 를 어 딘 가 에 끌 어 다 놓 는 것 이 고,하 나 는 진 도 를 특정한 위치 에서 클릭 하여 그 값 을 이 위치 로 바 꿀 수 있 음)에 응답 할 수 있 는 div 구성 요 소 를 만 들 었 습 니 다.이렇게 하면 진 도 를 가 진 이벤트 에 대한 수 요 를 만족 시 킬 뿐만 아니 라 수요 변동 이 있 으 면 스타일 수정 이 편리 하 다 는 장점 도 가 져 왔 습 니 다.
효과 도

이상 은 이 구성 요 소 를 이용 하여 이 루어 질 수 있 는 효과 입 니 다.그들 은 모두 input 와 change 두 가지 사건 에 응답 할 수 있 습 니 다.
일단 템 플 릿 부분.
위의 그림 을 잘 보 세 요.HTML 템 플 릿 을 어떻게 구성 하 는 지 고려 해 야 합 니 다.저도 여러 번 바 꾸 었 고 마지막 에 정 한 이 구 조 를 보 았 습 니 다.우선 아웃 소 싱 div 가 있 으 면 말 하지 않 겠 습 니 다.그 다음 에 div 아래 에 class='progress'의 div 를 아웃 소 싱 합 니 다.이 div 내부 의 div 는 진도 가 지나 간 부분(class='left')을 표시 합 니 다.class='left'이 div 내부 에 div 를 표시 하여 우리 가 끌 수 있 는 슬라이더 작은 공 을 포함 합 니 다.
좋 은 점 을 말 해 보 세 요.이런 구조,만들어 진 스타일 은 페이지 에서 요 소 를 검사 할 때 모든 div 와 페이지 에 표 시 된 부분 이 겹 치 는 것 을 뚜렷하게 볼 수 있 습 니 다.
만약 에 당신 의 진도 가 전체 길이 의 div 를 나타 내 고 왼쪽 부분의 div 를 나타 내 며 슬라이더 를 나타 내 는 div 는 저 와 같은 내장 구조 가 아니 라 형제 노드 관계 입 니 다.당신 은 스타일 로 상대 적 인 포 지 셔 닝 을 하고 두 형제 노드 를 위로 이동 시 켜 야 합 니 다.그러면 요 소 를 검사 할 때 진도 바 아래 의 다른 구성 요소 의 상 자 는 진도 바 의 구역 에 스 며 들 것 입 니 다.사용 자 는 요 소 를 검사 하지 않 지만 시간 이 지나 면 프로그래머 가 스스로 관찰 하기 도 불편 하지 않 습 니까?
즉,우 리 는 HTML 구조 가 표현 하 는 요소 와 요 소 를 검사 할 때 나타 나 는 모든 요소 의 위치 가 일치 하 기 를 원한 다.이것 도 당신 의 HTML 구조 가 합 리 적 인지 에 대한 평가 지표 라 고 할 수 있다.

<template>
 <div class="progress-wrapper" :style="wrapStyle">
  <div class="progress" @mousedown="mousedownHandler" @mouseover="mouseoverHandler"
    @mousemove="mousemoveHandler" @mouseup="mouseupHandler" :style="pBarStyle">
   <div class="left" :style="leftStyle">
    <div class="ball" :style="ballStyle"></div>
   </div>
   <slot></slot>
  </div>
 </div>
</template>

js 부분
지금 이 사건 의 진 도 를 사용 해 야 하 는 학생 들 에 게 이 부분 을 보면 자신 이 수정 하고 보완 하 는 데 도움 이 될 것 이다.
이 구성 요 소 를 먼저 사용 하려 는 학생 에 게 는 이 부분 을 보지 않 고 이 구성 요소 의 기능 이 부족 하 다 는 것 을 발견 할 때 이 부분 코드 를 보 는 것 도 늦 지 않 습 니 다.

export default {
  name: 'ProgressBar',
  props: {
   leftBg: String,
   bgc: String,
   ballBgc: String,
   height: String,
   width: String,
   max: {
    type: Number,
    default: 100,
   },
   min: {
    type: Number,
    default: 0,
   },
   value: {
    type: Number,
    default: 36,
   },
  },
  data: function () {
   return {
    pValue: this.value,
    pMax: this.max,
    pMin: this.min,
    wrapStyle: {
     'width': this.width,
    },
    pBarStyle: {
     'backgroundColor': this.bgc,
     'height': this.height,
    },
    leftStyle: {
     'width': this.progressPercent + '%',
     'background': this.leftBg,
     'height': this.height,
    },
    ballStyle: {
     'backgroundColor': this.ballBgc,
     'height': this.height,
     'width': this.height,
     'borderRadius': parseInt(this.height) / 2 + 'px',
     'right': - parseInt(this.height) / 2 + 'px',
    },
    //         
    isMouseDownOnBall: false,
   }
  },
  computed: {
   progressPercent(){
    return (this.pValue - this.pMin) / (this.pMax - this.pMin) * 100;
   },
   progressElement(){
    return this.$el.getElementsByClassName('progress')[0];
   },
  },
  methods: {
   mousedownHandler(e){
    if(e.which === 1){
     this.isMouseDownOnBall = true;
    }
   },
   mousemoveHandler(e){
    if(this.isMouseDownOnBall === true){
     //        
     let decimal = (e.clientX - this.$el.offsetLeft) / this.progressElement.clientWidth;
     let percent = decimal * 100;
     this.leftStyle.width = percent + '%';
     //   value
     this.pValue = this.pMin + decimal * (this.pMax - this.pMin);
     this.$emit('pbar-drag', this.pValue, percent);
    }
   },
   mouseupHandler(e){
    if(this.isMouseDownOnBall){
     //        
     let decimal = (e.clientX - this.$el.offsetLeft) / this.progressElement.clientWidth;
     let percent = decimal * 100;
     this.leftStyle.width = percent + '%';
     //   value
     this.pValue = this.pMin + decimal * (this.pMax - this.pMin);
     this.$emit('pbar-seek', this.pValue, percent);
     this.isMouseDownOnBall = false;
    }
   },
   mouseoverHandler(e){
    //           
    if(e.which === 0){
     this.isMouseDownOnBall = false;
    }
   }
  },
  watch: {
   max(cur, old){
    this.pMax = cur;
   },
   min(cur, old){
    this.pMin = cur;
   },
   value(cur, old){
    this.pValue = cur;
   },
   progressPercent(cur, old){
    this.leftStyle.width = cur + '%';
   }
  },
  mounted(){
   //     
   if(this.max < this.min){
    console.error("max can't less than min !");
   }
   //      
   this.leftStyle.width = (this.pValue - this.pMin) / (this.pMax - this.pMin) * 100 + '%';
  },
 }

설치 하 다
주소.
코드 라 이브 러 리 주소GitHub
설치 하 다

npm install vue-draggable-progressbar --save
import progressBar from 'vue-draggable-progressbar'

용례:

<progress-bar ref="aa"></progress-bar>
<progress-bar width="40%" leftBg="greenyellow" bgc="#ccc" ballBgc="red"></progress-bar>
<progress-bar width="60%" leftBg="linear-gradient(to right, yellow, pink)" bgc="#ccc" ballBgc="red"></progress-bar>
<progress-bar width="80%" leftBg="yellow" bgc="#ccc" ballBgc="red" height="30px"></progress-bar>
<progress-bar leftBg="greenyellow" bgc="#ccc" ballBgc="rgba(255,0,0,0.2)" height="40px"></progress-bar>
<progress-bar leftBg="greenyellow" bgc="#ccc" ballBgc="red" :max="max" :value="value" :min="min"
    @pbar-drag="drag" @pbar-seek="seek"></progress-bar>

구성 요소 props

leftBg:진도 가 일부 배경 색

을 그 었 습 니 다.

bgc:진도 가 아직 일부 배경 색 을 그 어 본 적 이 없다

ballBgc:슬라이더 배경 색

width:진도 가 부모 구성 요소 의 너비 백분율 을 차지 하고 백분율 수치

height:진도 바 높이,픽 셀 값

max:진도 게이지 최대 치

min:최소 치

value:현재 값

이벤트

pbar-drag:진도 바 를 드래그 할 때 촉발,회전 value 값 과 백분율 값

pbar-drag:진도 항목 의 한 위 치 를 클릭 할 때 촉발,리 턴 value 값 과 백분율 값

총결산
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 Vue 의 이벤트 응답 식 진도 항목 구성 요소 인 스 턴 스 를 상세 하 게 설명 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.만약 에 궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 신속하게 답 해 드 리 겠 습 니 다!