<template> <div class="wrapper" > <div class="bg_div"> <image :src="bgUrl" class="bg_img" ></image> </div> <div class="logo_div"> <image :src="headUrl" class="logo_img" ></image> </div> <div class="input_div" style="margin-top:100px "> <div class="input_border"> <image :src="personUrl" class="input_small_logo" ></image> <input type="text" placeholder="账 号" class="pwd" @change="onchange" @input="oninput" /> </div> </div> <div class="input_div" style="margin-top: 30px"> <div class="input_border"> <image :src="lockUrl" class="input_small_logo" ></image> <!--<input type="password" placeholder="登录密码" class="pwd" @change="onchange" @input="oninput" />--> <!--<input :type="inputType ?'text':'password'" placeholder="登录密码" class="pwd" @change="onchange" @input="oninput" />--> <input :type=inputType placeholder="登录密码" class="pwd" @change="onchange" @input="oninput2" :value=pwd /> <image :src="eyeUrl" style="width: 40px;height: 40px;" @click="changePwd()"></image> </div> </div> <div class="input_div"> <div class="login_btn" @click="signin()"> <text class="login_font">{{sign}}</text> </div> </div> </div> </template> <style> .wrapper { align-items: center; } .bg_div { position: absolute; width: 750px; height: 1250px; } .bg_img{ width: 750px; height: 1250px; } .logo_img { width: 100px; height: 100px; } .logo_div{ width: 750px; height: 300px; flex-direction: row; justify-content: center; align-items: flex-end; } .input_div{ width: 750px; flex-direction: row; justify-content: center; } .input_border{ width: 560px; height: 80px; border-width: 1px; border-color: #aaa; border-radius: 40px; flex-direction: row; align-items: center; } .input_small_logo{ width: 40px; height: 40px; left: 20px; } .pwd{ width: 460px; height: 80px; align-items: center; text-align: center; background-color: transparent; color: #ccc; } .eye_img{ position: absolute; right: 10px; width: 40px; height: 40px; } .login_btn{ height:80px ; width: 560px; font-size:30px ; background-color: #34aacd; border-radius: 40px; align-items: center; justify-content: center; flex-direction: row; margin-top: 60px; } .login_font{ color: white; } </style> <script> var modal = weex.requireModule('modal'); var navigator = weex.requireModule('navigator'); var popModule = weex.requireModule('popWindow'); export default { data: { personUrl: 'dist/images/more.png', headUrl:'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png', bgUrl: '', lockUrl:'dist/images/more.png', eyeUrl:'dist/images/more.png', changepwd: '修改密码', sign:'登 录 ', // inputType:false inputType:"text", pwd:"" }, methods: { changePwd: function () { // this.inputType = !this.inputType; // console.log("inputType2",this.inputType); if(this.inputType == 'password'){ console.log("inputType1",this.inputType); this.inputType = "text"; console.log("inputType2",this.inputType); // this.eyeUrl = ''; } else{ console.log("inputType3",this.inputType); this.inputType = "password"; console.log("inputType4",this.inputType); } }, signin: function (e) { console.log("popwindow") popModule.confirmPop("请输入用户名密码"); }, eyeclick: function (e) { navigator.push({ url: 'dist/content2.js', animated: "true" }, event => { modal.toast({ message: 'callback: ' + event }) }) }, back: function (e) { navigator.push({ url: 'dist/content2.js', animated: "true" }, event => { modal.toast({ message: 'callback: ' + event }) }) }, ready: function () { var self = this; setTimeout(function () { self.autofocus = true; }, 1000); }, onchange: function (event) { this.txtChange = event.value; // console.log('onchange', event.value); // popModule.confirmPop(event.value); // event.valueOf('sssss') }, onreturn: function (event) { this.txtReturnType = event.returnKeyType; console.log('onreturn', event.type); }, oninput: function (event) { this.txtInput = event.value; console.log('oninput', event.value); }, oninput2: function (event) { this.txtInput = event.value; pwd = this.txtInput; console.log('oninput2', event.value); }, focus: function () { this.$refs['input1'].focus(); }, blur: function () { this.$refs['input1'].blur(); }, setRange: function() { console.log(this.$refs["inputselection"]); this.$refs["inputselection"].setSelectionRange(2, 6); }, getSelectionRange: function() { console.log(this.$refs["inputselection"]); var self = this; this.$refs["inputselection"].getSelectionRange(function(e) { self.txtSelection = e.selectionStart +'-' + e.selectionEnd; }); } } } </script>