乙個簡單的車牌輸入元件(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...