|
前言
本文将带你用vue3自己封装一个实现计数功能的全局组件，其应用场景相信各位一看便知，那就是购物网站中常见的数量选择模块，一起来看看如何实现哇
一、封装的意义
- 项目中需要用到的地方较多
- 模块化开发，降低了代码冗余，是开发更加高效
- 一次封装，到处使用
二、如何封装？
1. 思路
使用vue3中v-model来完成父子组件之间的相互传值，本文章使用vueuse/core中封装好的useVModel来实现这一功能
将需要控制的值从封装的公共组件中抛出去
2. 准备
安装依赖 项目根目录下打开任意终端，执行npm install @vueuse/core@5.3.0 封装全局组件 还是和之前文章做法一样，通过vue插件的方式注册为全局组件 注：本文将封装的全局组件放至src/components下，各位小伙伴儿可以自己决定文件位置及名字 新建文件my-numbox.vue文件 代码如下（示例）： <template> <div class="my-numbox"> <div class="label"> <slot>数量</slot> </div> <div class="numbox"> <a href="javascript:;" @click="toggle(-1)" :class="{notallow: modelValue === 1}">-</a> <input type="text" readonly :value="num"> <a href="javascript:;" @click="toggle(1)" :class="{notallow: modelValue === inventory}">+</a> </div> </div></template><script>import { useVModel } from '@vueuse/core'export default { name: 'MyNumbox', props: { modelValue: { type: Number, default: 1 }, inventory: { type: Number, required: true } }, setup (props, { emit }) { // 基于第三方的方法控制数据的双向绑定 const num = useVModel(props, 'modelValue', emit) // 控制商品数据的变更操作 const toggle = (n) => { if (n < 0) { // 减一操作 if (num.value > 1) { num.value -= 1 } } else { // 加一操作 if (num.value < props.inventory) { num.value += 1 } } } return { num, toggle } }}</script><style scoped lang="less">.my-numbox { display: flex; align-items: center; .notallow { cursor: not-allowed; } .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; text-decoration: none; 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>通过vue插件方式注册为全局组件的步骤这里就不给大家演示了，各位可以看一下之前的文章
vue3
下载地址:
js实现简单的拖拽效果
vue项目实现文件下载进度条功能 |
