1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374 |
- export default {
- name: 'hide-switch',
- created (el, binding, vnode) {},
- mounted (el, binding, vnode) {
- // 为第一个子元素添加样式
- el.firstChild.style.overflow = 'hidden'
- const pos = (binding.value || 'right').toLowerCase()
- if (!['top', 'right', 'bottom', 'left'].includes(pos)) {
- console.error('指令hide-switch传入值不合法[\'top\', \'right\', \'bottom\', \'left\']')
- return
- }
- el.style.position = 'relative'
- const switchDom = document.createElement('span')
- switchDom.style[pos] = '0'
- switch (pos) {
- case 'top':
- switchDom.style.left = '50%'
- switchDom.style.transform = 'translate(-50%,calc(-100% + 24px)) rotate(270deg)'
- break
- case 'right':
- switchDom.style.top = '50%'
- switchDom.style.transform = 'translate(100%,-50%)'
- break
- case 'bottom':
- switchDom.style.left = '50%'
- switchDom.style.transform = 'translate(100%,-50%) rotateY(90deg)'
- break
- case 'left':
- switchDom.style.top = '50%'
- switchDom.style.transform = 'translate(-100%,-50%) rotateY(180deg)'
- break
- }
- switchDom.style.display = 'block'
- switchDom.style.height = '60px'
- switchDom.style.width = '12px'
- switchDom.style.position = 'absolute'
- switchDom.style.zIndex = '1999'
- switchDom.style.backgroundImage = `url(${require('./show.png')})`
- switchDom.style.backgroundSize = '100% 100%'
- switchDom.style.cursor = 'pointer'
- switchDom.onclick = () => {
- let judgeData = ''
- let updateFiled = ''
- let updateMinField = ''
- if (['top', 'bottom'].includes(pos)) {
- judgeData = el.offsetHeight
- updateFiled = 'height'
- updateMinField = 'minHeight'
- } else if (['left', 'right'].includes(pos)) {
- judgeData = el.offsetWidth
- updateFiled = 'width'
- updateMinField = 'minWidth'
- } else {
- return
- }
- if (judgeData) {
- el.style[updateFiled] = '0'
- el.style[updateMinField] = '0'
- el.style.border = 'none'
- el.style.padding = '0'
- switchDom.style.backgroundImage = `url(${require('./hide.png')})`
- } else {
- switchDom.style.backgroundImage = `url(${require('./show.png')})`
- el.style[updateFiled] = ''
- el.style[updateMinField] = ''
- el.style.padding = ''
- el.style.border = ''
- }
- }
- el.outerHtml = '123'
- el.appendChild(switchDom)
- }
- }
|