可伸缩的aside 自定义指令
export const left2RightDrag = { //从左到右 inserted(el, binding) { const value = binding.value //指令参数 el.onmousedown = function(e) { const init = e.clientX const parent = el.parentNode //父盒子 const initWidth = parent.offsetWidth document.onmousemove = function(e) { const end = e.clientX const newWidth = end - init + initWidth if (newWidth < document.body.clientWidth - 10 && newWidth > 10) { parent.style.width = newWidth + 'px' } } document.onmouseup = function() { value && setLayout(value, parent.style.width) //宽度通过localstorage传递 document.onmousemove = document.onmouseup = null } } } }
使用
<template> <el-aside :width="currentWidth" class="ms-aside-container" :style="{'margin-left': !asideHidden ? 0 : '-' + currentWidth}" > <slot /> <div v-left-to-right-drag="type" class="drag-bar" /> </el-aside> </template> props: { //初始宽度 width: { type: String, default: '260px' }, //可以设置不同类型aside type: { type: String, default: null } }, computed: { currentWidth() { //getLayout获取本地的width return this.type && getLayout(this.type) || this.width } }