<!--
 * @Description: 描述
 * @Author: chd
 * @Date: 2021-06-07 11:13:02
 * @LastEditors: chd
 * @LastEditTime: 2021-07-03 14:42:26
-->
<script>
export default {
  functional: true,
  name: 'image-view',
  props: {
    proportion: {
      type: Number,
      default: 0,
    },
    image: {
      type: String,
      default: '',
    },
  },
  render(h, { children, listeners, props, data }) {
    const title = data?.attrs?.title
    return (
      <div
        title={title}
        class={'image-view'}
        style={data.style}
        onClick={(e) => listeners.click && listeners.click(e)}>
        <div
          class="before"
          style={{
            paddingBottom: props.proportion ? props.proportion + '%' : '100%',
          }}></div>
        <div
          style={{
            position: 'absolute',
            top: 0,
            right: 0,
            bottom: 0,
            left: 0,
            overflow: 'hidden',
            textAlign: 'center',
          }}>
          <img
            height="100%"
            loading="lazy"
            src={props.image}
            alt=""
            onError={(e) => {
              e.target.title = '加载失败'
            }}
          />
        </div>
        {children}
      </div>
    )
  },
}
</script>
<style scoped>
.image-view {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  cursor: pointer;
}
.image-view .before {
  height: 0;
  padding-bottom: 100%;
}
.image-view img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.image-view img[src=''],
.image-view img:not([src]) {
  opacity: 0;
}
</style>
