Flyingd-cascader NPM

移动端vue组件-级联选择器

https://github.com/flyingdwang/flyingd-cascader.git

安装

cnpm install flyingd-cascader --save-dev

演示代码

<flyingd-cascader v-model="cascaderOption" :visible.sync="cascaderVisible" :options="options"  :cascadervalue="cascadervalue" :cascaderlabel="cascaderlabel" :placeholder="cascaderPlaceholder"
           :cascaderchildren="cascaderchildren"  popper-class='flyingdwang-cascader'   @change="cascaderFun" 
        ></flyingd-cascader>

<script>
import flyingdCascader from 'flyingd-cascader';
export default {
  name: 'demo',
  components:{
    flyingdCascader
  },
  data () {
    return {
      options: [
          {
          value: 'ziyuan',
          label: '资源',
          children: [{
              value: 'axure',
              label: 'Axure Components'
          }, {
              value: 'sketch',
              label: 'Sketch Templates',
              disabled:true,
	
          }, {
              value: 'jiaohu',
              label: '组件交互文档',
               children: [{
                  value: 'table',
                  label: 'Table 表格'
                  }, {
                  value: 'tag',
                  label: 'Tag 标签'
                  }, {
                  value: 'progress',
                  label: 'Progress 进度条'
                  }, {
                  value: 'tree',
                  label: 'Tree 树形控件'
                  }, {
                  value: 'pagination',
                  label: 'Pagination 分页'
                  }, {
                  value: 'badge',
                  label: 'Badge 标记'
               }]
          	}]
          }
      ],
      cascadervalue:'value',
      cascaderlabel:'label',
      cascaderchildren:'children',
      cascaderOption:["ziyuan"],
      cascaderPlaceholder:['请选择资源','请选择组件','请选择参数'],
      cascaderVisible:false,
    }
  },
  methods: {
    cascaderFun:function (option){
        console.log(option,this.cascaderOption);
    },
      
  },
}
</script>

参数说明 :

参数	说明	类型	默认值
visible	是否显示 cascader	boolean	false
options	可选项数据源，键名可通过 props 属性配置	Array	-
value	选中项绑定值	Array	-
cascadervalue	指定选项的值为选项对象的某个属性值	string	value
cascaderlabel	指定选项标签为选项对象的某个属性值	string	label
cascaderchildren	指定选项的子选项为选项对象的某个属性值	string	children
disabled	指定选项的禁用为选项对象的某个属性值	Boolean	false
popper-class	自定义浮层类名	string	-
cascaderPlaceholder	占位文本	Array	-