vue基于mint-ui的城市选择3级联动的示例

项目是基于 vue2 的移动端项目

1、实际效果

地址三级联动 mint-ui picker.png

2、首先你需要去下载一个包含中国省份,城市,区县的数据

如下:

https://github.com/artiely/Administrative-divisions-of-China(里面包含二级联动数据,三级联动数据,四级联动数据等,找到自己需要的)

3、具体代码
主要是用到了mint-ui的picker组件,关于mint-ui的使用就自行看官网

Ⅰ 、html组件

?

1

2

3

4

<div>

  <mt-picker :slots="myAddressSlots" @change="onMyAddressChange">mt-picker>

  <p>地址3级联动:{{myAddressProvince}} {{myAddressCity}} {{myAddresscounty}}p>

div>

Ⅱ 、组件方法

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

你可能感兴趣的:(vuejs,mint-ui)