更新记录

3.0.8（2023-12-05） 下载此版本

• 更新iconfont图标

3.0.7（2023-11-21） 下载此版本

• hf-form-cascader 修改defaultProps的bug

3.0.6（2023-11-21） 下载此版本

• hf-form-cascader 修改defaultProps的bug

平台兼容性

hf-ui

基于 uview-ui 2.0 封装的组件，供项目使用

基本用法

./plugin/hf-ui.js

import Vue from 'vue';
import hfui from '@/uni_modules/hf-ui';

import { loadDictOptions } from './loadData.js';
import { queryPathByIds } from '@/api/index.js';
import configService from '@/common/service/config.service.js';
import store from '@/store/index.js';

Vue.use(hfui);

// 设置处理函数
hfui.setUtils({
    /**
     * 获取字典
     */
    loadDictOptions,
    /**
     * 获取资源绝对路径
     * @param {String} val 相对路径 以','分隔
     */
    async getAbsPath(val) {
        if (!val) return [];
        const res = await queryPathByIds({
            ids: val
        });
        if (!Array.isArray(res.result)) {
            return [];
        }
        return res.result.map(item => {
            const idx = item.fullPath.indexOf('/scpsmip/');
            if(idx != -1) {
                item.fullPath = 'https://www.i-hengfeng.com:48080/io' + item.fullPath.slice(idx);
            }
            return {
                url: item.fullPath, 
                name: item.attachmentName
            };
        });
    },
    /**
     * 图片上传
     * @param {String} path 文件临时路径
     * @param {String} name 文件名
     * @return {Promise}
     */
    uploadFile({ path, name }) {
        return new Promise((resolve, reject) => {
            const token = store.state.user.token;
            let a = uni.uploadFile({
                url: configService.apiUrl + configService.apiPrefix + '/base/baseAttachment/upload',
                filePath: path,
                name: 'file',
                header: {
                    [configService.tokenName]: token,
                },
                formData: {
                    attachmentName: name
                },
                success: (res) => {
                    if (res.statusCode !== 200) {
                        return reject();
                    }
                    const data = JSON.parse(res.data);
                    if (!data.success) {
                        return reject();
                    }
                    resolve({
                        url: data.message,        // 图片绝对路径
                        path: data.result.id    // 相对路径
                    });
                },
                fail: (err) => {
                    reject();
                }
            });
        })
    },
});

main.js

import './plugin/hf-ui.js'

表单组件

表单组件基于公共mixin，公共参数/插槽：

props

slot

说明

1. 重写了label样式的组件
   • hf-form-select
   • hf-form-checkbox
   • hf-form-upload
2. 表单校验的错误提示位置：
   • 默认：内容区域底部（margin-left: labelWidth）
   • 左侧：多选checkbox、图片上传upload、头像avatar、文本域textarea（margin-left: 0;）

hf-form-input 输入框

示例

<hf-form-input
    v-model="model.name"
    label="姓名"
    prop="name"
    :required="!disabled"
    :disabled="disabled"
    placeholder="请输入"
></hf-form-input>

export default {
    data() {
        return {
            model: {
                name: ''
            },
            disabled: false
        };
    }
}

props

hf-form-textarea 文本域

示例

<hf-form-textarea
    v-model="model.introduction"
    label="简介"
    prop="introduction"
    :required="!disabled"
    :disabled="disabled"
    placeholder="请输入"
    :maxlength="500"
    count
></hf-form-textarea>

export default {
    data() {
        return {
            model: {
                introduction: ''
            },
            disabled: false
        };
    }
}

props

slots

hf-form-datetime 时间日期选择器

示例1

<hf-form-datetime
    v-model="model.birthday"
    label="生日"
    prop="birthday"
    :required="!disabled"
    :disabled="disabled"
    placeholder="请选择"
    mode="date"
></hf-form-datetime>

export default {
    data() {
        return {
            model: {
                birthday: ''
            },
            disabled: false
        };
    }
}

示例2

自定义展示部分

<hf-form-datetime v-model="startTime" mode="date">
    <template v-slot:display-section="{ valueName }">{{ valueName || '开始时间' }}</template>
</hf-form-datetime>

props

scoped-slot

hf-form-radio 单选框

示例

<hf-form-radio
    v-model="model.gender"
    label="性别"
    prop="gender"
    :required="!disabled"
    :disabled="disabled"
    dict-code="GENDER"
></hf-form-radio>
<hf-form-radio
    v-model="model.sex"
    label="性别"
    prop="sex"
    :required="!disabled"
    :disabled="disabled"
    :options="options"
></hf-form-radio>

export default {
    data() {
        return {
            model: {
                gender: '',
                sex: '1'
            },
            disabled: false,
            options: [
                { value: '1', label: '男' },
                { value: '2', label: '女' },
            ]
        };
    }
}

props

hf-form-checkbox 复选框

示例

<u-form :model="model">
    <hf-form-checkbox
        v-model="model.str"
        label="多选"
        placeholder="请选择"
        :options="options"
    ></hf-form-checkbox>
</u-form>

export default {
    data() {
        return {
            model: {
                str: '3,5'
            },
            options: [
                { value: '1', label: '吕布吕奉先' },
                { value: '2', label: '赵云赵子龙' },
                { value: '3', label: '典韦' },
                { value: '4', label: '关羽关云长' },
                { value: '5', label: '马超马孟起' },
            ]
        };
    }
}

props

slots

scoped-slot

hf-form-select 列表选择器

示例1

• 通过dict-code传入字典code
• 通过options传入选项

<hf-form-select
    v-model="model.gender"
    label="性别"
    prop="gender"
    :required="!disabled"
    :disabled="disabled"
    placeholder="请选择"
    dict-code="GENDER"
></hf-form-select>
<hf-form-select
    v-model="model.sex"
    label="性别"
    prop="sex"
    :required="!disabled"
    :disabled="disabled"
    placeholder="请选择"
    :options="options"
></hf-form-select>

<script>
export default {
    data() {
        return {
            model: {
                gender: '',
                sex: '1'
            },
            disabled: false,
            options: [
                { value: '1', label: '男' },
                { value: '2', label: '女' },
            ]
        };
    }
}
</script>

示例2

• 右侧弹出框：mode="right"
• 前端搜索：search
• 多选：multiple

<hf-form-select
    v-model="model.interest"
    label="兴趣爱好"
    prop="interest"
    :disabled="disabled"
    placeholder="请选择"
    :options="options"
    mode="right"
    search
    multiple
></hf-form-select>
<script>
export default {
    data() {
        return {
            model: {
                interest: ''
            },
            disabled: false,
            options: [
                { value: '1', label: '羽毛球' },
                { value: '2', label: '跑步' },
                { value: '3', label: '爬山' },
            ]
        };
    }
}
</script>

props

说明：

• 优先级：dictCode > options

slots

scoped-slot

hf-form-tselect 多列..

???

hf-form-multi-column 多列选择器 ..

hf-form-autocomplete 列表选择器

同hf-form-select，数据通过fetchList从外部获取

1. 初始为空，输入关键字搜索后，显示列表
2. 直接显示搜索列表，可输入关键字搜索 (通过 trigger-on-show 控制)
3. 不可搜索 直接显示列表

示例1

<hf-form-autocomplete
    v-model="model.buildingId"
    label="建筑物地址"
    prop="buildingId"
    :required="!disabled"
    :disabled="disabled"
    placeholder="网格名称+道路+门楼牌+小区+幢号"
    :fetchList="getBuildingList"
    search
    defaultItem="defaultBuilding"></hf-form-autocomplete>

export default {
    data() {
        return {
            model: {
                buildingId: '',
                detailAddress: ''
            },
            disabled: false
        };
    },
    computed: {
        defaultBuilding() {
            return {
                label: this.model.detailAddress,
                value: this.model.buildingId
            };
        }
    },
    methods: {
        async getBuildingList(param, pagination) {
            const res = await baBuildingList({ // 建筑物地址 列表
                ...param,
                ...pagination
            });
            if (res.result && Array.isArray(res.result.records)) {
                return {
                    total: res.result.total,
                    records: res.result.records.map(item => ({
                        value: item.id,
                        label: item.detailAddress
                    }))
                };
            }
        },
    }
}

示例2

<hf-form-autocomplete
    v-model="model.articleId"
    label="分页文章列表"
    prop="articleId"
    :disabled="disabled"
    placeholder="请选择"
    :fetch-list="fetchArticleList"
    key-name="title"
    key-value="id"
    search
>
    <template v-slot:item="{ item }">
        <u-text :text="item.title" bold></u-text>
        <u-text :text="item.content" type="info"></u-text>
    </template>
</hf-form-autocomplete>

export default {
    data() {
        return {
            model: {
                articleId: ''
            }
        }
    },
    methods: {
        async fetchArticleList(param, pagination) {
            // param = { keyword: '搜索关键字' }, pagination = { pageNo: 1, pageSize: 20 }
            const records = [];
            for (let i = 0; i < pagination.pageSize; i++) {
                const id = (pagination.pageNo - 1) * pagination.pageSize + i + 1;
                records.push({ id, title: `文章${id}`, content: '文章内容文章内容文章内容...' });
            }
            return {
                total: 160,
                records
            };
        },
    }
}

props

scoped-slot

hf-form-area 省市县

示例

<hf-form-area
    v-model="model.str1"
    label="最后一级"
    placeholder="请选择"
></hf-form-area>
<hf-form-area
    v-model="model.str2"
    label="全路径"
    placeholder="请选择"
    full-path
></hf-form-area>

export default {
    data() {
        return {
            model: {
                str1: '350403',
                str2: '350000,350400,350403'
            }
        };
    }
}

props

hf-form-cascader 级联选择

级联选择

示例

<hf-form-cascader
    v-model="model.cascader"
    label="区域"
    prop="cascader"
    :required="!disabled"
    :disabled="disabled"
    placeholder="请选择"
    :options="options"
></hf-form-cascader>
<hf-form-cascader
    v-model="model.cascader2"
    label="任意一级可选择"
    :options="options"
    select-parent
></hf-form-cascader>

export default {
    data() {
        return {
            model: {
                cascader: ''
            },
            disabled: false,
            options: [{
                    value: '1',
                    text: '一级 1',
                    children: [{
                        value: '1-1',
                        text: '二级 1-1',
                        children: [{
                            value: '1-1-1',
                            text: '三级 1-1-1',
                            children: [{
                                value: '1-1-1-1',
                                text: '四级 1-1-1-1'
                            }]
                        }]
                    }, {
                        value: '1-2',
                        text: '二级 1-2',
                    }]
                }, {
                    value: '2',
                    text: '一级 2',
                    children: [{
                        value: '2-1',
                        text: '二级 2-1'
                    }]
                }
            ]
        };
    }
}

props

scoped-slot

hf-form-tree 树形组件

树形组件 + 右侧弹框 + 搜索

示例1

<hf-form-tree
    v-model="model.key1"
    label="多选"
    placeholder="请选择"
    :options="options"
    :default-props="defaultProps"
    multiple
></hf-form-tree>
<hf-form-tree
    v-model="model.key2"
    label="多选 可选父节点"
    placeholder="请选择"
    :options="options"
    :default-props="defaultProps"
    multiple
    select-parent
></hf-form-tree>
<hf-form-tree
    v-model="model.key3"
    label="多选 可选父节点 父子不互相关联"
    placeholder="请选择"
    :options="options"
    :default-props="defaultProps"
    multiple
    select-parent
    select-strictly
    labelPosition="top"
></hf-form-tree>
<hf-form-tree
    v-model="model.key4"
    label="单选"
    placeholder="请选择"
    :options="options"
    :default-props="defaultProps"
    search
    pinyin
></hf-form-tree>

export default {
    data() {
        return {
            model: {
                key1: '1-1-1-1,1-1-1-3',
                key2: '1-1-1-2',
                key3: '1,1-1-1-2',
                key4: '1-1-1-2',
            },
            defaultProps: {
                text: 'text',
                value: 'value',
                children: 'children'
            },
            options: [{
                    value: '1',
                    text: '一级 1',
                    children: [{
                            value: '1-1',
                            text: '二级 1-1',
                            children: [{
                                    value: '1-1-1',
                                    text: '三级 1-1-1',
                                    children: [
                                        { value: '1-1-1-1', text: '四级 1-1-1-1' },
                                        { value: '1-1-1-2', text: '四级 1-1-1-2' },
                                        { value: '1-1-1-3', text: '四级 1-1-1-3' },
                                    ]
                                }
                            ]
                        }, {
                            value: '1-2',
                            text: '二级 1-2',
                            children: [
                                { value: '1-2-1', text: '三级 1-2-1' },
                                { value: '1-2-2', text: '三级 1-2-2' },
                            ]
                        }
                    ]
                }, {
                    value: '2',
                    text: '一级 2',
                    children: [{
                            value: '2-1',
                            text: '二级 2-1'
                        }, {
                            value: '2-2',
                            text: '二级 2-2',
                            children: [
                                { value: '2-2-1', text: '三级 2-2-1' },
                                { value: '2-2-2', text: '三级 2-2-2' },
                            ]
                        },
                    ]
                }
            ]
        };
    },
    methods: {
        confirm() {
            console.log('--- 打印 --->', uni.$u.deepClone(this.model));
            // 
        },
    }
}

示例2

<hf-form-tree
    v-model="model.key1"
    label="任务下派"
    placeholder="请选择"
    :options="options"
    :default-props="defaultProps"
    multiple
    select-parent
    select-strictly
    last-icon="people"
    last-icon-color="#CCCCCC"
></hf-form-tree>

export default {
    data() {
        return {
            model: {
                key1: '1,1-1-1-1,1-1-3,1-2-2-1',
            },
            defaultProps: {
                text: 'text',
                value: 'value',
                children: 'children',
                noShowLastIcon: 'noShowLastIcon'
            },
            options: [{
                    value: '1',
                    text: '鼓楼区',
                    children: [{
                            value: '1-1',
                            text: '社区名称',
                            children: [{
                                    value: '1-1-1',
                                    text: '第一网格',
                                    children: [
                                        { value: '1-1-1-1', text: '刘一' },
                                        { value: '1-1-1-2', text: '陈二' },
                                    ]
                                }, {
                                    value: '1-1-2',
                                    text: '第二网格',
                                    children: [
                                        { value: '1-1-2-1', text: '张三' },
                                        { value: '1-1-2-2', text: '李四' },
                                        { value: '1-1-2-3', text: '王五' },
                                    ]
                                }, {
                                    value: '1-1-3',
                                    text: '第三网格',
                                    children: [
                                        { value: '1-1-3-1', text: '赵六' },
                                        { value: '1-1-3-2', text: '孙七' },
                                        { value: '1-1-3-3', text: '周八' },
                                    ]
                                }
                            ]
                        }, {
                            value: '1-2',
                            text: '社区名称',
                            children: [{
                                    value: '1-2-1',
                                    text: '第四网格',
                                    children: [
                                        { value: '1-2-1-1', text: '吴九' },
                                        { value: '1-2-1-2', text: '郑十' },
                                    ]
                                }, {
                                    value: '1-2-2',
                                    text: '第五网格',
                                    children: [
                                        { value: '1-2-2-1', text: '张三丰' },
                                        { value: '1-2-2-2', text: '张三丰' },
                                    ]
                                },
                            ]
                        }, {
                            value: '1-3',
                            text: '社区名称(叶子节点 不显示icon)',
                            noShowLastIcon: true
                        }
                    ]
                }, {
                    value: '2',
                    text: '台江区',
                    children: [{
                            value: '2-1',
                            text: '社区名称',
                            children: [
                                { value: '2-1-1', text: '第一网格', noShowLastIcon: true }, 
                                { value: '2-1-2', text: '第二网格', noShowLastIcon: true },
                                { value: '2-1-3', text: '第三网格', noShowLastIcon: true }
                            ]
                        },
                    ]
                }
            ]
        };
    },
}

props

注意：

• defaultProps：同hf-tree.defaultProps

hf-form-location 定位

示例

<hf-form-location label="地点" prop="location" disabled initialize-location v-model="model.location" :latitude.sync="model.latitude" :longitude.sync="model.longitude" placeholder="请选择"></hf-form-location>

export default {
    data() {
        return {
            model: {
                location: '',
                latitude: '',
                longitude: ''
            },
            disabled: false
        };
    }
}

props

coordinateSystem 默认值为中间件hf-middleware配置的coordinateSystem

hf-form-upload 文件上传

文件选择 + 文件上传

示例

<u-form ref="uForm" :model="model" :rules="rules">
    <hf-form-upload
        v-model="model.image"
        label="图片"
        prop="image"
        :required="!disabled"
        :disabled="disabled"
        accept="image"
        :max-count="3"
        biz-path="image"
        :max-size="maxSize"
    ></hf-form-upload>

    <hf-form-upload
        v-model="model.video"
        label="视频"
        prop="video"
        :required="!disabled"
        :disabled="disabled"
        accept="video"
        :max-count="1"
        biz-path="video"
        :max-size="maxSize"
    ></hf-form-upload>

    <hf-form-upload
        v-model="model.media"
        label="图片和视频"
        prop="media"
        :required="!disabled"
        :disabled="disabled"
        accept="media"
        :max-count="3"
        biz-path="media"
        :max-size="maxSize"
    ></hf-form-upload>

    <hf-form-upload
        v-model="model.file"
        label="文件"
        prop="file"
        :required="!disabled"
        :disabled="disabled"
        accept="file"
        :max-count="9"
        biz-path="file"
        :max-size="maxSize"
    ></hf-form-upload>
</u-form>

export default {
    data() {
        return {
            model: {
                image: '',
                video: '',
                media: '',
                file: ''
            },
            rules: {
                // 
            },
            disabled: false,
            maxSize: 5 * 1024 * 1024, // 5M
        };
    }
}

props

slots

hf-form-avatar 头像

头像选择、头像上传组件，点击头像，可重新选择头像

示例

<hf-form-avatar
    v-model="model.picPath"
    label="头像"
    prop="picPath"
    :required="!disabled"
    :disabled="disabled"
></hf-form-avatar>

export default {
    data() {
        return {
            disabled: false,
            model: {
                picPath: ''
            }
        };
    }
}

props

显示组件

hf-icon 图标

示例

<hf-icon name="location-fill" color="primary" size="24"></hf-icon>

props

events

hf-search 搜索

示例

<hf-search v-model="keyword" placeholder="请输入关键词"></hf-search>

export default {
    data() {
        return {
            keyword: ''
        };
    }
}

props

hf-radio 单选

示例

<hf-radio v-model="value" :options="options"></hf-radio>

export default {
    data() {
        return {
            value: '',
            options: [{label: '选项1', value: '1'}, {label: '选项2', value: '2'}]
        };
    }
}

props

hf-cascader-picker 级联选择

嵌入页面的多列级联选择，多层级数据的选择。

何时使用：需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。

重复点击已选择的选项，为反选。

示例

<hf-cascader-picker v-model="value" :options="options"></hf-cascader-picker>

export default {
    data() {
        return {
            value: '',
            options: [{
                "value": "1-0",
                "text": "大连监所",
                "children": [{
                    "value": "1-1",
                    "text": "第一看守所",
                    "children": [{
                        "value": "1-1-1",
                        "text": "一层",
                        "children": [{
                            "value": "1-1-1-1",
                            "text": "一层101",
                            "children": []
                        }]
                    }]
                }, {
                    "value": "1-2",
                    "text": "第三看守所",
                    "children": []
                }]
            }]
        };
    }
}

props

defaultProps Options 默认值：{ text: 'text', value: 'value', children: 'children' }

hf-datetime-picker 嵌入页面的日期选择器

逻辑从<u-picker>和<u-datetime-picker>拷贝粘贴(版本: 2.0.34) 参数和<u-datetime-picker>一致(可能部分没有复制 没有实现)

示例

<hf-datetime-picker mode="date" v-model="date"></hf-datetime-picker>

hf-datetime-range 嵌入页面的日期范围选择器

基于<hf-datetime-picker>

<hf-datetime-range v-model="date" mode="date" placeholder></hf-datetime-range>

props

hf-upload 文件上传

示例

参考<hf-form-upload>、<hf-form-avatar>

props

accept 合法值

说明：

• 如果需要pdf文件预览，需要配置页面：uni_modules/hf-ui/pages/preview/preview ！！！
• 逻辑从<u-upload>拷贝粘贴，参数和<u-upload>一致(可能部分没有复制 没有实现)
• 文件上传中，不允许新增、删除文件，可能会导致数据错乱，∴ 文件上传结束后，才能进行其他操作

hf-preview 附件预览

附件预览，样式同hf-upload

示例

<hf-preview :value="info.attachmentList"></hf-preview>

export default {
    data() {
        return {
            info: {
                // 文件上传保存的值, 后端保存的文件id, 逗号',' 分隔
                attachmentList: '1658666945588277249,1658667005730402306'
            }
        };
    }
}

props

hf-list

列表页面公共组件

可自定义上下固定区域

示例

<hf-list ref="hfList" :fetch-list="getList">
    <template #top>
        <hf-search v-model="searchForm.keyword" placeholder="请输入关键字" @search="refreshList"></hf-search>
    </template>
    <template v-slot:item="{ item }">
        <u-cell :title="item.name" :label="item.orgName" is-link></u-cell>
    </template>
</hf-list>

export default {
    data() {
        return {
            searchForm: {
                keyword: ''
            }
        };
    },
    onShow() {
        this.refreshList();
    },
    onPullDownRefresh() {
        this.refreshList();
    },
    methods: {
        refreshList() {
            this.$refs.hfList && this.$refs.hfList.getList(true);
        },
        async getList(pagination) {
            const res = await list({
                name: this.searchForm.keyword,
                ...pagination
            });
            if (!(res.result && Array.isArray(res.result.records))) return;
            const data = res.result;
            return {
                total: data.total,
                records: data.records.map(item => {
                    return {
                        id: item.id,
                        name: item.name,
                        orgName: item.adminCodeName
                    };
                })
            };
        }
    }
}

props

注意：

• fetchList：返回promise {total: 0, records: []}

hf-list-only

列表滚动组件，包含缺省提示

示例1：H5

弹性布局的纵向布局，上下可自定义内容，hf-list-only剩余高度撑开

<template>
    <view class="page">
        <hf-search v-model="searchForm.keyword" placeholder="请输入关键字" @search="refreshList"></hf-search>
        <hf-list-only
            ref="hfList"
            :fetch-list="fetchList"
        >
            <template v-slot:item="{ item }">
                <u-cell :title="item.title" :label="item.content"></u-cell>
            </template>
        </hf-list-only>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                searchForm: {
                    keyword: ''
                }
            };
        },
        onShow() {
            this.refreshList();
        },
        onPullDownRefresh() {
            this.refreshList();
        },
        methods: {
            refreshList() {
                this.$refs.hfList && this.$refs.hfList.getList(true);
            },
            fetchList(pagination) {
                const params = {
                    keyword: this.searchForm.keyword,
                    ...pagination
                }
                const records = [];
                for (let i = 0; i < pagination.pageSize; i++) {
                    const id = (pagination.pageNo - 1) * pagination.pageSize + i + 1;
                    records.push({ id, title: `文章${id}`, content: '文章内容文章内容文章内容...' });
                }
                return {
                    total: 160,
                    records
                };
            }
        }
    }
</script>

<style lang="scss" scoped>
.page {
    height: 100vh;
    display: flex;
    flex-direction: column;
}
</style>

示例2：小程序

相比 示例1：H5 添加代码

• 添加样式：<hf-list-only style="flex: 1; height: 0;" ...> ∵ 微信小程序 多一层 ∴ 手动设置高度撑开
• 生命周期mounted手动设置fetch-list：this.$refs.hfList.setFetchList(this.fetchList); ∵ props传入函数, 组件内调用，微信小程序 this指向当前组件实例hf-list-only ∴ 父组件调用setFetchList手动传入函数，组件内调用，this指向父级

<template>
    <view class="page">
        <hf-search v-model="searchForm.keyword" placeholder="请输入关键字" @search="refreshList"></hf-search>
        <hf-list-only
            ref="hfList"
            :fetch-list="fetchList"
            style="flex: 1; height: 0;"
        >
            <template v-slot:item="{ item }">
                <u-cell :title="item.title" :label="item.content"></u-cell>
            </template>
        </hf-list-only>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                searchForm: {
                    keyword: ''
                }
            };
        },
        mounted() {
            this.$refs.hfList.setFetchList(this.fetchList);
        },
        onShow() {
            this.refreshList();
        },
        onPullDownRefresh() {
            this.refreshList();
        },
        methods: {
            refreshList() {
                this.$refs.hfList && this.$refs.hfList.getList(true);
            },
            fetchList(pagination) {
                const params = {
                    keyword: this.searchForm.keyword,
                    ...pagination
                }
                const records = [];
                for (let i = 0; i < pagination.pageSize; i++) {
                    const id = (pagination.pageNo - 1) * pagination.pageSize + i + 1;
                    records.push({ id, title: `文章${id}`, content: '文章内容文章内容文章内容...' });
                }
                return {
                    total: 160,
                    records
                };
            }
        }
    }
</script>

<style lang="scss" scoped>
.page {
    height: 100vh;
    display: flex;
    flex-direction: column;
}
</style>

说明：

通过ref调用组件setFetchList方法，只能放mount生命周期之后 组件内部created生命周期钩子函数，调用防抖返回的getList方法，因为防抖500ms时延，所以...阴差阳错...外部手动调用setFetchList设置fetchList之后，组件内部再初次调用getList调用父组件传入的fetchList方法。

hf-tree 树形组件

树型选择器 + 仿elementUI 点击父节点多选

参考：树形选择器 https://ext.dcloud.net.cn/plugin?id=702

示例

<view style="padding: 20rpx 20rpx 0; color: #999;">多选</view>
<hf-tree ref="hfTree1" :value="model.key1" :options="options" :defaultProps="defaultProps" multiple></hf-tree>

<view style="padding: 20rpx 20rpx 0; color: #999;">多选 可选父节点</view>
<hf-tree ref="hfTree2" :value="model.key2" :options="options" :defaultProps="defaultProps" multiple select-parent></hf-tree>

<view style="padding: 20rpx 20rpx 0; color: #999;">多选 可选父节点 父子不互相关联</view>
<hf-tree ref="hfTree3" :value="model.key3" :options="options" :defaultProps="defaultProps" multiple select-parent select-strictly></hf-tree>

<view style="padding: 20rpx 20rpx 0; color: #999;">单选</view>
<hf-tree ref="hfTree4" :value="model.key4" :options="options" :defaultProps="defaultProps"></hf-tree>

<view class="btns">
    <u-button @click="confirm">打印</u-button>
</view>

export default {
    data() {
        return {
            model: {
                key1: ['1-1-1-1', '1-1-1-3'],
                key2: ['1-1-1-2'],
                key3: ['1', '1-1-1-2'],
                key4: '1-1-1-2',
            },
            defaultProps: {
                text: 'text',
                value: 'value',
                children: 'children'
            },
            options: [{
                    value: '1',
                    text: '一级 1',
                    children: [{
                            value: '1-1',
                            text: '二级 1-1',
                            children: [{
                                    value: '1-1-1',
                                    text: '三级 1-1-1',
                                    children: [
                                        { value: '1-1-1-1', text: '四级 1-1-1-1' },
                                        { value: '1-1-1-2', text: '四级 1-1-1-2' },
                                        { value: '1-1-1-3', text: '四级 1-1-1-3' },
                                    ]
                                }
                            ]
                        }, {
                            value: '1-2',
                            text: '二级 1-2',
                            children: [
                                { value: '1-2-1', text: '三级 1-2-1' },
                                { value: '1-2-2', text: '三级 1-2-2' },
                            ]
                        }
                    ]
                }, {
                    value: '2',
                    text: '一级 2',
                    children: [{
                            value: '2-1',
                            text: '二级 2-1'
                        }, {
                            value: '2-2',
                            text: '二级 2-2',
                            children: [
                                { value: '2-2-1', text: '三级 2-2-1' },
                                { value: '2-2-2', text: '三级 2-2-2' },
                            ]
                        },
                    ]
                }
            ]
        };
    },
    methods: {
        confirm() {
            // [{value: '1-1-1-1', text: '四级 1-1-1-1'}, {value: '1-1-1-3', text: '二级 1-1-1-3'}]
            console.log('--- hfTree1 --->', this.$refs.hfTree1.confirm());
            // [{value: '1-1-1-2', text: '四级 1-1-1-2'}]
            console.log('--- hfTree2 --->', this.$refs.hfTree2.confirm());
            // [{value: '1', text: '一级 1', children: Array(2)}, {value: '1-1-1-2', text: '四级 1-1-1-2'}]
            console.log('--- hfTree3 --->', this.$refs.hfTree3.confirm());
            // [{value: '1-1-1-2', text: '四级 1-1-1-2'}]
            console.log('--- hfTree4 --->', this.$refs.hfTree4.confirm());
        },
    }
}

props

defaultProps Options 默认值：{ text: 'text', value: 'value', children: 'children', noShowLastIcon: 'noShowLastIcon' }

注意：

• 配了lastIcon，默认最后一级显示icon；节点数据可配置noShowLastIcon，标识最后一级是否不显示icon

slot

hf-dropdown 下拉菜单

向下展开菜单，同时可切换多个选项卡

参考：uview1.0 u-dropdown

示例

<hf-dropdown>
    <hf-dropdown-item v-model="model.value1" title="距离" :options="options1"></hf-dropdown-item>
    <hf-dropdown-item v-model="model.value2" title="温度" :options="options2"></hf-dropdown-item>
</hf-dropdown>

export default {
    data() {
        return {
            model: {
                value1: '',
                value2: ''
            },
            options1: [
                { label: '选项1', value: '1' },
                { label: '选项2', value: '2' },
                { label: '选项3', value: '3' },
            ],
            options2: [
                { label: '选项1', value: '1' },
                { label: '选项2', value: '2' },
                { label: '选项3', value: '3' },
                { label: '选项4', value: '4' },
                { label: '选项5', value: '5' },
            ]
        };
    }
}

dropdown props

dropdown events

dropdown-item props

dropdown-item slots

dropdown-item events

dropdown-item methods

组件内部方法，需要通过ref调用

说明

1. 弹框选择的两种规范

   • 点击【取消】，忽略用户操作，以上一次点击【完成】的结果为准。
   • 点击【取消】，保留当前操作选项，不做清空处理。

   按第一种规范