Flyingd-ui NPM

基于vue功能组件

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

安装

cnpm install flyingd-ui -S

快速使用

import Vue from 'vue'
import FlUi from 'flyingd-ui';

Vue.use(FlUi);

// or
import {
  FlCascader,
  FlTransferGroup
  // ...
} from 'flyingd-ui'

Vue.component(FlCascader.name, FlCascader)
Vue.component(FlTransferGroup.name, FlTransferGroup)

组件

1. FlCascader 级联选择器(移动端)

2. FlCheckboxRadioGroup 多选与单选tab按钮组合

3. FlDraggableGroup 拖拽组件--多组

4. FlTransferGroup 穿梭框 - 多组

5. FlRouterTaps 路由tab栏

一. FlCascader 参数说明 :

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

props

参数	说明	类型	默认值
value	对象属性值	string	-
label	对象属性值	string	-
children	子选项	Array	-
disabled	是否禁用	Boolean	-

Events

事件名称	说明	回调参数
change	当绑定值变化时触发的事件 ==> function(option)	所有值
close	关闭弹窗回调

二. FlCheckboxRadioGroup 参数说明

参数	说明	类型	可选值	默认值
value / v-model	选中项绑定值	-	-	-
type	类型	String	radio / checkbox	-
name	名称	String	-	-
data	可选项数据源，键名可通过 props 属性配置	Array,Object	-	-
plusData	在data数据前面加入参数	Array	-	-
selectedValue	指定选项的值为选项对象的某个属性值	String	-	value
selectedLabel	指定选项标签为选项对象的某个属性值	String	-	label
width	name名称宽度	Number	-	68
disabled	是否禁用	Boolean		false

props

参数	说明	类型	默认值
value	对象属性值	string	-
label	对象属性值	string	-
disabled	是否禁用	Boolean	-

Events

事件名称	说明	回调参数
change	当绑定值变化时触发的事件 ==> function(option)	所有值

三. FlDraggableGroup 参数说明

参数	说明	类型	默认值
value / v-model	选中项绑定值	Object	-
isGrouping	是否开启分组	Boolean	false
isShowGroupLabel	是否显示分组序号	Boolean	false
clearable	是否可以清除选项	Boolean	false
width	宽度	string	400px

Events

事件名称	说明	回调参数
change	当绑定值变化时触发的事件 ==> function(option)	所有值

四. FlTransferGroup 参数说明

参数	说明	类型	默认值
data	可选项数据源，键名可通过 props 属性配置	Array,Object	-
:configData.sync	穿梭组数据绑定	Object	--
name	名称	String	-
selectedValue	指定选项的值为选项对象的某个属性值	String	value
selectedLabel	指定选项标签为选项对象的某个属性值	String	label
width	宽度	String,Number	"650"
height	高度	String,Number	-
disabled	是否禁用	Boolean	-

props

参数	说明	类型	默认值
value	对象绑定值	Array	-
name	组名称	string	-
btnName	按钮文字	string	-

演示代码

<template>
	<fl-transfer-group :data="audienceOption" :configData.sync="crowd" name="可选人群包" 	selectedValue="label"></fl-transfer-group>
</template>

<script>
  export default {
    data() {
      return {
          audienceOption:[ {label:'测试数据1', disabled:true },{label:'测试数据2'},					{label:'测试数据3'} ],
          crowd:{
              customAudience:{
                  name:'定向人群',
                  btnName:'添加定向人群',
                  value:["测试数据2"],
              },
              excludedCustomAudience:{
                  name:'排除人群',
                  btnName:'添加排除人群',
                  value:[],
              },
          },

      }
    }
  }
</script>

五. FlRouterTaps 参数说明

参数	说明	类型	默认值
:options.sync="routeTaps"	可选项数据源，键名可通过 props 属性配置	array	-
prohibitData	禁用数据	array	"/404"
homePath	首页路径	String	"/"
showHome	是否显示首页标签	Boolean	true

Events

事件名称	说明	回调参数
change	当绑定值变化时触发的事件 ==> function(option)	所有值

@everything-registry/sub-chunk-1686

0.0.1

3 years ago