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' import App from './App.vue' import router from './router/index.js' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: {App}, template: '<App/>' })
index.js
import Vue from 'vue' import Router from 'vue-router' import Home from '../components/Home' import Content from '../components/Content' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Content', component: Content }, { path: '/Content', name: 'Content', component: Content }, { path: '/Home', name: 'Home', component: Home } ] })
App.vue
<template> <div id="app"> <el-container> <el-header> <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <el-menu-item index="1">处理中心</el-menu-item> <el-submenu index="2"> <template slot="title">我的工作台</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-3">选项3</el-menu-item> <el-submenu index="2-4"> <template slot="title">选项4</template> <el-menu-item index="2-4-1">选项1</el-menu-item> <el-menu-item index="2-4-2">选项2</el-menu-item> <el-menu-item index="2-4-3">选项3</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="3" disabled>消息中心</el-menu-item> <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item> </el-menu> </el-header> <el-container> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <!--左边菜单--> <el-menu :default-openeds="['1']"> <el-submenu index="1"> <template slot="title"><i class="el-icon-message"></i>导航一</template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="1-1"> <router-link to="/Home">选项1</router-link> </el-menu-item> <el-menu-item index="1-2"> <router-link to="/Content">选项2</router-link> </el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="1-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">选项4</template> <el-menu-item index="1-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="2"> <template slot="title"><i class="el-icon-menu"></i>导航二</template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="2-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="2-4"> <template slot="title">选项4</template> <el-menu-item index="2-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="3"> <template slot="title"><i class="el-icon-setting"></i>导航三</template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="3-1">选项1</el-menu-item> <el-menu-item index="3-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="3-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="3-4"> <template slot="title">选项4</template> <el-menu-item index="3-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> </el-menu> </el-aside> <el-container> <el-main> <!--路由器功能--> <el-container style=" 100%; min-height: 300px;"> <router-view></router-view> </el-container> </el-main> <el-footer>Footer</el-footer> </el-container> </el-container> </el-container> </div> </template> <script> import Content from './components/Content' import Home from './components/Home' export default { name: 'App', data () { return { activeIndex: '1', activeIndex2: '1' } }, components: { 'Content': Content, 'Home': Home }, methods: { handleSelect (key, keyPath) { console.log(key, keyPath) } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; /* margin-top: 60px;*/ } .el-header { padding: 0px; } .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 { padding: 5px; background-color: #E9EEF3; color: #333; text-align: center; } 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; } /* 图片缩略图*/ .el-upload-list--picture .el-upload-list__item{ width: 247px; height: 247px; margin-right: 10px; float: left; } /* 图片列表*/ .el-upload-list--picture .el-upload-list__item-thumbnail{ width: 226px; height: 226px; } .el-upload-list--picture .el-upload-list__item-status-label{ z-index: 2; } .el-upload-list__item .el-icon-close{ z-index: 2; } .el-upload--picture-card{ width: 300px; height: 92px; margin-top: 10px; margin-left: -60px; line-height: 100px; } </style>
Content.vue
<template> <div class="content"> <!--跑马灯--> <el-carousel :interval="5000" arrow="always" style=" 100%; height: 300px; margin: 0px auto"> <el-carousel-item v-for="item in items" :key="item.id"> <el-image style=" 100%; height: 100%;" :src="item.url" fit="fit"></el-image> </el-carousel-item> </el-carousel> <!--图片列表--> <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" list-type="picture"> <el-button style="margin-top: 10px" size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> <!--动态表格--> <el-table :data="tableData" stripe style="100%"> <el-table-column align="center" min-width="15%" prop="url" label="头像"> <template scope="scope"> <el-popover placement="right" title="" trigger="hover"> <img :src="scope.row.url" style="height: 500px; 500px"> <img slot="reference" :src="scope.row.url" alt="" style="max-height: 50px;max- 130px"> </el-popover> </template> </el-table-column> <el-table-column prop="date" label="日期" min-width="15%"></el-table-column> <el-table-column prop="name" label="姓名" min-width="15%"></el-table-column> <el-table-column prop="name" label="姓名" min-width="15%"></el-table-column> <el-table-column prop="name" label="姓名" min-width="20%"></el-table-column> <el-table-column prop="name" label="姓名" min-width="20%"> <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> <el-button type="text" size="small">编辑</el-button> </el-table-column> </el-table> <el-pagination background layout="prev, pager, next" :total="1000"> </el-pagination> <!--<template> <div> <div>下面是一个slot</div> <slot a="123" b="msg" ></slot> </div> </template> <div> <template scope="msg"> <div>下面是solt的props 调用</div> <div>{{msg}}</div> <div>{{msg.a}}</div> <div>{{msg.b}}</div> </template> </div>--> </div> </template> <script> export default { name: 'Content', data () { return { fileList: [{ name: 'food.jpeg', url: '/static/images/img1.JPG' }, { name: 'food2.jpeg', url: '/static/images/img2.JPG' }, { name: 'food2.jpeg', url: '/static/images/img3.JPG' }, { name: 'food2.jpeg', url: '/static/images/img4.JPG' }, { name: 'food2.jpeg', url: '/static/images/img5.JPG' }, { name: 'food2.jpeg', url: '/static/images/img6.JPG' }, { name: 'food2.jpeg', url: '/static/images/img7.JPG' }], items: [{ id: 1, url: '/static/images/img1.JPG' }, { id: 2, url: '/static/images/img2.JPG' }, { id: 3, url: '/static/images/img3.JPG' }, { id: 4, url: '/static/images/img4.JPG' }, { id: 5, url: '/static/images/img5.JPG' }, { id: 6, url: '/static/images/img6.JPG' }, { id: 7, url: '/static/images/img7.JPG' }, { id: 8, url: '/static/images/img8.JPG' }, { id: 9, url: '/static/images/img9.JPG' }], dialogImageUrl: '', dialogVisible: false, tableData: [{ date: '2020-05-04', name: 'food.jpeg', url: '/static/images/img1.JPG' }, { date: '2020-05-04', name: 'food2.jpeg', url: '/static/images/img2.JPG' }, { date: '2020-05-04', name: 'food2.jpeg', url: '/static/images/img3.JPG' }, { date: '2020-05-04', name: 'food2.jpeg', url: '/static/images/img4.JPG' }] } }, methods: { handleRemove (file, fileList) { console.log(file, fileList) }, handlePreview (file) { console.log(file) }, handlePictureCardPreview (file) { this.dialogImageUrl = file.url this.dialogVisible = true } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> /* 跑马灯样式*/ .el-carousel__item h3 { color: #475669; font-size: 14px; opacity: 0.75; line-height: 200px; margin: 0; } .el-carousel__item:nth-child(2n) { background-color: #99a9bf; } .el-carousel__item:nth-child(2n+1) { background-color: #d3dce6; } .content{ width: 100%; height: 100%; } </style> <style></style>
Home.vue
<template> <div class="Home"> <el-transfer v-model="value" :data="data"></el-transfer> </div> </template> <script> export default { data () { const generateData = _ => { const data = [] for (let i = 1; i <= 15; i++) { data.push({ key: i, label: '备选项', disabled: i % 4 === 0 }) } return data } return { data: generateData(), value: [1, 4] } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>