在前端开发过程中，有很多时候会公用组件或者模块，在复用的时候需要根据不同的使用场景进行不同的操作处理，尤其是一些提示类的界面模块，就需要根据type类型来进行区分处理，比如组件label的提示文字，根据不同的使用地方进行不同的文字展示，那么这就需要声明一个变量根据不同的使用场景进行不同的文字提示。那么本篇博文就来分享一下这些提示类的组件进行区分处理的方法，仅供学习参考。
案例一：给label的赋值设置成变量操作的方法
1、声明一个变量，在data里面进行默认值赋值操作，然后在created里面根据使用的不同地方进行不同的文字赋值操作；
2、在label赋值的地方进行赋值操作（注意：在label前面加一个冒号，这就进行了可变操作）；
①
<a-form-item :label= optionText :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
</a-form-item>
②
data() {
return {
optionText: "大屏",
};
},
③
created() {
if(this.type ==="horn") {
this.optionText = "广播"
}else {
this.optionText = "大屏"
}
},
案例二：给title的赋值设置成变量操作的方法
1、声明一个变量，在data里面进行默认值赋值操作，然后在created里面根据使用的不同地方进行不同的文字赋值操作；
2、在title赋值的地方进行赋值操作（注意：在label前面加一个冒号，这就进行了可变操作）；
①
<a-modal :title= tipText :centered="true" :visible="visible" @cancel="cancelGroupAddScreen" okText='确定'
cancelText='取消'>
</a-modal>
②
data() {
return {
tipText: "屏幕信息",
};
},
③
created() {
if(this.type ==="horn") {
this.tipText = "广播信息"
}else {
this.tipText = "屏幕信息"
}
},
基本上类似的控件文字展示操作都可以参照上面的思路步骤来操作即可，大同小异，请灵活运用。
具体操作如下图所示：
最终效果如下所示：
以上就是本章全部内容，欢迎关注三掌柜的微信公众号“iOS开发by三掌柜”，三掌柜的新浪微博“三掌柜666”，欢迎关注！
