自定义VUE指令

使用marquee标签实现文字悬浮滚动效果

//一般实现
 <div id="demo">
    <div v-if="show" style="z-index:99999;width200px;margin-left:20px;margin-top:-20px;background-color:#00a4ff;width:200px;position: absolute;border-radius:5px;padding-top: 5px;">
      <marquee >
      <span style="font-weight: bolder;font-size: 10px;color: white;">Welcom CMRH!</span>
    </marquee>
    </div>
  <button @mouseover="show = !show" @mouseout="show = !show">
    Toggle
  </button>
</div>

//全局定义
Vue.directive('demo', function (el, binding) {
  console.log(el,binding)
  let str = '<div id="pointer" style="z-index:99999;width200px;margin-left:20px;margin-top:-20px;background-color:#00a4ff;width:200px;position: absolute;border-radius:5px;padding-top: 5px;"><marquee><span style="font-weight: bolder;font-size: 10px;color: white;">'
   + binding.value.text + 
   '</span></marquee></div>'
  $(el).mouseover (function() {
    $(el).prepend(str)
  })
  $(el).mouseout (function() {
    $('#pointer').remove()
  })
})

//使用
<div v-demo="{ color: 'white', text: 'hello!' }">111111</div>

通过指令传递的数据，通过binding.value读取