# xyf_vue3

> 常用的vue3.0的Web端组件

Latest version **0.7.6** (published 2021-08-15) · 0 weekly downloads

## Install

```sh
npm install xyf_vue3
pnpm add xyf_vue3
yarn add xyf_vue3
bun add xyf_vue3
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.7.6 |
| Published | 2021-08-15 |
| First published | 2021-07-31 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 5.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | xyf_coco |

## Links

- npm: https://www.npmjs.com/package/xyf_vue3
- npm.io page: https://npm.io/package/xyf_vue3

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^3.2.2
- [moment](https://npm.io/package/moment.md) ^2.27.0
- [vue-router](https://npm.io/package/vue-router.md) ^4.0.11
- [ant-design-vue](https://npm.io/package/ant-design-vue.md) ^2.2.2

## Recent versions

- 0.7.6 (latest) — 2021-08-15
- 0.7.5 — 2021-08-14
- 0.7.3 — 2021-08-14
- 0.7.2 — 2021-08-14
- 0.7.1 — 2021-07-31
- 0.7.0 — 2021-07-31
- 0.6.9 — 2021-07-31
- 0.6.8 — 2021-07-31

## README

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

---
_Source: https://npm.io/package/xyf_vue3 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._