vueblu之Form 表单元素案例记录

描述

1、Form 表单元素使用：Input，Select, DatePicker, Radio, Checkbox, Switch, Textarea, Button。
2、基于原生Html的Input。
3、关于表单元素项的校验信息仅做展示，实际需与事件结合。

问题记录

1、Datepicker：报错： "class" is a reserved attribute and cannot be used as component prop.
此组件存在将关键字class作为prop接收值使用。
2、Radio：使用单选按钮，当value值为英文[Man,Woman,Male,Female]时，首字母必须大写，否则单选无效。

案例

<template>
    <div>
        <div class="columns">
            <div class="column is-3">
                <p class="notification"><label class="label">姓名</label></p>
            </div>
            <div class="column is-9">
                <p class="notification">
                    <input v-model="info.username" class="input" type="text" placeholder="Text input">
                </p>
            </div>
        </div>

        <div class="columns">
            <div class="column is-3">
                <p class="notification"><label class="label">年龄</label></p>
            </div>
            <div class="column is-9">
                <p class="notification">
                    <input-number v-model="info.age" mode="s" :max="200" :min="1" :step="1" :on-change="handleNumber"></input-number>
                </p>
            </div>
        </div>

        <div class="columns">
            <div class="column is-3">
                <p class="notification"><label class="label">出生年月</label></p>
            </div>
            <div class="column is-9">
                <p class="notification">
                <!-- 报错： "class" is a reserved attribute and cannot be used as component prop.-->                
                    <datepicker placeholder="Select Date.."></datepicker>
                </p>
            </div>
        </div>

        <div class="columns">
            <div class="column is-3">
                <p class="notification"><label class="label">学历</label></p>
            </div>
            <div class="column is-9">
                <p class="notification">
                    <radio-group v-model="info.schooling">
                        <radio-button val="0">无</radio-button>
                        <radio-button val="1">小学</radio-button>
                        <radio-button val="2">初中</radio-button>
                        <radio-button val="3">高中</radio-button>
                        <radio-button val="4">大专</radio-button>
                        <radio-button val="5">本科</radio-button>
                        <radio-button val="6">研究生</radio-button>
                        <radio-button val="7">博士</radio-button>
                        <radio-button val="8">硕士</radio-button>
                    </radio-group>
                </p>
            </div>
        </div>

        <div class="columns">
            <div class="column is-3">
                <p class="notification"><label class="label">性别</label></p>
            </div>
            <div class="column is-9">
                <p class="notification">
                    <!-- 当val值为英文[Man,Woman,Male,Female]时，首字母必须大写，否则单选无效 -->
                    <radio-group v-model="info.sex" :on-change="handleRadio">
                        <radio val="Man">男</radio>
                        <radio val="Woman">女</radio>
                    </radio-group>
                </p>
            </div>
        </div>

        <div class="columns">
            <div class="column is-3">
                <p class="notification"><label class="label">喜好</label></p>
            </div>
            <div class="column is-9">
                <p class="notification">
                    <checkbox-group v-model="info.habby" :on-change="handleCheckbox">
                        <checkbox val="read">阅读</checkbox>
                        <checkbox val="swim">游泳</checkbox>
                        <checkbox val="hike">远足</checkbox>
                        <checkbox val="ride">骑行</checkbox>
                    </checkbox-group>
                </p>
            </div>
        </div>

        <div class="columns">
            <div class="column is-3">
                <p class="notification"><label class="label">民族</label></p>
            </div>
            <div class="column is-9">
                <p class="notification">
                    <select style=" 100%;" v-model="info.nation">
                        <option>汉族</option>
                        <option>满族</option>
                    </select>
                </p>
            </div>
        </div>

        <div class="columns">
            <div class="column is-3">
                <p class="notification"><label class="label">是否待业</label></p>
            </div>
            <div class="column is-9">
                <p class="notification">
                    <b-switch on-text="是" off-text="否" v-model="info.work" :on-change="handleSwitch"></b-switch>
                </p>
            </div>
        </div>

         <div class="columns">
            <div class="column is-3">
                <p class="notification"><label class="label">自我描述</label></p>
            </div>
            <div class="column is-9">
                <p class="notification">
                    <textarea v-model="info.desc" class="textarea" placeholder="Textarea"></textarea>
                </p>
            </div>
        </div>

        <div class="columns">
            <div class="column is-3">
                <p class="notification"><label class="label">检验成功</label></p>
            </div>
            <div class="column is-9">
                <p class="notification dflex">
                    <input class="input is-success" type="text" placeholder="Text input" value="bulma">
                    <i class="fa fa-check"></i>
                    <span class="help is-success">This username is available</span>
                </p>
            </div>
        </div>

        <div class="columns">
            <div class="column is-3">
                <p class="notification"><label class="label">检验失败</label></p>
            </div>
            <div class="column is-9">
                <p class="notification dflex">
                    <input class="input is-danger" type="text" placeholder="Email input" value="hello@">
                    <i class="fa fa-warning"></i>
                    <span class="help is-danger">This email is invalid</span>
                </p>
            </div>
        </div>

         <div class="columns">
            <div class="column is-12">
                <p class="notification">
                    <button class="button is-primary"><span class="icon"><i class="fa fa-check"></i>&nbsp;</span>确定</button>
                    <button class="button"><span class="icon"><i class="fa fa-times"></i>&nbsp;</span>取消</button>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'BluUserInfo',
    props: {
        info: {
            type: Object,
            default: () => {
                return {
                }
            }
        }
    },
    data() {
        return {
        }
    },
    components: {
    },
    created() {},
    mounted() {},
    computed: {},
    watch: {},
    methods:{
        handleRadio(val) {
            console.log('单选按钮==', val);
            
        },
        handleNumber(val) {
            console.log('数字框==', val);
            
        },
        handleSwitch(val) {
            console.log('开关==', val);
            
        },
        handleCheckbox(val){
            console.log('复选框==', val);
            
        }
    }
}
</script>

<style lang="less" scoped>
.dflex{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
</style>