如何封裝一個滾動選擇元件

語言: CN / TW / HK

theme: channing-cyan highlight: night-owl


小知識,大挑戰!本文正在參與“[程式設計師必備小知識](https://juejin.cn/post/7008476801634680869 "https://juejin.cn/post/7008476801634680869")”創作活動 > TIP 👉 **冤家宜解不宜結,各自回頭看後頭。明·馮夢龍《古今小說》**

前言

在我們日常專案開發中,我們在做移動端的時候會涉及到滾動選擇功能,所以封裝了這個滾動選擇元件。 # 滾動選擇元件 #### 屬性 ##### 1. value * 當前選中值,可以為options中選項物件,也可以為選項的value * 值型別為:字串(選項value)、數值(選項value)或物件(選項物件) ##### 2. options * 選項陣列 * 值型別為陣列,示例:[{ value: '01', text: '男'}, { value: '02', text: '女'}] #### 事件 ##### 1. change * 值發生改變時觸發的事件 * 引數: * currentOption:當前選中選項物件,例:{ value: '01', text: '男'} ##### 2. input * 值發生改變時觸發的事件 * 引數: * value:當前選中選項的value,示例:'01' # 實現scrollSelect.vue ```js ``` # index.js ```js /** * 滾動選擇元件 */ import ScrollSelect from './ScrollSelect.vue' export default ScrollSelect ``` 「歡迎在評論區討論」 #### 希望看完的朋友可以給個贊,鼓勵一下