vue.js - 使 PrimeVue Splitter 具有动态双向面板尺寸

Question

我正在使用PrimeVue Splitter使用 Vue3 和组合 API。我想让每个面板的大小动态化，所以当我单击按钮时，它们会返回到原始大小。

这就是我目前所拥有的

<button @click="fixPanels()" >fix</button>

<Splitter style="height: 100%" class="mb-3">
    <SplitterPanel :size=smallPanelSize >
        Panel 1  
    </SplitterPanel>
    <SplitterPanel :size=bigPanelSize >
        Panel 2 
    </SplitterPanel>
</Splitter>


export default {  
  setup(){

    let smallPanelSize = ref(30)
    let bigPanelSize = ref(70)  
    
    const fixPanels = ()=>{   
      message.value = 30;
      bigPanelSize.value = 70
    } 

    return{smallPanelSize, bigPanelSize, fixPanels}
    
  } 
} 

我可以自由调整面板大小，但是当单击 fixPanels 时，它们不会返回到原始大小。我想我必须以某种方式使用双向绑定(bind)或 v-model 但我不知道如何，这里没有输入。如果这是不可能的，你能建议一个类似的可调整大小的面板组件，面板尺寸是动态控制的吗？

谢谢

Answer 1

SplitterPanel 组件似乎不处理 react 性大小。因此，前缀大小是在组件加载时确定的，并且无法通过 react 性重置。

因此，解决方案是重新加载组件以强制重置尺寸。

为此，我创建了一个 Panels 组件，该组件仅用于显示面板及其重置按钮。大小将通过 props 检索，而不是在组件内分配。调整大小按钮将通过 emit 发送一个事件，以便向父组件发出重新加载组件的信号，从而重置大小。

父组件将使用ref创建两个默认大小变量并将它们发送到 Prop 。还将检索该事件以调用 fixPanels 函数。唯一的微妙之处是设法强制重新加载 Panels 组件。为此，我向 Panels 组件添加了一个 key 值，每次调用 fixPanels 函数时该值都会递增。该变量的目的只是让子组件认为组件的值已更改并需要重新加载它。

下面是与我的解释相对应的两个编码组件。 (我将 Vue 3 与组合 API 和 TypeScript 一起使用，但如果需要，您可能会知道如何将其转换为 Vue 3 选项)

Panels.vue

<template>
  <button @click="$emit('reload')">fix</button>

  <Splitter style="height: 100%" class="mb-3">
    <SplitterPanel :size="smallPanelSize">
      Panel 1
    </SplitterPanel>
    <SplitterPanel :size="bigPanelSize">
      Panel 2
    </SplitterPanel>
  </Splitter>
</template>

<script setup lang="ts">

import Splitter from "primevue/splitter";
import SplitterPanel from "primevue/splitterpanel";

const props = defineProps<{smallPanelSize: number, bigPanelSize:number}>();

</script>

ManagePanel.vue

<script setup lang="ts">
import { ref } from "vue";
import Panels from "./components/Panels.vue";

let small = ref(30);
let big = ref(70);
let componentKey = ref(0);

function forceRender() {
  componentKey.value += 1;
}

function fixPanels() {
  small.value = 30;
  big.value = 70;
  forceRender();
}
</script>

<template>
  <Panels
    :smallPanelSize="small"
    :bigPanelSize="big"
    :key="componentKey"
    @reload="fixPanels"
  />
</template>