VUE自定义directives指定使用

最新推荐文章于 2025-07-11 16:31:29 发布

zbao007

最新推荐文章于 2025-07-11 16:31:29 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： VUE 自定义指定

本文链接：https://blog.youkuaiyun.com/z719725611/article/details/79615476

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Vue中创建并使用自定义指令，详细解析了自定义指令的存放结构，包括ComponentOperation.js和index.js的配置。通过实例展示了在页面上如何调用自定义指令。

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

官方文档链接：https://cn.vuejs.org/v2/guide/custom-directive.html

自定义指令存放结构

ComponentOperation.js：

import uuid from 'uuid';
import bus from '../../store/js/bus';
//复制
function copy (pageInfo, el){
  const id = el.id;
  var copyEl = pageInfo.filter( info => {return info.id === id;});
  if(null !== copyEl && copyEl.length > 0) {
    var currentElCopy = Object.assign({}, copyEl[0], {id: uuid()});
    pageInfo.push(currentElCopy);
    bus.$emit('updatePageInfo', pageInfo);
  }
}

//删除
function del (pageInfo, el){
  const id = el.id;
  pageInfo = pageInfo.filter( info => {return info.id !== id;});
  bus.$emit('updatePageInfo', pageInfo);
}

//初始化事件
function initEvent (pageInfo, el){
  const id = el.id;
  $("#" + id).find('.common_icon16_addColor').click(function(){
    copy (pageInfo, el);
  });

  $("#" + id).find('.common_icon16_delColor').click(function(){
    del (pageInfo, el);
  });
}

export default {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el, binding) {
    const { pageInfo } = binding.value;
    initEvent(pageInfo, el);
  }
};

index.js：

import ComponentOperation from './ComponentOperation';

const install = function (Vue) {
  Vue.directive('component-operation', ComponentOperation);
};

if (window.Vue) {
  Vue.use(install);
}

ComponentOperation.install = install;
export default ComponentOperation;

页面调用：

<template>
    <el-row v-component-operation="{pageInfo:pageInfo}" :dType="dType">
      <div style="float: right;">
        <em class="common_icon16_addColor"></em>
        <em class="common_icon16_delColor"></em>
      </div>
    </el-row>
</template>

<script>

  import ComponentOperation from '../../../directive/opertion/index';

  export default {

    directives: { ComponentOperation },

    name: 'HUIROW',

    data() {
      return {}
    },

    props: {
      dType: {
        type: String,
        default: 'Row'
      },
      pageInfo: {
        type: Array,
        default: []
      }
    },

    methods: {}
  };
</script>

<style scoped>
.el-row {
  min-height: 42px;
  border: 1px dashed #00a0e9;
}
.common_icon16_addColor, .common_icon16_delColor {
  display: block;
  width: 18px;
  height: 18px;
  background: url(https://cdns1.dajiashequ.com/resources/v1/images/00efed0b.common_controlsContainerForm_icon18.png?v=2015.10.28) no-repeat;
  cursor: pointer;
  float: left;
  margin-left: 5px;
}

.common_icon16_delColor {
  background-position: -18px 0;
}
</style>