vue组件eleme 时间选择器问题

使用饿了么vue时间选择组件时选择的时间显示为本地时间  在传递数据到后台是时间慢8小时

解决方法.tostring();

或者定义date扩展

Date.prototype.Format = function (fmt) { //author: meizz 
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}
再对时间进行格式化得到结果则为本地时区时间

另外可以对其模块化 新建dateFormat.js

export default function(fmt) {
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}
引入模块
import DateFormat from "../dateFormat.js"; //日期格式化扩展导入
	Date.prototype.Format = DateFormat; //日期格式化扩展加载

default关键字

别名的语法糖:

// d.js
export default function() {}

// 等效于:
function a() {};
export {a as default};

在import的时候,可以这样用:

import a from './d';

// 等效于,或者说就是下面这种写法的简写,是同一个意思
import {default as a} from './d';


对于手机端,可以考虑使用 `mint-ui` 组件库来实现级联选择器。`mint-ui` 是饿了么团队开发的基于 Vue.js 的移动端 UI 组件库,支持常用的移动端组件,包括级联选择器。 以下是一个简单的三级级联选择器的实现: 1. 安装 `mint-ui` 组件库: ```sh npm install mint-ui --save ``` 2. 在 Vue 项目的入口文件中引入 `mint-ui` 组件和样式: ```js import Vue from 'vue' import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.use(MintUI) ``` 3. 在你的 Vue 组件中使用 `mt-picker` 组件渲染级联选择器: ```html <template> <mt-picker :data="data" v-model="selected" @change="handleChange"></mt-picker> </template> <script> export default { data() { return { selected: [], data: [ { value: 'province1', label: '省份1', children: [ { value: 'city1', label: '城市1', children: [ { value: 'district1', label: '区域1' }, { value: 'district2', label: '区域2' } ] }, { value: 'city2', label: '城市2', children: [ { value: 'district3', label: '区域3' }, { value: 'district4', label: '区域4' } ] } ] }, { value: 'province2', label: '省份2', children: [ { value: 'city3', label: '城市3', children: [ { value: 'district5', label: '区域5' }, { value: 'district6', label: '区域6' } ] }, { value: 'city4', label: '城市4', children: [ { value: 'district7', label: '区域7' }, { value: 'district8', label: '区域8' } ] } ] } ] } }, methods: { handleChange(selectedValues) { console.log(selectedValues) } } } </script> ``` 以上就是一个简单的移动端 Vue.js 级联选择器三级的实现,主要使用了 `mt-picker` 组件,通过传入 `data` 参数,实现了三级的级联选择器。需要注意的是,`data` 参数中的数据结构需要按照组件要求的格式进行定义。同时,为了适应移动端的操作,可以考虑使用 `popup` 或者 `picker` 组件来展示级联选择器
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值