Y Blog

Appearance

CSS中'flex:1'内容过长时的解决方案及文本选中事件处理

🕒 Published at:

在前端开发中，常常会遇到一些棘手的问题，如CSS中flex: 1内容过长时挤占其他元素空间，或者如何处理文本选中事件并显示操作框。本文将详细介绍这两个问题的解决方案。

CSS中flex: 1内容过长时的解决方案 ​

在使用CSS的flex布局时，当元素的内容过长，会导致挤占其他元素的空间。为了解决这个问题，可以通过将左侧元素的宽度设置为0。

解决方案 ​

css
.left {
  background-color: #9bffce;
  flex: 1;
  width: 0;
}

此方案已经在Chrome74、Firefox66、IE11和Edge上测试通过，适用于三栏布局。

处理跨域请求的CORS问题 ​

在开发过程中，经常会遇到跨域请求被阻止的问题。以下是通过Nginx配置解决跨域预检请求的方法。

Nginx配置 ​

nginx
if ($request_method = "OPTIONS") {
  return 200;
}

Vue中处理文本选中事件并显示操作框 ​

在某些需求中，我们需要在用户选中文本后显示一个操作框，并且这个框应该出现在选中文本的下方。以下是详细的实现步骤。

实现步骤 ​

监听鼠标抬起事件 ​

在Vue组件中监听鼠标抬起事件：

html
<div @mouseup="handleMouseSelect">
  <!-- 你的内容 -->
</div>

获取选中文本及其位置信息 ​

在handleMouseSelect方法中，使用window.getSelection和getBoundingClientRect获取选中文本及其位置信息：

javascript
handleMouseSelect() {
  let text = window.getSelection().toString();
  if (text) {
    const selection = document.getSelection();
    const oRange = selection.getRangeAt(0);
    const oRect = oRange.getBoundingClientRect();
    this.selectTextShow = true;
    this.selectTextX = oRect.top + oRect.height + 10;
    this.selectTextY = oRect.left;
    this.selectTextComnent = text;
    this.promptTemplate = [...this.presetPromptTemplate, ...this.promptSetData];
    console.log(this.selectTextX, this.selectTextY, this.selectTextShow);
  }
}

点击非显示区域时隐藏操作框 ​

监听全局的mouseup事件，点击非显示区域时隐藏操作框：

javascript
document.onmouseup = (e) => {
  if (!this.$refs.selectedTected.contains(e.target)) {
    this.selectTextState = '';
    this.selectTextShow = false;
    this.thumbnailButton = true;
  } else {
    return;
  }

  var selectedText = window.getSelection().toString();
  if (selectedText) {
    const selection = document.getSelection();
    const oRange = selection.getRangeAt(0);
    const oRect = oRange.getBoundingClientRect();
    this.selectTextShow = true;
    this.selectTextX = oRect.top + oRect.height + 10;
    this.selectTextY = oRect.left;
    this.selectTextComnent = selectedText;
    this.promptTemplate = [...this.presetPromptTemplate, ...this.promptSetData];
    console.log(this.selectTextX, this.selectTextY, this.selectTextShow);
  }
};

参考资料 ​