search

AurorePaladin / AurorePaladin.github.io

个人主页。同时也通过 Issues 记录学习笔记
5 stars 1 forks source link

Vue-cli Vue-preview #13

Open AurorePaladin opened 6 years ago

AurorePaladin commented 6 years ago

关于Vue-cli

Vue-cli 是 Vue 的脚手架工具，可以帮助我们写好Vue.js基础代码的工具，可以搞定目录结构、本地调试、代码部署、热加载、单元测试。

安装方法

node -v    // 确保版本在4 以上
sudo npm install -g vue-cli   // sudo 是提升权限用的
vue init webpack project-name

接下来有（Y/N）就选Y 没有就回车

AurorePaladin commented 6 years ago

关于Vue-picture-preview

移动端Vue.js图片预览插件

安装

NPM：npm install --save vue-picture-preview

使用

首先在项目的入口文件中引入, 调用 Vue.use 安装

import vuePicturePreview from 'vue-picture-preview'
Vue.use(vuePicturePreview)

在根组件添加 lg-preview 组件的位置

<!-- Vue root compoment template -->
<div id="app">
<router-view></router-view>
<lg-preview></lg-preview>
</div>

对于所有图片都可以使用 v-preview 指令来绑定他们的预览功能

<img v-for="(img,index) in imgs" 
v-preview="img.url" 
:src="img.url" 
:alt="img.title" 
:key="index"
preview-title-enable="true"
preview-nav-enable="true">
export default {
    data () {
        return {
            imgs: [
                {
                  url: 'http://covteam.u.qiniudn.com/ka2.jpg',
                  title: 'pic1'
                },
                {
                  url: 'http://covteam.u.qiniudn.com/poster.png',
                  title: 'pic2'
                }
            ]
        }
    }
}
<style scoped>
img {
   width: 100%;
   height: 100%;
}
</style>

API