精华内容
下载资源
问答
  • 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项目中设置背景图片方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue 组件图片地址,图片获取

    千次阅读 2018-05-05 03:54:03
    当我们利用vue-cli 搭建好项目的框架,开始高高兴兴开发组件的时候,有的时候想加一张图片,或者在样式中加个背景,会发现,图片引用不进来,这可愁坏了不是;组件中引用图片用于 &lt;img src="???"&...

    前提:在组件中使用引用图片,用于<img src>  或者  背景图片background;

    当我们利用vue-cli 搭建好项目的框架,开始高高兴兴开发组件的时候,有的时候想加一张图片,或者

    在样式中加个背景,会发现,图片引用不进来,这可愁坏了不是;


    组件中引用图片用于 <img src="???">

    使用图片之前,我们可以这么做,在组件的script 中引入图片,下面示例引入一张图片:

    < script>
    import skate2 from "../assets/img/skate2.png"
    export default {
    name: "SkateTop"
    }
    </ script>


    导入我们的图片之后就可以在<img src="??">的地址中加上我们的地址就行了;


    组件中样式中引入背景图片:

    这个你可能会问,上面不是说了怎么引入图片了么,我用上面的方式也能加上背景图片啊,有什么问题么?

    问题可大了, 你现在是在本地开发,貌似没问题,当你开发完丢到服务器一看,背景图片咋没了,好奇怪啊,

    好吧,问题在于:我们要修改一个东西:



    看到没,找到这个utils.js 文件,图片都截给你了,找不到那就没办法了;

    打开这个文件;

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
    return ExtractTextPlugin. extract({
    use: loaders,
    publicPath: '../../', //加上这么一句就可以了
    fallback: 'vue-style-loader'
    })
    } else {
    return [ 'vue-style-loader']. concat(loaders)
    }
    }

    看到了吧,加上这么一句话就OK了,这里说的是基于vue-cli搭建的目录,注意咯!


    好了,关键点已经详述,自己尝试吧!

    展开全文
  • vue在body设置背景图的情况下怎么给组件加背景颜色?...我在vue组件设置背景图后没有任何反应,但是把页面缩小的话组件图片反而会显示出来,应该怎么设置? 图一是正常大小,图二是页面缩小后! ...

    vue在body设置了背景图的情况下怎么给组件加背景颜色?

    我在vue组件中设置背景图后没有任何反应,但是把页面缩小的话组件图片反而会显示出来,应该怎么设置?
    图一是正常大小,图二是页面缩小后!
    在这里插入图片描述

    展开全文
  • 组件化思想: · 组件化是Vue.js中的重要思想。 · 它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用。 · 任何的应用都会被抽象成一颗组件树。 以下,我们可以看到,Vue的开发怎样...

    ▪ 组件化思想:

        · 组件化是Vue.js中的重要思想。

        · 它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用。

        · 任何的应用都会被抽象成一颗组件树。

       以下,我们可以看到,Vue的开发怎样从我们上一节的简单语法,一步步进化成复杂的企业级工程的。

    ▪ 组件的注册和使用

        • 旧版本Vue注册组件的方法

        1.创建组件 Vue.extend()

          · 调用Vue.extend()创建的是一个组件构造器。 

          · 通常在创建组件构造器时,传入template代表我们自定义组件的模板。

          · 该模板就是在使用到组件的地方,要显示的HTML代码。

          · 事实上,这种写法在Vue2.x的文档中几乎已经看不到了。现在会直接使用语法糖。

        2.注册组件 Vue.component()

          · 调用Vue.component()是将刚才的组件构造器注册为一个组件,并且给它起一个组件的标签名称。

          · 所以需要传递两个参数:(1)注册组件的标签名;(2)组件构造器。

        3.使用组件 

          · 组件必须挂载在某个Vue实例下,否则它不会生效。

          · 我们来看下面我使用了三次

          · 而在

    之外的并没有生效。

    3ab7ecd231fef9dc8bb6f23d7182a4ef.png

        • 目前注册组件的方法

        主要是省去了调用Vue.extend()的步骤,而是使用语法糖,直接使用一个对象来代替。

        1. 定义一个组件

        定义一个名为 button-counter 的新组件,组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是 。

    Vue.component('button-counter', {
      data: function () {return {
          count: 0
        }
      },
      template: 'You clicked me {{ count }} times.'
    })

        2. 使用一个组件

        我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用:

    "components-demo"><button-counter>button-counter>div>

        • 组件的复用

        你可以将组件进行任意次数的复用,注意当点击按钮时,每个组件都会各自独立维护它的 count。因为你每用一次组件,就会有一个它的新实例被创建。

    <div id="components-demo"><button-counter>button-counter><button-counter>button-counter><button-counter>button-counter>div>

        • data 必须是一个函数

        如果,组件是这样定义data,点击一个按钮就,其他按钮的计数全部跟着变化。

    data: {count: 0
    }

    512b7ef297baa827c4ae144837ac1d24.png

    ▪ 组件的组织

        通常一个应用会以一棵嵌套的组件树的形式来组织:

    fb20c92b9a79bd59d5286aa7d208aab9.png

        你可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件。

        为了能在模板中使用,这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型:全局注册和局部注册。

        • Vue.component 全局注册 

    当我们通过调用Vue.component()注册组件时,组件的注册是全局的,这意味着该组件可以在任意Vue示例下使用。

    Vue.component('my-component-name', {// ... 选项 ...
    })

        也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。比如:

    Vue.component('component-a', { /* ... */ })Vue.component('component-b', { /* ... */ })Vue.component('component-c', { /* ... */ })new Vue({ el: '#app' })

        • components 局部注册

        全局注册往往是不够理想的。比如,如果你使用一个像 webpack 这样的构建系统,全局注册所有的组件意味着即便你已经不再使用一个组件了,它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

         在这些情况下,你可以通过一个普通的 JavaScript 对象来定义组件。

         如果我们注册的组件,用components挂载在某个实例中, 那么就是一个局部组件。

    var ComponentA = { /* ... */ }var ComponentB = { /* ... */ }var ComponentC = { /* ... */ }

        然后在 components 选项中定义你想要使用的组件:

    new Vue({el: '#app',components: {'component-a': ComponentA,'component-b': ComponentB
      }
    })

        全局和局部,Vue.component和components的区别!

        • 模块系统

        就是对组件进行export/import(导出/导入)操作,这是模块化编程的基础。到这里,我们的Vue文件结构就慢慢看到雏形了。

        例如,在 ComponentB.js 或 ComponentB.vue 文件中进行如下操作:

    import ComponentA from './ComponentA'import ComponentC from './ComponentC'export default {
      components: {
        ComponentA,
        ComponentC
      },// ...
    }

        现在 ComponentA 和 ComponentC 都可以在 ComponentB 的模板中使用了。

        • 基础组件的自动化全局注册

        全局化注册,就正如src/main.js全局导入基础组件,这就是我们日常企业级编程的规范:

    import Vue from 'vue'import upperFirst from 'lodash/upperFirst'import camelCase from 'lodash/camelCase'const requireComponent = require.context(// 其组件目录的相对路径'./components',// 是否查询其子目录false,// 匹配基础组件文件名的正则表达式
      /Base[A-Z]\w+\.(vue|js)$/
    )
    requireComponent.keys().forEach(fileName => {// 获取组件配置const componentConfig = requireComponent(fileName)// 获取组件的 PascalCase 命名const componentName = upperFirst(
        camelCase(// 获取和目录深度无关的文件名
          fileName
            .split('/')
            .pop()
            .replace(/\.\w+$/, '')
        )
      )// 全局注册组件
      Vue.component(
        componentName,// 如果这个组件选项是通过 `export default` 导出的,// 那么就会优先使用 `.default`,// 否则回退到使用模块的根。
        componentConfig.default || componentConfig
      )
    })

        记住全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。

        • 模板的分离写法

        刚才,我们通过语法糖简化了Vue组件的注册过程,但是template模块写法也是比较麻烦。如果我们能将其中的HTML分离出来写,然后挂载到对应的组件上,必然结构会变得非常清晰。

        于是,Vue提供了两种方案来定义HTML模块内容:

          ·

    展开全文
  • 问题:vue-cli脚手架中 组件相互嵌套,图片路径报错。 解决办法:首先把图片引入进来,然后再付给data(); &lt;template&gt; &lt;img :src="picUrl"/&gt; &lt;/template&gt; ...
  • vue项目中设置背景图片 vue踩坑系列:backgroundImage路径问题 转载于:https://www.cnblogs.com/knuzy/p/9512322.html
  • vue-particles一个拥有粒子背景vue组件
  • 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%;...图片路径要正确。
  • Vue组件收集

    千次阅读 2020-06-10 13:52:31
    Vue组件收集 文章目录Vue组件收集UI组件开发框架实用库服务端辅助工具应用实例Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 ...
  • Vue + element-ui 背景图片设置

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

    千次阅读 2019-09-14 03:39:04
    vue2组件引入本地图片的的两种方式: 1,使用@引入: 这是在组件内直接引用和普通的html方法一样,代码如下 <img src="@/assets/test.png" alt="test.png"> 2,使用vue的方法引入: 这是典型的vue思想,使用...
  • vue 图片上传组件

    千次阅读 2017-11-06 21:34:11
    vue图片上传组件 vue图片上传组件,实现批量上传和单张上传功能,控制图片大小,数量,以及压缩处理,利用了mint-ui的提示框 监听两个参数,分别是MAX控制最多上传的数量,multiple控制是否批量上传,self.$emit...
  • Vue Element UI 组件化 之 背景组件

    千次阅读 2020-02-19 15:23:30
    step1:创建背景组件 bg.vue组件实现: 1、背景图可以自适应屏幕宽度(高度足够适应,不考虑高度) 2、背景图位置固定,不会产生滚动条 3、背景图高度足够高(1920*4092),可以自适应PC端、iPad、移动端 <...
  • 设置某一页的背景图片,其他页不受影响。起初,我在style中设置 <style> body{ background-image: url("../assets/bg5.jpg"); background-size: cover; background-repeat: no-repeat; } </style> ...
  • 封装Vue组件

    2020-12-10 20:53:45
    封装Vue组件 组件库开发 很多项目都会用到界面和功能相似的组件,为了能在不同项目中最大程度重用组件,所以会进行组件库开发,以提供不同项目基础的组件 开源组件库 Element-UI iView 组件驱动开发CDD ...
  • 解决vue组件css中背景图片路径报错问题 前提是你用了vue-cil,那么在build目录下找到utils.js中的ExtractTextPlugin.extract({}),里面添加下面这个属性就完美解决了publicPath: '../../'
  • vue 组件 显示才加载 Vue加载图像 (vue-load-image) vue-load-image is 3KB minimalist Vue component that display loader during image loading, as well as by display alternate content when the image fails ...
  • VUE组件汇总

    2019-08-29 16:48:23
    内容 UI组件 开发框架 实用库 ...Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★6253 - Vue 2的移动UI元素 muse-ui ★3705 - 三端样式一致的响应式 U...
  • vue 星空背景组件

    千次阅读 2017-09-15 13:06:41
    摘下星星送给你博客的背景...封装成vue组件 后期折腾下去换了博客的背景 可以设置星星个数(默认25)、星星颜色、线条颜色 废话不多说,直接上源码 如果问题,欢迎私信交流 <canvas ref="canvas"></canvas>
  • 在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理,个人的理解是全局状态管理更合适;简单的理解就是你在state中定义了一个数据之后,你可以在所在项目中的任何一个组件里进行获取、进行修改...
  • 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" + " " + ...
  • 上传图片,显示进度条,转换base64,旋转图片, 1.先下载安装 2.引入 import Vue from 'vue'; import Exif from 'exif-js' import {Uploader} from 'vant'; Vue.use(Uploader); import 'vant/lib/uploader/style...
  • Vue自定义组件图片缩放

    千次阅读 2019-01-12 14:24:08
    zoom.js放大后的图片会受原img本身外层高宽限制,恰恰我们做缩略图往往会限制外层宽高以便多图呈现,并希望放大后的图片不受原img影响,基于这个问题,下面借助layer.js简单封装了一个Vue图片缩放组件。 目录 1...
  • vue项目中,从一个组件获取图片url,并为另一个组件设置图片背景的盒子 子组件 <template> <div class="intd_content_banner" :style="{background:'url('+banner.url+')'}"> </div> &...
  • <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" :append-to-body="true"> </el-dialog>
  • vue.js图片处理组件 Vue更大! (Vue It Bigger!) A simple image / video lightbox component for Vue.js. Based on vue-image-lightbox. Vue.js的简单图片/视频灯箱组件。 基于vue-image-lightbox。 View Demo ...
  • Vue组件化编程

    2021-04-27 14:20:15
    前言 上一章我们讲解了Vue的核心功能,也就是核心库;我们是在每一个页面中都去引入vue.js文件;然后通过new Vue()来进行View和Model的管理;但是目前为止,我们还存在一个问题,比如A页面需要...一、vue 组件 组件的出

空空如也

空空如也

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

vue组件设置图片背景

vue 订阅