# yyx-component

> 云UI组件库，一个基于[Element](https://element.eleme.cn/#/zh-CN)进行二次开发的组件库

Latest version **1.27.1** (published 2023-05-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install yyx-component
pnpm add yyx-component
yarn add yyx-component
bun add yyx-component
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.27.1 |
| Published | 2023-05-10 |
| First published | 2020-12-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 14 |
| Unpacked size | 27.4 MB |
| Known vulnerabilities | 0 (+30 in 4 direct dependencies) |
| Install scripts | no |
| Maintainers | qq247770359, wangliang01, liqihangdad, gaohui-mogu, wujun123 |

## Links

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

## Dependencies (14)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [xlsx](https://npm.io/package/xlsx.md) ^0.16.9
- [axios](https://npm.io/package/axios.md) ^0.27.2
- [lodash](https://npm.io/package/lodash.md) ^4.17.20
- [moment](https://npm.io/package/moment.md) ^2.29.1
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [vue-pdf](https://npm.io/package/vue-pdf.md) ^4.3.0
- [xe-utils](https://npm.io/package/xe-utils.md) ^3.5.7
- [clipboard](https://npm.io/package/clipboard.md) ^2.0.11
- [vxe-table](https://npm.io/package/vxe-table.md) ^3.6.6
- [element-ui](https://npm.io/package/element-ui.md) ^2.15.9
- [vue-cropper](https://npm.io/package/vue-cropper.md) ^0.5.6
- [bignumber.js](https://npm.io/package/bignumber.js.md) ^9.0.1
- [vuedraggable](https://npm.io/package/vuedraggable.md) ^2.24.3

## Recent versions

- 1.27.1 (latest) — 2023-05-10
- 1.26.29 — 2023-04-27
- 1.26.28 — 2023-04-26
- 1.26.27 — 2023-04-23
- 1.26.26 — 2023-04-21
- 1.26.25 — 2023-04-21
- 1.26.24 — 2023-04-20
- 1.26.23 — 2023-04-19
- 1.26.22 — 2023-04-15
- 1.26.21 — 2023-04-15
- 1.26.20 — 2023-04-10
- 1.26.19 — 2023-03-23
- 1.26.18 — 2023-03-03
- 1.26.17 — 2023-02-24
- 1.26.16 — 2023-02-22
- … 774 more at https://npm.io/package/yyx-component/versions

## README

# yyx-component

云UI组件库，一个基于[Element](https://element.eleme.cn/#/zh-CN)进行二次开发的组件库

## 安装
### npm 安装
推荐使用npm的方式安装，它能更好地和webpack打包工具配合使用

npm方式
```node
npm i yyx-component -S 
```

yarn方式
```node
yarn add yyx-component
```
## 组件文档使用链接：
[组件库文档](https://dev-k8s.newhopescm.com/yyx-component/#/form)
## 快速上手
### 引入yui
在main.js中写入以下内容
```js
import Vue from 'vue
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import yui from 'yyx-component'
import 'yyx-component/lib/yui.css'
import App from './App.vue';

Vue.use(yui)

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});
```

该组件库目前包含的组件有：
```
  |--表单(YForm)
  |--表格(YTable)
  |--高级表格(YTablePro)
  |--文件上传(YUpload)
  |--Input输入框(YInput)  支持只能输入整数，浮点数，精度
  |--数字输入框(YInputNumber)
  |--级联选择器(Cascader)
    |--品类级联选择器(YCategoryCascader)
    |--地址级联选择器(YAddressCascader)
  |--批量导入(YBatchImport)
  |--打印(YPrint) 可处理针式打印机
  |--Tag标签(YTag)
  |--Dialog弹出框(YDialog)
  |--Drawer抽屉(YDrawer)
  |--ImageViewer图片预览(YImageViewer)
  |--Tips提示(YTips)
  |--Image图片(YImage)
  |--ImageList图片列表(YImageList)
  |--TableDialog表格弹窗(YTableDialog)
  |--Text文本(YText)
  |--Card卡片(YCard)
  |--Block区块(YBlock)
  |--Tree树(YTree)
  |--CardForm(卡片表格)
  |--Container容器(YContainer)
  |--TableMate 前端分页表格(YTableMate)
  |--Transfer 选择器(YTransfer)
  |--Select 选择器(YSelect) 带远程搜索
  |--AuditForm 审核表单(YAuditForm) 带远程搜索
  

```

### 使用

#### 表单的使用
```vue
<template>
  <y-form
    v-model="form"
    :config="config"
    label-position="left"
    width="500px"
    label-width="100px"
  >
    <el-form-item>
      <el-button
        type="primary"
        @click="handleCreate"
      >立即创建</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </el-form-item>
  </y-form>
</template>
<script>
export default {
  data() {
    form: {
      name: '',
      region: '',
      date: '',
      time: '',
      delivery: false,
      startTime: '',
      endTime: '',
      type: [],
      resource: '',
      desc: ''
    },
    config: {
      name: {
        prop: 'name',
        label: '活动名称',
        fieldType: 'Input',
        labelSuffix: '：'
      },
      region: {
        prop: 'region',
        label: '活动区域',
        fieldType: 'Select',
        labelSuffix: '：',
        options: [
          {
            label: '上海',
            value: 'shanghai'
          },
          {
            label: '北京',
            value: 'beijing'
          }
        ]
      },
      dateRange: {
        label: '日期范围',
        fieldType: 'DatePicker',
        type: 'daterange',
        startPlaceholder: '请选择开始日期',
        endPlaceholder: '请选择结束日期',
        onPick: (value) => {
          const [startTime, endTime] = value
          this.form.startTime = startTime
          this.form.endTime = endTime
        }
      },
      date: {
        prop: 'date',
        label: '活动时间',
        fieldType: 'DatePicker',
        labelSuffix: '：',
        cols: 13
      },
      time: {
        prop: 'time',
        label: '-',
        hideLable: false,
        labelPosition: 'center',
        labelSuffix: '',
        push: 1,
        labelWidth: '25px',
        fieldType: 'TimePicker',
        cols: 10,
        pickerOptions: {
          start: '08:30',
          step: '00:15',
          end: '18:30'
        }
      },
      delivery: {
        prop: 'delivery',
        label: '即时配送',
        fieldType: 'YSwitch',
        labelSuffix: '：'

      },
      type: {
        prop: 'type',
        fieldType: 'Checkbox',
        label: '活动性质',
        labelSuffix: '：',
        options: [
          {
            label: '美食/餐厅线上活动',
            name: 'type',
            cols: 12
          },
          {
            label: '地推活动',
            name: 'type',
            cols: 12
          },
          {
            label: '线下主题活动',
            name: 'type',
            cols: 12
          },
          {
            label: '单纯品牌曝光',
            name: 'type',
            cols: 12
          }
        ]
      },
      resource: {
        prop: 'resource',
        label: '特殊资源',
        fieldType: 'Radio',
        labelSuffix: '：',

        options: [
          {
            label: '线上品牌商赞助',
            value: '0',
            cols: 12
          },
          {
            label: '线下场地免费',
            value: '1',
            cols: 12
          }
        ]
      },
      desc: {
        prop: 'desc',
        label: '活动形式',
        fieldType: 'Input',
        type: 'textarea',
        labelSuffix: '：',
        rows: 2
      }
    }
  }
}
</script>
```

#### 表格的使用
```vue
<template>
  <y-table
    :data="tableData"
    :columns="columns"
  ></y-table>
</template>
<script>
export default {
  data() {
     tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }],
      columns: [
        {
          prop: 'date',
          label: '日期'
        },
        {
          prop: 'name',
          label: '姓名'
        },
        {
          prop: 'province',
          label: '省份'
        },
        {
          prop: 'city',
          label: '市区'
        },
        {
          prop: 'address',
          label: '地址',
          'show-overflow-tooltip': true
        },
        {
          prop: 'zip',
          label: '邮编'
        },
        {
          prop: 'hobby',
          label: '爱好'
        },
        {
          prop: 'zip',
          label: '邮编'
        },
        {
          prop: 'hobby',
          label: '爱好'
        },
        {
          label: '操作',
          fixed: 'right',
          render() {
            return (
              <div>
                <el-button type='text'>查看</el-button>
                <el-button type='text'>编辑</el-button>
              </div>
            )
          }
        }
      ]
  }
}
</script>
```

#### 高级表格的使用
```vue
<template>
  <y-table-pro
  :loadDataApi="dataApi"
  :columns="columns"
  >
  </y-table-pro>
</template>
<script>
export default {
  data() {
    return {
      // 接口请求api   axios.get(xxx)
      dataApi: new Promise((resolve, reject) => {

      }),
      columns: [
        {
          label: 'ID',
          prop: 'id',
          fieldType: 'Input',
          filter: true,
          marginRight: '50px',
          cols: 3,
          sm: 6
        },
        {
          label: '姓名',
          prop: 'name',
          fieldType: 'Input',
          filter: true,
          marginRight: '50px',
          cols: 3,
          sm: 6
        },
        {
          label: '年龄',
          prop: 'age',
          fieldType: 'Input',
          filter: true,
          marginRight: '50px',
          cols: 3,
          sm: 6
        }
      ]
    }
  }
}
</script>
```

#### Input输入框
```vue
<template>
<el-card>
  <h2>普通输入框</h2>
  <y-input v-model="value"></y-input>
</el-card>
<el-card class="mt-20">
  <h2>number类型输入框</h2>
  <y-input v-model="number" number></y-input>
</el-card>
</template>
<script>
export default {
  data() {
    return {
      value: '',
      number: ''
    }
  }
}
</script>
```

#### 级联选择器
```vue
<template>
<el-card>
  <h2>品类级联选择器</h2>
  <y-category-cascader
    style="width: 200px;"
    :data-api="dataApi"
    @value-change="handleChange"
    :inputValue="inputValue"
  ></y-category-cascader>
</el-card>
<el-card style="margin-top: 20px;">
  <h2>地址级联选择器</h2>
  <y-address-cascader
    style="width: 200px;"
    @change="handleAddressChange"
    v-model="address"
  >
</el-card>
</template>
<script>
export default {
  data() {
    retrun {
      // 接口请求 dataApi: axios.get(xxx)
      dataApi: new Promise(),
      inputValue: '',
      address: ''
    }
  },
  methods: {
    handleChange(value) {
      console.log(value)
    },
    handleAddressChange(value) {
      console.log(value)
    }
  }
}
</script>
```

#### 文件上传
```vue
<template>
<el-card>
  <h2>文件上传</h2>
   <y-upload on-success="handleUpload" on-remove="handleUpload" :api="uploadAPI" isCropper :fileList="fileList"></y-upload>
</el-card>
</template>
<script>
export default {
  data() {
    return {
      // 上传文件的api axios.post(xxx)
      uploadAPI: new Promise(),
      // 文件列表
      fileList: []
    }
  },
  methods: {
    handleUpload(e) {
      // 处理文件上传
      console.log(e.fileList)
    }
  }
}
</script>
```

# 目前该组件库存在的问题
1. 不支持树型表格

2.项目打包后使用imageviewer进行pdf预览失效的解决办法：[Vue-pdf打包线上控制台work.js404，pdf线上无法预览，本地正常](http://e.betheme.net/article/show-1241.html?action=onClick)  [修改node_modules源码](https://www.jianshu.com/p/4ebacfcd139a)

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