使用JavaScript制作格言展示框 | 豆包Marscode AI刷题

本文介绍如何用JavaScript实现一个自定义格言展示框，支持格言的修改，最终效果如下：

我们先梳理整体过程，用户打开网页后可以看到一个格言展示框，如果用户需要修改格言，那么要通过点击修改按钮，在输入框中输入新的格言，确认后网页会更新格言。所以我们需要写一个展示格言的框架，一个编辑按钮，和一个支持输入与确认的弹窗。

首先写出展示框的大致框架，{{motto}}为可动态更改的格言，同时添加一个带鼠标点击响应函数的编辑图标，点击后执行openEditDialog打开编辑弹窗。

<div class="motto-card">
  <!-- Head 区域 -->
  <div class="head"></div>

  <!-- Content 区域 -->
  <div class="content">
    <span class="motto-text">{{ motto }}</span>
    <img
      src="/edit_motto.svg"
      alt="Edit"
      class="edit-icon"
      @click="openEditDialog"
    />
  </div>
</div>

在这一步用户会与编辑图标交互，执行打开弹窗的操作。但在未点击之前弹窗都是不显示的，因此需要设置一个是否显示弹窗的变量，默认为false。只有当接受鼠标点击事件的时候才会激活，所以在openEditDialog函数中修改变量值。

const isDialogVisible = ref(false); // 控制弹窗显示

// 打开编辑弹窗
const openEditDialog = () => {
  isDialogVisible.value = true;
};

接着我们写修改格言的弹窗，这里我调用了elementplus组件库里的弹窗样式，它里面的组件简洁美观。v-model是 Vue3 中用于实现双向数据绑定的指令，弹窗状态绑定表示isDialogVisible的值随着弹窗开闭状态变化，输入框内容绑定 (v-model="newMotto")意味着输入框的内容实时更新到变量 newMotto。在弹窗最下方，如果用户选择取消，弹窗关闭并不做任何修改；如果点击确认，就会执行更新格言的函数。

<!-- 编辑弹窗 -->
<el-dialog
  title="edit..."
  v-model="isDialogVisible"
  width="30%"
>
  <el-input v-model="newMotto" placeholder="new motto"></el-input>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="isDialogVisible = false">cancel</el-button>
      <el-button type="primary" @click="updateMotto">save</el-button>
    </div>
  </template>
</el-dialog>

更新格言的js函数如下，将输入框newMotto的值赋给motto，会通过<span class="motto-text">{{ motto }}</span>在网页渲染时显示在格言展示框上：

const motto = ref('Happy day.'); // 默认格言内容

// 更新格言并关闭弹窗
const updateMotto = () => {
  motto.value = newMotto.value; 
  isDialogVisible.value = false;
};

弹窗的效果展示：

关于展示框的样式可以自由发挥，这里不再赘述。

最后总结一下写好JS的一些原则:

• 各司其责：html专注于整体结构，css用于样式，而js体现在交互的部分。变量newMotto 和 isDialogVisible 分别负责不同的状态管理，函数 openEditDialog 和 updateMotto 负责格言修改逻辑。
• 组件封装：可以将代码写在组件里，后续在其他网页中复用。
• 过程抽象：将常用操作（如打开弹窗和更新格言）抽象为函数，方便复用和扩展。