webcomponens

组件使用

npm i webcomponens

全局引入

import webcomponens from 'webcomponens'
import 'webcomponens/lib/index/style.css'

Vue.use(webcomponens)

按需引入

安装插件：babel-plugin-import

npm i babel-plugin-import -D

配置.babelrc文件：

{
 "presets": ["@vue/app", ["@babel/preset-env", { "modules": false }]],
 "plugins": [
   [
     "import",
     {
       "libraryName": "webcomponens",
       "style": true
     }
   ]
 ]
}

import {Button, Input} from 'webcomponens'
Vue.use(Button)
Vue.use(Input)

CDN

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/webcomponens/lib/index/style.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/webcomponens/lib/index/index.js"></script>

使用

SelectCity 组件

<SelectCity  @send-city-all-data="getCityAllData" :cityDataChild="firstAllCityData" v-show="showCityDialog"></SelectCity>
isShowCityDialog:是否展示
send-city-all-data：确定按钮回调返回，data.data为所选城市数据
	 // 获取城市组件传过来的值
    getCityAllData(data) {
      let that = this;
      that.isShowCityDialog = data.done;
      if (!data.data) return;
      that.firstAllCityData = data.data;
    },
city-data-child：数据格式
[
	{
      "provinceId": 2,
      "provinceName": "北京",
      "provinceLevel": 0,
      "provinceSpellName": "beijing",
      "firstLetter": "B",
      "cities": [
        {
          "cityId": 201,
          "cityName": "北京市",
          "cityLevel": 1,
          "citySpellName": "beijing"
        }
      ]
    },
    {
      "provinceId": 3,
      "provinceName": "福建省",
      "provinceLevel": 0,
      "provinceSpellName": "fujian",
      "firstLetter": "F",
      "cities": [
        {
          "cityId": 301,
          "cityName": "福州市",
          "cityLevel": 3,
          "citySpellName": "fuzhou"
        },
        {
          "cityId": 302,
          "cityName": "厦门市",
          "cityLevel": 3,
          "citySpellName": "xiamen"
        },
        {
          "cityId": 303,
          "cityName": "龙岩市",
          "cityLevel": 4,
          "citySpellName": "longyan"
        },
        {
          "cityId": 305,
          "cityName": "漳州市",
          "cityLevel": 4,
          "citySpellName": "zhangzhou"
        },
        {
          "cityId": 306,
          "cityName": "莆田市",
          "cityLevel": 4,
          "citySpellName": "putian"
        },
        {
          "cityId": 307,
          "cityName": "泉州市",
          "cityLevel": 3,
          "citySpellName": "quanzhou"
        },
        {
          "cityId": 314,
          "cityName": "南平市",
          "cityLevel": 4,
          "citySpellName": "nanping"
        },
        {
          "cityId": 315,
          "cityName": "宁德市",
          "cityLevel": 4,
          "citySpellName": "ningde"
        },
        {
          "cityId": 318,
          "cityName": "三明市",
          "cityLevel": 4,
          "citySpellName": "sanming"
        }
      ]
    },
]

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.