1.1 mint-ui安装与介绍

   官网:http://mint-ui.github.io/docs/#/zh-cn2/loadmore

  1、安装与引用

// 安装Vue 2.0
npm install mint-ui -S
// 引入全部组件
import Vue from 'vue';
import Mint from 'mint-ui';
Vue.use(Mint);

1.2 Datetime Picker的用法

  参考博客:https://blog.csdn.net/qq_35430000/article/details/82183079

<template>
<div class="pickerDemo">
<div class="showTime">
<p class="timeDes">当前时间是:{{this.selectedValue}}</p>
<div class="selectTime" @click="selectData">选择时间</div>
</div>
<!-- @touchmove.prevent 阻止默认事件,此方法可以在选择时间时阻止页面也跟着滚动。 -->
<div class="pickerPop" @touchmove.prevent>
<!-- 年月日时分选择 -->
<mt-datetime-picker
lockScroll="true"
ref="datePicker"
v-model="dateVal"
class="myPicker"
type="datetime"
year-format="{value}"
month-format="{value}"
date-format="{value}"
hour-format="{value}"
minute-format="{value}"
second-format="{value}"
@confirm="dateConfirm()">
</mt-datetime-picker>
</div>
</div>
</template> <script>
import Vue from 'vue'
import {formatDate} from '@/assets/js/util/formatdate.js'
import {DatetimePicker } from 'mint-ui'
Vue.component(DatetimePicker.name, DatetimePicker)
export default {
name: 'pickerDemo',
data () {
return {
dateVal: '2019-04-17', // 默认是当前日期
selectedValue: '2019-04-17'
}
},
components: {
},
methods: { //获取当前时间,格式YYYY-MM-DD
getNowFormatDate(){
var date = new Date();
var seperator1 = "-";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = year + seperator1 + month + seperator1 + strDate;
return currentdate;
}, // 打开时间选择器
selectData () {
// 如果已经选过日期,则再次打开时间选择器时,日期回显(不需要回显的话可以去掉 这个判断)
if (this.selectedValue) {
this.dateVal = this.selectedValue
} else {
this.dateVal = new Date()
}
this.$refs['datePicker'].open()
}, // 时间选择器确定按钮,并把时间转换成我们需要的时间格式
dateConfirm () {
this.selectedValue = formatDate(this.dateVal)
}
},
created () {
var nowData = this.getNowFormatDate();
this.selectedValue = nowData;
},
}
</script> <style scoped> </style>

index.vue

// 只有年月日
export function formatDate (secs) {
var t = new Date(secs)
var year = t.getFullYear()
var month = t.getMonth() + 1
if (month < 10) { month = '0' + month }
var date = t.getDate()
if (date < 10) { date = '0' + date }
var hour = t.getHours()
if (hour < 10) { hour = '0' + hour }
var minute = t.getMinutes()
if (minute < 10) { minute = '0' + minute }
var second = t.getSeconds()
if (second < 10) { second = '0' + second }
return year + '-' + month + '-' + date
}
// 年月日时分
export function formatDateMin (secs) {
var t = new Date(secs)
var year = t.getFullYear()
var month = t.getMonth() + 1
if (month < 10) { month = '0' + month }
var date = t.getDate()
if (date < 10) { date = '0' + date }
var hour = t.getHours()
if (hour < 10) { hour = '0' + hour }
var minute = t.getMinutes()
if (minute < 10) { minute = '0' + minute }
var second = t.getSeconds()
if (second < 10) { second = '0' + second }
return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second
}

src\assets\js\util\formatdate.js

1111111

16: mint-ui移动端的更多相关文章

  1. 基于VUE.JS的移动端框架Mint UI

    Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...

  2. 新建一个基于vue.js+Mint UI的项目

    上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...

  3. iView webapp / Mint UI / MUI [前端UI]

    前端UI iView webapp一套高质量的 微信小程序 UI 组件库 https://weapp.iviewui.com/?from=iview Mint UI 基于 Vue.js 的移动端组件库 ...

  4. Mint UI Example的运行

    Mint -UI是新推出的移动端UI框架 官网 不过官网上的文档例子不是很全面. 建议下载他们提供的example来学习. 1.examplle源码下载地址 2.打开项目,我这里使用webstorm, ...

  5. vuetify,vux,Mint UI 等框架的选择

    vuetify: https://vuetifyjs.com/zh-Hans/getting-started/quick-start NutUI:https://github.com/jdf2e/nu ...

  6. Vue移动组件库Mint UI的安装与使用

    一.什么是 Mint UI 1.Mint UI 包含丰富的 CSS 和 JS 组件,可以提升移动端开发效率 2.Mint UI 按需加载组件 3.Mint UI 轻量化 二.Mint UI 的安装 1 ...

  7. 基于Mint UI和MUI开发VUE项目一之环境搭建和首页的实现

    一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式 ...

  8. 第16讲- UI组件之TextView

    第16讲 UI组件之TextView Android系统所有UI类都是建立在View和ViewGroup这两类的基础上的. 所有View的子类称为widget:所有ViewGroup的子类称为Layo ...

  9. vue mint UI

    vue 与mint  UI 结合开发手机app  html5页面 api  文档   http://mint-ui.github.io/#!/zh-cn

  10. vue mint ui 手册文档对于墙的恐惧

    http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...

随机推荐

  1. 20165311 《网络对抗技术》 Kali安装

    一.目的要求 下载 安装 网络 共享 软件源 二.主要步骤 从官网下载软件安装包 安装的比较顺利 具体截图就不放上来了 安装结果图: 网络配置和共享文件夹设置 网络配置: 由于我之前安装虚拟机,所以并 ...

  2. python中删除list元素的方法del()、pop()和remove()

    del():根据下标进行删除 In [1]: a = [1, 2, 3, 4, 5] In [2]: del a[0] In [3]: a Out[4]: [2, 3, 4, 5] pop(): 删除 ...

  3. find 详解

    find 详解 原文请访问http://itlab.idcquan.com/linux/SHELL/949102.html 当最初登录到系统中时, u m a s k命令确定了你创建文件的缺省模式.这 ...

  4. 微信小程序字符串替换

    字符串替换有两种,一种是替换一个子字符串,一种是将子字符串全部替换 替换一个子字符串 要求:将“ ”(空格)替换成“,” var isguestnumbername=“aaa bbb ccc” isg ...

  5. flask学习笔记(1)-虚拟环境安装

    Mac(类Linux): pip install virtualenv mkdir testvirtualenv cd testvirtualenv virtualenv flask-env#创建虚拟 ...

  6. Redis Keys的通用操作

    keys * 显示所有key 127.0.0.1:6379> keys * 1) "sort1" 2) "l2" 3) "set2" ...

  7. eclemma怎么安装 eclemma的安装与简单使用图文教程(附下载)

    来自于:https://www.jb51.net/softjc/628026.html 一. 安装 有两种安装方法 1. 下载安装(推荐) 地址: http://sourceforge.net/pro ...

  8. PHP jsonp ajax 跨域 实例

    HTML代码 <html> <head> <title>跨域测试</title> <script src="http://code.jq ...

  9. Unity3D 代码加密保护工具

    加密方式   对于Unity3D的保护方式,主要是通过Virbox Protector Standalone对Unity3D程序的整个生成目录进行加密,可以保护Unity的主要代码逻辑不被反编译,最大 ...

  10. 2018-2019-2 网络对抗技术 20165321 Exp3 免杀原理与实践

    1. 实践内容(4分) 1.1 正确使用msf编码器(0.5分),msfvenom生成如jar之类的其他文件(0.5分),veil-evasion(0.5分),加壳工具(0.5分),使用shellco ...