Vue.directive 自定义指令
<!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>//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 } }})联系客服
