VUE自定义指令

2023-11-24 21:39:52

VUE自定义指令

Vue.directive 自定义指令

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="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.pinned" class="card">
            <!-- <button @click="card1.pinned=!card1.pinned">定住/取消</button> -->
            <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.

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

</html>

JS

//pin就是HTML页面的v-pin
// el为当前元素     binding为值和基本信息就是v-pin设置的值
Vue.directive('pin', function (el, binding) {
    // binding.value的值为html页面v-pin设置的值 然后赋值给pinned
    var pinned = binding.value;
    console.log(pinned);


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


})
new Vue({
    el: "#seg1",
    data: {
        card1: {
            pinned: false

        },
        card2: {
            pinned: true

        }
    }
})

码农公寓

VUE自定义指令

Vue.directive 自定义指令

HTML

JS

相关文章