精华内容
下载资源
问答
  • 由于树中每一个节点都须要显示一个图标图片,而且须要根据后台传入的数据类型动态地显示,因此图片的路径须要动态地加载。下面是核心组件代码:html {{ node.label }}后台交互使用了vuex和axios,本篇...

    最近在作一个树形结构的组件,使用了Vue和element UI中el-tree组件。由于树中每一个节点都须要显示一个图标图片,而且须要根据后台传入的数据类型动态地显示,因此图片的路径须要动态地加载。下面是核心组件代码:html

    {{ node.label }}

    后台交互使用了vuex和axios,本篇文章后台数据没有问题,因此不作展现了。后台传入的数据结构是这样的:vue

    {

    "id": "2|299|0",

    "open": false,

    "maxStatus": 0,

    "iconSkin": "res1",

    "name": "test",

    "children": [],

    "parent": false

    }

    Vue中动态加载图片须要使用require,这个不少文章都有介绍。具体能够参考这篇文章vue的 v-for 循环中图片加载路径问题。node

    一开始我认为直接在后台传入完整的js语句就能加载,因此我把后台传入的数据iconSkin写成了完整的路径。也就是require(@/assets/resourceimage/res1.png),具体代码跟最上面的代码片断一致。ios

    原本觉得这样就能加载成功了,打开chrome查看发现图片裂开了,也就是图片获取失败了。检查HTML元素,发现图片的路径是字符串。vuex

    这是由于js在解析对象的时候并不会把字符串当成js对象去解析,所以解析出的路径显示成了字符串。在屡次尝试和查资料之后我找到了几个解决方案chrome

    方案一:在src路径写require

    这个方案比较简单,json

    只要保证数据是正确的,这个方案是彻底能够的。axios

    方案二:使用computed

    computed是Vue里的计算属性,computed会在state数据更新时自动计算。数据结构

    computed: mapState({

    tree: function(state) {

    const data = state.resTree.treeResult;

    if (data != null) {

    const result = state.resTree.treeResult;

    return result.data;

    }

    }

    })

    可是注意,此时不能使用方案一那样的形式了,应该将computed的数据绑定在组件上,而后经过v-for的方式进行调用。以element-UI的el-tree组件为例,咱们能够这样写:ui

    {{node.label}}

    methods: {

    getUrl(url) {

    return require(`@/assets/resourceimage/${url}.png`);

    }

    }

    这个用法比较简单,它把computed的计算结果——也就是tree绑定到el-tree的data上,这样就可使用内部的node使用tree中的数据了。

    切记不要使用下面的记住写法:

    require('@/assets/resourceimage/'+${node.icon}'+'.png');

    require('@/assets/resourceimage/'+{{node.icon}}'+'.png');

    展开全文
  • 在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片 方法有两种, 方法一: props...

    在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片

     

    方法有两种,

    方法一:

    props传值,这里注意一个问题,传过来的值需要用watch监听并赋值,否则这里获取到的是空数组

      父组件:

    <uploadImg :width="200" :height="200" name="productImage" size="750px*750px" ref="productImage" :src-list="this.productImage"></uploadImg>

    this.productImage=res.data.cover;

    这里把通过后台返回的数组赋值给

    this.productImage,然后把该数组传给子组件定义的props属性src-list

    子组件:

    watch:{
         srcList(curVal,oldVal){
          if(curVal){
           ;
           this.uploadImg=curVal;
           }
         },
    }

    然后子组件成功获取到该数组

     

    方法二:

    通过ref属性,父组件调用子组件的方法,把要传的数组作为参数传给子组件,子组件获取该参数,并使用

    父组件:

    this.$refs.productImage.getSrcList(res.data.cover); 

    子组件:

    ​​​​​​​getSrcList(val){
      this.uploadImg=val;
    }

    PS:下面看下vuejs动态组件给子组件传递数据

    通过子组件定义时候的props可以支持父组件给子组件传递数据,这些定义的props在子组件的标签中使用绑定属性即可,但是如果使用的是<component>动态组件,这个时候就没有显式的子组件标签,要给子组件传递数据需要在<component> 中进行绑定

      <div class="app" id="deviceready">
        <component :is="currentView" :user_name.sync="user_name" :DOB.sync="DOB"></component>
      </div>

    组件的作用于是独立的

    组件的作用于是独立的,如果要从跟组件获取数据,那么需要一层层的传递才行,也就是说子组件只能从直接父组件获取数据,如果是根组件的数据,那么父组件就要继续暴露pops从而绑定来自根组件的数据。

    展开全文
  • 需要动态访问本地的图片,最开始书写如下 父组件组件 这样写虽然浏览器不报错,但是也没有解析出图片位置 图片引入需要require方法,而且很奇怪,require还需要拼接,我如果不拼接,仍然会报错 父...

    有个需求

    需要动态访问本地的图片,最开始书写如下

    父组件

    子组件

    这样写虽然浏览器不报错,但是也没有解析出图片位置

     

    图片引入需要require方法,而且很奇怪,require还需要拼接,我如果不拼接,仍然会报错

     

    父组件

    子组件

    最后可以在浏览器正确显示了

    展开全文
  • 比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片,因为有时候获取到的会是空,所以这里要考虑到动态获取。 方法有两种, 方法一: ...

    1.vue父组件向子组件动态传值的两种方法
    在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片,因为有时候获取到的会是空,所以这里要考虑到动态获取。

    方法有两种,

    方法一:
    props传值,这里注意一个问题,传过来的值需要用watch监听并赋值,否则这里获取到的是空数组
    父组件:

    <uploadImg :width="200" :height="200" name="productImage" size="750px*750px" ref="productImage" :src-list="this.productImage"></uploadImg>
    this.productImage=res.data.cover;
    

    这里把通过后台返回的数组赋值给this.productImage,然后把该数组传给子组件定义的props属性src-list

    export default {
      name: '***',
      props: {
        srcList: {
    
        }
      },
      data() {
      	uploadImg: ''
      }
    }
    

    子组件:
    watch代码

    watch:{
        srcList(curVal,oldVal){
         if(curVal){
           this.uploadImg=curVal;
          }
       },
    }
    

    方法二:

    通过ref属性,父组件调用子组件的方法,把要传的数组作为参数传给子组件,子组件获取该参数,并使用

    父组件:

    this.$refs.productImage.getSrcList(res.data.cover);
    子组件:

    getSrcList(val){
    this.uploadImg=val;
    }

    同理,子组件向父组件传值,如果是动态改变的,也要记得加watch函数,动态改变之后执行的操作写在watch里,比如 this.$emit 的函数!

    2.vue父组件中获取子组件中的数据

    <FormItem label="上传头像" prop="image">
      <uploadImg :width="150" :height="150" :name="'avatar'" size="150px*150px" ref="avatar"></uploadImg>
    </FormItem>
    <FormItem label="上传营业执照" prop="businessLicence">
      <uploadImg :width="350" :height="200" :name="'businessLicence'" size="350px*200px" ref="businessLicence"></uploadImg>
    </FormItem>
    

    自己写了个上传图片的子组件,父组件需要获取到子组件上传的图片地址,

    方法一:给相应的子组件标签上加 ref = “avatar”

    父组件在最后提交的时候获取this.$refs.avatar.相应数据 即可,因为在这里才能保证图片已经上传,否则如果图片没上传,拿到的值一定为空。

    方法二:$emit()

    /*
        子组件
    */
    <template>
        <input type='file' @change="changeUrl" />
    </template>
    <script>
    export default {
        methods: {
            changeUrl(e) {
                this.$emit('changeUrl', e.currentTarget.files[0].path)
            }
        }
    }
    </script>
    
    /*
        父组件
    */
    <template>
        <FormItem label="上传营业执照" prop="businessLicence">
            <uploadImg :width="350" :height="200" :name="'license'" size="350px*200px" @changeUrl="getUrl"></uploadImg>
        </FormItem>
    </template>
    <script>
    export default {
        methods: {
            getUrl(path) {
                //这个就是你要的path,并且会双向绑定
            }
        }
    }
    </script>
    

    当使用this.$emit方法获取的时候,如果子组件想要给父组件传入多个值,则可以写多个参数,父组件在获取的时候获取多个参数的值即可

    //父组件
    getUrl(path1,path2) {
    console.log(path1,path2)
    }

    注意问题:
    1、父组件相应事件写在该子组件上
    2、子组件如果并没有click事件触发,也没有类似本例input需要change事件触发,则在created或者mounted函数中让该函数加载即可
    3、子组件向父组件传值需 是父组件 用到了 ,如果多个父组件引用了该子组件,则只有传值的时候用的子组件来自哪个父组件,这个父组件才可以接收到值,其他父组件获取不到子组件传的值。

    展开全文
  • 在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片 方法有两种, 方法一: props传值,...
  • 在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片。本文主要介绍了vue父组件向子组件...
  • 随着这几年前端技术快速发展,Vue框架在国内普及率极高,人人都会用,那Vue如何写得比别人优雅?如何写得比别人漂亮?...本文将介绍一些大厂Vue项目的最佳实践:01一劳永逸的组件注册通常在组件使用前,需要引...
  • 使用css设置body背景图,会出现页面切换后,新页面依然显示背景图的问题,所以利用好vue组件的生命周期可以解决这个问题。 但是在利用生命周期函数动态获取背景图片时会出现图片获取不成功的问题。 问题: 在css...
  • 对大部分人来说,掌握Vue.js...第一招:化繁为简的Watch场景还原:组件创建的时候我们获取一次列表,同时监听input框,每当发生变化的时候重新获取一次筛选后的列表这个场景很常见,有没有办法优化一下呢?招式解...
  • vue的怎么动态获取绑定的多个组件的props的值?这是一个tab切换的demo,三个切换按钮,点击切换对应的组件显示。新手一枚,这么写在选中组件1没选中的另外两个组件的情况下总显示caseconts2="[object Object],...
  • 前提 在开始之前,需要先把element-ui安排上 //方式1 npm i element-ui -S //方式2 <!-- 引入样式 -->...-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js">&
  • 项目背景:使用vue-cli3搭建的项目框架 问题描述:父组件里面有一个轮播图,这...所以我需要传给这个轮播图组件一个婚姻状态,这个婚姻状态呢,又是从接口里面动态获取到的,这个轮播图呢,又是在页面加载的时候就...
  • 由于组件化问题,webpake在打包以后,src目录下的assets里面存放的img图片,路径已经更换。很多入坑的前端程序员在使用的时候,可能专破头也弄不清地址是什么个情况; 这里在使用vue-cli脚手脚构建工具,目录下会...
  • 场景:在Swiper父组件里对SwiperItem前后各添加一张图片,还有动态修改SwiperItem的样式 因为swiper渲染swiper-item用的是slot,所以没办法用ref 目前来看,vue3把this.$children给干掉了,但有个替代办法是子...
  • this.$refs.cropper.getImgAxis() 获取图片基于容器的坐标点 this.$refs.cropper.getCropAxis() 获取截图框基于容器的坐标点 this.$refs.cropper.goAutoCrop 自动生成截图框函数 this.$refs.cropper.rotateRight...
  • 最近调试大屏展示样式需要在vue 项目中设置背景图,踩坑,花费一上午时间才解决,其中最大的问题是,vue中的行内style不能直接获取url设置background,需要在组件中引入要的图片资源然后设置backgroundImage,具体...
  • VUE中通过 默认会被渲染成一个 标签,可以对a标签进行操作,但是这种如果如果要实现点击不同的导航菜单,base组件不改变的情况改变背景图片时,这种方法并不适合。 我们可以在base组件中编写导航菜单,通过...
  • demo14:动态组件和ElementUI的tabs demo15:ElementUI分页组件 demo16:canvas为页面添加水印 demo17:上传进度提示 demo18:在ElementUI中插入自定义标签 demo19:动态读取图片 demo20:Mixin demo21:组件上使用v...
  • 文章目录vue实现订单多商品评价效果图前提template初始化获取订单详情上传图片after-read上传图片到服务器上传图片成功,返回数据效果图删除图片是否好评是否匿名评价内容发布评价 效果图 思考: vue中v-model是双向...
  • sign-canvas 一个基于 canvas 开发,封装于 Vue 组件的通用手写签名板(电子签名板),支持 pc 端和移动端; ┭┮﹏┭┮ 因为 vue-sign-canvas 的包名被占用了,只好去掉一个前缀了.... 假如此轮子对你有帮助,请顺手 star...
  • 二刷父子组件通信props ...根据上几张图片,很清楚的看出父组件中data数据传到了props中,且利用了v-bind语法糖动态绑定,props里面的数据也可以是对象,比如 props: { cInfo: { type: Object, /
  • 在路由后面+:元素即可绑定动态路径后的值,在进入相应网页路径后,可以将路径后的对应值绑定到对应路径,元素可以进行全局绑定,在使用axios获取数据时可以使用绑定的元素,获取相应的数据 &lt;ul&gt; &...
  • 这里写目录标题解决使用router-link导致的字体变色问题使用动态路由跳转页面实现Banner背景的从上到下的渐变色实现点击banner图,弹出一个画廊组件图片的轮播)实现页面滑动至离顶部60时,出现Header组件实现...

空空如也

空空如也

1 2 3
收藏数 49
精华内容 19
关键字:

vue组件动态获取图片

vue 订阅