80 行
1.9 KiB
Plaintext
80 行
1.9 KiB
Plaintext
<template>
|
|
<!-- #ifdef APP && !VUE3-VAPOR -->
|
|
<scroll-view style="flex: 1">
|
|
<!-- #endif -->
|
|
<view style="margin: 15px;border-radius: 10px;background-color: white;">
|
|
<view v-for="index in [0,1,2,3,4,5,6,7,8,9]" :key="index"
|
|
:class="(index < 9 ? 'bb1' : '') + ' ' + (currentIndex == 0 ? 'btlr10 btrr10' : currentIndex == 9 ? 'bblr10 bbrr10' : '')"
|
|
style="flex-direction: row;align-items: center;padding: 15px"
|
|
:style="index == currentIndex ? 'background-color :#57BE6A;' : ''" @tap="changeIndex(index)">
|
|
<view>
|
|
<text style="font-size: 14px;" :style="index == currentIndex ? 'color: #FFFFFF;' : ''">{{ index }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view style="margin: 15px;margin-top: 20px;">
|
|
<text>动态切换 border 为空值</text>
|
|
<text @click="setBorderBlank" class="common" :style="style">
|
|
{{isSelect?'选中':'未选中'}}
|
|
</text>
|
|
</view>
|
|
<!-- #ifdef APP && !VUE3-VAPOR -->
|
|
</scroll-view>
|
|
<!-- #endif -->
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
|
|
const defaultStyle = 'border:2px solid black;background :#57BE6A;'
|
|
|
|
const currentIndex = ref(0)
|
|
const style = ref('' as string)
|
|
|
|
const isSelect = computed(() : boolean => {
|
|
return style.value == defaultStyle
|
|
})
|
|
|
|
const changeIndex = (index : number) => {
|
|
currentIndex.value = index
|
|
}
|
|
|
|
const setBorderBlank = () => {
|
|
style.value = style.value == '' ? defaultStyle : ''
|
|
}
|
|
defineExpose({
|
|
changeIndex,
|
|
setBorderBlank
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.common {
|
|
padding: 15px;
|
|
border-radius: 4px;
|
|
width: 120px;
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.bb1 {
|
|
border-bottom: 1rpx solid #EEEEEE;
|
|
}
|
|
|
|
.btlr10 {
|
|
border-top-left-radius: 10rpx;
|
|
}
|
|
|
|
.btrr10 {
|
|
border-top-right-radius: 10rpx;
|
|
}
|
|
|
|
.bblr10 {
|
|
border-bottom-left-radius: 10rpx;
|
|
}
|
|
|
|
.bbrr10 {
|
|
border-bottom-right-radius: 10rpx;
|
|
}
|
|
</style>
|