【UniApp】-uni-app-修改元件主題和樣式

BNTang發表於2023-12-10
APP元件

前言

  • 好，經過上個章節的介紹完畢之後，瞭解了一下 uni-app-擴充套件元件
  • 那麼瞭解完了uni-app-擴充套件元件之後，這篇文章來給大家介紹一下 uni-app-修改元件主題和樣式
  • 首先不管三七二十一，先來新建一個專案

搭建演示環境

建立一個全新的專案，因為本文要修改元件主題和樣式，所以這次建立專案選擇 uni-ui 模板：

然後在配置一下，微信小程式的 AppId，直接去之前的專案中複製一下即可，找到之前專案的 manifest.json 檔案，然後選擇微信小程式配置，複製一下即可。

  • 經過如上的這麼一頓操作之後，就可以搭建完畢執行環境，與編碼環境
  • 接下來就可以開始進行介紹 uni-app-修改元件主題和樣式內容了

步入正題

修改元件主題

我們先使用一下元件，然後在看完了樣式之後我們在進行修改，這裡我們使用數字角標元件，先來看一下效果：

<template>
	<view>
		<uni-badge text="2" type="primary"></uni-badge>
		<uni-badge text="4" type="error"></uni-badge>
		<uni-badge text="22" type="primary"></uni-badge>
	</view>
</template>

<script>
	export default {
	}
</script>

<style>
</style>

執行一下，效果如下：

我透過發現這個數字角標元件的樣式是根據 type 屬性來決定的，那麼我們就可以透過修改 type 屬性來修改元件的主題，比如說我們把 type 屬性的值改為 success，那麼元件的主題就會變成綠色。

那麼知道了這些內容之後，我們就好辦了，假如說我們要更改一下 type=primary 的顏色，那麼我們就需要修改 primary 所對應的顏色。

我在前面的文章當中是不是有介紹到一個檔案叫做 uni.scss，這個檔案就是用來修改元件主題的，使用或修改對應的 scss 變數，就可以修改元件的主題。

上圖中，是我查閱官方文件發現，提供了一些變數預設值，這些值就是當前元件的主題，我們可以透過修改這些值來修改元件的主題。

我們要更改的是 primary 的顏色，那麼我們就可以在 uni.scss 檔案中，找到 primary 這個變數，然後修改它的值即可。

注意：透過 uni-ui 建立的專案, uni.scss 檔案是沒有內容的，需要自己手動新增

假如說我將 primary 的顏色修改為 red，那麼元件的主題就會變成紅色。

$uni-primary: red;

修改元件主題的方式就是這樣，首先你要確定你要修改元件對應的 scss 變數，在透過修改 uni.scss 檔案中的變數值，就可以修改元件的主題。

最主要是就是查閱官方文件，大家都需要有這種查閱官方文件的習慣，這樣才能更好的學習。

修改元件樣式

就繼續以上面的數字角標元件為例，我們來修改一下元件的樣式，比如說我們想要修改一下元件的圓角，那麼我們就可以透過修改元件的 border-radius 屬性來修改元件的圓角, 還想修改一下文字的顏色，那麼我們就可以透過修改元件的 color 屬性來修改文字的顏色。

那麼我們第一步要做的就是，找到要修改樣式的元件所對應的元素類名, 這個時候我就開啟控制檯的審查元素。

然後我就可以看到，數字角標元件所對應的元素類名是 uni-badge，那麼我們就可以透過修改 uni-badge 這個類名來修改元件的樣式。

我這裡可以很明確的告訴大家這樣修改是不行的，要想修改元件樣式有兩種方案，分別是：

  1. 利用 Vue 的深度修改 :deep
  2. 利用全域性屬性 :global 修改

好，那麼知道了方案我們就可以開始修改了，首先我們來看一下第一種方案，利用 Vue 的深度修改 :deep。

<style>
	:deep(.uni-badge) {
		color: #000;
		border-radius: 5px;
	}
</style>
  • 執行在 H5 端的效果如下：

可以看到是一點問題都沒有的，那麼我們再來看一下執行在微信小程式端的效果：

可以看到是沒有起效果的，那麼這是為什麼呢？因為我們沒有加 !important，我們要將優先順序提高, 加上 !important 之後，再來看一下效果：

注意：最好在修改的屬性後面加上 !important，否則有的平臺可能無效，上面已經驗證過了

第二種方案，利用全域性屬性 :global 修改，這個方案就比較簡單了，直接上程式碼：

<style>
	:global(.uni-badge) {
		color: #000 !important;
		border-radius: 5px !important;
	}
</style>

這裡我就不貼效果圖了，大家可以自己去執行一下，效果是一樣的。

總結

  • 本篇文章主要給大家介紹了 uni-app-修改元件主題和樣式的內容
  • 透過本篇文章的學習，相信大家對 uni-app-修改元件主題和樣式有了一定的瞭解
  • 本篇文章的內容就介紹到這裡，感謝大家的閱讀，如果有什麼不足的地方，歡迎大家指出，我會及時修改的，謝謝大家的支援

最後

大家好我是 BNTang, 一個熱愛分享的技術的開發者，如果大家覺得我的文章對你有幫助的話，可以關注我的公眾號 JavaBoyL，我會在公眾號中分享一些IT技術和一些個人的見解，謝謝大家的支援。

相關文章