深圳建筑设计网站,鄠邑区建设局网站,凡科官网app下载,wordpress小工具分享目录
基本用法
纵向排列
遍历渲染
动态拆分宽度 项目开发中用到了拆分窗格(就是下面的效果#xff0c;可以拆分网页#xff0c;我们项目通常都是用左右两块拆分#xff0c;可以通过拖动图标进行左右拖动)#xff0c;于是就发现了一个很好用的插件#xff1a;Splitpane…目录
基本用法
纵向排列
遍历渲染
动态拆分宽度 项目开发中用到了拆分窗格(就是下面的效果可以拆分网页我们项目通常都是用左右两块拆分可以通过拖动图标进行左右拖动)于是就发现了一个很好用的插件Splitpanes 官网地址Splitpanes (antoniandre.github.io)
适用于Vue2Vue3。安装对应的版本即可 npm i splitpanes # Vue3 npm i splitpaneslegacy # Vue2 基本用法
size指定初始化宽度(页面一进来显示的宽度)总和不要超过100%值是百分比。可以不指定默认会平分总宽度minsize指定最小宽度取值也是百分比记得一定加default-theme的类名不然拖动图标会很小要给一个初始高度
templatediv stylewidth: 100%;height: 100%;splitpanes classdefault-theme styleheight: 100%pane min-size20 size30左/panepane min-size20 size70右/pane/splitpanes/div
/templatescript setup langts
import { Splitpanes, Pane } from splitpanes
import splitpanes/dist/splitpanes.css
/scriptstyle scoped
.splitpanes__pane {display: flex;justify-content: center;align-items: center;background-color: skyblue;
}
/style
如果感觉组件引入比较麻烦可以直接进行全局注册。就不用逐个引入了
main.ts
import { createApp } from vue
import { createPinia } from piniaimport App from ./App.vue
import router from ./router
// 可以把组件进行全局注册并引入样式
import { Splitpanes, Pane } from splitpanes
import splitpanes/dist/splitpanes.cssconst app createApp(App)app.component(Splitpanes, Splitpanes)
app.component(Pane, Pane)app.use(createPinia())
app.use(router)app.mount(#app)纵向排列
只需要传入horizontal属性即可
templatediv stylewidth: 100%;height: 100%;splitpanes horizontal classdefault-theme styleheight: 100%pane min-size20 size30左/panepane min-size20 size70右/pane/splitpanes/div
/templatestyle scoped
.splitpanes__pane {display: flex;justify-content: center;align-items: center;background-color: skyblue;
}
/style
遍历渲染
直接v-for遍历循环即可
templatediv stylewidth: 100%;height: 100%;splitpanes classdefault-theme styleheight: 100%pane v-fori in 8 :keyi min-size5span{{ i }}/span/pane/splitpanes/div
/templatestyle scoped
.splitpanes__pane {display: flex;justify-content: center;align-items: center;background-color: skyblue;
}
/style
动态拆分宽度
templatediv stylewidth: 100%;height: 100%;button clickpanesNumberAdd pane/buttonbutton clickpanesNumber--Remove pane/buttonsplitpanes classdefault-theme styleheight: 400pxpane v-fori in panesNumber :keyispan{{ i }}/span/pane/splitpanes/div
/templatescript langts setup
import { ref } from vue;const panesNumber ref(3);
/scriptstyle scoped
.splitpanes__pane {display: flex;justify-content: center;align-items: center;background-color: skyblue;
}
/style
更多效果可以查看文档只列举了一些常用的
