VUE实战

 

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/>'
})

View Code

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
    }
  ]
})

View Code

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="width: 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>

View Code

Content.vue

<template>
  <div class="content">
    <!--跑马灯-->
    <el-carousel :interval="5000" arrow="always" style="width: 100%; height: 300px; margin: 0px auto">
      <el-carousel-item v-for="item in items" :key="item.id">
        <el-image
          style="width: 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="width: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;width: 500px">
            <img slot="reference" :src="scope.row.url" alt="" style="max-height: 50px;max-width: 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>

View Code

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>

View Code

 

来源：oschina

链接：https://my.oschina.net/u/4406918/blog/4279020