更新记录

1.0.0（2023-08-11） 下载此版本

首次提交

平台兼容性

常用表单组件（hdfrom）

hdfrom组件、封装了常用的表单组件类型，如：text、select、date、datetime 等组件

属性说明

事件说明

插槽说明

使用说明

:::: code-group ::: code-group-item Template

<<!-- hdform案例 -->
<template>
    <view>
        <!-- 为了防止出现白条 -->
        <view style="height: 24upx"></view>
        <view class="hd-form" v-if="showPage">
            <!-- label -->
            <view class="su-list-cell su-cell">
                <hd-form type="label" title="申请状态" bind-value="编辑中" disabled show-disicon />
            </view>
            <view class="su-list-cell su-cell">
                <hd-form type="datetime" title="创建时间" :bind-value="vMainData['createTime']" disabled show-disicon />
            </view>
            <!-- text -->
            <view class="su-list-cell su-cell">
                <hd-form type="text" title="姓名" placeholder="输入姓名" v-model="vMainData['name']" />
            </view>
            <!-- number -->
            <view class="su-list-cell su-cell">
                <hd-form type="number" title="联系方式" placeholder="输入联系方式" v-model="vMainData['phone']" />
            </view>
            <!-- select -->
            <view class="su-list-cell su-cell">
                <hd-form type="select" title="单选类型" :select-data="selectData" field="name" v-model="vMainData['selectType']" placeholder="请选择单选类型" />
            </view>
            <!-- 多选 -->
            <view class="su-list-cell su-cell">
                <hd-form type="multiple" title="多选类型" :select-data="selectData" field="name" v-model="vMainData['multipleType']" placeholder="请选择多选类型" />
            </view>
            <view class="su-list-cell su-cell">
                <hd-form type="mlabel" title="下拉类型" placeholder="请选择会议号" :select-data="selectData" v-model="vMainData['selectType']" field="name" />
            </view>
            <!-- date -->
            <view class="su-list-cell su-cell">
                <hd-form type="date" title="日期类型" placeholder="请选择日期" is-must v-model="vMainData['dateValue']" />
            </view>
            <!-- datetime -->
            <view class="su-list-cell su-cell">
                <hd-form type="datetime" title="时间类型" placeholder="请选择时间" is-must v-model="vMainData['dateTimeValue']" />
            </view>
            <!-- 省市区 -->
            <view class="su-list-cell su-cell">
                <hd-form type="region" title="省市区" placeholder="请选择省市区" v-model="vMainData['areaValue']" />
            </view>
            <!-- 长文本 -->
            <view class="su-list-cell su-cell">
                <hd-form type="textarea" placeholder="请输入内容" :maxlength="100" v-model="vMainData['textareaValue']" />
            </view>
        </view>
        <!-- 模拟高度 -->
        <view style="height: 130upx"></view>
        <!-- 底部保存 -->
        <view class="su-page-bottom" v-if="showPage">
            <button class="su-button">保存</button>
        </view>
    </view>
</template>
<script>
/**
 * hdform案例
 */
export default {
    data() {
        return {
            showPage: false,
            //select选择数据
            selectData: [],
            // 绑定的p9data数据
            vMainData: {}
        };
    },
    onLoad() {
        this.$nextTick((e) => {
            // 模拟select数据
            let temp = [];
            for (var i in Array.from('hello')) temp.push({ name: `测试选择数据${i * 1 + 1}`, code: `code${i * 1 + 1}` });
            this.selectData = temp;
            this.showPage = true;
        });
    },
    methods: {
        async initData() {}
    }
};
</script>

<style lang="scss">
.hd-form {
    margin: 24upx;
    margin-top: 0;
    border-radius: 24upx !important;
    background-color: #fff;
}
</style>

::: ::::