# nxin

> Nxin x-components base on vant

Latest version **0.1.0** (published 2019-11-01) · ISC license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2019-11-01 |
| First published | 2019-11-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 809.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | fangshuaifeng |
| Maintainers | fangshuaifeng |
| Keywords | nxin, nxin-components |

## Links

- npm: https://www.npmjs.com/package/nxin
- Repository: https://git.dev.tencent.com/fangshuaifeng/x-components
- Homepage: https://dev.tencent.com/u/fangshuaifeng
- npm.io page: https://npm.io/package/nxin

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [vant](https://npm.io/package/vant.md) ^2.1.3

## Recent versions

- 0.1.0 (latest) — 2019-11-01
- 0.0.10 — 2019-11-01
- 0.0.9 — 2019-11-01
- 0.0.8 — 2019-11-01
- 0.0.7 — 2019-11-01
- 0.0.6 — 2019-11-01
- 0.0.5 — 2019-11-01
- 0.0.4 — 2019-11-01
- 0.0.3 — 2019-11-01

## README

# Nxin Components

## Project setup
```js
npm install nxin --save

// 配置按需加载
npm install babel-plugin-import -D

// babel.config.js

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    ["import", {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, "vant"],
    ["import", {
      libraryName: 'nxin',
      libraryDirectory: 'lib',
      style: true
    }, "nxin"]
  ]
}

```

## Quick Start
```js
import Vue from 'vue';
import Nxin from 'nxin';
Vue.use(Nxin);

import Vue from 'vue';
import { xArea, xAddress } from "nxin";
Vue.use(xArea).use(xAddress);

```

### x-area-picker
示例:
```html
<x-area-picker v-model="countryId" toolbar-position="bottom" @change="changeFn" @cancel="cancelFn" @init-address="initAddress"></x-area-picker>

<van-dropdown-menu>
    <van-dropdown-item ref="ref_city" :title="title">
        <x-area-picker v-model="countryId" toolbar-position="bottom" @change="changeFn" @cancel="cancelFn" @init-address="initAddress"></x-area-picker>
    </van-dropdown-item>
</van-dropdown-menu>
```
参数:

|       名称        |         默认值       |                   示例             |     备注             |
|-------------------|:-------------------:|:----------------------------------:|--------------------:|
|   value           |                     |   v-model="",:value=""             | 默认选中值，areaid   |
| toolbar-position  |    top              |   toolbar-position="bottom"        | 确定取消按扭显示方向  |

事件:

|      名称                  |                  示例            |     返回值         |     备注                                  |
|---------------------------|:--------------------------------:|:------------------:|-----------------------------------------:|
|   change                  |   v-on:change=""                 |    省,市,县/区      | 确认事件                                  |
|   cancel                  |   v-on:cancel=""                 |                    | 取消事件                                  |
|   init-address            |   v-on:init-address=""           |    省/市/县(区)     | 通过传入值，初始化返回完整地址              |

***

### x-area
示例:
```html
<x-area v-model="areaId" @change=""></x-area>
<x-area v-model="areaId" :show.sync="show" @change=""></x-area>
<x-area v-model="areaId" :show.sync="show" @init-address="getadd"></x-area>
```
参数:

|       名称        |         默认值       |                   示例             |     备注           |
|-------------------|:-------------------:|:----------------------------------:|------------------:|
|   value           |                     |   v-model="",:value=""             | 默认选中值，areaid |
|   show.sync       |    false            |   :show.sync=""                    |    显示隐藏        |

事件:

|      名称                  |                  示例            |     返回值         |     备注                                  |
|---------------------------|:--------------------------------:|:------------------:|-----------------------------------------:|
|   change                  |   v-on:change=""                 |    省,市,县/区      | 确认事件                                  |
|   init-address            |   v-on:init-address=""           |    省/市/县(区)     | 通过传入值，初始化返回完整地址              |

***

### x-address
示例:
```html
<x-address v-model="areaId"></x-address>
<x-address v-model="areaId" :show.sync="show"></x-address>
<x-address v-model="areaId" :show.sync="show" @change="change"></x-address>
```
参数:

|       名称        |         默认值       |                   示例             |     备注           |
|-------------------|:-------------------:|:----------------------------------:|------------------:|
|   value           |                     |   v-model="",:value=""             | 默认选中值，areaid |
|   show.sync       |    false            |   :show.sync=""                    |    显示隐藏        |

事件:

|      名称                  |                  示例            |     返回值             |     备注                                  |
|---------------------------|:--------------------------------:|:----------------------:|-----------------------------------------:|
|   change                  |   v-on:change=""                 |    省,市,县/区,完整地址  | 确认事件                                  |

***

### x-address-edit
示例:
```html
<x-address-edit :address-info="addressInfo" @save="btnSave" @delete="btnDelete"></x-address-edit>
```
参数:

|       名称        |         默认值       |                   示例             |     备注           |
|-------------------|:-------------------:|:----------------------------------:|------------------:|
|   address-info    |        {}           |   :address-info=""                 | 收货人信息初始值    |
|   show-delete     |     true            |   :show-delete="true"              |    是否显示删除按钮 |
| detail-maxlength  |    200              |   detail-maxlength="20"            |    详细地址最大长度 |

address-info 数据格式:

|       名称         |                   类型             |     备注           |
|-------------------|:----------------------------------:|------------------:|
|   id              |      string / number               | 每条地址的唯一标识  |
|   name            |      string                        | 收货人姓名         |
|   tel             |      string                        | 收货人手机号	      |
|   areaId          |      number                        | 区县Id             |
|   addressDetail   |      string                        | 详细地址	          |
|   isDefault       |      boolean                       | 是否为默认地址	   |

事件:

|      名称                  |                  示例            |     返回值               |     备注                 |
|---------------------------|:--------------------------------:|:------------------------:|-------------------------:|
|   save                    |   v-on:save=""                   |    表单内容               |   点击保存按钮时触发      |
|   delete                  |   v-on:delete=""                 |    表单内容               |   确认删除地址时触发      |
|   cancel-delete           |   v-on:cancel-delete=""          |    表单内容               |   取消删除地址时触发      |
|   change-default          |   v-on:change-default=""         |    是否选中               | 切换是否使用默认地址时触发 |

***

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