关注前端 | 前端博客
当前位置: uni-app > count插件-uniApp

count插件-uniApp

2019-05-26 分类:uni-app 作者:管理员 阅读(845)

计数插件,uni-app官方也提供了,但是样式功能可能满足不了实际项目需求,于是就扩展了一个购物数量加减的计数插件。

插件代码

<template>
    <view class="container">
        <view class="numbox-minus" @click="calcValue('subtract')">
            <text class="txt" :class="minDisabled?'numbox-disabled': ''" >-</text>
        </view>
        <input
            class="numbox-value"
            type="number"
            :disabled="disabled"
            :value="inputValue"
            @blur="onBlur"
        >
        <view class="numbox-plus" @click="calcValue('add')">
            <text class="txt" :class="maxDisabled?'numbox-disabled': ''" >+</text>
        </view>
    </view>
</template>
<script>
    export default {
        name: 'count',
        props: {
            isMax: {
                type: Boolean,
                default: false
            },
            isMin: {
                type: Boolean,
                default: false
            },
            index: {
                type: Number,
                default: 0
            },
            value: {
                type: Number,
                default: 0
            },
            min: {
                type: Number,
                default: -Infinity
            },
            max: {
                type: Number,
                default: Infinity
            },
            step: {
                type: Number,
                default: 1
            },
            disabled: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                inputValue: this.value,
                minDisabled: false,
                maxDisabled: false
            }
        },
        created(){
            this.maxDisabled = this.isMax;
            this.minDisabled = this.isMin;
        },
        computed: {

        },
        watch: {
            inputValue(number) {
                const data = {
                    number: number,
                    index: this.index
                }
                this.$emit('eventChange', data);
            }
        },
        methods: {
            calcValue(type) {
                const scale = this.getDecimalScale();
                let value = this.inputValue * scale;
                let newValue = 0;
                let step = this.step * scale;
               
                if(type === 'subtract'){
                    newValue = value - step;
                    if (newValue <= this.min){
                        this.minDisabled = true;
                    }
                    if(newValue < this.min){
                        newValue = this.min
                    }
                    if(newValue < this.max &&this.maxDisabled === true){
                        this.maxDisabled = false;
                    }
                }else if(type === 'add'){
                    newValue = value + step;
                    if (newValue >= this.max){
                        this.maxDisabled = true;
                    }
                    if(newValue > this.max){
                        newValue = this.max
                    }
                    if(newValue > this.min && this.minDisabled === true){
                        this.minDisabled = false;
                    }
                }
                if(newValue === value){
                    return;
                }
                this.inputValue = newValue / scale;
            },
            getDecimalScale() {
                let scale = 1;
                // 浮点型
                if (~~this.step !== this.step) {
                    scale = Math.pow(10, (this.step + '').split('.')[1].length);
                }
                return scale;
            },
            onBlur(event) {
               
                let value = event.detail.value;

                if (!value) {//失去没有值
                console.log(this.min)
                    this.inputValue = 0;
                    this.minDisabled = true ;
                    this.maxDisabled = false;
                    return
                }
                //失去焦点有值
               
                value = +value;
               
                if (value > this.max) {
                    value = this.max;
                    this.maxDisabled = true;
                    this.minDisabled = false
                } else if (value < this.min) {
                    value = this.min
                    this.minDisabled = true ;
                }else if(value > this.min && value < this.max){
                    this.maxDisabled = false;
                    this.minDisabled = false
                }
                this.inputValue = value
            }
        }
    }
</script>
<style>
    .container {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 230upx;
        height: 70upx;
        background:#fff;
   }

    .numbox-minus,
    .numbox-plus {
        margin: 0;
        background-color: #eee;
       width: 70upx;
        height: 100%;
        line-height: 70upx;
        text-align: center;
        position: relative;
    }
    .numbox-minus .txt,
    .numbox-plus .txt{
        font-size: 36upx;
        color: #555;
   }

    .numbox-minus {
        border-right: none;
        border-top-left-radius: 6upx;
        border-bottom-left-radius: 6upx;
    }

    .numbox-plus {
        border-left: none;
        border-top-right-radius: 6upx;
        border-bottom-right-radius: 6upx;
    }

    .numbox-value {
        position: relative;
        background-color: #EEEEEE;
       width: 90upx;
        height: 68upx;
        text-align: center;
        padding: 0;
        font-size: 30upx;
        margin: 0 10upx;
    }
    .numbox-disabled.txt {
        color: #d6d6d6;
   }
</style>

使用插件

<template>
    <view class="content">
        <view v-for="(item, index) in cartList" :key="index" class="list-item">
            <count
                class="step"
                :min="1"
                :max="item.stock"
                :value="item.number>item.stock?item.stock:item.number"
                :isMax="item.number>=item.stock?true:false"
                :isMin="item.number===1"
                :index="index"
                @eventChange="numberChange"
            ></count>
        </view>
    </view>
</template>
<script>
    import count from '@/components/count/index.vue'
    export default {
        components: {
            count
        },
        data() {
            return {
                cartList:[{
                    stock: 15,
                    number: 1
                }]
            }
        },
        onLoad() {

        },
        methods: {
            //数量
            numberChange(data){
                console.log(data)
            }
        }
    }
</script>

<style>
    .content {
        text-align: center;
        height: 400upx;
    }
</style>

「三年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(2) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
2

感谢您让我添加个鸡腿!

支付宝
微信

上一篇:

下一篇:

共有 0 条评论 - count插件-uniApp

博客简介

一个不知名的前端菜鸟,梦想能够飞上青天!
掘金 思否 npm github

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线