vue mint-ui 학습 노트 picker 사용

본 고 는 vue mint-ui picker 의 사용 을 소개 하고 여러분 에 게 공유 하 며 자신 에 게 학습 노트 를 남 겼 습 니 다.
Picker 사용

import { Picker } from 'mint-ui';
Vue.component(Picker.name, Picker);

API


예제 1:picker 의 간단 한 사용
xxx.vue：

<template> 
 <div id="app"> 
 <mt-picker :slots="slots" ></mt-picker> 
  
  <router-view></router-view> 
 </div> 
</template> 
  
<script> 
  
export default { 
 data () { 
 return { 
 slots:[{values: ['  ', '  ', '  ', '  ', '  ']}] 
  } 
 }, 
 mounted:function(){ 
  
 } 
} 
</script> 
  
<style> 
  
</style> 

show：
피 커 가 나 왔어요.

분석:
pincker 의 디 스 플레이 는 위 에 반 의 흰색 을 남 깁 니 다. 

드래그 할 때 옵션 을 선택 하면 위 에 남 겨 진 공백 위치 로 이동 합 니 다.

예시 2:picker 의 간단 한 사용--그룹 picker
xxx.vue：

<template> 
 <div id="app"> 
  <mt-picker :slots="slots" ></mt-picker> 
   
  <router-view></router-view> 
 </div> 
</template> 
 
<script> 
 
export default { 
 data () { 
  return { 
    slots: 
        [ 
        { 
         flex: 1, 
         values: ['  ', '  ', '  ', '  ', '  '], 
         className: 'slot1', 
         textAlign: 'left' 
        }, { 
         divider: true, 
         content: '-', 
         className: 'slot2' 
        }, { 
         flex: 1, 
         values: ['2015-11', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'], 
         className: 'slot3', 
         textAlign: 'right' 
        } 
       ] 
  } 
 }, 
 mounted:function(){ 
 
 } 
} 
</script> 
 
<style> 
 
</style> 

show：

분석:
1.picker 는 왼쪽 중 오른쪽 세 부분 으로 나 눌 수 있 습 니 다.위의 slot 대상 의 속성 을 구체 적 으로 볼 수 있 습 니 다.
slots 속성 설정 에 대응 하 는 데 이 터 를 통 해 하나의 배열 을 받 고 배열 안에 3 개의 대상 으로 나 뉜 다.
대상 내 values 외 에 flex(탄성 상자 의 flex 값,1 은 남 은 공간 이 가득 함),className(slot 1,slot 2,slot 3 사용),textAlign(텍스트 의 수평 위 치 를 설정 하고 left,center,right 를 사용 할 수 있 음)을 사용 할 수 있 습 니 다.
2.각 picker 의 높이 는 기본적으로 36px 입 니 다.
 
예제 3:picker 사용 change 이벤트
xxx.vue：

<template> 
 <div id="app"> 
  <mt-picker :slots="slots" @change="onValuesChange" ></mt-picker>  
  <router-view></router-view> 
 </div> 
</template> 
 
<script> 
 
export default { 
 name: 'app', 
 data () { 
  return { 
    slots: 
        [ 
        { 
         flex: 1, 
         values: ['  ', '  ', '  ', '  ', '  '], 
         className: 'slot1', 
         textAlign: 'left' 
        }, { 
         divider: true, 
         content: '-', 
         className: 'slot2' 
        }, { 
         flex: 1, 
         values: ['2015-11', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'], 
         className: 'slot3', 
         textAlign: 'right' 
        } 
       ] 
  } 
 }, 
 mounted:function(){ 
 
 }, 
 methods: { 
    onValuesChange(picker, values) { 
      console.log(picker) 
      console.log(values) 
  } 
 } 
} 
</script> 
 
<style> 
 
</style> 

show：
실행 후 change 이 벤트 는 자동 으로 두 번 의 내용 을 출력 합 니 다.
이 안 에는 2 개의 picker 가 내용 을 선택 할 수 있 기 때문이다.

분석:
한 열 을 굴 릴 때 change 이벤트 가 발생 합 니 다.

 
예시 4:change 이벤트 에서 선택 한 내용 가 져 오기
xxx.vue：

<template> 
 <div id="app"> 
  <mt-picker :slots="slots" @change="onValuesChange" ></mt-picker>  
  <router-view></router-view> 
 </div> 
</template> 
 
<script> 
 
export default { 
 name: 'app', 
 data () { 
  return { 
    value:'', 
    slots: 
        [ 
          { 
            values: ['  ', '  ', '  ', '  ', '  ', '  '] 
          } 
        ] 
  } 
 }, 
 mounted:function(){ 
 
 }, 
 methods: { 
    onValuesChange(picker, values) { 
   this.value = values[0]; 
   console.log(this.value) 
} 
 } 
} 
</script> 
 
<style> 
 
</style> 

show：
picker 를 열 때 동작 이 없 을 때 change 이 벤트 를 자동 으로 실행 하고 첫 번 째 옵션 의 내용 을 선택 합 니 다.
 
선택 한 내용 을 변경 하여 data 내 데 이 터 를 출력 하 였 습 니 다.
 
예제 5:picker 의 표시 개수
xxx.vue：

<template> 
 <div id="app"> 
  <mt-picker :slots="slots" @change="onValuesChange" :visible-item-count="1"></mt-picker>  
  <router-view></router-view> 
 </div> 
</template> 
 
<script> 
 
export default { 
 name: 'app', 
 data () { 
  return { 
    value:'', 
    slots: 
        [ 
          { 
            values: ['  ', '  ', '  ', '  ', '  ', '  '] 
          } 
        ], 
  } 
 }, 
 mounted:function(){ 
 
 }, 
 methods: { 
    onValuesChange(picker, values) { 
   this.value = values[0]; 
   console.log(this.value) 
  } 
 } 
} 
</script> 
 
<style> 
 
</style> 

show：
사용:visible-item-count="1"이후 picker 의 표시 가능 개수 가 1 개 로 변 합 니 다.

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.