提交 cc657f98 编写于 作者: 蓝色的小猫咪's avatar 蓝色的小猫咪

统一顶部分段器命名

上级 ea00b8e4
......@@ -103,33 +103,32 @@
margin: 0 auto;
overflow: hidden;
}
.segmented-control.button {
border: 1upx solid;
}
.segmented-control.text {
border: 0;
border-radius: 0upx;
}
.segmented-control-item {
flex: 1;
text-align: center;
line-height: 70upx;
box-sizing: border-box;
}
.segmented-control-item.button {
border-left: 1upx solid;
}
.segmented-control-item.text {
border-left: 0;
}
.segmented-control-item:first-child {
border-left-width: 0;
}
</style>
</style>
<template>
<view class="segmented-control" :class="styleType" :style="wrapStyle">
<view v-for="(item, index) in values" class="segmented-control-item" :class="styleType" :key="index" :style="index === currentIndex ? activeStyle : itemStyle" @click="onClick(index)">
{{item}}
</view>
</view>
</template>
<script>
export default {
name: 'segmented-control',
props: {
current: {
type: Number,
default: 0
},
values: {
type: Array,
default () {
return [];
}
},
activeColor: {
type: String,
default: '#007aff'
},
styleType: {
type: String,
default: 'button'
}
},
data() {
return {
currentIndex: this.current
}
},
watch: {
current(val) {
if (val !== this.currentIndex) {
this.currentIndex = val;
}
}
},
computed: {
wrapStyle() {
let styleString = '';
switch (this.styleType) {
case 'text':
styleString = `border:0;`;
break;
default:
styleString = `border-color: ${this.activeColor}`;
break;
}
return styleString;
},
itemStyle() {
let styleString = '';
switch (this.styleType) {
case 'text':
styleString = `color:#000;border-left:0;`;
break;
default:
styleString = `color:${this.activeColor};border-color:${this.activeColor};`;
break;
}
return styleString;
},
activeStyle() {
let styleString = '';
switch (this.styleType) {
case 'text':
styleString = `color:${this.activeColor};border-left:0;border-bottom-style:solid;`;
break;
default:
styleString = `color:#fff;border-color:${this.activeColor};background-color:${this.activeColor}`;
break;
}
return styleString;
}
},
methods: {
onClick(index) {
if (this.currentIndex !== index) {
this.currentIndex = index;
this.$emit('clickItem', index);
}
}
},
}
</script>
<style>
.segmented-control {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
font-size: 30upx;
border-radius: 12upx;
box-sizing: border-box;
margin: 0 auto;
overflow: hidden;
}
.segmented-control.button {
border: 1upx solid;
}
.segmented-control.text {
border: 0;
border-radius: 0upx;
}
.segmented-control-item {
flex: 1;
text-align: center;
line-height: 70upx;
box-sizing: border-box;
}
.segmented-control-item.button {
border-left: 1upx solid;
}
.segmented-control-item.text {
border-left: 0;
}
.segmented-control-item:first-child {
border-left-width: 0;
}
</style>
<template>
<view class="page">
<view>
<view class="uni-padding-wrap uni-common-mt">
<segmented-control :current="current" :values="items" v-on:clickItem="onClickItem" :styleType="styleType" :activeColor="activeColor"></segmented-control>
<uni-segmented-control :current="current" :values="items" v-on:clickItem="onClickItem" :styleType="styleType" :activeColor="activeColor"></uni-segmented-control>
</view>
<view class="content">
<view v-show="current === 0">
......@@ -42,7 +42,7 @@
</template>
<script>
import segmentedControl from '../../../components/segmented-control.vue';
import uniSegmentedControl from '../../../components/uni-segmented-control.vue';
export default {
data() {
......@@ -71,7 +71,7 @@
}
},
components: {
segmentedControl
uniSegmentedControl
},
methods: {
onClickItem(index) {
......@@ -94,12 +94,6 @@
</script>
<style>
.head {
padding: 0 20upx;
margin-top: 20upx;
height: 100upx;
}
.content {
display: flex;
justify-content: center;
......@@ -107,7 +101,6 @@
height: 300upx;
text-align: center;
}
.color-tag {
width: 50upx;
height: 50upx;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册