步骤条组件封装直接可用-微信小程序-vantweapp

<!--components/operation-log/index.wxml-->
<view class="operate-log-whole-wrapper">
    <view bindtap="onChange">
        <view class="flex jus-between padding-bottom-10">
            <view class="flex">
                <view>操作日志</view>
                <view class="flex margin-left-20" catchtap="remarkDisplay">
                    <van-icon name="records" style="font-size: 34rpx;" />
                    <view class="font-size-34">备注</view>
                </view>
            </view>
            <view>{{isFold?'展开':'折叠'}}</view>
        </view>
    </view>

    <view wx:if="{{operateLogData.length!=0}}" class="padding-top-20 margin-top-10"  style="height:{{isFold ? '0rpx' : 'auto'}};overflow:{{isFold ? 'hidden' : ''}}">
        <view class="operate-border-left-line" wx:for="{{operateLogData}}">
            <view class="flex margin-left-30">
                <van-icon name="circle" class="operate-border-left-line-circle" />
                <view>{{item.createDatetime}}</view>
            </view>
            <view class="flex jus-between margin-top-10 padding-bottom-10 margin-left-30">
                <view class="font-weight-700">{{item.business}}</view>
                <view class="grey">操作人：{{item.creatorName}}</view>
            </view>
            <view class="content-twoRows grey margin-left-30">{{item.businessContent}}</view>
            <view style="height: 20rpx;"></view>
        </view>
        <view style="height: 40rpx;"></view>
    </view>
</view>


<van-dialog use-slot title="备注" show="{{ RemarkShow }}" show-confirm-button="{{false}}">
    <view class="margin-all-20">
        <textarea class="grey" value="{{addRemarkParam}}" bindinput="remarkInput" auto-height placeholder="请输入文字描述" maxlength="200" style="width: 100%;" />
    </view>
    <view class="flex jus-around padding-all-20">
        <view class="dialog-foot-cancel" bindtap="RemarkCancel">取消</view>
        <view class="dialog-foot-confirm" bindtap="confirmRemarkShow">确定</view>
    </view>
</van-dialog>

less样式

/* components/operation-log/index.wxss */
@import "/styles/cpn-default-style.less";
@import "/styles/index.less";

.operate-log-whole-wrapper {
    background-color: #fff;
    padding-left: 20rpx;
    padding-top: 20rpx;
    padding-right: 40rpx;
    font-size: 28rpx;
    .operate-border-left-line {
        position: relative;
        border-left: 2rpx solid rgb(12, 96, 223);
        margin-left: 40rpx;
        .operate-border-left-line-circle {
            position: absolute;
            left: -18rpx;
            background-color: #fff;
            font-size: 34rpx;
            color: rgb(12, 96, 223);
        }
        .content-twoRows {
            flex: 1;
            word-break: break-all;
            text-overflow: ellipsis;
            overflow: hidden;
            line-height: 34rpx;
        }
    }
}
.dialog-foot-cancel{
    width: 50%;
    text-align: center;
}
.dialog-foot-confirm{
    width: 50%;
    text-align: center;
}
.margin-top-10 {
    margin-top: 10rpx;
}
.margin-left-30{
    margin-left: 30rpx;
}
.padding-bottom-10{
   padding-bottom: 10rpx;
}
.padding-top-20 {
    padding-top: 20rpx;
}
.grey{
    color: grey;
}
.margin-left-20{
    margin-left: 20rpx;
}
.font-weight-700{
    font-weight: 700;
}
.margin-all-20{
    margin: 20rpx;
}
.padding-all-20{
    padding: 20rpx;
}

{
    "component": true,
    "usingComponents": {
        "van-icon": "@vant/weapp/icon/index",
        "van-dialog": "@vant/weapp/dialog/index"
    }
}

index.js

// components/operation-log/index.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        operateLogData:{
            // type 要接收的数据的类型
            type:Array,
            // value默认值（没穿是的默认值）
            value:[]
      },
    },

    /**
     * 组件的初始数据
     */
    data: {
        // 是否折叠
        isFold: false,
        // 备注事件是否显示
        RemarkShow: false,
        // 输入框事件
        addRemarkParam: ""
    },

    /**
     * 组件的方法列表
     */
    methods: {
        // 输入按钮input事件
        remarkInput(e) {
            console.log(e, 9999)
            this.setData({
                addRemarkParam: e.detail.value
            })
        },
        // 折叠打开
        onChange() {
            console.log(111111)
            this.setData({
                isFold: !this.data.isFold,
            });
        },
        // 备注弹框事件
        remarkDisplay() {
            this.setData({
                RemarkShow: true,
                "addRemarkParam": "",
            })
        },
        // 弹框取消按钮事件
        RemarkCancel() {
            this.setData({
                RemarkShow: false,
            })
        },

        //   弹框确认事件
        confirmRemarkShow() {
            this.setData({
                RemarkShow: false,
            })
            //回显弹窗输入内容
            this.triggerEvent("feedBackRemark", this.data.addRemarkParam)
        }
    }
})