vue-cli 中多个组件共用一个mt-checklist
// html <div v-if="dataList">
<mt-popup v-model="popupVisible" position="bottom" class="mint-popup" style="width: 100%;height: 30%;">
<mt-picker :slots="dataList" @change="onDateChange" :visible-item-count="5" :show-toolbar="false" ref="picker" value-key="name"></mt-picker>
</mt-popup>
</div>
data(){
popupVisible:false, // 默认隐藏
a:0, // 设置一个标识
}
value-key="name" 必须与option[{name:''}] 一致
computed: {
dataList () {
if(this.a === 0 || this.a === 1 || this.a === 4 || this.a === 5 || this.a === 6 || this.a === 7 || this.a === 8 || this.a === 9 || this.a === 10 || this.a === 11 || this.a === 12 || this.a === 13 || this.a === 16){
this.dateSlots = [
{
flex: 1,
values: this.tagList,
className: 'slot1',
textAlign: 'center'
}
];
}else if(this.a===3){
this.dateSlots = [
{
flex: 1,
values: [1,2,3,4,5,6,7,8,9],
className: 'slot2',
textAlign: 'right'
}, {
flex: 1,
values: [0,1,2,3,4,5,6,7,8,9],
className: 'slot4',
textAlign: 'center'
}, {
flex: 1,
values: [0,1,2,3,4,5,6,7,8,9],
className: 'slot4',
textAlign: 'left'
}
]
}
return this.dateSlots ;
},
},
// 多列与单列并存 ,点击事件去控制a
showPopupVisible(index){
this.popupVisible = true ;
this.openTouch();
if(index === 0){
this.a = 0
this.tagList = this.createData.publishType.attrValues;
}else if(index === 1){
this.a = 1 ;
this.tagList = this.createData.rentalType.attrValues;
}
}
// 拿到name和对应的id 传给后端
onDateChange (picker, values) {
console.log(picker)
console.log(values)
if(values[0]){
if(this.a === 0){
this.value0 = values[0].name;
this.valueId0 = values[0].id ;
}else if(this.a === 1){
this.value1 = values[0].name;
this.valueId1 = values[0].id ;
}
}
vue-cli 中多个组件共用一个mt-checklist的更多相关文章
- Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试
在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...
- vue.js中的全局组件和局部组件
组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三 ...
- vue项目中的父子组件之间的传值。
首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件.而在父组件中是不能直接调用子组件中的变量值的.下面详细说一下,父子组件之 ...
- vue cli 中关于vue.config.js中chainWebpack的配置
Vue CLI 的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...
- vue cli中的env详解
前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...
- 【Blazor】在ASP.NET Core中使用Blazor组件 - 创建一个音乐播放器
前言 Blazor正式版的发布已经有一段时间了,.NET社区的各路高手也创建了一个又一个的Blazor组件库,其中就包括了我和其他小伙伴一起参与的AntDesign组件库,于上周终于发布了第一个版本0 ...
- 解决vue项目中遇到父组件的按钮或操作控制重新挂载子组件但是子组件却无效果的情况
在vue项目中终会遇到需要父组件的按钮或操作控制重新挂载子组件的需求,我在新项目中就遇到这种需求.真实场景是父组件的早,中,晚三个按钮(代表三个时间段)来控制子组件的table表格列的动态加载. 子组 ...
- vue项目中使用地图组件
一.引入高德地图 一般用使用vue-cli webpack最简单粗暴的引入地图api的方法就是,在入口index.html的头部直接引入,记得一定要带上key,如果没有的话去高德地图api的官网申请一 ...
- scss是什么?在vue.cli中的安装使用步骤是?有哪几大特性?
css的预编译: 使用步骤: 第一步:用npm下三个loader(sass-loader.css-loader.node-sass): 第二步:在build目录找到webpack.base.confi ...
随机推荐
- Python快速设置Excel表格边框
import xlwings as xw #打开存好的excel app = xw.App() #设置应用 wb = xw.Book("E:/Data/小蜜蜂超市销售报表.xlsx" ...
- PHP pthread多线程
class test extends Thread { public $arg; public function __construct($arg){ $this->arg = $arg; } ...
- java.lang.IllegalAccessError: Class ref in pre-verified class resolved to unexpected implementation getting while running test project?
转摘:http://stackoverflow.com/questions/11155340/java-lang-illegalaccesserror-class-ref-in-pre-verifie ...
- HttpClient 之 发送Https请求
HttpClient包是一个优秀的Http请求的开源jar. 本文Http工具类的封装基于HttpClient,封装后的工具类支持Https请求. 但是由于项目的需要快速的实现,以下代码还可能会有点过 ...
- 对于一键退出APP功能实现的技术探讨
在Android的开发过程中,会经常存在“一键退出APP”的需求.经过一段时间的整理,其主要实现方式有以下几种. 本质:一键结束当前APP的所有activity&一键结束当前APP进程,两者合 ...
- The Preliminary Contest for ICPC Asia Nanjing 2019 D. Robots
题意:给出一个DAG,一只机器人从1点出发,等概率地选择一条出边走或者停留在原点,机器人的第k次行动消耗能量是k(无论是走还是停留都算一次行动).问1到n的期望. 解法:因为行动消耗的能量跟行动次数有 ...
- 分析dwebsocket的源码过程
前言 dwebsocet 是python django的websocket库,github地址:https://github.com/duanhongyi/dwebsocket 本章是对dwebsoc ...
- Android Paint类介绍以及浮雕和阴影效果的设置(转)
转自:https://blog.csdn.net/lpjishu/article/details/45558375 Paint类介绍 Paint即画笔,在绘制文本和图形用它来设置图形颜色, 样式等绘制 ...
- Quartz.Net 任务调度之日志(5)
Quartz.框架的监听器和日志 1.JobListener 任务日志 新建一个类,继承IJobListener public class CustomJobListener : IJobListe ...
- 【leetcode】435. Non-overlapping Intervals
题目如下: Given a collection of intervals, find the minimum number of intervals you need to remove to ma ...