The effect

Demo address: licong96. Making. IO/work/lc – cit…

Without relying on

Pure JS handwriting, does not rely on any plug-ins

The installation

NPM installation or CNPM:

    npm install lc-city-selector --save
Copy the code

Yarn installation:

    yarn add lc-city-selector
Copy the code

use

import LcCity from 'lc-city-selector'; var City = new LcCity(); // create the instantiation object city.show (); // Execute the show methodCopy the code

confirm

Callback function to retrieve the selected locale

import LcCity from 'lc-city-selector'; var City = new LcCity({ confirm: function (data) { console.log(data); // data is the selected locale, a concatenated string}}); ---------- If you don't want to use the callback method you can use the 'city.getSelect ()' method to get the currently selected locale directlyCopy the code

Data backfill

If you already have data and want to backfill it, you can add a data argument, but be careful about its format

import LcCity from 'lc-city-selector'; Var City = new LcCity({data: {province: 'jiangxi ', City:' nanchang ', district: 'Qingshishan ',}}); Note: the key should be the same, the value should be complete, and the words "province", "city" and "district" should not be omittedCopy the code

parameter

parameter type instructions The default value
data Object Data that needs to be backfilled empty
confirm Function Trigger the OK button to return to the selected region empty
cancel Function Triggers the cancel button with no return value empty

API

  1. show()Open the selector
  2. close()Close the selector
  3. getSelect()Gets the currently selected region, concatenated into a string
  4. getSelectObj()Gets the currently selected region and returns an object

The computer side needs to be careful

Even though the styles are compatible, the selector is offset, so when I open it on the computer, I need to pass in an element, and I’m going to assign the element’s position from the screen to the selector, so that the selector and the element come together

import LcCity from 'lc-city-selector'; var City = new LcCity(); Var oInput = document.getelementById ('input'); var oInput = document.getelementById ('input'); oInput.addEventListener('click', function() { City.show(this); // this refers to oInput});Copy the code

GitHub address: github.com/licong96/lc…