41 changed files with 3568 additions and 333 deletions
@ -1,99 +1,113 @@ |
|||
<script> |
|||
import { ref, computed } from 'vue'; |
|||
import store from '@/store/index.js'; |
|||
|
|||
export default { |
|||
setup() { |
|||
return {}; |
|||
}, |
|||
|
|||
async onLaunch(options) { |
|||
this.checkNetwork(); // 监听网络状态 |
|||
this.getSystemInfo(); // 获取系统设备信息 |
|||
|
|||
// 登录 - H5、APP |
|||
/* #ifndef MP-WEIXIN */ |
|||
if (!store.state.user.token) { |
|||
// 不论有没有token都直接从userId获取token |
|||
// token有过期时间 从本地获取可能是过期 干脆直接从userId获取 |
|||
if (!options.query || !options.query.u) { |
|||
// 参数里没有u (userId)提示 |
|||
this.$ui.showToast('缺少用户信息参数'); |
|||
} else { |
|||
const data = await store.dispatch('user/getToken', options.query.u); |
|||
this.noPhone(data.phone); |
|||
} |
|||
} |
|||
/* #endif */ |
|||
|
|||
store.dispatch('socket/initSocket'); |
|||
}, |
|||
|
|||
methods: { |
|||
// 检查网络状态 设置store里的网络状态变量 |
|||
// 网络连接 且 不是2g 不是3g 才算是网络连接; 否则不是 将启用本地存储 |
|||
checkNetwork() { |
|||
uni.getNetworkType({ |
|||
success: ({ networkType }) => { |
|||
store.commit('setNetworkConnected', !(networkType === 'none' || networkType === '2g' || networkType === '3g')); |
|||
}, |
|||
}); |
|||
// 监听网络状态的变化 |
|||
uni.onNetworkStatusChange(({ isConnected, networkType }) => { |
|||
store.commit('setNetworkConnected', isConnected && !(networkType === '2g' || networkType === '3g')); |
|||
}); |
|||
}, |
|||
|
|||
// 获取系统设备信息 |
|||
getSystemInfo() { |
|||
uni.getSystemInfo({ |
|||
success: result => { |
|||
store.commit('setSystemInfo', result); |
|||
}, |
|||
fail: error => { |
|||
console.error('getSystemInfo fail:', error); |
|||
}, |
|||
}); |
|||
}, |
|||
|
|||
// 登录 |
|||
async signin() { |
|||
try { |
|||
const data = await uni.$u.api.signin(); |
|||
if (data && data.token) { |
|||
store.commit('user/setUser', data); |
|||
store.commit('user/setToken', data.token); |
|||
noPhone(data.phone); |
|||
} else { |
|||
uni.$ui.showToast('返回数据异常'); |
|||
} |
|||
} catch (error) { |
|||
console.error('error: ', error); |
|||
uni.$ui.showToast(error || '登录失败'); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 没有手机号 跳转绑定手机号的界面 |
|||
* @param {string} phone |
|||
*/ |
|||
async noPhone(phone) { |
|||
if (!phone) { |
|||
uni.navigateTo({ title: '/pages/phone-bind/phone-bind' }); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
/*每个页面公共css */ |
|||
@import "@/uni_modules/vk-uview-ui/index.scss"; |
|||
@import '@/common/styles/iconfont.scss'; |
|||
@import '@/common/styles/app.scss'; |
|||
@import '@/common/styles/tailwind.scss'; |
|||
|
|||
page { |
|||
height: 100%; |
|||
} |
|||
<script> |
|||
import useGetToken from "@/hooks/user/useGetToken"; |
|||
|
|||
export default { |
|||
async onLaunch(options) { |
|||
console.log('onLaunch options: ', options); |
|||
this.checkNetwork(); // 监听网络状态 |
|||
this.getSystemInfo(); // 获取系统设备信息、 |
|||
this.syncLocalDataToStore(options.query.u); // 将localStorage里的数据同步到store里 |
|||
|
|||
const token = await useGetToken(); |
|||
if (!token) { |
|||
this.$ui.showToast('获取用户信息失败, 请登录'); |
|||
// TODO: 跳转登录界面 |
|||
return; |
|||
} |
|||
this.noPhone(this.$store.state.user.phone); |
|||
this.$store.dispatch('socket/initSocket'); |
|||
}, |
|||
|
|||
methods: { |
|||
/** |
|||
* 将localStorage里的数据同步到store里 |
|||
* user, token, tokenExpiredTime |
|||
*/ |
|||
syncLocalDataToStore(urlUserId) { |
|||
const localUser = uni.$storage.getStorageSync('user'); |
|||
const localToken = uni.$storage.getStorageSync('anyringToken'); |
|||
const tokenExpiredTime = uni.$storage.getStorageSync('tokenExpiredTime'); |
|||
if (!this.$store.state.user.user && localUser) { |
|||
// 同步user信息 |
|||
const user = JSON.parse(localUser); |
|||
if (!urlUserId || user.id === urlUserId) { |
|||
this.$store.commit('user/setUser', user); |
|||
} else { |
|||
this.$store.commit('user/setUser', { id: urlUserId }); |
|||
} |
|||
} |
|||
if (this.$store.state.user.token && localToken) { // 同步token |
|||
this.$store.commit('user/setToken', localToken); |
|||
} |
|||
if (this.$store.state.user.tokenExpiredTime && tokenExpiredTime) { // 同步tokenExpiredTime |
|||
this.$store.commit('user/setTokenExpiredTime', +tokenExpiredTime); |
|||
} |
|||
}, |
|||
|
|||
// 检查网络状态 设置store里的网络状态变量 |
|||
// 网络连接 且 不是2g 不是3g 才算是网络连接; 否则不是 将启用本地存储 |
|||
checkNetwork() { |
|||
uni.getNetworkType({ |
|||
success: ({ networkType }) => { |
|||
this.$store.commit('setNetworkConnected', !(networkType === 'none' || networkType === '2g' || networkType === '3g')); |
|||
}, |
|||
}); |
|||
// 监听网络状态的变化 |
|||
uni.onNetworkStatusChange(({ isConnected, networkType }) => { |
|||
this.$store.commit('setNetworkConnected', isConnected && !(networkType === '2g' || networkType === '3g')); |
|||
}); |
|||
}, |
|||
|
|||
// 获取系统设备信息 |
|||
getSystemInfo() { |
|||
uni.getSystemInfo({ |
|||
success: result => { |
|||
this.$store.commit('setSystemInfo', result); |
|||
}, |
|||
fail: error => { |
|||
console.error('getSystemInfo fail:', error); |
|||
}, |
|||
}); |
|||
}, |
|||
|
|||
// 登录 |
|||
async signin() { |
|||
try { |
|||
const data = await uni.$u.api.signin(); |
|||
if (data && data.token) { |
|||
this.$store.commit('user/setUser', data); |
|||
this.$store.commit('user/setToken', data.token); |
|||
noPhone(data.phone); |
|||
} else { |
|||
uni.$ui.showToast('返回数据异常'); |
|||
} |
|||
} catch (error) { |
|||
console.error('error: ', error); |
|||
uni.$ui.showToast(error || '登录失败'); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 没有手机号 跳转绑定手机号的界面 |
|||
* @param {string} phone |
|||
*/ |
|||
async noPhone(phone) { |
|||
if (!phone) { |
|||
uni.navigateTo({ title: '/pages/phone-bind/phone-bind' }); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
/*每个页面公共css */ |
|||
@import "@/uni_modules/vk-uview-ui/index.scss"; |
|||
@import '@/common/styles/iconfont.scss'; |
|||
@import '@/common/styles/app.scss'; |
|||
@import '@/common/styles/tailwind.scss'; |
|||
|
|||
page { |
|||
height: 100%; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,36 @@ |
|||
import { computed } from 'vue'; |
|||
import { useStore } from 'vuex'; |
|||
|
|||
/** |
|||
* 初始化 |
|||
* token 及 userId处理： |
|||
* 1.1 store里有token 且没过期直接：使用store的token √ |
|||
* 1.2 store里的token不可用 查localStorage |
|||
* 因为一开始就将local的数据同步到了store里所以不用管local的数据了 |
|||
* 2. store里token不可用 查userId 通过store里的userId获取token |
|||
* url 与 local的userId 一开始就同步到了store里所以不用考虑 |
|||
* @param {object | null} options |
|||
*/ |
|||
export default async function useGetToken() { |
|||
const store = useStore(); |
|||
const token = computed(() => store.state.user.token); |
|||
const tokenIsAvailable = computed(() => store.getters['user/tokenIsAvailable']); // token是否可用
|
|||
const userId = computed(() => store.getters['user/userId']); |
|||
if (token.value && tokenIsAvailable.value) { |
|||
// 1.1 store里有token 且没过期直接：使用store的token
|
|||
return token.value; |
|||
} else { |
|||
// 2. 根据userId获取token
|
|||
if (userId.value) { |
|||
try { |
|||
const { token } = await store.dispatch('user/getTokenByUserId', userId.value); |
|||
return token; |
|||
} catch (error) { |
|||
console.error('error: ', error); |
|||
return null; |
|||
} |
|||
} else { |
|||
return null; |
|||
} |
|||
} |
|||
} |
|||
@ -1,58 +1,55 @@ |
|||
import { createSSRApp } from 'vue'; |
|||
import App from './App'; |
|||
import uView from './uni_modules/vk-uview-ui'; // 引入 uView UI
|
|||
import store from "./store"; |
|||
import { setupHttp } from '@/utils/request.js'; |
|||
import { setupTall } from '@/apis/tall.js'; |
|||
import { setupProject } from '@/apis/project.js'; |
|||
import { setupRole } from '@/apis/role.js'; |
|||
import { setupTask } from '@/apis/task.js'; |
|||
import { setupWbs } from '@/apis/wbs.js' |
|||
import dayjs from 'dayjs'; |
|||
import 'dayjs/locale/zh-cn'; |
|||
|
|||
import cache from '@/utils/cache.js'; |
|||
import cacheAndRequest from '@/utils/cacheAndRequest.js'; |
|||
import storage from '@/utils/storage.js'; |
|||
import time from '@/utils/time.js'; |
|||
import ui from '@/utils/ui.js'; |
|||
import upload from '@/utils/upload.js'; |
|||
import task from '@/utils/task.js'; |
|||
import timeConfig from '@/config/time'; |
|||
|
|||
export function createApp() { |
|||
const app = createSSRApp(App) |
|||
|
|||
app.use(uView); // 使用 uView UI
|
|||
app.use(store); |
|||
setupHttp(app); |
|||
setupTall(app); |
|||
setupProject(app); |
|||
setupRole(app); |
|||
setupTask(app); |
|||
setupWbs(app); |
|||
|
|||
dayjs.locale('zh-cn'); |
|||
|
|||
app.config.globalProperties.$cache = cache; |
|||
app.config.globalProperties.$catchReq = cacheAndRequest; |
|||
app.config.globalProperties.$storage = storage; |
|||
app.config.globalProperties.$time = time; |
|||
app.config.globalProperties.$ui = ui; |
|||
app.config.globalProperties.$upload = upload; |
|||
app.config.globalProperties.$task = task; |
|||
app.config.globalProperties.$timeConfig = timeConfig; |
|||
|
|||
uni.$cache = cache; |
|||
uni.$catchReq = cacheAndRequest; |
|||
uni.$storage = storage; |
|||
uni.$time = time; |
|||
uni.$ui = ui; |
|||
uni.$upload = upload; |
|||
uni.$task = task; |
|||
uni.$timeConfig = timeConfig; |
|||
|
|||
return { |
|||
app |
|||
} |
|||
import App from './App'; |
|||
import cache from '@/utils/cache.js'; |
|||
import cacheAndRequest from '@/utils/cacheAndRequest.js'; |
|||
import { createSSRApp } from 'vue'; |
|||
import { setupDayjs } from '@/utils/dayjs.js'; |
|||
import { setupHttp } from '@/utils/request.js'; |
|||
import { setupProject } from '@/apis/project.js'; |
|||
import { setupRole } from '@/apis/role.js'; |
|||
import { setupTall } from '@/apis/tall.js'; |
|||
import { setupTask } from '@/apis/task.js'; |
|||
import { setupWbs } from '@/apis/wbs.js'; |
|||
import storage from '@/utils/storage.js'; |
|||
import store from './store'; |
|||
import task from '@/utils/task.js'; |
|||
import time from '@/utils/time.js'; |
|||
import timeConfig from '@/config/time'; |
|||
import uView from './uni_modules/vk-uview-ui'; // 引入 uView UI
|
|||
import ui from '@/utils/ui.js'; |
|||
import upload from '@/utils/upload.js'; |
|||
|
|||
export function createApp() { |
|||
const app = createSSRApp(App); |
|||
|
|||
app.config.globalProperties.$cache = cache; |
|||
app.config.globalProperties.$catchReq = cacheAndRequest; |
|||
app.config.globalProperties.$storage = storage; |
|||
app.config.globalProperties.$time = time; |
|||
app.config.globalProperties.$ui = ui; |
|||
app.config.globalProperties.$upload = upload; |
|||
app.config.globalProperties.$task = task; |
|||
app.config.globalProperties.$timeConfig = timeConfig; |
|||
|
|||
uni.$cache = cache; |
|||
uni.$catchReq = cacheAndRequest; |
|||
uni.$storage = storage; |
|||
uni.$time = time; |
|||
uni.$ui = ui; |
|||
uni.$upload = upload; |
|||
uni.$task = task; |
|||
uni.$timeConfig = timeConfig; |
|||
|
|||
setupDayjs(app); |
|||
app.use(uView); // 使用 uView UI
|
|||
app.use(store); |
|||
setupHttp(app); |
|||
setupTall(app); |
|||
setupProject(app); |
|||
setupRole(app); |
|||
setupTask(app); |
|||
setupWbs(app); |
|||
|
|||
return { |
|||
app, |
|||
}; |
|||
} |
|||
|
|||
@ -1,21 +1,24 @@ |
|||
import ui from '@/utils/ui.js'; |
|||
|
|||
const actions = { |
|||
/** |
|||
* 通过userId获取token |
|||
* @param {any} commit |
|||
* @param {string} userId 用户id |
|||
*/ |
|||
async getToken({ commit }, userId) { |
|||
try { |
|||
const res = await uni.$u.api.getToken(userId); |
|||
commit('setToken', res.token); |
|||
commit('setUser', res); |
|||
return res; |
|||
} catch (error) { |
|||
ui.showToast(error.msg || '获取个人信息失败'); |
|||
} |
|||
}, |
|||
}; |
|||
|
|||
import ui from '@/utils/ui.js'; |
|||
|
|||
const actions = { |
|||
/** |
|||
* 通过userId获取token |
|||
* @param {any} commit |
|||
* @param {string} userId 用户id |
|||
*/ |
|||
async getTokenByUserId({ commit }, userId) { |
|||
try { |
|||
const res = await uni.$u.api.getToken(userId); |
|||
commit('setToken', res.token); |
|||
commit('setUser', res); |
|||
uni.$storage.setStorageSync('anyringToken', res.token || ''); |
|||
uni.$storage.setStorageSync('user', JSON.stringify(res)); |
|||
return res; |
|||
} catch (error) { |
|||
ui.showToast(error.msg || '获取个人信息失败'); |
|||
throw error; |
|||
} |
|||
}, |
|||
}; |
|||
|
|||
export default actions; |
|||
|
|||
@ -1,14 +1,21 @@ |
|||
const getters = { |
|||
// 获取用户的id
|
|||
userId({ user }) { |
|||
try { |
|||
if (!user) return ''; |
|||
return user.id; |
|||
} catch (error) { |
|||
console.warn("user's getters 获取userId失败", error); |
|||
return ''; |
|||
} |
|||
}, |
|||
}; |
|||
|
|||
export default getters; |
|||
import { dayjs } from '@/utils/dayjs'; |
|||
|
|||
const getters = { |
|||
// 获取用户的id
|
|||
userId({ user }) { |
|||
try { |
|||
if (!user) return ''; |
|||
return user.id; |
|||
} catch (error) { |
|||
console.warn("user's getters 获取userId失败", error); |
|||
return ''; |
|||
} |
|||
}, |
|||
|
|||
// token是否过期
|
|||
tokenIsAvailable({ tokenExpiredTime }) { |
|||
return dayjs().isSameOrBefore(tokenExpiredTime); |
|||
}, |
|||
}; |
|||
|
|||
export default getters; |
|||
|
|||
@ -1,28 +1,35 @@ |
|||
import storage from '@/utils/storage.js'; |
|||
|
|||
const mutations = { |
|||
/** |
|||
* 设置存储token |
|||
* @param {object} state |
|||
* @param {string} token |
|||
*/ |
|||
setToken(state, token) { |
|||
state.token = token || ''; |
|||
storage.setStorageSync('anyringToken', token || ''); |
|||
}, |
|||
|
|||
/** |
|||
* 设置user数据 |
|||
* @param {object} state |
|||
* @param {object} user |
|||
*/ |
|||
setUser(state, user) { |
|||
if (!user) return; |
|||
state.user = { |
|||
...user |
|||
}; |
|||
storage.setStorageSync('user', JSON.stringify(user)); |
|||
}, |
|||
}; |
|||
|
|||
import storage from '@/utils/storage.js'; |
|||
|
|||
const mutations = { |
|||
/** |
|||
* 设置存储token |
|||
* @param {object} state |
|||
* @param {string} token |
|||
*/ |
|||
setToken(state, token) { |
|||
state.token = token || ''; |
|||
}, |
|||
|
|||
/** |
|||
* 设置user数据 |
|||
* @param {object} state |
|||
* @param {object} user |
|||
*/ |
|||
setUser(state, user) { |
|||
if (!user) return; |
|||
state.user = { |
|||
...user, |
|||
}; |
|||
}, |
|||
|
|||
/** |
|||
* 设置user数据 |
|||
* @param {object} state |
|||
* @param {number} tokenExpiredTime 过期时间ms |
|||
*/ |
|||
setTokenExpiredTime(state, tokenExpiredTime) { |
|||
state.tokenExpiredTime = tokenExpiredTime; |
|||
}, |
|||
}; |
|||
|
|||
export default mutations; |
|||
|
|||
@ -1,5 +1,8 @@ |
|||
const state = { |
|||
token: '', |
|||
user: null, |
|||
}; |
|||
export default state; |
|||
import { dayjs } from '@/utils/dayjs'; |
|||
|
|||
const state = { |
|||
token: '', |
|||
tokenExpiredTime: dayjs().add('1', 'day'), // DEBUG:
|
|||
user: null, |
|||
}; |
|||
export default state; |
|||
|
|||
@ -0,0 +1,16 @@ |
|||
## 1.3.2（2021-12-01） |
|||
- 优化 示例可复制图标名称 |
|||
## 1.3.1（2021-11-23） |
|||
- 优化 兼容旧组件 type 值 |
|||
## 1.3.0（2021-11-19） |
|||
- 新增 更多图标 |
|||
- 优化 自定义图标使用方式 |
|||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) |
|||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-icons](https://uniapp.dcloud.io/component/uniui/uni-icons) |
|||
## 1.1.7（2021-11-08） |
|||
## 1.2.0（2021-07-30） |
|||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) |
|||
## 1.1.5（2021-05-12） |
|||
- 新增 组件示例地址 |
|||
## 1.1.4（2021-02-05） |
|||
- 调整为uni_modules目录规范 |
|||
File diff suppressed because it is too large
@ -0,0 +1,89 @@ |
|||
<template> |
|||
<!-- #ifdef APP-NVUE --> |
|||
<text :style="{ color: color, 'font-size': size + 'px' }" class="uni-icons" @click="_onClick">{{unicode}}</text> |
|||
<!-- #endif --> |
|||
<!-- #ifndef APP-NVUE --> |
|||
<text :style="{ color: color, 'font-size': size + 'px' }" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"></text> |
|||
<!-- #endif --> |
|||
</template> |
|||
|
|||
<script> |
|||
import icons from './icons.js'; |
|||
// #ifdef APP-NVUE |
|||
var domModule = weex.requireModule('dom'); |
|||
import iconUrl from './uniicons.ttf' |
|||
domModule.addRule('fontFace', { |
|||
'fontFamily': "uniicons", |
|||
'src': "url('"+iconUrl+"')" |
|||
}); |
|||
// #endif |
|||
|
|||
/** |
|||
* Icons 图标 |
|||
* @description 用于展示 icons 图标 |
|||
* @tutorial https://ext.dcloud.net.cn/plugin?id=28 |
|||
* @property {Number} size 图标大小 |
|||
* @property {String} type 图标图案，参考示例 |
|||
* @property {String} color 图标颜色 |
|||
* @property {String} customPrefix 自定义图标 |
|||
* @event {Function} click 点击 Icon 触发事件 |
|||
*/ |
|||
export default { |
|||
name: 'UniIcons', |
|||
emits:['click'], |
|||
props: { |
|||
type: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
color: { |
|||
type: String, |
|||
default: '#333333' |
|||
}, |
|||
size: { |
|||
type: [Number, String], |
|||
default: 16 |
|||
}, |
|||
customPrefix:{ |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
icons: icons.glyphs |
|||
} |
|||
}, |
|||
computed:{ |
|||
unicode(){ |
|||
let code = this.icons.find(v=>v.font_class === this.type) |
|||
if(code){ |
|||
return unescape(`%u${code.unicode}`) |
|||
} |
|||
return '' |
|||
} |
|||
}, |
|||
methods: { |
|||
_onClick() { |
|||
this.$emit('click') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
/* #ifndef APP-NVUE */ |
|||
@import './uniicons.css'; |
|||
@font-face { |
|||
font-family: uniicons; |
|||
src: url('./uniicons.ttf') format('truetype'); |
|||
} |
|||
|
|||
/* #endif */ |
|||
.uni-icons { |
|||
font-family: uniicons; |
|||
text-decoration: none; |
|||
text-align: center; |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,663 @@ |
|||
.uniui-color:before { |
|||
content: "\e6cf"; |
|||
} |
|||
|
|||
.uniui-wallet:before { |
|||
content: "\e6b1"; |
|||
} |
|||
|
|||
.uniui-settings-filled:before { |
|||
content: "\e6ce"; |
|||
} |
|||
|
|||
.uniui-auth-filled:before { |
|||
content: "\e6cc"; |
|||
} |
|||
|
|||
.uniui-shop-filled:before { |
|||
content: "\e6cd"; |
|||
} |
|||
|
|||
.uniui-staff-filled:before { |
|||
content: "\e6cb"; |
|||
} |
|||
|
|||
.uniui-vip-filled:before { |
|||
content: "\e6c6"; |
|||
} |
|||
|
|||
.uniui-plus-filled:before { |
|||
content: "\e6c7"; |
|||
} |
|||
|
|||
.uniui-folder-add-filled:before { |
|||
content: "\e6c8"; |
|||
} |
|||
|
|||
.uniui-color-filled:before { |
|||
content: "\e6c9"; |
|||
} |
|||
|
|||
.uniui-tune-filled:before { |
|||
content: "\e6ca"; |
|||
} |
|||
|
|||
.uniui-calendar-filled:before { |
|||
content: "\e6c0"; |
|||
} |
|||
|
|||
.uniui-notification-filled:before { |
|||
content: "\e6c1"; |
|||
} |
|||
|
|||
.uniui-wallet-filled:before { |
|||
content: "\e6c2"; |
|||
} |
|||
|
|||
.uniui-medal-filled:before { |
|||
content: "\e6c3"; |
|||
} |
|||
|
|||
.uniui-gift-filled:before { |
|||
content: "\e6c4"; |
|||
} |
|||
|
|||
.uniui-fire-filled:before { |
|||
content: "\e6c5"; |
|||
} |
|||
|
|||
.uniui-refreshempty:before { |
|||
content: "\e6bf"; |
|||
} |
|||
|
|||
.uniui-location-filled:before { |
|||
content: "\e6af"; |
|||
} |
|||
|
|||
.uniui-person-filled:before { |
|||
content: "\e69d"; |
|||
} |
|||
|
|||
.uniui-personadd-filled:before { |
|||
content: "\e698"; |
|||
} |
|||
|
|||
.uniui-back:before { |
|||
content: "\e6b9"; |
|||
} |
|||
|
|||
.uniui-forward:before { |
|||
content: "\e6ba"; |
|||
} |
|||
|
|||
.uniui-arrow-right:before { |
|||
content: "\e6bb"; |
|||
} |
|||
|
|||
.uniui-arrowthinright:before { |
|||
content: "\e6bb"; |
|||
} |
|||
|
|||
.uniui-arrow-left:before { |
|||
content: "\e6bc"; |
|||
} |
|||
|
|||
.uniui-arrowthinleft:before { |
|||
content: "\e6bc"; |
|||
} |
|||
|
|||
.uniui-arrow-up:before { |
|||
content: "\e6bd"; |
|||
} |
|||
|
|||
.uniui-arrowthinup:before { |
|||
content: "\e6bd"; |
|||
} |
|||
|
|||
.uniui-arrow-down:before { |
|||
content: "\e6be"; |
|||
} |
|||
|
|||
.uniui-arrowthindown:before { |
|||
content: "\e6be"; |
|||
} |
|||
|
|||
.uniui-bottom:before { |
|||
content: "\e6b8"; |
|||
} |
|||
|
|||
.uniui-arrowdown:before { |
|||
content: "\e6b8"; |
|||
} |
|||
|
|||
.uniui-right:before { |
|||
content: "\e6b5"; |
|||
} |
|||
|
|||
.uniui-arrowright:before { |
|||
content: "\e6b5"; |
|||
} |
|||
|
|||
.uniui-top:before { |
|||
content: "\e6b6"; |
|||
} |
|||
|
|||
.uniui-arrowup:before { |
|||
content: "\e6b6"; |
|||
} |
|||
|
|||
.uniui-left:before { |
|||
content: "\e6b7"; |
|||
} |
|||
|
|||
.uniui-arrowleft:before { |
|||
content: "\e6b7"; |
|||
} |
|||
|
|||
.uniui-eye:before { |
|||
content: "\e651"; |
|||
} |
|||
|
|||
.uniui-eye-filled:before { |
|||
content: "\e66a"; |
|||
} |
|||
|
|||
.uniui-eye-slash:before { |
|||
content: "\e6b3"; |
|||
} |
|||
|
|||
.uniui-eye-slash-filled:before { |
|||
content: "\e6b4"; |
|||
} |
|||
|
|||
.uniui-info-filled:before { |
|||
content: "\e649"; |
|||
} |
|||
|
|||
.uniui-reload:before { |
|||
content: "\e6b2"; |
|||
} |
|||
|
|||
.uniui-micoff-filled:before { |
|||
content: "\e6b0"; |
|||
} |
|||
|
|||
.uniui-map-pin-ellipse:before { |
|||
content: "\e6ac"; |
|||
} |
|||
|
|||
.uniui-map-pin:before { |
|||
content: "\e6ad"; |
|||
} |
|||
|
|||
.uniui-location:before { |
|||
content: "\e6ae"; |
|||
} |
|||
|
|||
.uniui-starhalf:before { |
|||
content: "\e683"; |
|||
} |
|||
|
|||
.uniui-star:before { |
|||
content: "\e688"; |
|||
} |
|||
|
|||
.uniui-star-filled:before { |
|||
content: "\e68f"; |
|||
} |
|||
|
|||
.uniui-calendar:before { |
|||
content: "\e6a0"; |
|||
} |
|||
|
|||
.uniui-fire:before { |
|||
content: "\e6a1"; |
|||
} |
|||
|
|||
.uniui-medal:before { |
|||
content: "\e6a2"; |
|||
} |
|||
|
|||
.uniui-font:before { |
|||
content: "\e6a3"; |
|||
} |
|||
|
|||
.uniui-gift:before { |
|||
content: "\e6a4"; |
|||
} |
|||
|
|||
.uniui-link:before { |
|||
content: "\e6a5"; |
|||
} |
|||
|
|||
.uniui-notification:before { |
|||
content: "\e6a6"; |
|||
} |
|||
|
|||
.uniui-staff:before { |
|||
content: "\e6a7"; |
|||
} |
|||
|
|||
.uniui-vip:before { |
|||
content: "\e6a8"; |
|||
} |
|||
|
|||
.uniui-folder-add:before { |
|||
content: "\e6a9"; |
|||
} |
|||
|
|||
.uniui-tune:before { |
|||
content: "\e6aa"; |
|||
} |
|||
|
|||
.uniui-auth:before { |
|||
content: "\e6ab"; |
|||
} |
|||
|
|||
.uniui-person:before { |
|||
content: "\e699"; |
|||
} |
|||
|
|||
.uniui-email-filled:before { |
|||
content: "\e69a"; |
|||
} |
|||
|
|||
.uniui-phone-filled:before { |
|||
content: "\e69b"; |
|||
} |
|||
|
|||
.uniui-phone:before { |
|||
content: "\e69c"; |
|||
} |
|||
|
|||
.uniui-email:before { |
|||
content: "\e69e"; |
|||
} |
|||
|
|||
.uniui-personadd:before { |
|||
content: "\e69f"; |
|||
} |
|||
|
|||
.uniui-chatboxes-filled:before { |
|||
content: "\e692"; |
|||
} |
|||
|
|||
.uniui-contact:before { |
|||
content: "\e693"; |
|||
} |
|||
|
|||
.uniui-chatbubble-filled:before { |
|||
content: "\e694"; |
|||
} |
|||
|
|||
.uniui-contact-filled:before { |
|||
content: "\e695"; |
|||
} |
|||
|
|||
.uniui-chatboxes:before { |
|||
content: "\e696"; |
|||
} |
|||
|
|||
.uniui-chatbubble:before { |
|||
content: "\e697"; |
|||
} |
|||
|
|||
.uniui-upload-filled:before { |
|||
content: "\e68e"; |
|||
} |
|||
|
|||
.uniui-upload:before { |
|||
content: "\e690"; |
|||
} |
|||
|
|||
.uniui-weixin:before { |
|||
content: "\e691"; |
|||
} |
|||
|
|||
.uniui-compose:before { |
|||
content: "\e67f"; |
|||
} |
|||
|
|||
.uniui-qq:before { |
|||
content: "\e680"; |
|||
} |
|||
|
|||
.uniui-download-filled:before { |
|||
content: "\e681"; |
|||
} |
|||
|
|||
.uniui-pyq:before { |
|||
content: "\e682"; |
|||
} |
|||
|
|||
.uniui-sound:before { |
|||
content: "\e684"; |
|||
} |
|||
|
|||
.uniui-trash-filled:before { |
|||
content: "\e685"; |
|||
} |
|||
|
|||
.uniui-sound-filled:before { |
|||
content: "\e686"; |
|||
} |
|||
|
|||
.uniui-trash:before { |
|||
content: "\e687"; |
|||
} |
|||
|
|||
.uniui-videocam-filled:before { |
|||
content: "\e689"; |
|||
} |
|||
|
|||
.uniui-spinner-cycle:before { |
|||
content: "\e68a"; |
|||
} |
|||
|
|||
.uniui-weibo:before { |
|||
content: "\e68b"; |
|||
} |
|||
|
|||
.uniui-videocam:before { |
|||
content: "\e68c"; |
|||
} |
|||
|
|||
.uniui-download:before { |
|||
content: "\e68d"; |
|||
} |
|||
|
|||
.uniui-help:before { |
|||
content: "\e679"; |
|||
} |
|||
|
|||
.uniui-navigate-filled:before { |
|||
content: "\e67a"; |
|||
} |
|||
|
|||
.uniui-plusempty:before { |
|||
content: "\e67b"; |
|||
} |
|||
|
|||
.uniui-smallcircle:before { |
|||
content: "\e67c"; |
|||
} |
|||
|
|||
.uniui-minus-filled:before { |
|||
content: "\e67d"; |
|||
} |
|||
|
|||
.uniui-micoff:before { |
|||
content: "\e67e"; |
|||
} |
|||
|
|||
.uniui-closeempty:before { |
|||
content: "\e66c"; |
|||
} |
|||
|
|||
.uniui-clear:before { |
|||
content: "\e66d"; |
|||
} |
|||
|
|||
.uniui-navigate:before { |
|||
content: "\e66e"; |
|||
} |
|||
|
|||
.uniui-minus:before { |
|||
content: "\e66f"; |
|||
} |
|||
|
|||
.uniui-image:before { |
|||
content: "\e670"; |
|||
} |
|||
|
|||
.uniui-mic:before { |
|||
content: "\e671"; |
|||
} |
|||
|
|||
.uniui-paperplane:before { |
|||
content: "\e672"; |
|||
} |
|||
|
|||
.uniui-close:before { |
|||
content: "\e673"; |
|||
} |
|||
|
|||
.uniui-help-filled:before { |
|||
content: "\e674"; |
|||
} |
|||
|
|||
.uniui-paperplane-filled:before { |
|||
content: "\e675"; |
|||
} |
|||
|
|||
.uniui-plus:before { |
|||
content: "\e676"; |
|||
} |
|||
|
|||
.uniui-mic-filled:before { |
|||
content: "\e677"; |
|||
} |
|||
|
|||
.uniui-image-filled:before { |
|||
content: "\e678"; |
|||
} |
|||
|
|||
.uniui-locked-filled:before { |
|||
content: "\e668"; |
|||
} |
|||
|
|||
.uniui-info:before { |
|||
content: "\e669"; |
|||
} |
|||
|
|||
.uniui-locked:before { |
|||
content: "\e66b"; |
|||
} |
|||
|
|||
.uniui-camera-filled:before { |
|||
content: "\e658"; |
|||
} |
|||
|
|||
.uniui-chat-filled:before { |
|||
content: "\e659"; |
|||
} |
|||
|
|||
.uniui-camera:before { |
|||
content: "\e65a"; |
|||
} |
|||
|
|||
.uniui-circle:before { |
|||
content: "\e65b"; |
|||
} |
|||
|
|||
.uniui-checkmarkempty:before { |
|||
content: "\e65c"; |
|||
} |
|||
|
|||
.uniui-chat:before { |
|||
content: "\e65d"; |
|||
} |
|||
|
|||
.uniui-circle-filled:before { |
|||
content: "\e65e"; |
|||
} |
|||
|
|||
.uniui-flag:before { |
|||
content: "\e65f"; |
|||
} |
|||
|
|||
.uniui-flag-filled:before { |
|||
content: "\e660"; |
|||
} |
|||
|
|||
.uniui-gear-filled:before { |
|||
content: "\e661"; |
|||
} |
|||
|
|||
.uniui-home:before { |
|||
content: "\e662"; |
|||
} |
|||
|
|||
.uniui-home-filled:before { |
|||
content: "\e663"; |
|||
} |
|||
|
|||
.uniui-gear:before { |
|||
content: "\e664"; |
|||
} |
|||
|
|||
.uniui-smallcircle-filled:before { |
|||
content: "\e665"; |
|||
} |
|||
|
|||
.uniui-map-filled:before { |
|||
content: "\e666"; |
|||
} |
|||
|
|||
.uniui-map:before { |
|||
content: "\e667"; |
|||
} |
|||
|
|||
.uniui-refresh-filled:before { |
|||
content: "\e656"; |
|||
} |
|||
|
|||
.uniui-refresh:before { |
|||
content: "\e657"; |
|||
} |
|||
|
|||
.uniui-cloud-upload:before { |
|||
content: "\e645"; |
|||
} |
|||
|
|||
.uniui-cloud-download-filled:before { |
|||
content: "\e646"; |
|||
} |
|||
|
|||
.uniui-cloud-download:before { |
|||
content: "\e647"; |
|||
} |
|||
|
|||
.uniui-cloud-upload-filled:before { |
|||
content: "\e648"; |
|||
} |
|||
|
|||
.uniui-redo:before { |
|||
content: "\e64a"; |
|||
} |
|||
|
|||
.uniui-images-filled:before { |
|||
content: "\e64b"; |
|||
} |
|||
|
|||
.uniui-undo-filled:before { |
|||
content: "\e64c"; |
|||
} |
|||
|
|||
.uniui-more:before { |
|||
content: "\e64d"; |
|||
} |
|||
|
|||
.uniui-more-filled:before { |
|||
content: "\e64e"; |
|||
} |
|||
|
|||
.uniui-undo:before { |
|||
content: "\e64f"; |
|||
} |
|||
|
|||
.uniui-images:before { |
|||
content: "\e650"; |
|||
} |
|||
|
|||
.uniui-paperclip:before { |
|||
content: "\e652"; |
|||
} |
|||
|
|||
.uniui-settings:before { |
|||
content: "\e653"; |
|||
} |
|||
|
|||
.uniui-search:before { |
|||
content: "\e654"; |
|||
} |
|||
|
|||
.uniui-redo-filled:before { |
|||
content: "\e655"; |
|||
} |
|||
|
|||
.uniui-list:before { |
|||
content: "\e644"; |
|||
} |
|||
|
|||
.uniui-mail-open-filled:before { |
|||
content: "\e63a"; |
|||
} |
|||
|
|||
.uniui-hand-down-filled:before { |
|||
content: "\e63c"; |
|||
} |
|||
|
|||
.uniui-hand-down:before { |
|||
content: "\e63d"; |
|||
} |
|||
|
|||
.uniui-hand-up-filled:before { |
|||
content: "\e63e"; |
|||
} |
|||
|
|||
.uniui-hand-up:before { |
|||
content: "\e63f"; |
|||
} |
|||
|
|||
.uniui-heart-filled:before { |
|||
content: "\e641"; |
|||
} |
|||
|
|||
.uniui-mail-open:before { |
|||
content: "\e643"; |
|||
} |
|||
|
|||
.uniui-heart:before { |
|||
content: "\e639"; |
|||
} |
|||
|
|||
.uniui-loop:before { |
|||
content: "\e633"; |
|||
} |
|||
|
|||
.uniui-pulldown:before { |
|||
content: "\e632"; |
|||
} |
|||
|
|||
.uniui-scan:before { |
|||
content: "\e62a"; |
|||
} |
|||
|
|||
.uniui-bars:before { |
|||
content: "\e627"; |
|||
} |
|||
|
|||
.uniui-cart-filled:before { |
|||
content: "\e629"; |
|||
} |
|||
|
|||
.uniui-checkbox:before { |
|||
content: "\e62b"; |
|||
} |
|||
|
|||
.uniui-checkbox-filled:before { |
|||
content: "\e62c"; |
|||
} |
|||
|
|||
.uniui-shop:before { |
|||
content: "\e62f"; |
|||
} |
|||
|
|||
.uniui-headphones:before { |
|||
content: "\e630"; |
|||
} |
|||
|
|||
.uniui-cart:before { |
|||
content: "\e631"; |
|||
} |
|||
Binary file not shown.
@ -0,0 +1,86 @@ |
|||
{ |
|||
"id": "uni-icons", |
|||
"displayName": "uni-icons 图标", |
|||
"version": "1.3.2", |
|||
"description": "图标组件，用于展示移动端常见的图标，可自定义颜色、大小。", |
|||
"keywords": [ |
|||
"uni-ui", |
|||
"uniui", |
|||
"icon", |
|||
"图标" |
|||
], |
|||
"repository": "https://github.com/dcloudio/uni-ui", |
|||
"engines": { |
|||
"HBuilderX": "^3.2.14" |
|||
}, |
|||
"directories": { |
|||
"example": "../../temps/example_temps" |
|||
}, |
|||
"dcloudext": { |
|||
"category": [ |
|||
"前端组件", |
|||
"通用组件" |
|||
], |
|||
"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": ["uni-scss"], |
|||
"encrypt": [], |
|||
"platforms": { |
|||
"cloud": { |
|||
"tcb": "y", |
|||
"aliyun": "y" |
|||
}, |
|||
"client": { |
|||
"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" |
|||
}, |
|||
"快应用": { |
|||
"华为": "u", |
|||
"联盟": "u" |
|||
}, |
|||
"Vue": { |
|||
"vue2": "y", |
|||
"vue3": "y" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,8 @@ |
|||
## Icons 图标 |
|||
> **组件名：uni-icons** |
|||
> 代码块： `uIcons` |
|||
|
|||
用于展示 icons 图标 。 |
|||
|
|||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-icons) |
|||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
|||
@ -0,0 +1,22 @@ |
|||
## 1.2.0（2021-11-19） |
|||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) |
|||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-nav-bar](https://uniapp.dcloud.io/component/uniui/uni-nav-bar) |
|||
## 1.1.0（2021-07-30） |
|||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) |
|||
## 1.0.11（2021-05-12） |
|||
- 新增 组件示例地址 |
|||
## 1.0.10（2021-04-30） |
|||
- 修复 在nvue下fixed为true，宽度不能撑满的Bug |
|||
## 1.0.9（2021-04-21） |
|||
- 优化 添加依赖 uni-icons, 导入后自动下载依赖 |
|||
## 1.0.8（2021-04-14） |
|||
- uni-ui 修复 uni-nav-bar 当 fixed 属性为 true 时铺不满屏幕的 bug |
|||
|
|||
## 1.0.7（2021-02-25） |
|||
- 修复 easycom 下，找不到 uni-status-bar 的bug |
|||
|
|||
## 1.0.6（2021-02-05） |
|||
- 优化 组件引用关系，通过uni_modules引用组件 |
|||
|
|||
## 1.0.5（2021-02-05） |
|||
- 调整为uni_modules目录规范 |
|||
@ -0,0 +1,254 @@ |
|||
<template> |
|||
<view class="uni-navbar"> |
|||
<view :class="{ 'uni-navbar--fixed': fixed, 'uni-navbar--shadow': shadow, 'uni-navbar--border': border }" :style="{ 'background-color': backgroundColor }" |
|||
class="uni-navbar__content"> |
|||
<status-bar v-if="statusBar" /> |
|||
<view :style="{ color: color,backgroundColor: backgroundColor }" class="uni-navbar__header uni-navbar__content_view"> |
|||
<view @tap="onClickLeft" class="uni-navbar__header-btns uni-navbar__header-btns-left uni-navbar__content_view"> |
|||
<view class="uni-navbar__content_view" v-if="leftIcon.length"> |
|||
<uni-icons :color="color" :type="leftIcon" size="22" color="#333"/> |
|||
</view> |
|||
<view :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length }" class="uni-navbar-btn-text uni-navbar__content_view" |
|||
v-if="leftText.length"> |
|||
<text :style="{ color: color, fontSize: '12px' }">{{ leftText }}</text> |
|||
</view> |
|||
<slot name="left" /> |
|||
</view> |
|||
<view class="uni-navbar__header-container uni-navbar__content_view" @tap="onClickTitle"> |
|||
<view class="uni-navbar__header-container-inner uni-navbar__content_view" v-if="title.length"> |
|||
<text class="uni-nav-bar-text" :style="{color: color }">{{ title }}</text> |
|||
</view> |
|||
<!-- 标题插槽 --> |
|||
<slot /> |
|||
</view> |
|||
<view :class="title.length ? 'uni-navbar__header-btns-right' : ''" @tap="onClickRight" class="uni-navbar__header-btns uni-navbar__content_view"> |
|||
<view class="uni-navbar__content_view uni-navbar__header-btns-right" v-if="rightIcon.length"> |
|||
<uni-icons :color="color" :type="rightIcon" size="22" /> |
|||
</view> |
|||
<!-- 优先显示图标 --> |
|||
<view class="uni-navbar-btn-text uni-navbar__content_view" v-if="rightText.length && !rightIcon.length"> |
|||
<text class="uni-nav-bar-right-text">{{ rightText }}</text> |
|||
</view> |
|||
<slot name="right" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="uni-navbar__placeholder" v-if="fixed"> |
|||
<status-bar v-if="statusBar" /> |
|||
<view class="uni-navbar__placeholder-view" /> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import statusBar from "./uni-status-bar.vue"; |
|||
|
|||
/** |
|||
* NavBar 自定义导航栏 |
|||
* @description 导航栏组件，主要用于头部导航 |
|||
* @tutorial https://ext.dcloud.net.cn/plugin?id=52 |
|||
* @property {String} title 标题文字 |
|||
* @property {String} leftText 左侧按钮文本 |
|||
* @property {String} rightText 右侧按钮文本 |
|||
* @property {String} leftIcon 左侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性） |
|||
* @property {String} rightIcon 右侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性） |
|||
* @property {String} color 图标和文字颜色 |
|||
* @property {String} backgroundColor 导航栏背景颜色 |
|||
* @property {Boolean} fixed = [true|false] 是否固定顶部 |
|||
* @property {Boolean} statusBar = [true|false] 是否包含状态栏 |
|||
* @property {Boolean} shadow = [true|false] 导航栏下是否有阴影 |
|||
* @event {Function} clickLeft 左侧按钮点击时触发 |
|||
* @event {Function} clickRight 右侧按钮点击时触发 |
|||
* @event {Function} clickTitle 中间标题点击时触发 |
|||
*/ |
|||
export default { |
|||
name: "UniNavBar", |
|||
components: { |
|||
statusBar |
|||
}, |
|||
emits:['clickLeft','clickRight','clickTitle'], |
|||
props: { |
|||
title: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
leftText: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
rightText: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
leftIcon: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
rightIcon: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
fixed: { |
|||
type: [Boolean, String], |
|||
default: false |
|||
}, |
|||
color: { |
|||
type: String, |
|||
default: "#000000" |
|||
}, |
|||
backgroundColor: { |
|||
type: String, |
|||
default: "#FFFFFF" |
|||
}, |
|||
statusBar: { |
|||
type: [Boolean, String], |
|||
default: false |
|||
}, |
|||
shadow: { |
|||
type: [Boolean, String], |
|||
default: false |
|||
}, |
|||
border: { |
|||
type: [Boolean, String], |
|||
default: true |
|||
} |
|||
}, |
|||
mounted() { |
|||
if(uni.report && this.title !== '') { |
|||
uni.report('title', this.title) |
|||
} |
|||
}, |
|||
methods: { |
|||
onClickLeft() { |
|||
this.$emit("clickLeft"); |
|||
}, |
|||
onClickRight() { |
|||
this.$emit("clickRight"); |
|||
}, |
|||
onClickTitle() { |
|||
this.$emit("clickTitle"); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
$nav-height: 44px; |
|||
|
|||
.uni-nav-bar-text { |
|||
/* #ifdef APP-PLUS */ |
|||
font-size: 34rpx; |
|||
/* #endif */ |
|||
/* #ifndef APP-PLUS */ |
|||
font-size: 14px; |
|||
/* #endif */ |
|||
} |
|||
|
|||
.uni-nav-bar-right-text { |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.uni-navbar__content { |
|||
position: relative; |
|||
background-color: #fff; |
|||
overflow: hidden; |
|||
// width: 750rpx; |
|||
} |
|||
|
|||
.uni-navbar__content_view { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
align-items: center; |
|||
flex-direction: row; |
|||
// background-color: #FFFFFF; |
|||
} |
|||
|
|||
.uni-navbar__header { |
|||
padding: 0 10px; |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
flex-direction: row; |
|||
height: $nav-height; |
|||
line-height: $nav-height; |
|||
font-size: 12px; |
|||
// background-color: #ffffff; |
|||
} |
|||
|
|||
.uni-navbar__header-btns { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
flex-wrap: nowrap; |
|||
width: 120rpx; |
|||
// padding: 0 6px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
/* #ifdef H5 */ |
|||
cursor: pointer; |
|||
/* #endif */ |
|||
} |
|||
|
|||
.uni-navbar__header-btns-left { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
width: 120rpx; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.uni-navbar__header-btns-right { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
width: 150rpx; |
|||
padding-right: 30rpx; |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.uni-navbar__header-container { |
|||
flex: 1; |
|||
} |
|||
|
|||
.uni-navbar__header-container-inner { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
flex: 1; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
|
|||
.uni-navbar__placeholder-view { |
|||
height: $nav-height; |
|||
} |
|||
|
|||
.uni-navbar--fixed { |
|||
position: fixed; |
|||
z-index: 998; |
|||
/* #ifdef H5 */ |
|||
left: var(--window-left); |
|||
right: var(--window-right); |
|||
/* #endif */ |
|||
/* #ifndef H5 */ |
|||
left:0; |
|||
right: 0; |
|||
/* #endif */ |
|||
|
|||
} |
|||
|
|||
.uni-navbar--shadow { |
|||
/* #ifndef APP-NVUE */ |
|||
box-shadow: 0 1px 6px #ccc; |
|||
/* #endif */ |
|||
} |
|||
|
|||
.uni-navbar--border { |
|||
border-bottom-width: 1rpx; |
|||
border-bottom-style: solid; |
|||
border-bottom-color: #eee; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,27 @@ |
|||
<template> |
|||
<view :style="{ height: statusBarHeight }" class="uni-status-bar"> |
|||
<slot /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'UniStatusBar', |
|||
data() { |
|||
return { |
|||
statusBarHeight: 20 |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px' |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.uni-status-bar { |
|||
// width: 750rpx; |
|||
height: 20px; |
|||
// height: var(--status-bar-height); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,89 @@ |
|||
{ |
|||
"id": "uni-nav-bar", |
|||
"displayName": "uni-nav-bar 自定义导航栏", |
|||
"version": "1.2.0", |
|||
"description": "自定义导航栏组件，主要用于头部导航。", |
|||
"keywords": [ |
|||
"uni-ui", |
|||
"导航", |
|||
"导航栏", |
|||
"自定义导航栏" |
|||
], |
|||
"repository": "https://github.com/dcloudio/uni-ui", |
|||
"engines": { |
|||
"HBuilderX": "" |
|||
}, |
|||
"directories": { |
|||
"example": "../../temps/example_temps" |
|||
}, |
|||
"dcloudext": { |
|||
"category": [ |
|||
"前端组件", |
|||
"通用组件" |
|||
], |
|||
"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": [ |
|||
"uni-scss", |
|||
"uni-icons" |
|||
], |
|||
"encrypt": [], |
|||
"platforms": { |
|||
"cloud": { |
|||
"tcb": "y", |
|||
"aliyun": "y" |
|||
}, |
|||
"client": { |
|||
"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" |
|||
}, |
|||
"快应用": { |
|||
"华为": "u", |
|||
"联盟": "u" |
|||
}, |
|||
"Vue": { |
|||
"vue2": "y", |
|||
"vue3": "y" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
|
|||
|
|||
## NavBar 导航栏 |
|||
> **组件名：uni-nav-bar** |
|||
> 代码块： `uNavBar` |
|||
|
|||
导航栏组件，主要用于头部导航。 |
|||
|
|||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-nav-bar) |
|||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
@ -0,0 +1,6 @@ |
|||
## 1.0.2（2021-11-22） |
|||
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题 |
|||
## 1.0.1（2021-11-22） |
|||
- 修复 vue3中scss语法兼容问题 |
|||
## 1.0.0（2021-11-18） |
|||
- init |
|||
@ -0,0 +1 @@ |
|||
@import './styles/index.scss'; |
|||
@ -0,0 +1,95 @@ |
|||
{ |
|||
"name" : "", |
|||
"appid" : "", |
|||
"description": "应用描述", |
|||
"versionName": "1.0.0", |
|||
"versionCode": "100", |
|||
"transformPx": false, |
|||
/* 5+App特有相关 */ |
|||
"app-plus": { |
|||
"usingComponents": true, |
|||
"splashscreen": { |
|||
"alwaysShowBeforeRender": true, |
|||
"waiting": true, |
|||
"autoclose": true, |
|||
"delay": 0 |
|||
}, |
|||
"modules": { |
|||
"OAuth": {}, |
|||
"Payment": {}, |
|||
"Push": {}, |
|||
"Share": {}, |
|||
"Speech": {}, |
|||
"VideoPlayer": {} |
|||
}, |
|||
/* 应用发布信息 */ |
|||
"distribute": { |
|||
/* android打包配置 */ |
|||
"android": { |
|||
"permissions": [ |
|||
"<uses-feature android:name=\"android.hardware.camera\"/>", |
|||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>", |
|||
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>", |
|||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>", |
|||
"<uses-permission android:name=\"android.permission.ACCESS_MOCK_LOCATION\"/>", |
|||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>", |
|||
"<uses-permission android:name=\"android.permission.CAMERA\"/>", |
|||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>", |
|||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>", |
|||
"<uses-permission android:name=\"android.permission.GET_TASKS\"/>", |
|||
"<uses-permission android:name=\"android.permission.INTERNET\"/>", |
|||
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>", |
|||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>", |
|||
"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>", |
|||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>", |
|||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.READ_SMS\"/>", |
|||
"<uses-permission android:name=\"android.permission.RECEIVE_BOOT_COMPLETED\"/>", |
|||
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>", |
|||
"<uses-permission android:name=\"android.permission.SEND_SMS\"/>", |
|||
"<uses-permission android:name=\"android.permission.SYSTEM_ALERT_WINDOW\"/>", |
|||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>", |
|||
"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>", |
|||
"<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>", |
|||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>", |
|||
"<uses-permission android:name=\"android.permission.WRITE_SMS\"/>", |
|||
"<uses-permission android:name=\"android.permission.RECEIVE_USER_PRESENT\"/>" |
|||
] |
|||
}, |
|||
/* ios打包配置 */ |
|||
"ios": { |
|||
"UIBackgroundModes": ["audio"] |
|||
}, |
|||
/* SDK配置 */ |
|||
"sdkConfigs": { |
|||
"speech": { |
|||
"ifly": {} |
|||
} |
|||
}, |
|||
"orientation": ["portrait-primary"] |
|||
} |
|||
}, |
|||
/* 快应用特有相关 */ |
|||
"quickapp": {}, |
|||
/* 小程序特有相关 */ |
|||
"mp-weixin": { |
|||
"appid": "", |
|||
"setting": { |
|||
"urlCheck": false |
|||
}, |
|||
"usingComponents": true |
|||
}, |
|||
"h5": { |
|||
"template": "template.h5.html", |
|||
"router": { |
|||
"mode": "history", |
|||
"base": "/h5/" |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,82 @@ |
|||
{ |
|||
"id": "uni-scss", |
|||
"displayName": "uni-scss 辅助样式", |
|||
"version": "1.0.2", |
|||
"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": [ |
|||
"uni-app前端模板", |
|||
"前端页面模板" |
|||
], |
|||
"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" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,4 @@ |
|||
`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。 |
|||
|
|||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass) |
|||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
|||
@ -0,0 +1,7 @@ |
|||
@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'; |
|||
@ -0,0 +1,3 @@ |
|||
.uni-border { |
|||
border: 1px $uni-border-1 solid; |
|||
} |
|||
@ -0,0 +1,66 @@ |
|||
|
|||
// 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; |
|||
} |
|||
@ -0,0 +1,55 @@ |
|||
@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) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,56 @@ |
|||
|
|||
@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); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,167 @@ |
|||
/* #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 */ |
|||
@ -0,0 +1,24 @@ |
|||
@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 */ |
|||
} |
|||
@ -0,0 +1,146 @@ |
|||
// @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; |
|||
@ -0,0 +1,19 @@ |
|||
// 合并 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; |
|||
}; |
|||
@ -0,0 +1,31 @@ |
|||
// 间距基础倍数 |
|||
$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); |
|||
@ -0,0 +1,62 @@ |
|||
@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); |
|||
@ -0,0 +1,16 @@ |
|||
import 'dayjs/locale/zh-cn'; |
|||
|
|||
import dayjs from 'dayjs'; |
|||
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'; |
|||
|
|||
dayjs.locale('zh-cn'); |
|||
dayjs.extend(isSameOrBefore); |
|||
|
|||
export function setupDayjs(app) { |
|||
app.config.globalProperties.$moment = dayjs; |
|||
app.config.globalProperties.$dayjs = dayjs; |
|||
uni.$moment = dayjs; |
|||
uni.$dayjs = dayjs; |
|||
} |
|||
|
|||
export { dayjs }; |
|||
Loading…
Reference in new issue