vue2.0实现银行卡类型种类的选择
功能效果:vue2.0实现银行卡类型种类的选择
![5640239-701d0fc08953b38d.png](https://upload-images.jianshu.io/upload_images/5640239-701d0fc08953b38d.png)
图片.png
参考代码如下:
<template>
<div class="app">
<header>
</header>
<div class="details">
<div @click="memberRank">
<span>卡类型</span>
<span>{{name}}</span>
<i class="el-icon-arrow-right"></i>
</div>
</div>
<mt-actionsheet :actions="actions2" v-model="sheetVisible2" cancel-text="">
</mt-actionsheet>
</div>
</template>
<script>
export default {
data() {
return {
actions2: [], //底部弹出提示框
sheetVisible2: false,//透明遮罩背景
name: "普卡"//默认数值
};
},
computed: {
},
components: {
},
methods: {
// 点击显示会员等级
memberRank() {
this.sheetVisible2 = true;
},
//赋值到框里
commonCard() {
this.name = "普卡";
},
silverCard() {
this.name = "银卡";
},
goldCard() {
this.name = "金卡";
},
},
mounted() {//移动但底部弹出选项
this.actions2 = [
{
name: "普卡",
method: this.commonCard
},
{
name: "银卡",
method: this.silverCard
},
{
name: "金卡",
method: this.goldCard
}
];
}
};
</script>
<style scoped>
header {
height: 1.5rem;
width: 100%;
background-image: linear-gradient(-134deg, #f62241 0%, #f62241 100%);
position: relative;
}
.details {
background: white;
margin-top: 0.3rem;
height: auto;
}
.details div span:nth-child(2):not(.phoneNum) {
position: absolute;
left: 4rem;
}
.details div {
clear: both;
border-bottom: 0.025rem solid rgba(0, 0, 0, 0.02);
height: 1.5rem;
line-height: 1.5rem;
font-size: 0.48rem;
color: rgba(0, 0, 0, 0.7);
margin-left: 0.5rem;
}
</style>
原文作者:祈澈姑娘
技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。