参考数据如下：
| 参考链接 | 是否可行 |
|---|---|
| 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>
效果如下：
此文章仅供学习，为个人原创，如需转载请标明作者。
