Nxin NPM | npm.io

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