在组件 mui 中使用主题 - Javascript

简介

mui 是一套基于 Vue.js 的移动端 UI 组件库，可以帮助开发者快速构建高质量的移动应用。在 mui 中，我们可以通过使用主题来实现自定义样式，使我们的应用更加美观。

使用方法

1. 引入主题文件

在项目中引入主题文件，可以使用官方提供的主题，也可以自定义主题。

import 'mui/dist/css/mui.min.css';
import 'mui/dist/css/mui.style.css';
import 'mui/examples/hello-mui/css/icons-extra.css';

import 'path/to/theme.css'; // 自定义主题文件

2. 配置主题

在 Vue 组件中配置主题，可以通过全局配置或者局部配置来实现。

全局配置

在 main.js 中如下配置：

import Vue from 'vue';
import Mui from 'mui';

import 'path/to/theme.css'; // 自定义主题文件

Mui.theme.use('custom-theme'); // 使用主题

Vue.use(Mui);

局部配置

在组件中配置：

import Mui from 'mui';

export default {
  data() {
    return {
      muiTheme: {
        // 自定义主题对象
      },
    };
  },
  mounted() {
    Mui.theme.use(this.muiTheme); // 使用主题
  },
};

3. 自定义主题

主题文件为 CSS 文件，样式形如：

.mui-btn {
    background-color: #4caf50;
    color: #fff;
}

在这里，我们可以自由地修改 CSS 样式，使组件达到我们想要的效果。

组件主题

以下是常见组件的主题属性示例：

按钮

/* 全局默认主题 */
.mui-btn {
  background-color: #007aff;
  color: #fff;
  font-weight: 400;
  height: 44px;
  line-height: 44px;
  border: none;
  border-radius: 3px;
  text-align: center;
  font-size: 17px;
  display: inline-block;
  padding: 0 30px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* 自定义主题 */
.mui-btn-primary {
  background-color: #1890ff;
}

.mui-btn-danger {
  background-color: #ff4d4f;
}

图标

/* 全局默认主题 */
.mui-icon {
  /* ... */
  color: #8a8a8a;
  font-size: 26px;
  font-style: normal;
  font-weight: 400;
  height: 26px;
  line-height: 26px;
  text-align: center;
  vertical-align: middle;
}
.mui-icon.mui-spin {
  /* ... */
  animation: mui-keyframes-spin 1s infinite linear;
}
/* 自定义主题 */
.mui-icon-primary {
  color: #1890ff;
}

.mui-icon-danger {
  color: #ff4d4f;
}

复选框

/* 全局默认主题 */
.mui-checkbox-label {
  /* ... */
  font-size: 15px;
  line-height: 44px;
  padding-left: 28px;
  cursor: pointer;
  user-select: none;
}
.mui-checkbox {
  /* ... */
  position: relative;
  margin-right: 10px;
  margin-top: 4px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: #d9d9d9;
  border-radius: 50%;
  box-sizing: border-box;
}
.mui-checkbox:focus {
  /* ... */
  border-color: #0052cc;
}
.mui-checkbox:checked {
  /* ... */
  border-color: #1890ff;
  background-color: #1890ff;
}
.mui-checkbox:checked:after {
  /* ... */
  position: absolute;
  display: block;
  z-index: 1;
  width: 14px;
  height: 14px;
  content: " ";
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("../icons/checkbox_checked_icon.svg");
}
/* 自定义主题 */
.mui-checkbox-primary {
  border-color: #1890ff;
}

.mui-checkbox-primary:checked {
  border-color: #1890ff;
  background-color: #1890ff;
}

.mui-checkbox-danger {
  border-color: #ff4d4f;
}

.mui-checkbox-danger:checked {
  border-color: #ff4d4f;
  background-color: #ff4d4f;
}

结论

以上就是在 mui 中使用主题的方法，我们通过自定义主题，可以实现更加丰富多彩的组件样式，让我们的应用更加炫酷。