element-vue

最新推荐文章于 2025-04-08 14:26:46 发布

chuanpizhe9926

最新推荐文章于 2025-04-08 14:26:46 发布

阅读量172

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/4085373/blog/3036364

版权

本文详细介绍 Element UI 的安装、配置和使用方法，包括组件按需引入、布局管理、过渡动画、容器布局、图标应用等核心功能，帮助开发者快速上手并高效运用到项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 安装 npm

npm i element-ui -S //安装到正式环境

2. 引用

引用全部

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Vue from "vue";
Vue.use(ElementUI )

按需引用

a. 安装babel-plugin-component

npm install babel-plugin-component -D

b. 修改.babelrc

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

c. 调用需要引用的element组件

mport Vue from 'vue';
import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */
/*或者
* Vue.prototype.$Button= Button;
* Vue.prototype.$Select = Select;
*/

3. 过度动画

<transition name = "el-fade-in">
  <div v-show="show" >.el-fade-in</div>
</transition>

2. layout布局

24栅栏布局：

<el-row type="flex" justify="center/end/space-between/space-around" align="top/center/bottom"  gutter="gap-number"> 
<el-col :span="col-number" :offset="offset-number" :xs="8" :sm="6" :md="4" :lg="3" :xl="1"></el-col>
</el-row>

gutter: 栅格之间的间隙

span: 栅格占据x/24，

offset: 偏移量

xs,sm,md,lg,xl响应式布局

push: 栅格向右边移动个数

pull: 栅格向左边移动个数

当调用 import 'element-ui/lib/theme-chalk/display.css' 的时候，可以在调用一些class 在不同视图大小下隐藏显示某些元素

hidden-xs-only - 当视口在 xs 尺寸时隐藏
hidden-sm-only - 当视口在 sm 尺寸时隐藏
hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏
hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏
hidden-md-only - 当视口在 md 尺寸时隐藏
hidden-md-and-down - 当视口在 md 及以下尺寸时隐藏
hidden-md-and-up - 当视口在 md 及以上尺寸时隐藏
hidden-lg-only - 当视口在 lg 尺寸时隐藏
hidden-lg-and-down - 当视口在 lg 及以下尺寸时隐藏
hidden-lg-and-up - 当视口在 lg 及以上尺寸时隐藏
hidden-xl-only - 当视口在 xl 尺寸时隐

4. 容器布局

<el-container>
  <el-header> </el-header>
  <el-main> </el-main>
  <el-aside> </el-aside>
  <el-footer> </el-footer>
</el-container>

a. el-container可以嵌套使用

<el-container>
    <el-aside> </el-aside>
     
  <el-container>
    <el-main> </el-main>
  </el-container>


</el-container>

b. el-container的子元素包含 el-header/el-footer的时候，子元素按照垂直上下排序，如果不包含，按照左右方式排序

<el-container>
  <el-header>Header</el-header>
  <el-main>Main</el-main>
  <el-aside width="200px">Aside</el-aside>
  <el-footer>Footer</el-footer>
</el-container>

<el-container>

  <el-main>Main</el-main>
  <el-aside width="200px">Aside</el-aside>
  
</el-container>

6. 图标

<el-select class="el-icon-xxx"></el-select>

文字按钮/图标按钮/btn按钮

<el-button type="text" icon="el-icon-edit"></el-button>

按钮组：<el-button-group>

<el-button-group>
  <el-button type="primary" icon="el-icon-edit"></el-button>
  <el-button type="primary" icon="el-icon-share"></el-button>
  <el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group>

native-type: button / submit / reset

7. 单选： v-model值要一致

<el-radio v-model="radio" label="1">备选项</el-radio>
<el-radio v-model="radio" label="2">备选项1</el-radio>

单选组 el-radio-group

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

button样式的单选按钮 el-radio-button

8. 通过 template slot来设置内容

<div>
  <el-input placeholder="请输入内容" v-model="input3">
    <template slot="prepend">Http://</template>
    <template slot="append">Http://</template>
  </el-input>
</div>

自动填充

<el-autocomplete
      class="inline-input"
      v-model="state1"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @select="handleSelect"
    ></el-autocomplete>

转载于:https://my.oschina.net/u/4085373/blog/3036364