Vue - Emement 组件库使用

目录

一、安装 官网学习

1-1 npm install element-ui

1-2 main.js配置

二、组件使用（复制粘贴）

2-1 轮播图的使用

2-1-1 后台图片链接传输

2-1-2 前台获取数据和页面展示

---

一、安装 官网学习

1-1 npm install element-ui

1-2 main.js配置

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

二、组件使用（复制粘贴）

2-1 轮播图的使用

总结：

• 后台获取图片链接

2-1-1 后台图片链接传输

from rest_framework.views import APIView
from rest_framework.response import Response


class Imgs(APIView):
    def get(self, request, *args, **kwargs):
        return Response(['http://127.0.0.1:8000/media/slideshow/1.png', 'http://127.0.0.1:8000/media/slideshow/2.png',
                         'http://127.0.0.1:8000/media/slideshow/3.jpg', ])

2-1-2 前台获取数据和页面展示

<template>
    <el-carousel indicator-position="outside" >
        <el-carousel-item v-for="img in imgs">
            <img :src="img">
            <!--<a :href="img"-->
               <!--:style="{backgroundImage:'url('+img+')',-->
                <!--backgroundRepeat:'no-repeat',-->
                <!--backgroundPosition:'center center',-->
                <!--backgroundSize: 'contain'}">-->
            <!--</a>-->
        </el-carousel-item>
    </el-carousel>
</template>

<style>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    img{
        width: 100%;
        height: 100%;
    }
</style>

<script>
    export default {
        data: function () {
            return {
                imgs: [],
            }
        },
        methods: {
            init: function () {
                let _this = this
                this.$http.request({
                    //前端发送请求到后台
                    url: this.$url + 'imgs/',
                    method: 'get'
                }).then(function (response) {
                    _this.imgs = response.data
                })
            }
        },
        //页面加载完成执行方法
        mounted: function () {
            this.init()
        }
    }
</script>