基于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"

 <van-popover
          @select="selectPopoverFun"
          v-model="showPopover"
          theme="dark"
          :offset="[17, 8]"
          trigger="click"
          placement="bottom-end"
          :actions="actions"
        >

• 然后在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组件，从页面右侧弹出，占满整个屏幕

<van-popup v-model="showPopup" position="right" :style="{ width: '100%', height: '100%' }">
     ...
</van-popup>

• showPopup 不要忘记在data内声明

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

添加好友页面 设计图如下

image.png

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

<van-nav-bar title="添加好友" left-text="返回" left-arrow @click-left="showPopup = false" />

• 然后在开发 search 区域

 <van-search v-model="Searchvalue" show-action placeholder="请输入搜索关键词" @search="onSearch">
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
</van-search>

• data中要定义初始化Searchvalue

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

• methods映射onSearch方法

 onSearch() {
       
 },