问题

在同一个页面中，我使用v-deep设置了input 组件的placeholder 样式，让输入框从右往左输入，但是这导致textarea 组件的placeholder 样式也被修改了。当我单独设置textarea 的placeholder 样式时，input 中的样式也会相应被覆盖。

image.png

这是自定义的placeholder 的样式：

1
2
3
4
5
6
7
8
9
10
::v-deep(.placeholder-text) {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 14px;
			color: #2C5181;
			line-height: 0;
			text-align: right;
			font-style: normal;
			text-transform: none;
		}

解决办法

将需要修改样式的输入框再包一层就好了。修改后的样式如下：

1
2
3
4
5
6
7
8
9
10
11
12
.right-input {
		::v-deep(.placeholder-text) {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 14px;
			color: #2C5181;
			line-height: 0;
			text-align: right;
			font-style: normal;
			text-transform: none;
		}
	}

用right-input 样式将需要修改样式的输入框再包一层，这样就只会对right-input 样式下的输入框生效而不影响其他的输入框样式。

参考资料

https://www.cnblogs.com/131362wsc/p/16460652.html