IviewUI Split 面板分割

2022-05-06 11:01:19 阅读：250 来源： 互联网

标签：String mode IviewUI horizontal 面板 iview Split

1. main.js引入iview

import iView from 'iview';
import 'iview/dist/styles/iview.css';    // 使用 CSS

Vue.use(iView);

2.页面

<template>
    <div class="demo-split">
        <Split v-model="split1">
            <div slot="left" class="demo-split-pane">
                Left Pane
            </div>
            <div slot="right" class="demo-split-pane">
                Right Pane
            </div>
        </Split>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                split1: 0.5
            }
        },
    }
</script>
<style>
    .demo-split{
        height: 200px;
        border: 1px solid #dcdee2;
    }
    .demo-split-pane{
        padding: 10px;
    }
</style>

3.API

Split props

属性	说明	类型	默认值
value	面板位置，可以是 0~1 代表百分比，或具体数值的像素，可用 v-model 双向绑定	Number \| String	0.5
mode	类型，可选值为 horizontal 或 vertical	String	horizontal
min	最小阈值	Number \| String	40px
max	最大阈值	Number \| String	40px

Split events

事件名	说明	返回值
on-move-start	拖拽开始	-
on-moving	拖拽中	event
on-move-end	拖拽结束	-

Split slot

名称	说明
left	mode 为 horizontal 时可用，左边面板
right	mode 为 horizontal 时可用，右边面板
top	mode 为 vertical 时可用，上边面板
bottom	mode 为 vertical 时可用，下边面板
trigger	自定义分割拖拽节点

标签：String,mode,IviewUI,horizontal,面板,iview,Split
来源： https://www.cnblogs.com/wjian0916/p/16227825.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

IviewUI Split 面板分割

Split props

Split events

Split slot