模拟input效果实现随文字内容增加宽度自适应（vue）

正气*凛然

已于 2022-05-17 15:42:30 修改

阅读量859

点赞数

文章标签： javascript css html

于 2022-05-17 15:31:38 首次发布

本文链接：https://blog.csdn.net/maJieweb/article/details/124822442

版权

<--封装成组件-->
<template>
  <div style="display: inline">
    <span class="span-edit" ref="pp" :style="styleObj" :contenteditable="contenteditable" @focus="isFocus = true" @blur="isFocus = false" @keyup="inputHandle"></span>
    <span v-if="!value" style="border-bottom: 1px solid #696969" @click="moveCursor">{
  { tip }}</span>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    contenteditable: {
      type: Boolean,
      default: true
    },
    tip: {
      type: String,
      default: '请输入内容'
    }
  },
  data() {
    return {
      isFocus: true,
      innerText: this.value
    }
  },
  computed: {
    styleObj() {
      return {
        'b