Element UI组件介绍_element组件都有啥

简介

element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。

1、安装Element UI，通过vue脚手架创建项

vue init webpack element(项目名)

2、在vue脚手架项目中安装elementui

# 1.下载elementui的依赖
    npm i element-ui -S
# 2.指定当前项目中使用elementui
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
  //在vue脚手架中使用elementui
    Vue.use(ElementUI);

3.按钮组件(示例)

3.1 默认样式按钮

<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>

3.2 简洁按钮

<el-row>
  <el-button plain>朴素按钮</el-button>
  <el-button type="primary" plain>主要按钮</el-button>
  <el-button type="success" plain>成功按钮</el-button>
  <el-button type="info" plain>信息按钮</el-button>
  <el-button type="warning" plain>警告按钮</el-button>
  <el-button type="danger" plain>危险按钮</el-button>
</el-row>

3.3 圆角按钮

<el-row>
  <el-button round>圆角按钮</el-button>
  <el-button type="primary" round>主要按钮</el-button>
  <el-button type="success" round>成功按钮</el-button>
  <el-button type="info" round>信息按钮</el-button>
  <el-button type="warning" round>警告按钮</el-button>
  <el-button type="danger" round>危险按钮</el-button>
</el-row>

3.4 图标按钮

<el-row>
  <el-button icon="el-icon-search" circle></el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>

4.按钮组件的详细使用

总结:日后使用element ui的相关组件时需要注意的是 所有组件都是el-组件名称开头

4.1创建按钮

<el-button>默认按钮</el-button>

4.2 按钮属性使用

<el-button type="primary" 属性名=属性值>默认按钮</el-button>
<el-button type="success" size="medium" plain=true round circle icon="el-icon-loading"></el-button>

4.3 按钮组使用

<el-button-group>
  <el-button type="primary" icon="el-icon-back">上一页</el-button>
  <el-button type="primary" icon="el-icon-right">下一页</el-button>
</el-button-group>

• 在element ui中所有组件都是 el-组件名称 方式进行命名
• 在element ui中组件的属性使用都是直接将属性名=属性值方式写在对应的组件标签上

5.Link 文字链接组件

5.1 文字链接组件的创建

<el-link>默认链接</el-link>

5.2 文字链接组件的属性的使用

<el-link  target="_blank" href="http://www.baidu.com" >默认链接</el-link>
<el-link type="primary":underline="false">默认链接</el-link>
<el-link type="success" disabled>默认链接</el-link>
<el-link type="info" icon="el-icon-platform-eleme">默认链接</el-link>
<el-link type="warning">默认链接</el-link>
<el-link type="danger">默认链接</el-link> 

6.Layout (栅格)布局组件的使用

通过基础的 24 分栏，迅速简便地创建布局
在element ui中布局组件将页面划分为多个行row,每行最多分为24栏(列)

6.1 使用Layout组件

<el-row>
    <el-col :span="8">占用8份</el-col>
  <el-col :span="8">占用8份</el-col>
  <el-col :span="8">占用8份</el-col>
</el-row>

• 在一个布局组件中 是由 row 和 col 组合而成
• 在使用时要区分 row属性 和 col属性

6.2 属性的使用

• 行属性使用

<el-row :gutter="50" tag="span">
  <el-col :span="4"><div style="border: 1px red solid;">占用4份</div></el-col>
  <el-col :span="8"><div style="border: 1px red solid;">占用8份</div></el-col>
  <el-col :span="3"><div style="border: 1px red solid;">占用3份</div></el-col>
  <el-col :span="9"><div style="border: 1px red solid;">占用9份</div></el-col>
</el-row>

列属性的使用

<el-row>
  <el-col :span="12" :offset="9" :psuh="3" xs><div style="border: 1px blue solid;">我是占用12分</div></el-col>
  <el-col :span="6"><div style="border: 1px blue solid;">我是占用6分</div></el-col>
</el-row>

7.Container 布局容器组件

7.1 创建布局容器

<el-container>
</el-container>

7.2 容器中包含的子元素

<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。

7.3 容器的嵌套使用

<!--创建容器-->
<el-container>
  <!--header-->
  <el-header><div><h1>我是标题</h1></div></el-header>
  <!--容器嵌套使用-->
  <el-container>
    <!--aside-->
    <el-aside><div><h1>我是菜单</h1></div></el-aside>
    <!--main-->
    <el-main><div><h1>我是中心内容</h1></div></el-main>
  </el-container>
  <el-footer><div><h1>我是页脚</h1></div></el-footer>
</el-container>

7.4 水平容器

<el-container direction="horizontal">
  <!--header-->
  <el-header><div><h1>我是标题</h1></div></el-header>
  <el-container>
    <!--aside-->
    <el-aside><div><h1>我是菜单</h1></div></el-aside>
    <!--main-->
    <el-main><div><h1>我是中心内容</h1></div></el-main>
  </el-container>
  <el-footer><div><h1>我是页脚</h1></div></el-footer>
</el-container>

7.5 垂直容器

<el-container direction="vertical">
  <!--header-->
  <el-header><div><h1>我是标题</h1></div></el-header>
  <el-container>
    <!--aside-->
    <el-aside><div><h1>我是菜单</h1></div></el-aside>
    <!--main-->
    <el-main><div><h1>我是中心内容</h1></div></el-main>
  </el-container>
  <!--footer-->
  <el-footer><div><h1>我是页脚</h1></div></el-footer>
</el-container>

8.Form相关组件

8.1 Radio单选按钮

创建Radio按钮

<!--组件创建-->
<el-radio v-model="label" label="男">男</el-radio>
<el-radio v-model="label" label="女">女</el-radio>
<script>
    export default {
        name: "Radio",
        data(){
            return{
                label:'男'
            }
        }
    }
</script>

Radio按钮属性的使用

<el-radio v-model="label" name="sex" disabled label="男">男</el-radio>
<el-radio v-model="label" name="sex" border size="small" label="女">女</el-radio>
<el-radio v-model="label" border size="mini" label="女">女</el-radio>
<el-radio v-model="label" border size="medium" label="女">女</el-radio>

Radio事件的使用

<el-radio v-model="label" @change="aa" name="sex" label="男">男</el-radio>
<el-radio v-model="label" @change="aa" name="sex" border size="small" label="女">女</el-radio>
<script>
    export default {
        name: "Radio",
        data(){
            return{
                label:'男'
            }
        },
        methods:{
            aa(){ //定义的事件处理函数
                console.log(this.label);
            }
        }
    }
</script>

• 事件的使用也是和属性使用是一致都是直接写在对应的组件标签上
• 事件在使用时必须使用Vue中绑定时间方式进行使用如 @事件名=事件处理函数(绑在在vue组件中对应函数)

9、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>
<script>
  export default {
    name: "Radio",
    data() {
      return {
        radio: 6
      }
    }
  }
</script>

10、checkbox组件

10.1、创建checkbox组件

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

10.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>

10.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>

10.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>

11、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.组件别名.方法名()

注意:在elementui中所有组件 都存在 属性 事件 和方法
属性: 直接写在对应的组件标签上 使用方式:属性名=属性值`方式
事件`: 直接使用vue绑定事件方式写在对应的组件标签上 使用方式:`@事件名=vue中事件处理函数
方法: 1.在对应组件标签上使用 ref=组件别名 2. 通过使用this.$refs.组件别名.方法名()进行调用