Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 85ab8cc5 作者: 陈师旦
操作

Merge branch 'main' of https://gitlab.yiring.com/hntq/hntq-v5 into dev_csd

上级 82b03e90 111bfb3a
正在显示 包含 420 行增加 和 192 行删除
.eslintignore
......@@ -20,5 +20,5 @@ types/components.d.ts
src/api/services/api.d.ts
src/static/**
src/components/firstui/**
src/components/FirstUI/**
src/uni_modules/**
.prettierignore
......@@ -16,5 +16,5 @@ types/auto-imports.d.ts
types/components.d.ts
src/static/**
src/components/firstui/**
src/components/FirstUI/**
src/uni_modules/**
.stylelintignore
......@@ -3,5 +3,5 @@
public/*
example/*
src/static/**
src/components/firstui/**
src/components/FirstUI/**
src/uni_modules/**
build/vite/unocss.ts
......@@ -2,17 +2,7 @@ import type { Plugin } from 'vite'
// https://github.com/antfu/unocss
import Unocss from 'unocss/vite'
import { presetIcons } from 'unocss'
export function configUnocssPlugin(): Plugin[] {
return Unocss({
presets: [
presetIcons({
prefix: 'icon-',
extraProperties: {
display: 'inline-flex',
},
}),
],
})
return Unocss()
}
build/vite/unplugin.ts
import path from 'node:path'
import type { Plugin } from 'vite'
// https://github.com/antfu/unplugin-auto-import
......@@ -36,17 +35,17 @@ export function configAutoImportPlugin(): Plugin {
export function configComponentsImportPlugin(): Plugin {
return Components({
dts: 'types/components.d.ts',
resolvers: [
(name: string) => {
// FIX: 修复 easycom 在 APP 下不生效问题（原因不明
if (name.startsWith('fui-')) {
return path.resolve(__dirname, `src/components/firstui/${name}/${name}.vue`).replaceAll('\\', '/')
}
// if (name.startsWith('uni-')) {
// return `@dcloudio/uni-ui/lib/${name}/${name}.vue`
// }
},
],
// resolvers: [
// (name: string) => {
// // FIX: 修复 easycom 在 APP 下不生效问题（原因不明
// if (name.startsWith('fui-')) {
// return path.resolve(__dirname, `src/components/FirstUI/${name}/${name}.vue`).replaceAll('\\', '/')
// }
// // if (name.startsWith('uni-')) {
// // return `@dcloudio/uni-ui/lib/${name}/${name}.vue`
// // }
// },
// ],
})
}
......
package.json
......@@ -66,28 +66,28 @@
}
},
"dependencies": {
"@dcloudio/uni-app": "3.0.0-alpha-3080320230523001",
"@dcloudio/uni-app-plus": "3.0.0-alpha-3080320230523001",
"@dcloudio/uni-components": "3.0.0-alpha-3080320230523001",
"@dcloudio/uni-h5": "3.0.0-alpha-3080320230523001",
"@dcloudio/uni-mp-alipay": "3.0.0-alpha-3080320230523001",
"@dcloudio/uni-mp-baidu": "3.0.0-alpha-3080320230523001",
"@dcloudio/uni-mp-jd": "3.0.0-alpha-3080320230523001",
"@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-3080320230523001",
"@dcloudio/uni-mp-lark": "3.0.0-alpha-3080320230523001",
"@dcloudio/uni-mp-qq": "3.0.0-alpha-3080320230523001",
"@dcloudio/uni-mp-toutiao": "3.0.0-alpha-3080320230523001",
"@dcloudio/uni-mp-weixin": "3.0.0-alpha-3080320230523001",
"@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3080320230523001",
"@dcloudio/uni-ui": "^1.4.27",
"@dcloudio/uni-app": "3.0.0-3080720230703001",
"@dcloudio/uni-app-plus": "3.0.0-3080720230703001",
"@dcloudio/uni-components": "3.0.0-3080720230703001",
"@dcloudio/uni-h5": "3.0.0-3080720230703001",
"@dcloudio/uni-mp-alipay": "3.0.0-3080720230703001",
"@dcloudio/uni-mp-baidu": "3.0.0-3080720230703001",
"@dcloudio/uni-mp-jd": "3.0.0-3080720230703001",
"@dcloudio/uni-mp-kuaishou": "3.0.0-3080720230703001",
"@dcloudio/uni-mp-lark": "3.0.0-3080720230703001",
"@dcloudio/uni-mp-qq": "3.0.0-3080720230703001",
"@dcloudio/uni-mp-toutiao": "3.0.0-3080720230703001",
"@dcloudio/uni-mp-weixin": "3.0.0-3080720230703001",
"@dcloudio/uni-quickapp-webview": "3.0.0-3080720230703001",
"@dcloudio/uni-ui": "^1.4.28",
"@faker-js/faker": "^8.0.2",
"@turf/turf": "^6.5.0",
"@types/mapbox-gl": "^2.7.11",
"@vue/runtime-core": "~3.2.47",
"@vueuse/core": "^10.1.2",
"@vueuse/core": "^10.2.1",
"axios": "^1.4.0",
"crypto-js": "^4.1.1",
"dayjs": "^1.11.7",
"dayjs": "^1.11.9",
"lodash-es": "^4.17.21",
"mapbox-gl": "^2.15.0",
"mapbox-gl-controls": "^2.3.5",
......@@ -99,67 +99,67 @@
"urijs": "^1.19.11",
"vue": "~3.2.47",
"vue-i18n": "^9.2.2",
"vue-request": "2.0.0-rc.4",
"vue-types": "^5.0.3"
"vue-request": "^2.0.3",
"vue-types": "^5.1.0"
},
"devDependencies": {
"@antfu/eslint-config": "^0.39.3",
"@commitlint/cli": "^17.6.3",
"@commitlint/config-conventional": "^17.6.3",
"@antfu/eslint-config": "^0.39.7",
"@commitlint/cli": "^17.6.6",
"@commitlint/config-conventional": "^17.6.6",
"@dcloudio/types": "^3.3.3",
"@dcloudio/uni-automator": "3.0.0-alpha-3080320230523001",
"@dcloudio/uni-cli-shared": "3.0.0-alpha-3080320230523001",
"@dcloudio/uni-automator": "3.0.0-3080720230703001",
"@dcloudio/uni-cli-shared": "3.0.0-3080720230703001",
"@dcloudio/uni-helper-json": "^1.0.13",
"@dcloudio/uni-stacktracey": "3.0.0-alpha-3080320230523001",
"@dcloudio/vite-plugin-uni": "3.0.0-alpha-3080320230523001",
"@iconify/json": "^2.2.71",
"@dcloudio/uni-stacktracey": "3.0.0-3080720230703001",
"@dcloudio/vite-plugin-uni": "3.0.0-3080720230703001",
"@iconify/json": "^2.2.86",
"@types/crypto-js": "^4.1.1",
"@types/lodash-es": "^4.17.7",
"@types/node": "^18.16.16",
"@types/prettier": "^2.7.2",
"@types/node": "^18.16.19",
"@types/prettier": "^2.7.3",
"@types/qs": "^6.9.7",
"@types/stompjs": "^2.3.5",
"@types/urijs": "^1.19.19",
"@typescript-eslint/eslint-plugin": "^5.59.8",
"@typescript-eslint/parser": "^5.59.8",
"@typescript-eslint/eslint-plugin": "^5.61.0",
"@typescript-eslint/parser": "^5.61.0",
"commitizen": "^4.3.0",
"conventional-changelog-cli": "^2.2.2",
"conventional-changelog-cli": "^3.0.0",
"cz-conventional-changelog": "^3.3.0",
"cz-customizable": "^7.0.0",
"cz-git": "^1.6.1",
"czg": "^1.6.1",
"dotenv": "^16.0.3",
"eslint": "^8.41.0",
"dotenv": "^16.3.1",
"eslint": "^8.44.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.14.1",
"eslint-plugin-vue": "^9.15.1",
"husky": "^8.0.3",
"jest": "27.0.4",
"jest-environment-node": "27.5.1",
"less": "^4.1.3",
"lint-staged": "^13.2.2",
"lint-staged": "^13.2.3",
"npm-run-all": "^4.1.5",
"picocolors": "^1.0.0",
"pont-engine": "^1.5.10",
"pont-engine": "^1.5.11",
"postcss": "^8.4.24",
"postcss-html": "^1.5.0",
"postcss-less": "^6.0.0",
"prettier": "^2.8.8",
"rimraf": "^5.0.1",
"sass": "^1.62.1",
"sort-package-json": "^2.4.1",
"stylelint": "^15.6.2",
"sass": "^1.63.6",
"sort-package-json": "^2.5.0",
"stylelint": "^15.10.0",
"stylelint-config-html": "^1.1.0",
"stylelint-config-recommended": "^12.0.0",
"stylelint-config-standard": "^33.0.0",
"stylelint-order": "^6.0.3",
"typescript": "^5.0.4",
"unocss": "^0.52.4",
"unocss-preset-weapp": "^0.6.3",
"unplugin-auto-import": "^0.16.2",
"unplugin-vue-components": "^0.24.1",
"typescript": "~5.0.4",
"unocss": "^0.53.4",
"unocss-preset-weapp": "^0.53.5",
"unplugin-auto-import": "^0.16.6",
"unplugin-vue-components": "^0.25.1",
"vite": "^4.3.9",
"vue-eslint-parser": "^9.3.0"
"vue-eslint-parser": "^9.3.1"
},
"engines": {
"node": ">=16",
......
pnpm-lock.yaml
This source diff could not be displayed because it is too large. You can view the blob instead.
src/App.vue
......@@ -28,7 +28,8 @@
})
onError((err) => {
Message.toast(`App Error: ${err}`)
// Message.toast(`App Error: ${err}`)
console.error('App Error:', err)
})
onUnhandledRejection((err) => {
......@@ -45,7 +46,7 @@
/* 每个页面公共css */
@import url('./common/fui-app.css');
@import url('./components/firstui/fui-theme/fui-theme.css');
@import url('./components/FirstUI/fui-theme/fui-theme.css');
// 全局样式
@import url('./common/public.less');
......
src/components/CacheImage/index.vue
......@@ -32,8 +32,7 @@
},
})
const srcImage = ref()
const visibleSrc = ref()
const hashCacheKey = ref()
onMounted(async () => {
await tryCache()
......@@ -94,7 +93,7 @@
// #endif
}
srcImage.value = url
visibleSrc.value = url
}
const hasError = ref(false)
......@@ -105,7 +104,7 @@
}
hasError.value = true
srcImage.value = props.src
visibleSrc.value = props.src
// 清除缓存
hashCacheKey.value && uni.removeStorageSync(hashCacheKey.value)
console.warn('CacheImage cache error')
......@@ -120,7 +119,7 @@
:height="props.height"
:radius="props.radius"
:background="props.background"
:src="srcImage"
:src="visibleSrc"
@error="onError"
>
<slot></slot>
......
src/components/firstui/fui-alert/fui-alert.vue → src/components/FirstUI/fui-alert/fui-alert.vue
......@@ -124,11 +124,12 @@
},
methods: {
getColor(type) {
const color = "#465CFF"
const app = uni && uni.$fui && uni.$fui.color
const color = (app && app.primary) || "#465CFF"
const colors = {
'success': '#09BE4F',
'warn': '#FFB703',
'clear': '#FF2B2B'
'success': (app && app.success) || '#09BE4F',
'warn': (app && app.warning) || '#FFB703',
'clear': (app && app.danger) || '#FF2B2B'
}
return colors[type] ? colors[type] : color;
},
......
src/components/firstui/fui-avatar/fui-avatar.vue → src/components/FirstUI/fui-avatar/fui-avatar.vue
......@@ -3,8 +3,8 @@
:style="wrapStyles" @tap="handleClick">
<image class="fui-avatar__img" :style="styles"
:class="[radius===-1?'fui-avatar__'+shape:'',width?'':'fui-avatar__size-'+size]" :src="showImg" :mode="mode"
v-if="src" :webp="webp" :lazy-load="lazyLoad" @error="handleError"></image>
<text class="fui-avatar__text" :class="[width?'':'fui-avatar__text-'+size]" v-if="!src && text"
v-if="src && src!==true" :webp="webp" :lazy-load="lazyLoad" @error="handleError"></image>
<text class="fui-avatar__text" :class="[width?'':'fui-avatar__text-'+size]" v-if="!src && src!==true && text"
:style="textStyles">{{text}}</text>
<slot></slot>
</view>
......@@ -25,7 +25,7 @@
},
mode: {
type: String,
default: 'widthFix'
default: 'scaleToFill'
},
//微信小程序、百度小程序、字节跳动小程序
//图片懒加载。只针对page与scroll-view下的image有效
......@@ -105,9 +105,6 @@
}
},
computed: {
wrapStyles() {
return `background:${this.background};margin-right:${this.marginRight}rpx;margin-bottom:${this.marginBottom}rpx;${this.styles}`
},
styles() {
let styles = '';
if (this.width) {
......@@ -118,6 +115,9 @@
}
return styles;
},
wrapStyles() {
return `background:${this.background};margin-right:${this.marginRight}rpx;margin-bottom:${this.marginBottom}rpx;${this.styles};`
},
textStyles() {
let styles = `color:${this.color};font-weight:${this.fontWeight};`;
if (this.fontSize) {
......@@ -126,10 +126,10 @@
return styles;
}
},
watch:{
src(val){
this.src && (this.showImg = this.src);
}
watch: {
src(val) {
this.src && (this.showImg = this.src);
}
},
data() {
return {
......@@ -178,6 +178,7 @@
/* #ifndef APP-NVUE */
display: block;
object-fit: cover;
flex-shrink: 0;
/* #endif */
}
......
src/components/firstui/fui-badge/fui-badge.vue → src/components/FirstUI/fui-badge/fui-badge.vue
<template>
<text
:class="[dot?'fui-badge__dot':'fui-badge__wrap',background?'':('fui-badge__bg-'+type),absolute?'fui-badge__absolute':'',scaleRatio!=1 && isNvue?'fui-badge__trans-origin':'',!background && type==='white'?'fui-badge__text-color':'']"
:style="{top:absolute?top:'auto',right:absolute?right:'auto',zoom:scaleRatio,transform:isNvue?`scale(${scaleRatio})`:'scale(1)',marginTop:marginTop+'rpx',marginLeft:marginLeft+'rpx',marginRight:marginRight+'rpx',width:width,color:color,background:background}"
:style="{top:absolute?top:'auto',right:absolute?right:'auto',zoom:scaleRatio,transform:isNvue?`scale(${scaleRatio})`:'scale(1)',marginTop:marginTop+'rpx',marginLeft:marginLeft+'rpx',marginRight:marginRight+'rpx',width:width,color:color,background:getBgColor}"
@tap="handleClick" v-if="showValue || dot">{{dot?'':showValue}}</text>
</template>
......@@ -83,6 +83,27 @@
showValue: ''
};
},
computed: {
getBgColor() {
let color = this.background
// #ifdef APP-NVUE
if (!color && this.type) {
//primary，success，warning，danger，purple，white
const app = uni && uni.$fui && uni.$fui.color
const colors = {
primary: (app && app.primary) || '#465CFF',
success: (app && app.success) || '#09BE4F',
warning: (app && app.warning) || '#FFB703',
danger: (app && app.danger) || '#FF2B2B',
purple: (app && app.purple) || '#6831FF',
white: '#FFFFFF'
}
color = colors[this.type] || colors.primary
}
// #endif
return color
}
},
watch: {
value(val) {
this.getWidth()
......@@ -180,30 +201,6 @@
/* #endif */
/* #ifdef APP-NVUE */
.fui-badge__bg-primary {
background-color: #465CFF !important;
}
.fui-badge__bg-success {
background-color: #09BE4F !important;
}
.fui-badge__bg-warning {
background-color: #FFB703 !important;
}
.fui-badge__bg-danger {
background-color: #FF2B2B !important;
}
.fui-badge__bg-purple {
background-color: #6831FF !important;
}
.fui-badge__bg-white {
background-color: #FFFFFF !important;
}
.fui-badge__text-color {
color: #FF2B2B !important;
}
......
src/components/FirstUI/fui-banner-arc/fui-banner-arc.vue 0 → 100644
<template>
<view class="fui-banner__arc-wrap" ref="fui_banner__arc"
:style="{height:height+'rpx',marginTop:marginTop+'rpx',marginBottom:marginBottom+'rpx'}" @tap="handleClick">
<!-- #ifndef APP-NVUE -->
<view class="fui-banner__arc-inner"
:style="{background:background,height:height+'rpx',width:width+'%',paddingLeft:(width-100)/2+'%',paddingRight:(width-100)/2+'%',left:'-'+(width-100)/2+'%'}">
<slot></slot>
</view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view class="fui-banner__arc-inner"
:style="{background:background,height:width+'rpx',width:width+'px',paddingLeft:(width-bannerWidth)/2+'px',paddingRight:(width-bannerWidth)/2+'px',left:'-'+(width-bannerWidth)/2+'px'}">
<slot></slot>
</view>
<!-- #endif -->
</view>
</template>
<script>
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin('dom');
// #endif
export default {
name: "fui-banner-arc",
emits: ['click'],
// #ifdef MP-WEIXIN
options: {
virtualHost: true
},
// #endif
props: {
height: {
type: [Number, String],
default: 400
},
//圆弧view宽度与banner宽度比率，最小值 1.2:1
ratio: {
type: [Number, String],
default: 1.2
},
background: {
type: String,
default: ''
},
marginTop: {
type: [Number, String],
default: 0
},
marginBottom: {
type: [Number, String],
default: 0
}
},
watch: {
ratio(val) {
// #ifdef APP-NVUE
if (this.bannerWidth) {
this.initArcWidth()
}
// #endif
// #ifndef APP-NVUE
this.initArcWidth()
// #endif
}
},
data() {
return {
// #ifdef APP-NVUE
width: 450,
// #endif
// #ifndef APP-NVUE
width: 120,
// #endif
bannerWidth: 375
};
},
// #ifdef APP-NVUE
mounted() {
this.$nextTick(() => {
setTimeout(() => {
this._getSize()
}, 50)
});
},
// #endif
// #ifndef APP-NVUE
created() {
this.initArcWidth()
},
// #endif
methods: {
getPercent(val) {
//最低值120
val = Number(val || 0)
return val < 120 ? 120 : val
},
initArcWidth() {
let ratio = Number(this.ratio || 0)
// #ifdef APP-NVUE
ratio = ratio < 1.5 ? 1.5 : ratio;
let width = Math.ceil(this.bannerWidth * ratio)
width = width % 2 === 0 ? width : width + 1;
this.width = width;
// #endif
// #ifndef APP-NVUE
ratio = ratio < 1.2 ? 1.2 : ratio;
this.width = 100 * ratio;
// #endif
},
// #ifdef APP-NVUE
_getSize() {
dom.getComponentRect(this.$refs['fui_banner__arc'], (ret) => {
const size = ret.size
if (size) {
this.bannerWidth = size.width
this.initArcWidth()
}
})
},
// #endif
handleClick() {
this.$emit('click', {})
}
}
}
</script>
<style scoped>
.fui-banner__arc-wrap {
/* #ifndef APP-NVUE */
width: 100%;
display: flex;
/* #endif */
position: relative;
flex-direction: column;
align-items: center;
overflow: hidden;
}
.fui-banner__arc-inner {
position: absolute;
/* #ifndef APP-NVUE */
top:0;
box-sizing: border-box;
z-index: 1;
border-radius: 0 0 50% 50%;
/* #endif */
/* #ifdef APP-NVUE */
bottom: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 10000px;
border-bottom-left-radius: 10000px;
/* #endif */
overflow: hidden;
}
</style>
src/components/firstui/fui-bubble-box/fui-bubble-box.vue → src/components/FirstUI/fui-bubble-box/fui-bubble-box.vue
......@@ -79,7 +79,7 @@
},
right: {
type: [Number, String],
default: 8
default: 0
},
top: {
type: [Number, String],
......
src/components/firstui/fui-button/fui-button.vue → src/components/FirstUI/fui-button/fui-button.vue
<template>
<view class="fui-button__wrap"
:class="[!width || width==='100%' || width===true?'fui-button__flex-1':'',disabled && !disabledBackground ? 'fui-button__opacity' : '']"
:style="{width: width,height: getHeight,marginTop:margin[0] || 0, marginRight:margin[1]||0,marginBottom:margin[2] || margin[0]||0,marginLeft:margin[3] || margin[1]||0,borderRadius: getRadius,background:getBackground}"
:class="[!getWidth || getWidth==='100%' || getWidth===true?'fui-button__flex-1':'',disabled && !disabledBackground ? 'fui-button__opacity' : '']"
:style="{width: getWidth,height: getHeight,marginTop:margin[0] || 0, marginRight:margin[1]||0,marginBottom:margin[2] || margin[0]||0,marginLeft:margin[3] || margin[1]||0,borderRadius: getRadius,background:getBackground}"
@touchstart="handleStart" @touchend="handleClick" @touchcancel="handleEnd">
<button class="fui-button" :class="[
bold ? 'fui-text__bold' : '',
time && (plain || type==='link') ? 'fui-button__opacity' : '',
!background && !disabledBackground && !plain?('fui-button__'+type):'',
!width || width==='100%' || width===true?'fui-button__flex-1':'',
!getWidth || getWidth==='100%' || getWidth===true?'fui-button__flex-1':'',
time && !plain && type!=='link' ? 'fui-button__active' : '',
pc && !disabled?(plain || type==='link'?'fui-button__opacity-pc':'fui-button__active-pc'):'',
]" :style="{
width: width,
width: getWidth,
height: getHeight,
lineHeight: getHeight,
background: disabled ? (disabledBackground || getTypeColor) : (plain ? 'transparent' : getBackground),
......@@ -21,14 +21,13 @@
borderRadius: getRadius,
fontSize: getSize,
color: getColor
}" :loading="loading" :form-type="formType" :open-type="openType" :app-parameter="appParameter" @getuserinfo="bindgetuserinfo"
@getphonenumber="bindgetphonenumber" @contact="bindcontact" @error="binderror"
@opensetting="bindopensetting" @chooseavatar="bindchooseavatar" @launchapp="bindlaunchapp"
:disabled="disabled" :scope="scope" @tap.stop="handleTap">
}" :loading="loading" :form-type="formType" :open-type="openType" :app-parameter="appParameter"
@getuserinfo="bindgetuserinfo" @getphonenumber="bindgetphonenumber" @contact="bindcontact"
@error="binderror" @opensetting="bindopensetting" @chooseavatar="bindchooseavatar"
@launchapp="bindlaunchapp" :disabled="disabled" :scope="scope" @tap.stop="handleTap">
<text class="fui-button__text"
:class="{'fui-btn__gray-color':!background && !disabledBackground && !plain && type==='gray' && color==='#fff','fui-text__bold':bold}"
v-if="text"
:style="{fontSize: getSize,lineHeight:getSize,color:color? (disabled && disabledBackground ? disabledColor : color):(type==='gray'?'#465CFF':'#FFFFFF')}">{{text}}</text>
v-if="text" :style="{fontSize: getSize,lineHeight:getSize,color:getColor}">{{text}}</text>
<slot></slot>
</button>
<!-- #ifndef APP-NVUE -->
......@@ -44,10 +43,11 @@
export default {
name: 'fui-button',
emits: ['click', 'getuserinfo', 'contact', 'getphonenumber', 'error', 'opensetting'],
// #ifndef VUE3
// #ifdef MP-WEIXIN
behaviors: ['wx://form-field-button'],
// #endif
// #ifdef MP-BAIDU || MP-QQ
behaviors: ['uni://form-field'],
// #endif
props: {
//样式类型：primary，success， warning，danger，link，purple，gray
......@@ -96,6 +96,11 @@
type: String,
default: ''
},
//V1.9.8+ 按钮大小，优先级高于width和height，medium、small、mini
btnSize: {
type: String,
default: ''
},
//宽度
width: {
type: String,
......@@ -167,13 +172,14 @@
// #ifndef APP-NVUE
return '';
// #endif
const app = uni && uni.$fui && uni.$fui.color
let colors = {
primary: '#465CFF',
success: '#09BE4F',
warning: '#FFB703',
danger: '#FF2B2B',
primary: (app && app.primary) || '#465CFF',
success: (app && app.success) || '#09BE4F',
warning: (app && app.warning) || '#FFB703',
danger: (app && app.danger) || '#FF2B2B',
link: 'transparent',
purple: '#6831FF',
purple: (app && app.purple) || '#6831FF',
gray: '#F8F8F8'
}
return colors[this.type] || 'transparent'
......@@ -196,18 +202,44 @@
if (this.disabled && this.disabledBackground) {
color = this.disabledColor || '#FFFFFF'
} else {
color = this.type === 'gray' ? '#465CFF' : '#FFFFFF'
const app = uni && uni.$fui && uni.$fui.color;
const primary = (app && app.primary) || '#465CFF';
color = this.type === 'gray' ? primary : '#FFFFFF'
}
}
return color;
},
getSize() {
const size = (uni && uni.$fui && uni.$fui.fuiButton && uni.$fui.fuiButton.size) || 32
return `${this.size || size}rpx`
let size = this.size || (uni && uni.$fui && uni.$fui.fuiButton && uni.$fui.fuiButton.size) || 32
if (this.btnSize === 'small') {
size = size > 28 ? 28 : size;
} else if (this.btnSize === 'mini') {
size = size > 28 ? 24 : size;
}
return `${size}rpx`
},
getWidth() {
//medium 400*84 / small 200*84/ mini 120 * 64
let width = this.width;
if (this.btnSize && this.btnSize !== true) {
width = {
'medium': '400rpx',
'small': '200rpx',
'mini': '120rpx'
} [this.btnSize] || width
}
return width
},
getHeight() {
const height = (uni && uni.$fui && uni.$fui.fuiButton && uni.$fui.fuiButton.height) || '96rpx'
return this.height || height
let height = this.height || (uni && uni.$fui && uni.$fui.fuiButton && uni.$fui.fuiButton.height) || '96rpx'
if (this.btnSize && this.btnSize !== true) {
height = {
'medium': '84rpx',
'small': '72rpx',
'mini': '64rpx'
} [this.btnSize] || height
}
return height
},
// #ifndef APP-NVUE
getBorderRadius() {
......
src/components/firstui/fui-calendar/fui-calendar.vue → src/components/FirstUI/fui-calendar/fui-calendar.vue
......@@ -37,9 +37,9 @@
:style="{background:getBackground(index,idx,values),width:itemWidth}">
<text class="fui-calendar__date-val" :style="{color:getColor(index,idx,values)}">{{sub}}</text>
<text class="fui-calendar__date-lunar" v-if="showLunar && language!=='en'"
:style="{color:getColor(index,idx,values)}">{{getText(index,idx)}}</text>
:style="{color:getColor(index,idx,values)}">{{getText(index,idx) || descrArr[idx]}}</text>
<text class="fui-calendar__date-descr" v-if="!showLunar || language==='en'"
:style="{color:getColor(index,idx,values)}">{{getText(index,idx)}}</text>
:style="{color:getColor(index,idx,values)}">{{getText(index,idx) || descrArr[idx]}}</text>
</view>
</view>
</swiper-item>
......@@ -55,16 +55,15 @@
:style="{background:getBackground(month-1,idx,values),width:itemWidth}">
<text class="fui-calendar__date-val" :style="{color:getColor(month-1,idx,values)}">{{sub}}</text>
<text class="fui-calendar__date-lunar" v-if="showLunar && language!=='en'"
:style="{color:getColor(month-1,idx,values)}">{{getText(month-1,idx)}}</text>
:style="{color:getColor(month-1,idx,values)}">{{getText(month-1,idx) || descrArr[idx]}}</text>
<text class="fui-calendar__date-descr" v-if="!showLunar || language==='en'"
:style="{color:getColor(month-1,idx,values)}">{{getText(month-1,idx)}}</text>
:style="{color:getColor(month-1,idx,values)}">{{getText(month-1,idx) || descrArr[idx]}}</text>
</view>
</view>
</view>
<view class="fui-calendar__btn-wrap" v-if="showBtn">
<view class="fui-calendar__btn"
:class="{'fui-calendar__btn-color':!btnBackground,'fui-calendar__diaabled':btnDisabled}"
:style="{background:btnBackground}">
<view class="fui-calendar__btn" :class="{'fui-calendar__diaabled':btnDisabled}"
:style="{background:btnBackground || primaryColor}">
<text class="fui-calendar__btn"
:class="{'fui-calendar__btn-text':true,'fui-calendar__btn-active':!btnDisabled}"
:style="{color:btnColor}" @tap.stop="handleClick">{{btnText}}</text>
......@@ -78,7 +77,7 @@
// import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
export default {
name: "fui-calendar",
emits: ['change'],
emits: ['change', 'dateChange'],
// components: {
// fuiIcon
// },
......@@ -168,11 +167,11 @@
//选中日期背景色
activeBackground: {
type: String,
default: '#465CFF'
default: ''
},
rangeColor: {
type: String,
default: '#465CFF'
default: ''
},
rangeBackground: {
type: String,
......@@ -204,7 +203,7 @@
},
btnBackground: {
type: String,
default: '#465CFF'
default: ''
},
btnColor: {
type: String,
......@@ -220,9 +219,10 @@
weekdayArr: [],
daysArr: []
},
descrArr: [],
dateWidth: '100%',
title: '',
year: 2010,
year: 0,
month: 1,
today: '',
minArr: [],
......@@ -244,6 +244,10 @@
// #ifndef APP-NVUE
return '14.2857%'
// #endif
},
primaryColor() {
const app = uni && uni.$fui && uni.$fui.color;
return (app && app.primary) || '#465CFF';
}
},
watch: {
......@@ -263,6 +267,14 @@
if (!val) {
this.singleMonth = this.monthArr[this.month - 1]
}
},
title(val) {
if (this.year === 0) return;
this.descrArr = []
this.$emit('dateChange', {
year: this.year,
month: this.month
})
}
},
created() {
......@@ -301,7 +313,8 @@
},
swiperChange(e) {
let current = e.detail.current
let month = current + 1
const month = current + 1
this.month = month
this.title = this.language === 'en' ? `${lunar.lang.m_en[month-1]} ${this.year}` :
`${this.year}年${month}月`;
},
......@@ -366,7 +379,7 @@
if (~values.indexOf(date)) {
color = this.activeColor
} else if (values[1] && this._isSection(date, values[0], values[1])) {
color = this.rangeColor
color = this.rangeColor || this.primaryColor
}
} else {
if (~values.indexOf(date)) {
......@@ -384,13 +397,13 @@
let type = this.type;
if (type == 3) {
if (~values.indexOf(date)) {
background = this.activeBackground
background = this.activeBackground || this.primaryColor
} else if (values[1] && this._isSection(date, values[0], values[1])) {
background = this.rangeBackground
}
} else {
if (~values.indexOf(date)) {
background = this.activeBackground
background = this.activeBackground || this.primaryColor
}
}
return background
......@@ -406,13 +419,14 @@
if (values[0] == date && values[0] != values[1]) {
let st = this.start;
text = st && st !== 'true' && st !== true ? st : '';
} else if (values[1] == date) {
let et = this.end;
text = et && et !== 'true' && et !== true ? et : '';
}
}
}
if (!text) {
if (!text && !this.descrArr[idx]) {
text = this.showLunar ? this.getLunar(month, day) : ''
if (this.isToday) {
//今天 简繁同体
......@@ -465,6 +479,7 @@
return bool;
},
setTitle() {
if (this.year === 0) return;
this.title = this.language === 'en' ? `${lunar.lang.m_en[this.month-1]} ${this.year}` :
`${this.year}年${this.month}月`
},
......@@ -647,6 +662,18 @@
handleClick() {
if (this.btnDisabled) return;
this._change()
},
// 传入一个返回Promise的函数，设置当前日历数据描述
//返回当前日历数据
setDescr(callback) {
const item = this.monthArr[this.month - 1]
if (item && callback && typeof callback === 'function') {
callback(this.year, this.month, item.daysArr).then(res => {
this.descrArr = res
}).catch(err => {
this.descrArr = []
})
}
}
}
}
......
src/components/firstui/fui-cascader/fui-cascader.vue → src/components/FirstUI/fui-cascader/fui-cascader.vue
......@@ -7,10 +7,10 @@
<view class="fui-cascader__header-item" :id="`fui_cr_${idx}`" v-for="(item, idx) in selectedArr"
:key="idx" @tap.stop="swichTabs(idx)">
<text class="fui-cascader__header-text"
:class="{'fui-cascader__hi-width':item.text.length>6,'fui-cascader__color':idx === current && !activeColor}"
:style="{ color: idx === current ? activeColor : color, fontSize: size + 'rpx',fontWeight:idx === current?'bold':'normal' }">{{ item.text }}</text>
<view class="fui-cascader__header-line" :class="{'fui-cascader__bg':!activeColor}"
:style="{ background: activeColor }" v-if="idx === current && showLine"></view>
:class="{'fui-cascader__hi-width':item.text.length>6,'fui-cascader__color':idx === current && !getActiveColor}"
:style="{ color: idx === current ? getActiveColor : color, fontSize: size + 'rpx',fontWeight:idx === current?'bold':'normal' }">{{ item.text }}</text>
<view class="fui-cascader__header-line" :class="{'fui-cascader__bg':!getActiveColor}"
:style="{ background: getActiveColor }" v-if="idx === current && showLine"></view>
</view>
</view>
</scroll-view>
......@@ -32,8 +32,8 @@
<view class="fui-cascader__cell" :id="`fui_c_${subi}`" v-for="(sub, subi) in item.data"
:key="subi" @tap.stop="change(index, subi, sub)">
<view class="fui-cascader__checkmark"
:class="{'fui-cascader__icon-border':!activeColor}"
:style="{borderBottomColor:checkMarkColor || activeColor,borderRightColor:checkMarkColor || activeColor}"
:class="{'fui-cascader__icon-border':!getActiveColor}"
:style="{borderBottomColor:checkMarkColor || getActiveColor,borderRightColor:checkMarkColor || getActiveColor}"
v-if="item.index === subi"></view>
<image :src="sub.src" v-if="sub.src" class="fui-cascader__img"
:style="{ width: imgWidth+'rpx', height: imgHeight+'rpx', borderRadius: radius+'rpx' }">
......@@ -105,18 +105,10 @@
default: '#181818'
},
//选中颜色
// #ifdef APP-NVUE
activeColor: {
type: String,
default: '#465CFF'
},
// #endif
// #ifndef APP-NVUE
activeColor: {
type: String,
default: ''
},
// #endif
showLine: {
type: Boolean,
default: true
......@@ -159,6 +151,18 @@
default: '#181818'
}
},
computed: {
getActiveColor() {
let color = this.activeColor;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color;
}
},
data() {
return {
current: 0,
......
src/components/firstui/fui-checkbox-group/fui-checkbox-group.vue → src/components/FirstUI/fui-checkbox-group/fui-checkbox-group.vue
<template>
<!-- #ifdef APP-PLUS || H5 || MP-ALIPAY || MP-TOUTIAO -->
<!-- #ifdef APP-PLUS || H5 || MP-ALIPAY || MP-TOUTIAO|| MP-KUAISHOU || MP-JD || MP-360 || MP-LARK -->
<checkbox-group :name="name">
<slot></slot>
</checkbox-group>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU || MP-JD || MP-360 || MP-LARK -->
<fui-form-field :name="name" :value="vals">
<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ -->
<fui-form-field :name="name" v-model="vals">
<slot></slot>
</fui-form-field>
<!-- #endif -->
......@@ -16,10 +16,11 @@
export default {
name: "fui-checkbox-group",
emits: ['change', 'input', 'update:modelValue'],
// #ifndef VUE3
// #ifdef MP-WEIXIN
behaviors: ['wx://form-field-group'],
// #endif
// #ifdef MP-BAIDU || MP-QQ || H5
behaviors: ['uni://form-field'],
// #endif
props: {
name: {
......
src/components/firstui/fui-checkbox/fui-checkbox.vue → src/components/FirstUI/fui-checkbox/fui-checkbox.vue
<template>
<view class="fui-checkbox__input"
:class="{'fui-checkbox__disabled':disabled,'fui-checkbox__color':!color && val && !isCheckMark}"
:class="{'fui-checkbox__disabled':disabled,'fui-checkbox__color':!getColor && val && !isCheckMark}"
:style="{backgroundColor:getBackgroundColor(val,isCheckMark),borderColor:getBorderColor(val,isCheckMark),zoom:isNvue?1:scaleRatio,transform:`scale(${isNvue?scaleRatio:1})`,borderRadius:borderRadius}"
@tap.stop="checkboxChange">
<view class="fui-check__mark" :style="{borderBottomColor:checkMarkColor,borderRightColor:checkMarkColor}"
v-if="val"></view>
<checkbox class="fui-checkbox__hidden" style="opacity: 0;position: absolute;" :color="color" :disabled="disabled" :value="value" :checked="val">
<checkbox class="fui-checkbox__hidden" style="opacity: 0;position: absolute;" :color="getColor"
:disabled="disabled" :value="value" :checked="val">
</checkbox>
</view>
</template>
......@@ -35,27 +36,25 @@
//checkbox选中背景颜色
color: {
type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: ''
// #endif
},
//checkbox未选中时边框颜色
borderColor: {
type: String,
default: '#ccc'
},
// #ifdef APP-NVUE
borderRadius: {
type: String,
default: '40px'
},
// #endif
// #ifndef APP-NVUE
borderRadius: {
type: String,
// #ifdef APP-NVUE
default: '40rpx'
// #endif
// #ifndef APP-NVUE
default: '50%'
// #endif
},
// #endif
//是否只展示对号，无边框背景
isCheckMark: {
type: Boolean,
......@@ -100,6 +99,18 @@
}
}
},
computed: {
getColor() {
let color = this.color;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color;
}
},
data() {
let isNvue = false;
// #ifdef APP-NVUE
......@@ -112,14 +123,14 @@
},
methods: {
getBackgroundColor(val, isCheckMark) {
let color = val ? this.color : '#fff'
let color = val ? this.getColor : '#fff'
if (isCheckMark) {
color = 'transparent'
}
return color;
},
getBorderColor(val, isCheckMark) {
let color = val ? this.color : this.borderColor;
let color = val ? this.getColor : this.borderColor;
if (isCheckMark) {
color = 'transparent'
}
......
src/components/firstui/fui-circle/fui-circle.vue → src/components/FirstUI/fui-circle/fui-circle.vue
......@@ -6,8 +6,8 @@
<!-- #ifdef APP-VUE || H5 -->
<canvas :start="percentage" :change:start="parse.init" :width="w" :change:width="parse.widthChange"
:sw="strokeWidth" :change:sw="parse.widthChange" :data-width="w" :data-sw="strokeWidth" :data-lc="lineCap"
:data-size="size" :data-percent="percentage" :data-color="color" :data-show="show" :data-ds="defaultShow"
:data-background="background" :data-foreground="foreground" :data-gradient="gradient" :data-sa="sAngle"
:data-size="size" :data-percent="percentage" :data-color="color || primaryColor" :data-show="show" :data-ds="defaultShow"
:data-background="background" :data-foreground="foreground || primaryColor" :data-gradient="gradient" :data-sa="sAngle"
:data-ccw="counterclockwise" :data-speed="speed" :data-am="activeMode" :data-cid="circleId"
:canvas-id="circleId" :class="[circleId]" :style="{width: w + 'px',height: w + 'px'}"></canvas>
<!-- #endif -->
......@@ -205,7 +205,7 @@
//圆环进度字体颜色
color: {
type: String,
default: '#465CFF'
default: ''
},
//是否显示进度文字
show: {
......@@ -225,7 +225,7 @@
//默认前景颜色
foreground: {
type: String,
default: '#465CFF'
default: ''
},
//进度条渐变颜色，结合foreground使用
gradient: {
......@@ -258,6 +258,12 @@
this.initWidth(val)
}
},
computed: {
primaryColor() {
const app = uni && uni.$fui && uni.$fui.color;
return (app && app.primary) || '#465CFF';
}
},
data() {
// #ifndef MP-WEIXIN
const circleId = `fui_cc_${Math.ceil(Math.random() * 10e5).toString(36)}`
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论