xyf_vue3 v0.7.6

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

埋点按钮使用

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

   <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 组件 一般详情使用

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

//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 复制组件

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

YdCreateForm 创建表单组件

<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  图片上传组件的路径

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",
      },
    ],
  },
];