本篇内容介绍了“Vue封装数字框组件如何实现”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
数量选择组件-基本结构
（1）准备基本结构
<script lang="ts" setup name="Numbox"> // </script> <template> <div class="numbox"> <div class="label">数量</div> <div class="numbox"> <a href="https://www.maopiaopiao.com">
（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>
效果
数量选择组件-v-model语法糖
目标：掌握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="https://www.maopiaopiao.com">动态控制禁用效果
<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="https://www.maopiaopiao.com">使用组件：
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="https://www.maopiaopiao.com">