lucky-ui

1. 安装
npm install lucky-wen-ui
2. 使用
import LuckyUI from 'lucky-wen-ui'
import 'luckyzhou-ui/dist/luckyzhou-ui.css'
Vue.use(LuckyUI)

1.1 button按钮

1.1.1 参数支持

| 参数名 | 参数描述 | 参数类型 | 默认值 | | -------- | ------------------------------------ | -------- | ------- | | type | 按钮类型(primary / success / danger) | string | default | | plain | 是否是朴素按钮 | boolean | false | | round | 是否是圆角按钮 | boolean | false | | circle | 是否是圆形按钮 | boolean | false | | disabled | 是否禁用按钮 | boolean | false | | icon | 图标类名 | string | 无 |

1.1.2 事件支持

| 事件名 | 事件描述 | | ------ | -------- | | click | 点击事件 |

1.1.3 代码

<lu-button type="primary">主要按钮</lu-button>
<lu-button type="primary" plain>主要按钮</lu-button>
<lu-button type="primary" round>主要按钮</lu-button>
<lu-button type="primary" circle plain>拆</lu-button>
<lu-button circle icon="lu-icon-home"></lu-button>
<lu-button disabled>默认</lu-button>

1.2 dialog模态框

1.2.1 参数支持

| 参数名 | 参数描述 | 参数类型 | 默认值 | | ------- | -------------------------------- | -------- | ------ | | title | 对话框标题 | string | 提示 | | width | 宽度 | string | 50% | | top | 与顶部距离 | string | 15vh | | visible | 是否显示dialog（支持sync修饰符） | boolean | false |

1.2.2 事件支持

| 事件名 | 事件描述 | | ------ | ---------------- | | opened | 模态框显示的事件 | | closed | 模态框关闭的事件 |

1.2.3 插槽说明

| 插槽名称 | 插槽描述 | | -------- | ------------------ | | default | dialog的内容 | | title | dialog的标题 | | footer | dialog的底部操作区 |

1.2.4 代码

        <lu-button type="primary" @click="visible = true">点击弹出dialog</lu-button>
        <lu-dialog title="我是一个标题" top="100px" width="50%" :visible="visible" @close="close">
            <ul>
                <li>我是内容</li>
                <li>我也是内容</li>
            </ul>
            <template v-slot:footer>
                <lu-button @click="visible = false">取消</lu-button>
                <lu-button type="primary" @click="visible = false">确定</lu-button>
            </template>
        </lu-dialog>

        data() {
            return {
                visible: false,
            }
        }

1.3 result结果

1.3.1 参数支持

| 参数名 | 参数描述 | 参数类型 | 默认值 | | --------- | ------------------------------------------ | -------- | ------------------ | | title | 标题 | string | 提示 | | sub-title | 二级标题 | string | 请根据提示进行操作 | | type | 图标类型(success / warning / info / error) | string | info | | icon | 图标 | string | lu-icon-info |

1.3.2 插槽说明

| 插槽名称 | 插槽描述 | | -------- | ------------------ | | icon | 自定义图标 | | title | 自定义标题 | | subTitle | 自定义二级标题 | | extra | 自定义底部额外区域 |

1.3.3 代码

<lu-result title="成功提示" type="success" icon="lu-icon-checkbox-checked">
    <template v-slot:extra>
    	<lu-button>返回</lu-button>
    </template>
</lu-result>

1.4 input输入框

1.4.1 参数支持

| 参数名 | 参数描述 | 参数类型 | 默认值 | | ------------- | ----------------------------- | -------- | ------ | | placeholder | 占位符 | string | 无 | | type | 文本框类型（text / password） | string | text | | disabled | 禁用 | boolean | false | | clearable | 是否显示清空按钮 | boolean | false | | show-password | 是否显示密码切换按钮 | boolean | false | | name | name属性 | string | 无 |

1.4.2 事件支持

| 事件名 | 事件描述 | | ------ | -------- | | blur | 失去焦点 | | change | 内容改变 | | focus | 获得焦点 |

1.4.3 代码

<lu-input placeholder="占位符" :disabled="true"></lu-input>
<lu-input v-model="username" show-password></lu-input>
<lu-input clearable v-model="username"></lu-input>

1.5 switch开关

1.5.1 参数支持

| 参数名称 | 参数描述 | 参数类型 | 默认值 | | ------------- | ------------------ | -------- | ------ | | v-model | 双向数据绑定 | boolean | false | | name | name属性 | string | text | | activeColor | 自定义激活的颜色 | string | | | inactiveColor | 自定义不激活的颜色 | string | |

1.5.2 事件支持

| 事件名 | 事件描述 | | ------ | -------- | | change | 状态改变 |

1.5.3 代码

<lu-switch v-model="Toggle" name="status" active-color="red" inactive-color="pink"></lu-switch>

1.6 radio单选框

1.6.1 参数支持

| 参数名称 | 参数描述 | 参数类型 | 默认值 | | -------- | -------------- | ------------------------- | ------ | | name | name属性 | string | | | label | radio 的 value | string / number / boolean | | | v-model | 双向数据绑定 | | |

1.6.2 插槽说明

| 插槽名称 | 插槽描述 | | -------- | -------- | | default | 文字 |

1.6.3 代码

<lu-radio name="sex" label="1" v-model="sex">男</lu-radio>
<lu-radio name="sex" label="0" v-model="sex">女</lu-radio>

1.7 radio-group 单选框组

1.7.1 参数说明

| 参数名称 | 参数描述 | 参数类型 | 默认值 | | -------- | ------------ | ------------------------- | ------ | | v-model | 双向数据绑定 | string / number / boolean | |

1.7.2 代码

<lu-radio-group v-model="sex">
    <lu-radio label="1">男</lu-radio>
    <lu-radio label="0">女</lu-radio>
</lu-radio-group>

1.8 checkbox 复选框

1.8.1 参数

| 更多操作参数名称 | 参数描述 | 参数类型 | 默认值 | | ---------------- | ----------------- | ------------------------- | ------ | | name | name属性 | string | | | label | checkbox 的 value | string / number / boolean | | | v-model | 双向数据绑定 | | |

1.8.2 插槽说明

| 插槽名称 | 插槽描述 | | -------- | -------- | | default | 描述 |

1.8.3 代码

<lu-checkbox v-model="active">是否选中</lu-checkbox>
<lu-checkbox v-model="active" name="lan" label="篮球"></lu-checkbox>

1.9 checkbox-group 复选框组

1.9.1 参数说明

| 参数名称 | 参数描述 | 参数类型 | 默认值 | | -------- | ------------ | -------- | ------ | | v-model | 双向数据绑定 | | |

1.9.2 代码

<lu-checkbox-group v-model="arr">
    <lu-checkbox label="pink"></lu-checkbox>
    <lu-checkbox label="green"></lu-checkbox>
    <lu-checkbox label="red"></lu-checkbox>
</lu-checkbox-group>

2.0 form 表单

2.0.1 参数说明

| 参数名称 | 参数描述 | 参数类型 | 默认值 | | ----------- | ------------ | -------- | ------ | | model | 表单数据对象 | object | {} | | label-width | label的宽度 | String | 80px |

2.0.2 插槽说明

| 插槽名称 | 插槽描述 | | -------- | -------- | | default | 表单元素 |

2.0.3 代码

<lu-form :model="form" label-width="100px">
	
</lu-form>

2.1 form-item 表单域

2.1.1 参数说明

| 参数名称 | 参数描述 | 参数类型 | 默认值 | | -------- | -------- | -------- | ------ | | label | 文字描述 | String | |

2.1.2 插槽说明

| 插槽名称 | 插槽描述 | | -------- | -------- | | default | 表单元素 |

2.1.3 代码

    <lu-form :model="form" label-width="100px">
      <lu-form-item label="用户名">
        <lu-input placeholder="请输入用户名" v-model="form.username"></lu-input>
      </lu-form-item>
      <lu-form-item label="开关">
        <lu-switch v-model="form.active"></lu-switch>
      </lu-form-item>
    </lu-form>

2.2 message 提示框

2.2.1 参数说明

| 参数名称 | 参数描述 | 参数类型 | 默认值 | | -------- | -------------------------------------- | -------- | ---------------- | | message | 文本 | String | 这是一条消息提示 | | type | 类型(success / warning / info / error) | string | info | | icon | 图标 | string | lu-icon-infofill |

2.2.2 代码

Click() {
      this.$message({
        message: '这是文本信息',
        type: 'warning',
        icon: 'lu-icon-time'
      })
    }

2.3 backtop 返回顶部

2.3.1 参数说明

| 参数名称 | 参数描述 | 参数类型 | 默认值 | | ----------------- | -------------------------------- | ------------- | --------------------- | | visibility-height | 滚动高度达到此参数值才出现 | string/number | 200 | | right | 控制其显示位置, 距离页面右边距 | string/number | 40 | | bottom | 控制其显示位置, 距离页面底部距离 | string/number | 40 | | icon | 图标 | string | lu-icon-arrow_up_fill |

2.3.2 代码

<lu-backtop visibility-height="300" right="100" bottom="100" icon="lu-icon-oppose_fill_light"></lu-backtop>