vue判断当前是PC端还是手机端,加载不同组件库
//判断手机端还是PC端
_isMobile() {
let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
return flag;
}
js:
if (_isMobile()) {
const Vant = require('./ui/vant');
require('./ui/vant-variables.less');
Vue.use(Vant, {});
} else {
const element = require('./ui/element');
require('./ui/element-variables.scss');
Vue.use(element);
}
vant.js :
const {
Tab,
Tabs,
Search,
Toast,
DropdownMenu,
DropdownItem,
Field,
Checkbox,
CheckboxGroup,
Icon,
Popup,
DatetimePicker,
List,
Picker,
Dialog,
Loading,
Empty,
PullRefresh,
Skeleton,
Uploader,
Swipe,
SwipeItem
} = require('vant');
const element = {
install(Vue) {
Vue.use(Tab)
.use(Tabs)
.use(Search)
.use(Toast)
.use(DropdownMenu)
.use(DropdownItem)
.use(Field)
.use(Checkbox)
.use(CheckboxGroup)
.use(Icon)
.use(Popup)
.use(DatetimePicker)
.use(List)
.use(Picker)
.use(Dialog)
.use(Loading)
.use(Empty)
.use(PullRefresh)
.use(Skeleton )
.use(Uploader )
.use(Swipe )
.use(SwipeItem )
},
};
module.exports = element;
vant-variables.less:
/**
* 定制主题
* https://vant-contrib.gitee.io/vant/#/zh-CN/theme
*
* 主题配置文件:
* https://github.com/youzan/vant/blob/2.x/src/style/var.less
*/
@import '//at.alicdn.com/t/font_2883260_bpvp1r3g4v5.css'; // 纯色图标
@import "~vant/lib/index.less";
@import './vant-admin.less';
// @button-primary-background-color: @green;
// @green: #07c160;
// @green: #4273f6;
@blue: #4273f6;
vant-admin.less:
@theme-color: #4273F6;
.van-tabs__line{
background-color:@theme-color;
width: 56px;
}
.van-dialog__confirm{
color: @theme-color;
}
.van-overlay{
background-color: rgba(0,0,0,0.3);
}
.van-picker-column__item--selected{
font-weight: 600;
}
element.js:
const {
Pagination,
Dialog,
Autocomplete,
Dropdown,
DropdownMenu,
DropdownItem,
Menu,
Submenu,
MenuItem,
MenuItemGroup,
Input,
InputNumber,
Radio,
RadioGroup,
RadioButton,
Checkbox,
CheckboxButton,
CheckboxGroup,
Switch,
Select,
Option,
OptionGroup,
Button,
ButtonGroup,
Table,
TableColumn,
DatePicker,
TimeSelect,
TimePicker,
Popover,
Tooltip,
Form,
FormItem,
Tabs,
TabPane,
Tag,
Tree,
Alert,
Slider,
Row,
Col,
Upload,
Progress,
Badge,
Card,
Rate,
Collapse,
CollapseItem,
Carousel,
CarouselItem,
Cascader,
Transfer,
Backtop,
Loading,
MessageBox,
Message,
Notification,
Scrollbar,
Drawer,
} = require('element-ui')
const element = {
install(Vue) {
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Select)
Vue.use(Option)
Vue.use(OptionGroup)
Vue.use(Input)
Vue.use(InputNumber)
Vue.use(Radio)
Vue.use(Tree)
Vue.use(Dialog)
Vue.use(Row)
Vue.use(Col)
Vue.use(Checkbox)
Vue.use(CheckboxButton)
Vue.use(CheckboxGroup)
Vue.use(Cascader)
Vue.use(Switch)
Vue.use(Slider)
Vue.use(TimePicker)
Vue.use(TimeSelect)
Vue.use(DatePicker)
Vue.use(Upload)
Vue.use(Rate)
Vue.use(Transfer)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Tag)
Vue.use(Button)
Vue.use(Progress)
Vue.use(Pagination)
Vue.use(Badge)
Vue.use(Alert)
Vue.use(Loading)
Vue.use(Menu)
Vue.use(MenuItem)
Vue.use(MenuItemGroup)
Vue.use(Submenu)
Vue.use(RadioGroup)
Vue.use(RadioButton)
Vue.use(Popover)
Vue.use(Tooltip)
Vue.use(Scrollbar)
Vue.use(Card)
Vue.use(Collapse)
Vue.use(CollapseItem)
Vue.use(Autocomplete)
Vue.use(Backtop)
Vue.use(Tabs)
Vue.use(TabPane)
Vue.use(Drawer)
Vue.use(Carousel)
Vue.use(CarouselItem)
Vue.prototype.$message = Message;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$notify = Notification;
},
};
module.exports = element;
element-variables.scss:
// 主题配置文件:
// https://unpkg.com/browse/element-ui@2.15.6/packages/theme-chalk/src/common/var.scsshttps://unpkg.com/browse/element-ui@2.15.6/packages/theme-chalk/src/common/var.scss
$--color-primary: #4273f6;
/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import '~element-ui/packages/theme-chalk/src/index';
@import './element-admin.scss';
element-admin.scss:
/* 默认按钮样式 */
$theme-color: #3370ff;
.el-button--default {
color: $theme-color;
border-color: $theme-color;
}
.el-button--default:active,
.el-button--default:hover,
.el-button--default:focus {
color: $theme-color;
background: #fff;
border-color: $theme-color;
}
// /* 成功按钮样式 */
.el-button--success,
.el-button--primary {
color: #fff;
background-color: $theme-color !important;
border-color: $theme-color !important;
}
.el-button--success:hover,
.el-button--success:focus,
.el-button--primary:hover,
.el-button--primary:focus {
color: #fff;
background-color: $theme-color;
border-color: $theme-color;
}
// /* 文字按钮样式 */
.el-button--text {
color: $theme-color;
}
.el-button--text:active,
.el-button--text:hover,
.el-button--text:focus {
color: $theme-color;
}
/* 时间面板选中项颜色 */
.el-date-table td.current:not(.disabled) span {
color: #fff !important;
background-color: $theme-color !important;
}
.el-date-table td.today span {
color: $theme-color !important;
}
.el-date-table td.today.start-date span,
.el-date-table td.today.end-date span {
color: #fff !important;
}
.el-date-table td.available:hover {
color: $theme-color !important;
}
.el-time-panel__btn.confirm {
color: $theme-color !important;
}
/* 单选复选选中颜色 */
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-radio__input.is-checked .el-radio__inner {
background-color: $theme-color !important;
border-color: $theme-color !important;
}
.el-checkbox__input.is-checked + .el-checkbox__label,
.el-radio__input.is-checked + .el-radio__label {
color: $theme-color !important;
}
/* 单选复选禁用颜色 */
.el-checkbox__input.is-disabled .el-checkbox__inner,
.el-radio__input.is-disabled .el-radio__inner {
background-color: #f2f6fc !important;
border-color: #dcdfe6 !important;
}
.el-checkbox__input.is-disabled + .el-checkbox__label,
.el-radio__input.is-disabled + .el-radio__label {
color: #c0c4cc !important;
}
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: $theme-color !important;
border-color: $theme-color !important;
}
.el-checkbox__inner:hover,
.el-radio__inner:hover {
border-color: $theme-color !important;
}
/* 分页样式 */
.el-pagination {
margin: 15px 0 0 0;
padding: 2px 5px;
color: #000;
font-weight: 400;
text-align: right;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: $theme-color !important;
border-color: $theme-color !important;
}
/* 表格单元格样式 */
.el-table .color_yellow .cell {
color: #ffd966;
}
.el-table .color_orange .cell {
color: #f58801;
}
.el-table .color_red .cell {
color: #d8090f;
}
.el-table .color_green .cell {
color: #67c23a;
}
/* 分页按钮颜色 */
.el-pagination.is-background .el-pager li:not(.disabled):hover {
color: $theme-color;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
color: #fff;
}
/* 下拉选中颜色 */
.el-select-dropdown__item.selected {
color: $theme-color;
}
/* 下拉框激活状态边框颜色 */
.el-select .el-input.is-focus .el-input__inner {
border-color: $theme-color;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
color: $theme-color;
}
/* 输入框激活状态边框颜色 */
.el-input .el-input__inner:hover,
.el-input .el-input__inner:focus,
.el-textarea__inner:hover,
.el-textarea__inner:focus {
border-color: $theme-color !important;
}
/* 页签颜色 */
.tags-content .el-tabs__item:hover {
color: $theme-color;
}
.tags-bar-container .tags-content .el-tabs__header .el-tabs__item.is-active {
background-color: $theme-color !important;
border-color: $theme-color !important;
}
/* 弹窗关闭按钮 */
.el-dialog__headerbtn:focus .el-dialog__close,
.el-dialog__headerbtn:hover .el-dialog__close {
color: $theme-color;
}
.el-message-box__headerbtn:focus .el-message-box__close,
.el-message-box__headerbtn:hover .el-message-box__close {
color: $theme-color;
}
/* 顶部更多操作样式 */
.el-dropdown-menu__item:not(.is-disabled):hover,
.el-dropdown-menu__item:focus {
color: $theme-color;
}
/* 左侧菜单样式 */
.side-bar-container .el-menu .el-menu-item.is-active,
.side-bar-container .el-menu .el-menu-item:hover {
background-color: $theme-color !important;
}
/* 正在加载样式 */
.el-loading-spinner .path {
stroke: $theme-color;
}
.el-loading-spinner .el-loading-text {
color: $theme-color;
}
/* tab选项卡 */
.el-tabs__item {
font-weight: normal;
}
.el-tabs__item.is-active {
color: $theme-color;
}
.el-tabs__item:hover {
color: $theme-color;
}
.el-tabs__active-bar {
background-color: $theme-color;
}
/* 返回按钮 */
.el-backtop {
color: $theme-color;
}
// 默认按钮加粗
.el-button--default {
font-weight: 700;
}
// 小按钮样式调整
.el-button--mini {
padding: 7px 8px;
}
// 表格固定列滚动条
.el-table--scrollable-x {
.el-table__body-wrapper {
z-index: 20;
}
}
.el-table__fixed,
.el-table__fixed-right {
.el-table__fixed-body-wrapper {
z-index: 30;
}
}
// element ui 调整样式
.el-table td {
padding: 5px 0;
}
.el-drawer:focus {
outline: none;
}
.el-drawer__close-btn:focus {
outline: none;
}
.el-timeline-item__timestamp {
color: #3db373;
}
.el-timeline-item__tail {
position: absolute;
bottom: 0px;
height: calc(100% - 19px);
border-left: 1px solid #e0e6e0;
}
.el-timeline-item {
margin-bottom: 5px;
padding: 0;
}
.el-timeline-item__timestamp.is-top {
margin-bottom: 3px;
}
.el-timeline-item__node {
background-color: #e0e6e0;
}
.el-timeline-item__node--normal {
top: 3px;
left: 1px;
width: 8px;
height: 8px;
}
// 设置字体大小
.el-table,
.top-box,
.el-input__inner,
.el-textarea__inner,
.el-form-item__label,
.line {
font-size: 12px;
}
// 表格头部样式
.el-table__header-wrapper .has-gutter th,
.el-table__header-wrapper .has-gutter tr {
// background-color: #f4f4f4 !important;
padding: 8px 0px;
}
// tooltip弹窗样式
.el-tooltip__popper {
max-width: 540px;
line-height: 180%;
}
.el-tooltip__popper {
z-index: 9999999 !important;
}
.el-tooltip__popper {
color: rgba(0, 0, 0, 0.85) !important;
background-color: #fff !important;
// border: 1px solid #e4e7ed !important;
box-shadow: 0px 0px 7px 3px rgba(0, 0, 0, 0.06) !important;
}
// 控制三角形颜色
.el-tooltip__popper[x-placement^='top'] .popper__arrow {
border-top-color: #fff;
border-bottom-color: #fff;
}
.el-tooltip__popper[x-placement^='top'] .popper__arrow:after {
border-top-color: #fff;
border-bottom-color: #fff;
}
.el-tooltip__popper[x-placement^='bottom'] .popper__arrow {
border-bottom-color: #fff;
}
.el-tooltip__popper[x-placement^='bottom'] .popper__arrow:after {
border-bottom-color: #fff;
}
/deep/ .el-autocomplete-suggestion {
width: 100% !important;
}
.tree-box {
.tree {
* {
background-color: transparent !important;
}
*:focus {
background-color: transparent !important;
}
}
}
.right_drawer {
/deep/ .el-popover {
padding: 0;
}
}
.el-popover {
min-width: 100px;
padding: 0;
}
版权声明:本文为zyg1515330502原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
THE END