如何使用带有JS switch语句的动态顺风类，并在Vue中正确传递它们

Question

我是Vue JS的初学者，我正在尝试创建一个为订单状态分配相应颜色的函数。我想使用switch语句来实现这一点，它将获取订单状态的值并将其传递给getStatusColor函数((，如下所示：

const getStatusColour = (orderStatus) => {
let statusColour = "";
switch (orderStatus) {
case "new": 
statusColour = "bg-green-100 text-green-900";
break;
case "preparing": 
statusColour =  "bg-yellow-400 text-yellow-900";
break;
case "ready":
statusColour = "bg-blue-200 text-blue-800";
break;
case "delivered":
statusColour = "bg-green-300 text-green-800";
break;
case "failed": 
statusColour = "bg-red-400 text-red-900";
break;
default:
statusColour = "bg-gray-100 text-gray-800"
}
return statusColour;
}

然后在Index.vue文件中，我有export default { getStatusColour }，我想这应该是一个错误。

然后在模板中，我这样称呼它：

<span :class="getStatusColour(order.status)">{{ order.status }}</span>

但我一直收到Uncaught (in promise) TypeError: _ctx.getStatusColour is not a function错误。我会感谢这里的任何帮助。

Answer 1

如MDN文档中所示：https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export#using_named_exports

---

这是整个github代码库。

utils/test.js

const getStatusColour = (orderStatus) => {
let statusColour = ''
switch (orderStatus) {
case 'new':
statusColour = 'bg-green-100 text-green-900'
break
case 'preparing':
statusColour = 'bg-yellow-400 text-yellow-900'
break
case 'ready':
statusColour = 'bg-blue-200 text-blue-800'
break
case 'delivered':
statusColour = 'bg-green-300 text-green-800'
break
case 'failed':
statusColour = 'bg-red-400 text-red-900'
break
default:
statusColour = 'bg-gray-100 text-gray-800'
}
return statusColour
}
export { getStatusColour }

App.vue

<template>
<div>
<div :class="getStatusColour(order.status)">
This div do have the correct: `bg-green-100 text-green-900` on it
</div>
</div>
</template>
<script>
import { getStatusColour } from './utils/test'
export default {
data() {
return {
order: {
status: 'new',
},
}
},
methods: {
getStatusColour,
},
}
</script>

这里有一个github repo，显示您的代码到目前为止运行良好：https://github.com/kissu/so-compute-exported-function

---

我个人如何处理这种流程

callToAction.vue

<button
class="flex items-center w-auto p-4 text-center ..."
:class="[
callToAction.types[color][variant],
{ 'opacity-50 cursor-not-allowed shadow-none': disabled },
]"
>
Nice flexible button
</button>
<script>
export default {
props: {
color: {
type: String,
default: 'primary',
},
variant: {
type: String,
default: 'enabled',
},
disabled: {
type: Boolean,
default: false,
},
},
data() {
return {
callToAction: {
types: {
primary: {
enabled: 'disabled:bg-primary-500 hover:bg-primary-700 bg-primary-500 text-primary-500',
outlined: 'hover:bg-primary-a12 text-primary-500',
reversed: 'text-primary-500',
},
secondary: {
enabled: 'disabled:bg-secondary-500 hover:bg-secondary-700 bg-secondary-500 text-secondary-500',
outlined: 'hover:bg-secondary-a12 text-secondary-500',
reversed: 'text-secondary-500',
},
tertiary: {
enabled: 'disabled:bg-tertiary-500 hover:bg-tertiary-700 bg-tertiary-500 text-tertiary-500',
outlined: 'hover:bg-tertiary-a12 text-tertiary-500',
reversed: 'text-tertiary-500',
},
bluegray: {
enabled: 'disabled:bg-bluegray-500 hover:bg-bluegray-700 bg-bluegray-500 text-bluegray-500',
outlined: 'hover:bg-bluegray-a12 text-bluegray-500',
reversed: 'text-bluegray-500',
},
error: {
enabled: 'disabled:bg-error-500 hover:bg-error-700 bg-error-500 text-error-500',
outlined: 'hover:bg-error-a12 text-error-500',
reversed: 'text-error-500',
},
},
},
}
}
</script>

然后，在其他页面/组件中使用以下内容调用它：

<call-to-action color="tertiary" variant="reversed"></call-to-action>

或者让默认值用color="primary"、variant="enabled"等来完成它的工作…

附言：在道具中添加验证器可能会很好，对其他参与项目的开发人员来说会更友好，他们会计算出所有可能传递的值。

Answer 2

kissu的答案应该可以解决您的问题，但我建议使用计算属性。这样，您可以编写更少的代码，还可以创建一个默认状态，在color或variant的输入无效时进行处理。

<button
class="flex items-center w-auto p-4 text-center ..."
:class="[
class_type,
{ 'opacity-50 cursor-not-allowed shadow-none': disabled },
]"
>
<script>
export default {
props: {
color: {
type: String,
default: 'primary',
},
variant: {
type: String,
default: 'enabled',
},
disabled: {
type: Boolean,
default: false,
},
},
computed: {
class_type: function(){
switch(this.variant)
case "enabled": 
return `disabled:bg-${this.color}-500 hover:bg-${this.color}-700 bg-${this.color}-500 text-${this.color}-500`
case "outlined":
return `hover:bg-${this.color}-a12 text-${this.color}-500`
case "reversed": 
return `text-${this.color}-500`
default: 
console.error("you didn't put a proper variant to this component")
}
}
</script>