vue3 setup中使用view-ui-plus的split组件

你可以按照以下步骤在 Vue3 的 setup 中使用 View UI Plus 的 Split 组件：

1. 首先，确保已经安装了 View UI Plus 和 Vue3：

npm install view-ui-plus vue@next

2. 在你的组件中引入 Split 组件：

import { Split } from 'view-ui-plus';

3. 在 setup 函数中，使用 ref 创建一个 Split 实例：

import { Split } from 'view-ui-plus';
import { ref } from 'vue';

export default {
  setup() {
    const splitInstance = ref(null);

    return {
      splitInstance,
    };
  },
  components: {
    Split,
  },
};

4. 在模板中使用 Split 组件，并将 ref 绑定到 Split 实例上：

<template>
  <Split ref="splitInstance">
    <div>左侧面板</div>
    <div>右侧面板</div>
  </Split>
</template>

5. 现在，你可以在组件中使用 splitInstance.value 对 Split 实例进行操作，例如设置分割线位置：

splitInstance.value.setPos(200);

这样就可以在 Vue3 的 setup 中使用 View UI Plus 的 Split 组件了。