Integrating IViewUI in Main Application

To incorporate IViewUI into your Vue project, include the following in your main.js file:

import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.use(iView);

Implementing the Split Component

The following template demosntrates how to use the Split component to divide a layout into two resizable panels:

<template>
  <div class="demo-split">
    <Split v-model="splitPosition">
      <div slot="left" class="demo-split-pane">
        Left Panel Content
      </div>
      <div slot="right" class="demo-split-pane">
        Right Panel Content
      </div>
    </Split>
  </div>
</template>

<script>
export default {
  data() {
    return {
      splitPosition: 0.5
    };
  }
};
</script>

<style>
.demo-split {
  height: 200px;
  border: 1px solid #dcdee2;
}

.demo-split-pane {
  padding: 10px;
}
</style>

API Documentation

Props

Events

Slots