vue3实现抽屉组件中实现上一条和下一条

简单的模拟在用户查看学员详情时，点击上一条和下一条实现数据切换。

实现逻辑：首先将点击的用户的下标传给抽屉组件，然后监听下标的变化，判断是否为最后一个用户，是就设置样式并禁用按钮。上一条和下一条按钮绑定点击事件来触发父组件的自定义事件修改下标值，然后会触发子组件渲染。如果是点击下一条调用接口，可以将列表的所有用户Id存入数组，传递给子组件，然后可以根据下标拿到当前的用户id，然后根据用户id调用详情接口。

//父组件

<div>
    <div class="sss" key="index" v-for="item, index in arr" @click="() => showModel(item, index)">{{ item.name }}</div>
</div>
<Dawer @changeIndex1="changeIndex" destroy-on-close=true :key="3" :arr="arr" v-model="isShow" :name="name"
    :index1="index1" :ids="ids">
</Dawer>


// js代码

// 定义的假数据
const arr: Array<any> = [{ id: 1, name: '11' }, { id: 2, name: '22' }, { id: 3, name: '33'}]

// 初始化
let name = ref('')
let index1 = ref(0)
const isShow = ref(false)

// 列表点击事件
const showModel = (item: any, index: any) => {
  isShow.value = true
  name.value = item.name
  index1.value = index
}

// 自定义事件
用于接收修改以后的值，并赋值
const changeIndex = (val: number) => {
  index1.value = val
}

// 拿到所有的id  这里没用到，
const ids = arr.map(item => {
  return item.id
})

// 子组件

<template>
  <div class=''>
    <el-drawer v-model="modelValue" @close="close" title="I am the title" :with-header="false">
      <div>{{ name1 }}</div>
      <button @click="goPre" :class="{ preBtn: is }" :disabled="is">上一条</button>
      <button @click="goNext" :class="{ preBtn: is1 }" :disabled="is1">下一条</button>
    </el-drawer>
  </div>
</template>

<script setup lang='ts'>
import { arrayBuffer } from 'stream/consumers';
import { isRef, nextTick, toRefs, watch, watchEffect } from 'vue';

interface Type {
  id: Number
}
import { ref, reactive, onMounted } from 'vue'
const props = defineProps({
  modelValue: Boolean,
  name: String,
  index1: Number,
  ids: Array<number>,
  arr: Array<any>
})

const name1 = ref(props.name)

const emit = defineEmits(["update:modelValue", "changeIndex1"])
const is = ref(false)
const is1 = ref(false)

watchEffect(() => {
  console.log('--------------', props.index1);
  is.value = false
  is1.value = false
  if (props.index1 <= 0) {
    is.value = true
  } else if (props.index1 >= props.ids.length - 1) {
    is1.value = true
  } else {
    is.value = is1.value = false
  }

  // 修改抽屉的值
  const curObj = props.arr.find((e, i) => {
    return i == props.index1
  })
  name1.value = curObj.name

})
const close = () => {
  emit("update:modelValue", false)
}
const goPre = () => {
  emit("changeIndex1", props.index1 - 1)
}
const goNext = () => {
  emit("changeIndex1", props.index1 + 1)
}




</script>

<style scope>
.preBtn {
  background-color: red;
  cursor: no-drop;

}
</style>

为了是代码更加简单，采用provide和inject实现此功能。如下

父组件：

provide('mes', {
  name,
  index1,
  arr,
  ids,
  changeIndex
})

<Dawer destroy-on-close=true :key="3" :arr="arr" v-model="isShow" >
</Dawer>

直接通过子组件调用此方法修改数据。

const changeIndex = (val: number) => {
  index1.value = val
}

子组件

const { name,
  index1,
  ids,
  arr,
  changeIndex } = inject('mes')

// 以上属性是响应式的，使用的时候注意.value

const { name,
  index1,
  ids,
  arr,
  changeIndex } = inject('mes')
console.log(name, index1);
const props = defineProps({
  modelValue: Boolean,
  // name: String,
  // index1: Number,
  // ids: Array<number>,
  // arr: Array<any>
})

const emit = defineEmits(["update:modelValue"])
const is = ref(false)
const is1 = ref(false)


// 立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。
watchEffect(() => {
  console.log('--------------', index1);
  is.value = false
  is1.value = false
  if (index1.value <= 0) {
    is.value = true
  } else if (index1.value >= ids.length - 1) {
    is1.value = true
  } else {
    is.value = is1.value = false
  }

  // 修改抽屉的值
  const curObj = arr.find((e, i: Number) => {
    return i == index1.value
  })
  name.value = curObj?.name
  console.log(curObj?.name);

})
const close = () => {
  emit("update:modelValue", false)
}
const goPre = () => {
  // emit("changeIndex1", props.index1 - 1)
  console.log(index1);
  changeIndex(index1.value - 1)
}
const goNext = () => {
  // emit("changeIndex1", props.index1 + 1)
  changeIndex(index1.value + 1)

}




</script>

<style scope>
.preBtn {
  background-color: red;
  cursor: no-drop;

}
</style>