提交 e5c8c12e 编写于 作者: taohebin@dcloud.io's avatar taohebin@dcloud.io

update: border与v-show组合示例

上级 8b19183b
<template>
<view style="flex-grow: 1;">
<view>
<text>border: 5px dotted blue</text>
<view class="common" style="border: 5px dotted blue;"></view>
</view>
<view>
<text>border与background-image同时设置</text>
<view class="common"
style="border-style: solid;border-color: rgba(0, 0, 255, 0.1);background-image: linear-gradient(to right, #00ff00, #00bc79)">
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view style="flex-grow: 1;">
<view>
<text>border: 5px dotted blue</text>
<view class="common" style="border: 5px dotted blue;"></view>
</view>
<view>
<text>border与background-image同时设置</text>
<view class="common"
style="border-style: solid;border-color: rgba(0, 0, 255, 0.1);background-image: linear-gradient(to right, #00ff00, #00bc79)">
</view>
</view>
<view>
<text>设置border的view,通过v-show控制显示</text>
<view v-show="shown">
<view class="common" style="border: 5px dotted blue;">
</view>
</view>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
<script setup lang="uts">
const shown = ref(false)
setTimeout(() => {
shown.value = true
}, 1000);
</script>
<style>
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册