element-ui学习笔记（2）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天,点击查看活动详情 >>

6.form组件

1.单选框

<template>
  <div>
    <h1>radio组件使用</h1>
    <el-radio label="男" v-model="label">男</el-radio>
    <el-radio label="女" v-model="label">女</el-radio>
  </div>
</template>

<script>
export default {
  name: "Radiio",
  data(){
    return {
      label: '男'
    }
  }
}
</script>

必须有v-model和label

2.事件的使用

事件的使用和属性使用是一致的 都是直接写在对应的标签上

需要加上@符号表示事件，必须使用vue中绑定事件的方式使用

<template>
  <div>
    <h1>radio组件使用</h1>
    <el-radio label="男" v-model="label" name="sex" @change="aa">男</el-radio>
    <el-radio label="女" v-model="label" name="sex" @change="aa">女</el-radio>
  </div>
</template>

<script>
export default {
  name: "Radiio",
  data(){
    return {
      label: '男'
    }
  },
  methods:{
    aa(){
      console.log(this.label);
    }
  }
}
</script>

3.radio按钮组

<el-radio-group v-model="radio">
  <el-radio :label="3">备选项3</el-radio>
  <el-radio :label="6">备选项6</el-radio>
  <el-radio :label="9">备选项9</el-radio>
</el-radio-group>

4.checkbox组件

1.创建checkbox组件

<el-checkbox v-model="checked">北京</el-checkbox>
<el-checkbox v-model="checked">上海</el-checkbox>
<el-checkbox v-model="checked">天津</el-checkbox>

2.属性使用

<el-checkbox v-model="checked"  disabled true-label="北京">北京</el-checkbox>
<el-checkbox checked border true-label="上海">上海</el-checkbox>
<el-checkbox v-model="checked" true-label="天津">天津</el-checkbox>

3.事件使用

<el-checkbox @change="aa"v-model="checked"  true-label="上海">上海</el-checkbox>
<el-checkbox v-model="checked" @change="aa" true-label="天津">天津</el-checkbox>
<script>
    export default {
        name: "Checkbox",
        data(){
            return{
                checked:true
            }
        },
        methods:{
            aa(){
                console.log(this.checked);
            }
        }
    }
</script>

4.复选框组的使用

<el-checkbox-group @change="bb" :min="1" v-model="checkList">
  <el-checkbox label="复选框 A"></el-checkbox>
  <el-checkbox label="复选框 B"></el-checkbox>
  <el-checkbox label="复选框 C"></el-checkbox>
  <el-checkbox label="禁用" disabled></el-checkbox>
  <el-checkbox label="选中且禁用" disabled></el-checkbox>
</el-checkbox-group>
<script>
    export default {
        name: "Checkbox",
        data(){
            return{
                checked:true,
                checkList:[],
            }
        },
        methods:{
            aa(){
                console.log(this.checked);
            },
            bb(){
                console.log(this.checkList);
            }
        }
    }
</script>

7. Input 输入框组件

1.创建Input组件

<el-input v-model="name"></el-input>
<script>
    export default {
        name: "Input",
        data(){
            return {
                name:'xiaochen'
            }
        }
    }
</script>

2.常用属性

<el-input v-model="name" disabled type="textarea"></el-input>
<el-input v-model="price" :maxlength="10" show-word-limit :minlength="5"></el-input>
<el-input prefix-icon="el-icon-user-solid" placeholder="请输入用户名" clearable v-model="username"></el-input>
<el-input suffix-icon="el-icon-star-off" placeholder="请输入密码" show-password type="password" clearable v-model="password"></el-input>
<script>
    export default {
        name: "Input",
        data() {
            return {
                restaurants: [],
                state1: '',
                state2: '',
                name:'xiaochen',
                price:0.0,
                username:"",
                password:"",
            };
        },
    }
</script>

3.事件使用

<el-input v-model="username" @blur="aaa" @focus="bbb" @clear="clears" clearable @input="ccc"></el-input>
<script>
    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("清楚");
            }


        }
    }
</script>

4.方法的使用

<h1>方法的使用</h1>
<el-input v-model="username" ref="inputs"></el-input>

<el-button @click="focusInputs">focus方法</el-button>
<el-button @click="blurInputs">blur方法</el-button>

<script>
    export default {
        name: "Input",
        data() {
            return{}
        },
        methods:{
            //调用focus方法
            focusInputs(){
                this.$refs.inputs.focus();
            },
           //调用失去焦点方法
            blurInputs(){
                this.$refs.inputs.blur();
            }
        }
    }
</script>

总结

• 在使用组件的方法时需要在对应的组件中加入 ref="组件别名"
• 在调用方法时直接使用 this.$refs.组件别名.方法名()