提交 233b813f 编写于 作者: DCloud_iOS_XHY's avatar DCloud_iOS_XHY

box-shadow 添加动态设置 none 及 非法值测试例

上级 a770285b
...@@ -48,133 +48,142 @@ ...@@ -48,133 +48,142 @@
<view> <view>
<text>box-shadow: inset 5px 5px 5px black</text> <text>box-shadow: inset 5px 5px 5px black</text>
<view class="backgroundview"> <view class="backgroundview">
<view <view class="common" style="box-shadow: inset 5px 5px 5px black"></view>
class="common"
style="box-shadow: inset 5px 5px 5px black"
></view>
</view> </view>
</view> </view>
<view> <view>
<text>box-shadow: inset 5px 10px 5px black</text> <text>box-shadow: inset 5px 10px 5px black</text>
<view class="backgroundview"> <view class="backgroundview">
<view <view class="common" style="box-shadow: inset 5px 10px 5px black"></view>
class="common"
style="box-shadow: inset 5px 10px 5px black"
></view>
</view> </view>
</view> </view>
<view> <view>
<text>box-shadow: inset 5px 5px 5px 5px black</text> <text>box-shadow: inset 5px 5px 5px 5px black</text>
<view class="backgroundview"> <view class="backgroundview">
<view <view class="common" style="box-shadow: inset 5px 5px 5px 5px black"></view>
class="common"
style="box-shadow: inset 5px 5px 5px 5px black"
></view>
</view> </view>
</view> </view>
<view> <view>
<text>box-shadow: inset -5px -5px 5px black</text> <text>box-shadow: inset -5px -5px 5px black</text>
<view class="backgroundview"> <view class="backgroundview">
<view <view class="common" style="box-shadow: inset -5px -5px 5px black"></view>
class="common"
style="box-shadow: inset -5px -5px 5px black"
></view>
</view> </view>
</view> </view>
<view> <view>
<text>box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text> <text>box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
<view class="backgroundview"> <view class="backgroundview">
<view <view class="common" style="box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4)"></view>
class="common"
style="box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4)"
></view>
</view> </view>
</view> </view>
<view> <view>
<text>circle: box-shadow: 5px 5px black</text> <text>circle: box-shadow: 5px 5px black</text>
<view class="backgroundview"> <view class="backgroundview">
<view <view class="common" style="border-radius: 62px; box-shadow: 5px 5px black"></view>
class="common"
style="border-radius: 62px; box-shadow: 5px 5px black"
></view>
</view> </view>
</view> </view>
<view> <view>
<text>circle: box-shadow: 5px 5px 5px black</text> <text>circle: box-shadow: 5px 5px 5px black</text>
<view class="backgroundview"> <view class="backgroundview">
<view <view class="common" style="border-radius: 62px; box-shadow: 5px 5px 5px black"></view>
class="common"
style="border-radius: 62px; box-shadow: 5px 5px 5px black"
></view>
</view> </view>
</view> </view>
<view> <view>
<text>circle: box-shadow: 5px 10px 5px black</text> <text>circle: box-shadow: 5px 10px 5px black</text>
<view class="backgroundview"> <view class="backgroundview">
<view <view class="common" style="border-radius: 62px; box-shadow: 5px 10px 5px black"></view>
class="common"
style="border-radius: 62px; box-shadow: 5px 10px 5px black"
></view>
</view> </view>
</view> </view>
<view> <view>
<text>circle: box-shadow: 5px 5px 5px 5px black</text> <text>circle: box-shadow: 5px 5px 5px 5px black</text>
<view class="backgroundview"> <view class="backgroundview">
<view <view class="common" style="border-radius: 62px; box-shadow: 5px 5px 5px 5px black"></view>
class="common"
style="border-radius: 62px; box-shadow: 5px 5px 5px 5px black"
></view>
</view> </view>
</view> </view>
<view> <view>
<text>circle: box-shadow: -5px -5px 5px black</text> <text>circle: box-shadow: -5px -5px 5px black</text>
<view class="backgroundview"> <view class="backgroundview">
<view <view class="common" style="border-radius: 62px; box-shadow: -5px -5px 5px black"></view>
class="common"
style="border-radius: 62px; box-shadow: -5px -5px 5px black"
></view>
</view> </view>
</view> </view>
<view> <view>
<text>circle: box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text> <text>circle: box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
<view class="backgroundview"> <view class="backgroundview">
<view <view class="common" style="
class="common"
style="
border-radius: 62px; border-radius: 62px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
" "></view>
></view>
</view> </view>
</view> </view>
<view>
<text>点击动态切换 box-shadow: none</text>
<view class="backgroundview" @click="changed">
<view :class="['common', disabled ? 'disabledShadow' : 'shadow']"></view>
</view>
</view>
<view>
<text>点击动态切换 box-shadow: 非法值</text>
<view class="backgroundview" @click="changed">
<view :class="['common', disabled ? 'invalidShadow' : 'shadow']"></view>
</view>
</view>
</view> </view>
<!-- #ifdef APP --> <!-- #ifdef APP -->
</scroll-view> </scroll-view>
<!-- #endif --> <!-- #endif -->
</template> </template>
<script>
export default {
data() {
return {
disabled: false
}
},
methods: {
changed() {
this.disabled = !this.disabled
}
},
}
</script>
<style> <style>
.common { .common {
width: 125px; width: 125px;
height: 125px; height: 125px;
background-color: brown; background-color: brown;
} }
.backgroundview { .backgroundview {
width: 250px; width: 250px;
height: 250px; height: 250px;
background-color: white; background-color: white;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.shadow {
box-shadow: 5px 5px black;
}
.disabledShadow {
box-shadow: none;
}
.invalidShadow {
box-shadow: abcd;
}
</style> </style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册