element-ui简单笔记

Posted 2021-06-03 辣可乐少加冰

文章目录

• 前言
• 一、 element-ui简介
• • 1.1Element UI 引言
  • 1.2 定义
  • 1.3 由来
• 二、element-ui 的安装
• • 2.1 通过vue脚手架暗转
  • 2.2 在vue脚手架项目中安装
• 三、按钮组件实例
• • 3.1 默认样式
  • 3.2 简洁样式
  • 3.3 图标按钮
• 四、按钮组件的详细使用
• • 4.1 创建按钮
  • 4.2 按钮属性
• link 文字链接
• • 5.1 文字链接组建的创建
  • 5.2 文字链接组件的属性的使用
• 六、Layout(栅格)布局组件
• • 6.1 使用Layout组件
• 七、Container布局容器组件
• • 7.1 创建布局容器
  • 7.2 容器中包含的子元素
  • 7.3 容器的嵌套使用
• 八、Form相关组件

---

前言

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

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、 element-ui简介

1.1Element UI 引言

Element，基于 Vue 2.0 的桌面端组件库，网站快速成型工具 和 桌面端组件库

1.2 定义

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

1.3 由来

‘饿了么前端团队 基于vue进行开发并且进行了开源 element ui 中提供全部都是封装好组件。’

二、element-ui 的安装

2.1 通过vue脚手架暗转

vue init webpack element

2.2 在vue脚手架项目中安装

# 1.下载elementui的依赖
    npm i element-ui -D

# 2.指定当前项目中使用elementui
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';

  //在vue脚手架中使用elementui
    Vue.use(ElementUI);

三、按钮组件实例

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

四、按钮组件的详细使用

总结:日后使用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>

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

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>

六、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属性

七、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>

八、Form相关组件

创建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>

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