Vue는 클릭하여 확대 기능을 구현하기 위해 iview 테이블을 기반으로 이미지를 표시합니다.

먼저 종속성을 설치합니다.

npm install v-viewer --save

그런 다음 전역으로 가져옵니다. main.js에 작성했습니다.

'v-viewer'에서 뷰어 가져오기
'viewerjs/dist/viewer.css' 가져오기

관련 학습 권장사항: javascript tutorial

등록:

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">
     <p class="detailed">
      <img :src="item.img" alt="">
     </p>
   </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('p', devicesArr);
  }
}

관련 학습 권장 사항: 프로그래밍 비디오

위 내용은 Vue는 클릭하여 확대 기능을 구현하기 위해 iview 테이블을 기반으로 이미지를 표시합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!