标签：flex vue console Form val blu 表单 单选 log

描述

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="width: 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>

标签：flex,vue,console,Form,val,blu,表单,单选,log
来源： https://www.cnblogs.com/min77/p/16521169.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。