Vue+Muse-UI写手机页面

最新推荐文章于 2024-05-01 06:25:51 发布

水木Moira

最新推荐文章于 2024-05-01 06:25:51 发布

阅读量915

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_44524835/article/details/107958212

版权

底部导航样式：

 .bottomFixed{
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index:1000;
  }

计数器样式：

（使用文本输入框 mu-text-field 以及按钮 mu-button）
在这里插入图片描述

<mu-list-item>
                        <mu-list-item-content>
                            <mu-list-item-title class="title title-position">Weight</mu-list-item-title>
                        </mu-list-item-content>
                    </mu-list-item>
                    <mu-list-item>
                        <mu-list-item-content class="input-number">
                            <mu-button color="#F4F4F4" class="subtraction-btn">
                                <i></i>
                            </mu-button>
                            <mu-paper :z-depth="2" >
                                <mu-text-field v-model="weightNum" solo full-width ></mu-text-field>
                            </mu-paper>
                            <mu-button color="#F4F4F4" class="addition-btn">
                                <i></i>
                            </mu-button>
                            <i class="unit">kg</i>
                        </mu-list-item-content>
                    </mu-list-item>

样式代码：

.input-number{
        display: flex;
        margin-bottom: 2vh;
        .mu-button{
            min-width: 5vw;
            width: 10vw;
        }
        .mu-paper{
            width: 25vw;
            height: 10vw;
        }
       
        .subtraction-btn{
            i{
                background-image: url(../../assets/express/send_package_minus.png) ;
                background-repeat: no-repeat;
                background-size: contain;
                width: 3vw;
                height: 3vw;
            }
        }
        .addition-btn{
            i{
                background-image: url(../../assets/express/send_package_add.png) ;
                background-repeat: no-repeat;
                background-size: contain;
                width: 3vw;
                height: 3vw;
            }
        }
    }
    .input-number{
        .mu-input.is-solo{
            padding: 0;
        }
        .mu-input-content{
            height: 10vw;
        }
        .mu-raised-button .mu-button-wrapper{
            padding: 0;
        }
        
    }

计数器功能：

在这里插入图片描述
计数器有最小值与最大值的限制，且中间的文本输入框可自己输入值。
1、文本输入框：
限制为数字，并且监听用户输入的重量值，如果超过最大重量，弹出提示，并且将输入框重量置于最大值。如果低于最小重量，弹出提示，并且将输入框重量置于最小值。
具体实现：https://blog.csdn.net/weixin_44524835/article/details/108122882
2、加号、减号按钮：实时监听，为按钮动态绑定class和disabled属性：
以减号按钮为例子：

<mu-button 
     color="#F4F4F4" 
     class="subtraction-btn" 
     :class="{'subtraction-btn-disabled':weightNum <= weightLimit.minWeight}"
     @click="subtraction" 
     :disabled="weightNum <= weightLimit.minWeight">
     <i></i>
 </mu-button>