上海网站建设开发,Wordpress教程Windows,网站建设美工招聘,网站推广费用大概需要多少钱实现需求 每个页面需要根据用户是否登录决定是否显示登陆组件,登录组件半屏底部显示,登录组件之外区域置灰,功能按钮点击之后引导提示登录.页面效果如下:
实现思路说明 设置登录组件背景颜色为灰色,将页面分成登录区域(底部)和非登陆区域(上面灰色显示部分), 置灰区域添加…实现需求 每个页面需要根据用户是否登录决定是否显示登陆组件,登录组件半屏底部显示,登录组件之外区域置灰,功能按钮点击之后引导提示登录.页面效果如下:
实现思路说明 设置登录组件背景颜色为灰色,将页面分成登录区域(底部)和非登陆区域(上面灰色显示部分), 置灰区域添加点击事件提示登录.最开始想的方式是点击任意置灰区域提示登录,但是发现点击事件不生效,所以换了一种实现方式,将登录提示处理放到父页面的功能按钮点击事件中,父组件引用子组件,根据登录组件是否显示调用子组件中提示登录的逻辑.登录组件不显示,父组件点击功能按钮跳转到对应页面,登录组件显示,点击功能按钮提示登录.
实现关键代码 登录组件:
templateview classloginOut v-ifshowLoginview classtop clickneedsLogin()/viewview classlogin_class !-- 登录描述部分 --view classcontent_class v-ifshowWxAuthorWindow欢迎进入AAA/view!-- 微信一键登录 --view classquick_login_class v-ifshowWxAuthorWindow taplogin()button classlogin_buttom_classtext一键登录/text/button/view!-- 服务协议 --view classservice_class radio :checkedagreeServer clickchangeAgreeServer()/view classdesc我已阅读并同意/viewview classlinkview classlink_class tapgotoWebview()用户协议/view/view/view/view/view
/templatescriptexport default {name: login,data() {return {// 是否显示登录窗口showLogin: true}},created() {// 获取登录用户信息let token uni.getStorageSync(token)if (token) {this.showLogin falsereturn} else {this.showLogin true}},methods: {needsLogin(){uni.showToast({title:请先登录!,duration:1500,icon:none});}}}
/scriptstyle langscssmixin height-width-setting($height, $width) {height:$height;width: $width;}.loginOut{include height-width-setting(100%,100%); background-color: rgb(178,178,178);.top{include height-width-setting(55%,100%); }.login_class {include height-width-setting(45%,100%); position: fixed;bottom: 0;right: 0;display: flex;flex-direction: column;background-color: #e4e7ea;align-items: center;align-content: flex-end;}}
/style父组件(首页):
templateview classoutview classnotice v-ifnoticeInfo.lengtht-notice-bar :listnoticeInfo/t-notice-bar/viewview classcenterview classc_inview classc_title工作/viewview classc_line_1 clickgoToPdfToWordimage srchttps://oss.abc.top/lewan/img/cai.png modeaspectFill/imagetext中大奖/text/view/view!-- 登录 --login reflogin/login/view
/templatescriptimport tNoticeBar from ../../components/t-notice-bar/t-notice-bar.vue;import login from ../../components/login/login.vue;export default {components:{tNoticeBar,login},data() {return {noticeInfo:[我是滚动条]}},onLoad() {},methods: {goToPdfToWord(){if(this.$refs.login.showLogin){this.$refs.login.needsLogin()return}uni.switchTab({/subPages/a/a,success: function (res) {console.log(res)},fail: function (e) {console.log(e)}})}}}
/script以上是实现过程,希望对有同样需求的同学有所帮助!
