<div id="app" class="demo">
<input type="text" placeholder="我是全局自定义指令" v-focus>
</div>
<script>
Vue.directive("focus", { inserted: function(el){ el.focus(); } })
new Vue({ el: "#app" })
</script>
<div id="app" class="demo">
<input type="text" placeholder="我是局部自定义指令" v-focus2>
</div>
<script>
new Vue({
el: "#app",
directives: {
focus2: { inserted: function(el){ el.focus(); } }
}
})
</script>
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。
<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
Vue.directive('demo', {
bind: function (el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) + '<br>' +
'value: ' + s(binding.value) + '<br>' +
'expression: ' + s(binding.expression) + '<br>' +
'argument: ' + s(binding.arg) + '<br>' +
'modifiers: ' + s(binding.modifiers) + '<br>' +
'vnode keys: ' + Object.keys(vnode).join(', ')
}
})
new Vue({
el: '#hook-arguments-example',
data: {
message: 'hello!'
}
})
v-mydirective:[argument]="value"
固定布局将元素固定在页面上
<div id="dynamicexample">
<h3>Scroll down inside this section ↓</h3>
<p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p>
</div>
Vue.directive('pin', {
bind: function (el, binding, vnode) {
el.style.position = 'fixed'
var s = (binding.arg == 'left' ? 'left' : 'top')
el.style[s] = binding.value + 'px'
}
})
new Vue({
el: '#dynamicexample',
data: function () {
return {
direction: 'left'
}
}
})
import Vue from 'vue'
import _lazyLoading from './lazyLoading'
const lazyLoading = Vue.directive('lazyLoading', _lazyLoading)
export { lazyLoading }
export default {
bind(el, binding) {
const { value } = binding
let elementClass = null
let lazyFun = null
if (typeof value == 'object') {
const { elementClass: _elementClass, lazyFun: _lazyFun } = value // elementClass 元素的class, lazyFun 调用的函数
elementClass = _elementClass
lazyFun = _lazyFun
} else if (typeof value == 'function'){
lazyFun = value
} else {
console.err('传参错误')
return
}
// 获取element-ui定义好的scroll盒子
const SELECTWRAP_DOM = el.querySelector(elementClass || '.el-select-dropdown .el-select-dropdown__wrap')
SELECTWRAP_DOM.addEventListener('scroll', function () {
let {clientHeight, scrollTop, scrollHeight} = this
const CONDITION = Math.round(clientHeight + scrollTop) >= scrollHeight
if (CONDITION) {
debounce(lazyFun(),300)
}
})
}
}
function debounce(fn,delay) { // 防抖
var timeout = null; // 创建一个标记用来存放定时器的返回值
return (e) => {
clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
// 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
timeout = setTimeout(() => {
fn.apply(this, arguments);
}, delay);
};
}
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
scrollHeight>=clientHeight恒成立，在没有滚动条时scrollHeight==clientHeight恒成立。单位px，只读元素
如果元素滚动到底, 下面等式返回true, 没有则返回false
Math.round(clientHeight + scrollTop) >= scrollHeight
<el-select
class="condition"
v-model="filterBoxData"
v-lazy-loading="lazyLoadingFun"
:filter-method="podSearch"
>
<el-option
v-for="item in selectLists"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
lazyLoadingFun() {
this.formData.pageIndex++;
this.getList(this.formData);
},
clientX ：表示鼠标当前的 X 坐标
clientY ：表示鼠标当前的 Y 坐标
那么伪代码就是：
disX = 鼠标按下时的 clientX - 鼠标松开时的 clientX
disY = 鼠标按下时的 clientY - 鼠标松开时的 clientY
import { pauseEvent } from '@/utils/performanceOptimization'
export default {
bind(el, binding, vnode, oldVnode) {
const dialogHeaderEl = el.querySelector('.el-dialog__header')
const dragDom = el.querySelector('.el-dialog')
//dialogHeaderEl.style.cursor = 'move';
dialogHeaderEl.style.cssText += ';cursor:move;'
dragDom.style.cssText += ';top:0px;'
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
const sty = (function () {
if (window.document.currentStyle) {
return (dom, attr) => dom.currentStyle[attr]
} else {
return (dom, attr) => getComputedStyle(dom, false)[attr]
}
})()
dialogHeaderEl.onmousedown = (e) => {
e = e || window.event
pauseEvent(e)
// 禁止关闭弹框
vnode.context.dragNotCloseDialog = false
// 鼠标按下，计算当前元素距离可视区的距离
const disX = e.clientX - dialogHeaderEl.offsetLeft
const disY = e.clientY - dialogHeaderEl.offsetTop
const screenWidth = document.body.clientWidth // body当前宽度
const screenHeight = document.documentElement.clientHeight // 可见区域高度(应为body高度，可某些环境下无法获取)
const dragDomWidth = dragDom.offsetWidth // 对话框宽度
const dragDomheight = dragDom.offsetHeight // 对话框高度
const minDragDomLeft = dragDom.offsetLeft
const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
const minDragDomTop = dragDom.offsetTop
const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight
// 获取到的值带px 正则匹配替换
let styL = sty(dragDom, 'left')
let styT = sty(dragDom, 'top')
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
if (styL.includes('%')) {
styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
} else {
styL = +styL.replace(/\px/g, '')
styT = +styT.replace(/\px/g, '')
}
let left, top
// 防抖-性能优化
let timeout = null
dialogHeaderEl.onmousemove = function mouseMove(e) {
if (timeout) { clearTimeout(timeout) }
timeout = setTimeout(() => {
e = e || window.event
pauseEvent(e)
// 计算移动的距离
left = e.clientX - disX
top = e.clientY - disY
// 移动当前元素
dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
}, 1)
}
document.onmouseup = function (e) {
clearTimeout(timeout)
dialogHeaderEl.onmousemove = null
// 边界处理
if (-left > minDragDomLeft) { left = -minDragDomLeft }
else if (left > maxDragDomLeft) { left = maxDragDomLeft }
if (-top > minDragDomTop) { top = -minDragDomTop }
else if (top > maxDragDomTop) { top = maxDragDomTop }
// 移动当前元素
dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
// 可以关闭弹框
setTimeout(() => {
vnode.context.dragNotCloseDialog = true
}, 100)
document.onmouseup = null
}
}
},
// 卸载时，清除事件绑定
unbind(el) {
const header = el.children[0].children[0]
header.onmousedown = null
}
}
<el-dialog v-drag title="对话框" :visible.sync="dialogVisible"></el-dialog>
directives: { // 使用局部注册指令的方式
resize: { // 指令的名称
bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
let width = '', height = '';
function isReize() {
const style = document.defaultView.getComputedStyle(el);
if (width !== style.width || height !== style.height) {
binding.value(); // 关键
}
width = style.width;
height = style.height;
}
el.__vueSetInterval__ = setInterval(isReize, 300);
},
unbind(el) {
clearInterval(el.__vueSetInterval__);
}
}
}
//然后在html中
<div v-resize="resize"></div> // 绑定的resize是一个函数
//在methods中
resize() { // 当宽高变化时就会执行
//执行某些操作
}
const myChart = echarts.init(document.getElementById(id))
****
myChart.resize()
import { Message } from 'element-ui'
const _copy = {
bind (el, { value }) {
el.$value = value
el.handler = () => {
if (!el.$value) {
Message.warning('无复制内容')
return
}
const textarea = document.createElement('textarea')
textarea.readOnly = 'readonly'
textarea.style.position = 'absolute'
textarea.style.left = '-9999px'
textarea.value = el.$value
document.body.appendChild(textarea)
textarea.select()
const result = document.execCommand('Copy')
if (result) {
Message.success('已复制到剪切板')
}
document.body.removeChild(textarea)
}
el.addEventListener('click', el.handler)
},
// 当传进来的值更新的时候触发
componentUpdated (el, { value }) {
el.$value = value
},
// 指令与元素解绑的时候，移除事件绑定
unbind (el) {
el.removeEventListener('click', el.handler)
}
}
export default _copy