溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“Vue封裝數字框組件如何實現”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
（1）準備基本結構
<script lang="ts" setup name="Numbox">
//
</script>
<template>
<div class="numbox">
<div class="label">數量</div>
<div class="numbox">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >-</a>
<input type="text" readonly value="1" />
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >+</a>
</div>
</div>
</template>
<style scoped lang="less">
.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>（2）全局注冊
import Numbox from '@/components/numbox/index.vue'
export default {
install(app: App) {
app.component('Numbox', Numbox)
},
}（3）提供類型聲明
import Numbox from '@/components/numbox/index.vue'
declare module 'vue' {
export interface GlobalComponents {
Numbox: typeof Numbox
}
}
export {}（4）渲染
<div class="spec"> <!-- 數字選擇框 --> <XtxNumbox></XtxNumbox> </div>
效果
目標：掌握vue3.0的v-model語法糖原理
在vue2.0中v-mode語法糖簡寫的代碼 <Son :value="msg" @input="msg=$event" />
在vue3.0中v-model語法糖有所調整：<Son :modelValue="msg" @update:modelValue="msg=$event" />
演示代碼：
<script lang="ts" setup>
defineProps({
money: {
type: Number,
default: 0,
},
})
const emit = defineEmits(['update:money'])
</script>
<template>
<h4>子組件-{{ money }}</h4>
<button @click="emit('update:money', money + 1)">+1</button>
</template>
<style scoped lang="less"></style>總結： vue3.0封裝組件支持v-model的時候，父傳子:modelValue 子傳父 @update:modelValue
補充： vue2.0的 xxx.sync 語法糖解析 父傳子 :xxx 子傳父 @update:xxx 在vue3.0 使用 v-model:xxx 代替。
大致功能分析：
默認值為1
可限制最大最小值
點擊-就是減1 點擊+就是加1
需要完成v-model得實現
存在無label情況
<script lang="ts" setup name="Numbox">
const props = defineProps({
modelValue: {
type: Number,
default: 1,
},
min: {
type: Number,
default: 1,
},
max: {
type: Number,
default: 20,
},
showLabel: {
type: Boolean,
default: false,
},
})
const emit = defineEmits<{
(e: 'update:modelValue', value: number): void
}>()
const add = () => {
if (props.modelValue >= props.max) return
emit('update:modelValue', props.modelValue + 1)
}
const sub = () => {
if (props.modelValue <= props.min) return
emit('update:modelValue', props.modelValue - 1)
}
</script>
<template>
<div class="numbox">
<div class="label" v-if="showLabel"><slot>數量</slot></div>
<div class="numbox">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="sub">-</a>
<input type="text" readonly :value="modelValue"/>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="add">+</a>
</div>
</div>
</template>
<style scoped lang="less">
.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>動態控制禁用效果
<script lang="ts" setup name="Numbox">
const props = defineProps({
modelValue: {
type: Number,
default: 1,
},
min: {
type: Number,
default: 1,
},
max: {
type: Number,
default: 20,
},
showLabel: {
type: Boolean,
default: false,
},
})
const emit = defineEmits<{
(e: 'update:modelValue', value: number): void
}>()
const add = () => {
if (props.modelValue >= props.max) return
emit('update:modelValue', props.modelValue + 1)
}
const sub = () => {
if (props.modelValue <= props.min) return
emit('update:modelValue', props.modelValue - 1)
}
</script>
<template>
<div class="numbox">
<div class="label" v-if="showLabel"><slot>數量</slot></div>
<div class="numbox">
+ <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="sub" :class="{not:props.modelValue <= props.main}">-</a>
<input type="text" readonly :value="modelValue" />
+ <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="add" :class="{not:props.modelValue >= props.max}">+</a>
</div>
</div>
</template>
<style scoped lang="less">
.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;
+ &.not {
+ cursor: not-allowed;
+ }
&: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>使用組件：src/views/goods/index.vue
<script lang="ts" setup name="Numbox">
import {ref} from "vue";
const count = ref(1)
</script>
<!-- 商品信息 -->
<div class="goods-info">
<!-- 數字選擇框 -->
<XtxNumbox v-model="count" min:"1" :max="20" ></XtxNumbox>
</div>思考：
我們的輸入框不僅能點擊加減還可以輸入數字，如果用戶通過輸入框輸入非數字會出現什么問題?
優化代碼
<script lang="ts" setup name="Numbox">
const props = defineProps({
modelValue: {
type: Number,
default: 1,
},
min: {
type: Number,
default: 1,
},
max: {
type: Number,
default: 20,
},
showLabel: {
type: Boolean,
default: false,
},
})
+const { proxy } = getCurrentInstance() as ComponentInternalInstance
const emit = defineEmits<{
(e: 'update:modelValue', value: number): void
}>()
const add = () => {
if (props.modelValue >= props.max) return
emit('update:modelValue', props.modelValue + 1)
}
const sub = () => {
if (props.modelValue <= props.min) return
emit('update:modelValue', props.modelValue - 1)
}
+const handleChange = (e: Event) => {
+ // 通過類型斷言，讓ts知道目前元素的類型
+ const element = e.target as HTMLInputElement
+ let value = +element.value
+ if (isNaN(value)) value = 1
+ if (value >= props.max) value = props.max
+ if (value <= props.main) value = props.main
+ emit('update:modelValue',value)
+ // 強制刷新
+ proxy?.$forceUpdate()
}
</script>
<template>
<div class="numbox">
<div class="label" v-if="showLabel"><slot>數量</slot></div>
<div class="numbox">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="sub" :class="{not:props.modelValue <= props.main}">-</a>
<input type="text" readonly :value="modelValue" @change="handleChange($event)"/>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="add" :class="{not:props.modelValue >= props.max}">+</a>
</div>
</div>
</template>
<style scoped lang="less">
.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;
&.not {
cursor: not-allowed;
}
&: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>“Vue封裝數字框組件如何實現”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
