vue-blu之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="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> </span>确定</button>
<button class="button"><span class="icon"><i class="fa fa-times"></i> </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