집 > 기사 > 웹 프론트엔드 > vue mint-ui의 선택기 사용 소개

vue mint-ui의 선택기 사용 소개

小云云원래의: 2018-01-25 10:37:566374검색

이 글은 주로 Vue 민트의 스터디 노트에서 Picker의 사용법을 소개하고 있습니다. 편집자는 꽤 좋다고 생각합니다. 이제 여러분께 공유하고 참고하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다. this이 기사는 vue mint-ui pic

예 1: 선택기의 간단한 사용

xxx.vue:

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

show:

picker가 표시됩니다

분석:

pincker 표시는 상단 공백의 절반을 남겨둡니다

드래그할 때 옵션은 위에 예약된 공백으로 실행됩니다

예 2: 선택기의 간단한 사용 - 그룹 선택기

xxx.vue:

<template> 
 <p id="app"> 
 <mt-picker :slots="slots" ></mt-picker> 
  
  <router-view></router-view> 
 </p> 
</template> 
  
<script> 
  
export default { 
 data () { 
 return { 
 slots:[{values: [&#39;年假&#39;, &#39;事假&#39;, &#39;病假&#39;, &#39;婚假&#39;, &#39;其他&#39;]}] 
  } 
 }, 
 mounted:function(){ 
  
 } 
} 
</script> 
  
<style> 
  
</style>

show:

분석:

1.picker는 왼쪽, 중간, 오른쪽의 3개 부분으로 나눌 수도 있습니다. 자세한 내용은 위의 슬롯 객체를 참조하세요. 속성

슬롯 속성의 해당 데이터를 설정하여 배열을 받습니다. 배열은 3개의 객체로 나누어집니다.

값 외에도 flex를 사용할 수도 있습니다(유연한 상자의 flex 값, 1은 남은 공간으로 가득 찼습니다). ), className(슬롯1, 슬롯2, 슬롯3 사용), textAlign(텍스트의 가로 위치 설정, 왼쪽, 가운데, 오른쪽 사용 가능)

2 각 선택기의 기본 높이는 36px

입니다. 예시 3 :picker는 변경 이벤트를 사용합니다

xxx.vue:

<template> 
 <p id="app"> 
  <mt-picker :slots="slots" ></mt-picker> 
   
  <router-view></router-view> 
 </p> 
</template> 
 
<script> 
 
export default { 
 data () { 
  return { 
    slots: 
        [ 
        { 
         flex: 1, 
         values: [&#39;年假&#39;, &#39;事假&#39;, &#39;病假&#39;, &#39;婚假&#39;, &#39;其他&#39;], 
         className: &#39;slot1&#39;, 
         textAlign: &#39;left&#39; 
        }, { 
         pider: true, 
         content: &#39;-&#39;, 
         className: &#39;slot2&#39; 
        }, { 
         flex: 1, 
         values: [&#39;2015-11&#39;, &#39;2015-02&#39;, &#39;2015-03&#39;, &#39;2015-04&#39;, &#39;2015-05&#39;, &#39;2015-06&#39;], 
         className: &#39;slot3&#39;, 
         textAlign: &#39;right&#39; 
        } 
       ] 
  } 
 }, 
 mounted:function(){ 
 
 } 
} 
</script> 
 
<style> 
 
</style>

show:

실행 후 변경 이벤트는 자동으로 콘텐츠를 두 번 출력합니다

이것은 두 개의 선택기가 있기 때문입니다. 콘텐츠 선택

분석:

열 중 하나를 스크롤하면 변경 이벤트가 트리거됩니다

예 4: 변경 이벤트로 선택한 콘텐츠 가져오기

xxx.vue:

<template> 
 <p id="app"> 
  <mt-picker :slots="slots" @change="onValuesChange" ></mt-picker>  
  <router-view></router-view> 
 </p> 
</template> 
 
<script> 
 
export default { 
 name: &#39;app&#39;, 
 data () { 
  return { 
    slots: 
        [ 
        { 
         flex: 1, 
         values: [&#39;年假&#39;, &#39;事假&#39;, &#39;病假&#39;, &#39;婚假&#39;, &#39;其他&#39;], 
         className: &#39;slot1&#39;, 
         textAlign: &#39;left&#39; 
        }, { 
         pider: true, 
         content: &#39;-&#39;, 
         className: &#39;slot2&#39; 
        }, { 
         flex: 1, 
         values: [&#39;2015-11&#39;, &#39;2015-02&#39;, &#39;2015-03&#39;, &#39;2015-04&#39;, &#39;2015-05&#39;, &#39;2015-06&#39;], 
         className: &#39;slot3&#39;, 
         textAlign: &#39;right&#39; 
        } 
       ] 
  } 
 }, 
 mounted:function(){ 
 
 }, 
 methods: { 
    onValuesChange(picker, values) { 
      console.log(picker) 
      console.log(values) 
  } 
 } 
} 
</script> 
 
<style> 
 
</style>

show:

피커를 열었을 때 아무런 작업도 없으면 변경 이벤트가 자동으로 먼저 실행되고 첫 번째 옵션의 내용이 선택됩니다

선택한 콘텐츠를 변경하려면 데이터를 데이터로 출력하세요.

예 5: 선택기 수 표시

xxx.vue:

<template> 
 <p id="app"> 
  <mt-picker :slots="slots" @change="onValuesChange" ></mt-picker>  
  <router-view></router-view> 
 </p> 
</template> 
 
<script> 
 
export default { 
 name: &#39;app&#39;, 
 data () { 
  return { 
    value:&#39;&#39;, 
    slots: 
        [ 
          { 
            values: [&#39;年假&#39;, &#39;事假&#39;, &#39;病假&#39;, &#39;婚假&#39;, &#39;其他&#39;, &#39;婚假&#39;] 
          } 
        ] 
  } 
 }, 
 mounted:function(){ 
 
 }, 
 methods: { 
    onValuesChange(picker, values) { 
   this.value = values[0]; 
   console.log(this.value) 
} 
 } 
} 
</script> 
 
<style> 
 
</style>

show:

사용: visible-item-count="1" 이후 표시 가능한 피커 수는 1

vue mint-ui의 선택기 사용 소개

관련 기사