vue + el-input 中 textarea实现place

参考数据如下：

参考链接	是否可行
js实现	验证可行
vue placeholder 实现	验证可行
移动端	未验证

问题说明

肯定是想要el-input 都能实现placeholder的换行，效果如下图：

问题解决

经过测试和实验，只有原生textarea才能实现占位符换行，实现方法有：

1. 在 html 里换行

代码如下：

    <el-input
      v-model="value"
      type="textarea"
      :autosize="{ minRows: 4 }"
      placeholder="1.嘻嘻嘻
2.哈哈哈"
    />

效果如下：

2. 在绑定参数里换行

代码如下：

<template>
    <el-input
      v-model="value"
      type="textarea"
      :autosize="{ minRows: 4 }"
      :placeholder="'1.嘻嘻嘻\n2.哈哈哈'"
    />
    <textarea :placeholder="placeholder"></textarea>
    <el-input
      v-model="value"
      type="textarea"
      :autosize="{ minRows: 4 }"
      :placeholder="placeholder"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: '',
      placeholder: '1.嘻嘻嘻\n2.哈哈哈',
    }
  },
}
</script>

效果如下：

2.1. 衍生终极实现方法

原理说明：既然换行在data的字面量数据中被‘转换’过了，那就先得到转换过的，再对字符串进行替换即可。

代码如下：

<template>
   <textarea
      id="test"
      v-model="value"
      :placeholder="handlePlaceholder('1.嘻嘻嘻\n2.哈哈哈\n3.嘿嘿嘿')"
    ></textarea>
    <el-input
      id="test1"
      v-model="value"
      type="textarea"
      :autosize="{ minRows: 4 }"
      :placeholder="handlePlaceholder('1.嘻嘻嘻\n2.哈哈哈\n3.嘿嘿嘿')"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: '',
      lineBreak: '\n',
    }
  },
  methods: {
    handlePlaceholder(placeholder) {
      if (placeholder) {
        return placeholder.replace(/\\n/g, this.lineBreak)
      } else {
        return '请输入内容'
      }
    },
  },
}
</script>

效果如下：

image.png

3. 写js代码换行

代码如下：

<template>
    <textarea id="test" v-model="value" :placeholder="placeholder"></textarea>
    <el-input
      id="test1"
      v-model="value"
      type="textarea"
      :autosize="{ minRows: 4 }"
      :placeholder="placeholder"
    />
  </div>
</template>
<script>
export default {
  mounted() {
    document
      .getElementById('test')
      .setAttribute('placeholder', '1、textarea\n2、success')
    document
      .getElementById('test1')
      .setAttribute('placeholder', '1、textarea\n2、success')
  },
}
</script>

效果如下：

此文章仅供学习，为个人原创，如需转载请标明作者。