# 自用工具包

**Repository Path**: wulu_1_2/tools

## Basic Information

- **Project Name**: 自用工具包
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: GPL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-23
- **Last Updated**: 2025-12-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基于weiwait/dcat-vue提取的自用工具包整合（排除上传和地图相关）

### 通过 composer 安装扩展
```shell
  composer require hkw/tools
```


### 已有表单组件(采用的是Naive UI)
```php
     // 标签
     // each vComponent has watch method
    $form->vTags('tags')
        ->watch('list as field name', <<<JS
            (target, current, store) => {
                // the tag component of naive ui expect format: {label: string, value: string}
                current.options.push({label: target, value: target});
                
                store.request({method: 'get', url: '/admin'})
                    .then(res => console.log(res));
                console.log(store.forms.list)
            }
        JS);
    
    $form->vList('list')
        ->sortable() // 开启排序
        ->max(8); // 限制最大添加数量
        
    $form->vKeyValue('kvs')
        ->sortable() // 开启排序
        ->serial() // 开启固定有序索引 默认为字母A-Z
        ->keys(['一', '二', '三', '四']) // serial后自定义索引
        ->list(); // serial后只提交值，保存为一维数组(索引仅作为显示)
        
    $form->vSelect('select')
        ->options(['123', '456', 'A' => 'aaa']) // 选项
        ->concatKey('separator') // 显示键
        ->optionsFromKeyValue('kvs'); // 用于结合vKeyValue进行选项选择

    $form->vMultipleSelect('ms', '多选')
        ->options(['123', '456', 'A' => 'aaa']) // 选项
        ->concatKey('separator') // 显示键
        ->optionsFromKeyValue('kvs'); // 用于结合vKeyValue进行选项选择

    $form->vNumber('number', '数字')
        ->bothButton() // 按钮位置分离到两端
        ->step(2) // 步进
        ->min(2) // 最小值
        ->max(88) // 最大值
        ->precision(2); // 开启小数，精度

    $form->vIcon('icon', '图标') // icon vIcon oIcon
        ->withColorColumn('color') // 独立的hex颜色字段，默认是合并到图标类型后面
        ->closeColorPicker();
```