de-net/src/view/iframe/publish/components/follow-input.vue

<template>
<!-- 发布器-@关注人 输入组件 -->
    <div class="follow-input-wrapper">
        <div class="at-user-item" :style="{'padding': padding}" v-for="(item, index) in pageAtUserList" :key="index">
            <img :src="require('@/assets/svg/icon-del-follows-user.svg')" 
                class="icon-del"
                v-if="!isRequire || isRequire && index > 0"
                @click="delUser(item, index)">
            <pre :id='"pre" + index' class="at-user-input-placeholder">{{item.name}}</pre>
            @<input class="at-user-input" 
                    :id='"input" + index' 
                    v-model="item.name" 
                    :readonly="index == 0 && isRequire"
                    @change="onIptChange(item, index)"
                    @input="onInput(item, index)"
                    @keydown="onKeydown(item, index)"
                    @keyup="onKeyup(item, index)"
                    @blur="onblur(item, index)"
                    @focus="onfocus(item, index)"
                    @mouseenter="iptMouseenter"/>

            <template v-if="currentIptIndex == index && userList.length">
                <div class="user-list-wrapper">
                    <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">
                            <img :src="require('@/assets/svg/icon-following-user.svg')">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>
            </template>
        </div>

        <div class="icon-add-wrapper"  v-if="pageAtUserList.length < 5"
            @click="addInput"
            @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>
import { reactive, ref, onMounted, defineEmits, defineProps, watch } from "vue";
import {searchTwitterUser} from "@/http/publishApi";
import {getChromeStorage} from "@/uilts/chromeExtension"
import {debounce} from "@/uilts/help";

const props = defineProps({
    atUserList: {
        type: Array,
        default: () => {
            return []
        }
    },
    isAddSelf: {
        type: Boolean,
        default: true
    },
    isRequire: {
        type: Boolean,
        default: false
    },
    padding: {
        type: String,
    }
})

let currentIptIndex = ref(-1);
let isActiveAddBtn = ref(false);
let currentUserIndex = ref(-1);
let domStyle = ref({
    left: 0,
    top: 0
})

let userList = ref([]);
let userInfo = reactive({});
let pageAtUserList = ref(props.atUserList);


const emits = defineEmits(["addUser", "setUser", "delUser"]);

onMounted(() => {
    if(!pageAtUserList.value.length) {
        getUserInfo((info) => {
            if(info && info.nickName && props.isAddSelf) {
                addUser(info.nickName);
                setTimeout(() => {
                    setIptWidth(0);
                }, 600)
            }
        });
    } else {
        for(let i = 0; i < pageAtUserList.value.length; i++ ) {
            setTimeout(() => {
                setIptWidth(i);
            })
        }
    }

    document.addEventListener('click',e => { 
        let dom = document.querySelector('.user-list-wrapper');
        if (dom) {
            if (!dom.contains(e.target)) {
                userList.value = [];
            } else {
            }
        }
    })
}) 

watch(
    () => props.atUserList,
    (newVal) => {
    },
    {
        deep: true
    }
);


const getUserInfo = (cb) => {
    getChromeStorage('userInfo', (res) => {
        if(res) {
            userInfo.value = res;
        }
        cb && cb(res);
    })
}

const addUser = (name = '') => {
    emits('addUser', {
        name
    })
}

const addInput = () => {
    addUser('');
    setTimeout(() => {
        let index = props.atUserList.length - 1;
        setIptWidth(index);
        let iptDom = document.getElementById('input'+index);
        iptDom.focus();
    })
}

const delUser = (params, index) => {
    emits("delUser", {index})
}

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

const onInput = (params, index) => {
    currentIptIndex.value = index;
    emits("setUser", {index: index, name: params.name})
    getTwitterUsers(params.name)
}

const onKeydown = (params, index) => {
    // setIptWidth(index);
}

const onKeyup = (params, index) => {
    setIptWidth(index);
}

const setIptWidth = (index) => {
    let iptDom = document.getElementById('input'+index);
    if(iptDom) {
        iptDom.style.width = document.getElementById('pre'+index).offsetWidth + 'px'
    }  else {
        setTimeout(() => {
            let iptDom = document.getElementById('input'+index);
            if(iptDom){
              iptDom.style.width = document.getElementById('pre'+index).offsetWidth + 'px'
            }
        }, 600)
    }
}

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

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

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

const rectClick = (event) => {
    //获取相对于当前所指向对象的位置坐标
    console.log(event,'x:' + event.clientX + "  y:" +  event.clientY);
    let dom = event.target;
    domStyle.value = {
        left : (dom.getBoundingClientRect().left / 2) - 140,
        top: dom.getBoundingClientRect().top + 20
    }
}

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

const selectedUser = (params, index) => {
    emits("setUser", {index: currentIptIndex.value, name: params.screenName});
    setTimeout(() => {
        setIptWidth(currentIptIndex.value);
        currentIptIndex.value = -1;
    })
}

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

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

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

        .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: #1D9BF0;
            font-weight: 500;
            font-size: 15px;
            position: relative;
            margin-right: 10px;
            background-color: #fff;
            margin-top: 4px;

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

            .at-user-input-placeholder {
                position: absolute; 
                top: -1000px;
                min-width: 12px;
                max-width: 128px;
            }
            .at-user-input {
                color: #1D9BF0;
                border: none;
                outline: none;
            }

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

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

                    .following {
                        font-weight: 500;
                        font-size: 14px;
                        color: #566370;
                        display: flex;
                        align-items: center;
                        margin-left: 20px;
                        img {
                            margin-right: 6px;
                        }
                    }

                    .content {
                        display: flex;
                        align-items: center;
                        box-sizing: border-box;
                        margin: 5px 0;
                        height: 100%;

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

                        div {
                            width: calc(100% - 50px);
                            .name {
                                font-weight: 600;
                                font-size: 16px;
                                margin-bottom: 2px;
                                color: #000;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                            .screenName {
                                font-size: 15px;
                                color: #566370;
                            }
                        }
                    }
                }

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

        .icon-add-wrapper {
            display: flex;
            align-items: center;
            margin-top: 10px;
        }
    }
</style>