vux用一个图像调用时间插件
<template>
<div class="index">
<x-header :left-options="{backText: ''}" style="background-color:#f2f2f2;">添加用药提醒</x-header>
<group class="groupView" label-width="4.5em" label-margin-right="2em" label-align="right">
<img class="addImgView" src="../../assets/add.png" />
<x-input title="药品名称" placeholder="必填" v-model="value1"></x-input>
<!--<img class="addImgView" @click.native="showTime = true" src="../../assets/add.png" />-->
<x-button class="addImgViewButton" type="primary" plain @click.native="showTime = true"><img class="addImgView1" @click.native="showTime = true" src="../../assets/add.png" /></x-button>
<x-input title="用药时间" placeholder="必填" v-model="value2"></x-input>
<!--<group :title="('Use prop: show.sync (vue^2.3) to control showTime')">
<datetime v-model="value2" @on-change="change" :title="('Birthday')" :show.sync="showTime"></datetime>
</group>-->
<!--<div style="padding:15px;">
<x-button type="primary" plain @click.native="showTime = true"><img class="addImgView" @click.native="showTime = true" src="../../assets/add.png" /></x-button>
</div>-->
<datetime style="display: none;" v-model="value2" format="HH:mm" @on-change="change" title="用药时间" :show.sync="showTime"></datetime>
<x-input title="每次用药" placeholder="必填" v-model="value3"></x-input>
<x-input title="药品单位" placeholder="必填" v-model="value4"></x-input>
</group>
<group>
<group-title slot="title">个人备注</group-title>
<x-textarea v-model="value5" placeholder="请输入您的备注" :show-counter="false" :rows="3"></x-textarea>
</group>
<x-button class="xbuttonView1" @click.native="greet()">保存</x-button>
</div>
</template>
<script>
import Vue from 'vue'
import { XHeader, DatetimePlugin, XButton, GroupTitle, Group, Cell, XInput, Selector, PopupPicker, Datetime, XNumber, ChinaAddressData, XAddress, XTextarea, XSwitch } from 'vux'
Vue.use(DatetimePlugin)
export default {
name: "index",
data() {
return {
showTime:false,
value1:'',
value2:'',
value3:'',
value4:'',
value5:''
};
},
components: {
XHeader,
DatetimePlugin,
XButton,
Group,
GroupTitle,
Cell,
XInput,
Selector,
PopupPicker,
XAddress,
Datetime,
XNumber,
XTextarea,
XSwitch
},
methods: {
greet () {
console.log(this.value1+this.value2+this.value3+this.value4+this.value5)
// var url = this.HOST + "/vip/verificate";
// this.axios.post(url, this.qs.stringify({
// telphone: this.tel1,
// verificationCode: this.tel2,
// recommendCode: this.tel3
// }), {
// headers: {'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8'}
// })
// .then(res => {
// console.log(res.data);
// if(res.data === 0){
// this.$router.push('/HelloWorld')
// }
// })
},
change (value) {
console.log('change', value)
},
showPlugin () {
this.$vux.datetime.show({
cancelText: '取消',
confirmText: '确定',
format: 'YYYY-MM-DD HH',
value: '2017-05-20 18',
onConfirm (val) {
console.log('plugin confirm', val)
},
onShow () {
console.log('plugin show')
},
onHide () {
console.log('plugin hide')
}
})
}
}
}
</script>
<style scoped>
.index {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
background-color: #f5f5f5;
}
.groupView{
margin-top: 10px;
}
.xbuttonView1{
background-color: #2ec17b;
color: white;
width: 70%;
margin: 30px 15%;
}
.addImgView{
width: 22px;
height: 22px;
float: right;
margin-top: 12px;
margin-right: 20px;
}
.addImgView1{
width: 22px;
height: 22px;
}
.addImgViewButton{
width: 36px;
height: 30px;
float: right;
margin-top: 6px;
margin-right: 20px;
}
button.weui-btn_plain-primary, input.weui-btn_plain-primary, button.weui-btn_plain-default, input.weui-btn_plain-default{
border-width: 0px;
}
.weui-cell:before{
border: 0px;
}
</style>
<style>
.weui-cells{
margin: 0!important;
}
.vux-header .vux-header-title{
color:#000000!important;
}
.vux-header .vux-header-left .left-arrow:before{
border: 1px solid #000000!important;
border-width: 1px 0 0 1px!important;
}
</style>