vux用一个图像调用时间插件

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>