169 lines
3.7 KiB
Vue
169 lines
3.7 KiB
Vue
<template>
|
|
<view>
|
|
<uni-card :is-shadow="false" is-full>
|
|
<text class="uni-h6">标签组件多用于商品分类、重点内容显示等场景。</text>
|
|
</uni-card>
|
|
|
|
<uni-section title="实心标签" type="line">
|
|
<view class="uni-padding-wrap uni-common-mt">
|
|
<uni-segmented-control :current="current" :values="items" :style-type="styleType"
|
|
:active-color="activeColor" @clickItem="onClickItem" />
|
|
</view>
|
|
<view class="content">
|
|
<view v-if="current === 0"><text class="content-text">选项卡1的内容</text></view>
|
|
<view v-if="current === 1"><text class="content-text">选项卡2的内容</text></view>
|
|
<view v-if="current === 2"><text class="content-text">选项卡3的内容</text></view>
|
|
</view>
|
|
</uni-section>
|
|
|
|
<uni-section title="Style" type="line"></uni-section>
|
|
<view class="example-body">
|
|
<radio-group class="uni-list" @change="styleChange">
|
|
<view v-for="(item, index) in styles" :key="index" class="uni-list-item">
|
|
<view class="uni-list-item__container">
|
|
<view class="uni-list-item__content">
|
|
<text class="uni-list-item__content-title">{{ item.text }}</text>
|
|
</view>
|
|
<view class="uni-list-item__extra">
|
|
<radio :value="item.value" :checked="item.checked" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</radio-group>
|
|
</view>
|
|
<uni-section title="Color" type="line"></uni-section>
|
|
<view class="example-body">
|
|
<radio-group class="uni-list" @change="colorChange">
|
|
<view v-for="(item, index) in colors" :key="index" class="uni-list-item">
|
|
<view class="uni-list-item__container">
|
|
<view class="uni-list-item__content">
|
|
<view :style="{ backgroundColor: item }" class="color-tag" />
|
|
</view>
|
|
<view class="uni-list-item__extra">
|
|
<radio :value="item" :checked="index === colorIndex" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</radio-group>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
items: ['选项卡1', '选项卡2', '选项卡3'],
|
|
styles: [{
|
|
value: 'button',
|
|
text: '按钮',
|
|
checked: true
|
|
},
|
|
{
|
|
value: 'text',
|
|
text: '文字'
|
|
}
|
|
],
|
|
colors: ['#007aff', '#4cd964', '#dd524d'],
|
|
current: 0,
|
|
colorIndex: 0,
|
|
activeColor: '#007aff',
|
|
styleType: 'button'
|
|
}
|
|
},
|
|
methods: {
|
|
onClickItem(e) {
|
|
if (this.current !== e.currentIndex) {
|
|
this.current = e.currentIndex
|
|
}
|
|
},
|
|
styleChange(e) {
|
|
if (this.styleType !== e.detail.value) {
|
|
this.styleType = e.detail.value
|
|
}
|
|
},
|
|
colorChange(e) {
|
|
if (this.styleType !== e.detail.value) {
|
|
console.log(e.detail.value);
|
|
this.activeColor = e.detail.value
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.example-body {
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
/* #endif */
|
|
flex-direction: row;
|
|
padding: 0;
|
|
}
|
|
|
|
.uni-common-mt {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.uni-padding-wrap {
|
|
// width: 750rpx;
|
|
padding: 0px 30px;
|
|
}
|
|
|
|
.content {
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
/* #endif */
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 150px;
|
|
text-align: center;
|
|
}
|
|
|
|
.content-text {
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
.color-tag {
|
|
width: 25px;
|
|
height: 25px;
|
|
}
|
|
|
|
.uni-list {
|
|
flex: 1;
|
|
}
|
|
|
|
.uni-list-item {
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
/* #endif */
|
|
flex: 1;
|
|
flex-direction: row;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
|
|
.uni-list-item__container {
|
|
padding: 12px 15px;
|
|
width: 100%;
|
|
flex: 1;
|
|
position: relative;
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
/* #endif */
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 1px;
|
|
border-bottom-color: #eee;
|
|
}
|
|
|
|
.uni-list-item__content-title {
|
|
font-size: 14px;
|
|
}
|
|
</style>
|