elementui全局设置lockScroll

Element UI 的全局设置 `lockScroll` 主要是用于控制组件是否禁用滚动事件，这对于某些场景下需要阻止用户滚屏查看页面内容非常有用。例如，在弹窗、模态框展示期间，你可能会希望锁定滚动条，避免用户意外滚动影响主要内容。

在 Element UI 中，你可以通过 Vue 的 `$el` 对象来操作元素，并利用 `element-ui/lib/theme-chalk/index.css` 文件中的 `.el-scrollbar__wrap` 类来添加全局样式，将滚动锁定。下面是一个简单的示例：

export default {
  mounted() {
    this.$el.querySelector('.el-scrollbar__wrap').style.overflow = 'hidden'; // 锁定滚动
  },
  beforeDestroy() {
    this.$el.querySelector('.el-scrollbar__wrap').style.overflow = ''; // 解除锁定（如果需要）
  }
}

在这个例子中，`mounted()` 生命周期钩子会在组件挂载后立即执行，而 `beforeDestroy()` 钩子则在组件销毁前恢复默认滚动行为。

相关问题

elementui $message 全局时间

默认情况下，ElementUI 的 $message 全局提示框会在 3 秒后自动消失。这个时间是可以通过在调用 $message 方法时传入一个 options 对象来进行自定义的。

例如，可以通过设置 duration 属性来改变提示框消失的时间，代码如下：

this.$message({
  message: '提示信息',
  type: 'success',
  duration: 5000  // 5秒后自动消失
});

另外，ElementUI 还提供了一个全局的配置对象，可以通过修改该对象来改变全局提示框的默认配置，例如：

import Vue from 'vue';
import { Message } from 'element-ui';

Vue.prototype.$message = Message;

// 修改全局配置
Message.config({
  duration: 5000,  // 5秒后自动消失
  showClose: true, // 显示关闭按钮
  center: true,    // 居中显示
});

这样，在后续调用 $message 方法时，就会继承全局配置的属性。如果特定的 $message 调用需要覆盖全局配置，也可以在传入 options 对象时进行设置。

elementui 过渡动画全局使用

要在 ElementUI 中全局使用过渡动画，可以通过在 main.js 中注册全局组件来实现。具体步骤如下：

1. 在 main.js 中引入 ElementUI 和 CSS 文件：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

2. 在 Vue 实例中注册 ElementUI 组件：

Vue.use(ElementUI);

3. 创建一个 transition 组件，并设置 name 属性：

<transition name="fade">
  <!-- 过渡内容 -->
</transition>

4. 在 CSS 中定义过渡动画：

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

这样，你就可以在 ElementUI 中全局使用过渡动画了。注意，在具体使用中，你需要根据需要设置不同的过渡效果和动画时长。