屏幕快照 2018-09-09 09.13.17.png
屏幕快照 2018-09-09 09.14.20.png
使用mobiscroll是个很好用的jquery日期插件，它可以实现在移动端滚动选择日期。
在vue中如何使用插件，在mounted中调用插件
<a class="db pr con bgw">
出生日期
<input type="text" name="USER_AGE" id="USER_AGE" class="r set-input" placeholder="请填写你的出生日期" v-model="birthday"/>
<svg class="i-right">
<use xlink:href="#icon-right"/>
</svg>
</a>
data() {
return {
birthday: ''
}
},
mounted() {
require('./jquery.min');
require('./mobiscroll.core-2.5.2');
require('./mobiscroll.core-2.5.2-zh');
require('./mobiscroll.datetime-2.5.1');
require('./mobiscroll.datetime-2.5.1-zh');
var currYear = (new Date()).getFullYear();
var opt = {};
opt.date = {preset: 'date'};
opt.datetime = {preset: 'datetime'};
opt.time = {preset: 'time'};
opt.default = {
theme: 'android-ics light', //皮肤样式
display: 'modal', //显示方式
mode: 'scroller', //日期选择模式
dateFormat: 'yyyy-mm-dd',
lang: 'zh',
showNow: true,
nowText: "今天",
startYear: currYear - 80, //开始年份
endYear: currYear, //结束年份
onClose: function (textVale, inst) { //插件效果退出时执行 inst:表示点击的状态反馈：set/cancel
textVale=new Date(textVale);
textVale=textVale.getTime()/1000;
this.birthday= textVale;
$.ajax({
type: "GET",
url: "api/set",
dataType:"json",
data:{"birthday":this.birthday},
success:function (data) {
if (data.code == 200) {
this.birthday = data.data.birthday;
}
}
})
}
};
$("#USER_AGE").mobiscroll($.extend(opt['date'], opt['default']));
}
屏幕快照 2018-09-09 09.39.38.png
全部代码
<template>
<div class="bgm page">
<dl class="space me-dl">
<dd class="me-dd" style="margin-top: 0">
<a class="db pr con bgw">
头像
<span class="r set-head" @click.stop="uploadHeadImg">
<img class="set-head-icon" :src="avatar" style="width: 40px;height: 40px;">
</span>
<input type="file" accept="image/*" @change="handleFile" class="hiddenInput dn"/>
</a>
<a class="db pr con bgw">
昵称
<input class="r set-input" type="text" v-model="nickname" placeholder="请输入姓名" maxlength="50"/>
<svg class="i-right">
<use xlink:href="#icon-right"/>
</svg>
</a>
<a class="db pr con bgw">
手机号码
<span class="r cc" style="padding-right: 1.4em">{{setData.mobile}}</span>
<svg class="i-right">
<use xlink:href="#icon-right"/>
</svg>
</a>
<a class="db pr con bgw" @click="getPopRadio">
性别
<popup-radios :value="this.radioShow" @getRadio="getGender"></popup-radios>
<span class="r cc" style="padding-right: 1.4em" v-if="this.gender">{{this.gender}}</span>
<span class="r cc" style="padding-right: 1.4em" v-else>{{setData.sex}}</span>
<svg class="i-right">
<use xlink:href="#icon-right"/>
</svg>
</a>
<a class="db pr con bgw">
出生日期
<input type="text" name="USER_AGE" id="USER_AGE" class="r set-input" placeholder="请填写你的出生日期" v-model="birthday"/>
<svg class="i-right">
<use xlink:href="#icon-right"/>
</svg>
</a>
</dd>
<dd class="me-dd">
<a class="db pr con bgw" href="javascript:;" @click.prevent="jump" data-href="/member/setPassword">
密码设置
<svg class="i-right">
<use xlink:href="#icon-right"/>
</svg>
</a>
<a class="db pr con bgw" href="javascript:;" @click.prevent="doLogout" data-href="/member/setPassword">
退出登录
</a>
</dd>
</dl>
</div>
</template>
<script>
import popupRadios from '../../components/popup-radios.vue'
import user from "../../components/login/user";
export default {
data() {
return {
checkLogin: true,
setData: {},
radioShow: false,
gender: '',
nickname: '',
avatar: '',
birthday: ''
}
},
computed: {},
components: {
popupRadios
},
created() {
this.getSet();
},
watch: {
gender() {
this.$http.get('api/set', {params: {"sex": this.gender}}).then(res => {
let j = res.data;
if (j.code == 200) {
this.gender = j.data.sex;
}
})
},
nickname() {
this.$http.get('api/set', {params: {"nickname": this.nickname}}).then(res => {
let j = res.data;
if (j.code == 200) {
this.nickname = j.data.nickname;
}
})
},
avatar() {
this.$http.get('api/set', {params: {"avatar": this.avatar}}).then(res => {
let j = res.data;
if (j.code == 200) {
this.avatar = j.data.avatar;
}
})
}
},
mounted() {
require('./jquery.min');
require('./mobiscroll.core-2.5.2');
require('./mobiscroll.core-2.5.2-zh');
require('./mobiscroll.datetime-2.5.1');
require('./mobiscroll.datetime-2.5.1-zh');
var currYear = (new Date()).getFullYear();
var opt = {};
opt.date = {preset: 'date'};
opt.datetime = {preset: 'datetime'};
opt.time = {preset: 'time'};
opt.default = {
theme: 'android-ics light', //皮肤样式
display: 'modal', //显示方式
mode: 'scroller', //日期选择模式
dateFormat: 'yyyy-mm-dd',
lang: 'zh',
showNow: true,
nowText: "今天",
startYear: currYear - 80, //开始年份
endYear: currYear, //结束年份
onClose: function (textVale, inst) { //插件效果退出时执行 inst:表示点击的状态反馈：set/cancel
textVale=new Date(textVale);
textVale=textVale.getTime()/1000;
this.birthday= textVale;
$.ajax({
type: "GET",
url: "api/set",
dataType:"json",
data:{"birthday":this.birthday},
success:function (data) {
if (data.code == 200) {
this.birthday = data.data.birthday;
}
}
})
}
};
$("#USER_AGE").mobiscroll($.extend(opt['date'], opt['default']));
},
methods: {
doLogout(){
user.logout(()=>{
this.$tip("已退出登录");
this.$router.push('/login');
});
},
jump(e) {
e.preventDefault();
if (this.checkLogin == true) {
this.$router.push(e.currentTarget.getAttribute("data-href"));
}
},
getSet() {
this.$http.get('api/getset').then(res => {
let j = res.data;
if (j.code == 200) {
this.setData = j.data;
this.nickname = j.data.nickname;
this.avatar = j.data.avatar;
this.birthday = Date.format("yyyy-MM-dd", j.data.birthday*1000)
}
})
},
getPopRadio() {
this.radioShow = !this.radioShow;
},
getGender(msg) {
this.gender = msg;
},
// 打开图片上传
uploadHeadImg: function () {
this.$el.querySelector('.hiddenInput').click()
},
// 将头像显示
handleFile: function (e) {
let $target = e.target || e.srcElement;
let file = $target.files[0];
let param = new FormData(); //创建form对象
param.append('file', file, file.name);//通过append向form对象添加数据
param.append('chunk', '0');//添加form表单中其他数据
let config = {
headers: {'Content-Type': 'multipart/form-data'}
}; //添加请求头
this.$http.post("api/upload", param, config).then(res => {
var j = res.data;
if (j.code === 200) {
this.avatar = j.data[0];
this.$tip("头像上传成功！");
}
})
}
}
}
</script>
<style>
.set-head {
position: relative;
top: .7em;
}
.set-head-icon {
width: 2em;
border-radius: 50%;
}
.me-dl {
margin-top: 1px;
font-size: .448rem;
}
.me-dd {
margin: 10px 0;
}
.me-dd > .db {
margin: 1px 0;
line-height: 4;
}
.me-dd > .db > .i-right {
position: absolute;
width: .8em;
height: .8em;
right: 3%;
top: 50%;
margin-top: -0.4em;
}
.set-input {
width: calc(100% - 6em);
font-size: 1em;
text-align: right;
margin: 0;
margin-top: 1.4em;
padding-right: 1.4em;
border: 0;
outline: none;
}
/* Datewheel overlay */
.dw {
position: absolute;
top: 5%;
left: 0;
z-index: 1001;
color: #000;
font-family: arial, verdana, sans-serif;
font-size: 12px;
text-shadow: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-ms-touch-action: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.dwi {
position: static;
margin: 5px;
display: inline-block;
}
.dwwr {
min-width: 170px;
zoom: 1;
padding: 0 10px;
text-align: center;
}
/* Datewheel overlay background */
.dw-persp, .dwo {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1001;
}
.dwo {
background: #000;
opacity: .7;
filter: Alpha(Opacity=70);
}
/* Bubble positionings */
.dw-bubble .dw {
margin: 20px 0;
}
.dw-bubble .dw-arrw {
position: absolute;
left: 0;
width: 100%;
}
.dw-bubble-top .dw-arrw {
bottom: -36px;
}
.dw-bubble-bottom .dw-arrw {
top: -36px;
}
.dw-bubble .dw-arrw-i {
margin: 0 30px;
position: relative;
height: 36px;
}
.dw-bubble .dw-arr {
display: block;
}
.dw-arr {
display: none;
position: absolute;
left: 0;
width: 0;
height: 0;
border-width: 18px 18px;
border-style: solid;
margin-left: -18px;
}
.dw-bubble-bottom .dw-arr {
top: 0;
border-color: transparent transparent #fff transparent;
}
.dw-bubble-top .dw-arr {
bottom: 0;
border-color: #fff transparent transparent transparent;
}
/* Datewheel wheel container wrapper */
.dwc {
float: none;
margin: 0 2px 5px 2px;
padding-top: 30px;
display: inline-block;
}
.dwcc {
clear: both;
}
/* Datewheel label */
.dwl {
text-align: center;
line-height: 30px;
height: 30px;
white-space: nowrap;
position: absolute;
top: -30px;
width: 100%;
}
/* Datewheel value */
.dwv {
padding: 10px 0;
border-bottom: 1px solid #000;
}
/* Datewheel wheel container */
.dwrc {
-webkit-border-radius: 3px;
border-radius: 3px;
}
.dwwc {
margin: 0;
padding: 0 2px;
position: relative;
background: #000;
zoom: 1;
}
/* Datewheel wheels */
.dwwl {
margin: 4px 2px;
position: relative;
z-index: 5;
}
.dww {
margin: 0 2px;
overflow: hidden;
position: relative;
}
.dwsc .dwwl {
background: #888;
background: linear-gradient(#000 0%, #333 35%, #888 50%, #333 65%, #000 100%);
background: -webkit-gradient(linear, left bottom, left top, from(#000), color-stop(0.35, #333), color-stop(0.50, #888), color-stop(0.65, #333), to(#000));
background: -moz-linear-gradient(#000 0%, #333 35%, #888 50%, #333 65%, #000 100%);
background: -o-linear-gradient(#000 0%, #333 35%, #888 50%, #333 65%, #000 100%);
}
.dwsc .dww {
color: #fff;
background: #444;
background: linear-gradient(#000 0%, #444 45%, #444 55%, #000 100%);
background: -webkit-gradient(linear, left bottom, left top, from(#000), color-stop(0.45, #444), color-stop(0.55, #444), to(#000));
background: -moz-linear-gradient(#000 0%, #444 45%, #444 55%, #000 100%);
background: -o-linear-gradient(#000 0%, #444 45%, #444 55%, #000 100%);
}
.dw-bf {
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
.dw-ul {
position: relative;
z-index: 2;
}
.dw-li {
padding: 0 5px;
display: block;
text-align: center;
line-height: 40px;
font-size: 26px;
white-space: nowrap;
text-shadow: 0 1px 1px #000;
vertical-align: bottom;
opacity: .3;
filter: Alpha(Opacity=30);
}
/* Higlighted */
.dw-li.dw-hl {
background: #fff;
background: rgba(255, 255, 255, .3);
}
/* Valid entry */
.dw-li.dw-v {
opacity: 1;
filter: Alpha(Opacity=100);
}
/* Hidden entry */
.dw-li.dw-h {
visibility: hidden;
}
.dw-i {
position: relative;
height: 100%;
}
/* Wheel +/- buttons */
.dwwb {
position: absolute;
z-index: 4;
left: 0;
cursor: pointer;
width: 100%;
height: 40px;
text-align: center;
opacity: 1;
transition: opacity .2s linear;
-webkit-transition: opacity .2s linear;
}
.dwa .dwwb {
opacity: 0;
}
.dwwbp {
top: 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
font-size: 40px;
}
.dwwbm {
bottom: 0;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
font-size: 32px;
font-weight: bold;
}
.dwpm .dwwc {
background: transparent;
}
.dwpm .dww {
margin: 0;
}
.dwpm .dw-li {
text-shadow: none;
}
.dwpm .dwwol {
display: none;
}
/* Datewheel wheel overlay */
.dwwo {
position: absolute;
z-index: 3;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(#000 0%, rgba(44, 44, 44, 0) 52%, rgba(44, 44, 44, 0) 48%, #000 100%);
background: -webkit-gradient(linear, left bottom, left top, from(#000), color-stop(0.52, rgba(44, 44, 44, 0)), color-stop(0.48, rgba(44, 44, 44, 0)), to(#000));
background: -moz-linear-gradient(#000 0%, rgba(44, 44, 44, 0) 52%, rgba(44, 44, 44, 0) 48%, #000 100%);
background: -o-linear-gradient(#000 0%, rgba(44, 44, 44, 0) 52%, rgba(44, 44, 44, 0) 48%, #000 100%);
}
/* Background line */
.dwwol {
position: absolute;
z-index: 1;
top: 50%;
left: 0;
width: 100%;
height: 0;
margin-top: -1px;
border-top: 1px solid #333;
border-bottom: 1px solid #555;
}
/* Datewheel button */
.dwbg .dwb {
cursor: pointer;
overflow: hidden;
display: block;
height: 40px;
line-height: 40px;
padding: 0 15px;
margin: 0 2px;
font-size: 14px;
font-weight: bold;
text-decoration: none;
text-shadow: 0 -1px 1px #000;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
color: #fff;
background: #000;
background: linear-gradient(#6e6e6e 50%, #000 50%);
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, #000), color-stop(0.5, #6e6e6e));
background: -moz-linear-gradient(#6e6e6e 50%, #000 50%);
background: -o-linear-gradient(#6e6e6e 50%, #000 50%);
white-space: nowrap;
text-overflow: ellipsis;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-webkit-border-radius: 5px;
}
/* Datewheel button container */
.dwbc {
padding: 5px 0;
text-align: center;
clear: both;
}
.dwbc:after {
content: '';
display: block;
clear: both;
}
/* Datewheel button wrapper */
.dwbw {
display: inline-block;
float: left;
width: 50%;
position: relative;
z-index: 5;
}
.dwbc-p .dwbw {
width: 33.33%;
}
/* Hidden label */
.dwhl {
padding-top: 10px;
}
.dwhl .dwl {
display: none;
}
/* Multiple selection */
.dwms .dwwms .dw-li {
padding: 0 40px;
position: relative;
}
.dwms .dw-msel:after {
width: 40px;
text-align: center;
position: absolute;
top: 0;
left: 0;
content: '?';
}
/* Backgrounds */
.dwbg {
background: #fff;
border-radius: 3px;
-webkit-border-radius: 3px;
}
.dwbg .dwpm .dwwl {
border: 1px solid #aaa;
}
.dwbg .dwpm .dww {
color: #000;
background: #fff;
-webkit-border-radius: 3px;
}
.dwbg .dwwb {
background: #ccc;
color: #888;
text-shadow: 0 -1px 1px #333;
box-shadow: 0 0 5px #333;
-webkit-box-shadow: 0 0 5px #333;
}
.dwbg .dwwbp {
background: linear-gradient(#f7f7f7, #bdbdbd);
background: -webkit-gradient(linear, left bottom, left top, from(#bdbdbd), to(#f7f7f7));
background: -moz-linear-gradient(#f7f7f7, #bdbdbd);
background: -o-linear-gradient(#f7f7f7, #bdbdbd);
}
.dwbg .dwwbm {
background: linear-gradient(#bdbdbd, #f7f7f7);
background: -webkit-gradient(linear, left bottom, left top, from(#f7f7f7), to(#bdbdbd));
background: -moz-linear-gradient(#bdbdbd, #f7f7f7);
background: -o-linear-gradient(#bdbdbd, #f7f7f7);
}
.dwbg .dwb-a {
background: #3c7500;
background: linear-gradient(#94c840 50%, #3c7500 50%);
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, #3c7500), color-stop(0.5, #94c840));
background: -moz-linear-gradient(#94c840 50%, #3c7500 50%);
background: -o-linear-gradient(#94c840 50%, #3c7500 50%);
}
.dwbg .dwwl .dwb-a {
background: #3c7500;
background: linear-gradient(#94c840, #3c7500);
background: -webkit-gradient(linear, left bottom, left top, from(#3c7500), to(#94c840));
background: -moz-linear-gradient(#94c840, #3c7500);
background: -o-linear-gradient(#94c840, #3c7500);
}
/* Android ICS skin */
.android-ics .dw {
padding: 0;
color: #31b6e7;
background: #292829;
}
.android-ics .dw .dwwc,
.android-ics .dw .dwwl,
.android-ics .dw .dww,
.android-ics .dw .dwb,
.android-ics .dw .dwpm .dww {
background: none;
}
.android-ics .dwwr {
padding: 0;
}
.android-ics .dwc {
margin: 0;
padding: 30px 10px 1px 10px;
}
.android-ics .dwhl {
padding: 1px 10px;
}
.android-ics .dwv {
height: 36px;
line-height: 36px;
padding: 0;
border-bottom: 2px solid #31b6e7;
font-size: 18px;
}
.android-ics .dwwl {
margin: 0 2px;
}
.android-ics .dww,
.android-ics .dw .dwpm .dwwl,
.android-ics .dw .dwpm .dww {
border: 0;
}
.android-ics .dww .dw-li {
color: #fff;
font-size: 18px;
text-shadow: none;
}
.android-ics .dww .dw-li.dw-hl {
background: #31b6e7;
background: rgba(49, 182, 231, .5);
}
.android-ics .dwwo {
background: linear-gradient(#282828 0%, rgba(40, 40, 40, 0) 52%, rgba(40, 40, 40, 0) 48%, #282828 100%);
background: -webkit-gradient(linear, left bottom, left top, from(#282828), color-stop(0.52, rgba(40, 40, 40, 0)), color-stop(0.48, rgba(40, 40, 40, 0)), to(#282828));
background: -moz-linear-gradient(#282828 0%, rgba(40, 40, 40, 0) 52%, rgba(40, 40, 40, 0) 48%, #282828 100%);
background: -o-linear-gradient(#282828 0%, rgba(40, 40, 40, 0) 52%, rgba(40, 40, 40, 0) 48%, #282828 100%);
}
.android-ics .dw .dwwb {
background: #292829;
box-shadow: none;
-webkit-box-shadow: none;
}
.android-ics .dwwb span {
display: none;
}
.android-ics .dwwb:after {
position: absolute;
top: 50%;
left: 50%;
margin-top: -8px;
margin-left: -8px;
color: #7e7e7e;
width: 0;
height: 0;
border-width: 8px;
border-style: solid;
content: '';
}
.android-ics .dwwbm {
top: 0;
bottom: auto;
}
.android-ics .dwwbp {
bottom: 0;
top: auto;
}
.android-ics .dwwbm:after {
border-color: transparent transparent #7e7e7e transparent;
}
.android-ics .dwwbp:after {
border-color: #7e7e7e transparent transparent transparent;
}
.android-ics .dw .dwwl .dwb-a {
background: #292829;
}
.android-ics .dwwbm.dwb-a:after {
border-color: transparent transparent #319abd transparent;
}
.android-ics .dwwbp.dwb-a:after {
border-color: #319abd transparent transparent transparent;
}
.android-ics .dw .dwwol {
width: 60%;
left: 20%;
height: 36px;
border-top: 2px solid #31b6e7;
border-bottom: 2px solid #31b6e7;
margin-top: -20px;
display: block;
}
.android-ics .dwbc {
border-top: 1px solid #424542;
padding: 0;
}
.android-ics .dw .dwb {
height: 36px;
line-height: 36px;
padding: 0;
margin: 0;
font-weight: normal;
text-shadow: none;
box-shadow: none;
border-radius: 0;
-webkit-border-radius: 0;
-webkit-box-shadow: none;
}
.android-ics .dw .dwb-a {
background: #29799c;
}
.android-ics .dwb-s .dwb, .android-ics .dwb-n .dwb {
border-right: 1px solid #424542;
}
/* Docked */
.android-ics.dw-bottom .dw, .android-ics.dw-top .dw {
border-radius: 0;
-webkit-border-radius: 0;
}
/* Multiple select */
.android-ics .dwwms .dwwol {
display: none;
}
.android-ics .dwwms .dw-li {
padding-left: 5px;
padding-right: 36px;
}
.android-ics .dwwms .dw-li:after {
content: '';
position: absolute;
top: 50%;
left: auto;
right: 10px;
width: 14px;
height: 14px;
margin-top: -9px;
color: #31b6e7;
line-height: 14px;
border: 1px solid #424542;
text-shadow: 0 0 5px #29799c;
}
.android-ics .dwwms .dw-msel:after {
content: '?';
}
/* Light version */
.android-ics.light .dw {
background: #f5f5f5;
}
.android-ics.light .dww .dw-li {
color: #000;
}
.android-ics.light .dwwo {
background: linear-gradient(#f5f5f5 0%, rgba(245, 245, 245, 0) 52%, rgba(245, 245, 245, 0) 48%, #f5f5f5 100%);
background: -webkit-gradient(linear, left bottom, left top, from(#f5f5f5), color-stop(0.52, rgba(245, 245, 245, 0)), color-stop(0.48, rgba(245, 245, 245, 0)), to(#f5f5f5));
background: -moz-linear-gradient(#f5f5f5 0%, rgba(245, 245, 245, 0) 52%, rgba(245, 245, 245, 0) 48%, #f5f5f5 100%);
background: -o-linear-gradient(#f5f5f5 0%, rgba(245, 245, 245, 0) 52%, rgba(245, 245, 245, 0) 48%, #f5f5f5 100%);
}
.android-ics.light .dw .dwwb {
background: #f5f5f5;
color: #f5f5f5;
}
.android-ics.light .dwbc {
border-top: 1px solid #dbdbdb;
}
.android-ics.light .dwb {
color: #000;
}
.android-ics.light .dwb-a {
color: #fff;
}
.android-ics.light .dwb-s .dwb, .android-ics.light .dwb-n .dwb {
border-right: 1px solid #dbdbdb;
}
/* Bubble positioning */
.android-ics .dw-bubble-bottom .dw-arr {
border-color: transparent transparent #292829 transparent;
}
.android-ics .dw-bubble-top .dw-arr {
border-color: #292829 transparent transparent transparent;
}
/* Bubble positioning */
.android-ics.light .dw-bubble-bottom .dw-arr {
border-color: transparent transparent #f5f5f5 transparent;
}
.android-ics.light .dw-bubble-top .dw-arr {
border-color: #f5f5f5 transparent transparent transparent;
}
/* Multiple select */
.android-ics.light .dwwms .dw-li:after {
text-shadow: 0 0 5px #31b6e7;
}
</style>
网友评论