v-spliter 一个基于VUE指令让相邻的两个元素可以拖
npm install 'v-spliter' -S 2引入使用
vue3使用
import vSpliter from 'v-spliter' import { createApp, h } from 'vue' const app = createApp(App) app.use(vSpliter) app.mount('#app') vue3 umd引入使用示例
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Page Title</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <link rel='stylesheet' type='text/css' media='screen' href='main.css'> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script src='../lib/v-spliter.umd.js'></script> </head> <body> <div id="app"> <div style="background: greenyellow; height: 200px;"> </div> <div v-spliter style="height: 20px;"> </div> <div style="background: burlywood; height: calc(100% - 220px); display: flex;"> <div style="background: yellowgreen; height: 100%; width: 200px;"></div> <div v-spliter style="width: 20px; "></div> <div></div> </div> </div> <script> const { createApp } = Vue var app = createApp({ data() { return { message: 'Hello Vue!' } } }).use(VUE_V_SPLITER).mount('#app') </script> </body> <style> html, body, #app { width: 100%; height: 100%; padding: 0px; margin: 0px; } </style> </html> vue2 umd引入使用示例
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Page Title</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <link rel='stylesheet' type='text/css' media='screen' href='main.css'> <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script> <script src='../lib/v-spliter.umd.js'></script> </head> <body> <div id="app"> <div style="background: greenyellow; height: 200px;"> </div> <div v-spliter style="height: 20px;"> </div> <div style="background: burlywood; height: calc(100% - 220px); display: flex;"> <div style="background: yellowgreen; height: 100%; width: 200px;"></div> <div v-spliter style="width: 20px; "></div> <div></div> </div> </div> <script> Vue.use(VUE_V_SPLITER) var app = new Vue({ data() { return { message: 'Hello Vue!' } } }).$mount('#app') </script> </body> <style> html, body, #app { width: 100%; height: 100%; padding: 0px; margin: 0px; } </style> </html> 普通的html使用
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Page Title</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <link rel='stylesheet' type='text/css' media='screen' href='main.css'> <script src='../lib/v-spliter.umd.js'></script> </head> <body> <div id="app"> <div style="background: greenyellow; height: 200px;"> </div> <div class="v-spliter" style="height: 20px;"> </div> <div style="background: burlywood; height: calc(100% - 220px); display: flex;"> <div style="background: yellowgreen; height: 100%; width: 200px;"></div> <div class="v-spliter" style="width: 20px; "></div> <div></div> </div> </div> <script> [...document.querySelectorAll('.v-spliter')].forEach((el) => { VUE_V_SPLITER.directive(el, { value: { } }) }) </script> </body> <style> html, body, #app { width: 100%; height: 100%; padding: 0px; margin: 0px; } </style> </html>
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
