# vue-ys-ui-library

> 基于element的组件库

Latest version **2.0.9** (published 2021-07-26) · 0 weekly downloads

## Install

```sh
npm install vue-ys-ui-library
pnpm add vue-ys-ui-library
yarn add vue-ys-ui-library
bun add vue-ys-ui-library
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.9 |
| Published | 2021-07-26 |
| First published | 2021-07-07 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 27.2 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | azqasxws |
| Maintainers | azqasxws |

## Links

- npm: https://www.npmjs.com/package/vue-ys-ui-library
- npm.io page: https://npm.io/package/vue-ys-ui-library

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.8.1
- [element-ui](https://npm.io/package/element-ui.md) ^2.15.3
- [vue-router](https://npm.io/package/vue-router.md) ^3.2.0

## Recent versions

- 2.0.9 (latest) — 2021-07-26
- 2.0.8 — 2021-07-26
- 2.0.7 — 2021-07-26
- 2.0.6 — 2021-07-26
- 2.0.5 — 2021-07-23
- 2.0.4 — 2021-07-23
- 2.0.3 — 2021-07-23
- 2.0.2 — 2021-07-23
- 2.0.1 — 2021-07-22
- 0.2.2 — 2021-07-22
- 0.2.1 — 2021-07-22
- 0.2.0 — 2021-07-22
- 0.1.9 — 2021-07-22
- 0.1.8 — 2021-07-22
- 0.1.7 — 2021-07-17
- … 7 more at https://npm.io/package/vue-ys-ui-library/versions

## README

# 项目名称： vue-ys-ui-library(vue + element-ui 二次封装)

# 项目背景
满足公司多个项目不同前端开发通用的组件库，减少代码量

### 使用方法
```
npm i vue-ys-ui-library
```
mian.js文件引入
```js
import YsSelect from 'vue-ys-ui-library'
import YsTablePagination from 'vue-ys-ui-library'
import YsButton from 'vue-ys-ui-library'
Vue.use(YsSelect)
Vue.use(YsTablePagination)
Vue.use(YsButton)
```

# 组件介绍
# 1.YsSelect下拉选择器
使用继承element-ui组件select的所有props和函数，想详情可见https://element.eleme.cn/#/zh-CN/component/select
```vue
<template>
  <ys-select v-model="selectValue" :selectOptions="forms" :optionList="optionList" multiple></ys-select>
</template>
<script>
export default {
  data() {
    return {
      selectValue: '', // 根据multiple字段初始化为String,Number,Array
      forms: {
        valueKey: 'id', // 绑定初始为id，可以修改成需要传递的值
        labelKey: 'label' // 绑定初始为label，可以修改成需要展示的label值
      },
      optionList: []// 初始化下拉数据源
    }
  }
}
</script>
```

# 2.YsTablePagination表格和页码封装组件
使用继承element-ui组件table的所有props和函数，想详情可见https://element.eleme.cn/#/zh-CN/component/table
```vue
<template>
  <ys-table-pagination
    ref="tablePagination"
    border
    v-loading="loading"
    :columns="columns"
    :isSelection="isSelection"
    :http-api="httpApi"
    :search-form="searchForm"
    :autoQuery="autoQuery">
    <template v-slot:handle="slot">
      <el-button type="primary" size="mini" @click="handleUpdate(slot.scope.row, slot.scope.$index)">
          修改
      </el-button>
      <el-button type="danger" size="mini" @click="handleDelete(slot.scope.row, slot.scope.$index)">
          清空
      </el-button>
    </template>
  </ys-table-pagination>
</template>
<script>
export default {
  data() {
    return {
      isSelection: true, // 是否出现多选框
      searchForm: {}, // 查询条件
      httpApi: function(){}, // 请求接口查询的方法，可传入封装好的axios方法
      columns: Object.freeze([
        {
          prop: 'mobile', // 列表绑定字段
          label: '电话', // 表头文案
          width: '110', // 可设置宽度
          'show-overflow-tooltip': true,
          id: 2
        },
        {
          prop: 'sex', // 列表绑定字段
          label: '性别', // 表头文案
          'show-overflow-tooltip': true,
          render: scope => { // 自定义返回数据展示
            const { sex } = scope.row
            return sex === 0 ? 'Male' : sex === 1 ? 'Female' : 'Unknow'
          },
          id: 3
        },
        {
          slot: 'handle', // 操作栏插槽判断值
          label: '操作',
          width: '230',
          align: 'center',
          id: 4
        }
      ]),
      autoQuery: false // 是否自动查询数据
    }
  },
  methods: {
    handleUpdate(row,index) {
      console.log(row,index)
    },
    handleDelete(row, index) {
      console.log(row,index)
    },
  }
}
</script>

```

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