VUEカルーセル、表示PDF

画像フォーマットの左側によると、右側には、対応するPDFファイルや写真を示しています。（Vueのは、PDF形式の静的ファイルを置くためのpdfファイルをサポートしていません）。コードは以下の通りであります：
  1 <テンプレート>
   2    <！ -户图件展示- >
   3    <DIV ID = "houseImgBox">
   4      <！ -左侧IMG图片- >
   5      <DIV CLASS = "leftlList">
   6        <GeminiScrollbarクラス= "私のスクロールバー">
   7          <DIV V- ため = "leftImgsで（項目、インデックス）"クラス= "activedImg">
   8            <ラベル> {{インデックス+ 1}} </ラベル>
   9            <DIV @ = "clickImg（項目）"をクリックします。class = "[？leftItem ==アイテム'をlistImgActived'： 'IMG']">
 10              <IMG V- 場合 = "item.fileType ==」
PDF "」SRC = "pdf.jpg"/> 11              <IMG V- 他：SRC = "item.fileUrl" />
 12            </ divの>
 13          </ divの>
 14        </ GeminiScrollbar>
 15      </ DIV>
 16      <！ -分割线- >
 17      <DIV CLASS = "文字列"> < / DIV>
 18      <！ -中间展示的图片- >
 19      <DIV CLASS = "centerImg">
 20        <IMG：SRC = "fileUrl" V-ショー= "のfileType == '画像'" />
 21        <IFRAME V-ショー= "たfileType == 'PDF'" SRC = "fileUrl" FRAMEBORDER = "0"幅= "100％"高さ= "100％"> </ iframe>の
 22      <
/ DIV> 23    </ div>
 24 > </テンプレート
 25  
26 <SCRIPT>
 27エクスポートデフォルト{
 28    名： "右" 、
 29の   成分：{}、
 30    beforeCreate：関数（）{}、
 31が    搭載：関数（）{
 32      // this.leftImgs = houseImg。
33      であれば（この .leftImgs.length> 0 ）{
 34        この .fileUrlは= この .leftImgs [0 ] .fileUrl。
35        この .fileType = この .leftImgs [0 ] .fileType。
36        これは.filename = この .leftImgs [0]は.filename;
 37      }
 38である   }、
 39    データ（）{
 40      リターン{
 41は        fileURL： "" 、
 42である        たfileType： "イメージ" 、
 43は        ファイル名： "" 、
 44は        leftItem：0 、
 45        leftImgs：
 46である         {
 47            fileURL。
 48              "a.jpg"、//は独自のパス情報の書き込み
49            ファイル名： "住宅世帯マップ" 、
 50            のfileType： "イメージ"
 51          }、
 52を         {
 53は           fileURL：
 54である              、 "a.jpg" //は独自の経路情報を書き込む
55            "家庭図住宅"：ファイル名、
 56である            たfileType： "イメージ"
 57である         }、
 58          {
 59            fileURL： "test1.pdf"、/ / 独自の経路情報書き込み
60            "FFFFFF"：ファイル名、
 61である            たfileType： "PDF"
 62であるが         }、
 63は         {
 64            fileURL：
 65              "b.jpg"、// 自分自身の経路情報を書き込む
66           ファイル名： "宗マップ" 、
 67            のfileType： "イメージ"
 68          }、
 69          {
 70            fileurlで指定したファイル：
 71              、 "c.jpg" // 独自のパス情報の書き込み
72            ファイル名： "フロアプラン"を、
 73            のfileType： "イメージ"
 74          }
 75        ]
 76      };
 77    }
 78の   方法：{
 79      clickImg（項目）{
 80        この .leftItem = 項目;
 81        この .fileUrl = item.fileUrl。
82        この .fileType = item.fileType。
83        これは.filename = item.fileName。
84      }
 85    }
 86  }。
87 </スクリプト>
 88  
89 <スコープスタイル>
 90  .leftlList {
 91    色：白。
92    位置：絶対。
93    margin- トップ：40ピクセル;
94    margin- 左：40ピクセル;
95    幅：190px;
96    高さ：計算値（100％ - 80px）。
97  }
 98  
99  .leftlListのDIVの.IMG、
100  .listImgActived {
 101    表示：inline- ブロック。
102    マージン：16pxに14px;
103    テキストベース整列：センター;
104    vertical- 整列：中央;
105    幅：130px;
106    高さ：130px;
107    ライン- 高さ：130px;
108    境界：2ピクセル灰色の固体。
109  }
 110 .leftlList DIV .IMG> IMG、.listImgActived IMG {
 111    幅：100％ 。
112    高さ：100％ 。
113  }
 114  
115  #appの.string {
 116   位置：絶対;
117    margin- 左：220px;
118    margin- 上部：40ピクセル。
119    高さ：計算値（100％ - 80px）。
120    境界：2ピクセル灰色の固体。
121    ディスプレイ：inline- ブロック。
122  }
 123  
124  .centerImg {
 125    位置：絶対。
126    幅：計算値（100％ - 430px）。
127    margin- 左：300ピクセル。
128    margin- トップ：70ピクセル;
129    テキストベース整列：センター;
130    vertical- 整列：中央;
131   高さ：計算値（100％ - 20％ ）。
132  }
 133  .centerImgのIMG {
 134    幅：100％ 。
135    高さ：100％ 。
136  }
 137  
138  .listImgActived {
 139    境界：2ピクセル固体アクア！重要;
140  }
 141  
142 .MY-スクロールのバー{
 143    高さ：100％ 。
144  }
 145 </スタイル>
疑問がある場合は、グループディスカッションを追加します。
VUEカルーセル、表示PDF

おすすめ
