让你的 Todo List 更直观：轻松添加描述图片！

前端

2024-01-23 00:02:25

好的，以下是Todo List: 待办事项添加图片等信息（file转base64存储） - 第四章的文章：

1. 准备工作

在开始之前，你需要确保已经安装了以下软件和工具：

Node.js
Vue.js
Git

如果你还没有安装这些软件，请先按照官方指南进行安装。

2. 创建 Todo List 项目

首先，你需要创建一个新的 Todo List 项目。你可以使用以下命令：

vue create todo-list

这将在当前目录中创建一个新的 Todo List 项目。

3. 安装依赖项

接下来，你需要安装必要的依赖项。你可以使用以下命令：

npm install --save base64-img

这将安装 base64-img 包，它可以将文件转换为 base64 编码。

4. 添加图片附件功能

现在，你可以开始添加图片附件功能了。首先，你需要在 src/components/TodoItem.vue 文件中添加以下代码：

<template>
  <li class="todo-item">
    <input type="checkbox" v-model="completed">
    <label>{{ text }}</label>
    <span class="todo-item__image">
      <img v-if="image" :src="image" alt="Image">
    </span>
  </li>
</template>

<script>
import Base64Img from 'base64-img';

export default {
  props: ['todo'],
  data() {
    return {
      image: null
    };
  },
  created() {
    if (this.todo.image) {
      Base64Img.getBase64(this.todo.image, (err, data) => {
        if (err) {
          console.error(err);
        } else {
          this.image = data;
        }
      });
    }
  }
};
</script>

<style>
.todo-item__image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.todo-item__image img {
  max-width: 100%;
  max-height: 100%;
}
</style>

这段代码将向 Todo List 项目添加图片附件功能。它使用 base64-img 包将文件转换为 base64 编码，然后在 Todo List 中显示图片。

5. 测试图片附件功能

现在，你可以测试图片附件功能了。首先，你需要在 src/main.js 文件中添加以下代码：

import Vue from 'vue';
import App from './App.vue';

Vue.component('todo-item', require('./components/TodoItem.vue').default);

new Vue({
  el: '#app',
  render: h => h(App)
});

这段代码将 Todo List 组件注册到 Vue 实例中，并将其渲染到 #app 元素中。

接下来，你可以在 src/App.vue 文件中添加以下代码：

<template>
  <div id="app">
    <h1>Todo List</h1>
    <ul>
      <todo-item v-for="todo in todos" :key="todo.id" :todo="todo"></todo-item>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [
        {
          id: 1,
          text: 'Learn Vue.js',
          completed: false,
          image: 'path/to/image.jpg'
        },
        {
          id: 2,
          text: 'Build a Todo List',
          completed: true,
          image: 'path/to/image.png'
        }
      ]
    };
  }
};
</script>