vue父组件如何给子组件设置背景图片url

最新推荐文章于 2024-04-11 07:01:33 发布

程序员Grand.

最新推荐文章于 2024-04-11 07:01:33 发布

阅读量1k

点赞数 1

分类专栏： Vue 文章标签： Vue组件 props 计算属性动态背景图父子组件

本文链接：https://blog.csdn.net/weixin_46942836/article/details/123246946

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

父组件

给子组件传递iconName和placeholder。

<LoginInput :iconName="'user'" class="inputStyle" ref="user" :placeholder="'请输入用户名'"/>
<LoginInput :iconName="'pwd'" class="inputStyle" style="margin-bottom: 15px;" ref="pwd" :placeholder="'请输入密码'"/>

子组件

通过计算属性对iconName进行判断选取哪个背景图，再进行绑定style。

<input :style="{backgroundImage:'url('+ iconUrl +')'}" type="text" name="" id="" v-model:value="value"
:placeholder="placeholder" class="userInput" />

export default {
		data() {
			return {
				userIcon: require('../static/icons/user.png'),
				pwdIcon: require('../static/icons/password.png'),
				value: ''
			}
		},
		methods: {
			getValue() {
				return this.value
			}
		},
		props: {
			iconName: {
				default: "",
				type: String
			},
			placeholder: {
				default: "",
				type: String
			}
		},
		computed: {
			iconUrl() {
				switch (this.iconName) {
					case 'user':
						return this.userIcon
					case 'pwd':
						return this.pwdIcon
					default:
						return ''
				}
			}
		}
	}