렌더 기능을 사용하여 그림 팝업 창을 생성하는 코드 예

이 기사의 내용은 렌더링 기능을 사용하여 그림 팝업 창을 생성하는 코드 예제에 대한 것입니다. 필요한 친구가 참고할 수 있기를 바랍니다.

프로젝트의 썸네일 목록이 표시되며, 더블클릭 그림 팝업 효과를 만들기로 했습니다. 프로젝트는 iview UI 프레임워크를 사용하고 Modal 컴포넌트를 사용합니다. 그림 팝의 원본 코드는 다음과 같습니다. -up은 렌더링 기능에 의해 생성됩니다. 더블클릭 액션은 showLargeImage 메소드를 호출합니다. 다음은 더블클릭 액션의 원본 코드입니다.

            showLargeImage(item){
                console.log(111);
                if(!item.img_url){
                    this.$Message('未获取到图片！');
                    return;
                }
                this.$Modal.confirm({
                    width:444,
                    render: (h) => {
                        return h('img', {
                            'class':'render_img',
                            attrs: {
                                src: this.api.baseURL+item.img_url,
                                width:400,
                            },
                        })
                    }
                })
            },

render의 첫 번째 화살표 함수의 매개변수 h는 createElement 메소드입니다. 상표.

두 번째 매개변수는 이미지의 클래스를 정의하는 개체입니다. attrs의 src는 이미지 표시 너비를 정의합니다. 이 너비 값은 모달 너비에 따라 조정될 수 있습니다.

【관련 추천: JavaScript 비디오 튜토리얼】

위 내용은 렌더 기능을 사용하여 그림 팝업 창을 생성하는 코드 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!