vue+elementUI小工具（加载进度条、穿梭框、Dialog定位、2种selectTree等，持续更新）

在Vue中使用Element UI时，可以创建一个工具库来封装常用的组件和方法，以便在项目中重复使用。以下是一些你可能会发现有用的工具的示例代码：

1. 自定义指令：用于全局注册Vue指令，如点击外部区域关闭Popover等。

// 点击外部区域关闭Popover的指令
Vue.directive('click-outside', {
  bind(el, binding) {
    function clickHandler(e) {
      if (!el.contains(e.target)) {
        binding.value(); // 调用方法
      }
    }
    el.__clickOutside__ = clickHandler;
    document.addEventListener('click', clickHandler);
  },
  unbind(el) {
    document.removeEventListener('click', el.__clickOutside__);
    delete el.__clickOutside__;
  }
});

2. 自定义组件：封装加载进度条组件。

<template>
  <el-progress :percentage="percentage" :status="status"></el-progress>
</template>
 
<script>
export default {
  name: 'LoadingBar',
  props: {
    percentage: {
      type: Number,
      default: 0
    },
    status: {
      type: String,
      default: 'normal'
    }
  }
};
</script>

3. 全局方法：用于全局调用的函数，如Dialog定位等。

// 定义Dialog定位的方法
Vue.prototype.$dialogPosition = function(dialogRef) {
  const dialogHeight = dialogRef.$el.clientHeight;
  const bodyHeight = document.body.clientHeight;
  dialogRef.position = (bodyHeight - dialogHeight) / 2;
};

4. 全局过滤器：用于格式化文本等。

// 定义一个全局过滤器，用于格式化时间
Vue.filter('formatDate', function(value) {
  if (value) {
    return moment(String(value)).format('YYYY-MM-DD');
  }
});

这些工具可以帮助你更高效地使用Vue和Element UI，减少重复的代码编写。你可以根据需要不断更新这个工具库，添加新的功能和组件。