<template> <div class="xtx-numbox"> <div class="label">数量</div> <div class="numbox"> <a href="javascript:;">-</a> <input type="text" readonly value="1"> <a href="javascript:;">+</a> </div> </div> </template> <script> export default { name: 'XtxNumbox' } </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>
// 在数量选择组件中 <template> <div class="xtx-numbox"> <div class="label">{{label}}</div> <div class="numbox"> <a href="javascript:;" @click="changeNum(-1)">-</a> <input type="text" readonly :value="num"> <a href="javascript:;" @click="changeNum(1)">+</a> </div> </div> </template>
代码逻辑
<script> export default { name: 'XtxNumbox', props: { label: { type: String, default: '数量' }, modelValue: { type: Number, default: 1 }, min: { type: Number, default: 0 }, max: { type: Number, default: 10000 } }, setup (props, { emit }) { const changeNum = (step) => { let t = step + props.modelValue // 3. 得到将要改变的值,如果值不合法终止程序 if (t < props.min || t > props.max) return emit('update:modelValue', t) } return { changeNum } } }
1.导入
<XtxNumbox label="数量" v-model="num" :min="0" :max="goodsData.inventory" />
2.定义数据项
setup () { // 显示数量组件中的num const num = ref(1) return { num } }