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还 ...
随机推荐
- jmeter 非GUI模式下传参
为什么要使用非GUI模式?--因为GUI模式下运行的时候消耗的内存比非GUI模式大,会使得压力测试的结果不准确. 根据参数类型分为两种:jmeter.properties和system.propert ...
- Java 值类型和引用类型
现实世界中的值和引用 假定你在读一份非常棒的东西,希望一个朋友也去读它.为了避免被人投诉支持盗版,进一步假定它是公共领域中的一份文档.那么,需要为朋友提供什么才能让他读到文档呢? 这完全取决于阅读的内 ...
- Spring 实例化方式有几种?为什么会用到 Cglib?
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! <Spring 手撸专栏>目录 [x] 第 1 章:开篇介绍,我要带你撸 Spri ...
- 转载 | python inferface使用
Python中最特别的关键字之一便是pass,它放在类或函数里,表示类和函数暂不定义. class PassClass: pass def PassFun(): pass 如上实现最精简的类和函数定义 ...
- Numba实时变量分析
Numba实时变量分析 Numba使用引用计数进行垃圾回收,这是一种需要编译器配合的技术.Numba IR对必须插入decref的位置进行编码.这些位置通过实时变量分析确定.相应的源代码是https: ...
- ASIC设计-终极指南
ASIC设计-终极指南 ASIC Design – The Ultimate Guide ASIC设计-终极指南 ASICs代表特定于应用的集成电路,指的是针对特定应用而设计的半导体解决方案,与其他解 ...
- 关于JAVA的FlowLayout流动布局的换行问题--图形界面
我在网上寻找Java流动布局换行的方法,看了好久,也没有找到满意的答案. FlowLayout是流式布局,所以如果需要让换行有意义,就得锁定窗口的大小,否则随着窗口的伸缩,布局将被彻底打乱. 网上的方 ...
- go 技巧: 实现一个无限 buffer 的 channel
前言 总所周知,go 里面只有两种 channel,一种是 unbuffered channel, 其声明方式为 ch := make(chan interface{}) 另一种是 buffered ...
- 『动善时』JMeter基础 — 43、JMeter对数据库的查询操作
目录 1.使用"用户自定义变量"实现参数化 2. 在SQL Query中使用占位符传递参数 (1)传递的参数值是常量 (2)传递的参数值是变量 3.Variables names参 ...
- selenium 鼠标事件操作
1.操作鼠标事件的类:ActionChains perform() 执行所有ActionChains中存储的行为 context_click() 右击 double_click() 双击 d ...