uni-app 自定义修改 选中的代码行 背景颜色

在 uni-app 中，自定义修改选中代码行的背景颜色通常涉及对编辑器或代码高亮组件的自定义。不过，由于 uni-app 本身是一个用于开发跨平台应用的框架，并不直接提供代码编辑功能，因此这里我们假设你是在一个集成到 uni-app 项目中的代码编辑器组件（如 codemirror 或 monaco-editor）中进行这样的操作。

以下是一个使用 codemirror 在 uni-app 中自定义选中代码行背景颜色的示例。首先，你需要确保 codemirror 已经被集成到你的项目中。如果还没有集成，可以通过以下方式安装（这里假设你在使用 Vue 组件）：

npm install codemirror

然后，在你的 Vue 组件中引入并使用 codemirror，同时自定义选中行的背景颜色：

<template>
  <div ref="editor"></div>
</template>

<script>
import CodeMirror from 'codemirror';
import 'codemirror/lib/codemirror.css'; // 引入基本样式
import 'codemirror/theme/material.css'; // 引入主题样式（可选）

export default {
  mounted() {
    this.editor = CodeMirror(this.$refs.editor, {
      value: `// 你的代码内容`,
      mode: 'javascript', // 语言模式
      theme: 'material', // 使用的主题
      lineNumbers: true, // 显示行号
      lineWrapping: true, // 自动换行
    });

    // 自定义选中行背景颜色
    this.editor.on('cursorActivity', () => {
      const doc = this.editor.getDoc();
      const selections = this.editor.listSelections();
      doc.clearMarkers(); // 清除之前的标记

      selections.forEach(({anchor, head}) => {
        const from = doc.posFromIndex(Math.min(anchor.index, head.index));
        const to = doc.posFromIndex(Math.max(anchor.index, head.index));
        doc.markText(from, to, {
          className: 'selected-line-background',
          inclusiveLeft: true,
          inclusiveRight: true,
        });
      });
    });
  },
};
</script>

<style>
.selected-line-background {
  background-color: #ffeb3b; /* 自定义背景颜色 */
}
</style>

注意：

1. 上述代码示例在 cursorActivity 事件中动态地为选中的行添加背景颜色标记。
2. 由于 codemirror 的 API 可能会随着版本更新而变化，请确保你使用的版本与示例代码兼容。
3. 在实际项目中，你可能需要更复杂的逻辑来处理多行选中、撤销选中等情况。
4. uni-app 项目中通常不会直接包含这样的代码编辑器，但你可以通过 WebView 或其他方式集成这样的组件。