luckyzhou-ui v0.2.0

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 参数支持

1.1.2 事件支持

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 参数支持

1.2.2 事件支持

1.2.3 插槽说明

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 参数支持

1.3.2 插槽说明

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 参数支持

1.4.2 事件支持

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 参数支持

1.5.2 事件支持

1.5.3 代码

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

1.6 radio单选框

1.6.1 参数支持

1.6.2 插槽说明

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 参数说明

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 参数

1.8.2 插槽说明

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 参数说明

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 参数说明

2.0.2 插槽说明

2.0.3 代码

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

2.1 form-item 表单域

2.1.1 参数说明

2.1.2 插槽说明

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 参数说明

2.2.2 代码

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

2.3 backtop 返回顶部

2.3.1 参数说明

2.3.2 代码

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