vue判断当前是PC端还是手机端，加载不同组件库

小贵子的博客

已于 2023-02-03 16:38:29 修改

阅读量940

点赞数

分类专栏： vue 文章标签： vue.js

于 2023-02-03 16:37:25 首次发布

本文链接：https://blog.csdn.net/zyg1515330502/article/details/128870526

版权

vue 专栏收录该内容

35 篇文章 5 订阅

订阅专栏

//判断手机端还是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;
}