从0到1—Vue项目失物平台的搭建（第一天）

本博客主要用于记录开发的过程以及开发问题处理方式，不粘贴开发代码。问题的解决原理我会单独做文章。

失物平台（邑丢丢）的开发代码的码云地址是https://gitee/MyKyle/yidd

1.今日完成进度 

1.构思了饭卡模块的界面设计图

2.完成对饭卡模块的拾取部分开发

2.今日问题以及处理 

2.1 vant库中van-grid-item 标签 的icon 引用本地图片

<van-grid-item icon="../assets/imgs/Home/card.png" />

当要引用本地的图片时，直接写图片的路径在vue项目中会刷不出图片（但用 <img> 标签可以显示 ）。

 解决方法一：在图片的链接外包上一层 require（）

<van-grid-item icon="require('../assets/imgs/Home/card.png')" />

  解决方法二：利用import导入图片

import img from '@/assets/imgs/Home/card.png'

data(){
    return{
        titleimg:img
    }
}

原理：@ 的作用是在你引入模块时，可以使用 @ 代替 /src 目录

 

2.2区分vue中的 ：与 @ 

：表示v-bind是用于属性值，@表示v-on是用于事件

2.3 Vant的van-tabbar标签 盖住内容怎么解 

原因：van-tabbar的一个van-tabbar--fixed类运用了position: fixed;从而实现了固定效果，但也造成了脱离文档流。

解决方案：添加<div style="height: 5rem;"></div>

<div style="height: 5rem;"></div>
<van-tabbar v-model="active">
        .....
</van-tabbar>

 

原理：利用一个空元素来进行底部占位，在不对其它元素的高度进行调整的情况下，这个对底部 tabbar比较好的处理方式

2.4实现平板状态下 van-overlay在最顶部，手机状态下垂直居中

原因：van-overlay中<div class="wrapper">实现水平垂直居中是利用了flex布局的居中方式。由于平板高度较小，如果在弹出层需要实现输入，可能就看不到输入内容。

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

解决方案：利用媒体响应式实现自适应，当浏览器宽度500px以下时，实现垂直居中，否则不实现。

.wrapper {
  display: flex;
  justify-content: center;
  height: 100%;
}
@media only screen and (max-width: 500px) {
  .wrapper {
    align-items: center;
  }
}

2.5 如何实现本地项目到手机查看

原因：由于vue项目没有部署是本地项目，域名是localhost。手机端不能使用localhost查看也不能进行调试了。

解决方案：让手机与电脑处于同一局域网（即同一wifi）下，电脑利用cmd查看本机ip地址（输入命令ipconfig）。找到192.168.XX.XX的IP地址。手机输入该IP地址加Vue项目的端口号就可以对项目进行查看。

注意：该IP地址不是固定的，所以上次可以用192.168.XX.101，这次就变成了192.168.XX.106

2.6 实现点击复制内容到粘贴板

网上有很多利用execCommand实现的点击复制，利用的是替换的欺瞒效果。我自己调试过后效果不是很好。所以本文介绍的是利用第三方库：clipboard.js

第一步：导入
npm i clipboard --save

第二步：引入
<script>
import Clipboard from 'clipboard'
export default {...}
</script>

第三步：绑定使用
onCopyWeChat () {
    var text = this.$refs.pickupPersonCell.getElementsByClassName('van-cell__title')[0].innerText // 需要复制到粘贴板的内容
    const clipboard = new Clipboard('#pickupPersonCell', {
        text: () => {
            return text
        }
    })
    clipboard.on('success', e => {
        this.$toast({ message: '复制成功', duration: 600 })
        // 释放内存
        clipboard.destroy()
    })
    clipboard.on('error', e => {
        // 不支持复制
        this.$toast({ message: '该浏览器不支持自动复制', duration: 600 })
        // 释放内存
        clipboard.destroy()
    })
}