微信小程序之封装带输入框的modal组件

最新推荐文章于 2024-08-06 09:03:34 发布

小轩一直在路上

最新推荐文章于 2024-08-06 09:03:34 发布

阅读量2.2k

点赞数 3

分类专栏：小程序

本文链接：https://blog.csdn.net/qq_43641373/article/details/107812436

版权

小程序专栏收录该内容

6 篇文章 0 订阅

订阅专栏

由于原生小程序自带modal不可输入，自己又不想因为一个可输入modal去特地引用一个ui框架，而且ui框架的组件风格并不一定和自己的项目一致，所以最后想最好的方法就自己封装两个，比较简单可供参考，之后需要用到类似的就可直接引用或在其基础上进行改动，方便多了。

组件一：

<!-- 
	wxml
	1.mask是遮罩层，防止弹窗时用户点击其他处，modalShow控制整个组件的显隐；
	2.modal是带输入框的modal容器
		2-1.getValue事件 获取输入值
		2-2.modalCancel和modalConfirm事件 取消确认操作
		2-3.hoverstyle按需可进行触碰样式设置 
-->
<view class="mask" hidden="{{modalShow}}">
    <view class="modal" >
        <view class="modal_top">
            <view class="t1">请输入内容</view>
            <textarea class="t2" value="{{modalValue}}"  bindinput="getValue"/>
        </view>
        <view class="modal_bottom">
            <view class="b1" hover-class='hoverstyle' bindtap="modalCancel">取消</view>
            <view class="b2" hover-class='hoverstyle' bindtap="modalConfirm">确认</view>
        </view>
    </view>
</view>

/* wxss
 * 1.这里用来less语法写wxss样式的，这样模仿html的嵌套组织使代码简洁易读易维护
*/
.mask {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .5);
        .modal {
            border-radius: 18rpx;
            background-color: #fff;
            height: 280rpx;
            width: 600rpx;
            position: absolute;
            top: 20%;
            left: 50%;
            transform: translateX(-50%);
            .modal_top {
                border-bottom: 2rpx solid #eee;
                height: 195rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                .t1 {
                    flex: 1;
                    text-align: center;
                    line-height: 38rpx;
                  }
                  .t2 {
                    flex: 2;
                    border: 2rpx solid #b9b9b9;
                    width: 80%;
                    margin: 10rpx 0;
                    line-height: 30rpx;
                  }
              }
            .modal_bottom {
               height: 85rpx;
               display: flex;
               view {
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 36rpx;
                font-weight: 450;
                color: rgba(0, 0, 0, .7);
              }
              .b1 {
                border-right: 2rpx solid #eee;
              }
              .hoverstyle {
                background-color: #f6f6f6;
                color: rgba(0, 0, 0, 1);
              }
            }
        }

  }

效果图：
在这里插入图片描述

组件二

<!-- wxml -->
<view class="mask" hidden="{{modalShow}}">
    <view class="modal" >
        <view class="modal_top">
            <image class="cancel" mode="widthFix" src="../../images/cancel.png" bindtap="modalCancel"/>
            <view class="title">信息</view>
        </view>
        <textarea class="content" placeholder="请输入内容..." placeholder-style="color:#d4d4d4;" value="{{modalValue}}"  bindinput="getValue"/>
        <view class="btn"  bindtap="modalConfirm">确认</view>
    </view>
</view>

/* wxss */
.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,.4);
        .modal {
            border-radius: 14rpx;
            background-color: #fff;
            height: 429rpx;
            width: 558rpx;
            position: absolute;
            top: 13%;
            left: 50%;
            transform: translateX(-50%);
            padding: 0 32rpx;
            .modal_top {
                height: 79rpx;
                position: relative;
                .cancel {
                    width: 35rpx;
                    position: absolute;
                    top: 20rpx;
                    left: -7rpx;
                  }
                  .title {
                    line-height: 79rpx;
                    text-align: center;
                    font-size: 30rpx;
                  }
              }
              .content {
                  width:100%;
                  height: 232rpx;
                  background-color: #ebebebe3;
                  padding: 16rpx 18rpx;
                  border-radius: 18rpx;
              }
              .btn {
                  border-radius: 16rpx;
                  background-color: #fff600;
                  height: 75rpx;
                  line-height: 75rpx;
                  text-align: center;
                  margin: 18rpx 0 24rpx;
                  font-size: 30rpx;
              }
            
        }

  }