利用vue3自己实现计数功能组件封装实例

2022-04-15 0 1,034
目录
  • 前言
  • 一、封装的意义
  • 二、如何封装?
    • 1. 思路
    • 2. 准备
    • 2. 使用
  • 三、 效果演示
    • 总结

      前言

      本文将带你用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:;" rel="external nofollow"  rel="external nofollow"  @click="toggle(-1)" :class="{notallow: modelValue === 1}">-</a>
            <input type="text" readonly :value="num">
            <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  @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——自己实现放大镜效果

      2. 使用

      在任意.vue结尾的文件中使用即可

      代码如下(示例):

      组件标签内容会覆盖公共组件中默认插槽中的内容

      inventory为库存数量,即用户可以选择数量的最大数值(这里先给一个固定数值,给大家演示一下)

      <template>
        <div class="home-banner">
          <MyNumbox v-model="num" :inventory="5">件数:</MyNumbox>
        </div>
      </template>
      
      <script>
      import { ref } from 'vue'
      export default {
        name: 'App',
        setup () {
          const num = ref(1)
          return { num }
        }
      }
      </script>
      
      <style lang="less">
      .home-banner {
        margin: 100px auto;
        width: 500px;
        height: 100px;
      }
      </style>
      
      

      三、 效果演示

      可以看到已经实现了我们的需求,当达到最大值或者最小值后,点击按钮就会禁用。

      利用vue3自己实现计数功能组件封装实例

      总结

      到此这篇关于利用vue3自己实现计数功能组件封装实例的文章就介绍到这了,更多相关vue3计数功能组件内容请搜索NICE源码以前的文章或继续浏览下面的相关文章希望大家以后多多支持NICE源码!

      免责声明:
      1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

      2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
      如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
      如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

      NICE源码网 JavaScript 利用vue3自己实现计数功能组件封装实例 https://www.niceym.com/24794.html