vue—穿梭框组件

一、语言：vue
二、实现效果：1、左侧框选择后在右侧有显示，右侧框内点击每一条后面的图标可以删除在右侧显示的，同时左侧的多选框取消选中。2、左侧有一个本地的模糊搜索框。3、完成组件效果，要求适配多处

三、HTML+css 样式

   <div class="transfer-box">
   //左边的部分
        <div class="transfer-box-left">
            <div class="box-title">
            //左边的标题
                <h5><span class="box-title-icon">*</span>{
    
    {
    
     render.leftTitle }}:</h5>
                // 搜索框单写了一个组件
                <search @search="handleSearch" />
                <div class="box-left-check mt-10">
                    <div v-for="item in listData" :key="item.valueCode">
                        <input :id="item.valueCode" v-model="item.checked" type="checkbox" /><label
                            :for="item.valueCode"
                            >{
    
    {
    
     item.valueName }}</label
                        >
                    </div>
                </div>
            </div>
        </div>
        // 右边的部分
        <div class="transfer-box-right">
            <div class="box-title">
                <h5>{
    
    {
    
     render.rightTitle }}:</h5>
            </div>
            <div>
                <ul class="box-ul">
                    <li v-for="item in dataSource.filter((i) => i.checked)" :key="item.valueCode">
                        {
    
    {
    
     item.valueName }} <span class="icon-delete" @click="delFn(item)"></span>// 右边展示的文字和删除图标
                    </li>
                </ul>
            </div>
        </div>
    </div>
    //   样式
<style lang="less" scoped>
.transfer-box {
    
    
    display: flex;
    .transfer-box-left {
    
    
        flex: 1;
        height: 240px;
        .box-left-check {
    
    
            height: 180px;
            overflow-y: scroll;
            font-size: 12px;
            line-height: 1.5em;
        }
    }
    .transfer-box-right {
    
    
        width: 300px;
        height: 240px;
        overflow-y: scroll;
        margin-left: 20px;
        .box-ul {
    
    
            list-style: none;
            line-height: 1.5em;
        }
    }
    .box-title-icon {
    
    
        color: #f0463f;
    }
}
</style>

四、需要传入的数据

1. dataSource–选项的数据，数据格式为[{valueCode:1,valueName:1}]
2. render–需要渲染的文字 ,格式为render: { leftTitle: “岗位”, rightTitle: “已选岗位” },

<script>
import {
    
     ref } from "vue";
import search from "./search.vue"; // 搜索框组件
export default {
    
    
   components: {
    
    
       search,
   },
   props: {
    
    
       dataSource: Object,
       render: Object,
   },

   setup(props, {
     
      emit }) {
    
    
       const listData = ref(props.dataSource);  
       // 删除功能
       const delFn = (item) => {
    
    
           item.checked = false;
       };
       // 搜索框输入的值在已有的数据里面筛选
       const handleSearch = (e) => {
    
    
           if (e.value) {
    
    
               listData.value = listData.value.filter((item) => {
    
    
                   if (item.valueName.indexOf(e.value) != -1) {
    
    
                       return item;
                   }
               });
           } else {
    
    
               listData.value = props.dataSource;
           }
       };
       return {
    
     listData, delFn, handleSearch };
   },
};
</script>

五、搜索框组件：

<template>
   <div class="search-box">
       <span class="input-group">
           <input v-model="searchValue" class="search-box-input" type="text" :placeholder="placeholder" />
           <span v-if="searchValue" class="icon-close" @click="clearFn"></span>
       </span>
       <button type="button" class="icon-search search-box-icon btn" @click="handleSearch"></button>
   </div>
</template>
<script>
import { ref } from "vue";
export default {
   props: {
       placeholder: { type: String, default: "输入节点名称搜索" },
   },
   emits: ["search"],
   setup(props, { emit }) {
       const searchValue = ref();
       const handleSearch = () => {
           emit("search", searchValue);
       };
       const clearFn = () => {
           searchValue.value = "";
       };
       return { handleSearch, searchValue, clearFn };
   },
};
</script>
<style lang="less">
.search-box {
   display: flex;
   align-items: center;
   height: 26px;
   line-height: 26px;
   width: 200px;
   position: relative;
   .input-group {
       border: 1px solid #ccc;
       height: 26px;
       padding: 0;
       margin: 0;
       width: 165px;
   }
   .search-box-input {
       outline: none;
       border: none;
   }
   .search-box-icon {
       position: absolute;
       right: 0;
       text-align: center;
       font-size: 16px;
       height: 28px;
       border-radius: 2px;
       border: 1px solid #ccc;
       width: 34px;
       padding: 0;
   }
}
</style>

六、简易粗糙版穿梭框完成，想起再完善。或者大家提提建议