实现效果

知识储备

XNumber组件

安装

局部注册：

import { XNumber } from 'vux'

export default {
  components: {
    XNumber
  }
}

全局注册：

// 在入口文件全局引入

import Vue from 'vue'
import { XNumber } from 'vux'

Vue.component('x-number', XNumber)

使用

注：x-number只能在Group中使用

 <group>
    <x-number title="title" v-model="value"></x-number>
  </group>

属性

名字类型默认值说明版本要求
valuenumber0表单值，使用v-model绑定--
titlestring 标题--
minnumber 最小值--
maxnumber 最大值--
stepnumber1步长--
fillablebooleanfalse是否可填写--
widthstring50px输入框宽度--
button-stylestringsquare按钮样式，可选值为square或者round--
alignstringright按钮部分位置，默认在右边(right)，可选值为left和right--

   

样式变量

 

名字默认值说明继承自变量
@number-button-font-color#3cc51f-- 
@number-input-font-color #666-- 
@number-button-enabled-border-color#ececec-- 
@number-square-button-enabled-border-color#ececec--@number-button-enabled-border-color
@number-round-button-enabled-border-color#3cc51f--@number-button-font-color
@number-button-disabled-border-color#ececec--@number-button-enabled-border-color
@number-round-button-disabled-border-color#ececec--@number-button-enabled-border-color


Demo源码

<template>
  <div>
    <group :title="$t('Default')">
      <x-number :name="$t('Quantity')" :title="$t('Quantity')"></x-number>
    </group>

    <group :title="$t('listen')">
      <x-number :title="$t('Quantity')" v-model="changeValue" :min="0" @on-change="change"></x-number>
    </group>

    <group :title="$t('set width=100px')">
      <x-number :title="$t('Quantity')" width="100px"></x-number>
    </group>

    <group :title="$t('round style')">
      <x-number :title="$t('Quantity')" v-model="roundValue" button-style="round" :min="0" :max="5"></x-number>
    </group>

    <group :title="$t('set step=0.5')">
      <x-number :title="$t('Quantity')" :step="0.5"></x-number>
    </group>

    <group :title="$t('set value=1, min=-5 and max=8')">
      <x-number :title="$t('Quantity')" :min="-5" :max="8" :value="1"></x-number>
    </group>

    <group :title="$t('fillable = true')">
      <x-number :value="10" :title="$t('Quantity')" fillable></x-number>
    </group>

  </div>
</template>

<i18n>
Default:
  zh-CN: 默认
Quantity:
  zh-CN: 数量
listen:
  en: listen to on-change events (printed on console)
  zh-CN: 监听 on-change 事件，在调试窗口中输出
set width=100px:
  zh-CN: 设置宽度为100px
set step=0.5:
  zh-CN: 设置步长为0.5
set value=1, min=-5 and max=8:
  zh-CN: 设置值为1，最小值为-5，最大值为8
fillable = true:
  zh-CN: 设置可以输入
use with other group elements:
  zh-CN: 和其他group子元素一起使用
Switch Component:
  zh-CN: Switch 组件
round style:
  zh-CN: 圆形按钮
</i18n>

<script>
import { Group, XNumber, XSwitch, Divider } from 'vux'

export default {
  components: {
    XNumber,
    Group,
    XSwitch,
    Divider
  },
  data () {
    return {
      changeValue: 0,
      roundValue: 0
    }
  },
  methods: {
    change (val) {
      console.log('change', val)
    }
  }
}
</script>

Datetime组件

安装

局部注册：

import { Datetime } from 'vux'

export default {
  components: {
    Datetime
  }
}

全局注册：

// 在入口文件全局引入

import Vue from 'vue'
import { Datetime } from 'vux'

Vue.component('datetime', Datetime)

使用

需要在Group组件内使用

该组件支持以Plugin形式调用

// 以 plugin 形式使用时，请在入口处引入：
import { DatetimePlugin } from 'vux'
Vue.use(DatetimePlugin)

// 组件内使用
this.$vux.datetime.show({
  value: '', // 其他参数同 props
  onHide () {
    const _this = this
  },
  onShow () {
    const _this = this
  }
})

this.$vux.datetime.hide()

属性

参考官方文档：

https://doc.vux.li/zh-CN/components/datetime.html

事件

 

名字参数说明版本要求
@on-change(value)表单值变化时触发, 参数 (newVal)--
@on-clear--点击显示在中间的自定义按钮时触发--
@on-show--弹窗显示时触发--
@on-hide(type), type is one of [cancel, confirm]弹窗关闭时触发v2.7.4
@on-cancel--点击取消按钮或者遮罩时触发，等同于事件 on-hide(cancel)v2.7.4
@on-confirm(value) v2.9.0 支持该参数点击确定按钮时触发，等同于事件 on-hide(confirm)v2.7.4

Demo源码

<template>
  <div>
    <div style="padding:15px;">
      <x-button type="primary" plain @click.native="showPlugin">{{ $t('Used as a plugin') }}</x-button>
    </div>

    <group :title="$t('Default format: YYYY-MM-DD')">
      <datetime
        v-model="value1"
        @on-change="change"
        :title="$t('Birthday')"
        @on-cancel="log('cancel')"
        @on-confirm="onConfirm"
        @on-hide="log('hide', $event)"></datetime>
    </group>

    <group :title="$t('Custom minute list: every 15 minutes')">
      <datetime v-model="minuteListValue" format="YYYY-MM-DD HH:mm" :minute-list="['00', '15', '30', '45']" @on-change="change" :title="$t('Birthday')"></datetime>
    </group>

    <group :title="$t('Custom hour list')">
      <datetime v-model="hourListValue" format="YYYY-MM-DD HH:mm" :hour-list="['09', '10', '11', '12', '13', '14', '15', '16']" :minute-list="['00', '15', '30', '45']" @on-change="change" :title="$t('Birthday')"></datetime>
    </group>

    <group title="Readonly">
      <datetime v-model="valueReadonly" :readonly="readonly" @on-change="change" :title="$t('Birthday')"></datetime>
    </group>
    <div style="padding:15px">
      <x-button type="primary" plain @click.native="readonly = !readonly"> {{ $t('Toggle readonly') }} </x-button>
    </div>

     <group :title="$t('Format display value')">
      <datetime v-model="formatValue" :display-format="formatValueFunction" @on-change="change" :title="$t('Birthday')"></datetime>
    </group>

    <div style="padding:15px;">
      <x-button type="primary" @click.native="formatValue = '2017-11-11'">{{ $t('Set value: 2017-11-11') }}</x-button>
    </div>

    <group :title="$t('Define range of hours')">
      <datetime v-model="limitHourValue" format="YYYY-MM-DD HH:mm" :min-hour=9 :max-hour=18 @on-change="change" :title="$t('Define range of hours')" :inline-desc="$t('Working hours: 09-18')"></datetime>
    </group>

    <group :title="$t('Set start-date and end-date') + ' 2015-11-11 ~ 2017-10-11'">
      <datetime v-model="limitHourValue" :start-date="startDate" :end-date="endDate" format="YYYY-MM-DD HH:mm" @on-change="change" :title="$t('Start time')"></datetime>
    </group>

     <group :title="$t('Set end-date only') + ' 2017-10-11'">
      <datetime v-model="onlySetEndDateValue" :end-date="onlySetEndDate" format="YYYY-MM-DD HH:mm" @on-change="change" :title="$t('Start time')"></datetime>
    </group>

    <group :title="$t('Format') + ': ' + format">
      <datetime v-model="value2" :format="format" @on-change="change" :title="$t('Start time')"></datetime>
    </group>

    <div style="padding:15px;">
      <x-button type="primary" @click.native="toggleFormat">{{ $t('Toggle format') }}</x-button>
    </div>

    <group title="noon">
      <datetime title="noon" v-model="noonValue" format="YYYY-MM-DD A"></datetime>
    </group>

    <group :title="$t('Placeholder')">
      <datetime v-model="value3" default-selected-value="2017-06-18 13" format="YYYY-MM-DD HH" :placeholder="$t('Please select')" @on-change="change" :title="$t('Start time')"></datetime>
    </group>

    <group :title="$t('Set default-selected-value to 2017-11-11')">
      <datetime v-model="value3_1" default-selected-value="2017-11-11" format="YYYY-MM-DD" :placeholder="$t('Please select')" @on-change="change" :title="$t('Start time')" :inline-desc=" $t('Current value') + `: ${value3_1}`"></datetime>
    </group>

    <group :title="$t('Set min-year and max-year')">
      <datetime v-model="value4" :placeholder="$t('Please select')" :min-year=2000 :max-year=2016 format="YYYY-MM-DD HH:mm" @on-change="change" :title="$t('Years after 2000')"></datetime>
    </group>

    <group :title="$t('Prop: compute-hours-function')">
      <datetime format="YYYY-MM-DD HH" v-model="computeHoursValue" :compute-hours-function="computeHoursFunction" :title="$t('Birthday')" @on-change="change"></datetime>
    </group>

    <group :title="$t('Prop: compute-days-function')">
      <datetime format="YYYY-MM-DD HH" v-model="computeDaysValue" :compute-days-function="computeDaysFunction" :title="$t('Birthday')" @on-change="change"></datetime>
    </group>

    <group :title="$t('Specified template text in Chinese')">
      <datetime v-model="value5" :placeholder="$t('Please select')" :min-year=2000 :max-year=2016 format="YYYY-MM-DD HH:mm" @on-change="change" :title="$t('Chinese')" year-row="{value}年" month-row="{value}月" day-row="{value}日" hour-row="{value}点" minute-row="{value}分" confirm-text="完成" cancel-text="取消"></datetime>
    </group>

    <group :title="$t('Show center button and clear the value')">
      <datetime v-model="value6" @on-change="change" :title="$t('Birthday')" clear-text="clear" @on-clear="clearValue"></datetime>
    </group>

    <group :title="$t('Show center button to set date to today')">
      <datetime v-model="value7" @on-change="change" :title="$t('Birthday')" clear-text="today" @on-clear="setToday"></datetime>
    </group>

     <group :title="$t('Custom trigger slot')">
      <datetime v-model="value7" @on-change="change" :title="$t('Birthday')" clear-text="today" @on-clear="setToday">
        <x-button>{{$t('Click me')}}</x-button>
      </datetime>
    </group>

    <group :title="$t('Required')">
      <datetime v-model="value8" :title="$t('Required')" clear-text="clear" @on-clear="clearValue8" :required="true"></datetime>
    </group>

    <group :title="$t('Use prop: show.sync (vue^2.3) to control visibility')">
      <datetime v-model="value9" @on-change="change" :title="$t('Birthday')" :show.sync="visibility"></datetime>
    </group>

    <div style="padding:15px;">
      <x-button type="primary" plain @click.native="visibility = true">显示</x-button>
    </div>

    <group :title="$t('Default format: YYYY-MM-DD')">
      <datetime
        :order-map="{
          year: 3,
          month: 2,
          day: 1
        }"
        v-model="value1"
        @on-change="change"
        title="customize column order"
        @on-cancel="log('cancel')"
        @on-confirm="onConfirm"
        @on-hide="log('hide', $event)"></datetime>
    </group>


  </div>
</template>

<i18n>
'Default format: YYYY-MM-DD':
  zh-CN: 默认格式：YYYY-MM-DD
Format:
  zh-CN: 格式
Start time:
  zh-CN: 开始时间
Placeholder:
  zh-CN: 提示文字
Please select:
  zh-CN: 请选择
Set min-year and max-year:
  zh-CN: 设置开始和结束年份
Years after 2000:
  zh-CN: 2000年以后的时间
Specified template text in Chinese:
  zh-CN: 自定义中文显示模板
Show center button and clear the value:
  zh-CN: 显示中间的清除按钮
Show center button to set date to today:
  zh-CN: 显示中间的设置日期为今天的按钮
Birthday:
  zh-CN: 生日
Chinese:
  zh-CN: 中文
Click me:
  zh-CN: 点我
Custom trigger slot:
  zh-CN: 自定义触发内容
Define range of hours:
  zh-CN: 限定小时范围
'Working hours: 09-18':
  zh-CN: 工作时间为 09-18
Set start-date and end-date:
  zh-CN: 设置开始时间和结束日期
'Click to change value to: 2017-11-11':
  zh-CN: 设置时间为 2017-11-11
Format display value:
  zh-CN: 格式化显示
Toggle format:
  zh-CN: 改变格式
'Custom minute list: every 15 minutes':
  zh-CN: 自定义分钟列表（每15分钟）
Custom hour list:
  zh-CN: 定义小时列表
'Use prop: show.sync (vue^2.3) to control visibility':
  zh-CN: '使用 prop: show.sync 控制显示(vue^2.3)'
Used as a plugin:
  zh-CN: 插件形式调用
Set default-selected-value to 2017-11-11:
  zh-CN: 设置默认选中值为 2017-11-11
'Prop: compute-hours-function':
  zh-CN: 自定义小时列表生成逻辑
'Prop: compute-days-function':
  zh-CN: 自定义日期列表生成逻辑
Toggle readonly:
  zh-CN: 切换 readonly 属性
'Set value: 2017-11-11':
  zh-CN: 设置时间为2017-11-11
Set end-date only:
  zh-CN: 只设置结束时间
</i18n>

<script>
import { Datetime, Group, XButton } from 'vux'

export default {
  components: {
    Datetime,
    Group,
    XButton
  },
  data () {
    return {
      noonValue: '2018-04-13 PM',
      readonly: true,
      minuteListValue: '2017-06-12 09:00',
      hourListValue: '2017-06-12 09:00',
      format: 'YYYY-MM-DD HH:mm',
      value1: '2015-11-12',
      valueReadonly: '2015-11-12',
      value2: '',
      value3: '',
      value3_1: '',
      value4: '',
      value5: '',
      value6: '2016-08-18',
      value7: '',
      value8: '',
      limitHourValue: '',
      startDate: '2015-11-11',
      endDate: '2017-10-11',
      formatValue: '2017-10-11',
      formatValueFunction (val) {
        return val.replace(/-/g, '$')
      },
      value9: '',
      visibility: false,
      computeHoursValue: '',
      computeDaysValue: '',
      computeHoursFunction (date, isToday, generateRange) {
        if (isToday) {
          return generateRange(new Date().getHours(), 23)
        } else {
          return generateRange(0, 23)
        }
      },
      computeDaysFunction (options, generateRange) {
        return [options.month] // if current month is n, days are [n]
      },
      onlySetEndDate: '2017-10-11',
      onlySetEndDateValue: ''
    }
  },
  methods: {
    log (str1, str2 = '') {
      console.log(str1, str2)
    },
    onConfirm (val) {
      console.log('on-confirm arg', val)
      console.log('current value', this.value1)
    },
    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')
        }
      })
    },
    toggleFormat () {
      if (this.format === 'YYYY-MM-DD') {
        this.format = 'YYYY-MM-DD HH:mm'
      } else if (this.format === 'YYYY-MM-DD HH:mm') {
        this.format = 'YYYY-MM-DD'
      }
    },
    change (value) {
      console.log('change', value)
    },
    clearValue (value) {
      this.value6 = ''
    },
    clearValue8 (value) {
      this.value8 = ''
    },
    setToday (value) {
      let now = new Date()
      let cmonth = now.getMonth() + 1
      let day = now.getDate()
      if (cmonth < 10) cmonth = '0' + cmonth
      if (day < 10) day = '0' + day
      this.value7 = now.getFullYear() + '-' + cmonth + '-' + day
      console.log('set today ok')
    }
  }
}
</script>

<style scoped lang="less">
.center {
  padding-top: 10px;
  padding-left: 15px;
  color: green;
}
</style>

实现日期联动

在vue单页面中 

 <group class="mt_cd_0">

          <x-number class= " h_36em pb_0 pt_0"v-if="demandForm.flightTypeArray==2" title="出行天数" width="50px" :min="1"
           @on-change="changeReturnDate"
           v-model="demandForm.tripDays"></x-number>
  </group>

注：

v-if:业务需求，当为2时才显示这个控件

title:要显示的标题

width:宽度

:min:最小值为1，不能再往下减

@on-change:发生改变时执行的方法

 v-model：绑定的v-model的值

然后在data中声明：

 

 data() {
      return {   
        demandForm: {
          tripDays: 1,    
          goStartTime: '',
          goEndTime: '',
          returnStartTime: '',
          returnEndTime: '',
          demandCloseTime: '',
        }
      }
}

当x-number的值发生改变时，会执行changeReturnDate方法，所以在此方法中：

methods: {
      changeReturnDate(){
       if(this.demandForm.tripDays!=''&&this.demandForm.goStartTime!=''){
          var goStartTime=new Date(this.demandForm.goStartTime)
          var returnStartTime=new Date(this.demandForm.returnStartTime)
          returnStartTime=new Date(goStartTime.getTime() +this.demandForm.tripDays * 24 * 60 * 60 * 1000);
          this.demandForm.returnStartTime=dateFormat(returnStartTime, 'YYYY-MM-DD').toString();
        }
       if(this.demandForm.tripDays!=''&&this.demandForm.goEndTime!=''){
          var goEndTime=new Date(this.demandForm.goEndTime)
          var returnEndTime=new Date(this.demandForm.returnEndTime)
          returnEndTime=new Date(goEndTime.getTime()+this.demandForm.tripDays* 24 * 60 * 60 * 1000);
          this.demandForm.returnEndTime=dateFormat(returnEndTime, 'YYYY-MM-DD').toString();
        }
      },

注：

if(出行天数不为空&&去程开始时间不为空){

获取去程开始时间并转化为Date格式;

获取返程开始时间并转化为Date格式;

返程开始时间=转化为Date(去程开始时间的毫秒基数+去程天数的毫秒数)；

返程开始时间=按指定格式格式化后的时间并转换为String格式；

}

下面返程结束时间同理。

注意:

使用JS 获取去程开始时间n天后的时间：

 var nTime=new Date(goStartTime.getTime() +n* 24 * 60 * 60 * 1000);

 

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue