Vue 初体验（九）基础配置及传参和修饰符

最新推荐文章于 2022-01-18 22:56:10 发布

yangzm996

最新推荐文章于 2022-01-18 22:56:10 发布

阅读量354

点赞数

分类专栏： Vue.js 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_39448579/article/details/122129981

版权

Vue.js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

效果图

正常状态

在这里插入图片描述

点击钉住

在这里插入图片描述

会一直固定在右下角，并且样式更改

html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  .card{
    width:200px;
    background:#ccc;
    padding:10px;
    margin:5px;
  }
</style>
<body>
<!-- Vue  基础配置 及传参 和修饰符-->
<div id="app">
    <!--最简单的
   <div v-pin="card1.pinned" class="card">
   -->
   <!--  v-pin.bottom.right 使得钉住位置在右下角!
    <div v-pin.bottom.right="card1.pinned" class="card">
   -->
   <!-- 传入属性true，还有位置属性 bottom.right -->
   <div v-pin:true.bottom.right="card1.pinned" class="card">
     <button @click="card1.pinned=!card1.pinned">钉住/取消</button>
     <!-- 点击时，切换属性  -->
     AAAAAAAAAAAAAA
   </div>
   <div v-pin="card2.pinned" class="card">
     <a @click="card2.pinned=!card2.pinned" href="#">pint it</a>
     BBBBBBBB
   </div>
   <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </div>
</div>
<script src="vue.js"></script>
<script src="main.js"></script>
</body>
</html>

JS


Vue.directive('pin',function(el,binding){
  var pinned=binding.value;
  var position=binding.modifiers;
  var warning=binding.arg;
  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.position='static';
  }
})


new Vue({
  el:'#app',
  data:{
      card1:{
        pinned:false,
      },
      card2:{
        pinned:false,
      },
  }
})

yangzm996

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
Vue 初体验（九）基础配置及传参和修饰符

效果图正常状态点击钉住会一直固定在右下角，并且样式更改html<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content
复制链接

扫一扫