<template>
<div class="tab_box">
<!--这里是tab的每一项-->
<div v-for="item in tabs" :key="'tabItem' + item.id" :class="['tab_item', {'active_tab':currentTab === item.id}]" @click="changeTab(item.id)">
{{item.label}}
</div>
</div>
</template>
<script>
export default {
data () {
return {
currentTab: '' // 用于记录tab当前所在项的id
}
},
props: ['tabs'], // 需要父组件传入
methods: {
changeTab (id) {
this.currentTab = id
this.$emit('changed', id) // 点击tab时触发changed方法,由父组件处理
}
},
mounted: function () {
this.currentTab = this.tabs[0].id // 默认下划线在第一项
}
}
</script>
<style>
.tab_box{
width:100%;
display:table;
}
.tab_item{
display:table-cell;
padding: 3px 8px 4px 8px;
/*如果想修改tab内的字体颜色和tab样式,在这里修改*/
}
.active_tab {
/*这是下划线样式,可以根据需要修改*/
border-bottom: 2px solid grey;
}
</style>
在父组件调用:
<tab @changed="change" :tabs="tabs"></tab>
其中change方法和tabs需要父组件中定义,tabs的格式如下:
tabs: [
{'id': 't1', 'label': 'TAB1'},
{'id': 't2', 'label': 'TAB2'},
{'id': 't3', 'label': 'TAB3'},
{'id': 't4', 'label': 'TAB4'},
{'id': 't5', 'label': 'TAB5'}
],
为确保正确渲染,id需要保证唯一性。label为tab显示的内容。change方法如下:
change (data) {
//这里写切换tab之后你需要做的事,data为切换后的tabId
this.message = 'this is ' + data + ', do whatever you want'
}
最终效果如下:
v-model 只能用于表单控件,如果用于其他元素。如何让组件的 v-model 生效呢?需要按照 Vue 的约定:接受一个 value 属性,在有新的 value 时触发 input 事件
Flutter 中有很多 UI 控件,而文本、图片和按钮是 Flutter 中最基本的控件,构建视图基本上都要使用到这三个基本控件;文本是视图系统中的常见控件,用于显示一段特定样式的字符串
问题描述:当需改的时候如果父节点为选中状态子节点不是全选中这样会显示为子节点为全选中状态;在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false ;
共有两种实现比较简单的方式,第一种比较好理解,将一个控件的透明度设置成0,打到隐藏的目的。第二种办法是使用 SDK 自带的 Offstage 控件包裹。
服务器端渲染 (SSR) 在服务器上生成静态页面来减少应用程序的加载时间。SSR 仅用于 Angular Universal 应用程序,但对于 DevExtreme 组件,Angular Universal 和普通 Angular 应用程序没有区别
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!