利用mui-number定制封装numberbox
程序员文章站
2022-07-02 14:18:20
<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>
本文地址：https://blog.csdn.net/youngAda/article/details/109248751