ShutongInterconnectedChemicalCloudPlatform/src/widget/lowcodeimage/lowcodeImage.vue

<template>


  <img referrerpolicy="no-referrer" :src="url" :style="styleObject" :fit="fit" :class="[boderAndShadowClassIsActive ? boderAndShadowClass : '', radiusClassIsActive ? radiusClass : '',mp, floatFlag ? floatStyle : '']" @click="handleLink(props.data?.control)" />


</template>

<script setup >

import errimg from '@/assets/404_images/imgNotFound.png'


const props = defineProps({
  // eslint-disable-next-line vue/require-default-prop
  data: {
    type: Object,
  }
})
/* 
  
*/
let styleObject = {

}
let url = props.data?.control.imgUrl
if(props.data?.control.imgUrl===''){
  url = errimg
}else{
  url = props.data?.control.imgUrl
}

const fitNum = props.data?.control.fit


let fit= ''

switch (fitNum) {
  case 1:
    fit = "fill";
    break;
  case 2:
    fit = "contain";
    break;
  case 3:
    fit = "cover";
    break;
  case 4:
    fit = "none";
    break;
  case 5:
    fit = "scale-down";
    break;
}

const showMode = props.data?.control.showMode

if (showMode==='自定义像素值') {
  const pxWidth = props.data?.control.pxWidth
  const pxHeight = props.data?.control.pxHeight
  styleObject.width = pxWidth+'px';
  styleObject.height = pxHeight+'px';
}else{
  const widthPercent = props.data?.control.widthPercent
  const heightPercent = props.data?.control.heightPercent
  styleObject.width = widthPercent+'%';
  styleObject.height = heightPercent+'%';
}

const radius = props.data?.control.radius
const radiusClass = ref('');
let radiusClassIsActive = false
let radiusNum = props.data?.control.radiusNum+'px'
if(radius === true ){
  radiusClass.value = 'radius'
  radiusClassIsActive = true
}

const mt = props.data?.control.mt+'px'
const mb = props.data?.control.mb+'px'
const ml = props.data?.control.ml+'px'
const mr = props.data?.control.mr+'px'
const pt = props.data?.control.pt+'px'
const pb = props.data?.control.pb+'px'
const pl = props.data?.control.pl+'px'
const pr = props.data?.control.pr+'px'
const mp = ref('mp')

const floatStyle = ref('floatStyle')
const floatFlag = props.data?.control.floatFlag
const floatValue = props.data?.control.floatValue

const boderAndShadowClass = ref('');
const boderAndShadow = props.data?.control.boderAndShadow
let boderAndShadowClassIsActive = false
if(boderAndShadow === true ){
  boderAndShadowClass.value = 'boderAndShadow'
  boderAndShadowClassIsActive = true
}

function handleLink(item){
  // console.log("handleLink")
  let url = "";
  let urlStart = 'http://'
  // http://  7
  //https://  8
  if (item.link.length < 7) {
    if (item.link == '') {
      alert("未配置跳转地址")
      return
    }
    url = urlStart + "" + item.link
  } else {
    const linkStartComplete1 = item.link.startsWith("http://")
    const linkStartComplete2 = item.link.startsWith("https://")
    if (linkStartComplete1 || linkStartComplete2) {
      url = item.link
    } else {
      url = urlStart + "" + item.link
    }
  }
  window.open(url, '_blank')
}

</script>

<style>
.boderAndShadow {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.radius {
  border-radius: v-bind(radiusNum);
}
.mp {
  margin-top: v-bind(mt);
  margin-bottom: v-bind(mb);
  margin-left:v-bind(ml);
  margin-right:v-bind(mr);
  padding-top: v-bind(pt);
  padding-bottom: v-bind(pb);
  padding-left: v-bind(pl);
  padding-right: v-bind(pr);
}
.floatStyle {
  float: v-bind(floatValue);
}
</style>