youdi_w 常用的web端组件和方法

安装 yarn add youdi_w 或者 npm install youdi_w ##全局引入

   import YoudiW from 'youdi_w'
   Vue.use(YoudiW);

1. 图片预览组件

    <ImgPreview
      :imgStyle="{'width':'80px','height':'80px'}"
      :previewSrcList="preList"
      src="https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg"
    ></ImgPreview>

2. 搜索组件

   <SearchFIlter @searchOk="search">
      <template slot="searchDeal">
        <el-form-item label="fasd">
          <el-input size="mini" clearable />
        </el-form-item>
      </template>
      <div slot="operation">fasdfs</div>
    </SearchFIlter>
  #接收的props参数
> formArray
   [
          {
            type: "input",
            label: "手机号",
            attr: "phone",
            placeholder: "请输入手机号"
          },
          {
            type: "time",
            label: "日期",
            attr: "time",
            placeholder: "请选择日期"
          },
          {
            type: "timerange",
            label: "选择日期",
            attr: "timerange",
            placeholder: "请选择日期"
          },
          {
            type: "select",
            label: "选择",
            attr: "type",
            placeholder: "请选择",
            options: [
              {
                label: "haode",
                value: "4"
              }
            ]
          }
        ]
> isReset
是否有重置按钮
> haveLimit
是否有查看更多
    

3. tableList组件

    <MyTable ref="myTable" :queryParams="fieldParams" :req="ceshiFunc">
      <template v-slot:tableList="tableList">
        <el-table
          v-loading="tableList.isLoading"
          :data="tableList.data"
          style="width: 100%"
          ref="tableList"
        >
          <el-table-column
            v-for="(item,index)  in columns"
            :key="index"
            :prop="item.field"
            :label="item.title"
          ></el-table-column>
        </el-table>
      </template>
    </MyTable>
     //样式统一
    .my_table {
      .tableBody {
        height: calc(100vh - 257px);
        overflow-y: scroll;
      }
    }
    
#queryParams 是搜索的时候需要传递的参数
#req 是向后台请求的接口

4. 上传组件

     <YdUploadImg
      :limit='4'
      :initList="initList"
      @imgChange="imgChange"
      action="http://192.168.100.199:8081/upload/save/file"
    ></YdUploadImg>
    //initList  必须有url
    [
        {
          url:
            "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        },
      ]