vue elementui 实现留言板

以下是使用Vue和Element UI实现留言板的示例代码：

1. 首先，确保已经安装了Element UI库。可以使用以下命令进行安装：

npm i element-ui -S

2. 在main.js文件中引入Element UI并注册组件：

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

Vue.use(ElementUI)

3. 创建一个留言板组件，例如MessageBoard.vue：

<template>
  <div>
    <el-card>
      <div slot="header">留言板</div>
      <el-infinite-scroll @load="loadMore" :distance="10">
        <el-timeline>
          <el-timeline-item v-for="message in messages" :key="message.id">
            <template v-slot:timestamp>
              {{ message.time }}
            </template>
            {{ message.content }}
          </el-timeline-item>
        </el-timeline>
      </el-infinite-scroll>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [], // 存储留言数据
      page: 1, // 当前页码
      pageSize: 10, // 每页显示数量
    }
  },
  mounted() {
    this.loadMore()
  },
  methods: {
    loadMore() {
      // 模拟异步加载留言数据
      setTimeout(() => {
        // 假设从后端获取到的留言数据为response
        const response = [
          { id: 1, content: '留言1', time: '2021-01-01 10:00:00' },
          { id: 2, content: '留言2', time: '2021-01-02 12:00:00' },
          // ...
        ]
        this.messages = this.messages.concat(response)
        this.page++
      }, 500)
    },
  },
}
</script>

<style scoped>
/* 样式可以根据需求进行自定义 */
</style>

4. 在需要使用留言板的页面中引入MessageBoard组件：

<template>
  <div>
    <!-- 其他页面内容 -->
    <message-board></message-board>
  </div>
</template>

<script>
import MessageBoard from '@/components/MessageBoard.vue'

export default {
  components: {
    MessageBoard,
  },
}
</script>

这样就实现了一个简单的留言板功能。留言板会根据滚动加载的方式，每次加载10条留言数据。