uni-app 遮罩模板 - Powered by Discuz! Archiver

首页 › uni-app论坛 › uni-app 遮罩模板

加油明天 發表於 2020-1-3 13:16:00

uni-app 遮罩模板

<p>1. common新建mask.vue文件。</p>
<div class="cnblogs_code">
<pre><template>
<view>
   <view <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">cpt-mask</span><span style="color: rgba(128, 0, 0, 1)">"</span>>
   </view>
</view>
</template>

<script><span style="color: rgba(0, 0, 0, 1)">
export </span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> {
   </span><span style="color: rgba(0, 0, 0, 1)">
}
</span></script>

<style><span style="color: rgba(0, 0, 0, 1)">
.cpt</span>-<span style="color: rgba(0, 0, 0, 1)">mask {
   position: </span><span style="color: rgba(0, 0, 255, 1)">fixed</span><span style="color: rgba(0, 0, 0, 1)">;
   top: </span><span style="color: rgba(128, 0, 128, 1)">0</span><span style="color: rgba(0, 0, 0, 1)">;
   left: </span><span style="color: rgba(128, 0, 128, 1)">0</span><span style="color: rgba(0, 0, 0, 1)">;
   width: </span><span style="color: rgba(128, 0, 128, 1)">100</span>%<span style="color: rgba(0, 0, 0, 1)">;
   height: </span><span style="color: rgba(128, 0, 128, 1)">100</span>%<span style="color: rgba(0, 0, 0, 1)">;
   background-color: rgba(0,0,0,0.5);</span><span style="color: rgba(0, 0, 0, 1)">
   opacity: </span><span style="color: rgba(128, 0, 128, 1)">0.5</span><span style="color: rgba(0, 0, 0, 1)">;
   z</span>-index: <span style="color: rgba(128, 0, 128, 1)">99</span><span style="color: rgba(0, 0, 0, 1)">;
}
</span></style></pre>
</div>
<p> </p>
<p>2. 引入mask.vue文件。</p>
<div class="cnblogs_code">
<pre><template>
<view>
   
   <view @click=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">remove(false)</span><span style="color: rgba(128, 0, 0, 1)">"</span>>
         
         <Mask v-<span style="color: rgba(0, 0, 255, 1)">if</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">mask</span><span style="color: rgba(128, 0, 0, 1)">"</span>></Mask>
   </view>
   <view <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">masks</span><span style="color: rgba(128, 0, 0, 1)">"</span>>
         <button type=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">primary</span><span style="color: rgba(128, 0, 0, 1)">"</span> @click=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">remove(true)</span><span style="color: rgba(128, 0, 0, 1)">"</span>>显示遮罩</button>
   </view>
</view>
</template>
<script><span style="color: rgba(0, 0, 0, 1)">
import Mask </span><span style="color: rgba(0, 0, 255, 1)">from</span> <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">../../common/mask.vue</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">;
export </span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> {
components: {
   Mask
},
data() {
   </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> {
         mask: </span><span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">
   }
},
methods: {
   remove (mask) {
         </span><span style="color: rgba(0, 0, 255, 1)">this</span>.mask =mask<span style="color: rgba(0, 0, 0, 1)">;
   }
}
}
</span></script>

<style lang=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">less</span><span style="color: rgba(128, 0, 0, 1)">"</span>><span style="color: rgba(0, 0, 0, 1)">
page {
　　background: #f8f8f8;
}
　　.masks {
   position: absolute;
   bottom: </span><span style="color: rgba(128, 0, 128, 1)">0</span>;left: <span style="color: rgba(128, 0, 128, 1)">50</span>%-100rpx;right: <span style="color: rgba(128, 0, 128, 1)">50</span>%-<span style="color: rgba(0, 0, 0, 1)">100rpx;
}
</span></style></pre>
</div>
<p>　　</p><br><br>
来源：https://www.cnblogs.com/ljy-/p/12144428.html

頁: [1]

查看完整版本: uni-app 遮罩模板