element-ui简单笔记(中)
2010 年 9 月 27 日
element-ui的简单笔记
八、Form相关组件
8.1 Radio单选按钮
1.创建Radio按钮
男
女
export default {
name: "Radio",
data(){
return{
label:'男'
}
}
}
注意:在使用radio单选按钮是至少加入v-model和label两个属性
2.Radio按钮属性的使用
男 女 女 女
总结:属性使用还是直接卸载对应的组件标签上以 属性名=属性值 方式使用
3.Radio事件的使用
男
女
export default {
name: "Radio",
data(){
return{
label:'男'
}
},
methods:{
aa(){ //定义的事件处理函数
console.log(this.label);
}
}
}
总结:
- 事件的使用也是和属性使用是一致都是直接写在对应的组件标签上
- 事件在使用时必须使用Vue中绑定时间方式进行使用如 @事件名=事件处理函数(绑在在vue组件中对应函数)
4.radio按钮组
备选项3
备选项6
备选项9
export default {
name: "Radio",
data() {
return {
radio: 6
}
}
}
8.2 checkbox组件
1.创建checkbox组件
北京 上海 天津
2.属性使用
北京 上海 天津
3.事件使用
上海
天津
export default {
name: "Checkbox",
data(){
return{
checked:true
}
},
methods:{
aa(){
console.log(this.checked);
}
}
}
4.复选框组的使用
export default {
name: "Checkbox",
data(){
return{
checked:true,
checkList:[],
}
},
methods:{
aa(){
console.log(this.checked);
},
bb(){
console.log(this.checkList);
}
}
}
8.3 Input 输入框组件
1.创建Input组件
export default {
name: "Input",
data(){
return {
name:'xiaochen'
}
}
}
2.常用属性
export default {
name: "Input",
data() {
return {
restaurants: [],
state1: '',
state2: '',
name:'xiaochen',
price:0.0,
username:"",
password:"",
};
},
}
3.事件使用
export default {
name: "Input",
data() {
return {
restaurants: [],
state1: '',
state2: '',
name:'xiaochen',
price:0.0,
username:"",
password:"",
};
},
methods:{
aaa(){
console.log('失去焦点');
;
},
bbb(){
console.log("获取焦点");
},
ccc(value){
console.log("改变:"+value);
},
clears(){
console.log("清楚");
}
}
}
4.方法的使用
方法的使用
focus方法 blur方法 export default { name: "Input", data() { return{} }, methods:{ //调用focus方法 focusInputs(){ this.$refs.inputs.focus(); }, //调用失去焦点方法 blurInputs(){ this.$refs.inputs.blur(); } } }
总结
ref="组件别名" this.$refs.组件别名.方法名()
注意:在elementui中所有组件 都存在 属性 事件 和方法
属性: 直接写在对应的组件标签上 使用方式: 属性名=属性值 方式
事件 : 直接使用vue绑定事件方式写在对应的组件标签上 使用方式: @事件名=vue中事件处理函数
方法 : 1.在对应组件标签上使用 ref=组件别名 2. 通过使用this.$refs.组件别名.方法名() 进行调用
8.4 Select选择器组件的使用
1.组件创建
# 1.数据写死在页面上
北京
天津
注意:1.要求下拉列表中必须存在option的value属性值 2.要求select中必须使用v-model进行数据绑定
# 2.如何动态获取数据
export default {
name: "Select",
data(){
return{
options:[
{id:'1',name:"研发部"},
{id:'2',name:"小卖部"},
{id:'3',name:"小米部"},
]
}
},
}
# 3.获取下拉列表选中数据
export default {
name: "Select",
data(){
return{
options:[
{id:'1',name:"研发部"},
{id:'2',name:"小卖部"},
{id:'3',name:"小米部"},
],
cityId:''
}
},
}
2.属性使用
......
3.事件的使用
export default {
name: "Select",
data(){
return{
options:[
{id:'1',name:"研发部"},
{id:'2',name:"小卖部"},
{id:'3',name:"小米部"},
],
cityId:'',
cityName:''
}
},
methods:{
aaa(value){
console.log(value);
}
}
}
4.方法的使用
1.给组件通过ref起别名并绑定到vue实例中
....
2.调用方法
this.$refs.selects.focus();//方法调用
8.5 Switch 开关组件
1.Switch组件的创建
export default {
name: "Switchs",
data(){
return{
value:true
}
}
}
2.属性使用
3.事件使用
export default {
name: "Switchs",
data(){
return{
value:true
}
},
methods:{
aaa(value){
console.log(value);
}
}
}
4.方法使用
调用方法
export default {
name: "Switchs",
data(){
return{
value:true
}
}
,
methods:{
aaa(value){
console.log(value);
},
bbb(){
alert();
this.$refs.sw.focus();//方法调用
}
}
}
8.6 DatePicker组件
1.创建
2.属性的使用
3.Picker Options 和 Shortcuts使用
- Shortcuts: 用来增加日期组件的快捷面板
- Picker Options: 用来对日期控件做自定义配置
3.1 Shortcuts使用
日期配置
export default { name: "DatePrickers", data(){ return{ createDate:"", pickerOptions: { disabledDate(time) { return time.getTime() > Date.now(); }, shortcuts: [{ //定义的shortucts text: '今天', onClick(picker) { picker.$emit('pick', new Date()); } }, { text: '昨天', onClick(picker) { const date = new Date(); date.setTime(date.getTime() - 3600 * 1000 * 24); picker.$emit('pick', date); } }, { text: '一周前', onClick(picker) { const date = new Date(); date.setTime(date.getTime() - 3600 * 1000 * 24 * 7); picker.$emit('pick', date); } }] }, } } }
3.2 Picker Options
export default {
name: "DatePrickers",
data(){
return{
createDate:"",
pickerOptions: {
disabledDate(time) { //用来对日期进行的控制
return time.getTime() < Date.now();
}
},
}
}
}
4.事件使用
export default {
name: "DatePrickers",
data(){
return{
createDate:"",
}
},
methods:{
aaa(value){ //发生change事件的函数
console.log(value);
}
}
}
8.7 Upload组件
1.组件创建
点击上传只能上传jpg/png文件，且不超过500kb
注意:在使用upload组件时必须设置action属性 action属性为必要参数不能省略
2.属性和事件的使用
将文件拖到此处，或点击上传只能上传jpg/png文件，且不超过500kbexport default { name: "Uploads", data() { return { fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }], info: {id:"21"} } }, methods:{ show(file){ console.log(file); }, remove(file,fileList){ console.log(file); console.log(fileList); //alert(fileList.length) }, beforeRemove(file,fileList){ if(fileList.length<3){ alert("上传文件不能少于3个") return false; } }, exceed(file,fileList){ alert("文件超出上传的个数限制") } } }
- 注意:在使用upload组件时没有event事件,所有事件都是属性事件
3.方法的使用
........
方法调用:
this.$refs.uploads.clearFiles();
this.$refs.uploads.abort();
this.$refs.uploads.submit();
8.8 Form组件
1.组件的创建
......
立即创建
取消
export default {
name: "Form",
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
}
2.内联表单
.......
通过设置 inline=true方式将表单作为内联表单处理
3.表单验证
- 使用说明:
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator
3.1 失去焦点自动验证
....
export default {
name: "Form",
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
rules: {
name: [
{required: true, message: '请输入活动名称', trigger: 'blur'},
{min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
],
}
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
}
3.2 表单提交调用表单组件的验证方法验证
立即创建
取消
...
methods: {
onSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
//发送异步请求 到 springboot项目
} else {
console.log('error submit!!');
return false;
}
});
}
}
4.自定义表单的验证规则
提交
重置
export default {
name: "Form",
data() {
let validatePhone = (rule,value,callback)=>{ //定义自定义的验证规则
console.log(rule);
console.log(value);
console.log(callback);
if(!value){
callback(new Error("手机号不能为空!"));
}
if(!/^1[3456789]\d{9}$/.test(value)){
callback(new Error("手机号码不正确!!"))
}
}
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
rules: { //验证规则
name: [ //使用默认规则
{required: true, message: '请输入活动名称', trigger: 'blur'},
{min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
],
phone:[ //使用自定义规则
{validator:validatePhone,trigger: 'blur'}
]
},
ruleForm:{
phone:'',
},
}
},
methods: {
}
}
element-ui的组件太多了，我也就是把我最近练习的给记录下来，其余的这里就不再一一介绍了，大家有需要的可以看文档，自行去测试。谢谢！！！
About The Author
