vue自定义指令--自由操作伸缩移动DOM

紫微前端

已于 2022-10-31 16:24:25 修改

阅读量393

点赞数

CC 4.0 BY-SA版权

分类专栏：原生javascript制作各种酷炫组件文章标签： javascript vue.js 前端

于 2022-10-26 15:47:01 首次发布

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/127533770

原生javascript制作各种酷炫组件专栏收录该内容

157 篇文章 ¥89.90 ¥99.00

订阅专栏

本文介绍了如何在Vue中创建自定义指令，以实现对DOM元素的自由伸缩和移动操作。通过实例代码展示了具体的实现过程，帮助开发者理解Vue自定义指令的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

页面代码

 <div class="bian" v-bian></div>

指令代码



Vue.directive('bian', {
    // 当被绑定的元素插入到 DOM 中时……
    inserted: function(el, binding, vnode) {
        var commonStyle="position:absolute;width:10px;height:10px;background:gray;display:inline-block;border-radius:100%;"
        el.style.position="absolute";
        var childTopLeft=document.createElement("span");
        childTopLeft.setAttribute("class","childTopLeft resizeChild myAdjust")
        childTopLeft.style.cssText=commonStyle+"left:-10px;top:-10px;c

了解本专栏