Mint-ui的复选框列表Checklist和Radio

由于我在main.js里已经引用了全部的组件了,这里就不再按需引入了。

一直想着如何将自己的数据添加到 label 和 value里面,后面发现可以用push的方式,如下图:

<mt-checklist
   title="" align="right"
   v-model="bankList"
   :options="bankoptions">
</mt-checklist>
<!-- {{bankList}} 对应value值-->
export default {
name: 'DeleteBank',
data () {
return {
bankList:[],
showcards:[],
bankoptions:[
// {
// label: '中国银行:9555 **** **** 3269',
// value: '3'
// },
// {
// label: '中国银行:9555 **** **** 3269',
// value: '2'
// }
]
}
},
created(){
this.del();
},
methods:{
del(){
this.$http.get(this._getUrl()+"User/show_card").then((response) => {
let showcard = response.body
if(showcard.error_code==){
this.showcards=showcard.data
for(var i=;i<this.showcards.length;i++){
let card={label:this.showcards[i].bank_name+' : '+this.showcards[i].cardnum,value:String(this.showcards[i].id)}
this.bankoptions.push(card)
}
}
});
},

}

Mint-ui的日期时间选择器Datetime picker

我设置了当前时间为默认时间,可是不知道怎么将过期的时间设置为不可选。

<!-- 日期修改 -->
<div class="time-date">
<mt-datetime-picker ref="pickerstart" type="datetime" v-model="pickerValuestart"></mt-datetime-picker>
<mt-datetime-picker ref="pickerend" type="datetime" v-model="pickerValueend"></mt-datetime-picker>
<div class="starttime" @click="openPickerstart()"><span>开始时间</span>{{getLocalTime(new Date(pickerValuestart).getTime()/)}}</div>
<div class="endtime" @click="openPickerend()"><span>结束时间</span>{{getLocalTime(new Date(pickerValueend).getTime()/)}}</div>
</div>
data() {
return {
pickerValuestart:this.getLocalTime(Date.parse(new Date())/),
pickerValueend:this.getLocalTime(Date.parse(new Date())/)
}
}
 openPickerstart() {
this.$refs.pickerstart.open();
},
openPickerend() {
this.$refs.pickerend.open();
},

这2个事件openPickerstart,openPickerend起到绑定数据值的变化,但取出来的时间戳格式不对,所以我进行了转换。

后来发现一个问题,日期窗口滚动选择日期时,底下页面的滚动条也会触发滚动,这导致选择日期时迟钝或失效,后面用下面的方法解决了

 //这个是监听事件,监听类型touchmove触摸移动事件   .preventDefault()不要执行与事件关联的默认动作  禁止了默认滚动事件了
created() {
this.$nextTick(() => {
document.querySelectorAll(".mint-datetime").forEach(el => {
el.addEventListener('touchmove',function(e) {
e.preventDefault()
}, false);
})
})
},

vue,一路走来(8)--mint-ui的组件问题的更多相关文章

  1. vue,一路走来(2)--路由vue-router

    安装 Mint UI cnpm install mint-ui --save 如果你的项目会用到 Mint UI 里较多的组件,最简单的方法就是把它们全部引入.此时需要在入口文件 main.js 中: ...

  2. vue,一路走来(1)--构建vue项目

    2016年12月--2017年5月,接触前端框架vue,一路走来,觉得有必要把遇到的问题记录下来. 那时,vux用的是1.0的vue,然而vue2.0已经出来了,于是我结合了mint-ui一起来做项目 ...

  3. vue,一路走来(17)--vue使用scss,并且全局引入公共scss样式

    最近朋友问如何在vue项目中使用scss样式,想起之前项目是直接在main.js直接import css文件的,然而main.js不可以直接import scss文件. import './asset ...

  4. vue,一路走来(16)--本地及手机调试

    闲暇时间记录一下如何绑定域名,实现本地及手机调试的过程.我的是微信开发项目,很多功能及操作都是基于微信来开发的,理所当然的就用到微信开发者工具了. 1.首先打开目录C:\Windows\System3 ...

  5. vue,一路走来(13)--vue微信分享

    vue微信分享 今天记录一下vue微信分享. 1.先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”.这个不多说,见文档,只有绑定了才能进行下一步的动作 2.需要引入js文件 ...

  6. vue,一路走来(12)--父与子之间传参

    今天想起一直没有记录父组件与子组件的传参问题,这在项目中一直用到. 父向子组件传参 Index.vue父组件中 <component-a :msgfromfa="(positionno ...

  7. vue,一路走来(7)--响应路由参数的变化

    今天描述的问题估计会有很多人也遇到过. vue-router多个路由地址绑定一个组件造成created不执行 也就是文档描述的,如下图 我的解决方案: created () { console.log ...

  8. vue,一路走来(6)--微信支付

    微信支付 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6 分享一下vue实现微信支付.在微信浏览器里面 ...

  9. vue,一路走来(3)--数据交互vue-resource

    所有的静态页面布局完成后,最重要的就是数据交互了,简单来说,vue-resource就像jquery里的$.ajax,用来和后台交互数据的.放在created或ready里运行来获取或者更新数据的.不 ...

  10. vue,一路走来(17)--底部tabbar切换

    <router-link></router-link>存在router-link-active属性,那么底部tabbar切换就简单多了.不会再出现刷新回到第一个的bug. &l ...

随机推荐

  1. Java EE的优越性主要表现在哪些方面

    J2 EE的优越性主要表现在哪些方面 J2EE基于JAVA 技术,与平台无关. J2EE拥有开放标准,许多大型公司实现了对该规范支持的应用服务器.如BEA ,IBM,ORACLE等. J2EE提供相当 ...

  2. VUE的双向绑定及局部组件的使用

    vue的双向绑定,使用v-model,v-model只能使用在input  textare    select中 <!DOCTYPE html> <html lang="z ...

  3. 2 什么是编码?什么是Unicode?

    为了避免在浏览器中传输数据的时候出现中文乱码,我们可以将内容进行URL编码,当然也可以将内容进行UNICODE编码.将汉字进行UNICODE编码,如:“王”编码后就成了“\u738b”,UNICODE ...

  4. JavaScript中数组的操作方法总汇

    Array(数组)是JavaScript中最为常用的类型了.ECMAScript中的数组都是数据的有序列表.数组中可以保存任何类型的数据.数组的大小是可以动态调整的,既可以随着数据的添加自动增长以容纳 ...

  5. Java后端进阶教程

    https://www.cnblogs.com/caoleiCoding/p/6170555.html 传智播客Java Spring框架:https://www.bilibili.com/video ...

  6. Crazy Binary String

    Crazy Binary String 最长01个数相等的子串和子序列 字串用二分做的,有hack数据 :8 00111100 好像数据太水,直接放过去了 下面为二分代码 #include<bi ...

  7. 【数据库】一篇文章搞掂:Oracle数据库

    PL/SQL的使用 1.安装使用 1.1.安装暂略 1.2.使用 添加环境变量 打开PL/SQL,不要登录,进入界面后,打开设置Preference 设置主目录和OCI库

  8. isset、empty 误区

    isset()  常用来判定变量是否存在  但是当变量赋值为NUll时候,返回值一样是FALSE  而实际上变量是存在的,与实际情况不符,判定错误. empty() 用来判定变量或者类的属性值是否为等 ...

  9. Linux远程登录工具XShell安装

    Xshell就是一个远程控制RHEL的软件:其他的还有很多,用什么都无所谓(根据公司情况). 下面我们来安装下这个工具: 双击exe 点下一步: 选 免费的 然后下一步:(免费的功能足够用了) 点接受 ...

  10. openpyxl模块简单入门

    一.openpyxl简介和安装 python 读写 excel 有好多选择,但是,方便操作的库不多,在我尝试了几个库之后,我觉得两个比较方便的库分别是 xlrd/xlwt.openpyxl. 之所以推 ...