开发者社区> 问答> 正文

宜搭图片组件 动作设置 获取图片URL,代码怎么写

已解决

展开
收起
dcec6hydzm4no 2023-09-03 14:32:55 87 1
3 条回答
写回答
取消 提交回答
  • 十年摸盘键,代码未曾试。 今日码示君,谁有上云事。
    采纳回答

    3.0报表直接展示图片仅支持新建应用下的报表应用,当旧应用内的3.0报表想实现展示图片,需通过下述方法侧方面实现。

     新建动作获取图片地址: 首先,在表单页面点击图片上传组件,选择高级,动作设置里的新建动作,然后选择 onSuccess 上传成功

    参考代码如下(注意修改单行文本唯一标识):

    export function onSuccess(file, value) {   this.$("单行文本组件的唯一标识").setValue("http://www.aliwork.com" + file.imgURL)   console.log('onSuccess', file, value); }

    提交表单数据效果图:

    2023-09-03 15:02:10
    赞同 2 展开评论 打赏
  • 天下风云出我辈,一入江湖岁月催,皇图霸业谈笑中,不胜人生一场醉。

    通过新建动作,我们可以在用户操作了当前字段组件时,做一些动作,比如当用户编辑完当前字段去编辑下一个字段之前,触发一次数据打点功能。如图:image.png
    image.png
    新增动作并不会影响当前字段组件的原始动作,比如,当我们设置了组件必填,那么当前组件失去焦点时,我们一样会去做校验,也一样会触发当前动作设置中的函数。
    具体可参考:JS 动作面板 - 前端代码开放:https://docs.aliwork.com/docs/yida_support/lbtl0t/ocmxyv

    2023-09-14 16:11:29
    赞同 展开评论 打赏
  • 十分耕耘,一定会有一分收获!

    楼主你好,获取图片URL可以通过action属性设置,在action中定义一个方法来获取URL。

    代码示例:
    003.png

    <template>
      <yd-image :src="imageSrc" @load="handleLoad" @error="handleError" />
    </template>
    
    <script>
    export default {
      data() {
        return {
          imageSrc: "https://picsum.photos/200/300" // 默认图片URL
        };
      },
      methods: {
        // 获取图片URL的方法
        getImageUrl() {
          // 通过异步请求获取URL
          return new Promise(resolve => {
            // 假设请求返回的数据为 { imageUrl: "xxx" }
            setTimeout(() => {
              resolve({ imageUrl: "https://picsum.photos/400/600" });
            }, 1000);
          });
        },
        // 图片加载成功的回调
        handleLoad() {
          console.log("图片加载成功");
        },
        // 图片加载失败的回调
        handleError() {
          console.log("图片加载失败");
        }
      },
      // 组件挂载前获取图片URL并更新imageSrc
      async beforeMount() {
        const { imageUrl } = await this.getImageUrl();
        this.imageSrc = imageUrl;
      }
    };
    </script>
    

    上面的示例中,通过beforeMount钩子函数在组件挂载前获取图片URL,并更新imageSrc。getImageUrl方法中模拟了异步请求获取URL的过程,使用Promise进行了包装。

    在template中,通过yd-image组件将图片展示出来,并在@load和@error事件中触发对应的回调函数。

    此外,还可以通过通过动态绑定src属性来动态获取图片URL:
    004.png

    <template>
      <yd-image :src="getImageUrl()" @load="handleLoad" @error="handleError" />
    </template>
    
    <script>
    export default {
      methods: {
        // 获取图片URL的方法
        getImageUrl() {
          // 通过异步请求获取URL
          return new Promise(resolve => {
            // 假设请求返回的数据为 { imageUrl: "xxx" }
            setTimeout(() => {
              resolve({ imageUrl: "https://picsum.photos/400/600" });
            }, 1000);
          });
        },
        // 图片加载成功的回调
        handleLoad() {
          console.log("图片加载成功");
        },
        // 图片加载失败的回调
        handleError() {
          console.log("图片加载失败");
        }
      }
    };
    </script>
    

    此时在yd-image组件中,src属性的值为获取图片URL的方法,也就是说每次加载图片时都会动态获取图片URL。

    2023-09-03 16:05:30
    赞同 展开评论 打赏
问答分类:
问答地址:
关联地址:
问答排行榜
最热
最新

相关电子书

更多
宜搭 - 企业智能化应用搭建平台 立即下载
《云市场-宜搭解决方案》 立即下载
《宜搭开发手册》 立即下载