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 ...
随机推荐
- 46-python基础-python3-字符串-常用字符串方法(四)-join()-split()
5-字符串方法 join()和 split() 1-join()方法 将字符串列表连接成一个单独的字符串. join()方法在一个字符串上调用,参数是一个字符串列表,返回一个字符串. 请注意,调用 j ...
- fusionCharts图表在客户端导出图片
前提:要具备三个文件:FusionCharts.js / FusionChartsExportComponent.js / FCExporter.swf 1.引用 js 文件 <script t ...
- k8s的存储卷
存储卷查看:kubectl explain pods.spec.volumes 一.简单的存储方式 1)2个容器之间共享存储..(删除则数据消失) apiVersion: v1 kind: Pod m ...
- 一、spring的基本认识
Spring的认识 Spring是一个开放源代码的设计层面框架,它解决的是业务逻辑层和其他各层的松耦合问题,因此它将面向接口的编程思想贯穿整个系统应用 Spring是于2003 年兴起的一个轻量级的J ...
- rabbitmq的管理软件以及PHP7安装rabbitmq的
rabbitmq-server管理软件的安装 1.mac下载rabbitmq-server brew install rabbitmq 2.启动服务rabbitmq-server rabbitmq-s ...
- Codeforces 360E 贪心 最短路
题意及思路:https://blog.csdn.net/huanghongxun/article/details/49846927 在假设所有边都是最大值的情况下,如果第一个人能比第二个人先到,那就缩 ...
- 【python3】基于scrapyd + scrapydweb 的可视化部署
一.部署组件概览 该部署方式适用于 scrapy项目.scrapy-redis的分布式爬虫项目 需要安装的组件有: 1.scrapyd 服务端 [运行打包后的爬虫代码](所有的爬虫机器都要安 ...
- Delphi 版本信息获取函数 GetFileVersionInfo、GetFileVersionInfoSize、VerFindFile、VerInstallFile和VerQueryValue
一.版本信息获取函数简介和作用 获取文件版本信息的作用: 1. 避免在新版本的组件上安装旧版本的相同组件: 2. 在多语言系统环境中,操作系统根据文件版本信息里提供的语言信息在启动程序时决定使用的正确 ...
- vim常用的骚操作
1.设置~/.vimrc syntax on 支持语法高亮 set nu 显示行号set nonu 不显示行号 set ai 设置自动缩进 set ...
- 【unp】unix网络编程卷1-->环境搭建(ubuntu14.04)
学习unp网络编程,树上的例子均存在#include "unp.h",故需要对环境进行配置. 1. 到资源页下载unpv13e 2. 解压并将unpv13e 移动到相应的文件夹下 ...