ElementUi的使用

本文最后更新于2024.05.30-05:24，某些文章具有时效性，若有错误或已失效，请在下方留言或联系涛哥。

npm 安装

npm i element-ui -S

在index.html文件中引入样式和组件库

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

在main.js引入样式

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
//上面的步骤等于<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
import App from './App';
//npm i vue-router
//导入路由
import VueRouter from 'vue-router';
//引入路由配置
import router from './router';
// 引入element-ui全部组件
import ElementUI from 'element-ui';
// 引入element-ui全部组件样式
import 'element-ui/lib/theme-chalk/index.css';
import 'element-ui/lib/theme-chalk/display.css';

// 注册element-ui
Vue.use(ElementUI);

//vue使用路由插件
Vue.use(VueRouter);
Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },//注册
  router:router,//new vue对象的时候装配在上面
  template: '<App/>'//在指定作用域添加模板标签
})

栅格布局

<template>
  <div class="title">
    <!-- <div style="width:1200px;margin:0 auto;">
      <el-row :gutter="10">
          <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="15"><div style="height:1200px;background-color:red"></div></el-col>
          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="9"><div style="height:1200px;background-color:blue"></div></el-col>
      </el-row>
    </div> -->
     <div style="min-width:1200px;margin:0 auto;">
      <el-row :gutter="10">
          <el-col :xs="24" class="hidden-sm-and-down">
            <ul>
              <li v-for="(nav,index) in navList" :key="index">
                {{nav.name}}
              </li>
            </ul></el-col>
          <el-col :xl="24" class="hidden-xl-only hidden-lg-only  hidden-md-only "> <ul>
              <h1>导航条</h1>
            </ul></el-col>
      </el-row>
    </div>
    <!--  -->
   <div style="width:1200px;margin:0 auto;">
      <el-row :gutter="10">
          <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="15">
            <div style="height:1200px;background-color:red">
                <Item v-for="(nav,index) in navList" :key="index"></Item>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="9">
            <div style="height:1200px;background-color:blue"></div>
          </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Item from '../components/Item.vue'
//最终转换为a标签默认push可以加上replace


export default {
  name: "Navigation",
  components:{
      Item
  },
  data(){
      return{
          navList:[
              {name:'爱奇艺',jump:'/iqiyi'},
              {name:'电视剧',jump:'/dianshiju'},
              {name:'电影',jump:'/dianying'},
              {name:'综艺',jump:'/zongyi'},
              {name:'动漫',jump:'/dongman'},
          ]
      }
  },
  methods: {

  },

};
</script>

<style scoped>

.title {
  width: 100%;
  height: 88px;
  background-color: #fff;
  margin: 0 auto;
}
.title span:nth-child(1) {
  font-size: 18px;
  line-height: 24px;
  color: #222;
  vertical-align: middle;
}
.title span:nth-child(2) {
  color: #99a2aa;
  margin-left: 20px;
  margin-bottom: 2px;
  display: inline-block;
  vertical-align: bottom;
}
.title ul {
  overflow: hidden;
  margin-right: -10px;
  list-style: none;
}
.title ul li {
  /* display: inline-block; */
  float: left;
  position: relative;
  border: 1px solid #e5e9ef;
  border-radius: 12px;
  background-color: #fff;
  height: 22px;
  margin: 5px 10px 5px 0;
  cursor: pointer;
}
.title ul li a {
  display: block;
  line-height: 22px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: #222;
  padding: 0 10px;
  text-decoration: none;
  font-size: 10px;
}
.current {
  background-color: #00a1d6 !important;
}
.current a {
  color: #ffffff !important;
}
</style>

 详情关注element官网api：https://element.eleme.cn