Nxin Components

Project setup

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

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

示例:

<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

示例:

<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

示例:

<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

示例:

<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="" | 是否选中 | 切换是否使用默认地址时触发 |