提交 6199a14c 作者: wk

应用分包处理

父级 5a1d1143
......@@ -3,7 +3,7 @@ import App from './App'
// #ifndef VUE3
import Vue from 'vue'
import tabBar from 'components/uni-tabbar/uni-tabbar.vue'
import tabBar from './components/uni-tabbar/uni-tabbar.vue'
import $toast from './common/toast.js'
import $config from './common/config.js'
import $mta from "api/mta.js"
......
......@@ -95,14 +95,6 @@
}
}, {
"path": "pages/score/score",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}, {
"path": "pages/login/joinOrg/joinOrg",
"style": {
"navigationBarTitleText": "",
......@@ -111,14 +103,6 @@
}
}, {
"path": "pages/login/bindLogin/bindLogin",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}, {
"path": "pages/login/userInfo/userInfo",
"style": {
"navigationBarTitleText": "授权信息",
......@@ -135,14 +119,6 @@
}
}, {
"path": "pages/mine/myScore/myScore",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}, {
"path": "pages/login/createProject/createProject",
"style": {
"navigationBarTitleText": "创建项目",
......@@ -151,14 +127,6 @@
}
}, {
"path": "pages/mine/historyScore/historyScore",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}, {
"path": "pages/index/siteNewList/siteNewList",
"style": {
"navigationBarTitleText": "",
......@@ -183,14 +151,6 @@
}
}, {
"path": "pages/mine/myApproval/myApproval",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": true,
"navigationStyle": "custom"
}
}, {
"path": "pages/gallery/message/message",
"style": {
"navigationBarTitleText": "",
......@@ -306,22 +266,6 @@
}
}, {
"path": "pages/mine/projectInfo/projectInfo",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}, {
"path": "pages/mine/projectHistory/projectHistory",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}, {
"path": "pages/index/bussConfig/bussConfig",
"style": {
"navigationBarTitleText": "",
......@@ -439,14 +383,6 @@
}
}, {
"path": "pages/mine/changeOrg/changeOrg",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}, {
"path": "pages/gallery/app/editAloneForm/editAloneForm",
"style": {
"navigationBarTitleText": "",
......@@ -468,14 +404,6 @@
}
}, {
"path": "pages/mine/changeCompany/changeCompany",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}, {
"path": "pages/gallery/messageDetail/messageDetail",
"style": {
"navigationBarTitleText": "",
......@@ -539,25 +467,8 @@
"enablePullDownRefresh": false
}
}, {
"path": "pages/mine/scoreDetail/scoreDetail",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}
,{
"path" : "pages/mine/historyScoreDetail/historyScoreDetail",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
],
],
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "智慧工地一点通",
......@@ -581,5 +492,82 @@
"pagePath": "pages/mine/mine"
}
]
}
},
"subPackages": [{
"root": "pagesSub",
"pages": [{
"path": "mine/historyScoreDetail/historyScoreDetail",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}, {
"path": "mine/myScore/myScore",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}, {
"path": "mine/scoreDetail/scoreDetail",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}, {
"path": "mine/historyScore/historyScore",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}, {
"path": "mine/changeCompany/changeCompany",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}, {
"path": "mine/changeOrg/changeOrg",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}, {
"path": "mine/myApproval/myApproval",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": true,
"navigationStyle": "custom"
}
}, {
"path": "mine/projectHistory/projectHistory",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}, {
"path": "mine/projectInfo/projectInfo",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}]
}
]
}
......@@ -441,7 +441,7 @@
},
toLinkScore() {
uni.navigateTo({
url: "/pages/mine/myScore/myScore"
url: "/pagesSub/mine/myScore/myScore"
})
},
toLinkNew() {
......
<template>
<view class="login-parent">
<titleBar title="微信绑定"></titleBar>
<view class="login-content">
<view class="login-logo" v-if="false">
<image src="../../static/logo.png"></image>
</view>
<view class="login-app-name" v-if="false">
<text>{{appName}}</text>
</view>
<view class="login-layout">
<view class="login-account">
<text>账号</text>
<input placeholder="输入账号" type="text" v-model="account" />
</view>
<view class="login-password">
<text>密码</text>
<input placeholder="输入密码" password="true" v-model="password" />
</view>
</view>
<button @click="bindLogin">绑定</button>
<button @click="register">注册</button>
</view>
</view>
</template>
<script>
import Api from "../../../api/api.js"
export default {
data() {
return {
password: "",
account: "",
unique_token: "",
appName: uni.getStorageSync("application_name") === "" ? "" : uni.getStorageSync("application_name"),
appLogo: uni.getStorageSync("application_name") === "" ? "" : uni.getStorageSync("version_pic")
}
},
onLoad: function(option) {
this.unique_token = option.unique_token
},
methods: {
register: function() {
uni.navigateTo({
url: `/pages/login/register/register?unique_token=${this.unique_token}&type=bind`
})
},
bindLogin() {
if (this.account == "") {
uni.showToast({
title: "请输入账号",
duration: 1000,
icon: 'none',
})
return
}
if (this.password == "") {
uni.showToast({
title: "请输入密码",
duration: 1000,
icon: 'none',
})
return
}
Api.authLogin({
data: {
"unique_token": this.unique_token,
"user_no": this.isQuick ? this.phone : this.account,
"third_type": 1
},
}).then((result) => {
console.log("登录用户信息:", result);
if (result.code === 0) {
uni.setStorageSync('isCanUse', false); //记录是否第一次授权 false:表示不是第一次授权
uni.setStorageSync("short_token", result.data.short_token)
uni.setStorageSync("token", result.data.access_token)
uni.setStorageSync("user_info", result.data)
uni.showToast({
title: "授权登录成功",
icon: 'none'
})
uni.switchTab({
url: "/pages/index/index"
})
} else {
uni.showToast({
title: result.msg,
icon: 'none'
})
}
})
},
}
}
</script>
<style lang="scss">
.login-parent {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.login-content {
width: 100%;
display: flex;
margin-top: 100px;
flex-direction: column;
align-items: center;
justify-content: center;
button {
background-color: #007AFF;
width: 70%;
color: #FFFFFF;
margin-top: 30px;
}
.login-logo {
image {
width: 80px;
height: 80px;
}
}
.login-app-name {
margin-top: 10px;
text {
font-size: 16px;
color: #333333;
}
}
.login-type {
display: flex;
height: 50px;
flex-direction: row;
padding: 20px;
align-items: center;
justify-content: center;
margin-top: 80px;
.line {
width: 20px;
display: flex;
align-items: center;
justify-content: center;
color: #E5E5E5;
}
.login-type-select {
font-size: 16px;
color: #1890FF;
}
.login-type-unselect {
font-size: 16px;
color: #333333;
}
}
.login-layout {
margin-top: 30px;
display: flex;
width: 70%;
flex-direction: column;
.login-account {
display: flex;
width: 100%;
align-items: center;
flex-direction: row;
flex-wrap: nowrap;
text {
font-size: 14px;
color: #333333;
}
input {
flex: 1;
padding: 5px;
margin-left: 10px;
font-size: 14px;
border-bottom: 1px solid #555555;
color: #333333;
}
}
.login-password {
margin-top: 20px;
display: flex;
align-items: center;
width: 100%;
flex-direction: row;
flex-wrap: nowrap;
input {
padding: 5px;
flex: 1;
margin-left: 10px;
font-size: 14px;
border-bottom: 1px solid #555555;
color: #333333;
}
text {
font-size: 14px;
color: #333333;
}
.login-code {
font-size: 12px;
color: #1890FF;
padding: 5px 10px;
border-radius: 2px;
}
}
}
}
}
</style>
......@@ -13,28 +13,28 @@
</view>
</view>
<view class="func-content" :style="{top:statusBarHeight+250+'px'}">
<view class="item" v-if="isShow('项目信息')" @click="linkTo('/pages/mine/projectInfo/projectInfo')">
<view class="item" v-if="isShow('项目信息')" @click="linkTo('/pagesSub/mine/projectInfo/projectInfo')">
<view class="name">项目信息</view>
<image src="../../static/right-arrow.png" class="image"></image>
</view>
<view class="line" v-if="isShow('项目信息')"></view>
<view class="item" v-if="false" @click="linkTo('/pages/mine/projectHistory/projectHistory')">
<view class="item" v-if="false" @click="linkTo('/pagesSub/mine/projectHistory/projectHistory')">
<view class="name">项目过往</view>
<image src="../../static/right-arrow.png" class="image"></image>
</view>
<view class="line" v-if="false"></view>
<view class="item" @click="linkTo('/pages/mine/myApproval/myApproval')" v-if="isShow('我的审批')">
<view class="item" @click="linkTo('/pagesSub/mine/myApproval/myApproval')" v-if="isShow('我的审批')">
<view class="name">我的审批</view>
<view class="red-dot" v-if="count>0"></view>
<image src="../../static/right-arrow.png" class="image"></image>
</view>
<view class="line" v-if="isShow('我的审批')"></view>
<view class="item" @click="linkTo('/pages/mine/myScore/myScore')" v-if="isShow('我的积分')">
<view class="item" @click="linkTo('/pagesSub/mine/myScore/myScore')" v-if="isShow('我的积分')">
<view class="name">我的积分</view>
<image src="../../static/right-arrow.png" class="image"></image>
</view>
<view class="line" v-if="isShow('我的积分')"></view>
<view class="item" @click="linkTo('/pages/login/joinOrg/joinOrg')" v-if="isShow('加入组织')">
<view class="item" @click="linkTo('/pagesSub/login/joinOrg/joinOrg')" v-if="isShow('加入组织')">
<view class="name">加入组织</view>
<image src="../../static/right-arrow.png" class="image"></image>
</view>
......@@ -42,7 +42,7 @@
<view class="version-content">
<text class="text">当前版本:v1.0.0</text>
</view>
<view class="btn-org" @click="linkTo('/pages/mine/changeCompany/changeCompany')" v-if="role!='VISITOR'">
<view class="btn-org" @click="linkTo('/pagesSub/mine/changeCompany/changeCompany')" v-if="role!='VISITOR'">
<text class="text">切换组织</text>
</view>
<view class="btn-logout" @click="toLinkLogin">
......
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
<template>
<view class="history-score">
<titleBar title="历史积分明细"></titleBar>
<view class="choose-date">
<uni-datetime-picker @change="toggleDate" returnType="string" v-model="requestParam.time" type="date">
</uni-datetime-picker>
......@@ -83,7 +84,7 @@
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx;
padding: 30rpx;
margin: 0 32rpx;
background-color: #FAFAFA;
margin-top: 32rpx;
......@@ -103,14 +104,14 @@
}
.choose-date {
padding: 0 20rpx;
padding: 0 30rpx;
margin: 30rpx 0 0 0;
}
.score-list {
display: flex;
flex-direction: column;
padding: 20rpx 40rpx;
margin: 0 32rpx;
margin: 30rpx;
background-color: #FAFAFA;
.score-list-item {
......@@ -118,6 +119,7 @@
justify-content: space-between;
align-items: center;
height: 104rpx;
padding: 0 30rpx;
position: relative;
border-bottom: 1px solid rgba($color: #999, $alpha: 0.5);
......
......@@ -93,7 +93,7 @@
methods: {
toDetail() {
uni.navigateTo({
url: "/pages/mine/scoreDetail/scoreDetail"
url: "/pagesSub/mine/scoreDetail/scoreDetail"
})
},
getScoreDetail() {
......@@ -136,7 +136,7 @@
},
toHistory() {
uni.navigateTo({
url: "/pages/mine/historyScore/historyScore"
url: "/pagesSub/mine/historyScore/historyScore"
})
},
leftList() {
......
......@@ -130,12 +130,12 @@
toShare() {},
toHistoryDetail() {
uni.navigateTo({
url: "/pages/mine/historyScoreDetail/historyScoreDetail"
url: "/pagesSub/mine/historyScoreDetail/historyScoreDetail"
})
},
toExcahngeDetail() {
uni.navigateTo({
url: "/pages/mine/historyScore/historyScore"
url: "/pagesSub/mine/historyScore/historyScore"
})
},
toAddScore() {
......@@ -393,7 +393,6 @@
.score-list {
display: flex;
flex-direction: column;
padding: 20rpx 40rpx;
margin: 0 32rpx;
background-color: #FAFAFA;
......@@ -402,6 +401,7 @@
justify-content: space-between;
align-items: center;
height: 104rpx;
padding: 0 30rpx;
position: relative;
border-bottom: 1px solid rgba($color: #999, $alpha: 0.5);
......
## 1.2.3(2022-12-14)
修复外部不跳转页面修改current,组件不响应bug
## 1.2.2(2022-12-14)
新增click事件,click事件会优先于任何事件
## 1.2.1(2022-12-09)
修改文档使用说明,路由拦截有平台兼容性,暂时无法解决,平台原生不支持
## 1.2.0(2022-12-09)
新增插槽,可以自定义凸起导航,优化文档使用说明
## 1.1.9(2022-12-06)
修复iconPath图片路径为网络路径判断错误问题
## 1.1.7(2022-12-01)
优化部分机器计算错误问题
## 1.1.6(2022-12-01)
修改高度计算错误问题
## 1.1.5(2022-12-01)
修复各别设备上高度计算有误问题
## 1.1.4(2022-11-25)
修复vue2版本在微信小程序上不支持:style传入参数bug,优化参数错误逻辑
## 1.1.3(2022-11-24)
修复native模式borderStyle样式丢失问题
## 1.1.2(2022-11-24)
修改描述文档说明,修改插件描述信息
## 1.1.1(2022-11-24)
优化使用说明文档
## 1.1.0(2022-11-24)
极度简化native模式,页面只需要引入组件即可,任何操作都不需要
## 1.0.9(2022-11-24)
修复native模式下,fill忘记计算高度.
## 1.0.8(2022-11-24)
优化native模式,简化参数数量,使用更简单
## 1.0.7(2022-11-24)
新增native配置,可以兼容原生tabbar,新增beforeChange,可自行根据要求自己兼容路由守卫
## 1.0.6(2022-11-23)
修改文档描述错误
## 1.0.5(2022-11-23)
修复fill高度遗漏安全距离问题,文档使用说明优化更新
## 1.0.4(2022-11-23)
优化配置选项,提取当前选中项,新增fixed配置
## 1.0.3(2022-11-14)
添加上阴影效果,修复由于去除了上线条,造成如果内容如果是白色,tabbar会和内容高度重合的问题
## 1.0.2(2022-11-14)
修改说明文档,更加详细备注说明
## 1.0.1(2022-11-14)
新增当前选中项class名,方便用户直接样式覆盖
## 1.0.0(2022-11-14)
第一个自定义tabbar版本
<template>
<view class="m-tabbar-box" :style="tabbarBoxStyle">
<view v-if="fill || native" :style="tabbarFillStyle"></view>
<view id="m-tabbar" class="m-tabbar" :class="{'fixed': fixed || native}" :style="tabbarStyle">
<view class="m-tabbar__border" v-if="borderStyle === 'black' "></view>
<view class="m-tabbar__flex">
<view @click="tabChange(index)" v-for="(item, index) in tabbarList" :key="index" class="m-tabbar__item"
:class="{
'm-tabbar__item__active': index === currentIndex,
}">
<slot :name="`tabbar_index_${index}`">
<image :src="currentIndex === index ? item.selectedIconPath : item.iconPath"
class="m-tabbar__icon" />
<view class="m-tabbar__label"
:style="{'color': index === currentIndex ? tabbarConfig.selectedColor : tabbarConfig.color }">
{{ item.text }}
</view>
</slot>
</view>
</view>
</view>
</view>
</template>
<script>
const obj2strStyle = (obj) => {
let style = ''
for (let key in obj) {
style += `${key}:${obj[key]};`
}
return style
}
const padFirstSymbol = (str, smb) => {
if (str.startsWith(smb) || str.startsWith('http')) {
return str
}
return `/${str}`
}
const replaceTabbarList = (list) => {
if (!list.length > 0) {
return []
}
return list.map(item => {
if(item.iconPath){
item.iconPath = padFirstSymbol(item.iconPath, '/')
}
if(item.pagePath){
item.pagePath = padFirstSymbol(item.pagePath, '/')
}
if(item.selectedIconPath){
item.selectedIconPath = padFirstSymbol(item.selectedIconPath, '/')
}
return item
})
}
import PageConfig from '@/pages.json'
export default {
emits: ['change', 'click'],
props: {
current: {
type: [Number, String],
default: 0
},
tabbar: {
type: Object,
default () {
return {}
}
},
fixed: {
type: Boolean,
default: false
},
fill: {
type: Boolean,
default: false
},
zIndex: {
type: [Number, String],
default: 9999
},
native: {
type: Boolean,
default: false
},
safeBottom: {
type: Boolean,
default: true
},
beforeChange: {
type: Function,
default: null
}
},
data() {
return {
safeAreaInsetsBottom: 0,
currentIndex: 0,
tabbarHeight: 0,
beforeData: {},
}
},
watch: {
current(val) {
this.currentIndex = val * 1
}
},
computed: {
tabbarConfig() {
const {
native
} = this
if (native) {
const {
tabBar
} = PageConfig
if (!tabBar) {
console.error('Native mode, Pages.json no tabbar config')
return {
borderStyle: 'black',
list: []
}
}
return tabBar
}
return this.tabbar
},
tabbarList() {
const {
list
} = this.tabbarConfig
if(list){
return replaceTabbarList(list)
}
console.error('No tabbar config')
return []
},
borderStyle() {
const {
borderStyle
} = this.tabbarConfig
return borderStyle
},
tabbarBoxStyle() {
const {
zIndex
} = this
return obj2strStyle({
'z-index': zIndex,
})
},
tabbarFillStyle() {
const {
tabbarHeight,
safeAreaInsetsBottom
} = this
return obj2strStyle({
'height': `${tabbarHeight}rpx`,
'padding-bottom': `${safeAreaInsetsBottom}rpx`,
'opacity': 0
})
},
tabbarStyle() {
const {
safeAreaInsetsBottom
} = this
const {
backgroundColor
} = this.tabbarConfig
return obj2strStyle({
'background-color': backgroundColor || '#fff',
'padding-bottom': `${safeAreaInsetsBottom}rpx`
})
},
tabbarItemStyle() {
const {
currentIndex
} = this
const {
color,
selectedColor
} = this.tabbarConfig
return obj2strStyle({
'color': currentIndex ? selectedColor : color
})
}
},
mounted() {
const {
current,
safeBottom,
fill,
native,
tabbarList
} = this
this.currentIndex = current * 1
if (fill || native) {
this.getTabbarHeight()
}
if (native) {
const currentPage = getCurrentPages()[0].$page.fullPath
const currentIndex = tabbarList.findIndex(item => item.pagePath === currentPage)
this.currentIndex = currentIndex
if (tabbarList.length > 0) {
uni.hideTabBar()
}
}
},
methods: {
getTabbarHeight() {
const { safeBottom, native } = this
const {windowWidth, safeAreaInsets} = uni.getSystemInfoSync()
const ratio = 750 / windowWidth
if(safeBottom || native){
this.safeAreaInsetsBottom = safeAreaInsets.bottom * ratio
}
let query = wx.createSelectorQuery().in(this)
query.select('#m-tabbar').boundingClientRect(rect => {
if (rect) {
this.tabbarHeight = rect.height * ratio
}
}).exec()
},
tabChange(index) {
const {
currentIndex
} = this
this.$emit('click', index)
if (index === currentIndex) {
return
}
this.beforeData = {
newIndex: index,
oldIndex: currentIndex,
next: this.jumpPage
}
if (this.beforeChange) {
this.beforeChange(this.jumpPage)
} else {
this.jumpPage()
}
},
jumpPage() {
const {
native,
beforeData,
tabbarList: list
} = this
const {
newIndex: index
} = beforeData
if (list[index].pagePath) {
if (native) {
uni.switchTab({
url: list[index].pagePath
})
} else {
this.currentIndex = index
uni.reLaunch({
url: list[index].pagePath
})
}
}
this.$emit('change', index)
}
}
};
</script>
<style lang="scss" scoped>
.m-tabbar-box {
position: relative;
z-index: 9999;
}
.m-tabbar {
position: relative;
}
.m-tabbar.fixed {
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
}
.m-tabbar__flex {
display: flex;
flex-direction: row;
}
.m-tabbar__border {
background-color: rgba(0, 0, 0, 0.33);
width: 100%;
height: 1rpx;
transform: scaleY(0.5);
}
.m-tabbar__item {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
padding: 4px 0 2px;
}
.m-tabbar__icon {
display: block;
width: 48rpx;
height: 48rpx;
margin-bottom: 6rpx;
}
.m-tabbar__label {
font-size: 24rpx;
}
</style>
{
"id": "m-tabbar",
"displayName": "自定义tabbar、tabbar路由守卫、零配置tabbar、凸起导航",
"version": "1.2.3",
"description": "自定义tabbar,超高还原原生配置模式,一行代码自定义导航,自带tabbar路由守卫功能",
"keywords": [
"自定义tabbar,tabbar,自定义标签栏,tabbar路由守卫,零配置tabbar,路由守卫、凸起导航"
],
"repository": "",
"engines": {
"HBuilderX": "^3.3.1"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "y",
"快手": "y",
"飞书": "y",
"京东": "y"
},
"快应用": {
"华为": "y",
"联盟": "y"
}
}
}
}
}
\ No newline at end of file
# m-tabbar自定义
## 使用说明,注意事项(必看)
> 我配套上传了一个案例包,如果不会使用的,建议下载阅读使用
自定义tabbar的情况下,不建议在一个页面内通过几个组件,用v-if切换去模拟各个页面,会存在各种不可控bug
> 如果是`if切换组件`的话,就是一个页面控制多个组件显示隐藏来实现。 如果组件封装的有问题,会出现组件之间的协调问题,请看情况使用。 还有一些原生的交互没有办法达到预期,会影响到原生体验。 比如下拉刷新,滚动加载更多,切换tabbar后滚动位置不能固定等
推荐使用自带的tabbar系统,同时隐藏原生的tabbar, 再引入自定导航栏,这样可以保证原有性能,同时又能自定义tabbar
在pages.json中正常定义tabbar配置和字段,使用`native`模式,组件会自动加载pages.json配置项,并自动判断当前选中项
> native模式,你不需要传入任何配置,直接页面引入即结束
# 快速使用
## 方式一、Native模式使用(推荐)
```
// native模式,无需配置其他项
<m-tabbar native></m-tabbar>
```
在各个tabbar页面引入tabbar组件,传入属性`native``native`模式下无需任何配置
组件会默认自动通过`uni.hideTabBar()`隐藏系统tabbar
## 方式二、普通页面使用(current默认从0开始)
```
// 普通页面模式
<m-tabbar fixed fill current="1" :tabbar="tabbar"></m-tabbar>
```
配置选项和`uniapp`的配置完全相同,直接复制过来, 默认传入`pagePath`后,直接使用`reLaunch`跳转
如果不想使用自带跳转模式,可以不传入`pagePath`,自行接管事件`change`来达到当前页面tab任意切换
### 1、提取tabbar配置
新建文件config/tabbar.js(默认你有config目录,根据自己情况而定)
```
export default {
color: "#161616",
selectedColor: "#161616",
borderStyle: "black",
backgroundColor: "#ffffff",
list: [{
pagePath: "/pages/index/index",
iconPath: "/static/tabbar/index.png",
selectedIconPath: "/static/tabbar/index_active.png",
text: "首页"
}, {
pagePath: "/pages/shop/index",
iconPath: "/static/tabbar/shop.png",
selectedIconPath: "/static/tabbar/shop_active.png",
text: "门店"
}, {
pagePath: "/pages/my/index",
iconPath: "/static/tabbar/my.png",
selectedIconPath: "/static/tabbar/my_active.png",
text: "我的"
}]
}
```
### 2、引入tabbar
#### VUE2引入
```
import TabbarConfig from '@/config/tabbar.js'
export default {
data(){
return {
tabbar: TabbarConfig
}
},
onLoad(){
// 没有开启native模式下,使用reLaunch跳转,会存在首页标志,需要隐藏
#ifdef MP-JD || MP-WEIXIN
uni.hideHomeButton()
#endif
}
}
```
#### VUE3 setup引入
```
import TabbarConfig from '@/config/tabbar.js'
import { reactive } from 'vue'
// 没有开启native模式下,使用reLaunch跳转,会存在首页标志,需要隐藏
#ifdef MP-JD || MP-WEIXIN
uni.hideHomeButton()
#endif
const tabbar = reactive(TabbarConfig)
```
### 3、页面使用
```
<m-tabbar fixed fill current="1" :tabbar="tabbar"></m-tabbar>
```
## 高级用法(beforeChange)(路由守卫)
有些特殊需求,我们在点击一个tabbar其他一项的时候,可能需要判断权限是否可以进入,那么我们在切换前做一下路由拦截`beforeChange`,如果达到自己的预期,就进行跳转
> uniapp 微信小程序不支持$listeners,只能使用prop方式传入, 部分平台不支持prop传入方法,有平台限制,详细请看(问题解答)[https://ask.dcloud.net.cn/question/70659]
### 页面使用传入beforeChange
```
// native模式,无需传入 fixed fill
<m-tabbar native :beforeChange="onBeforeChange"></m-tabbar>
// 普通页面模式
<m-tabbar fixed fill current="1" :tabbar="tabbar" :beforeChange="onBeforeChange"></m-tabbar>
```
### 进行事件判断监听
函数必选参数 next,当判断逻辑执行完毕后,满足条件的情况下执行 `next()`
```
methods: {
onBeforeChange(next){
console.log('before page2 switch')
setTimeout(()=>{
console.log('switch page2 end')
next()
}, 1000)
}
}
```
## 自定义凸起导航(插槽使用)
```
<m-tabbar native>
<template v-slot:tabbar_index_1> //插槽详细看文档,样式你自己写
<view class="custom_style">
<view class="custom_style_icon">+</view>
</view>
</template>
</m-tabbar>
<style lang="scss">
.custom_style{
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 24rpx;
&_icon{
background-color: #15357A;
font-size: 80rpx;
width: 120rpx;
height: 120rpx;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: -40rpx;
}
}
</style>
```
### 属性说明
| 属性名 | 类型 | 默认值 | 必填 | 说明 |
| ------- | ------- | ------- | ------- | ------- |
| current | Number,String | 0 | true | 默认选中第几项,0开始(普通模式) |
| tabbar | Object | {} | true | tabbar配置项 (普通模式) |
| fixed | Boolean | false | false | 是否定位在底部(普通模式) |
| fill | Boolean | false | false | 是否填充底部高度(如果开启fixed后,会出现tabbar遮盖内容问题,开启此属性,会自动填充高度,可单独使用)(普通模式) |
| safeBottom | Boolean | true | false | 是否自动规避iphoneX\XR等底部安全距离(普通模式) |
| zIndex | Number,String | 999 | false | 当前处于z-index层级 |
| native | Boolean | false | false | native模式,当前页面是系统原生tabbar页面(pages.json里面配置了tabBar) |
| beforeChange | Function | null | false | 导航切换前事件hooks,用于判断点击tabbar的时候,可以先执行自己定义的事件,达到预期后在跳转(类似router的路由守卫),方法需要调用next参数回调,部分平台不支持,存在兼容性 |
### 方法说明
| 方法名 | 返回值说明 |
| ------- | ------- |
| click | 当前选中index,无论什么请看下都会先触发click事件,方便自由定制更多方法 |
| change | 当前选中index(beforeChange会在change之前执行,只有执行next才会返回) |
### 插槽
| 插槽名 | 返回值说明 |
| ------- | ------- |
| tabbar_index_{index} | 插槽名字为tabbar_index_你要变化的index, 可以做到任意控制自己的导航,比如中心凸起,比如你想让第一个变化,index就是0,比如你tabbarList里面有5个item,你想让中间的凸起,那么index就是2,取下标 |
### 插件写的时候,没办法照顾到所有平台,欢迎点评指正,如有问题欢迎给我留言
#### 例如:
```
设备:iphone13
系统: ios13
使用环境平台: 微信小程序、app
使用vue版本 :vue3
问题描述: 提示什么什么错误
```
## 2.2.19(2023-02-09)
- 修复 2.2.18 引起范围选择配置 end 选择无效的Bug [详情](https://github.com/dcloudio/uni-ui/issues/686)
## 2.2.18(2023-02-08)
- 修复 移动端范围选择change事件触发异常的Bug [详情](https://github.com/dcloudio/uni-ui/issues/684)
- 优化 PC端输入日期格式错误时返回当前日期时间
- 优化 PC端输入日期时间超出 start、end 限制的Bug
- 优化 移动端日期时间范围用法时间展示不完整问题
## 2.2.17(2023-02-04)
- 修复 小程序端绑定 Date 类型报错的Bug [详情](https://github.com/dcloudio/uni-ui/issues/679)
- 修复 vue3 time-picker 无法显示绑定时分秒的Bug
## 2.2.16(2023-02-02)
- 修复 字节小程序报错的Bug
## 2.2.15(2023-02-02)
- 修复 某些情况切换月份错误的Bug
## 2.2.14(2023-01-30)
- 修复 某些情况切换月份错误的Bug [详情](https://ask.dcloud.net.cn/question/162033)
## 2.2.13(2023-01-10)
- 修复 多次加载组件造成内存占用的Bug
## 2.2.12(2022-12-01)
- 修复 vue3 下 i18n 国际化初始值不正确的Bug
## 2.2.11(2022-09-19)
- 修复 支付宝小程序样式错乱的Bug [详情](https://github.com/dcloudio/uni-app/issues/3861)
## 2.2.10(2022-09-19)
- 修复 反向选择日期范围,日期显示异常的Bug [详情](https://ask.dcloud.net.cn/question/153401?item_id=212892&rf=false)
## 2.2.9(2022-09-16)
- 可以使用 uni-scss 控制主题色
## 2.2.8(2022-09-08)
- 修复 close事件无效的Bug
## 2.2.7(2022-09-05)
- 修复 移动端 maskClick 无效的Bug [详情](https://ask.dcloud.net.cn/question/140824)
## 2.2.6(2022-06-30)
- 优化 组件样式,调整了组件图标大小、高度、颜色等,与uni-ui风格保持一致
## 2.2.5(2022-06-24)
- 修复 日历顶部年月及底部确认未国际化的Bug
## 2.2.4(2022-03-31)
- 修复 Vue3 下动态赋值,单选类型未响应的Bug
## 2.2.3(2022-03-28)
- 修复 Vue3 下动态赋值未响应的Bug
## 2.2.2(2021-12-10)
- 修复 clear-icon 属性在小程序平台不生效的Bug
## 2.2.1(2021-12-10)
- 修复 日期范围选在小程序平台,必须多点击一次才能取消选中状态的Bug
## 2.2.0(2021-11-19)
- 优化 组件UI,并提供设计资源 [详情](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移 [https://uniapp.dcloud.io/component/uniui/uni-datetime-picker](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
## 2.1.5(2021-11-09)
- 新增 提供组件设计资源,组件样式调整
## 2.1.4(2021-09-10)
- 修复 hide-second 在移动端的Bug
- 修复 单选赋默认值时,赋值日期未高亮的Bug
- 修复 赋默认值时,移动端未正确显示时间的Bug
## 2.1.3(2021-09-09)
- 新增 hide-second 属性,支持只使用时分,隐藏秒
## 2.1.2(2021-09-03)
- 优化 取消选中时(范围选)直接开始下一次选择, 避免多点一次
- 优化 移动端支持清除按钮,同时支持通过 ref 调用组件的 clear 方法
- 优化 调整字号大小,美化日历界面
- 修复 因国际化导致的 placeholder 失效的Bug
## 2.1.1(2021-08-24)
- 新增 支持国际化
- 优化 范围选择器在 pc 端过宽的问题
## 2.1.0(2021-08-09)
- 新增 适配 vue3
## 2.0.19(2021-08-09)
- 新增 支持作为 uni-forms 子组件相关功能
- 修复 在 uni-forms 中使用时,选择时间报 NAN 错误的Bug
## 2.0.18(2021-08-05)
- 修复 type 属性动态赋值无效的Bug
- 修复 ‘确认’按钮被 tabbar 遮盖 bug
- 修复 组件未赋值时范围选左、右日历相同的Bug
## 2.0.17(2021-08-04)
- 修复 范围选未正确显示当前值的Bug
- 修复 h5 平台(移动端)报错 'cale' of undefined 的Bug
## 2.0.16(2021-07-21)
- 新增 return-type 属性支持返回 date 日期对象
## 2.0.15(2021-07-14)
- 修复 单选日期类型,初始赋值后不在当前日历的Bug
- 新增 clearIcon 属性,显示框的清空按钮可配置显示隐藏(仅 pc 有效)
- 优化 移动端移除显示框的清空按钮,无实际用途
## 2.0.14(2021-07-14)
- 修复 组件赋值为空,界面未更新的Bug
- 修复 start 和 end 不能动态赋值的Bug
- 修复 范围选类型,用户选择后再次选择右侧日历(结束日期)显示不正确的Bug
## 2.0.13(2021-07-08)
- 修复 范围选择不能动态赋值的Bug
## 2.0.12(2021-07-08)
- 修复 范围选择的初始时间在一个月内时,造成无法选择的bug
## 2.0.11(2021-07-08)
- 优化 弹出层在超出视窗边缘定位不准确的问题
## 2.0.10(2021-07-08)
- 修复 范围起始点样式的背景色与今日样式的字体前景色融合,导致日期字体看不清的Bug
- 优化 弹出层在超出视窗边缘被遮盖的问题
## 2.0.9(2021-07-07)
- 新增 maskClick 事件
- 修复 特殊情况日历 rpx 布局错误的Bug,rpx -> px
- 修复 范围选择时清空返回值不合理的bug,['', ''] -> []
## 2.0.8(2021-07-07)
- 新增 日期时间显示框支持插槽
## 2.0.7(2021-07-01)
- 优化 添加 uni-icons 依赖
## 2.0.6(2021-05-22)
- 修复 图标在小程序上不显示的Bug
- 优化 重命名引用组件,避免潜在组件命名冲突
## 2.0.5(2021-05-20)
- 优化 代码目录扁平化
## 2.0.4(2021-05-12)
- 新增 组件示例地址
## 2.0.3(2021-05-10)
- 修复 ios 下不识别 '-' 日期格式的Bug
- 优化 pc 下弹出层添加边框和阴影
## 2.0.2(2021-05-08)
- 修复 在 admin 中获取弹出层定位错误的bug
## 2.0.1(2021-05-08)
- 修复 type 属性向下兼容,默认值从 date 变更为 datetime
## 2.0.0(2021-04-30)
- 支持日历形式的日期+时间的范围选择
> 注意:此版本不向后兼容,不再支持单独时间选择(type=time)及相关的 hide-second 属性(时间选可使用内置组件 picker)
## 1.0.6(2021-03-18)
- 新增 hide-second 属性,时间支持仅选择时、分
- 修复 选择跟显示的日期不一样的Bug
- 修复 chang事件触发2次的Bug
- 修复 分、秒 end 范围错误的Bug
- 优化 更好的 nvue 适配
{
"id": "uni-datetime-picker",
"displayName": "uni-datetime-picker 日期选择器",
"version": "2.2.19",
"description": "uni-datetime-picker 日期时间选择器,支持日历,支持范围选择",
"keywords": [
"uni-datetime-picker",
"uni-ui",
"uniui",
"日期时间选择器",
"日期时间"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
"type": "component-vue"
},
"uni_modules": {
"dependencies": [
"uni-scss",
"uni-icons"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "n"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
> `重要通知:组件升级更新 2.0.0 后,支持日期+时间范围选择,组件 ui 将使用日历选择日期,ui 变化较大,同时支持 PC 和 移动端。此版本不向后兼容,不再支持单独的时间选择(type=time)及相关的 hide-second 属性(时间选可使用内置组件 picker)。若仍需使用旧版本,可在插件市场下载*非uni_modules版本*,旧版本将不再维护`
## DatetimePicker 时间选择器
> **组件名:uni-datetime-picker**
> 代码块: `uDatetimePicker`
该组件的优势是,支持**时间戳**输入和输出(起始时间、终止时间也支持时间戳),可**同时选择**日期和时间。
若只是需要单独选择日期和时间,不需要时间戳输入和输出,可使用原生的 picker 组件。
**_点击 picker 默认值规则:_**
- 若设置初始值 value, 会显示在 picker 显示框中
- 若无初始值 value,则初始值 value 为当前本地时间 Date.now(), 但不会显示在 picker 显示框中
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
\ No newline at end of file
## 1.0.3(2022-01-21)
- 优化 组件示例
## 1.0.2(2021-11-22)
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
## 1.0.1(2021-11-22)
- 修复 vue3中scss语法兼容问题
## 1.0.0(2021-11-18)
- init
@import './styles/index.scss';
{
"id": "uni-scss",
"displayName": "uni-scss 辅助样式",
"version": "1.0.3",
"description": "uni-sass是uni-ui提供的一套全局样式 ,通过一些简单的类名和sass变量,实现简单的页面布局操作,比如颜色、边距、圆角等。",
"keywords": [
"uni-scss",
"uni-ui",
"辅助样式"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"category": [
"JS SDK",
"通用 SDK"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "u"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "n",
"联盟": "n"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
`uni-sass``uni-ui`提供的一套全局样式 ,通过一些简单的类名和`sass`变量,实现简单的页面布局操作,比如颜色、边距、圆角等。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
\ No newline at end of file
@import './setting/_variables.scss';
@import './setting/_border.scss';
@import './setting/_color.scss';
@import './setting/_space.scss';
@import './setting/_radius.scss';
@import './setting/_text.scss';
@import './setting/_styles.scss';
.uni-border {
border: 1px $uni-border-1 solid;
}
\ No newline at end of file
// TODO 暂时不需要 class ,需要用户使用变量实现 ,如果使用类名其实并不推荐
// @mixin get-styles($k,$c) {
// @if $k == size or $k == weight{
// font-#{$k}:#{$c}
// }@else{
// #{$k}:#{$c}
// }
// }
$uni-ui-color:(
// 主色
primary: $uni-primary,
primary-disable: $uni-primary-disable,
primary-light: $uni-primary-light,
// 辅助色
success: $uni-success,
success-disable: $uni-success-disable,
success-light: $uni-success-light,
warning: $uni-warning,
warning-disable: $uni-warning-disable,
warning-light: $uni-warning-light,
error: $uni-error,
error-disable: $uni-error-disable,
error-light: $uni-error-light,
info: $uni-info,
info-disable: $uni-info-disable,
info-light: $uni-info-light,
// 中性色
main-color: $uni-main-color,
base-color: $uni-base-color,
secondary-color: $uni-secondary-color,
extra-color: $uni-extra-color,
// 背景色
bg-color: $uni-bg-color,
// 边框颜色
border-1: $uni-border-1,
border-2: $uni-border-2,
border-3: $uni-border-3,
border-4: $uni-border-4,
// 黑色
black:$uni-black,
// 白色
white:$uni-white,
// 透明
transparent:$uni-transparent
) !default;
@each $key, $child in $uni-ui-color {
.uni-#{"" + $key} {
color: $child;
}
.uni-#{"" + $key}-bg {
background-color: $child;
}
}
.uni-shadow-sm {
box-shadow: $uni-shadow-sm;
}
.uni-shadow-base {
box-shadow: $uni-shadow-base;
}
.uni-shadow-lg {
box-shadow: $uni-shadow-lg;
}
.uni-mask {
background-color:$uni-mask;
}
@mixin radius($r,$d:null ,$important: false){
$radius-value:map-get($uni-radius, $r) if($important, !important, null);
// Key exists within the $uni-radius variable
@if (map-has-key($uni-radius, $r) and $d){
@if $d == t {
border-top-left-radius:$radius-value;
border-top-right-radius:$radius-value;
}@else if $d == r {
border-top-right-radius:$radius-value;
border-bottom-right-radius:$radius-value;
}@else if $d == b {
border-bottom-left-radius:$radius-value;
border-bottom-right-radius:$radius-value;
}@else if $d == l {
border-top-left-radius:$radius-value;
border-bottom-left-radius:$radius-value;
}@else if $d == tl {
border-top-left-radius:$radius-value;
}@else if $d == tr {
border-top-right-radius:$radius-value;
}@else if $d == br {
border-bottom-right-radius:$radius-value;
}@else if $d == bl {
border-bottom-left-radius:$radius-value;
}
}@else{
border-radius:$radius-value;
}
}
@each $key, $child in $uni-radius {
@if($key){
.uni-radius-#{"" + $key} {
@include radius($key)
}
}@else{
.uni-radius {
@include radius($key)
}
}
}
@each $direction in t, r, b, l,tl, tr, br, bl {
@each $key, $child in $uni-radius {
@if($key){
.uni-radius-#{"" + $direction}-#{"" + $key} {
@include radius($key,$direction,false)
}
}@else{
.uni-radius-#{$direction} {
@include radius($key,$direction,false)
}
}
}
}
@mixin fn($space,$direction,$size,$n) {
@if $n {
#{$space}-#{$direction}: #{$size*$uni-space-root}px
} @else {
#{$space}-#{$direction}: #{-$size*$uni-space-root}px
}
}
@mixin get-styles($direction,$i,$space,$n){
@if $direction == t {
@include fn($space, top,$i,$n);
}
@if $direction == r {
@include fn($space, right,$i,$n);
}
@if $direction == b {
@include fn($space, bottom,$i,$n);
}
@if $direction == l {
@include fn($space, left,$i,$n);
}
@if $direction == x {
@include fn($space, left,$i,$n);
@include fn($space, right,$i,$n);
}
@if $direction == y {
@include fn($space, top,$i,$n);
@include fn($space, bottom,$i,$n);
}
@if $direction == a {
@if $n {
#{$space}:#{$i*$uni-space-root}px;
} @else {
#{$space}:#{-$i*$uni-space-root}px;
}
}
}
@each $orientation in m,p {
$space: margin;
@if $orientation == m {
$space: margin;
} @else {
$space: padding;
}
@for $i from 0 through 16 {
@each $direction in t, r, b, l, x, y, a {
.uni-#{$orientation}#{$direction}-#{$i} {
@include get-styles($direction,$i,$space,true);
}
.uni-#{$orientation}#{$direction}-n#{$i} {
@include get-styles($direction,$i,$space,false);
}
}
}
}
\ No newline at end of file
/* #ifndef APP-NVUE */
$-color-white:#fff;
$-color-black:#000;
@mixin base-style($color) {
color: #fff;
background-color: $color;
border-color: mix($-color-black, $color, 8%);
&:not([hover-class]):active {
background: mix($-color-black, $color, 10%);
border-color: mix($-color-black, $color, 20%);
color: $-color-white;
outline: none;
}
}
@mixin is-color($color) {
@include base-style($color);
&[loading] {
@include base-style($color);
&::before {
margin-right:5px;
}
}
&[disabled] {
&,
&[loading],
&:not([hover-class]):active {
color: $-color-white;
border-color: mix(darken($color,10%), $-color-white);
background-color: mix($color, $-color-white);
}
}
}
@mixin base-plain-style($color) {
color:$color;
background-color: mix($-color-white, $color, 90%);
border-color: mix($-color-white, $color, 70%);
&:not([hover-class]):active {
background: mix($-color-white, $color, 80%);
color: $color;
outline: none;
border-color: mix($-color-white, $color, 50%);
}
}
@mixin is-plain($color){
&[plain] {
@include base-plain-style($color);
&[loading] {
@include base-plain-style($color);
&::before {
margin-right:5px;
}
}
&[disabled] {
&,
&:active {
color: mix($-color-white, $color, 40%);
background-color: mix($-color-white, $color, 90%);
border-color: mix($-color-white, $color, 80%);
}
}
}
}
.uni-btn {
margin: 5px;
color: #393939;
border:1px solid #ccc;
font-size: 16px;
font-weight: 200;
background-color: #F9F9F9;
// TODO 暂时处理边框隐藏一边的问题
overflow: visible;
&::after{
border: none;
}
&:not([type]),&[type=default] {
color: #999;
&[loading] {
background: none;
&::before {
margin-right:5px;
}
}
&[disabled]{
color: mix($-color-white, #999, 60%);
&,
&[loading],
&:active {
color: mix($-color-white, #999, 60%);
background-color: mix($-color-white,$-color-black , 98%);
border-color: mix($-color-white, #999, 85%);
}
}
&[plain] {
color: #999;
background: none;
border-color: $uni-border-1;
&:not([hover-class]):active {
background: none;
color: mix($-color-white, $-color-black, 80%);
border-color: mix($-color-white, $-color-black, 90%);
outline: none;
}
&[disabled]{
&,
&[loading],
&:active {
background: none;
color: mix($-color-white, #999, 60%);
border-color: mix($-color-white, #999, 85%);
}
}
}
}
&:not([hover-class]):active {
color: mix($-color-white, $-color-black, 50%);
}
&[size=mini] {
font-size: 16px;
font-weight: 200;
border-radius: 8px;
}
&.uni-btn-small {
font-size: 14px;
}
&.uni-btn-mini {
font-size: 12px;
}
&.uni-btn-radius {
border-radius: 999px;
}
&[type=primary] {
@include is-color($uni-primary);
@include is-plain($uni-primary)
}
&[type=success] {
@include is-color($uni-success);
@include is-plain($uni-success)
}
&[type=error] {
@include is-color($uni-error);
@include is-plain($uni-error)
}
&[type=warning] {
@include is-color($uni-warning);
@include is-plain($uni-warning)
}
&[type=info] {
@include is-color($uni-info);
@include is-plain($uni-info)
}
}
/* #endif */
@mixin get-styles($k,$c) {
@if $k == size or $k == weight{
font-#{$k}:#{$c}
}@else{
#{$k}:#{$c}
}
}
@each $key, $child in $uni-headings {
/* #ifndef APP-NVUE */
.uni-#{$key} {
@each $k, $c in $child {
@include get-styles($k,$c)
}
}
/* #endif */
/* #ifdef APP-NVUE */
.container .uni-#{$key} {
@each $k, $c in $child {
@include get-styles($k,$c)
}
}
/* #endif */
}
// @use "sass:math";
@import '../tools/functions.scss';
// 间距基础倍数
$uni-space-root: 2 !default;
// 边框半径默认值
$uni-radius-root:5px !default;
$uni-radius: () !default;
// 边框半径断点
$uni-radius: map-deep-merge(
(
0: 0,
// TODO 当前版本暂时不支持 sm 属性
// 'sm': math.div($uni-radius-root, 2),
null: $uni-radius-root,
'lg': $uni-radius-root * 2,
'xl': $uni-radius-root * 6,
'pill': 9999px,
'circle': 50%
),
$uni-radius
);
// 字体家族
$body-font-family: 'Roboto', sans-serif !default;
// 文本
$heading-font-family: $body-font-family !default;
$uni-headings: () !default;
$letterSpacing: -0.01562em;
$uni-headings: map-deep-merge(
(
'h1': (
size: 32px,
weight: 300,
line-height: 50px,
// letter-spacing:-0.01562em
),
'h2': (
size: 28px,
weight: 300,
line-height: 40px,
// letter-spacing: -0.00833em
),
'h3': (
size: 24px,
weight: 400,
line-height: 32px,
// letter-spacing: normal
),
'h4': (
size: 20px,
weight: 400,
line-height: 30px,
// letter-spacing: 0.00735em
),
'h5': (
size: 16px,
weight: 400,
line-height: 24px,
// letter-spacing: normal
),
'h6': (
size: 14px,
weight: 500,
line-height: 18px,
// letter-spacing: 0.0125em
),
'subtitle': (
size: 12px,
weight: 400,
line-height: 20px,
// letter-spacing: 0.00937em
),
'body': (
font-size: 14px,
font-weight: 400,
line-height: 22px,
// letter-spacing: 0.03125em
),
'caption': (
'size': 12px,
'weight': 400,
'line-height': 20px,
// 'letter-spacing': 0.03333em,
// 'text-transform': false
)
),
$uni-headings
);
// 主色
$uni-primary: #2979ff !default;
$uni-primary-disable:lighten($uni-primary,20%) !default;
$uni-primary-light: lighten($uni-primary,25%) !default;
// 辅助色
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。
$uni-success: #18bc37 !default;
$uni-success-disable:lighten($uni-success,20%) !default;
$uni-success-light: lighten($uni-success,25%) !default;
$uni-warning: #f3a73f !default;
$uni-warning-disable:lighten($uni-warning,20%) !default;
$uni-warning-light: lighten($uni-warning,25%) !default;
$uni-error: #e43d33 !default;
$uni-error-disable:lighten($uni-error,20%) !default;
$uni-error-light: lighten($uni-error,25%) !default;
$uni-info: #8f939c !default;
$uni-info-disable:lighten($uni-info,20%) !default;
$uni-info-light: lighten($uni-info,25%) !default;
// 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。
$uni-main-color: #3a3a3a !default; // 主要文字
$uni-base-color: #6a6a6a !default; // 常规文字
$uni-secondary-color: #909399 !default; // 次要文字
$uni-extra-color: #c7c7c7 !default; // 辅助说明
// 边框颜色
$uni-border-1: #F0F0F0 !default;
$uni-border-2: #EDEDED !default;
$uni-border-3: #DCDCDC !default;
$uni-border-4: #B9B9B9 !default;
// 常规色
$uni-black: #000000 !default;
$uni-white: #ffffff !default;
$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
// 背景色
$uni-bg-color: #f7f7f7 !default;
/* 水平间距 */
$uni-spacing-sm: 8px !default;
$uni-spacing-base: 15px !default;
$uni-spacing-lg: 30px !default;
// 阴影
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
// 蒙版
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;
// 合并 map
@function map-deep-merge($parent-map, $child-map){
$result: $parent-map;
@each $key, $child in $child-map {
$parent-has-key: map-has-key($result, $key);
$parent-value: map-get($result, $key);
$parent-type: type-of($parent-value);
$child-type: type-of($child);
$parent-is-map: $parent-type == map;
$child-is-map: $child-type == map;
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
$result: map-merge($result, ( $key: $child ));
}@else {
$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
}
}
@return $result;
};
// 间距基础倍数
$uni-space-root: 2;
// 边框半径默认值
$uni-radius-root:5px;
// 主色
$uni-primary: #2979ff;
// 辅助色
$uni-success: #4cd964;
// 警告色
$uni-warning: #f0ad4e;
// 错误色
$uni-error: #dd524d;
// 描述色
$uni-info: #909399;
// 中性色
$uni-main-color: #303133;
$uni-base-color: #606266;
$uni-secondary-color: #909399;
$uni-extra-color: #C0C4CC;
// 背景色
$uni-bg-color: #f5f5f5;
// 边框颜色
$uni-border-1: #DCDFE6;
$uni-border-2: #E4E7ED;
$uni-border-3: #EBEEF5;
$uni-border-4: #F2F6FC;
// 常规色
$uni-black: #000000;
$uni-white: #ffffff;
$uni-transparent: rgba($color: #000000, $alpha: 0);
@import './styles/setting/_variables.scss';
// 间距基础倍数
$uni-space-root: 2;
// 边框半径默认值
$uni-radius-root:5px;
// 主色
$uni-primary: #2979ff;
$uni-primary-disable:mix(#fff,$uni-primary,50%);
$uni-primary-light: mix(#fff,$uni-primary,80%);
// 辅助色
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。
$uni-success: #18bc37;
$uni-success-disable:mix(#fff,$uni-success,50%);
$uni-success-light: mix(#fff,$uni-success,80%);
$uni-warning: #f3a73f;
$uni-warning-disable:mix(#fff,$uni-warning,50%);
$uni-warning-light: mix(#fff,$uni-warning,80%);
$uni-error: #e43d33;
$uni-error-disable:mix(#fff,$uni-error,50%);
$uni-error-light: mix(#fff,$uni-error,80%);
$uni-info: #8f939c;
$uni-info-disable:mix(#fff,$uni-info,50%);
$uni-info-light: mix(#fff,$uni-info,80%);
// 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。
$uni-main-color: #3a3a3a; // 主要文字
$uni-base-color: #6a6a6a; // 常规文字
$uni-secondary-color: #909399; // 次要文字
$uni-extra-color: #c7c7c7; // 辅助说明
// 边框颜色
$uni-border-1: #F0F0F0;
$uni-border-2: #EDEDED;
$uni-border-3: #DCDCDC;
$uni-border-4: #B9B9B9;
// 常规色
$uni-black: #000000;
$uni-white: #ffffff;
$uni-transparent: rgba($color: #000000, $alpha: 0);
// 背景色
$uni-bg-color: #f7f7f7;
/* 水平间距 */
$uni-spacing-sm: 8px;
$uni-spacing-base: 15px;
$uni-spacing-lg: 30px;
// 阴影
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
// 蒙版
$uni-mask: rgba($color: #000000, $alpha: 0.4);
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
Please register or to comment