de-net/src/view/components/followInput.vue

<template>
    <div class="follow-input-wrapper">
        <div class="at-user-item" v-for="(item, index) in atUserList" :key="index">
            <img :src="require('../../assets/svg/icon-del-follows-user.svg')" 
                class="icon-del"
                @click="delUser(item, index)">
            <!-- <div :id='"pre" + index'   style="position:absolute; top:-1000px;">{{item.name}}</div> -->
            @<input class="at-user-input" 
                    :id='"input" + index' 
                    v-model="item.name" 
                    @change="onIptChange(item, index)"
                    @input="onInput(item, index)"
                    @keyup="onKeyup(item, index)"
                    @blur="onblur(item, index)"
                    @focus="onfocus(item, index)"/>

            <div class="user-list-wrapper" v-if="currentIptIndex == index && userList.length">
                <div class="item" 
                    v-for="(item, index) in userList"
                    :key="index"
                    :class="{'active': index === currentUserIndex}"
                    @mouseenter="onUserMouseEnter(item, index)"
                    @mouseleave="onUserMouseLeave(item, index)"
                    @click="selectedUser(item, index)">
                    <div class="following" v-if="item.following"> following </div>
                    <div class="content">
                        <img class="avatar" :src="item.avatarlUrl">
                        <div>
                            <div class="name">{{item.name}}</div>
                            <div class="screenName">@{{item.screenName}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="icon-add-wrapper"  v-if="atUserList.length < 5"
            @click="addUser('')"
            @mouseenter="handleMouseEn"
            @mouseleave="handleMouseLe">
            <img :src="require('../../assets/svg/icon-add-user-default.svg')" 
                class="icon-add"
                v-if="!isActiveAddBtn">
            <img :src="require('../../assets/svg/icon-add-user-active.svg')" 
                class="icon-add"
                v-else>
        </div>

    </div>
</template>

<script setup>
/* eslint-disable */
import { reactive, ref, onMounted, defineEmits, watch } from "vue";
import {searchTwitterUser} from "../../http/publishApi";
import {debounce} from "../../uilts/help";
import {getStorage} from "../../uilts/chromeExtension"


let currentIptIndex = ref(-1);
let isActiveAddBtn = ref(false);
let currentUserIndex = ref(-1);

let userList = ref([]);
let atUserList = ref([]);

let userInfo = reactive({});


const emits = defineEmits(["updateAtUser"]);

onMounted(() => {
    getUserInfo((info) => {
        if(info.nickName) {
            addUser(info.nickName);
        }
    });
}) 

watch(
    () => atUserList,
    (newVal) => {
        emits('updateAtUser', newVal)
    },
    {
        deep: true
    }
);

const getUserInfo = (cb) => {
    let localUserInfo = getStorage('de-userInfo');
    console.log('localUserInfo',localUserInfo)
    if(localUserInfo) {
        userInfo = localUserInfo;
    }
    cb && cb(localUserInfo);
}

const addUser = (name = '') => {
    atUserList.value.push({
        name
    })
}

const delUser = (params, index) => {
    atUserList.value.splice(index, 1);
}

const onfocus = (params, index) => {
    console.log(params, index)
}
const onblur = (params, index) => {
    console.log(params, index)
}

const onInput = debounce(function(params, index) {
    currentIptIndex.value = index;
    getTwitterUsers(params.name)
}, 800) 

const onKeyup = (params, index) => {
    console.log('sskks', document.getElementById('input'+index).offsetWidth)
// document.getElementById('input'+index).style.width = document.getElementById('pre'+index).offsetWidth - 5 + 'px'
}

const onIptChange = (params, index) => {
    console.log(index)
}

const handleMouseEn = () => {
    isActiveAddBtn.value = true;
}

const handleMouseLe = () => {
    isActiveAddBtn.value = false;
}

const getTwitterUsers = (query, cb) => {
    searchTwitterUser({
        params: {
            name : query
        }
    }).then(res => {
        if(res.code == 0) {
            userList.value = res.data;
        }
        cb && cb(res);
        console.log('searchTwitterUser',res)
    })
}

const selectedUser = (params) => {
    atUserList.value[currentIptIndex.value]['name'] = params.screenName;
    currentIptIndex.value = -1;
}

const onUserMouseEnter = (params, index) => {
    currentUserIndex.value = index;
    console.log(params, index)
}

const onUserMouseLeave = (params, index) => {
    currentUserIndex.value = -1;
    console.log(params, index)
}
</script>

<style lang="scss" scoped>
    .follow-input-wrapper {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 14px 0 14px 18px;
        box-sizing: border-box;
        border-left: 1px solid #ECECEC;

        .icon-add{
            width: 24px;
            height: 24px;
            margin-left: 10px;
            cursor: pointer;
        }

        .at-user-item {
            display: flex;
            align-items: center;
            border: 1px solid #ECECEC;
            box-sizing: border-box;
            border-radius: 100px;
            color: #389AFF;
            font-weight: 500;
            font-size: 15px;
            padding: 4px 12px;
            position: relative;
            margin-right: 10px;
            background-color: #fff;
            margin-bottom: 14px;

            .icon-del {
                width: 18px;
                height: 18px;
                position: absolute;
                right: -7px;
                top: -6px;
                cursor: pointer;
            }

            .at-user-input {
                color: #389AFF;
                border: none;
                outline: none;
                width: 80px;
            }

            .user-list-wrapper {
                width: 284px;
                height: 430px;
                position: absolute;
                box-shadow: 0px 4px 20px 0px #0000004D;
                overflow-y: scroll;
                background-color: #fff; 
                top: 30px;
                z-index: 1000;
                border-radius: 10px;

                .item {
                    width: 100%;
                    height: 72px;
                    box-sizing: border-box;
                    padding: 0 16px;
                    cursor: pointer;

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

                        .avatar {
                            width: 40px;
                            height: 40px;
                            border-radius: 50%;
                            margin-right: 10px;
                        }

                        div {
                            .name {
                                font-weight: 600;
                                font-size: 16px;
                                margin-bottom: 2px;
                                color: #000;
                            }
                            .screenName {
                                font-size: 15px;
                                color: #566370;
                            }
                        }
                    }
                }

                .active {
                    background-color: #F7F9F9 !important;
                }
            }
        }

    }
</style>