# 集成自定义指令

<template>
    <div>
        <Alert v-click-outside="clickOutside">
            <p @click="clickInside" class="click-outside-paragraph">{{text}}</p>
        </Alert>
    </div>
</template>
<script>
export default {
    data() {
        return {
            text: '测试是否点击了外部',
        };
    },
    methods: {
        clickOutside() {
            this.text = '你点击了外部';
        },
        clickInside() {
            this.text = '你点击了内部';
        },
    },
};
</script>

<template>
    <div>
        <Alert v-resize="resizeObj">
            <p>Window Size: width: {{width}}px height: {{height}}px</p>
        </Alert>
    </div>
</template>
<script>
export default {
    data() {
        return {
            width: 0,
            height: 0,
            resizeObj: {
                value: this.resizeFunc,
                debounce: 500,
                quiet: false,
            },
        };
    },
    methods: {
        resizeFunc() {
            this.width = window.innerWidth;
            this.height = window.innerHeight;
        },
    },
};
</script>

<template>
    <div>
        <Alert v-mouse-wheel="mouseWheelFunc" style="height: 200px; overflow: auto">
            <p>Window content</p>
            <p>Window content</p>
            <p>Window content</p>
            <p>Window content</p>
            <p>Window content</p>
        </Alert>
    </div>
</template>
<script>
export default {
    methods: {
        mouseWheelFunc(event, normalizeWheel) {
            console.log(normalizeWheel);
            console.log(event);
        },
    },
};
</script>