16: mint-ui移动端
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移动端的更多相关文章
- 基于VUE.JS的移动端框架Mint UI
Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...
- 新建一个基于vue.js+Mint UI的项目
上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...
- iView webapp / Mint UI / MUI [前端UI]
前端UI iView webapp一套高质量的 微信小程序 UI 组件库 https://weapp.iviewui.com/?from=iview Mint UI 基于 Vue.js 的移动端组件库 ...
- Mint UI Example的运行
Mint -UI是新推出的移动端UI框架 官网 不过官网上的文档例子不是很全面. 建议下载他们提供的example来学习. 1.examplle源码下载地址 2.打开项目,我这里使用webstorm, ...
- vuetify,vux,Mint UI 等框架的选择
vuetify: https://vuetifyjs.com/zh-Hans/getting-started/quick-start NutUI:https://github.com/jdf2e/nu ...
- Vue移动组件库Mint UI的安装与使用
一.什么是 Mint UI 1.Mint UI 包含丰富的 CSS 和 JS 组件,可以提升移动端开发效率 2.Mint UI 按需加载组件 3.Mint UI 轻量化 二.Mint UI 的安装 1 ...
- 基于Mint UI和MUI开发VUE项目一之环境搭建和首页的实现
一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式 ...
- 第16讲- UI组件之TextView
第16讲 UI组件之TextView Android系统所有UI类都是建立在View和ViewGroup这两类的基础上的. 所有View的子类称为widget:所有ViewGroup的子类称为Layo ...
- vue mint UI
vue 与mint UI 结合开发手机app html5页面 api 文档 http://mint-ui.github.io/#!/zh-cn
- vue mint ui 手册文档对于墙的恐惧
http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...
随机推荐
- P1368 工艺 SA/最小表示法
正解:SA/最小表示法 解题报告: 传送门! 听说正解是最小表示法,,,O(n)然后常数还挺小的,,, 但是我不会QAQ! 所以先写下SA的做法趴,,,等get了最小表示法再来写正解QAQ 就这种题算 ...
- javascript 的引入
目录 一.静态引入 1. html标签script引入 2. esm 中import ModuleName from 'module/path' 3. commonjs 中 const ModuleN ...
- coreseek/sphinx中的匹配模式
所谓匹配模式就是用户怎样依据keyword在索引库中查找相关的记录. SPH_MATCH_ALL, 匹配全部查询分词(默认模式); 如"手机配件".不匹配 "我有一部手机 ...
- vi光标移动
1.上下左右移动 k :上移一行 j :下移一行 h :左移一行 l :右移一行 2.移到当前屏幕的首.中.尾部 H :移到当前屏幕的首部 M :移到当前屏幕的中部 L :移到当前屏幕的尾部 ...
- canal mysql slave
[mysqld] log-bin=mysql-bin #添加这一行就ok binlog-format=ROW #选择row模式 server_id=1 #配置mysql replaction需要定义, ...
- python类与对象-如何创建可管理的对象属性
如何创建可管理的对象属性 问题举例 在面向对象编程中, 我们把方法看作对象的接口, 直接访问对象的属性可能是不安全的,或设计上不够灵活. 但是使用调用方法在形式上不如访问属性简洁. circle.ge ...
- html-webpack-plugin插件使用时参数配置
ERROR in multi main Module not found: Error: Cannot resolve 'file' or 'directory' ./public/pages/ind ...
- appium 3 跑起来
1. 代码如下: from appium import webdriver capabilitise = { "platformName": "Android" ...
- python编写接口初识一
python编写接口这里用到的是他一个比较轻量级的框架 flask #!/usr/bin/python # -*- coding: UTF-8 -*- import flask,json server ...
- git上clone需要ssh时
在命令行中输入ssh-keygen -t rsa -C "your_email@example.com" 然后使用编辑器打开id_rsa.pub文件,复制里面的ssh