vue3封裝計(jì)時(shí)器組件的方法
背景
在一些商城類網(wǎng)頁(yè)中打開(kāi)商品詳情都會(huì)有一個(gè)計(jì)數(shù)器來(lái)選擇購(gòu)買的數(shù)量,這樣的計(jì)時(shí)器不僅會(huì)在商品詳情頁(yè)面顯示還會(huì)在購(gòu)物車?yán)锩嬗?,那就可以把?jì)時(shí)器封裝成組件,以便于更好的復(fù)用以及后期維護(hù)
落地代碼
<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 來(lái)實(shí)現(xiàn)雙向綁定 import { useVModel } from '@vueuse/core' export default { name: 'XtxNumbox', props: { modelValue: { type: Number, default: 1 } }, setup(props, { emit }) { // useVModel 方法接收三個(gè)參數(shù), // 參數(shù)一:自定義屬性 props 接收父組件傳遞過(guò)來(lái)的通過(guò) v-model 雙向綁定的數(shù)據(jù) // 參數(shù)二:props 里面需要傳遞的數(shù)據(jù) // 參數(shù)三:emit 綁定的數(shù)據(jù)需要通過(guò) 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>
效果
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)監(jiān)聽(tīng)某個(gè)元素滾動(dòng),親測(cè)有效
這篇文章主要介紹了Vue實(shí)現(xiàn)監(jiān)聽(tīng)某個(gè)元素滾動(dòng),親測(cè)有效!具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07使用VUE和webrtc-streamer實(shí)現(xiàn)實(shí)時(shí)視頻播放(監(jiān)控設(shè)備-rtsp)
WebRTC-streamer是一項(xiàng)使用簡(jiǎn)單機(jī)制通過(guò)WebRTC流式傳輸視頻捕獲設(shè)備和RTSP源的實(shí)驗(yàn),下面這篇文章主要給大家介紹了關(guān)于如何使用VUE和webrtc-streamer實(shí)現(xiàn)實(shí)時(shí)視頻播放(監(jiān)控設(shè)備-rtsp)的相關(guān)資料,需要的朋友可以參考下2022-11-11vue 設(shè)置 input 為不可以編輯的實(shí)現(xiàn)方法
今天小編就為大家分享一篇vue 設(shè)置 input 為不可以編輯的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09Vue.js中數(shù)組變動(dòng)的檢測(cè)詳解
這篇文章給大家主要介紹了Vue.js中數(shù)組變動(dòng)的檢測(cè),文中給出了詳細(xì)的示例代碼和過(guò)程介紹,相信會(huì)對(duì)大家的理解和學(xué)習(xí)很有幫助,有需要的朋友們下面來(lái)一起看看吧。2016-10-10Vue-Ant Design Vue-普通及自定義校驗(yàn)實(shí)例
這篇文章主要介紹了Vue-Ant Design Vue-普通及自定義校驗(yàn)實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10