https://cli.vuejs.org/zh/guide/css.html#css-modules cli 地址

### 埋点按钮使用
使用ReportBtn  包裹需要埋点的按钮
初始话时可以传递参数
app.use(youdi_w3,{
  comOptions:{
    version:'1313'
  }
});

```html
   <ReportBtn
          :params="{
            a: 'fas'
           }"
        >
          <a-button @click="ceshi">
             测试
          </a-button>
    </ReportBtn>
```
### tableList 组件

       获取子组件的方法
       ```js
        const MyTableRef = ref(null)   // 定义ref
        MyTableRef.value.fetchData()
       ```
        fieldArray  搜索组件的配置参数  Array
        reqParams  处理搜索时候的参数   Functon
        searchReset  点击重置时会触发这个事件   click
        req   获取table数据的函数    function
        dealList   处理返回的dataList数据
        showSearch booolean 是否展示搜索
        showPage 是否展示分页
        dealTotal  获取total总页数

        常用插槽
        searchSlot   搜索的插槽
        searchOperation  搜索按钮插槽s

### 图片预览组件

        isDetail 表示是否显示上传按钮
        ```html
          <UploadImg
                :initList='fileList'
                :isDetail='false'
                :labelCol='{
                  span: 4
                }'
                :wrapperCol='{
                  span: 20
                }'
                @imgChange='imgChange'
                ></UploadImg>
        ```
        ```js
         const fileList = reactive([
                {
                        uid: '-1',
                        name: 'image.png',
                        status: 'done',
                        url: 'https://workyd.com/image/yhesj_xcs/placeHolder.png',
                },

                {
                        uid: '-5',
                        name: 'image.png',
                        status: 'error',
                },
                ])
        ```

### FormDetail 组件 一般详情使用

```html
<FormDetail copy :formArray="formArray" :detail="detail">
  <template v-slot:name="name">
    <slot name="name">{{name+'fasdfa'}}</slot>
  </template>
</FormDetail>
```

```js
//copy 表示是否需要复制
const detail = {
  name: "张阿三",
  age: 14,
};
const formArray = [
  {
    label: "名字",
    attr: "name",
    slot: true,
  },
  {
    label: "年龄",
    attr: "age",
  },
  {
    label: "照片",
    attr: "image",
    type: "image",
  },
  {
    label: "性别",
    attr: "sex",
    type: "select",
    options: [
      {
        name: "男",
        value: "1",
      },
      {
        name: "女",
        value: "0",
      },
    ],
  },
];
```

### ydCopy 复制组件

```html
<YdCopy value="复制的内容" text="复制"></YdCopy>
```

### YdCreateForm 创建表单组件

```html
<YdCreateForm
  ref="formDetail"
  :rules="rules"
  :formField="formField"
  :initData="initData"
  :disabled="false" // 表单是否可编辑
  :labelCol="{
        span: 4
      }"
  :wrapperCol="{
        span: 20
    }"
  @dataChange="dataChange"
>
  <template v-slot:ceshi="ceshi">
    <slot name="ceshi"> {{ceshi.attr}}</slot>
  </template>
</YdCreateForm>
```

```
initData 表示初始值
rules  规则验证
dataChange  每次数据改变时会触发
// 组件暴露方法
setFormVal 直接修改form表单的整个值
setVal   修改某个属性的值
getForm 获取表单值
checkField 进行表单校验   异步操作
resetValue  重置表单
actionUrl  图片上传组件的路径
```

```js 配置项说明
const formField = [
  {
    type: "input", 
    attr: "name",
    label: "姓名",
    disabled: false, //是否表单可编辑
    slot: true, // 表示启用插槽
  },
   {
        type: "radio", // 单选
        attr: "sex2",
        label: "性别",
        options: [
          {
            name: "男",
            value: "1",
          },
          {
            name: "女",
            value: "0",
          },
        ],
  },
  {
    type: "input",
    attr: "name",
    label: "姓名",
  },
  {
    type: "adress",
    attr: "adress",
    label: "地址",
    width: "200",
  },
  {
    type: "time",
    attr: "time",
    label: "时间",
  },
  {
    type: "image",
    attr: "image",
    label: "图片",
    // limit: 1  限制图片上传数量
  },

  {
    type: "timeRange",
    attr: "timeRange",
    label: "时间范围",
  },

  {
    type: "select",
    attr: "sex",
    label: "性别",
    // mode:"multiple, //表示多选
    async fun() {
      return new Promise((res) => {
        setTimeout(() => {
          res([
            {
              name: "男",
              value: "1",
            },
            {
              name: "女",
              value: "0",
            },
          ]);
        }, 2000);
      });
    },
    options: [],
  },
  {
    attr: "ceshiSlot", //自定义插槽不需要label
    slot: true,
    span: 24,
  },
  {
    type: "select",
    attr: "fafd",
    label: "姓名",
    options: [
      {
        name: "张三",
        value: "131",
      },
    ],
  },
];
```