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
阅读剩余
版权声明:
作者:涛哥
链接:https://ltbk.net/front/vue/v2/article/207.html
文章版权归作者所有,未经允许请勿转载。
作者:涛哥
链接:https://ltbk.net/front/vue/v2/article/207.html
文章版权归作者所有,未经允许请勿转载。
THE END