devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

分享记录vue3+ts基于element-plus通过父子组件交互实现聊天窗口的转发弹框，支持多选、单选、搜索等基础功能。开整_vue实现一个聊天对话框

作者：2023面试高手 | 2024-04-03 12:30:41

赞

踩

vue实现一个聊天对话框

一、先下载引入element-plus
//直接冲官网指南
https://element-plus.gitee.io/zh-CN/guide/installation.html
//我这边用的scss预处理，直接下载就好了
npm install sass

二、子组件实现代码
//html代码
<template>
    <div>
        <el-dialog v-model="dialogVisible" :show-close="false" :close-on-click-modal="false">
            <div class="dialog">
                <div class="fs-16 bold c-0">选择好友<span class="fs-12 c-80">{{ contactList.length }}/{{ contacts.length
                }}</span><span style="margin-left: 200px;cursor:pointer" @click="chooses()">{{ choose == 1 ? '单选' : '多选'}}</span></div>
                <el-input v-model="contact" placeholder="搜索" clearable :prefix-icon="Search" @input="search" />
                <div class="list">
                    <el-scrollbar height="420px">
                        <div class="li" v-for="(item, index) in contacts" :key="index" @click="forwarding(item)">
                            <img :src="item.choose ? 'https://pic.imgdb.cn/item/6426503fa682492fcc5e327d.png' : 'https://pic.imgdb.cn/item/64265063a682492fcc5e65ad.png'"
                                alt="" class="li-left">
                            <div class="li-right">
                                <img src="https://pic.imgdb.cn/item/64265077a682492fcc5e7d6f.gif" alt="">
                                <!-- <img :src="item.img" alt=""> -->
                                <div class="fs-14 c-3">{{ item.name }}</div>
                            </div>
                        </div>
                    </el-scrollbar>
                </div>
                <div class="bottom">
                    <el-button type='primary' text @click="cancel">取消</el-button>
                    <el-button type='primary' text @click="determine">确认</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
//组件通过dialog控制和scrollbar滚动条实现，所以先引用这2个组件
import { ref, toRefs, watch } from 'vue'
import { ElScrollbar, ElMessage, } from 'element-plus';
import { Search } from '@element-plus/icons-vue'

//然后定义组件的初始值，组件状态以及组件接受的参数等
let props = defineProps({
    dialogShow: {
        type: Boolean,
        default: false,
    },
});
const refProps = toRefs(props)
const emit = defineEmits(['getContact', 'contactShow'])
let dialogVisible = ref(props.dialogShow)//本地组件状态
watch(refProps.dialogShow, (val, old) => {
    dialogVisible.value = val
}, { deep: true })//监听修改本地
let contact = ref('')//联系人搜索
let contactList = ref([] as any)//选中转发的联系人
let choose = ref(2)//单选为1 多选为2
let contacts: any = ref([{
    img: '',
    name: 'Lingzi',
    choose: false,
    id: 1,
}, {
    img: '',
    name: 'zhangsan0',
    choose: false,
    id: 2,
}, {
    img: '',
    name: 'lisi',
    choose: false,
    id: 3,
}, {
    img: '',
    name: 'Wanger',
    choose: false,
    id: 4,
}, {
    img: '',
    name: 'yangyu',
    choose: false,
    id: 5,
}, {
    img: '',
    name: '007',
    choose: false,
    id: 6,
}, {
    img: '',
    name: 'YangyuS',
    choose: false,
    id: 7,
},])
let contactsCopy: any = ref(contacts.value)
//相关逻辑和方法
const chooses = () => {//单选多选切换
    choose.value = choose.value == 1 ? 2 : 1
    contacts.value.forEach((i:any)=>{
        i.choose=false
    })
    contactList.value=[]
}
const forwarding = (item: any) => {//选择
    if (choose.value == 1) {//单选
        if (!item.choose) {
            let y = contacts.value.some((i: any) => {
                return i.choose
            })
            if (y) {//有选中的
                contacts.value.forEach((item: any) => {
                    item.choose = false
                    contactList.value = []
                })
            }
        }
        item.choose = !item.choose
        if (item.choose) {
            contactList.value.push(item.name)
        } else {
            contactList.value = []
        }
    } else {//多选
        item.choose = !item.choose
        if (item.choose && contactList.value.indexOf(item.name) == -1) {
            contactList.value.push(item.name)
        } else if (!item.choose && contactList.value.indexOf(item.name) != -1) {
            contactList.value.splice(contactList.value.indexOf(item.name), 1)
        }
    }
};
const cancel = () => {//取消操作
    emit('contactShow', false)//通过emit传值给父组件
    contactList.value = []
    contacts.value.forEach((item: any) => {
        item.choose = false
    })
}
const determine = () => {//确定操作
    if (contactList.value && contactList.value.length) {
        emit('getContact', contactList.value)//把选中的信息传递给父组件
        cancel()
    } else {
        ElMessage.error('请选择转发的对象')
    }
}
const search = () => {//搜索
    if (contact.value == '') {
        contacts.value = contactsCopy.value
    }
    let arr = ref([] as any)
    contactsCopy.value.map((item: any) => {
        if (item.name.toLowerCase().indexOf(contact.value.toLowerCase()) != -1) {
            return arr.value.push(item)
        }
    })
    contacts.value = arr.value
}

三、父组件实现代码
//html代码
<el-button type="primary" @click="show()">打开弹框</el-button>
    <Dialog :dialogShow="dialogShow" @contactShow="contactShow" @getContact="getContact"></Dialog>

//js代码
import {ref} from 'vue'
import Dialog from '../components/forwarding.vue';
let dialogShow=ref(false)
const show=()=>{//控制子组件状态
    dialogShow.value=true
}
const contactShow = (e: boolean) => {//接受子组件传递过来的状态
  dialogShow.value = e
}
const getContact = (e: object) => {//接受子组件传递过来的状态
  console.log(e)
}
四、相关效果图

 


五、整体代码

  1. //父组件
  2. <template>
  3.     <el-button type="primary" @click="show()">打开弹框</el-button>
  4.     <Dialog :dialogShow="dialogShow" @contactShow="contactShow" @getContact="getContact"></Dialog>
  5. </template>
  6.  
  7. <script setup lang="ts">
  8. import {ref} from 'vue'
  9. import Dialog from '../components/forwarding.vue';
  10. let dialogShow=ref(false)
  11. const show=()=>{//控制子组件显示
  12.     dialogShow.value=true
  13. }
  14. const contactShow = (e: boolean) => {//接受子组件传递过来的状态
  15.   dialogShow.value = e
  16. }
  17. const getContact = (e: object) => {//接受子组件传递过来的状态
  18.   console.log(e)
  19. }
  20. </script>
  21. <style scoped lang="scss"></style>
  22.  
  23. //子组件
  24. <template>
  25.     <div>
  26.         <el-dialog v-model="dialogVisible" :show-close="false" :close-on-click-modal="false">
  27.             <div class="dialog">
  28.                 <div class="fs-16 bold c-0">选择好友<span class="fs-12 c-80">{{ contactList.length }}/{{ contacts.length
  29.                 }}</span><span style="margin-left: 200px;cursor:pointer" @click="chooses()">{{ choose == 1 ? '单选' : '多选'}}</span></div>
  30.                 <el-input v-model="contact" placeholder="搜索" clearable :prefix-icon="Search" @input="search" />
  31.                 <div class="list">
  32.                     <el-scrollbar height="420px">
  33.                         <div class="li" v-for="(item, index) in contacts" :key="index" @click="forwarding(item)">
  34.                             <img :src="item.choose ? 'https://pic.imgdb.cn/item/6426503fa682492fcc5e327d.png' : 'https://pic.imgdb.cn/item/64265063a682492fcc5e65ad.png'"
  35.                                 alt="" class="li-left">
  36.                             <div class="li-right">
  37.                                 <img src="https://pic.imgdb.cn/item/64265077a682492fcc5e7d6f.gif" alt="">
  38.                                 <!-- <img :src="item.img" alt=""> -->
  39.                                 <div class="fs-14 c-3">{{ item.name }}</div>
  40.                             </div>
  41.                         </div>
  42.                     </el-scrollbar>
  43.                 </div>
  44.                 <div class="bottom">
  45.                     <el-button type='primary' text @click="cancel">取消</el-button>
  46.                     <el-button type='primary' text @click="determine">确认</el-button>
  47.                 </div>
  48.             </div>
  49.         </el-dialog>
  50.     </div>
  51. </template>
  52. <!-- 多选组件---------------- -->
  53. <script setup lang="ts">
  54. import { ref, toRefs, watch } from 'vue'
  55. import { ElScrollbar, ElMessage, } from 'element-plus';
  56. import { Search } from '@element-plus/icons-vue'
  57. let props = defineProps({
  58.     dialogShow: {
  59.         type: Boolean,
  60.         default: false,
  61.     },
  62. });
  63. const refProps = toRefs(props)
  64. const emit = defineEmits(['getContact', 'contactShow'])
  65. let dialogVisible = ref(props.dialogShow)//本地组件状态
  66. watch(refProps.dialogShow, (val, old) => {
  67.     dialogVisible.value = val
  68. }, { deep: true })//监听修改本地
  69. let contact = ref('')//联系人搜索
  70. let contactList = ref([] as any)//选中转发的联系人
  71. let choose = ref(2)//单选为1 多选为2
  72. let contacts: any = ref([{
  73.     img: '',
  74.     name: 'Lingzi',
  75.     choose: false,
  76.     id: 1,
  77. }, {
  78.     img: '',
  79.     name: 'zhangsan0',
  80.     choose: false,
  81.     id: 2,
  82. }, {
  83.     img: '',
  84.     name: 'lisi',
  85.     choose: false,
  86.     id: 3,
  87. }, {
  88.     img: '',
  89.     name: 'Wanger',
  90.     choose: false,
  91.     id: 4,
  92. }, {
  93.     img: '',
  94.     name: 'yangyu',
  95.     choose: false,
  96.     id: 5,
  97. }, {
  98.     img: '',
  99.     name: '007',
  100.     choose: false,
  101.     id: 6,
  102. }, {
  103.     img: '',
  104.     name: 'YangyuS',
  105.     choose: false,
  106.     id: 7,
  107. },])
  108. let contactsCopy: any = ref(contacts.value)
  109. const chooses = () => {//单选多选切换
  110.     choose.value = choose.value == 1 ? 2 : 1
  111.     contacts.value.forEach((i:any)=>{
  112.         i.choose=false
  113.     })
  114.     contactList.value=[]
  115. }
  116. const forwarding = (item: any) => {//选择
  117.     if (choose.value == 1) {//单选
  118.         if (!item.choose) {
  119.             let y = contacts.value.some((i: any) => {
  120.                 return i.choose
  121.             })
  122.             if (y) {//有选中的
  123.                 contacts.value.forEach((item: any) => {
  124.                     item.choose = false
  125.                     contactList.value = []
  126.                 })
  127.             }
  128.         }
  129.         item.choose = !item.choose
  130.         if (item.choose) {
  131.             contactList.value.push(item.name)
  132.         } else {
  133.             contactList.value = []
  134.         }
  135.     } else {//多选
  136.         item.choose = !item.choose
  137.         if (item.choose && contactList.value.indexOf(item.name) == -1) {
  138.             contactList.value.push(item.name)
  139.         } else if (!item.choose && contactList.value.indexOf(item.name) != -1) {
  140.             contactList.value.splice(contactList.value.indexOf(item.name), 1)
  141.         }
  142.     }
  143. };
  144. const cancel = () => {//取消操作
  145.     emit('contactShow', false)//通过emit传值给父组件
  146.     contactList.value = []
  147.     contacts.value.forEach((item: any) => {
  148.         item.choose = false
  149.     })
  150. }
  151. const determine = () => {//确定操作
  152.     if (contactList.value && contactList.value.length) {
  153.         emit('getContact', contactList.value)//把选中的信息传递给父组件
  154.         cancel()
  155.     } else {
  156.         ElMessage.error('请选择转发的对象')
  157.     }
  158. }
  159. const search = () => {//搜索
  160.     if (contact.value == '') {
  161.         contacts.value = contactsCopy.value
  162.     }
  163.     let arr = ref([] as any)
  164.     contactsCopy.value.map((item: any) => {
  165.         if (item.name.toLowerCase().indexOf(contact.value.toLowerCase()) != -1) {
  166.             return arr.value.push(item)
  167.         }
  168.     })
  169.     contacts.value = arr.value
  170. }
  171. </script>
  172. <style scoped lang="scss">
  173. .fs-16 {
  174.     font-size: 16px;
  175.     font-family: Source Han Sans CN;
  176.     font-weight: 400;
  177.     color: #333333;
  178. }
  179.  
  180. .fs-12 {
  181.     font-size: 12px;
  182.     font-family: SourceHanSansSC;
  183.     font-weight: 400;
  184.     color: #999999;
  185. }
  186.  
  187. .fs-14 {
  188.     font-size: 14px;
  189.     font-family: Source Han Sans CN;
  190.     font-weight: 400;
  191.     color: #FFFFFF;
  192. }
  193.  
  194. .fs-20 {
  195.     font-size: 20px;
  196.     font-family: Source Han Sans CN;
  197.     font-weight: 500;
  198.     color: #333333;
  199. }
  200.  
  201. .c-0 {
  202.     color: #000000;
  203. }
  204.  
  205. .c-3 {
  206.     color: #333333;
  207.     font-weight: 500;
  208. }
  209.  
  210. .c-80 {
  211.  
  212.     color: #808080;
  213. }
  214.  
  215. .bold {
  216.     font-weight: bold;
  217. }
  218.  
  219. :deep(.el-dialog) {
  220.     width: 362px;
  221.     height: 580px;
  222.     background: #FFFFFF;
  223.     border-radius: 6px;
  224.     position: absolute;
  225.     top: 2%;
  226.     left: 40%;
  227.  
  228.     .el-dialog__header {
  229.         padding: 0;
  230.     }
  231.  
  232.     .el-dialog__body {
  233.         padding: 0;
  234.     }
  235.  
  236.     .dialog {
  237.         padding: 20px;
  238.         text-align: left;
  239.  
  240.         .el-input__wrapper {
  241.             margin-top: 30px;
  242.             padding: 0;
  243.             border-bottom: 1px solid #f2f2f2;
  244.             box-shadow: none
  245.         }
  246.  
  247.         .list {
  248.             margin-top: 2px;
  249.  
  250.             .li {
  251.                 display: flex;
  252.                 align-items: center;
  253.                 padding: 10px 0;
  254.  
  255.                 // padding:0 20px;
  256.                 .li-left {
  257.                     width: 18px;
  258.                     height: 18px;
  259.                     margin-right: 10px;
  260.                 }
  261.  
  262.                 .li-right {
  263.                     display: flex;
  264.                     align-items: center;
  265.  
  266.                     img {
  267.                         width: 46px;
  268.                         height: 46px;
  269.                         border-radius: 50%;
  270.                         margin-right: 12px;
  271.                     }
  272.                 }
  273.             }
  274.  
  275.             .li:hover {
  276.                 background: #e6eaf2;
  277.             }
  278.         }
  279.  
  280.         .bottom {
  281.             display: flex;
  282.             margin-top: 10px;
  283.             justify-content: flex-end;
  284.         }
  285.     }
  286. }</style>

六、总结
一个简单的转发弹框，有相同业务逻辑的项目可以直接copy现用，代码写的有点渣，有相关代码优化的地方还望各位大佬能指点一二。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/355546
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号