elementUI笔记

最新推荐文章于 2024-03-29 05:10:48 发布
最新推荐文章于 2024-03-29 05:10:48 发布
阅读量404 收藏 5
点赞数 3
分类专栏： Vue 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43717736/article/details/109193635
版权

磨蹭磨蹭终于算是学会了vue的基础知识，虽然组件还是没太弄明白，之后的项目应该会被血虐吧……
这学期的项目前端打算用vue搭建，想要节省前端搭建的时间，所以照着视频学习了element-ui的一些使用
打算去学习一下typescript，买了一些前端的书，要加油呀

这个笔记不全，不清楚是csdn的问题还是我电脑的问题，没办法直接导入md文件也没办法复制全部笔记，会页面崩溃，打算分开传送也不全

Element UI

安装ElementUI

1. 通过vue脚手架创建项目

vue init webpack 项目名

2. 在vue脚手架中安装项目

# 下载elementui的依赖
npm i element-ui -S

# 指定当前项目中使用elementui 参考官网快速上手
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

# 在vue脚手架中使用elementUI
Vue。user(ElementUI);

组件

按钮 button

按钮组件（实例）
<!--
	默认样式按钮
-->
<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>

<!--
	简洁按钮 鼠标移动上去才会显示北京颜色
-->
<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>

<!--
	圆角按钮 round
-->
<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>

<!--
	图标按钮 icon
-->
<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>
按钮组件的详细使用

总结：使用elementUI，ui的相关组件时需要注意的是，所有组件都是el-组件名开头

创建按钮
按钮属性的使用
<el-button type="primary" 属性名=属性值></el-button>

<el-button type="warning" size="mini" plain circle icon="el-icon-loading"></el-button>

在elementui中所有组件的属性全部使用在组件标签上

按钮组的使用

<el-button-group>
  <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
  <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>

注意

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

文字链接组件 link

文字链接组件的创建
<el-link>默认链接</el-link>
文字链接组件属性的使用

primary 黄色 / success 绿色 / warning 黄色 / danger 红色 / info 灰色

<el-link type="primary" :underline="isunderline">默认链接</el-link>
<el-link type="success">默认链接</el-link>
<el-link type="warning" disabled>默认链接</el-link>
<el-link type="danger">默认链接</el-link>
<el-link type="info">默认链接</el-link>

Layout（栅格） 布局组件的使用

通过基础的 24 分栏，迅速渐变地创建布局

在element ui中布局组件将页面划分为多个行row，每行最多分为24栏(列)

使用Layout组件
<el-row>
    <!--
		超出部分自动换行展示
	-->
    <el-col :span="2">占用两份</el-col>
</el-row>

注意

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

  • 行属性的使用

    <el-row :gutter="10" tag="span">
  <el-col :span="6"><div style="border: 1px pink solid">占用6份</div></el-col>
  <el-col :span="6"><div style="border: 1px pink solid">占用6份</div></el-col>
  <el-col :span="6"><div style="border: 1px pink solid">占用6份</div></el-col>
  <el-col :span="6"><div style="border: 1px pink solid">占用6份</div></el-col>
</el-row>

  • 列属性的使用

    <h2>Layout属性中使用偏移offset</h2>
  <el-row>
    <el-col :span="12" :offset="3" :push="3" xs><div style="border: 1px pink solid">占用12份</div></el-col>
    <el-col :span="6"><div style="border: 1px pink solid">占用6份</div></el-col>
</el-row>

Container 布局容器组件

创建布局容器
<el-constainer>
</el-constainer>
容器中包含的子元素

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

容器的嵌套使用
	<!-- 创建容器 -->
    <el-container>
      <!-- header -->
      <el-header>
        <div style="border: 1px solid gray"><h2>我是标题</h2></div>
      </el-header>
      <!-- asider -->
      <el-container>
        <el-aside>
          <div style="border: 1px solid pink"><h2>我是菜单</h2></div>
        </el-aside>
        <!-- main -->
        <el-main>
          <div style="border: 1px solid pink">
            <h2>我是中心内容</h2>
          </div>
        </el-main>
      </el-container>
      <el-footer>
        <div style="border: 1px solid pink">
          <h2>我是页脚</h2>
        </div>
      </el-footer>
    </el-container>
水平容器

注意：当子元素中没有 el-header 或 el-footer 时容器排列为水平

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

From相关组件

Radio 单选框

  1. 创建Radio按钮

    <h2>Radio组件使用</h2>
<!-- 组件创建 -->
<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单选按钮时，至少加入v-model和label两个属性

  2. Radio使用属性

    <el-radio v-model="label" name="gender" disabled label="男">男</el-radio>
<el-radio v-model="label" name="gender" :border="true" label="女">女</el-radio>
<el-radio v-model="label" 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="test"></el-radio>

  3. Radio事件的使用

    <el-radio v-model="label" @change="aa" name="gender" label="男">男</el-radio>
<el-radio v-model="label" @change="aa" name="gender" label="女">女</el-radio>

<!--js中的代码-->
<script>
export default {
  name: "Radio",
  data(){
    return{
      label: '男'
    }
  },
  methods:{
    aa(){	//定义的事件处理函数
      console.log(this.label);
    }
  }
}
</script>

    总结

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

  4. Radio按钮组

    <h2>单选按钮组</h2>
    <!-- 创建单选按钮组 -->
<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>
<!--vue中data中数据-->
data() {
    return {
      radio: 3,
    };
  }

<!--或者也可以写成这种形式-->
<h2>单选按钮组</h2>
<!-- 创建单选按钮组 -->
<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>
<!--vue中data中数据-->
data() {
    return {
      radio: "3",
    };
  },

    checkbox组件的使用

  5. 创建checkbox组件

  6. 属性使用

    <el-checkbox v-model="checked" true-label="烟台">烟台</el-checkbox>
<el-checkbox v-model="checked" disabled true-label="青岛">青岛</el-checkbox>
<el-checkbox v-model="checked" true-label="天津">天津</el-checkbox>

  7. 事件使用

  8. 复选框组

    <el-checkbox-group 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>
<!--在data中写checkList:[]-->

input组件的使用

  1. 创建组件

    <el-input v-model="name"></el-input>

<script>
export default {
  name: "Input",
  data(){
    return {
      name: 'niko'
    }
  }
}
</script>

  2. 组件属性

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

  3. 事件的使用

    <el-input v-model="username" @blur="aaa" @focus="bbb"></el-input>
methods:{
  aaa(){
    alert("失去焦点")
  },
  bbb(){
    alert("获取焦点")
  }
}

  4. 方法的使用

    <h2>方法的使用</h2>
<el-input v-model="username" ref="inputs"></el-input>
<el-button @click="focusInputs">focus方法</el-button>
<el-button @click="blurInputs">blur方法</el-button>

methods:{
    focusInputs(){
      this.$refs.inputs.focus();
    },
    blurInputs(){
      this.$refs.inputs.blur();
    },
    blurInputs(){
      this.$refs.inputs.blur();
    },
  }

    总结

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

总结

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

​ 注意：在elementUI中所有组件都存在 属性 事件 方法

​ 属性：直接卸载对应组件标签上 使用方式：属性名=属性值方式

​ 事件：直接使用vue绑定事件方式卸载对应的组件标签上 使用方式@事件名=vue事件处理函数

​ 方法：1. 在对应组件标签上使用ref=组件别名 2.通过使用this.$refs.组件别名.方法名进行调用

select组件的使用

  1. 组件创建

    <!--
	数据写死在页面上
	下拉列表中必须存在option的value属性值
	要求select中必须绑定v-model
-->
<el-select v-model="cityname">
  <el-option value="北京">北京</el-option>
  <el-option value="天津">天津</el-option>
</el-select>

<!--动态获取数据-->
<el-select>
  <el-option v-for="item in options" :v-key="item.id" :value="item.name" :label="item.value"></el-option>
</el-select>

<script>
export default {
  name:"Select",
  data (){
    return {
      options: [
        {id: "1", name:"研发室"},
        {id: "2", name:"小卖部"},
        {id: "3", name:"小米部"},
      ]
    }
  }
}
</script>

<!--获取下拉列表中选中数据-->
<el-select v-model="cityid">
      <el-option 
        v-for="item in options" 
        :key="item.value"
        :label="item.value" 
        :value="item.name" ></el-option>
</el-select>
<script>
export default {
  name:"Select",
  data (){
    return {
      options: [
        {id: "1", name:"研发室"},
        {id: "2", name:"小卖部"},
        {id: "3", name:"小米部"},
      ],
      cityid: ""
    }
  }
}
</script>

  2. 属性使用

    <el-select v-model="cityid" multiple clearable>
  ....
</el-select>

  3. 事件的使用

    <el-select v-model="cityid" value-key="id" @change="aaa" multiple clearable>
      <el-option 
        v-for="item in options" 
        :key="item.id"
        :label="item.name" 
        :value="item.name" ></el-option>
    </el-select>
<script>
export default {
  name:"Select",
  data (){
    return {
      options: [
        {id: "1", name:"研发室"},
        {id: "2", name:"小卖部"},
        {id: "3", name:"小米部"},
      ],
      cityid: "",
      cityname: "",
      city:''
    }
  },
  methods:{
    aaa(value){
      console.log(value)
    }
  }
}
</script>

  4. 方法的使用

    <!--
	给组件通过ref起别名并绑定到vue实例中
	调用方法
-->
<el-select v-model="cityid" value-key="id" @change="aaa" multiple clearable ref="select">
      <el-option 
        v-for="item in options" 
        :key="item.id"
        :label="item.name" 
        :value="item.name" ></el-option>
</el-select>
<el-button @click="bbb">获取焦点</el-button>
<script>
export default {
  name:"Select",
  data (){
    return {
      options: [
        {id: "1", name:"研发室"},
        {id: "2", name:"小卖部"},
        {id: "3", name:"小米部"},
      ],
      cityid: "",
      cityname: "",
      city:''
    }
  },
  methods:{
    aaa(value){
      console.log(value)
    },
    bbb(){
      this.$refs.select.focus()
    }
  }
}
</script>

    switch组件的使用

<el-switch v-model="value" active-text="打开" :active-value="true" inactive-text="关闭" active-color="#13ce66" inactive-color="#ff4949" :inactive-value="false" :width="100"></el-switch>
<script>
export default {
  name: "Switchs",
  data(){
    return {
      value: true
    }
  }
}
</script>

DatePicker的使用

  1. 组件创建

    <el-date-picker v-model="createDate"></el-date-picker>

  2. 属性

    <el-date-picker
    v-model="createDate" :editable="false" :clearable="false"
    type="datetimerange"
    start-placeholde="开始时间"
    end-placeholde="结束时间">
</el-date-picker>

<script>
export default {
  name:"DatePickers",
  data(){
    return {
      createDate:''
    }
  }
}
</script>

  3. Picker Options & Shortcuts

  • Shortcuts 用来增加日期组件的快捷面板
  • Picker Option 用来对日期控件做自定义配置
非幡动
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
elementui学习笔记
qq_46609665的博客
05-04 322
elementui 步骤： 一，安装 使用cli2创建项目 vue init webpack 项目名 在工程中安装elementUI的依赖 npm i element-ui -S 指定当前项目main.js中使用elementui：导入 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; 注册到vue当中：注册 Vue.use(ElementUI); 二，按钮（组件的
Element UI学习笔记
qq_46027619的博客
07-07 131
下载依赖 在以下 main.js 中写入内容： 在新建的vue工程中找到Hello World.vue，加入element ui的组件 使用 babel -plugin-component，我们可以只引入需要的组件，以实现项目体积的目的。首先，安装 babel-plugin-component： 修改main.js 然后，将.babelrc修改为：...
element-ui简单笔记
最新发布
2401_83817916的博客
03-29 853
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里即可获取！！！！图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）
elementUI的笔记
weixin_39046590的博客
01-28 270
Popover 弹出框 做项目的时候蒙版遮住了要看的内容z-index的问题需要设置 :modal-append-to-body=‘false’ 这个，一开始使用modal将蒙版关闭但是很丑，如下内容 <el-dialog :visible.sync="visible" :title="rowContent.title" :modal-append-to-body='false' :close-on-click-modal=
Element UI学习记录
qq_38702465的博客
04-10 387
1.<el-row gutter="20">行间距20,<el-col span="8" offset ="8">长度(span)为8，偏移量为8，<el-row type="flex" justify="value">value为 start, center, end, space-between, space-around ，设置灵活的排版。 2. 3....
Vue+Element ui管理系统学习笔记
06-16
个人学习笔记
【狂神vue学习记录】vue+elementUI实战
08-16
vue+elementUI实战
关于后台管理系统的笔记
04-04
关于后台管理系统的笔记
4_Element-UI笔记.pdf
08-27
import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 在IDE如IntelliJ IDEA中，还可以安装Element插件，提升开发效率。在`App.vue`文件中，可以添加...
基于Springboot+MybatisPlus+Vue前后端分离的共享笔记管理系统
06-07
前端框架：Vue，ElementUI组件 后端框架：Springboot【内嵌】 MybatisPlus 【ORM javabean -- 数据库表实体 】 数据库连接池：Duriud【当一堆连接】 服务器：Tomcat，SSM SHH【自己部署】 开发工具：IDEA VScode...
element-ui学习笔记
xiaozhazha_wly的博客
09-01 450
1、首先新建项目vue-elementUi 1.vue init webpack vue-elementUi 2.cd vue-elementUi 3.npm install 4.npm run dev 2、其次安装Loader模块 1 npm install style-loader -D 2 npm install css-loader -D 3 npm install file-load...
element-ui 使用笔记
qq_44428688的博客
03-30 79
遇到这种情况的话首先给页面上的表格加唯一key 唯一key值能解决很多el-element的奇怪问题。导致这种状况的原因是因为它只会首次渲染一次 加一个change事件调用一下官方的方法就能解决了。这时候就需要用到我们亲爱的排他了。template部分。
ElementUI学习笔记
申小兮和林小兮的博客宝
03-21 1780
ElementUI简介，其安装步骤，一些布局，容器，按钮，表格，对话框的简单操作
Element-UI框架笔记
seimeii的博客
12-06 873
1、el-container 2、按需引入与全局引入 按需引入与全局引入 3、全局配置 全局配置 4、自定义主题 5、过渡动画 6、layout 响应式布局 input输入框 使用show-password属性即可得到一个可切换显示隐藏的密码框 前置或后置输入框 ...
element-ui笔记
lin819397746的博客
12-18 1226
Element安装npm i element-ui -S项目导入import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' import App from './App.vue'Vue.use(ElementUI)new Vue({ el: '#a
elementUI 工作笔记
代码青春
08-20 137
Vue根据条件添加 click 事件 <div @click="clickFlag && addGoodsHandler()"> XXX... </div> 在表单提交和链接跳转时弹出确认框 form表单：οnsubmit="javascript:return(confirm('是否确认添加'));" 链接提交：οnclick="javascript:return(confirm('是否确认删除'));" :formatter="levelSt.
elementui改变input边距
07-27
要改变Element UI的input组件的边距，可以通过修改CSS样式来实现。根据引用\[2\]中的代码，可以看到el-form-item类设置了margin-right为10px。如果你想要调整边距，可以在你的CSS文件中覆盖这个样式。例如，如果你想要将边距改为20px，可以添加以下代码到你的CSS文件中： .el-form--inline .el-form-item { margin-right: 20px; } 这样就会将input组件的边距从默认的10px改为20px。记得在HTML文件中引入你的CSS文件，以确保样式生效。 #### 引用[.reference_title] - *1* *3* [element-ui input组件源码分析整理笔记（六）](https://blog.csdn.net/qq_36320160/article/details/102010198)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [更改上下两个el-input 之间的距离](https://blog.csdn.net/qq_44716001/article/details/131290896)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值