利用mui-number定制封装numberbox

最新推荐文章于 2023-07-28 14:25:27 发布

youngAda

最新推荐文章于 2023-07-28 14:25:27 发布

阅读量187

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/youngAda/article/details/109248751

版权

<template>
  <div class="mui-numbox" data-numbox-min="1" :data-numbox-max="max">
    <button class="mui-btn mui-btn-numbox-minus">-</button>
    <input class="mui-input-numbox" type="number" :value="initCount" @change="countChange" ref="count">
    <button class="mui-btn mui-btn-numbox-plus">+</button>
  </div>
</template>

<script>
import mui from '../lib/mui/js/mui.js'
export default {
  props: ['max', 'initCount', 'goods_id'],
  mounted() {
    mui('.mui-numbox').numbox()
  },
  methods: {
    countChange() {
      var num = this.$refs.count.value
      console.log('点击按钮后ref的值：')
      console.log(this.$refs.count.value)
      this.$emit('countChange', { count: num, goods_id: this.goods_id })
    },
  },
}
</script>

<style lang="scss" scoped>
.mui-numbox {
  .mui-btn-numbox-minus {
    width: 0.3rem;
    height: 0.3rem;
  }
}
</style>