中网站建设,网站的用户体验主要有那些类型,凤翔网站开发,扬州建设公司网站效果#xff1a; 一、组件封装
1、在项目根目录下创建components文件夹#xff0c;自定义组件名称#xff0c;我定义的是xc-button 2、封装组件代码
templateview classhandle-btnview :classhandleIdCode 1 ? select : unSelec…效果 一、组件封装
1、在项目根目录下创建components文件夹自定义组件名称我定义的是xc-button 2、封装组件代码
templateview classhandle-btnview :classhandleIdCode 1 ? select : unSelect clickagreeBtn{{agreeLabel}}/viewview :classhandleIdCode 0 ? select : unSelect clickunAgreeBtn{{unAgreeLabel}}/view/view
/templatescriptexport default {name:xc-button,props:{handleId:{type: String,default:,},//lable值agreeLabel: {type: String,default:,},//lable值unAgreeLabel: {type: String,default:,}},data() {return {handleIdCode:};},methods:{agreeBtn(){this.handleIdCode 1,this.$emit(agreeBtn)},unAgreeBtn(){this.handleIdCode 0,this.$emit(unAgreeBtn)},},onLoad() {this.handleIdCode this.handleId}}
/scriptstyle langscss
// 按钮样式
.handle-btn{display: flex;
}
.select {position: relative;box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 16rpx 32rpx;width: 120rpx;height: 56rpx;border-radius: 2px;margin: 0 10rpx;background-color: #E8F3FF;color: #5999fc;
}
.select:before {content: ;position: absolute;right: 0;top: 0;border: 24rpx solid #5999fc;border-top-color: transparent;border-left-color: transparent;transform: rotate(-90deg);}.select:after {content: ;width: 2px;height: 5px;position: absolute;right: 3px;top: 5px;border: 1px solid #fff;border-top-color: transparent;border-left-color: transparent;transform: rotate(45deg);}
.unSelect{box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 16rpx 32rpx;width: 120rpx;height: 56rpx;background: #F8F8F8;border: 0.5px solid #F8F8F8;border-radius: 2px;margin: 0 10rpx;}
/style
二、在页面中使用组件
templateviewxc-button agreeLabel是 unAgreeLabel否 handleId1 agreeBtnagreeBtn unAgreeBtnunAgreeBtn/xc-button/view
/templatescriptexport default {data() {return {};},methods: {agreeBtn() {console.log(是被触发了)},unAgreeBtn() {console.log(否被触发了)},}}
/scriptstyle langscss/style
