根据渲染数据长度动态渲染后缀图标

这篇具有很好参考价值的文章主要介绍了根据渲染数据长度动态渲染后缀图标。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在动态获取数据时，想要渲染后面的图标是根据数据的长度渲染图标位置，效果如下：

根据渲染数据长度动态渲染后缀图标,vue.js,elementui,javascript

代码如下：文章来源地址https://www.toymoban.com/news/detail-644574.html

<el-row :gutter="60">
     <el-col :span="24">
        <el-form-item>
          <el-input v-model.trim="formData.name" readonly>
            <template slot="prepend">
              <el-popover placement="bottom" width="600" trigger="click">
                <!-- 初始化界面---这里是点击“选择成员”按钮触发的一个页面 -->
                <AddNewPerson v-if="visibleFunction === true" />
                <el-button slot="reference" @click="visibleFunction">+选择成员</el-button>
              </el-popover>
              <span v-if="formData.name" class="font-red el-icon-close" 
                style="cursor: pointer;position: absolute;
                transform: translateX(-50%);top: 5px;" 
                :style="{ left: calculateLeftPosition(formData.lkmCustName) }"             
                @click="toChangeCus()"
               />
            </template>
          </el-input>
        </el-form-item>
     </el-col>
</el-row>

methods: {
    // 计算偏移量
    calculateLeftPosition(str) {
      const length = str.length;
      // 设置基准位置，根据实际需求进行调整
      const basePosition = 150;
      // 设置每个字符的偏移量，根据实际需求进行调整
      const offset = 12;
      // 计算最终的left值
      const leftPosition = basePosition + (length * offset);
      return leftPosition + 'px';
    },
    // 清空数据
    toChangeCus() {
      this.formData.name = '';
    }
}

到了这里，关于根据渲染数据长度动态渲染后缀图标的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！