精华内容
下载资源
问答
  • 设置某一页的背景图片,其他页不受影响。起初,我在style中设置 <style> body{ background-image: url("../assets/bg5.jpg"); background-size: cover; background-repeat: no-repeat; } </style> ...

    想设置某一页的背景图片,其他页不受影响。起初,我在style中设置

    <style>
    body{
      background-image: url("../assets/bg5.jpg");
      background-size: cover;
      background-repeat: no-repeat;
    }
    </style>
    

    但会使其他页面被影响,导致所有页面都有这个背景图片。
    解决方法:

      mounted() {
        document.querySelector('body').setAttribute('style', "background-image: url("+require("../assets/bg5.jpg")+");background-size: cover;" +
          "background-repeat: no-repeat")
      },
      beforeDestroy() {
       document.querySelector('body').removeAttribute('style')
      },
    

    这样,当打开此页面时,显示它的背景图片,离开页面后,背景销毁。

    展开全文
  • vue组件模板引用背景图片 // 在模板中设置背景图片时,由于样式中的 <div style="background-image: url();"></div> ,所以需要使用{将样式放在里面} Vue.component("content-item",{ template: ` <...

    vue组件模板引用背景图片

    // 在模板中设置背景图片时,由于样式中的  <div style="background-image: url();"></div> ,所以需要使用{将样式放在里面}
    Vue.component("content-item",{
        template: `
        <li class="content-item">
            <div :style="{backgroundImage: 'url('+dataList.url+')'}"></div>
            <h4>{{dataList.name}}</h4>
            <span>by Apple Music</span>
        </li>
        `,
        data() {
            return {
                dataList: {
                	url:'',
                	name: '',
    			},
            }
        },
    });
    
    展开全文
  • 今天小编就为大家分享一篇vue动态改变背景图片demo分享,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue自定义组件图片缩放

    千次阅读 2019-01-12 14:24:08
    zoom.js放大后的图片会受原img本身外层高宽限制,恰恰我们做缩略图往往会限制外层宽高以便多图呈现,并希望放大后的图片不受原img影响,基于这个问题,下面借助layer.js简单封装了一个Vue图片缩放组件。 目录 1...

        点击缩略图放大,查看原比例高清大图,是我们做完图片上传功能后经常需要遇到面对的问题,比如图片预览。虽然这个问题zoom.js这个现成插件可以帮我们解决,美中不足的是,zoom.js放大后的图片会受原img本身外层高宽限制,恰恰我们做缩略图往往会限制外层宽高以便多图呈现,并希望放大后的图片不受原img影响,基于这个问题,下面借助layer.js简单封装了一个Vue图片缩放组件。

    目录

    1.demo页面

    2.组件核心:JS/CSS/辅助页面

    3.demo演示

    4.实现原理简述


    1.demo页面

    kt-zoom-demo.html
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <link rel="stylesheet" href="kt-zoom.css">
        <style>
            .wrap {
                border: 1px solid;
                /* 自身水平垂直居中 */
                width: 300px;
                height: 300px;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                /* 内部元素水平垂直居中 */
                display: flex;
                justify-content: center;
                align-items: center;
            }
    
            .wrap img {
                max-width: calc(100% - 12px);
                max-height: calc(100% - 12px);
            }
    
            .el-card__body {
                position: relative;
                height: calc(100vh - 100px);
            }
    
            .el-icon-view:hover{
                color: #f56c6c;
            }
        </style>
        <title>Document</title>
    </head>
    <body>
    <div id="app">
        <el-card style="padding: 20px;" v-cloak>
            <div slot="header">
                KT-ZOOM-DEMO
                <kt-zoom custom :src="src">
                    <el-button style="font-size: 16px;" type="text" size="mini">
                        <i class="el-icon-view"></i>
                    </el-button>
                </kt-zoom>
            </div>
    
            <div class="wrap">
                <kt-zoom class="real-img" :src="src"></kt-zoom>
            </div>
        </el-card>
    </div>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="kt-zoom.js"></script>
    <script>
        const APP = new Vue({
            el: '#app',
            data() {
                return {
                    src: 'images/tongliya.jpg'
                }
            }
        });
    </script>
    </body>
    </html>

    2.组件核心:JS/CSS/辅助页面

    kt-zoom.js
    document.write("<script src='layer/layer.js'></script>");
    
    Vue.component("kt-zoom", {
        template: `
          <span v-if="custom" @click="clickMe" v-cloak><slot></slot></span>
          <img v-else class="zoom-in" :src="src || 'images/zhanwutupian.png'" alt="This is an image" @click="clickMe" v-cloak>
        `,
        props: {
            src: String,
            custom: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            clickMe() {
                // const $ev = ev || event;
                // let src = $ev.target.getAttribute('src');
                let src = this.src || 'images/zhanwutupian.png';
                if (src.indexOf('=') !== -1) src = src.replace(/=/g, "%3D");
                layer.open({
                    type: 2,
                    title: false,
                    closeBtn: 0,
                    area: ['60%', '80%'],
                    skin: 'layui-layer-nobg', //没有背景色
                    shadeClose: true,
                    content: `!!kt-zoom-img!!.html?src=${src}`
                });
            }
        }
    });
    kt-zoom.css
    [v-cloak] {
        display: none !important;
    }
    
    .zoom-in {
        transition: width 1s, height 1s;
    }
    
    .zoom-in:hover {
        cursor: url("images/zoomin.ico"), auto;
    }
    
    .zoom-out {
        transition: width 1s, height 1s;
    }
    
    .zoom-out:hover {
        cursor: url("images/zoomout.ico"), auto;
    }
    
    .kt-zoom_wrap {
        /* 自身水平垂直居中 */
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        /* 内部元素水平垂直居中 */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .kt-zoom_wrap img {
        max-width: calc(100% - 12px);
        max-height: calc(100% - 12px);
    }
    
    !!kt-zoom-img!!.html
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <link rel="stylesheet" href="kt-zoom.css">
        <style>
            html, body {
                width: 100%;
                height: 100%;
            }
        </style>
        <title>Document</title>
    </head>
    <body>
    <div id="app">
        <div class="kt-zoom_wrap" v-cloak>
            <img class="zoom-out" :src="src" alt="Here is an img" @click="clickMe">
        </div>
    </div>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        const APP = new Vue({
            el: '#app',
            data() {
                return {
                    src: void 0,
                }
            },
            methods: {
                clickMe() {
                    // 当你在iframe页面关闭自身时
                    let index = parent.layer.getFrameIndex(window.name); // 先得到当前iframe层的索引
                    parent.layer.close(index); // 再执行关闭
                },
                // 获取父页面url传参
                getParams(){
                    const url = location.search;
                    let params = {};
                    if (url.indexOf("?") !== -1) {
                        let str = url.substr(1);
                        let strs = str.split("&");
                        for (let i = 0; i < strs.length; i++) {
                            params[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                        }
                    }
                    return params;
                }
            },
            created() {
                this.src = encodeURI(this.getParams().src) || 'images/zhanwutupian.png';
            }
        });
    </script>
    </body>
    </html>

    3.demo演示

    4.实现原理简述

    1.通过layer弹出框插件,点击缩略图时,弹出辅助页面并传入src路径。
    2.辅助页面放置img原图,设置max-width、max-height百分百并且水平垂直居中即可。
    PS:完整demo以图包方式存放,右键 演示demo.gif 存储=》重命名xxx.rar=>解压即可。

     

    展开全文
  • Vue设置背景图片全屏显示

    千次阅读 2019-09-07 15:29:00
    <div class="img1"></div> style样式: .img1{ background-size: 100% 100%; background: url('~@/../static/images/back.jpg') center center no-repeat; height: 100%;...图片路径要正确。

    <div class="img1"></div>
    style样式:

    .img1{
          background-size: 100% 100%;
          background: url('~@/../static/images/back.jpg') center center no-repeat;
          height: 100%;
          position: fixed;
          width: 100%
      }
    

    图片路径要正确。
    目录结构

    展开全文
  • Vue项目中设置背景图片方法

    万次阅读 2019-01-29 17:18:06
    Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式: background:url("../....
  • 在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理,个人的理解是全局状态管理更合适;简单的理解就是你在state中定义了一个数据之后,你可以在所在项目中的任何一个组件里进行获取、进行修改...
  • vue 组件图片地址,图片获取

    千次阅读 2018-05-05 03:54:03
     或者 背景图片background;当我们利用vue-cli 搭建好项目的框架,开始高高兴兴开发组件的时候,有的时候想加一张图片,或者在样式中加个背景,会发现,图片引用不进来,这可愁坏了不是;组件中引用图片用于 &...
  • vue在body设置背景图的情况下怎么给组件加背景颜色?...我在vue组件设置背景图后没有任何反应,但是把页面缩小的话组件图片反而会显示出来,应该怎么设置? 图一是正常大小,图二是页面缩小后! ...
  • vue项目中设置背景图片 vue踩坑系列:backgroundImage路径问题 转载于:https://www.cnblogs.com/knuzy/p/9512322.html
  • vue图片、背景图片路径问题 vue中引入图片经常会出现路径问题,在此记录一下: 1.组件中 <img> 引用图片 <img src="../assets/img/logo.png" alt=""> 2.app.vue <style>中引入图片 ...
  • 最近,有个需求你要给元素设置背景图片, 突然发现直接background-image不好使了, 于是采用了一下的方式来解决 首先在data中定义 data(){ return { backImgStyle: { backgroundImage: "url(" + require("@/...
  • <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" :append-to-body="true"> </el-dialog>
  • Vue + element-ui 背景图片设置

    万次阅读 2018-12-28 10:02:19
    Vue + element-ui 背景图片设置 初学vue 看到其他网址都有些背景图片,于是试着自己也写了一下,表述不好请见谅 实现效果 找到你想要设置背景图片的页面 data里设置url data() { return { url: '', ...
  • vue css引用背景图片问题

    万次阅读 2019-07-12 17:15:56
    就能引入静态背景图片; 如果服务器上存在前缀的时候: 比如 www.baidu.com/hello/你的项目, 这里的hello就是你的前缀,这时候就会出问题了,背景图片找不到了,下面踢狗两种方法。 一:打开 build 文件夹下的 ...
  • I want to use a svg image from my assets folder in one of my components as a background-image. Here is an example of my component:export default {name: 'component'}.container {height: 40px;...
  • vue 图片上传组件

    千次阅读 2017-11-06 21:34:11
    vue图片上传组件 vue图片上传组件,实现批量上传和单张上传功能,控制图片大小,数量,以及压缩处理,利用了mint-ui的提示框 监听两个参数,分别是MAX控制最多上传的数量,multiple控制是否批量上传,self.$emit...
  • vue项目中,从一个组件获取图片url,并为另一个组件设置图片背景的盒子 子组件 <template> <div class="intd_content_banner" :style="{background:'url('+banner.url+')'}"> </div> &...
  • vue播放器组件

    2020-04-20 19:21:57
    vue中使用播放器组件 效果图 说明: 由于测试视频高度原因出现黑背景 安装及引入 官方文档 npm i vue-video-player -S 全局引入 在main.js中导入并引用 import VideoPlayer from 'vue-video-player' import '...
  • vue 星空背景组件

    千次阅读 2017-09-15 13:06:41
    摘下星星送给你博客的背景...封装成vue组件 后期折腾下去换了博客的背景 可以设置星星个数(默认25)、星星颜色、线条颜色 废话不多说,直接上源码 如果问题,欢迎私信交流 <canvas ref="canvas"></canvas>
  • Vue页面添加背景图片 从0上手的过程中遇到的问题,在这里记录一下。 解决方案参考【vue/css】如何给vue页面添加背景图片-vue cli3. 只改动了html和css两部分。 html部分 <!--两个div第一个装背景,一个装背景...
  • 主要介绍了使用Vue-cli 中为单独页面设置背景图片铺满全屏,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 问题:vue-cli脚手架中 组件相互嵌套,图片路径报错。 解决办法:首先把图片引入进来,然后再付给data(); &lt;template&gt; &lt;img :src="picUrl"/&gt; &lt;/template&gt; ...
  • beforeRouteEnter(to, from, next) { document.getElementsByTagName(“body”)[0].className = “bac”; next() }, beforeRouteLeave(to, from, next) { document.body.removeAttribute(“class”,“bac”);...
  • vue 动态背景图片

    千次阅读 2019-07-25 17:40:42
    在methods新增一个方法styleBg 在data定义一个背景样式styleObject对象 styleBg() { var styleObject = { background: "url(" + this.base_url + this.train.image + ")", backgroundSize: "7.5rem" + " " + ...
  • Vue Element UI 组件化 之 背景组件

    千次阅读 2020-02-19 15:23:30
    step1:创建背景组件 bg.vue组件实现: 1、背景图可以自适应屏幕宽度(高度足够适应,不考虑高度) 2、背景图位置固定,不会产生滚动条 3、背景图高度足够高(1920*4092),可以自适应PC端、iPad、移动端 <...
  • vue 签名组件

    千次阅读 2019-10-30 11:37:01
    签名组件原理: 利用原生canvas 配合 移动端的事件, touchstart, touchend, touchmove, 进行 在canvas 画布上画线, 最后,把生成的签名, 通过 toDataURL()方法 保存 为 base64 图片,就拿到签名了,实现效果如下: ...
  • VUE验证码组件

    2019-08-07 14:45:28
    VUE验证码组件组件源码组件使用 组件源码 identify.vue <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div&...
  • 如何给Vue页面添加背景图片

    千次阅读 2020-07-24 19:55:55
    1、首先需要两个div,一个用来放背景图,一个用来放除背景图之外的东西 <div class="background"></div> <div class="front"></div> 第一个div放背景图 <div class="background"> &...
  • vue图片裁剪组件 Vuejs夹 (vuejs-clipper) Vue.js image clipping components using Vue-Rx. 使用Vue-Rx的Vue.js图像裁剪组件。 Add image clipping components to your Vue application in nothing flat. 无需...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,812
精华内容 3,124
关键字:

vue设置组件背景图片

vue 订阅