英文:
Passing value of style directive to button component in Vuejs
问题
我想要在我的共享按钮组件的:style指令中添加填充，但由于某些原因，更改未在按钮上显示出来。
我尝试了以下3种方法来应用更改，但都没有奏效。我对Vuejs还不熟悉，找不到问题所在。任何输入/建议将不胜感激。
<Button
@on-click="currentStep = 2"
:text="Next"
:style="'padding: 12px 15px 12px 15px'"
/>
<Button
@on-click="currentStep = 2"
:text="Next"
:style="{ padding: '12px 15px 12px 15px' }"
/>
<Button
@on-click="currentStep = 2"
:text="Next"
:style="myStyle"
/>
然后在第三种方法的脚本中返回myStyle: { padding: '12px 15px 12px 15px' }。
我的Button.vue组件如下：
<template>
{{ this.color }}
<button
@click="onClick"
:disabled="disabled"
class="begin-btn"
:style="backgroundColor + textColor"
>{{ text }}
</button>
</template>
<script>
export default {
name: 'ButtonComponent',
props: {
text: String,
disabled: Boolean,
width: String,
bgColor: String,
txtColor: String,
},
data() {
return {}
},
computed: {
backgroundColor(){
let bgColor = this.bgColor ? this.bgColor : '#d64ba1'
return "background: " + bgColor + ';';
},
textColor(){
let textColor = this.txtColor ? this.txtColor : '#ffffff'
return "color: " + textColor + ';';
}
},
methods: {
onClick() {
this.$emit("onClick");
},
},
}
</script>
<style scoped>
.begin-btn {
justify-content: center;
align-items: center;
border: 0px;
width: 100%;
height: 44px;
background: #d64ba1;
border-radius: 24px;
font-style: normal;
font-weight: 700;
font-size: 16px;
color: #ffffff;
}
</style>
英文:
I want to add padding to the :style directive of my shared button component but for some reasons, the changes aren't showing up on the button.
I tried doing it with 3 ways below to apply the changes but none of them worked. I'm new to Vuejs and not able to find the problem. Any inputs/suggestions would be appreciated.
<Button
@on-click="currentStep = 2"
:text= "Next"
:style="'padding: 12px 15px 12px 15px'"
/>
<Button
@on-click="currentStep = 2"
:text= "Next"
:style="{ padding: '12px 15px 12px 15px' }"
/>
<Button
@on-click="currentStep = 2"
:text= "Next"
:style="myStyle"
/>
and then returning myStyle: { padding: '12px 15px 12px 15px' } in the script for third one.
My Button.vue component looks like this:
<template>
{{ this.color }}
<button
@click="onClick"
:disabled="disabled"
class="begin-btn"
:style="backgroundColor + textColor"
>{{ text }}
</button>
</template>
<script>
export default {
name: 'ButtonComponent',
props: {
text: String,
disabled: Boolean,
width: String,
bgColor: String,
txtColor: String,
},
data() {
return {}
},
computed: {
backgroundColor(){
let bgColor = this.bgColor ? this.bgColor : '#d64ba1'
return "background: " + bgColor + ';';
},
textColor(){
let textColor = this.txtColor ? this.txtColor : '#ffffff'
return "color: " + textColor + ';';
}
},
methods: {
onClick() {
this.$emit("onClick");
},
},
}
</script>
<style scoped>
.begin-btn {
justify-content: center;
align-items: center;
border: 0px;
width: 100%;
height: 44px;
background: #d64ba1;
border-radius: 24px;
font-style: normal;
font-weight: 700;
font-size: 16px;
color: #ffffff;
}
</style>
答案1
得分: 1
请看以下代码片段：
<!-- 开始片段: js 隐藏: false 控制台: true babel: false -->
<!-- 语言: lang-js -->
const app = Vue.createApp({
data() {
return {
myStyle: { padding: '12px 15px 12px 15px' },
Next: 'aaaaaa'
};
},
})
app.component('myButton', {
template: `
<button
@click="onClick"
:disabled="disabled"
class="begin-btn"
:style="backgroundColor + textColor + getPadding "
>{{ text }}
</button>
`,props: {
text: String,
disabled: Boolean,
width: String,
bgColor: String,
txtColor: String,
padding: String
},
data() {
return {}
},
computed: {
getPadding() {
return 'padding:' + this.padding.padding
},
backgroundColor(){
let bgColor = this.bgColor ? this.bgColor : '#d64ba1'
return "background: " + bgColor + ';';
},
textColor(){
let textColor = this.txtColor ? this.txtColor : '#ffffff'
return "color: " + textColor + ';';
}
},
methods: {
onClick() {
this.$emit("onClick");
},
},
})
app.mount('#demo')
<!-- 语言: lang-css -->
.begin-btn {
justify-content: center;
align-items: center;
border: 0px;
width: 100%;
height: 44px;
background: #d64ba1;
border-radius: 24px;
font-style: normal;
font-weight: 700;
font-size: 16px;
color: #ffffff;
}
<!-- 语言: lang-html -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<my-button
@on-click="currentStep = 2"
:text="Next"
:padding="myStyle"
></my-button>
</div>
<!-- 结束片段 -->
英文:
Please take a look at following snippet:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const app = Vue.createApp({
data() {
return {
myStyle: { padding: '12px 15px 12px 15px' },
Next: 'aaaaaa'
};
},
})
app.component('myButton', {
template: `
<button
@click="onClick"
:disabled="disabled"
class="begin-btn"
:style="backgroundColor + textColor + getPadding "
>{{ text }}
</button>
`,props: {
text: String,
disabled: Boolean,
width: String,
bgColor: String,
txtColor: String,
padding: String
},
data() {
return {}
},
computed: {
getPadding() {
return 'padding:' + this.padding.padding
},
backgroundColor(){
let bgColor = this.bgColor ? this.bgColor : '#d64ba1'
return "background: " + bgColor + ';';
},
textColor(){
let textColor = this.txtColor ? this.txtColor : '#ffffff'
return "color: " + textColor + ';';
}
},
methods: {
onClick() {
this.$emit("onClick");
},
},
})
app.mount('#demo')
<!-- language: lang-css -->
.begin-btn {
justify-content: center;
align-items: center;
border: 0px;
width: 100%;
height: 44px;
background: #d64ba1;
border-radius: 24px;
font-style: normal;
font-weight: 700;
font-size: 16px;
color: #ffffff;
}
<!-- language: lang-html -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<my-button
@on-click="currentStep = 2"
:text="Next"
:padding="myStyle"
></my-button>
</div>
<!-- end snippet -->
答案2
得分: 1
您可以使用与其他属性相同的方法：为填充定义一个属性，并在组件的计算属性中设置默认值。
<template>
<button
@click="onClick"
:disabled="disabled"
class="begin-btn"
:style="backgroundColor + textColor + calculatedPadding"
>{{ text }}
</button>
</template>
<script>
export default {
name: 'ButtonComponent',
props: {
text: String,
disabled: Boolean,
width: String,
bgColor: String,
txtColor: String,
padding: String
},
data() {
return {}
},
computed: {
calculatedPadding(){
const paddingString = this.padding || '10px'; // 默认填充
return 'padding:' + paddingString + ';';
},
backgroundColor(){
let bgColor = this.bgColor ? this.bgColor : '#d64ba1'
return "background: " + bgColor + ';';
},
textColor(){
let textColor = this.txtColor ? this.txtColor : '#ffffff'
return "color: " + textColor + ';';
}
},
methods: {
onClick() {
this.$emit("onClick");
},
},
}
</script>
然后，在使用组件的另一个模板中用所需的值覆盖填充值：
`SomeView.vue`
<template>
<div>
<ButtonComponent
padding="50px 20px" <!-- 覆盖我们按钮的默认填充 -->
></ButtonComponent>
</div>
</template>
<script>
import ButtonComponent from '../components/ButtonComponent'
export default {
// ....
components:{
ButtonComponent
}
// ....
}
</script>
**更新**：
您甚至不需要计算属性。以下代码也可以正常工作：
<template>
<button
@click="onClick"
:disabled="disabled"
class="begin-btn"
:style="backgroundColor + textColor + 'padding:'+this.padding"
>{{ text }}</button>
</template>
然后将所需的值传递给组件：
<ButtonComponent bg-color="red" padding="10px 20px 100px 20px"></ButtonComponent>
<details>
<summary>英文:</summary>
You can use same approach as with another properties: define a property for padding and set a default value for in in your component's computed.
<template>
<button
@click="onClick"
:disabled="disabled"
class="begin-btn"
:style="backgroundColor + textColor + calculatedPadding"
>{{ text }}
</button>
</template>
<script>
export default {
name: 'ButtonComponent',
props: {
text: String,
disabled: Boolean,
width: String,
bgColor: String,
txtColor: String,
padding: String
},
data() {
return {}
},
computed: {
calculatedPadding(){
const paddingString = this.padding || '10px'; // default padding
return 'padding:' + paddingString + ';';
},
backgroundColor(){
let bgColor = this.bgColor ? this.bgColor : '#d64ba1'
return "background: " + bgColor + ';';
},
textColor(){
let textColor = this.txtColor ? this.txtColor : '#ffffff'
return "color: " + textColor + ';';
}
},
methods: {
onClick() {
this.$emit("onClick");
},
},
}
</script>
Then, override the padding value with the one you need in another template where you use your component:
`SomeView.vue`
<template>
<div>
<ButtonComponent
padding="50px 20px" <!-- overriding default padding for our button -->
></ButtonComponent>
</div>
</template>
<script>
import ButtonComponent from '../components/ButtonComponent'
export default {
// ....
components:{
ButtonComponent
}
// ....
}
</script>
**UPDATE**:
You don't even need computed for this. Following code also works fine:
<template>
<button
@click="onClick"
:disabled="disabled"
class="begin-btn"
:style="backgroundColor + textColor + 'padding:'+this.padding"
>{{ text }}</button>
</template>
And then pass the required value to component:
<ButtonComponent bg-color="red" padding="10px 20px 100px 20px"></ButtonComponent>
</details>
# 答案3
**得分**: 1
绑定样式属性的方式是正确的，应该能正常工作：[在这里查看示例][1]
在你的示例中不起作用的是，你的 Button 组件在内部指定了**另一个 :style 绑定**。不能在内部和外部都提供相同的属性。Vue 必须选择一个，而 Vue 选择了组件定义的那个。
[1]: https://sfc.vuejs.org/#eNqVUMtOAzEM/BUrl15ooiJxiUIl4Bc45rJt07JVk1ixl4dW++84mwV6QEJcorGjGc/MqB4Q9esQlFWO9qVHBgo84NYngD5iLgyPA3NOcCw5glfatLmyvPLJmcYThgwcIl46DjPf7RrTEn9cwr1XI2B3OPTpZGG1ucV32NzV5wutYPJq+xyInWnUJrMY+J+MW3yKhDPfttSNaqnWsUN9ppwk+Viv+OWDvLIwb+puDmkFvDAjWWPouK/Jz6RzORlBugyJ+xh0oLjelfxGoYhwrQbESJrk5E9jv/T8d4HbpYCnLA5TSNf1XGebPgF2iZ82
<details>
<summary>英文:</summary>
The way you bind style property is correct, and it should work: [see the example here][1]
What is not working in your example is that your Button component has specified **another :style binding internally**. You cannot have the same property provided both internally and externally. Vue has to pick one and Vue picks the one defined by your component.
[1]: https://sfc.vuejs.org/#eNqVUMtOAzEM/BUrl15ooiJxiUIl4Bc45rJt07JVk1ixl4dW++84mwV6QEJcorGjGc/MqB4Q9esQlFWO9qVHBgo84NYngD5iLgyPA3NOcCw5glfatLmyvPLJmcYThgwcIl46DjPf7RrTEn9cwr1XI2B3OPTpZGG1ucV32NzV5wutYPJq+xyInWnUJrMY+J+MW3yKhDPfttSNaqnWsUN9ppwk+Viv+OWDvLIwb+puDmkFvDAjWWPouK/Jz6RzORlBugyJ+xh0oLjelfxGoYhwrQbESJrk5E9jv/T8d4HbpYCnLA5TSNf1XGebPgF2iZ82
</details>
# 答案4
**得分**: 1
1、使用className
<Button
@on-click="currentStep = 2"
:text= "Next"
class="btnClass"
/>
::v-deep{
// 或其他局部样式
.btnClass{
padding: 12px 15px 12px 15px
}
}
2、props styleStr
按钮使用
<Button
@on-click="currentStep = 2"
:text= "Next"
styleStr="padding: '12px 15px 12px 15px'; " // 或其他样式
/>
按钮
<template>
{{ this.color }}
<button
@click="onClick"
:disabled="disabled"
class="begin-btn"
:style="backgroundColor + textColor + styleStr"
>{{ text }}
</button>
</template>
<script>
export default {
name: 'ButtonComponent',
props: {
text: String,
disabled: Boolean,
width: String,
bgColor: String,
txtColor: String,
styleStr:String,
},
data() {
return {}
},
computed: {
backgroundColor(){
let bgColor = this.bgColor ? this.bgColor : '#d64ba1'
return "background: " + bgColor + ';';
},
textColor(){
let textColor = this.txtColor ? this.txtColor : '#ffffff'
return "color: " + textColor + ';';
}
},
methods: {
onClick() {
this.$emit("onClick");
},
},
}
</script>
<style scoped>
.begin-btn {
justify-content: center;
align-items: center;
border: 0px;
width: 100%;
height: 44px;
background: #d64ba1;
border-radius: 24px;
font-style: normal;
font-weight: 700;
font-size: 16px;
color: #ffffff;
}
</style>
3、props style对象
<Button
@on-click="currentStep = 2"
:text= "Next"
:styleObj="{padding: '12px 15px 12px 15px'}"
/>
按钮
<template>
{{ this.color }}
<button
@click="onClick"
:disabled="disabled"
class="begin-btn"
:style="backgroundColor + textColor +styleObj"
>{{ text }}
</button>
</template>
<script>
export default {
name: 'ButtonComponent',
props: {
text: String,
disabled: Boolean,
width: String,
bgColor: String,
txtColor: String,
styleObj:String,
},
data() {
return {}
},
computed: {
backgroundColor(){
let bgColor = this.bgColor ? this.bgColor : '#d64ba1'
return "background: " + bgColor + ';';
},
textColor(){
let textColor = this.txtColor ? this.txtColor : '#ffffff'
return "color: " + textColor + ';';
}
},
methods: {
onClick() {
this.$emit("onClick");
},
},
}
</script>
<style scoped>
.begin-btn {
justify-content: center;
align-items: center;
border: 0px;
width: 100%;
height: 44px;
background: #d64ba1;
border-radius: 24px;
font-style: normal;
font-weight: 700;
font-size: 16px;
color: #ffffff;
}
</style>
<details>
<summary>英文:</summary>
1、 use className
<Button
@on-click="currentStep = 2"
:text= "Next"
class="btnClass"
/>
::v-deep{
// or other scoped lint
.btnClass{
padding: 12px 15px 12px 15px
}
}
2、 props styleStr
button use
<Button
@on-click="currentStep = 2"
:text= "Next"
styleStr="padding: '12px 15px 12px 15px'; " // or other your style
/>
button
<template>
{{ this.color }}
<button
@click="onClick"
:disabled="disabled"
class="begin-btn"
:style="backgroundColor + textColor + styleStr"
>{{ text }}
</button>
</template>
<script>
export default {
name: 'ButtonComponent',
props: {
text: String,
disabled: Boolean,
width: String,
bgColor: String,
txtColor: String,
styleStr:String,
},
data() {
return {}
},
computed: {
backgroundColor(){
let bgColor = this.bgColor ? this.bgColor : '#d64ba1'
return "background: " + bgColor + ';';
},
textColor(){
let textColor = this.txtColor ? this.txtColor : '#ffffff'
return "color: " + textColor + ';';
}
},
methods: {
onClick() {
this.$emit("onClick");
},
},
}
</script>
<style scoped>
.begin-btn {
justify-content: center;
align-items: center;
border: 0px;
width: 100%;
height: 44px;
background: #d64ba1;
border-radius: 24px;
font-style: normal;
font-weight: 700;
font-size: 16px;
color: #ffffff;
}
</style>
3、 props style object
<Button
@on-click="currentStep = 2"
:text= "Next"
:styleObj="{padding: '12px 15px 12px 15px'}"
/>
button
<template>
{{ this.color }}
<button
@click="onClick"
:disabled="disabled"
class="begin-btn"
:style="backgroundColor + textColor +styleObj"
>{{ text }}
</button>
</template>
<script>
export default {
name: 'ButtonComponent',
props: {
text: String,
disabled: Boolean,
width: String,
bgColor: String,
txtColor: String,
styleObj:String,
},
data() {
return {}
},
computed: {
backgroundColor(){
let bgColor = this.bgColor ? this.bgColor : '#d64ba1'
return "background: " + bgColor + ';';
},
textColor(){
let textColor = this.txtColor ? this.txtColor : '#ffffff'
return "color: " + textColor + ';';
}
},
methods: {
onClick() {
this.$emit("onClick");
},
},
}
</script>
<style scoped>
.begin-btn {
justify-content: center;
align-items: center;
border: 0px;
width: 100%;
height: 44px;
background: #d64ba1;
border-radius: 24px;
font-style: normal;
font-weight: 700;
font-size: 16px;
color: #ffffff;
}
</style>
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论