element ui at联系人功能

很抱歉，根据提供的引用内容，我无法回答关于element ui at联系人功能的问题。引用提到了使用VUE+textarea标签实现艾特功能，但并未提及element ui。引用则提到了设计交互组件的方法，但并未提及具体的实现方式。如果您有更多的信息或者问题，请提供更多的上下文和细节，以便我更好地回答您的问题。

相关问题

vue+element UI 仿微信at联系人

为了实现Vue+Element UI仿微信at联系人的功能，可以按照以下步骤进行：

1. 首先安装Vue和Element UI，可以使用npm进行安装。

2. 在Vue中使用Element UI的组件，可以在需要使用的组件中引入，例如：

   import { Input, Autocomplete } from 'element-ui';
   export default {
     components: {
       'el-input': Input,
       'el-autocomplete': Autocomplete
     }
   }

3. 在页面中使用Autocomplete组件实现at联系人的功能，例如：

   <el-autocomplete
     v-model="inputValue"
     :fetch-suggestions="querySearchAsync"
     placeholder="请输入内容"
     @select="handleSelect">
     <template slot-scope="{ item }">
       <div class="name">{{ item.value }}</div>
     </template>
   </el-autocomplete>

在data中定义inputValue，querySearchAsync方法用于异步获取联系人列表，handleSelect方法用于选择联系人后的回调。

4. 根据微信的UI样式，可以自定义Element UI的样式，例如：

   .el-autocomplete .el-input__inner {
     padding-left: 30px;
   }
   .el-autocomplete .el-input__suffix {
     font-size: 16px;
     color: #999;
     left: 10px;
   }
   .el-autocomplete .el-autocomplete-suggestion__list {
     margin-top: 0;
     border-radius: 0;
     box-shadow: none;
     border: 1px solid #dcdfe6;
   }
   .el-autocomplete .el-autocomplete-suggestion__item {
     padding: 10px 20px;
     font-size: 14px;
     color: #333;
   }
   .el-autocomplete .el-autocomplete-suggestion__item:hover {
     background-color: #f5f7fa;
   }

5. 最后，根据微信的UI布局，可以使用Element UI的Tabs组件实现左侧联系人列表和右侧消息窗口的切换，例如：

   <el-tabs v-model="activeTab">
     <el-tab-pane label="联系人列表" name="contact-list">
       <!-- 联系人列表 -->
     </el-tab-pane>
     <el-tab-pane label="消息窗口" name="message-window">
       <!-- 消息窗口 -->
     </el-tab-pane>
   </el-tabs>

在data中定义activeTab，用于控制Tabs的切换。

element ui的核心功能

Element UI 是一个基于 Vue.js 的组件库，它提供了一套丰富的可复用的 UI 组件，用于快速构建用户界面。Element UI 的核心功能包括：

1. 组件丰富：Element UI 提供了大量常用的 UI 组件，如按钮、表单、弹窗、菜单等，可以满足各种前端开发需求。
2. 主题定制：Element UI 支持自定义主题样式，可以根据项目需求进行定制化，使得界面风格更符合项目要求。
3. 响应式设计：Element UI 的组件具有响应式设计，可以适应不同屏幕大小和设备，提供更好的用户体验。
4. 国际化支持：Element UI 提供多语言的支持，可以轻松实现国际化的界面展示。
5. 便捷的交互方式：Element UI 的组件提供了丰富的交互方式，如拖拽、排序、弹出框等，方便用户进行操作。
6. 友好的文档和社区支持：Element UI 提供了详细的文档和示例，开发者可以快速上手使用，并且有活跃的社区支持。