Element-UI-X 技术文档

1. 安装指南

环境要求

• Node.js 12.x 或更高版本
• Vue 2.x
• Element-UI 2.x

安装方式

NPM 安装（推荐）

npm install vue-element-ui-x

Yarn 安装

yarn add vue-element-ui-x

2. 使用说明

全局引入

在项目入口文件（如 main.js）中添加以下代码：

import Vue from 'vue'
import ElementUI from 'element-ui'
import ElementUIX from 'vue-element-ui-x'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
Vue.use(ElementUIX)

按需引入

可在组件中单独引入需要的组件：

import { ElXTypewriter } from 'vue-element-ui-x'

export default {
  components: {
    ElXTypewriter
  }
}

3. API 使用文档

Typewriter 打字器组件

<el-x-typewriter
  :content="textContent"
  :typing="true"
  :speed="100"
  @complete="handleComplete"
/>

参数说明

参数名	类型	默认值	说明
content	String	''	需要展示的文本内容
typing	Boolean	true	是否启用打字效果
speed	Number	100	打字速度（毫秒/字符）

事件

事件名	说明
complete	打字动画完成时触发

Bubble 气泡组件

<el-x-bubble
  :content="message"
  :position="'left'"
  :timestamp="time"
/>

参数说明

参数名	类型	默认值	说明
content	String	''	气泡内容
position	String	'left'	气泡位置（left/right）
timestamp	String	''	时间戳显示

4. 项目安装方式详解

完整项目集成步骤

1. 创建Vue项目

vue create my-project

2. 安装Element-UI和Element-UI-X

npm install element-ui vue-element-ui-x

3. 配置项目入口文件

// main.js
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import ElementUIX from 'vue-element-ui-x'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
Vue.use(ElementUIX)

new Vue({
  render: h => h(App)
}).$mount('#app')

4. 在组件中使用

<template>
  <div>
    <el-x-typewriter :content="welcomeText" />
    <el-x-bubble :content="message" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      welcomeText: '欢迎使用Element-UI-X',
      message: '这是一条测试消息'
    }
  }
}
</script>