VUE自定义指令的配置和传参

VUE自定义指令的配置和传参

新增传参封装

binding.value：值为html页面v-pin设置的值

binding.modifiers：值为v-pin.bottom.right的 bottom right值 是写在v-pin用 . 连接的值

binding.arg：值为v-pin:true.bottom.right的 true值 是写在v-pin用 : 连接的值

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令的配置和传参</title>
    <style>
        .card {
            width: 200px;
            background-color: #ccc;
            padding: 10px;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div id="seg1">
        <div v-pin:true.bottom.right="card1.pinned" class="card">
            <button @click="card1.pinned=!card1.pinned">定住/取消</button>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat accusamus hic consequuntur quos ab placeat
            quibusdam libero voluptates facilis aliquam id, tempora quas explicabo, commodi atque ex dolorem iure
            quidem.
        </div>
        <div v-pin:card2.color.bottom.left="card2.pinned" class="card">
            <!-- <button @click="card1.pinned=!card1.pinned">定住/取消</button> -->
            <!-- ,card2.color=!card2.color -->
            <a @click="card2.pinned=!card2.pinned" href="#">定住/取消</a>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat accusamus hic consequuntur quos ab placeat
            quibusdam libero voluptates facilis aliquam id, tempora quas explicabo, commodi atque ex dolorem iure
            quidem.
        </div>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veritatis suscipit molestias beatae enim sapiente quod
        officiis pariatur. Velit tenetur vitae molestiae deleniti illo? Commodi omnis nobis obcaecati totam iste ab.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, et rem quasi adipisci beatae cupiditate
        sapiente. Doloribus velit sequi omnis reiciendis repudiandae quod porro rem a dolores itaque. Blanditiis, a?
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veritatis suscipit molestias beatae enim sapiente quod
        officiis pariatur. Velit tenetur vitae molestiae deleniti illo? Commodi omnis nobis obcaecati totam iste ab.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, et rem quasi adipisci beatae cupiditate
        sapiente. Doloribus velit sequi omnis reiciendis repudiandae quod porro rem a dolores itaque. Blanditiis, a?
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veritatis suscipit molestias beatae enim sapiente quod
        officiis pariatur. Velit tenetur vitae molestiae deleniti illo? Commodi omnis nobis obcaecati totam iste ab.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, et rem quasi adipisci beatae cupiditate
        sapiente. Doloribus velit sequi omnis reiciendis repudiandae quod porro rem a dolores itaque. Blanditiis, a?
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veritatis suscipit molestias beatae enim sapiente quod
        officiis pariatur. Velit tenetur vitae molestiae deleniti illo? Commodi omnis nobis obcaecati totam iste ab.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, et rem quasi adipisci beatae cupiditate
        sapiente. Doloribus velit sequi omnis reiciendis repudiandae quod porro rem a dolores itaque. Blanditiis, a?
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veritatis suscipit molestias beatae enim sapiente quod
        officiis pariatur. Velit tenetur vitae molestiae deleniti illo? Commodi omnis nobis obcaecati totam iste ab.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, et rem quasi adipisci beatae cupiditate
        sapiente. Doloribus velit sequi omnis reiciendis repudiandae quod porro rem a dolores itaque. Blanditiis, a?
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veritatis suscipit molestias beatae enim sapiente quod
        officiis pariatur. Velit tenetur vitae molestiae deleniti illo? Commodi omnis nobis obcaecati totam iste ab.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, et rem quasi adipisci beatae cupiditate
        sapiente. Doloribus velit sequi omnis reiciendis repudiandae quod porro rem a dolores itaque. Blanditiis, a?
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veritatis suscipit molestias beatae enim sapiente quod
        officiis pariatur. Velit tenetur vitae molestiae deleniti illo? Commodi omnis nobis obcaecati totam iste ab.

    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <script src="index.js"></script>
</body>

</html>

JS

// el为当前元素     binding为值和基本信息就是v-pin设置的值
Vue.directive('pin', function (el, binding) {
    // binding.value的值为html页面v-pin设置的值 然后赋值给pinned
    var pinned = binding.value;
    console.log(pinned);
    // binding.modifiers的值为v-pin.bottom.right的 bottom right值 是写在v-pin用 . 连接的值
    var position = binding.modifiers
    console.log(position);
    // binding.arg的值为v-pin:true.bottom.right的 true值 是写在v-pin用 : 连接的值
    var warning = binding.arg
    console.log(warning);



    // 如果pinned的值为true 则让el当前元素设置如下的样式
    if (pinned) {
        el.style.position = 'fixed'

        for (var key in position) {
            if (position[key]) {
                el.style[key] = '10px'
            }
        }
        if (warning === 'true') {
            el.style.background = 'yellow'
        }
        // else {
        //     el.style.background = '#ccc'
        // }
    } else {
        el.style.position = 'static'
    }

    // 留作业，把点击变黄色的完善一下（可以定义函数在methods里）让warning的值变为false
    // 思路：点击时让color变为true   再次点击时变为false  可参考上面的思路
})
new Vue({
    el: "#seg1",
    data: {
        card1: {
            pinned: false,
            // color: false

        },
        card2: {
            pinned: false,
            // color: false

        }
    }
})
版权声明：本文为qq_44822110原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。