uni-app中组件picker的基本使用(日期选择器为例)
例:需要在下图“自定义日期”中使用日期选择器
<template>
<div>
<picker mode="date" @change="bindDateChange">
<div :class="timeIndex == 4 ? 'active-time' : ''">{{anyDate}}</div>
</picker>
</div>
</template>
<script>
export default {
data(){
return {
timeIndex:0,
anyDate:'自定义日期'
}
},
methods:{
bindDateChange (e) {
console.log(e)
this.anyDate = e.detail.value
this.timeIndex = 4
},
changeTime(index) {
this.timeIndex = index
this.anyDate = '自定义日期'
}
}
}
</script>
效果图:(单独分出来编辑的)点击自定义日期后显示一下效果,颜色切换为蓝色,当点击图一中的其他按钮时被点击的按钮颜色发生切换,自定义按钮颜色会回复默认(以上代码显示仅如下图所示)
uni-app中组件picker的基本使用(日期选择器为例)的更多相关文章
- uni app中使用自定义图标库
项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...
- uni app中关于图片的分包加载
因为在项目中使用了大量的静态资源图片,使得主包体积过大, 而把这些图片全部放到服务器又有点麻烦,就想能不能把图片也分包,但是直接放在分包下的话导致图片资源找不到了, 在社区中看到大佬分享的十分有用,特 ...
- uniapp中使用picker中的注意事项
APP端中picker点击后不弹出: 1.请确保picker标签里面嵌套了一个view,并且view里面有值 2.请确保picker中的默认值的格式跟该picker类型的值对应 例如下面: <v ...
- 我刚知道的WAP app中meta的属性
之前我一直做的都是WEB前端开发,来北京以后面试了一个移动前端开发,WAP前端开发. 其实在原来公司的时候也做过这方面的开发,可面试的时候面试官问我,要想强制让文档与设备的宽度保持1:1,mate标签 ...
- 在 C# App 中嵌入 Chrome 浏览器使用 CefSharp
介绍 以前曾试过在app中整合一个可靠又快速的web浏览器吗? 在本文中,你会学到如何轻松地将奇妙的CefSharp网页浏览器组件(基于Chromium)集成到你的C# app中. 然后,你可以使用此 ...
- 我刚知道的WAP app中meta的属性(转载)
之前我一直做的都是WEB前端开发,来北京以后面试了一个移动前端开发,WAP前端开发. 其实在原来公司的时候也做过这方面的开发,可面试的时候面试官问我,要想强制让文档与设备的宽度保持1:1,mate标签 ...
- Vue.js中组件传参的方法 - 基于webpack模板
在Vuejs中, 组件之间的传参是今天第一次接触, 之前写的组件互相之间都是独立的, 弗敢专也, 必以分人 环境: node.js npm vue-cli 以上安装请自行百度 一.项目创建 $ vue ...
- Android app中的so库和CPU架构
一.android目前有几种cpu架构? 早期的Android系统几乎只支持ARMv5的CPU架构,目前支持七种CPU架构:ARMv5,ARMv7 (从2010年起),x86 (从2011年起),MI ...
- 18-vue-cli脚手架项目中组件的使用
在webpack-simple模板中,包括webpck模板.一个.vue文件就是一个组件. 为什么会这样呢?因为webpack干活了!webpack的将我们所有的资源文件进行打包.同时webpack还 ...
随机推荐
- Windows 常用Cmd命令行 (持续更新...)
查看IP ipconfig 查看WIFI密码 netsh wlan show profiles wifi_name key = clear 系统探针 systeminfo CMD重定向 输出符号> ...
- 基于LNMP架构搭建wordpress个人博客
搭建过程 注意防火墙和selinux的影响可以先关闭. 一.安装nginx # 1.更改nginx源安装nginx [root@web01 ~]# vi /etc/yum.repos.d/nginx. ...
- C++知识点案例 笔记-5
1.关系运算符重载 2.类型转换函数重载 3.转换构造函数 4.函数模板 5.显式实例化 6.类模板外定义模板函数 1.关系运算符重载 ==关系运算符重载== //直接(按分数)比较两个对象 #inc ...
- nosql数据库之Redis概念及基本操作
一.概述 redis是一种nosql数据库(非关系型数据库),他的数据是保存在内存中,同时redis可以定时把内存数据同步到磁盘,即可以将数据持久化,并且他比memcached支持更多的数据结构(st ...
- 11.20 yum:自动化RPM包管理工具
yum(Yellow dog Updater Modified)是多个Linux发行版的软件包管理器,例如Redhat RHEL.CentOS和Fedora.yum主要用于自动安装.升级rpm软件包, ...
- 大对象数据LOB的应用
概述 由于无结构的数据往往都是大型的,存储量特别大,而LOB(large object)类型主要用来支持无结构的大型数据. 用户可以利用LOB数据类型来存储大型的无结构数据,特别是文本,图形,视频和音 ...
- 微服务架构(Microservices) ——Martin Flower
不知不觉到达了Sring Boot的学习中了,在学习之前,了解微服务架构是很有必要的,对于自己提升今后面试的软实力有很大帮助,在此写下. 让我们接下来看下Martin Flower 如何解释微服务架构 ...
- 更短且不失高效的UUID生成算法
Java原生的UUID长度为36位,嫌长 这里自己实现了一套自己的算法,来生成较短的UUID 由雪花算法启发而来, 大致原理是利用时间戳+随机值做值,然后转换成62进制(当然这个进制数你也可以搞成更多 ...
- bind,call,apply的区别
function cat(){}cat.prototype={ food:"fish", say: function(){ alert("I love "+th ...
- TVM图优化与算子融合
TVM图优化与算子融合 计算图的定义 Computational graphs: a common way to represent programs in deep learning framewo ...