AI 助理
文档备案控制台
开发者社区 云计算 文章 正文

【Vue3】封装数字框组件

2023-10-17 256
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【Vue3】封装数字框组件

数量选择组件-基本结构

（1）准备基本结构

<script lang="ts" setup name="Numbox">
//
</script>
<template>
  <div class="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>
<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>

效果

数量选择组件-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>
  <h3>子组件-{{ money }}</h3>
  <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:;" @click="sub">-</a>
      <input type="text" readonly :value="modelValue"/>
      <a href="javascript:;" @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:;" @click="sub" :class="{not:props.modelValue <= props.main}">-</a>
      <input type="text" readonly :value="modelValue" />
     + <a href="javascript:;" @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:;" @click="sub" :class="{not:props.modelValue <= props.main}">-</a>
      <input type="text" readonly :value="modelValue" @change="handleChange($event)"/>
      <a href="javascript:;" @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>


itpeilibo
目录
相关文章
34789737
|
11月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中，兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线，大型项目建议使用Pinia等状态管理工具，确保数据流清晰可控，避免内存泄漏。
34789737
829 2
游客izzodqdjmth2i
|
10月前
|
JavaScript 前端开发 安全
Vue 3
Vue 3以组合式API、Proxy响应式系统和全面TypeScript支持，重构前端开发范式。性能优化与生态协同并进，兼顾易用性与工程化，引领Web开发迈向高效、可维护的新纪元。（238字）
游客izzodqdjmth2i
1248 139
谢妹纸
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
谢妹纸
1531 0
AI侠客
|
10月前
|
缓存 JavaScript 算法
Vue 3性能优化
Vue 3 通过 Proxy 和编译优化提升性能，但仍需遵循最佳实践。合理使用 v-if、key、computed，避免深度监听，利用懒加载与虚拟列表，结合打包优化，方可充分发挥其性能优势。（239字）
AI侠客
645 1
yxybox
|
11月前
|
开发工具 iOS开发 MacOS
基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
最新版研发vite7+vue3.5+pinia3+arco-design仿macos/windows风格网页版OS系统Vite-Vue3-WebOS。
yxybox
1123 11
34789737
|
10月前
|
JavaScript 安全
vue3使用ts传参教程
Vue 3结合TypeScript实现组件传参，提升类型安全与开发效率。涵盖Props、Emits、v-model双向绑定及useAttrs透传属性，建议明确声明类型，保障代码质量。
34789737
718 0
34789737
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些？
虚拟列表在 Vue3 中通过仅渲染可视区域内容，显著提升大数据列表性能，适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景，结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
34789737
1157 1
34789737
|
缓存 JavaScript UED
除了循环引用，Vue3还有哪些常见的性能优化技巧？
除了循环引用，Vue3还有哪些常见的性能优化技巧？
34789737
585 0
34789737
|
JavaScript
vue3循环引用自已实现
当渲染大量数据列表时，使用虚拟列表只渲染可视区域的内容，显著减少 DOM 节点数量。
34789737
291 0
哇塞女孩
|
10月前
|
缓存 JavaScript
vue中的keep-alive问题（2）
vue中的keep-alive问题（2）
哇塞女孩
702 137