Webcomponens NPM

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"
        }
      ]
    },
]