• 核心技術(shù)

1.里面是兩個ajax請求，獲得內(nèi)容和獲得圖片
2.獲得url里面的id參數(shù)this.imgid = this.$route.params.imgid;，可以直接拿過來用,這個還可以通過props傳遞給子組件
3.中間圖片實(shí)現(xiàn)點(diǎn)擊某張圖片的時候預(yù)覽它（vue-preview）
 重點(diǎn)學(xué)習(xí)的是：vue-preview組件的使用(https://github.com/LS1231/vue-preview)
    使用的要求：
    1、要求我們將vue-preview組件特殊的擴(kuò)展名配置到webpack.config.js中利用bable去解析es6語法
    {
        test: /vue-preview.src.*?js$/,
        loader: 'babel'
    }    
    2、這個組件中使用了 svg這種文件，那么在build/webpack.config.js中
    的url-loader配置位置，要在test后面的正則表達(dá)式中，增加svg的擴(kuò)展名
    3、img標(biāo)簽上的class不能去掉
    4、插件目前僅支持vue2.0以上版本
    步驟：
    1、安裝 vue-preview   npm i vue-preview --save
    2、在api請求回來的數(shù)據(jù)基礎(chǔ)上，增加 h,w 屬性
        item.w=300;
        item.h=300;
    3、在 img標(biāo)簽上
        ![](thumimg.src)
        v-for="(thumimg,index) in thums" ,遍歷的時候要加上index
        其中$preview 對象就是打開預(yù)覽的組件對象
        并且open方法的兩個參數(shù)的意義：
        1、index：當(dāng)前圖片的索引
        2、thums：表示要預(yù)覽的圖片數(shù)組
4.在 imageshow.vue 要使用comment.vue組件步驟：
    1、導(dǎo)入comment.vue組件
    2、在imageshow.vue VM對象中增加components:{comment}
    3、在imageshow.vue 的template中使用<comment artid="?"></comment>

• imgshow組件

<template>  
    <div class="tmpl">
        <!-- 1.0 實(shí)現(xiàn)標(biāo)題 -->
        <div class="twarp">
            <h2 v-text="imgInfo.title"></h2>
            <span class="desc">
                {{imgInfo.add_time  | datefmt}}  
                {{imgInfo.click}}次瀏覽
                 分類:民生
            </span>
        </div>

        <!-- 2.0 9宮格縮略圖 -->
        <div class="mui-content">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li v-for="(thumimg,index) in thums" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <a>
                    ![](thumimg.src)
                   </a>
               </li>
                
            </ul> 
        </div>

        <!-- 3.0 圖片詳情 -->
        <div class="content" v-html="imgInfo.content"></div>

        <!-- 4.0 評論組件 -->
        <comment :artid="imgid"></comment>
    </div>
</template>
<script>
import common from '../../kits/common.js'
import comment from '../subcom/comment.vue'
    export default{
        components:{comment},
        data(){
            return {
                imgInfo:{},
                imgid:0,
                thums:[]
            }
        },
        methods:{
            getimgInfo(){
                var url = common.apiDomain+'/api/getimageInfo/'+this.imgid;

                this.$http.get(url).then(res=>{
                    this.imgInfo = res.body.message[0];
                });
            },
            getthums(){
                var url = common.apiDomain+'/api/getthumimages/'+this.imgid;
                // http://ofv795nmp.bkt.clouddn.com//upload/201504/18/thumb_201504181230437111.jpg
                
                this.$http.get(url).then(res=>{
                    // 注意點(diǎn)：由于服務(wù)器返回的src屬性中的值是一個圖片的路徑，所以要添加上圖片的域名
                     res.body.message.forEach(item=>{
                        item.src = common.imgDomain + item.src;
                        item.w=300;
                        item.h=300;
                     });

                    this.thums = res.body.message;
                });
            }
        },
        created(){
            this.imgid = this.$route.params.imgid;

            this.getimgInfo();
            this.getthums();
        }
    }
</script>
<style scoped>
    .twarp h2{
        color:#0094ff;
        font-size:16px;
    }
    .twarp .desc{
        color:rgba(0,0,0,0.4);
        
    }
    .twarp{
        padding:10px;
        border-bottom: 1px solid rgba(0,0,0,0.4); 
    }
    .content{
        padding:5px;
    }
    .mui-icon-home:before,
.mui-icon-email:before,
.mui-icon-chatbubble:before,
.mui-icon-location:before,
.mui-icon-search:before,
.mui-icon-phone:before{
    content: ''
}
.mui-content ul{
        background-color: #fff;
    }
    .preview-img{
        height: 100px;
        width: 100px;
    }
</style>