【无标题】

列表循环获取文字

方法一：使用动态ref

html

         <div
            :class="
              activeVar == item.id ? 'topics-list selected-item' : 'topics-list'
            "
            v-for="(item, index) in activeVarTabList"
            :key="index"
          >
            <div :class="
              activeVar == item.id ? 'selected_jianju' : 'selected_jianjuS'
            ">
              <div class="list-box headline-list">
                <el-popover
                  placement="top-start"
                  trigger="hover"
                  :disabled="!item.isShowhover"
                  popper-class="topStartClass"
                >
                  <div>{{ item.name }}</div>
                  <template #reference>
                    <div
                      @click="parametersSelected(item, index)"
                      class="over-flow"
                    >
                      <span :ref="setHelloRef">{{ item.name }}</span>
                    </div>
                  </template>
                </el-popover>
              </div>
            </div>
            <div
              class="list-number"
              style="margin-right: 16px"
            >
              <span> {{ item.intelligenceCount }}条情报 </span>
            </div>
          </div>

js

    const activeVarTabList = ref(); // 列表数组
    const menuItem = ref([]);

    const setHelloRef = (el) => {
      menuItem.value = [];
      nextTick(() => {
        menuItem.value.push(el);
        if (
          menuItem.value.length > 0 &&
          menuItem.value.length == activeVarTabList.value.length
        ) {
          menuItem.value.forEach((e, index) => {
            if (e && e.offsetWidth > e.parentNode.offsetWidth) {
              return (activeVarTabList.value[index].isShowhover = true);
            }
          });
        }
      });
    };

css

.selected-item {
  border-left: #266dea solid 2px;
  background-color: #e2eff9;
}
  .topics-list {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;

    .headline-list {
      // width: 125px;
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
      font-weight: 400;
      text-align: left;
      //   line-height: 22px;
      cursor: pointer;
      // text-align: justify;
    }
    .list-box {
      // width: 105px;
      .over-flow {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 20px;
      }
    }
    .list-box:hover {
      color: #2668ff;
    }
    .list-number {
      // width: 100px;
      //   height: 20px;
      color: rgba(0, 0, 0, 0.35);
      font-size: 12px;
      font-weight: 400;
      font-family: "PingFang SC";
      text-align: right;
      line-height: 20px;
    }
  }
    .list-box {
      // width: 105px;
      .over-flow {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 20px;
      }
    }
    .list-box:hover {
      color: #2668ff;
    }

单行文字超出

方法一：使用ref

                <div style="white-space: nowrap">
                  <span>活动入口：</span>
                  <el-tooltip
                    effect="light"
                    :content="detailList.entrance"
                    placement="top"
                    :disabled="!data.isEentrance"
                  >
                    <span style="
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      ">
                      <span ref="entranceRef">{{ detailList.entrance }}</span>
                    </span>
                  </el-tooltip>
                </div>

js

 const fun=()=>{
             nextTick(() => {
              if (
                entranceRef.value.offsetWidth >
                entranceRef.value.parentNode.offsetWidth
              ) {
                data.isEentrance = true;
              } else {
                data.isEentrance = false;
              }
            });
 }

使用动态ref

            <div style="width: 100%; display: flex; justify-content: space-between">
              <div style="width: 150px; margin: 0 8px">
                <el-tooltip
                  :content="data.gameInfo.name"
                  placement="top"
                  :disabled="!gameNameIsShow"
                >
                  <div class="over_one_line">
                    <span
                      class="name"
                      :ref="setGameNameIsShowRef"
                    >{{
                      data.gameInfo.name || "-"
                    }}</span>
                  </div>
                </el-tooltip>
              </div>
            </div>

js

    const gameNameIsShow = ref(false);
        const menuItem = ref([]);
        const setGameNameIsShowRef = (el) => {
      menuItem.value = [];
      nextTick(() => {
        menuItem.value.push(el);
        if (menuItem.value.length > 0) {
          menuItem.value.forEach((e, index) => {
            if (e && e.offsetWidth > e.parentNode.offsetWidth) {
              gameNameIsShow.value = true;
              // return (abroadGameList.value[index].isShowhover = true);
            }
          });
        }
      });
    };

方法三：获取元素

          nextTick(() => {
            let height = Number(
              getComputedStyle(
                document.getElementById("contentRef"),
                null
              ).height.replace("px", "")
            );
            let lineHeight = Number(
              getComputedStyle(
                document.getElementById("contentRef"),
                null
              ).lineHeight.replace("px", "")
            );
            if (Math.round(height / lineHeight) >= 7) {
              data.ellipsisShow = true;
            } else {
              data.ellipsisShow = false;
            }
          });```

## 插入链接与图片

链接: [link](https://www.csdn.net/).

图片: ![Alt](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw)

带尺寸的图片: ![Alt](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw =30x30)

居中的图片: ![Alt](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw#pic_center)

居中并且带尺寸的图片: ![Alt](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw#pic_center =30x30)

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

## 如何插入一段漂亮的代码片

去[博客设置](https://mp.csdn.net/console/configBlog)页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 `代码片`.
```javascript
// An highlighted block
var foo = 'bar';