乙個車牌輸入元件(vue)

2021-10-20 21:33:02 字數 3011 閱讀 8047

乙個簡單的車牌輸入元件(vue)

效果圖:

>取消

"primary" size=

"small" plain @click=

"enterword"

>確認

"keyboard province" id=

"province" v-if=

"plateinput.input.dialo**isible && plateinput.input.type === 'p1'"

>

"i in keyboard.province" @click.stop=

"clickkeyboard(i)"

>

}"delete" @click.stop=

"clickdelete"

>

"icon"

>

刪"keyboard province" id=

"number" v-if=

"plateinput.input.dialo**isible && plateinput.input.type !== 'p1'"

>

"i in keyboard.number" :class=

"" @click.stop=

"clickkeyboard(i)"

>

}"delete deletes" @click.stop=

"clickdelete"

>

"icon"

>

刪event事件:

export

let life =

}export

let event =

, clickkeyboard (val)

, //刪除車牌

clickdelete (),

hiddenkeybord(),

enterword()}

export

letwatch

=

methods方法:

export default class 

hiddenkeybord(

) enterword(

) clickkeyboard (val)

} clickdelete (

)let

type

= this.plateinput.input.type.split(

'p')

[1]if

(type !=

='1')}

setplatenumber (

)else

} setdirectissuedplatenumber (

)else

}}

model資料:

export

let props =

['name','platenumber','norightpart'

]export

let model =

, type:'p1',

dialo**isible:false

}}, keyboard: ,

}export

let computed =

, set

(val)

}}

因為這裡用了獨家的框架,所以根據需要把相應的生命週期函式放到正常的vue專案的位置,把event就寫成正常的函式,methods就是i正常的methods裡面的方法,model就是data裡return的數

Vue 乙個元件引用另乙個元件

有些時候需要這麼做,比如,我想在首頁載入輪播元件,但是又不想全域性註冊 因為不是每個頁面都需要輪播功能 方法1 1 template 2 div 34 testcomponent testcomponent 5div 6template 78 script 9 1.先使用import匯入你要在該元件...

手寫乙個彈窗元件 vue

最近的專案中,需要自己去手寫乙個全域性的彈窗元件,在下面貼出自己的 元件寫的比較簡單 notice.vue 自定義元件的掛載 這裡用了兩種不同的形式,考慮到不同的元件需要特定的方法,比如notice元件只能是乙個單例的模式,所以用了乙個notice.js給他掛載,其他通用的元件可以採用第二種方式進行...

vue如何封裝乙個元件

1.新增子元件 在工程src components目錄下新建乙個資料夾用於存放元件。我封裝了乙個樹元件,資料夾名稱為va tree,裡面有乙個va tree.vue檔案,寫了樹元件的具體內容,包括元件樣式 元件處理邏輯 元件模板等等 子元件中定義的props是父元件需要傳給子元件的資料,在子元件中p...