Vue-m-cascader NPM

Try the demo

Installation :package:

Run:

npm install vue-m-cascader
or
yarn add vue-m-cascader

Module import

Either import the components independantly for local registration:

import myCascader from 'vue-m-cascader'

const Component = {

  components: {
    myCascader
  },

  // ...
))

Classic import

Vue itself must be included first. Then add the following JS file:

<script src="vue-m-cascader.min.js">

⚠️ if use register by classic import , you have to use this

<vue-m-cascader
  :data="data"
  @change="change"
/>

All components are automatically registered globally. Use kebab-case to reference them in your templates:

Example

<template>
  <div id="app">
    <myCascader
      :data="data"
      @change="change"
      :active="active"
    />
  </div>
</template>
 
<script>
import myCascader from "vue-m-cascader";
export default {
  name: "app",
  components: { myCascader },
  data: () => ({
    active:['zhejiang','wenzhou','dongtou'],
    data: [
      {
        label: "浙江",
        value: "zhejiang",
        children: [
          {
            label: "温州",
            value: "wenzhou",
            disabled: true,
            children: [
              {
                label: "洞头区",
                value: "dongtou"
              }
            ]
          },
          {
            label: "宁波",
            value: "ninbo"
          },
          {
            label: "义乌",
            value: "yiwu"
          }
        ]
      },
      {
        label: "福建",
        value: "fujian",
        children: [
          {
            label: "拱墅",
            value: "gongshu",
            disabled: true
          },
          {
            label: "萧山",
            value: "xiaoshan"
          }
        ]
      },
      {
        label: "无数据",
        value: "noData"
      }
    ]
  }),
  methods: {
    change() {
      console.log(arguments);
    }
  }
};
</script>

npm.io