Vue iview table 디스플레이 이미지 기반 클릭 확대

우선 종속성을 설치합니다.npm install v-viewer --save그리고 전역적으로 도입됩니다. 이쪽은main입니다.js에서 작성한 작업:
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
다음을 등록하십시오.

Vue.use(Viewer)
Viewer.setDefaults({
  Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }
})

사용하는 데모 중 하나는 다음과 같습니다.

<viewer :images="tupians">
   <i-col span="4" v-for="item in tupians">
     <div class="detailed">
      <img :src="item.img" alt="">
     </div>
   </i-col>
</viewer>

그중 item.img는 사실 하나의 경로다.
iview 표로 돌아가면,
필요한 경우

      h('xxxx', {
        props: {
          trigger: 'hover',
          placement: 'top',
          content: ' '
        }
      }, [
      ])

이 형식은 렌더링됩니다. 첫 번째 매개 변수는 라벨이고, 두 번째 매개 변수는 라벨에props(vue의 v-bind)를 포함할 수도 있고, 속성을 포함할 수도 있습니다.세 번째 파라미터는 서브 라벨을 나타내는 수조이다.하위 탭도 이런 형식으로 귀속된다.
그래서 이런 형식으로 개작한 것은 본인의 프로젝트 중의 하나인 데모가 다음과 같이 표에서 그림을 클릭하여 확대 전시할 수 있다.

{
  title: ' ',
  align: 'center',
  render: (h, params) => {
    console.log('h, param', params);
    let devicesArr = [];
    let photo = [];
    photo.push('/erweima/'+params.row.pt_number+'.png');
    devicesArr.push(
      h('Tooltip', {
        props: {
          trigger: 'hover',
          placement: 'top',
          content: ' '
        }
      }, [
        h('viewer', {
          props:{
            images:photo
          }
        }, [
          h('img', {
            attrs: {
              src:photo[0],
              style: 'width: 22px;margin-right:5px'
            },
          })
        ])
      ])
    );
    return h('div', devicesArr);
  }
}

이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.