列表手动排序功能

最新推荐文章于 2023-08-08 16:08:53 发布

明乐er

最新推荐文章于 2023-08-08 16:08:53 发布

阅读量272

点赞数 1

分类专栏： Vue 文章标签：排序 vue

由于博主技术有限，如有描述错误或者不准确的，请联系博主进行变更！原创不易，且行且珍惜！

本文链接：https://blog.youkuaiyun.com/qq_35021522/article/details/120867449

版权

Vue 专栏收录该内容

2 篇文章

订阅专栏

在这里插入图片描述

<template>
    <transition-group class="sort-list" tag="ul">
        <li v-for="(item, index) in list" :key="item" class="sort-list-item">
            <span>{{ index + 1 + '、' + item }}</span>
            <div class="btn-icon">
                <a-icon
                    v-show="index !== list.length - 1"
                    class="pointer"
                    type="arrow-down"
                    title="下移"
                    @click="moveDown(index)"
                />
                <a-icon
                    v-show="index !== 0"
                    class="pointer"
                    type="arrow-up"
                    title="上移"
                    @click="moveUp(index)"
                />
            </div>
        </li>
    </transition-group>
</template>

<script>
export default {
    data() {
        return {
            list: [
                'Chinese',
                'Math',
                'Englist',
                'PE',
                'History',
                'Biology',
                'Chemistry',
                'Art',
                'Physics',
                'Computer',
            ],
        }
    },
    methods: {
        // 上移
        moveUp(index) {
            // 获取当前移动的项
            let tmp = this.list.splice(index, 1)
            // 将当前项添加到数组里面的上一项
            this.list.splice(index - 1, 0, tmp[0])
        },
        // 下移
        moveDown(index) {
            // 获取当前移动的项
            let tmp = this.list.splice(index, 1)
            // 将当前项添加到数组里面的下一项
            this.list.splice(index + 1, 0, tmp[0])
        },
    },
}
</script>

<style lang="less">
.sort-list {
    padding-left: 15px;
    padding-right: 15px;
    list-style: none;

    &-item {
        height: 30px;
        padding-right: 55px;
        line-height: 30px;
        transition: transform 0.5s;
        position: relative;
        border-bottom: 1px solid #ddd;
    }

    .btn-icon {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 9;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 40px;
        height: 30px;
        line-height: 30px;

        .pointer {
            cursor: pointer;
        }
    }
}
</style>