内置组件

多级联动组件

$cascader = Elm::cascader('field', 'title');
//省市二级联动
$city = Elm::city('field', 'title');
//省市区三级联动
$cityArea = Elm::cityArea('field', 'title');

组件方法

 * @method $this type(string $type) 数据类型, 支持 city_area(省市区三级联动), city (省市二级联动), other (自定义)
 * @method $this disabled(bool $bool) 是否禁用选择器
 * @method $this clearable(bool $bool) 是否支持清除
 * @method $this placeholder(string $placeholder)
 * @method $this trigger(string $trigger) 次级菜单展开方式，可选值为 click 或 hover
 * @method $this changeOnSelect(bool $bool) 当此项为 true 时，点选每级菜单选项值都会发生变化, 默认为 false
 * @method $this size(string $size) 输入框大小，可选值为large和small或者不填
 * @method $this filterable(bool $bool) 是否支持搜索
 * @method $this notFoundText(string $text) 当搜索列表为空时显示的内容
 * @method $this transfer(bool $bool) /是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果
 * @method $this data($options) 可选项的数据源
 * @method $this jsData($var) 可选项的数据源,js变量

多选框组件

$checkbox = Elm::checkbox('field', 'title');
$checkbox->options(function(){
    $options = []
    foreach(['好用', '高效'] as $k=>$v){
        $options[] = Elm::option($k, $v);
    }
    //等同于 [['value'=>0,'label'=>'好用'],['value'=>1,'label'=>'高效']]
    return $options;
});

组件方法

 * @method $this size(string $size) 多选框组的尺寸，可选值为 large、small、default 或者不设置

颜色选择器

$color = Elm::color('field', 'title', '#FF7271');

组件方法

 * @method $this disabled(bool $bool) 是否禁用
 * @method $this alpha(bool $bool) 是否支持透明度选择, 默认为false
 * @method $this colors(array $colors) colors
 * @method $this hue(bool $bool) 是否支持色彩选择, 默认为true
 * @method $this recommend(bool $bool) 是否显示推荐的颜色预设, 默认为false
 * @method $this size(string $size) 尺寸，可选值为large、small、default或者不设置
 * @method $this format(string $format) 颜色的格式，可选值为 hsl、hsv、hex、rgb,开启 alpha 时为 rgb，其它为 hex

日期组件

$datePicker = Elm::datePicker('field', 'title');
//单选日期
$date = Elm::date('field', 'title');
//多选日期
$dates = Elm::dates('field', 'title');
//日期区间选择
$dateRange = Elm::dateRange('field', 'title');
//单选日期时间
$dateTime = Elm::dateTime('field', 'title');
//日期时间区间选择
$dateTimeRange = Elm::dateTimeRange('field', 'title');
//选择年
$year = Elm::year('field', 'title');
//选择月
$month = Elm::month('field', 'title');

组件方法

 * @method $this type(string $type) 显示类型，可选值为 date、daterange、datetime、datetimerange、year、month
 * @method $this format(string $format) 展示的日期格式, 默认为yyyy-MM-dd HH🇲🇲ss
 * @method $this placement(string $placement) 日期选择器出现的位置，可选值为top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end, 默认为bottom-start
 * @method $this placeholder(string $placeholder) 占位文本
 * @method $this confirm(bool $bool) 是否显示底部控制栏，开启后，选择完日期，选择器不会主动关闭，需用户确认后才可关闭, 默认为false
 * @method $this size(string $size) 尺寸，可选值为large、small、default或者不设置
 * @method $this disabled(bool $bool) 是否禁用选择器
 * @method $this clearable(bool $bool) 是否显示清除按钮
 * @method $this readonly(bool $bool) 完全只读，开启后不会弹出选择器，只在没有设置 open 属性下生效
 * @method $this editable(bool $bool) 文本框是否可以输入, 默认为false
 * @method $this multiple(bool $bool) 开启后, 可以选择多个日期, 仅在 date 下可用, 默认为false
 * @method $this transfer(bool $bool) 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果, 默认为false
 * @method $this splitPanels(bool $bool) 开启后，左右面板不联动，仅在 daterange 和 datetimerange 下可用。
 * @method $this showWeekNumbers(bool $bool) 开启后，可以显示星期数。

框架

$frame = Elm::frame('field', 'title');
//使用input类型显示,多选
//value为Array类型
$frameInputs = Elm::frameInputs('field', 'title');
//使用文件类型显示,多选
//value为Array类型
$frameFiles = Elm::frameFiles('field', 'title');
//使用图片类型显示,多选
//value为Array类型
$frameImages = Elm::frameImages('field', 'title');
//使用input类型显示,单选
//value为String类型
$frameInput = Elm::frameInput('field', 'title');
//使用文件类型显示,单选
//value为String类型
$frameFile = Elm::frameFile('field', 'title');
//使用图片类型显示,单选
//value为String类型
$frameImage = Elm::frameImage('field', 'title');

组件方法

 * @method $this type(string $type) frame类型, 有input, file, image, 默认为input
 * @method $this src(string $src) iframe地址
 * @method $this maxLength(int $length) value的最大数量, 默认无限制
 * @method $this icon(string $icon) 打开弹出框的按钮图标
 * @method $this height(string $height) 弹出框高度
 * @method $this width(string $width) 弹出框宽度
 * @method $this spin(bool $bool) 是否显示加载动画, 默认为 true
 * @method $this frameTitle(string $title) 弹出框标题
 * @method $this modal(array $modalProps) 弹出框props
 * @method $this handleIcon(bool $bool) 操作按钮的图标, 设置为false将不显示, 设置为true为默认的预览图标, 类型为file时默认为false, image类型默认为true
 * @method $this allowRemove(bool $bool) 是否可删除, 设置为false是不显示删除按钮

hidden

$hidden = Elm::hidden('field', 'value');

输入框

$input = Elm::input('field', 'title');
$text = Elm::text('field', 'title');
$password = Elm::password('field', 'title');
$textarea = Elm::textarea('field', 'title');
$url = Elm::url('field', 'title');
$email = Elm::email('field', 'title');
$idate = Elm::idate('field', 'title');

组件方法

 * @method $this type(string $type) 输入框类型，可选值为 text、password、textarea、url、email、date;
 * @method $this size(string $size) 输入框尺寸，可选值为large、small、default或者不设置;
 * @method $this placeholder(string $placeholder) 占位文本
 * @method $this clearable(bool $bool) 是否显示清空按钮, 默认为false
 * @method $this disabled(bool $bool) 设置输入框为禁用状态, 默认为false
 * @method $this readonly(bool $bool) 设置输入框为只读, 默认为false
 * @method $this maxlength(int $length) 最大输入长度
 * @method $this icon(string $icon) 输入框尾部图标，仅在 text 类型下有效
 * @method $this rows(int $rows) 文本域默认行数，仅在 textarea 类型下有效, 默认为2
 * @method $this number(bool $bool) 将用户的输入转换为 Number 类型, 默认为false
 * @method $this autofocus(bool $bool) 自动获取焦点, 默认为false
 * @method $this autocomplete(bool $bool) 原生的自动完成功能, 默认为false
 * @method $this spellcheck(bool $bool) 原生的 spellcheck 属性, 默认为false
 * @method $this wrap(string $warp) 原生的 wrap 属性，可选值为 hard 和 soft, 默认为soft
 * @method $this autoSize($minRows = false, $maxRows = null) 自适应内容高度，仅在 textarea 类型下有效

数字输入框

$number = Elm::number('field', 'title');

组件方法

 * @method $this max(float $max) 最大值
 * @method $this min(float $min) 最小值
 * @method $this step(float $step) 每次改变的步伐，可以是小数
 * @method $this size(string $size) 输入框尺寸，可选值为large、small、default或者不填
 * @method $this disabled(bool $bool) 设置禁用状态，默认为false
 * @method $this placeholder(string $placeholder) 占位文本
 * @method $this readonly(bool $bool) 是否设置为只读，默认为false
 * @method $this editable(bool $bool) 是否可编辑，默认为true
 * @method $this precision(int $precision) 数值精度

单选框

$radio = Elm::radio('field', 'title');
$radio->options(function(){
    $options = []
    foreach(['好用', '高效'] as $k=>$v){
        $options[] = Elm::option($k, $v);
    }
    //等同于 [['value'=>0,'label'=>'好用'],['value'=>1,'label'=>'高效']]
    return $options;
});

组件方法

 * @method $this size(string $size) 单选框的尺寸，可选值为 large、small、default 或者不设置
 * @method $this vertical(bool $bool) 是否垂直排列，按钮样式下无效
 * @method $this button(bool $bool) 按钮形式

评分选择

$rate = Elm::rate('field', 'title');

组件方法

 * @method $this count(int $star) star 总数, 默认为 5
 * @method $this allowHalf(bool $bool) 是否允许半选, 默认为 false
 * @method $this disabled(bool $bool) 是否只读，无法进行交互, 默认为
 * @method $this showText(bool $bool) 是否显示提示文字, 默认为 false
 * @method $this clearable(bool $bool) 是否可以取消选择, 默认为 false

下拉选择

$select = Elm::select('field', 'title');
//多选,value 为 array
$select = Elm::selectMultiple('field', 'title');
$select->options(function(){
    $options = []
    foreach(['好用', '高效'] as $k=>$v){
        $options[] = Elm::option($k, $v);
    }
    //等同于 [['value'=>0,'label'=>'好用'],['value'=>1,'label'=>'高效']]
    return $options;
});

组件方法

 * @method $this multiple(bool $bool) 是否支持多选, 默认为false
 * @method $this disabled(bool $bool) 是否禁用, 默认为false
 * @method $this clearable(bool $bool) 是否可以清空选项，只在单选时有效, 默认为false
 * @method $this filterable(bool $bool) 是否支持搜索, 默认为false
 * @method $this size(string $size) 选择框大小，可选值为large、small、default或者不填
 * @method $this placeholder(string $placeholder) 选择框默认文字
 * @method $this transfer(string $transfer) 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果, 默认为false
 * @method $this placement(string $placement) 弹窗的展开方向，可选值为 bottom 和 top, 默认为bottom
 * @method $this notFoundText(string $text) 当下拉列表为空时显示的内容, 默认为 无匹配数据

滑块

$slider = Elm::slider('field', 'title');
//多选,value 为 array
$sliderRange = Elm::sliderRange('field', 'title');

组件方法

 * @method $this min(float $min) 最小值, 默认 0
 * @method $this max(float $max) 最大值, 默认 100
 * @method $this step(float $step) 步长，取值建议能被（max - min）整除, 默认 1
 * @method $this disabled(bool $bool) 是否禁用滑块, 默认 false
 * @method $this range(bool $bool) 是否开启双滑块模式, 默认
 * @method $this showInput(bool $bool) 是否显示数字输入框，仅在单滑块模式下有效, 默认 false
 * @method $this showStops(bool $bool) 是否显示间断点，建议在 step 不密集时使用, 默认 false
 * @method $this showTip(string $tip) 提示的显示控制，可选值为 hover（悬停，默认）、always（总是可见）、never（不可见）
 * @method $this inputSize(string $size) 数字输入框的尺寸，可选值为large、small、default或者不填，仅在开启 show-input 时有效

开关

$switch = Elm::switches('field', 'title');

组件方法

 * @method $this size(string $size) 开关的尺寸，可选值为large、small、default或者不写。建议开关如果使用了2个汉字的文字，使用 large。
 * @method $this disabled(bool $bool) 禁用开关, 默认为false
 * @method $this trueValue(string $value) 选中时的值，默认为1
 * @method $this falseValue(string $value) 没有选中时的值，默认为0
 * @method $this openStr(string $value) 自定义显示打开时的内容
 * @method $this closeStr(string $value) 自定义显示关闭时的内容

时间选择

$timePicker = Elm::timePicker('field', 'title');
//时间选择
$time = Elm::time('field', 'title');
//时间区间选择
$time = Elm::timeRange('field', 'title');

组件方法

 * @method $this type(string $type) 显示类型，可选值为 time、timerange
 * @method $this format(string $format) 展示的时间格式, 默认为HH🇲🇲ss
 * @method $this placement(string $placement) 时间选择器出现的位置，可选值为top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end, 默认为bottom-start
 * @method $this placeholder(string $placeholder) 占位文本
 * @method $this confirm(bool $bool) 是否显示底部控制栏, 默认为false
 * @method $this size(string $size) 尺寸，可选值为large、small、default或者不设置
 * @method $this disabled(bool $bool) 是否禁用选择器
 * @method $this clearable(bool $bool) 是否显示清除按钮
 * @method $this readonly(bool $bool) 完全只读，开启后不会弹出选择器，只在没有设置 open 属性下生效
 * @method $this editable(bool $bool) 文本框是否可以输入, 默认为false
 * @method $this steps($h, $i = 0, $s = 0) 下拉列表的时间间隔，分别对应小时、分钟、秒。
 * @method $this transfer(bool $bool) 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果, 默认为false

树形

$tree = Elm::tree('field', 'title');

组件方法

 * @method $this type(string $type) 类型，可选值为 checked、selected
 * @method $this multiple(bool $bool) 是否支持多选, 当`type=selected`并且`multiple=false`, 默认为false, 值为string或Number类型，其他情况为Array类型
 * @method $this showCheckbox(bool $bool) 是否显示多选框, 默认为false
 * @method $this emptyText(string $emptyText) 没有数据时的提示, 默认为'暂无数据'
 * @method $this data($data) 节点数据
 * @method $this jsData($var) 节点数据,js变量

上传组件

$upload = Elm::upload('field', 'title');
//图片上传
//value 为 Array类型
$uploadImages = Elm::uploadImages('field', 'title');
//文件上传
//value 为 Array类型
$uploadFiles = Elm::uploadFiles('field', 'title');
//单图上传
//value 为 String类型
$uploadImage = Elm::uploadImage('field', 'title');
//单文件上传
//value 为 String类型
$uploadFile = Elm::uploadFile('field', 'title');

组件方法

 * @method $this uploadType(string $uploadType) 上传文件类型，可选值为 image（图片上传），file（文件上传）
 * @method $this action(string $action) 上传的地址
 * @method $this multiple(bool $bool) 是否支持多选文件
 * @method $this uploadName(string $name) 上传的文件字段名
 * @method $this accept(string $accept) 接受上传的文件类型
 * @method $this maxSize(int $size) 文件大小限制，单位 kb
 * @method $this withCredentials(bool $bool) 支持发送 cookie 凭证信息, 默认为false
 * @method $this maxLength(Int $length) 最大上传文件数, 0为无限
 * @method $this headers(array $headers) 设置上传的请求头部
 * @method $this data(array $data) 上传时附带的额外参数
 * @method $this format(array $format) 支持的文件类型,会在选择文件时过滤，可以两者结合使用