发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

Vue中Element UI组件库使用方法详解

通天大圣

6

主题

6

帖子

18

积分

新手上路

Rank: 1

积分
18
显示全部楼层
一、引言

官方网站，
  1. element.eleme.cn
复制代码
Element UI 是 Vue 的 UI 框架，是一个网站快速成型的工具和桌面端的组件库。该框架中提供的全部都是封装好的组件，方便我们快速地开发页面，底层其实就是对 vue 的封装。

二、安装并使用


1. 安装

① 先创建一个脚手架项目

② 下载 element-ui 依赖
  1. npm i element-ui -S
复制代码
③ 在 main.js 中引入 Element
  1. import Vue from 'vue';
  2. import ElementUI from 'element-ui';
  3. import 'element-ui/lib/theme-chalk/index.css';
  4. import App from './App.vue';

  6. Vue.use(ElementUI);

  8. new Vue({
  9.   el: '#app',
  10.   render: h => h(App)
  11. });
复制代码
  1. Vue.use(ElementUI) 声明在 Vue 脚手架中使用 ElementUI。
复制代码

2. 使用

① 所有的 UI 都在这里，使用的时候直接在官网的组件里面去找就可以了。


② 复制代码，并粘贴到自己的 div 中。

  1. Element UI 中所有的组件都是以 el-组件名开头的，所有的属性都写在组件标签上，组件属性可以在官方文档中查询！
复制代码


三、常见组件说明


1. 基础组件
  1. <!--按钮-->
  2. <el-button type="success" size="medium" plain icon="el-icon-loading"></el-button>

  4. <!--链接-->
  5. <el-link target="_blank" href="http://www.baidu.com" rel="external nofollow"  underline></el-link>
复制代码
2. 布局组件

通过基础的 24 分栏（栅格），迅速简便地创建布局。在 Element UI 中布局组件将页面划分为多个行 row，每行最多分为 24 列 col。
注意区分行的属性和列的属性，它们是不一样的！
  1. <template>
  2.   <div>
  3.     <el-row :gutter="20">
  4.       <el-col :span="16">
  5.         <div class="grid-content bg-purple"></div>
  6.       </el-col>
  7.       <el-col :span="8">
  8.         <div class="grid-content bg-purple"></div>
  9.       </el-col>
  10.     </el-row>
  11.     <el-row :gutter="20">
  12.       <el-col :span="8">
  13.         <div class="grid-content bg-purple"></div>
  14.       </el-col>
  15.       <el-col :span="8">
  16.         <div class="grid-content bg-purple"></div>
  17.       </el-col>
  18.       <el-col :span="4">
  19.         <div class="grid-content bg-purple"></div>
  20.       </el-col>
  21.       <el-col :span="4">
  22.         <div class="grid-content bg-purple"></div>
  23.       </el-col>
  24.     </el-row>
  25.     <el-row :gutter="20">
  26.       <el-col :span="4">
  27.         <div class="grid-content bg-purple"></div>
  28.       </el-col>
  29.       <el-col :span="16">
  30.         <div class="grid-content bg-purple"></div>
  31.       </el-col>
  32.       <el-col :span="4">
  33.         <div class="grid-content bg-purple"></div>
  34.       </el-col>
  35.     </el-row>
  36.   </div>
  37. </template>

  39. <script>
  40. export default {
  41. }
  42. </script>

  44. <style>
  45. .el-row {
  46.   margin-bottom: 20px;

  48.   &:last-child {
  49.     margin-bottom: 0;
  50.   }
  51. }

  53. .el-col {
  54.   border-radius: 4px;
  55. }

  57. .bg-purple-dark {
  58.   background: #99a9bf;
  59. }

  61. .bg-purple {
  62.   background: #d3dce6;
  63. }

  65. .bg-purple-light {
  66.   background: #e5e9f2;
  67. }

  69. .grid-content {
  70.   border-radius: 4px;
  71.   min-height: 36px;
  72. }

  74. .row-bg {
  75.   padding: 10px 0;
  76.   background-color: #f9fafc;
  77. }
  78. </style>
复制代码

offset 用于设置栅格的偏移量，指定栅格从第几列起开始排列，属性值为栅格空开的列数。push 属性用于指定栅格右移的列数，它和 offset 有点像，不过它的移动并不会影响到后面栅格的位置（碰到后面的栅格，那就直接压上去重合），而 offset 的移动则会推着后面的栅格往后走（碰到后面的栅格，直接挤走）。

3. 布局容器

在实际开发中，需要将布局组件放到布局容器中去使用，布局容器 Container 可以帮助我们快速搭建页面的基本结构。
  1. <el-container>
复制代码
：外层容器。当子元素中包含
  1. <el-header>
复制代码
或
  1. <el-footer>
复制代码
时，全部子元素会垂直上下排列，否则会水平左右排列。
  1. <el-header>
复制代码
：顶栏容器。
  1. <el-aside>
复制代码
：侧边栏容器。
  1. <el-main>
复制代码
：主要区域容器。
  1. <el-footer>
复制代码
：底栏容器。
以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，el-container 的子元素只能是后四者，后四者的父元素也只能是 el-container，el-container 可以嵌套使用，嵌套是为了把多个模块放在一起。
  1. <template>  <div>    <el-container>      <el-header>Header</el-header>      <el-container>        <el-aside width="200px">Aside</el-aside>        <el-container>          <el-main>Main</el-main>          <el-footer>Footer</el-footer>        </el-container>      </el-container>    </el-container>  </div></template><script>export default {}</script><style>.el-header,.el-footer {  background-color: #B3C0D1;  color: #333;  text-align: center;  line-height: 60px;}.el-aside {  background-color: #D3DCE6;  color: #333;  text-align: center;  line-height: 200px;}.el-main {  background-color: #E9EEF3;  color: #333;  text-align: center;  line-height: 160px;}body>.el-container {  margin-bottom: 40px;}.el-container:nth-child(5) .el-aside,.el-container:nth-child(6) .el-aside {  line-height: 260px;}.el-container:nth-child(7) .el-aside {  line-height: 320px;}</style>
复制代码


4. 选择框组件

① 单选框
  1. <!--Radio 单选框事件的使用：@change = "处理函数名"-->
  2. <el-radio v-model="label" label="1" border name="sex" size="small" @change="fn">男</el-radio>
  3. <el-radio v-model="label" label="2" border name="sex" size="small" @change="fn">女</el-radio>

  5. <!--单选框组-->
  6. <el-radio-group v-model="radio">
  7.     <el-radio :label="1">备选1</el-radio>
  8.     <el-radio :label="2">备选2</el-radio>
  9.     <el-radio :label="3">备选3</el-radio>
  10. </el-radio-group>
复制代码
  1. data() {
  2.     return {
  3.         label: '2',
  4.         radio: '3'
  5.     }
  6. },
  7. methods: {
  8.         fn() {
  9.                 alert()
  10.         }
  11. }
复制代码
v-model 中的属性值与 标签属性 label 的属性值相对应时，就会选中当前按钮，label 里面的值必须是字符串，所以 data 中定义的所有数据，都必须加引号！
② 多选框
  1. &lt;template&gt;
  2.   &lt;div&gt;
  3.     &lt;el-checkbox-group v-model="checkList"&gt;
  4.       &lt;el-checkbox label="复选框 A"&gt;&lt;/el-checkbox&gt;
  5.       &lt;el-checkbox label="复选框 B"&gt;&lt;/el-checkbox&gt;
  6.       &lt;el-checkbox label="复选框 C"&gt;&lt;/el-checkbox&gt;
  7.       &lt;el-checkbox label="禁用" disabled&gt;&lt;/el-checkbox&gt;
  8.       &lt;el-checkbox label="选中且禁用" disabled&gt;&lt;/el-checkbox&gt;
  9.     &lt;/el-checkbox-group&gt;
  10.   &lt;/div&gt;
  11. &lt;/template&gt;
复制代码
  1. data() {
  2.   return {
  3.     checkList: ['选中且禁用', '复选框 A']
  4.   }
  5. }
复制代码
多选框 label 选中状态的值，只有在 checkbox-group 或者绑定对象为 array 时才可以生效！

5. 输入框组件
  1. <el-input v-model="username" @blur="blur" @focus="focus"></el-input>
复制代码
给 A 组件加上 ref=“组件别名” 属性，当别的组件想调用 A 组件的方法时，可直接使用 this.$ref.组件别名.方法名() 进行调用！
  1. <template>
  2.   <div>
  3.     <el-input v-model="username" ref="inputs"></el-input>
  4.    
  5.     <el-button @click="focusInputs">调用el-input的focus方法</el-button>
  6.     <el-button @click="blurInputs">调用el-input的blur方法</el-button>
  7.   </div>
  8. </template>

  10. <script>
  11. export default {
  12.   data() {
  13.     return {
  14.       username: ''
  15.     }
  16.   },
  17.   methods: {
  18.     focusInputs() {
  19.       this.$refs.inputs.focus()
  20.     },
  21.     blurInputs() {
  22.       this.$refs.inputs.blur()
  23.     }
  24.   }
  25. }
  26. </script>
复制代码
6. 下拉框组件
  1. <template>
  2.   <el-select v-model="value" clearable placeholder="请选择" multiple>
  3.     <el-option
  4.       v-for="item in options"
  5.       :key="item.id"
  6.       :label="item.name"
  7.       :value="item.id">
  8.     </el-option>
  9.   </el-select>
  10. </template>

  12. <script>
  13.   export default {
  14.     data() {
  15.       return {
  16.         options: [{
  17.           id: '选项1',
  18.           name: '黄金糕'
  19.         }, {
  20.           id: '选项2',
  21.           name: '双皮奶'
  22.         }, {
  23.           id: '选项3',
  24.           name: '蚵仔煎'
  25.         }],
  26.         value: ''
  27.       }
  28.     }
  29.   }
  30. </script>
复制代码
  1. 注意点：① v-model=“value”，可以绑定下拉框选中的值；② :label，下拉框文本；③ :value，一般为 item 的 id；④ :key，一般为 item 的 id。
复制代码
7. 日期选择器
  1. <template>
  2.   <div class="block">
  3.     <span class="demonstration">默认</span>
  4.     <el-date-picker
  5.       v-model="value1"
  6.       type="daterange"
  7.       range-separator="至"
  8.       start-placeholder="开始日期"
  9.       end-placeholder="结束日期">
  10.     </el-date-picker>
  11.   </div>
  12. </template>

  14. <script>
  15.   export default {
  16.     data() {
  17.       return {
  18.         value1: ''
  19.       }
  20.     }
  21.   }
  22. </script>
复制代码


8. 上传组件
  1. <el-upload
  2.   class="upload-demo"
  3.   drag
  4.   action="https://jsonplaceholder.typicode.com/posts/"
  5.   multiple>
  6.   <i class="el-icon-upload"></i>
  7.   <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  8.   <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
  9. </el-upload>
复制代码
9. 表单组件
  1. <el-form ref="form" :model="form" label-width="80px">
  2.   <el-form-item label="活动名称">
  3.     <el-input v-model="form.name"></el-input>
  4.   </el-form-item>
  5.   <el-form-item label="活动区域">
  6.     <el-select v-model="form.region" placeholder="请选择活动区域">
  7.       <el-option label="区域一" value="shanghai"></el-option>
  8.       <el-option label="区域二" value="beijing"></el-option>
  9.     </el-select>
  10.   </el-form-item>
  11.   <el-form-item label="活动时间">
  12.     <el-col :span="11">
  13.       <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
  14.     </el-col>
  15.     <el-col class="line" :span="2">-</el-col>
  16.     <el-col :span="11">
  17.       <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
  18.     </el-col>
  19.   </el-form-item>
  20.   <el-form-item label="即时配送">
  21.     <el-switch v-model="form.delivery"></el-switch>
  22.   </el-form-item>
  23.   <el-form-item label="活动性质">
  24.     <el-checkbox-group v-model="form.type">
  25.       <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
  26.       <el-checkbox label="地推活动" name="type"></el-checkbox>
  27.       <el-checkbox label="线下主题活动" name="type"></el-checkbox>
  28.       <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
  29.     </el-checkbox-group>
  30.   </el-form-item>
  31.   <el-form-item label="特殊资源">
  32.     <el-radio-group v-model="form.resource">
  33.       <el-radio label="线上品牌商赞助"></el-radio>
  34.       <el-radio label="线下场地免费"></el-radio>
  35.     </el-radio-group>
  36.   </el-form-item>
  37.   <el-form-item label="活动形式">
  38.     <el-input type="textarea" v-model="form.desc"></el-input>
  39.   </el-form-item>
  40.   <el-form-item>
  41.     <el-button type="primary" @click="onSubmit">立即创建</el-button>
  42.     <el-button>取消</el-button>
  43.   </el-form-item>
  44. </el-form>
  45. <script>
  46.   export default {
  47.     data() {
  48.       return {
  49.         form: {
  50.           name: '',
  51.           region: '',
  52.           date1: '',
  53.           date2: '',
  54.           delivery: false,
  55.           type: [],
  56.           resource: '',
  57.           desc: ''
  58.         }
  59.       }
  60.     },
  61.     methods: {
  62.       onSubmit() {
  63.         console.log('submit!');
  64.       }
  65.     }
  66.   }
  67. </script>
复制代码


10. 警告组件
  1. <template>
  2.   <div>
  3.     <el-alert
  4.     title="成功提示的文案"
  5.     type="success">
  6.   </el-alert>
  7.   <el-alert
  8.     title="消息提示的文案"
  9.     type="info">
  10.   </el-alert>
  11.   <el-alert
  12.     title="警告提示的文案"
  13.     type="warning">
  14.   </el-alert>
  15.   <el-alert
  16.     title="错误提示的文案"
  17.     type="error">
  18.   </el-alert>
  19.   </div>
  20. </template>
复制代码


11. 提示组件
  1. <template>
  2.   <el-button :plain="true" @click="open1">消息</el-button>
  3.   <el-button :plain="true" @click="open2">成功</el-button>
  4.   <el-button :plain="true" @click="open3">警告</el-button>
  5.   <el-button :plain="true" @click="open4">错误</el-button>
  6. </template>

  8. <script>
  9.   export default {
  10.     methods: {
  11.       open1() {
  12.         this.$message({
  13.           showClose: true,
  14.           message: '这是一条消息提示'
  15.         });
  16.       },

  18.       open2() {
  19.         this.$message({
  20.           showClose: true,
  21.           message: '恭喜你，这是一条成功消息',
  22.           type: 'success'
  23.         });
  24.       },

  26.       open3() {
  27.         this.$message({
  28.           showClose: true,
  29.           message: '警告哦，这是一条警告消息',
  30.           type: 'warning'
  31.         });
  32.       },

  34.       open4() {
  35.         this.$message({
  36.           showClose: true,
  37.           message: '错了哦，这是一条错误消息',
  38.           type: 'error'
  39.         });
  40.       }
  41.     }
  42.   }
  43. </script>
复制代码
12. 表格组件
  1. <template>
  2.   <el-table
  3.     :data="tableData"
  4.     stripe
  5.     style="width: 100%">
  6.     <el-table-column
  7.       prop="date"
  8.       label="日期"
  9.       width="180">
  10.     </el-table-column>
  11.     <el-table-column
  12.       prop="name"
  13.       label="姓名"
  14.       width="180">
  15.     </el-table-column>
  16.     <el-table-column
  17.       prop="address"
  18.       label="地址">
  19.     </el-table-column>
  20.   </el-table>
  21. </template>

  23. <script>
  24.   export default {
  25.     data() {
  26.       return {
  27.         tableData: [{
  28.           date: '2016-05-02',
  29.           name: '王小虎',
  30.           address: '上海市普陀区金沙江路 1518 弄'
  31.         }, {
  32.           date: '2016-05-04',
  33.           name: '王小虎',
  34.           address: '上海市普陀区金沙江路 1517 弄'
  35.         }, {
  36.           date: '2016-05-01',
  37.           name: '王小虎',
  38.           address: '上海市普陀区金沙江路 1519 弄'
  39.         }, {
  40.           date: '2016-05-03',
  41.           name: '王小虎',
  42.           address: '上海市普陀区金沙江路 1516 弄'
  43.         }]
  44.       }
  45.     }
  46.   }
  47. </script>
复制代码


总结

到此这篇关于Vue中Element UI组件库使用方法详解的文章就介绍到这了,更多相关Vue Element UI组件库详解内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/331171yuh.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

上一篇: Vue Form表单的使用方法(rules格式校验网络校验键盘按键监听)

下一篇: Vue实例创建和挂载的详细过程

发表于 2024-11-26 02:01:11

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4