vue3封裝計時器組件的方法
更新時間:2021年09月28日 08:37:49 作者:新時代農(nóng)民工Top
這篇文章主要為大家詳細介紹了vue3封裝計時器組件的方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
背景
在一些商城類網(wǎng)頁中打開商品詳情都會有一個計數(shù)器來選擇購買的數(shù)量,這樣的計時器不僅會在商品詳情頁面顯示還會在購物車?yán)锩嬗?,那就可以把計時器封裝成組件,以便于更好的復(fù)用以及后期維護
落地代碼
<template> <div class="xtx-numbox"> <div class="label"><slot /></div> <div class="numbox"> <a href="javascript:;" @click="handleSub(-1)">-</a> <input type="text" readonly :value="num" /> <a href="javascript:;" @click="handleSub(1)">+</a> </div> </div> </template> <script> // 第三方方法 useVModel 來實現(xiàn)雙向綁定 import { useVModel } from '@vueuse/core' export default { name: 'XtxNumbox', props: { modelValue: { type: Number, default: 1 } }, setup(props, { emit }) { // useVModel 方法接收三個參數(shù), // 參數(shù)一:自定義屬性 props 接收父組件傳遞過來的通過 v-model 雙向綁定的數(shù)據(jù) // 參數(shù)二:props 里面需要傳遞的數(shù)據(jù) // 參數(shù)三:emit 綁定的數(shù)據(jù)需要通過 emit 事件通知父組件 const num = useVModel(props, 'modelValue', emit) const handleSub = n => { if (n < 0) { num.value -= 1 if (props.modelValue === 1) { num.value = 1 } } else { num.value += 1 } } return { handleSub, num } } } </script> <style scoped lang="less"> .xtx-numbox { display: flex; align-items: center; .label { width: 60px; color: #999; padding-left: 10px; } .numbox { width: 120px; height: 30px; border: 1px solid #e4e4e4; display: flex; > a { width: 29px; line-height: 28px; text-align: center; background: #f8f8f8; font-size: 16px; color: #666; &:first-of-type { border-right: 1px solid #e4e4e4; } &:last-of-type { border-left: 1px solid #e4e4e4; } } > input { width: 60px; padding: 0 5px; text-align: center; color: #666; } } } </style>
使用
<XtxNumbox v-model="num">數(shù)量</XtxNumbox>
效果
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue實現(xiàn)監(jiān)聽某個元素滾動,親測有效
這篇文章主要介紹了Vue實現(xiàn)監(jiān)聽某個元素滾動,親測有效!具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07使用VUE和webrtc-streamer實現(xiàn)實時視頻播放(監(jiān)控設(shè)備-rtsp)
WebRTC-streamer是一項使用簡單機制通過WebRTC流式傳輸視頻捕獲設(shè)備和RTSP源的實驗,下面這篇文章主要給大家介紹了關(guān)于如何使用VUE和webrtc-streamer實現(xiàn)實時視頻播放(監(jiān)控設(shè)備-rtsp)的相關(guān)資料,需要的朋友可以參考下2022-11-11vue 設(shè)置 input 為不可以編輯的實現(xiàn)方法
今天小編就為大家分享一篇vue 設(shè)置 input 為不可以編輯的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09