基于vue2.x实现的即时通讯程序仿微信聊天9开发添加好友及我的页面

• 下面开发添加好友页面以及功能
• 开发添加好友页面需要点击下面这种图中的➕号

image.png

• 点击【添加好友】弹出popup弹窗，但是要区分下我们点击的是添加好友，还是扫一扫。。。
• 根据popover的配置项，多增加一个type标识来区分，代码如下

actions: [
        { text: '添加好友', icon: 'add-o', type: 1 },
        { text: '扫一扫', icon: 'music-o', type: 2 },
        { text: '收付款', icon: 'more-o', type: 3 }
      ],

• 然后给popover组件绑定一个select事件 @select="selectPopoverFun"

• 然后在methods里映射这个方法selectPopoverFun

methods:{
  selectPopoverFun(e){
     console.log(e)
  }
}

• 打印e 可以看到 点击的那个元素的对象，通过type可以知道我们点击的是哪个元素

switch (e.type) {
        case 1:
         alert('添加好友')
          break
        case 2:
          alert('扫一扫')
          break
        case 3:
          break
        default:
          break
      }

• 既然知道了，点击的是哪个元素，那么，可以使用vant组件的popup组件，从页面右侧弹出，占满整个屏幕

     ...

• showPopup 不要忘记在data内声明

 data() {
    return {
       showPopup: false,
  }
}

添加好友页面 设计图如下

image.png

• 先开发头部导航，使用到vant组件库的navbar组件

• 然后在开发 search 区域

• data中要定义初始化Searchvalue

 data() {
    return {
       Searchvalue:"",
  }
}

• methods映射onSearch方法

 onSearch() {
       
 },