Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 069523bf 作者: 方治民
操作

Merge branch '3.x' of https://gitlab.yiring.com/basic/basic-uniapp-v3 into examples

上级 1a689ce3 3c893ebe
正在显示 包含 4072 行增加 和 1125 行删除
package.json
...@@ -66,59 +66,59 @@ ...@@ -66,59 +66,59 @@
} }
}, },
"dependencies": { "dependencies": {
"@dcloudio/uni-app": "3.0.0-alpha-3080120230425001", "@dcloudio/uni-app": "3.0.0-3080320230526001",
"@dcloudio/uni-app-plus": "3.0.0-alpha-3080120230425001", "@dcloudio/uni-app-plus": "3.0.0-3080320230526001",
"@dcloudio/uni-components": "3.0.0-alpha-3080120230425001", "@dcloudio/uni-components": "3.0.0-3080320230526001",
"@dcloudio/uni-h5": "3.0.0-alpha-3080120230425001", "@dcloudio/uni-h5": "3.0.0-3080320230526001",
"@dcloudio/uni-mp-alipay": "3.0.0-alpha-3080120230425001", "@dcloudio/uni-mp-alipay": "3.0.0-3080320230526001",
"@dcloudio/uni-mp-baidu": "3.0.0-alpha-3080120230425001", "@dcloudio/uni-mp-baidu": "3.0.0-3080320230526001",
"@dcloudio/uni-mp-jd": "3.0.0-alpha-3080120230425001", "@dcloudio/uni-mp-jd": "3.0.0-3080320230526001",
"@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-3080120230425001", "@dcloudio/uni-mp-kuaishou": "3.0.0-3080320230526001",
"@dcloudio/uni-mp-lark": "3.0.0-alpha-3080120230425001", "@dcloudio/uni-mp-lark": "3.0.0-3080320230526001",
"@dcloudio/uni-mp-qq": "3.0.0-alpha-3080120230425001", "@dcloudio/uni-mp-qq": "3.0.0-3080320230526001",
"@dcloudio/uni-mp-toutiao": "3.0.0-alpha-3080120230425001", "@dcloudio/uni-mp-toutiao": "3.0.0-3080320230526001",
"@dcloudio/uni-mp-weixin": "3.0.0-alpha-3080120230425001", "@dcloudio/uni-mp-weixin": "3.0.0-3080320230526001",
"@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3080120230425001", "@dcloudio/uni-quickapp-webview": "3.0.0-3080320230526001",
"@dcloudio/uni-ui": "^1.4.27", "@dcloudio/uni-ui": "^1.4.27",
"@faker-js/faker": "^7.6.0", "@faker-js/faker": "^8.0.2",
"@vue/runtime-core": "^3.2.47", "@vue/runtime-core": "~3.2.47",
"@vueuse/core": "^10.1.0", "@vueuse/core": "^10.1.2",
"axios": "^0.26.1", "axios": "^1.4.0",
"crypto-js": "^4.1.1", "crypto-js": "^4.1.1",
"dayjs": "^1.11.7", "dayjs": "^1.11.7",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"nanoid": "^4.0.2", "nanoid": "^4.0.2",
"pinia": "^2.0.35", "pinia": "~2.0.36",
"pinyin-pro": "^3.13.2", "pinyin-pro": "^3.14.0",
"qs": "~6.9.7", "qs": "~6.9.7",
"stompjs": "^2.3.3", "stompjs": "^2.3.3",
"urijs": "^1.19.11", "urijs": "^1.19.11",
"vue": "^3.2.47", "vue": "~3.2.47",
"vue-i18n": "^9.2.2", "vue-i18n": "^9.2.2",
"vue-request": "2.0.0-rc.4", "vue-request": "2.0.0-rc.4",
"vue-types": "^5.0.2" "vue-types": "^5.0.3"
}, },
"devDependencies": { "devDependencies": {
"@antfu/eslint-config": "^0.38.5", "@antfu/eslint-config": "^0.39.3",
"@commitlint/cli": "^17.6.1", "@commitlint/cli": "^17.6.3",
"@commitlint/config-conventional": "^17.6.1", "@commitlint/config-conventional": "^17.6.3",
"@dcloudio/types": "^3.3.3", "@dcloudio/types": "^3.3.3",
"@dcloudio/uni-automator": "3.0.0-alpha-3080120230425001", "@dcloudio/uni-automator": "3.0.0-3080320230526001",
"@dcloudio/uni-cli-shared": "3.0.0-alpha-3080120230425001", "@dcloudio/uni-cli-shared": "3.0.0-3080320230526001",
"@dcloudio/uni-helper-json": "^1.0.13", "@dcloudio/uni-helper-json": "^1.0.13",
"@dcloudio/uni-stacktracey": "3.0.0-alpha-3080120230425001", "@dcloudio/uni-stacktracey": "3.0.0-3080320230526001",
"@dcloudio/vite-plugin-uni": "3.0.0-alpha-3080120230425001", "@dcloudio/vite-plugin-uni": "3.0.0-3080320230526001",
"@iconify/json": "^2.2.56", "@iconify/json": "^2.2.71",
"@types/crypto-js": "^4.1.1", "@types/crypto-js": "^4.1.1",
"@types/lodash-es": "^4.17.7", "@types/lodash-es": "^4.17.7",
"@types/mapbox-gl": "^2.7.10", "@types/mapbox-gl": "^2.7.11",
"@types/node": "^18.16.2", "@types/node": "^18.16.16",
"@types/prettier": "^2.7.2", "@types/prettier": "^2.7.2",
"@types/qs": "^6.9.7", "@types/qs": "^6.9.7",
"@types/stompjs": "^2.3.5", "@types/stompjs": "^2.3.5",
"@types/urijs": "^1.19.19", "@types/urijs": "^1.19.19",
"@typescript-eslint/eslint-plugin": "^5.59.1", "@typescript-eslint/eslint-plugin": "^5.59.8",
"@typescript-eslint/parser": "^5.59.1", "@typescript-eslint/parser": "^5.59.8",
"commitizen": "^4.3.0", "commitizen": "^4.3.0",
"conventional-changelog-cli": "^2.2.2", "conventional-changelog-cli": "^2.2.2",
"cz-conventional-changelog": "^3.3.0", "cz-conventional-changelog": "^3.3.0",
...@@ -126,38 +126,38 @@ ...@@ -126,38 +126,38 @@
"cz-git": "^1.6.1", "cz-git": "^1.6.1",
"czg": "^1.6.1", "czg": "^1.6.1",
"dotenv": "^16.0.3", "dotenv": "^16.0.3",
"eslint": "^8.39.0", "eslint": "^8.41.0",
"eslint-config-prettier": "^8.8.0", "eslint-config-prettier": "^8.8.0",
"eslint-plugin-prettier": "^4.2.1", "eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.11.0", "eslint-plugin-vue": "^9.14.1",
"husky": "^8.0.3", "husky": "^8.0.3",
"jest": "27.0.4", "jest": "27.0.4",
"jest-environment-node": "27.5.1", "jest-environment-node": "27.5.1",
"less": "^4.1.3", "less": "^4.1.3",
"lint-staged": "^13.2.2", "lint-staged": "^13.2.2",
"mapbox-gl": "^2.14.1", "mapbox-gl": "^2.15.0",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"picocolors": "^1.0.0", "picocolors": "^1.0.0",
"pont-engine": "^1.5.7", "pont-engine": "^1.5.10",
"postcss": "^8.4.23", "postcss": "^8.4.24",
"postcss-html": "^1.5.0", "postcss-html": "^1.5.0",
"postcss-less": "^6.0.0", "postcss-less": "^6.0.0",
"prettier": "^2.8.8", "prettier": "^2.8.8",
"rimraf": "^5.0.0", "rimraf": "^5.0.1",
"sass": "^1.62.1", "sass": "^1.62.1",
"sort-package-json": "^2.4.1", "sort-package-json": "^2.4.1",
"stylelint": "^15.6.0", "stylelint": "^15.6.2",
"stylelint-config-html": "^1.1.0", "stylelint-config-html": "^1.1.0",
"stylelint-config-recommended": "^12.0.0", "stylelint-config-recommended": "^12.0.0",
"stylelint-config-standard": "^33.0.0", "stylelint-config-standard": "^33.0.0",
"stylelint-order": "^6.0.3", "stylelint-order": "^6.0.3",
"typescript": "^5.0.4", "typescript": "^5.0.4",
"unocss": "^0.50.8", "unocss": "^0.52.4",
"unocss-preset-weapp": "^0.5.3", "unocss-preset-weapp": "^0.52.1",
"unplugin-auto-import": "^0.15.3", "unplugin-auto-import": "^0.16.2",
"unplugin-vue-components": "^0.24.1", "unplugin-vue-components": "^0.24.1",
"vite": "^4.3.3", "vite": "^4.3.9",
"vue-eslint-parser": "^9.1.1" "vue-eslint-parser": "^9.3.0"
}, },
"engines": { "engines": {
"node": ">=16", "node": ">=16",
......
pnpm-lock.yaml
This source diff could not be displayed because it is too large. You can view the blob instead.
src/components/CacheImage/index.vue
...@@ -26,26 +26,47 @@ ...@@ -26,26 +26,47 @@
type: String, type: String,
required: true, required: true,
}, },
debug: {
type: Boolean,
default: false,
},
}) })
const src = ref() const visibleSrc = ref()
const hashCacheKey = ref() const hashCacheKey = ref()
onMounted(async () => { onMounted(async () => {
// 尝试缓存图片，如果失败则使用原始图片
await tryCache() await tryCache()
}) })
// 监听 src 变化
watch(
() => props.src,
async () => await tryCache(),
)
function log(...args: any[]) {
if (props.debug) {
console.log('[CacheImage]', ...args)
}
}
// 尝试缓存图片，如果失败则使用原始图片
async function tryCache() { async function tryCache() {
let url = props.src let url = props.src
if (!url) {
return
}
// 如果是网络图片，则缓存到本地
if (url.startsWith('http')) {
// #ifdef APP-PLUS // #ifdef APP-PLUS
const hash = md5(url).toString() const hash = md5(url).toString()
hashCacheKey.value = `G_CACHE_IMAGE_${hash}` hashCacheKey.value = `G_CACHE_IMAGE_${hash}`
if (uni.getStorageSync(hashCacheKey.value)) { if (uni.getStorageSync(hashCacheKey.value)) {
console.debug('CacheImage cache hit') log('cache hit', url)
url = uni.getStorageSync(hashCacheKey.value) url = uni.getStorageSync(hashCacheKey.value)
} else { } else {
console.debug('CacheImage cache miss') log('cache miss', url)
try { try {
const res = await uni.downloadFile({ url }) const res = await uni.downloadFile({ url })
if (res.statusCode === 200) { if (res.statusCode === 200) {
...@@ -60,15 +81,19 @@ ...@@ -60,15 +81,19 @@
// 缓存图片本地地址 // 缓存图片本地地址
uni.setStorageSync(hashCacheKey.value, url) uni.setStorageSync(hashCacheKey.value, url)
} else {
log('cache error', url, res)
url = props.src
} }
} catch (e) { } catch (e) {
console.error(e) console.error(e)
} }
} }
console.debug(props.src, '=>', url, hash, hashCacheKey.value) log(props.src, '=>', url, hash, hashCacheKey.value)
// #endif // #endif
}
src.value = url visibleSrc.value = url
} }
const hasError = ref(false) const hasError = ref(false)
...@@ -78,7 +103,7 @@ ...@@ -78,7 +103,7 @@
} }
hasError.value = true hasError.value = true
src.value = props.src visibleSrc.value = props.src
// 清除缓存 // 清除缓存
hashCacheKey.value && uni.removeStorageSync(hashCacheKey.value) hashCacheKey.value && uni.removeStorageSync(hashCacheKey.value)
console.warn('CacheImage cache error') console.warn('CacheImage cache error')
...@@ -87,12 +112,13 @@ ...@@ -87,12 +112,13 @@
<template> <template>
<fui-lazyload <fui-lazyload
v-bind="$attrs"
:mode="props.mode" :mode="props.mode"
:width="props.width" :width="props.width"
:height="props.height" :height="props.height"
:radius="props.radius" :radius="props.radius"
:background="props.background" :background="props.background"
:src="src" :src="visibleSrc"
@error="onError" @error="onError"
> >
<slot></slot> <slot></slot>
......
src/components/Empty/index.vue
...@@ -25,11 +25,11 @@ ...@@ -25,11 +25,11 @@
</script> </script>
<template> <template>
<view class="empty" :style="[{ background: bgColor }]"> <view class="empty" :style="{ background: bgColor }">
<!-- 暂无数据/空数据 --> <!-- 暂无数据/空数据 -->
<image src="../../static/images/empty.png" /> <image src="../../static/images/empty.png" />
<!-- 提示内容 --> <!-- 提示内容 -->
<view class="empty-tips" :style="[{ color: tipsColor }]">{{ tips }}</view> <view class="empty-tips" :style="{ color: tipsColor }">{{ tips }}</view>
</view> </view>
</template> </template>
......
src/components/firstui/fui-actionsheet/fui-actionsheet.vue
...@@ -213,8 +213,8 @@ ...@@ -213,8 +213,8 @@
let iphonex = false; let iphonex = false;
let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax', let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax',
'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini', 'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini',
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini', 'iphone14plus', 'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini',
'iphone14pro', 'iphone14promax', 'iphone15', 'iphone15mini', 'iphone15plus', 'iphone14pro', 'iphone14promax', 'iphone15', 'iphone15mini',
'iphone15pro', 'iphone15promax' 'iphone15pro', 'iphone15promax'
] ]
const model = res.model.replace(/\s/g, "").toLowerCase() const model = res.model.replace(/\s/g, "").toLowerCase()
......
src/components/firstui/fui-alert/fui-alert.vue
...@@ -122,16 +122,14 @@ ...@@ -122,16 +122,14 @@
default: false default: false
} }
}, },
data() {
return {}
},
methods: { methods: {
getColor(type) { getColor(type) {
const color = "#465CFF" const app = uni && uni.$fui && uni.$fui.color
const color = (app && app.primary) || "#465CFF"
const colors = { const colors = {
'success': '#09BE4F', 'success': (app && app.success) || '#09BE4F',
'warn': '#FFB703', 'warn': (app && app.warning) || '#FFB703',
'clear': '#FF2B2B' 'clear': (app && app.danger) || '#FF2B2B'
} }
return colors[type] ? colors[type] : color; return colors[type] ? colors[type] : color;
}, },
......
src/components/firstui/fui-autograph/fui-autograph.vue
...@@ -17,13 +17,13 @@ ...@@ -17,13 +17,13 @@
<!-- #ifdef MP-QQ --> <!-- #ifdef MP-QQ -->
<canvas :disable-scroll="!completed" canvas-id="canvas_autograph" @touchstart="onTouchstart" <canvas :disable-scroll="!completed" canvas-id="canvas_autograph" @touchstart="onTouchstart"
@touchmove="onTouchmove" @touchend="onTouchend" @touchcancel="onTouchCancel" @touchmove="onTouchmove" @touchend="onTouchend" @touchcancel="onTouchCancel"
:style="{width:w+'px',height:h+'px'}" ></canvas> :style="{width:w+'px',height:h+'px'}"></canvas>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef MP-TOUTIAO --> <!-- #ifdef MP-TOUTIAO -->
<canvas :disable-scroll="!completed" :canvas-id="canvasId" :id="canvasId" @touchstart="onTouchstart" <canvas :disable-scroll="!completed" :canvas-id="canvasId" :id="canvasId" @touchstart="onTouchstart"
@touchmove.stop.prevent="onTouchmove" @touchend="onTouchend" @touchcancel="onTouchCancel" @touchmove.stop.prevent="onTouchmove" @touchend="onTouchend" @touchcancel="onTouchCancel"
:style="{width:w+'px',height:h+'px'}"></canvas> :style="{width:w+'px',height:h+'px'}" v-if="canvasId"></canvas>
<!-- #endif --> <!-- #endif -->
</view> </view>
</template> </template>
...@@ -116,6 +116,7 @@ ...@@ -116,6 +116,7 @@
this.touchs = null; this.touchs = null;
}, },
mounted() { mounted() {
this.$nextTick(() => {
setTimeout(() => { setTimeout(() => {
// #ifdef APP-NVUE // #ifdef APP-NVUE
let ganvas = this.$refs[this.canvasId]; let ganvas = this.$refs[this.canvasId];
...@@ -142,6 +143,7 @@ ...@@ -142,6 +143,7 @@
canvasId: this.canvasId canvasId: this.canvasId
}) })
}, 50) }, 50)
})
}, },
// #ifndef VUE3 // #ifndef VUE3
beforeDestroy() { beforeDestroy() {
......
src/components/firstui/fui-autograph/gcanvas/index.js
import GCanvas from './env/canvas'; import GCanvas from './env/canvas';
import GImage from './env/image'; import GImage from './env/image';
import GWebGLRenderingContext from './context-webgl/RenderingContext';// 2021-5-6变更 import GWebGLRenderingContext from './context-webgl/RenderingContext';
import GContext2D from './context-2d/RenderingContext'; import GContext2D from './context-2d/RenderingContext';
import GBridgeWeex from './bridge/bridge-weex'; import GBridgeWeex from './bridge/bridge-weex';
...@@ -12,12 +12,12 @@ export let WeexBridge = GBridgeWeex; ...@@ -12,12 +12,12 @@ export let WeexBridge = GBridgeWeex;
export function enable(el, { export function enable(el, {
bridge, bridge,
debug,// 2021-5-6变更 debug,
disableAutoSwap, disableAutoSwap,
disableComboCommands disableComboCommands
} = {}) { } = {}) {
const GBridge = GImage.GBridge = GCanvas.GBridge = GWebGLRenderingContext.GBridge = GContext2D.GBridge = bridge;// 功能需要优化 const GBridge = GImage.GBridge = GCanvas.GBridge = GWebGLRenderingContext.GBridge = GContext2D.GBridge = bridge;
GBridge.callEnable(el.ref, [ GBridge.callEnable(el.ref, [
0, // renderMode: 0--RENDERMODE_WHEN_DIRTY, 1--RENDERMODE_CONTINUOUSLY 0, // renderMode: 0--RENDERMODE_WHEN_DIRTY, 1--RENDERMODE_CONTINUOUSLY
...@@ -29,7 +29,7 @@ export function enable(el, { ...@@ -29,7 +29,7 @@ export function enable(el, {
false // sameLevel: newCanvasMode = true && true => GCanvasView and Webview is same level false // sameLevel: newCanvasMode = true && true => GCanvasView and Webview is same level
]); ]);
if (debug === true) {// echo建议 if (debug === true) {
GBridge.callEnableDebug(); GBridge.callEnableDebug();
} }
if (disableComboCommands) { if (disableComboCommands) {
...@@ -41,7 +41,7 @@ export function enable(el, { ...@@ -41,7 +41,7 @@ export function enable(el, {
}); });
let pixelRatio = uni.getSystemInfoSync().pixelRatio; let pixelRatio = uni.getSystemInfoSync().pixelRatio;
canvas.width = el.style.width * pixelRatio; canvas.width = el.style.width * pixelRatio;
canvas.height = el.style.height * pixelRatio;// 新特性待增加 canvas.height = el.style.height * pixelRatio;
return canvas; return canvas;
}; };
src/components/firstui/fui-badge/fui-badge.vue
<template> <template>
<text <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':'']" :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> @tap="handleClick" v-if="showValue || dot">{{dot?'':showValue}}</text>
</template> </template>
...@@ -83,6 +83,27 @@ ...@@ -83,6 +83,27 @@
showValue: '' 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: { watch: {
value(val) { value(val) {
this.getWidth() this.getWidth()
...@@ -180,30 +201,6 @@ ...@@ -180,30 +201,6 @@
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */ /* #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 { .fui-badge__text-color {
color: #FF2B2B !important; color: #FF2B2B !important;
} }
......
src/components/firstui/fui-barcode/fui-barcode.vue
...@@ -7,12 +7,12 @@ ...@@ -7,12 +7,12 @@
<!-- #ifndef APP-NVUE || MP-QQ --> <!-- #ifndef APP-NVUE || MP-QQ -->
<canvas :canvas-id="canvasId" :id="canvasId" :style="{width:w+'px',height:h+'px'}" @longtap="longtap" <canvas :canvas-id="canvasId" :id="canvasId" :style="{width:w+'px',height:h+'px'}" @longtap="longtap"
@touchstart="touchstart" @touchend="touchend"></canvas> @touchstart="touchstart" @touchend="touchend" v-if="canvasId"></canvas>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef MP-QQ --> <!-- #ifdef MP-QQ -->
<canvas canvas-id="canvas_barcode" :style="{width:w+'px',height:h+'px'}" @longtap="longtap" <canvas canvas-id="canvas_barcode" :style="{width:w+'px',height:h+'px'}" @longtap="longtap" @touchstart="touchstart"
@touchstart="touchstart" @touchend="touchend"></canvas> @touchend="touchend"></canvas>
<!-- #endif --> <!-- #endif -->
</template> </template>
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
default: 200 default: 200
}, },
value: { value: {
type: String, type: [Number, String],
default: '' default: ''
} }
}, },
...@@ -84,11 +84,13 @@ ...@@ -84,11 +84,13 @@
this.ctx = null; this.ctx = null;
}, },
mounted() { mounted() {
this.$nextTick(() => {
setTimeout(() => { setTimeout(() => {
this.$emit('ready', { this.$emit('ready', {
canvasId: this.canvasId canvasId: this.canvasId
}) })
}, 50) }, 50)
});
}, },
// #ifndef VUE3 // #ifndef VUE3
beforeDestroy() { beforeDestroy() {
...@@ -118,7 +120,7 @@ ...@@ -118,7 +120,7 @@
// #endif // #endif
} }
const opts = Object.assign({}, this.defalutOptions, options) const opts = Object.assign({}, this.defalutOptions, options)
new barcode(this.value, Object.assign({ new barcode(String(this.value), Object.assign({
width: this.w, width: this.w,
height: this.h height: this.h
}, opts), this.ctx) }, opts), this.ctx)
......
src/components/firstui/fui-bottom-navbar/fui-bottom-navbar.vue
...@@ -148,9 +148,8 @@ ...@@ -148,9 +148,8 @@
let iphonex = false; let iphonex = false;
let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax', let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax',
'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini', 'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini',
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini', 'iphone14plus', 'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini',
'iphone14pro', 'iphone14promax', 'iphone15', 'iphone15mini', 'iphone15plus', 'iphone14pro', 'iphone14promax', 'iphone15'
'iphone15pro', 'iphone15promax'
] ]
const model = res.model.replace(/\s/g, "").toLowerCase() const model = res.model.replace(/\s/g, "").toLowerCase()
const newModel = model.split('<')[0] const newModel = model.split('<')[0]
......
src/components/firstui/fui-bottom-popup/fui-bottom-popup.vue
...@@ -104,9 +104,8 @@ ...@@ -104,9 +104,8 @@
let iphonex = false; let iphonex = false;
let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax', let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax',
'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini', 'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini',
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini', 'iphone14plus', 'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini',
'iphone14pro', 'iphone14promax', 'iphone15', 'iphone15mini', 'iphone15plus', 'iphone14pro', 'iphone14promax'
'iphone15pro', 'iphone15promax'
] ]
const model = res.model.replace(/\s/g, "").toLowerCase() const model = res.model.replace(/\s/g, "").toLowerCase()
const newModel = model.split('<')[0] const newModel = model.split('<')[0]
......
src/components/firstui/fui-bubble-box/fui-bubble-box.vue
...@@ -79,7 +79,7 @@ ...@@ -79,7 +79,7 @@
}, },
right: { right: {
type: [Number, String], type: [Number, String],
default: 8 default: 0
}, },
top: { top: {
type: [Number, String], type: [Number, String],
......
src/components/firstui/fui-button/fui-button.vue
<template> <template>
<view class="fui-button__wrap" :class="[!width || width==='100%' || width===true?'fui-button__flex-1':'',disabled && !disabledBackground ? 'fui-button__opacity' : '']" <view class="fui-button__wrap"
: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"> @touchstart="handleStart" @touchend="handleClick" @touchcancel="handleEnd">
<button class="fui-button" :class="[ <button class="fui-button" :class="[
bold ? 'fui-text__bold' : '', bold ? 'fui-text__bold' : '',
time && (plain || type==='link') ? 'fui-button__opacity' : '', time && (plain || type==='link') ? 'fui-button__opacity' : '',
!background && !disabledBackground && !plain?('fui-button__'+type):'', !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' : '', time && !plain && type!=='link' ? 'fui-button__active' : '',
pc && !disabled?(plain || type==='link'?'fui-button__opacity-pc':'fui-button__active-pc'):'', pc && !disabled?(plain || type==='link'?'fui-button__opacity-pc':'fui-button__active-pc'):'',
]" :style="{ ]" :style="{
width: width, width: getWidth,
height: getHeight, height: getHeight,
lineHeight: getHeight, lineHeight: getHeight,
background: disabled ? (disabledBackground || getTypeColor) : (plain ? 'transparent' : getBackground), background: disabled ? (disabledBackground || getTypeColor) : (plain ? 'transparent' : getBackground),
...@@ -20,9 +21,10 @@ ...@@ -20,9 +21,10 @@
borderRadius: getRadius, borderRadius: getRadius,
fontSize: getSize, fontSize: getSize,
color: getColor color: getColor
}" :loading="loading" :form-type="formType" :open-type="openType" @getuserinfo="bindgetuserinfo" }" :loading="loading" :form-type="formType" :open-type="openType" :app-parameter="appParameter"
@getphonenumber="bindgetphonenumber" @contact="bindcontact" @error="binderror" @getuserinfo="bindgetuserinfo" @getphonenumber="bindgetphonenumber" @contact="bindcontact"
@opensetting="bindopensetting" :disabled="disabled" :scope="scope" @tap.stop="handleTap"> @error="binderror" @opensetting="bindopensetting" @chooseavatar="bindchooseavatar"
@launchapp="bindlaunchapp" :disabled="disabled" :scope="scope" @tap.stop="handleTap">
<text class="fui-button__text" <text class="fui-button__text"
:class="{'fui-btn__gray-color':!background && !disabledBackground && !plain && type==='gray' && color==='#fff','fui-text__bold':bold}" :class="{'fui-btn__gray-color':!background && !disabledBackground && !plain && type==='gray' && color==='#fff','fui-text__bold':bold}"
v-if="text" v-if="text"
...@@ -42,10 +44,11 @@ ...@@ -42,10 +44,11 @@
export default { export default {
name: 'fui-button', name: 'fui-button',
emits: ['click', 'getuserinfo', 'contact', 'getphonenumber', 'error', 'opensetting'], emits: ['click', 'getuserinfo', 'contact', 'getphonenumber', 'error', 'opensetting'],
// #ifndef VUE3
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
behaviors: ['wx://form-field-button'], behaviors: ['wx://form-field-button'],
// #endif // #endif
// #ifdef MP-BAIDU || MP-QQ
behaviors: ['uni://form-field'],
// #endif // #endif
props: { props: {
//样式类型：primary，success， warning，danger，link，purple，gray //样式类型：primary，success， warning，danger，link，purple，gray
...@@ -94,6 +97,11 @@ ...@@ -94,6 +97,11 @@
type: String, type: String,
default: '' default: ''
}, },
//按钮大小，优先级高于width和height，medium、small、mini
btnSize: {
type: String,
default: ''
},
//宽度 //宽度
width: { width: {
type: String, type: String,
...@@ -151,6 +159,10 @@ ...@@ -151,6 +159,10 @@
type: String, type: String,
default: '' default: ''
}, },
appParameter: {
type: String,
default: ''
},
index: { index: {
type: [Number, String], type: [Number, String],
default: 0 default: 0
...@@ -161,13 +173,14 @@ ...@@ -161,13 +173,14 @@
// #ifndef APP-NVUE // #ifndef APP-NVUE
return ''; return '';
// #endif // #endif
const app = uni && uni.$fui && uni.$fui.color
let colors = { let colors = {
primary: '#465CFF', primary: (app && app.primary) || '#465CFF',
success: '#09BE4F', success: (app && app.success) || '#09BE4F',
warning: '#FFB703', warning: (app && app.warning) || '#FFB703',
danger: '#FF2B2B', danger: (app && app.danger) || '#FF2B2B',
link: 'transparent', link: 'transparent',
purple: '#6831FF', purple: (app && app.purple) || '#6831FF',
gray: '#F8F8F8' gray: '#F8F8F8'
} }
return colors[this.type] || 'transparent' return colors[this.type] || 'transparent'
...@@ -190,18 +203,44 @@ ...@@ -190,18 +203,44 @@
if (this.disabled && this.disabledBackground) { if (this.disabled && this.disabledBackground) {
color = this.disabledColor || '#FFFFFF' color = this.disabledColor || '#FFFFFF'
} else { } 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; return color;
}, },
getSize() { getSize() {
const size = (uni && uni.$fui && uni.$fui.fuiButton && uni.$fui.fuiButton.size) || 32 let size = this.size || (uni && uni.$fui && uni.$fui.fuiButton && uni.$fui.fuiButton.size) || 32
return `${this.size || size}rpx` 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() { getHeight() {
const height = (uni && uni.$fui && uni.$fui.fuiButton && uni.$fui.fuiButton.height) || '96rpx' let height = this.height || (uni && uni.$fui && uni.$fui.fuiButton && uni.$fui.fuiButton.height) || '96rpx'
return this.height || height if (this.btnSize && this.btnSize !== true) {
height = {
'medium': '84rpx',
'small': '72rpx',
'mini': '64rpx'
} [this.btnSize] || height
}
return height
}, },
// #ifndef APP-NVUE // #ifndef APP-NVUE
getBorderRadius() { getBorderRadius() {
...@@ -306,6 +345,16 @@ ...@@ -306,6 +345,16 @@
detail = {} detail = {}
} = {}) { } = {}) {
this.$emit('opensetting', detail); this.$emit('opensetting', detail);
},
bindchooseavatar({
detail = {}
} = {}) {
this.$emit('chooseavatar', detail);
},
bindlaunchapp({
detail = {}
} = {}) {
this.$emit('launchapp', detail);
} }
} }
}; };
......
src/components/firstui/fui-calendar/fui-calendar.vue
...@@ -30,31 +30,17 @@ ...@@ -30,31 +30,17 @@
<view class="fui-calendar__date-wrap"> <view class="fui-calendar__date-wrap">
<view class="fui-calendar__date" :style="{width:itemWidth}" :class="['fui-calendar__dh']" <view class="fui-calendar__date" :style="{width:itemWidth}" :class="['fui-calendar__dh']"
v-for="(week,i) in item.weekdayArr" :key="week"></view> v-for="(week,i) in item.weekdayArr" :key="week"></view>
<!-- #ifdef APP-NVUE -->
<text class="fui-calendar__date"
:class="{'fui-calendar__dh':true,'fui-calendar__diaabled':_isDisAbled(index,idx),'fui-calendar__left-radius':_isRadius(index,idx,true),'fui-calendar__right-radius':_isRadius(index,idx)}"
v-for="(sub,idx) in item.daysArr" :key="idx" @tap.stop="dateClick(index,sub)"
:style="{background:getBackground(index,idx,values),width:itemWidth}">
<!-- #endif -->
<!--vue3中text嵌套text会出现警告和部分错误信息--> <!--vue3中text嵌套text会出现警告和部分错误信息-->
<!-- #ifndef APP-NVUE -->
<view class="fui-calendar__date" <view class="fui-calendar__date"
:class="{'fui-calendar__dh':true,'fui-calendar__diaabled':_isDisAbled(index,idx),'fui-calendar__left-radius':_isRadius(index,idx,true),'fui-calendar__right-radius':_isRadius(index,idx)}" :class="{'fui-calendar__dh':true,'fui-calendar__diaabled':_isDisAbled(index,idx),'fui-calendar__left-radius':_isRadius(index,idx,true),'fui-calendar__right-radius':_isRadius(index,idx)}"
v-for="(sub,idx) in item.daysArr" :key="idx" @tap.stop="dateClick(index,sub)" v-for="(sub,idx) in item.daysArr" :key="idx" @tap.stop="dateClick(index,sub)"
:style="{background:getBackground(index,idx,values),width:itemWidth}"> :style="{background:getBackground(index,idx,values),width:itemWidth}">
<!-- #endif --> <text class="fui-calendar__date-val" :style="{color:getColor(index,idx,values)}">{{sub}}</text>
<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'" <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)}}</text>
<text class="fui-calendar__date-descr" v-if="!showLunar || language==='en'" <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)}}</text>
<!-- #ifndef APP-NVUE -->
</view> </view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
</text>
<!-- #endif -->
</view> </view>
</swiper-item> </swiper-item>
</swiper> </swiper>
...@@ -62,37 +48,22 @@ ...@@ -62,37 +48,22 @@
<view class="fui-calendar__date-wrap"> <view class="fui-calendar__date-wrap">
<view class="fui-calendar__date" :style="{width:itemWidth}" :class="['fui-calendar__dh']" <view class="fui-calendar__date" :style="{width:itemWidth}" :class="['fui-calendar__dh']"
v-for="(week,i) in singleMonth.weekdayArr" :key="week"></view> v-for="(week,i) in singleMonth.weekdayArr" :key="week"></view>
<!-- #ifdef APP-NVUE -->
<text class="fui-calendar__date"
:class="{'fui-calendar__dh':true,'fui-calendar__diaabled':_isDisAbled(month-1,idx),'fui-calendar__left-radius':_isRadius(month-1,idx,true),'fui-calendar__right-radius':_isRadius(month-1,idx)}"
v-for="(sub,idx) in singleMonth.daysArr" :key="idx" @tap.stop="dateClick(month-1,sub)"
:style="{background:getBackground(month-1,idx,values),width:itemWidth}">
<!-- #endif -->
<!--vue3中text嵌套text会出现警告和部分错误信息--> <!--vue3中text嵌套text会出现警告和部分错误信息-->
<!-- #ifndef APP-NVUE -->
<view class="fui-calendar__date" <view class="fui-calendar__date"
:class="{'fui-calendar__dh':true,'fui-calendar__diaabled':_isDisAbled(month-1,idx),'fui-calendar__left-radius':_isRadius(month-1,idx,true),'fui-calendar__right-radius':_isRadius(month-1,idx)}" :class="{'fui-calendar__dh':true,'fui-calendar__diaabled':_isDisAbled(month-1,idx),'fui-calendar__left-radius':_isRadius(month-1,idx,true),'fui-calendar__right-radius':_isRadius(month-1,idx)}"
v-for="(sub,idx) in singleMonth.daysArr" :key="idx" @tap.stop="dateClick(month-1,sub)" v-for="(sub,idx) in singleMonth.daysArr" :key="idx" @tap.stop="dateClick(month-1,sub)"
:style="{background:getBackground(month-1,idx,values),width:itemWidth}"> :style="{background:getBackground(month-1,idx,values),width:itemWidth}">
<!-- #endif --> <text class="fui-calendar__date-val" :style="{color:getColor(month-1,idx,values)}">{{sub}}</text>
<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'" <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)}}</text>
<text class="fui-calendar__date-descr" v-if="!showLunar || language==='en'" <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)}}</text>
<!-- #ifndef APP-NVUE -->
</view> </view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
</text>
<!-- #endif -->
</view> </view>
</view> </view>
<view class="fui-calendar__btn-wrap" v-if="showBtn"> <view class="fui-calendar__btn-wrap" v-if="showBtn">
<view class="fui-calendar__btn" <view class="fui-calendar__btn" :class="{'fui-calendar__diaabled':btnDisabled}"
:class="{'fui-calendar__btn-color':!btnBackground,'fui-calendar__diaabled':btnDisabled}" :style="{background:btnBackground || primaryColor}">
:style="{background:btnBackground}">
<text class="fui-calendar__btn" <text class="fui-calendar__btn"
:class="{'fui-calendar__btn-text':true,'fui-calendar__btn-active':!btnDisabled}" :class="{'fui-calendar__btn-text':true,'fui-calendar__btn-active':!btnDisabled}"
:style="{color:btnColor}" @tap.stop="handleClick">{{btnText}}</text> :style="{color:btnColor}" @tap.stop="handleClick">{{btnText}}</text>
...@@ -196,11 +167,11 @@ ...@@ -196,11 +167,11 @@
//选中日期背景色 //选中日期背景色
activeBackground: { activeBackground: {
type: String, type: String,
default: '#465CFF' default: ''
}, },
rangeColor: { rangeColor: {
type: String, type: String,
default: '#465CFF' default: ''
}, },
rangeBackground: { rangeBackground: {
type: String, type: String,
...@@ -232,7 +203,7 @@ ...@@ -232,7 +203,7 @@
}, },
btnBackground: { btnBackground: {
type: String, type: String,
default: '#465CFF' default: ''
}, },
btnColor: { btnColor: {
type: String, type: String,
...@@ -272,6 +243,10 @@ ...@@ -272,6 +243,10 @@
// #ifndef APP-NVUE // #ifndef APP-NVUE
return '14.2857%' return '14.2857%'
// #endif // #endif
},
primaryColor() {
const app = uni && uni.$fui && uni.$fui.color;
return (app && app.primary) || '#465CFF';
} }
}, },
watch: { watch: {
...@@ -394,7 +369,7 @@ ...@@ -394,7 +369,7 @@
if (~values.indexOf(date)) { if (~values.indexOf(date)) {
color = this.activeColor color = this.activeColor
} else if (values[1] && this._isSection(date, values[0], values[1])) { } else if (values[1] && this._isSection(date, values[0], values[1])) {
color = this.rangeColor color = this.rangeColor || this.primaryColor
} }
} else { } else {
if (~values.indexOf(date)) { if (~values.indexOf(date)) {
...@@ -412,13 +387,13 @@ ...@@ -412,13 +387,13 @@
let type = this.type; let type = this.type;
if (type == 3) { if (type == 3) {
if (~values.indexOf(date)) { if (~values.indexOf(date)) {
background = this.activeBackground background = this.activeBackground || this.primaryColor
} else if (values[1] && this._isSection(date, values[0], values[1])) { } else if (values[1] && this._isSection(date, values[0], values[1])) {
background = this.rangeBackground background = this.rangeBackground
} }
} else { } else {
if (~values.indexOf(date)) { if (~values.indexOf(date)) {
background = this.activeBackground background = this.activeBackground || this.primaryColor
} }
} }
return background return background
......
src/components/firstui/fui-cascader/fui-cascader.vue
...@@ -7,10 +7,10 @@ ...@@ -7,10 +7,10 @@
<view class="fui-cascader__header-item" :id="`fui_cr_${idx}`" v-for="(item, idx) in selectedArr" <view class="fui-cascader__header-item" :id="`fui_cr_${idx}`" v-for="(item, idx) in selectedArr"
:key="idx" @tap.stop="swichTabs(idx)"> :key="idx" @tap.stop="swichTabs(idx)">
<text class="fui-cascader__header-text" <text class="fui-cascader__header-text"
:class="{'fui-cascader__hi-width':item.text.length>6,'fui-cascader__color':idx === current && !activeColor}" :class="{'fui-cascader__hi-width':item.text.length>6,'fui-cascader__color':idx === current && !getActiveColor}"
:style="{ color: idx === current ? activeColor : color, fontSize: size + 'rpx',fontWeight:idx === current?'bold':'normal' }">{{ item.text }}</text> :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':!activeColor}" <view class="fui-cascader__header-line" :class="{'fui-cascader__bg':!getActiveColor}"
:style="{ background: activeColor }" v-if="idx === current && showLine"></view> :style="{ background: getActiveColor }" v-if="idx === current && showLine"></view>
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
...@@ -32,8 +32,8 @@ ...@@ -32,8 +32,8 @@
<view class="fui-cascader__cell" :id="`fui_c_${subi}`" v-for="(sub, subi) in item.data" <view class="fui-cascader__cell" :id="`fui_c_${subi}`" v-for="(sub, subi) in item.data"
:key="subi" @tap.stop="change(index, subi, sub)"> :key="subi" @tap.stop="change(index, subi, sub)">
<view class="fui-cascader__checkmark" <view class="fui-cascader__checkmark"
:class="{'fui-cascader__icon-border':!activeColor}" :class="{'fui-cascader__icon-border':!getActiveColor}"
:style="{borderBottomColor:checkMarkColor || activeColor,borderRightColor:checkMarkColor || activeColor}" :style="{borderBottomColor:checkMarkColor || getActiveColor,borderRightColor:checkMarkColor || getActiveColor}"
v-if="item.index === subi"></view> v-if="item.index === subi"></view>
<image :src="sub.src" v-if="sub.src" class="fui-cascader__img" <image :src="sub.src" v-if="sub.src" class="fui-cascader__img"
:style="{ width: imgWidth+'rpx', height: imgHeight+'rpx', borderRadius: radius+'rpx' }"> :style="{ width: imgWidth+'rpx', height: imgHeight+'rpx', borderRadius: radius+'rpx' }">
...@@ -105,18 +105,10 @@ ...@@ -105,18 +105,10 @@
default: '#181818' default: '#181818'
}, },
//选中颜色 //选中颜色
// #ifdef APP-NVUE
activeColor: {
type: String,
default: '#465CFF'
},
// #endif
// #ifndef APP-NVUE
activeColor: { activeColor: {
type: String, type: String,
default: '' default: ''
}, },
// #endif
showLine: { showLine: {
type: Boolean, type: Boolean,
default: true default: true
...@@ -159,6 +151,18 @@ ...@@ -159,6 +151,18 @@
default: '#181818' 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() { data() {
return { return {
current: 0, current: 0,
......
src/components/firstui/fui-checkbox-group/fui-checkbox-group.vue
<template> <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"> <checkbox-group :name="name">
<slot></slot> <slot></slot>
</checkbox-group> </checkbox-group>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ --> <!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ -->
<fui-form-field :name="name" :value="vals"> <fui-form-field :name="name" v-model="vals">
<slot></slot> <slot></slot>
</fui-form-field> </fui-form-field>
<!-- #endif --> <!-- #endif -->
...@@ -16,10 +16,11 @@ ...@@ -16,10 +16,11 @@
export default { export default {
name: "fui-checkbox-group", name: "fui-checkbox-group",
emits: ['change', 'input', 'update:modelValue'], emits: ['change', 'input', 'update:modelValue'],
// #ifndef VUE3
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
behaviors: ['wx://form-field-group'], behaviors: ['wx://form-field-group'],
// #endif // #endif
// #ifdef MP-BAIDU || MP-QQ || H5
behaviors: ['uni://form-field'],
// #endif // #endif
props: { props: {
name: { name: {
......
src/components/firstui/fui-checkbox/fui-checkbox.vue
<template> <template>
<view class="fui-checkbox__input" <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}" :style="{backgroundColor:getBackgroundColor(val,isCheckMark),borderColor:getBorderColor(val,isCheckMark),zoom:isNvue?1:scaleRatio,transform:`scale(${isNvue?scaleRatio:1})`,borderRadius:borderRadius}"
@tap.stop="checkboxChange"> @tap.stop="checkboxChange">
<view class="fui-check__mark" :style="{borderBottomColor:checkMarkColor,borderRightColor:checkMarkColor}" <view class="fui-check__mark" :style="{borderBottomColor:checkMarkColor,borderRightColor:checkMarkColor}"
v-if="val"></view> 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> </checkbox>
</view> </view>
</template> </template>
...@@ -35,27 +36,25 @@ ...@@ -35,27 +36,25 @@
//checkbox选中背景颜色 //checkbox选中背景颜色
color: { color: {
type: String, type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: '' default: ''
// #endif
}, },
//checkbox未选中时边框颜色 //checkbox未选中时边框颜色
borderColor: { borderColor: {
type: String, type: String,
default: '#ccc' default: '#ccc'
}, },
// #ifdef APP-NVUE
borderRadius: { borderRadius: {
type: String, type: String,
// #ifdef APP-NVUE default: '40px'
default: '40rpx' },
// #endif // #endif
// #ifndef APP-NVUE // #ifndef APP-NVUE
borderRadius: {
type: String,
default: '50%' default: '50%'
// #endif
}, },
// #endif
//是否只展示对号，无边框背景 //是否只展示对号，无边框背景
isCheckMark: { isCheckMark: {
type: Boolean, type: Boolean,
...@@ -100,6 +99,18 @@ ...@@ -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() { data() {
let isNvue = false; let isNvue = false;
// #ifdef APP-NVUE // #ifdef APP-NVUE
...@@ -112,14 +123,14 @@ ...@@ -112,14 +123,14 @@
}, },
methods: { methods: {
getBackgroundColor(val, isCheckMark) { getBackgroundColor(val, isCheckMark) {
let color = val ? this.color : '#fff' let color = val ? this.getColor : '#fff'
if (isCheckMark) { if (isCheckMark) {
color = 'transparent' color = 'transparent'
} }
return color; return color;
}, },
getBorderColor(val, isCheckMark) { getBorderColor(val, isCheckMark) {
let color = val ? this.color : this.borderColor; let color = val ? this.getColor : this.borderColor;
if (isCheckMark) { if (isCheckMark) {
color = 'transparent' color = 'transparent'
} }
......
src/components/firstui/fui-circle/fui-circle.vue
...@@ -6,10 +6,10 @@ ...@@ -6,10 +6,10 @@
<!-- #ifdef APP-VUE || H5 --> <!-- #ifdef APP-VUE || H5 -->
<canvas :start="percentage" :change:start="parse.init" :width="w" :change:width="parse.widthChange" <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" :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-size="size" :data-percent="percentage" :data-color="color || primaryColor" :data-show="show" :data-ds="defaultShow"
:data-background="background" :data-foreground="foreground" :data-sa="sAngle" :data-ccw="counterclockwise" :data-background="background" :data-foreground="foreground || primaryColor" :data-gradient="gradient" :data-sa="sAngle"
:data-speed="speed" :data-am="activeMode" :data-cid="circleId" :canvas-id="circleId" :class="[circleId]" :data-ccw="counterclockwise" :data-speed="speed" :data-am="activeMode" :data-cid="circleId"
:style="{width: w + 'px',height: w + 'px'}"></canvas> :canvas-id="circleId" :class="[circleId]" :style="{width: w + 'px',height: w + 'px'}"></canvas>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef MP --> <!-- #ifdef MP -->
...@@ -18,8 +18,9 @@ ...@@ -18,8 +18,9 @@
:style="{width: w*4 +'px',height:w*4 +'px'}"></canvas> :style="{width: w*4 +'px',height:w*4 +'px'}"></canvas>
<!-- #endif --> <!-- #endif -->
<!-- #ifndef MP-ALIPAY --> <!-- #ifndef MP-ALIPAY -->
<canvas class="fui-circle__canvas" :canvas-id="circleId" :id="circleId" <!-- 此处加v-if是因为vue3下编译到头条/抖音等小程序动态id失效，需等uni-app官方调整 -->
:style="{width: w +'px',height:w +'px'}"></canvas> <canvas class="fui-circle__canvas" :canvas-id="circleId" :id="circleId" :style="{width: w +'px',height:w +'px'}"
v-if="circleId"></canvas>
<!-- #endif --> <!-- #endif -->
<!-- #endif --> <!-- #endif -->
<view class="fui-circle__inner"> <view class="fui-circle__inner">
...@@ -46,6 +47,7 @@ ...@@ -46,6 +47,7 @@
const width = res.width; const width = res.width;
let ele = `.${res.cid}>canvas` let ele = `.${res.cid}>canvas`
const canvas = document.querySelectorAll(this.format(ele))[0]; const canvas = document.querySelectorAll(this.format(ele))[0];
if (!canvas) return;
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
state.context = ctx; state.context = ctx;
state.canvas = canvas; state.canvas = canvas;
...@@ -75,7 +77,12 @@ ...@@ -75,7 +77,12 @@
drawCircle(start, ctx, canvas, percent, res, state, owner) { drawCircle(start, ctx, canvas, percent, res, state, owner) {
if (!ctx || !canvas) return; if (!ctx || !canvas) return;
let _this = this let _this = this
let gradient = res.foreground;
if (this.format(res.gradient)) {
gradient = ctx.createLinearGradient(0, 0, Number(res.width), 0);
gradient.addColorStop(0, this.format(res.gradient));
gradient.addColorStop(1, this.format(res.foreground));
}
let requestId = null let requestId = null
let renderLoop = () => { let renderLoop = () => {
drawFrame((res) => { drawFrame((res) => {
...@@ -104,7 +111,7 @@ ...@@ -104,7 +111,7 @@
if (!isEnd) { if (!isEnd) {
let sa = Number(res.sa) * Math.PI let sa = Number(res.sa) * Math.PI
let eAngle = ((2 * Math.PI) / 100) * start + sa; let eAngle = ((2 * Math.PI) / 100) * start + sa;
_this.drawArc(ctx, eAngle, res.foreground, res); _this.drawArc(ctx, eAngle, gradient, res);
} }
owner.callMethod('change', { owner.callMethod('change', {
percent: start percent: start
...@@ -176,7 +183,7 @@ ...@@ -176,7 +183,7 @@
default: 120 default: 120
}, },
//背景填充颜色，仅nvue ios有效 //背景填充颜色，仅nvue ios有效
fillStyle:{ fillStyle: {
type: String, type: String,
default: '#FFFFFF' default: '#FFFFFF'
}, },
...@@ -198,7 +205,7 @@ ...@@ -198,7 +205,7 @@
//圆环进度字体颜色 //圆环进度字体颜色
color: { color: {
type: String, type: String,
default: '#465CFF' default: ''
}, },
//是否显示进度文字 //是否显示进度文字
show: { show: {
...@@ -218,7 +225,12 @@ ...@@ -218,7 +225,12 @@
//默认前景颜色 //默认前景颜色
foreground: { foreground: {
type: String, type: String,
default: '#465CFF' default: ''
},
//进度条渐变颜色，结合foreground使用
gradient: {
type: String,
default: ''
}, },
//起始弧度，单位弧度 实际 Math.PI * sAngle //起始弧度，单位弧度 实际 Math.PI * sAngle
sAngle: { sAngle: {
...@@ -246,6 +258,12 @@ ...@@ -246,6 +258,12 @@
this.initWidth(val) this.initWidth(val)
} }
}, },
computed: {
primaryColor() {
const app = uni && uni.$fui && uni.$fui.color;
return (app && app.primary) || '#465CFF';
}
},
data() { data() {
// #ifndef MP-WEIXIN // #ifndef MP-WEIXIN
const circleId = `fui_cc_${Math.ceil(Math.random() * 10e5).toString(36)}` const circleId = `fui_cc_${Math.ceil(Math.random() * 10e5).toString(36)}`
......
src/components/firstui/fui-circle/mpjs.js
...@@ -25,9 +25,11 @@ export default { ...@@ -25,9 +25,11 @@ export default {
} }
}, },
mounted() { mounted() {
this.$nextTick(() => {
setTimeout(() => { setTimeout(() => {
this.init(); this.init();
}, 50) }, 50)
})
}, },
methods: { methods: {
//初始化绘制 //初始化绘制
...@@ -44,7 +46,7 @@ export default { ...@@ -44,7 +46,7 @@ export default {
// #endif // #endif
ctx.setLineWidth(sw); ctx.setLineWidth(sw);
ctx.setStrokeStyle(this.background); ctx.setStrokeStyle(this.background);
let eAngle = Math.PI * 2 + this.sAngle; let eAngle = Math.PI * 2 + Number(this.sAngle) * Math.PI;
this.drawArc(ctx, eAngle, true); this.drawArc(ctx, eAngle, true);
}, },
drawCircle(start) { drawCircle(start) {
...@@ -60,7 +62,15 @@ export default { ...@@ -60,7 +62,15 @@ export default {
sw = sw * 4 sw = sw * 4
// #endif // #endif
ctx.setLineWidth(sw); ctx.setLineWidth(sw);
ctx.setStrokeStyle(this.foreground); let gradient = this.foreground || this.primaryColor;
// #ifndef MP-KUAISHOU
if (this.gradient) {
gradient = ctx.createLinearGradient(0, 0, Number(this.w), 0);
gradient.addColorStop(0, this.gradient);
gradient.addColorStop(1, this.foreground || this.primaryColor);
}
// #endif
ctx.setStrokeStyle(gradient);
let percentage = Number(this.percent) let percentage = Number(this.percent)
if (percentage > 0) { if (percentage > 0) {
start += Number(this.speed); start += Number(this.speed);
...@@ -72,7 +82,7 @@ export default { ...@@ -72,7 +82,7 @@ export default {
si = si * 4 si = si * 4
// #endif // #endif
ctx.setFontSize(si); ctx.setFontSize(si);
ctx.setFillStyle(this.color); ctx.setFillStyle(this.color || this.primaryColor);
ctx.setTextAlign('center'); ctx.setTextAlign('center');
ctx.setTextBaseline('middle'); ctx.setTextBaseline('middle');
let percent = `${this.counterclockwise ? 100 - start : start}%`; let percent = `${this.counterclockwise ? 100 - start : start}%`;
...@@ -85,7 +95,7 @@ export default { ...@@ -85,7 +95,7 @@ export default {
if (percentage == 0 || (this.counterclockwise && start == 100)) { if (percentage == 0 || (this.counterclockwise && start == 100)) {
ctx.draw(); ctx.draw();
} else { } else {
let eAngle = ((2 * Math.PI) / 100) * start + this.sAngle; let eAngle = ((2 * Math.PI) / 100) * start + Number(this.sAngle) * Math.PI;
this.drawArc(ctx, eAngle); this.drawArc(ctx, eAngle);
} }
let time = 1000 / 60 let time = 1000 / 60
...@@ -117,7 +127,7 @@ export default { ...@@ -117,7 +127,7 @@ export default {
radius = radius * 4 radius = radius * 4
sw = sw * 4 sw = sw * 4
// #endif // #endif
ctx.arc(radius, radius, radius - sw, this.sAngle, eAngle, this.counterclockwise); ctx.arc(radius, radius, radius - sw, Number(this.sAngle) * Math.PI, eAngle, this.counterclockwise);
ctx.stroke(); ctx.stroke();
!def && ctx.draw(); !def && ctx.draw();
} }
......
src/components/firstui/fui-circle/nvue.js
...@@ -54,7 +54,7 @@ export default { ...@@ -54,7 +54,7 @@ export default {
drawDefaultCircle(ctx) { drawDefaultCircle(ctx) {
ctx.setLineWidth(Number(this.strokeWidth)); ctx.setLineWidth(Number(this.strokeWidth));
ctx.setStrokeStyle(this.background); ctx.setStrokeStyle(this.background);
let eAngle = Math.PI * 2 + this.sAngle; let eAngle = Math.PI * 2 + Number(this.sAngle) * Math.PI;
this.drawArc(ctx, eAngle, true); this.drawArc(ctx, eAngle, true);
}, },
//进度圆环 //进度圆环
...@@ -77,7 +77,14 @@ export default { ...@@ -77,7 +77,14 @@ export default {
// ctx.clearRect(0, 0, this.w, this.w) // ctx.clearRect(0, 0, this.w, this.w)
this.defaultShow && this.drawDefaultCircle(ctx) this.defaultShow && this.drawDefaultCircle(ctx)
ctx.setLineWidth(Number(this.strokeWidth)); ctx.setLineWidth(Number(this.strokeWidth));
ctx.setStrokeStyle(this.foreground); ctx.beginPath()
let gradient = this.foreground || this.primaryColor;
// if (this.gradient) {
// gradient = ctx.createLinearGradient(0, 0, this.w, 0);
// gradient.addColorStop(0, this.gradient);
// gradient.addColorStop(1, this.foreground);
// }
ctx.setStrokeStyle(gradient);
let percentage = Number(this.percent) let percentage = Number(this.percent)
if (percentage > 0) { if (percentage > 0) {
start += Number(this.speed); start += Number(this.speed);
...@@ -85,7 +92,7 @@ export default { ...@@ -85,7 +92,7 @@ export default {
} }
if (this.show) { if (this.show) {
ctx.setFontSize(this.fontSize); ctx.setFontSize(this.fontSize);
ctx.setFillStyle(this.color); ctx.setFillStyle(this.color || this.primaryColor);
ctx.setTextAlign('center'); ctx.setTextAlign('center');
ctx.setTextBaseline('middle'); ctx.setTextBaseline('middle');
let percent = `${this.counterclockwise ? 100 - start : start}%`; let percent = `${this.counterclockwise ? 100 - start : start}%`;
...@@ -95,7 +102,7 @@ export default { ...@@ -95,7 +102,7 @@ export default {
if (percentage == 0 || (this.counterclockwise && start == 100)) { if (percentage == 0 || (this.counterclockwise && start == 100)) {
ctx.draw(); ctx.draw();
} else { } else {
let eAngle = ((2 * Math.PI) / 100) * start + this.sAngle; let eAngle = ((2 * Math.PI) / 100) * start + Number(this.sAngle) * Math.PI;
this.drawArc(ctx, eAngle); this.drawArc(ctx, eAngle);
} }
setTimeout(() => { setTimeout(() => {
...@@ -117,7 +124,7 @@ export default { ...@@ -117,7 +124,7 @@ export default {
ctx.setLineCap(this.lineCap); ctx.setLineCap(this.lineCap);
ctx.beginPath(); ctx.beginPath();
let radius = this.w / 2; let radius = this.w / 2;
ctx.arc(radius, radius, radius - Number(this.strokeWidth), this.sAngle, eAngle, this.counterclockwise); ctx.arc(radius, radius, radius - Number(this.strokeWidth), Number(this.sAngle)* Math.PI, eAngle, this.counterclockwise);
ctx.stroke(); ctx.stroke();
!def && ctx.draw(); !def && ctx.draw();
} }
......
src/components/firstui/fui-clipboard/index.js
...@@ -27,7 +27,7 @@ const getClipboardData = function(data, callback, e) { ...@@ -27,7 +27,7 @@ const getClipboardData = function(data, callback, e) {
// #endif // #endif
// #ifdef H5 // #ifdef H5
let event = window.event || e || {} let event =window.event || e || {}
let clipboard = new ClipboardJS("", { let clipboard = new ClipboardJS("", {
text: () => data text: () => data
}) })
......
src/components/firstui/fui-collapse-item/fui-collapse-item.vue
...@@ -103,21 +103,6 @@ ...@@ -103,21 +103,6 @@
watch: { watch: {
open(val) { open(val) {
this.isOpen = val this.isOpen = val
},
isOpen(val) {
this.$nextTick(async () => {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== 'PageBody') {
if (parentName === 'fui-collapse-item') {
await parent.init()
}
parent = parent.$parent;
if (!parent) return false;
parentName = parent.$options.name;
}
})
} }
}, },
updated(e) { updated(e) {
...@@ -150,14 +135,12 @@ ...@@ -150,14 +135,12 @@
}, },
methods: { methods: {
init() { init() {
const promise = []
// #ifndef APP-NVUE // #ifndef APP-NVUE
promise.push(this.getCollapseHeight()) this.getCollapseHeight()
// #endif // #endif
// #ifdef APP-NVUE // #ifdef APP-NVUE
promise.push(this.getNvueHeight()) this.getNvueHeight()
// #endif // #endif
return Promise.all(promise)
}, },
uninstall() { uninstall() {
if (this.collapse) { if (this.collapse) {
...@@ -181,7 +164,6 @@ ...@@ -181,7 +164,6 @@
} }
}, },
getCollapseHeight(index = 0) { getCollapseHeight(index = 0) {
return new Promise((resolve) => {
uni.createSelectorQuery() uni.createSelectorQuery()
// #ifndef MP-ALIPAY // #ifndef MP-ALIPAY
.in(this) .in(this)
...@@ -203,14 +185,10 @@ ...@@ -203,14 +185,10 @@
this.height = data.height this.height = data.height
// #endif // #endif
this.isHeight = true this.isHeight = true
resolve(this.height)
}) })
.exec() .exec()
})
}, },
getNvueHeight() { getNvueHeight() {
return new Promise((resolve) => {
const result = dom.getComponentRect(this.$refs['fui_collapse__el'], option => { const result = dom.getComponentRect(this.$refs['fui_collapse__el'], option => {
if (option && option.result && option.size) { if (option && option.result && option.size) {
// #ifdef APP-NVUE // #ifdef APP-NVUE
...@@ -220,11 +198,8 @@ ...@@ -220,11 +198,8 @@
this.height = option.size.height this.height = option.size.height
// #endif // #endif
this.isHeight = true this.isHeight = true
resolve(this.height)
} }
}) })
})
}, },
getCollapse(name = 'fui-collapse') { getCollapse(name = 'fui-collapse') {
let parent = this.$parent; let parent = this.$parent;
......
src/components/firstui/fui-collapse/fui-collapse.vue
...@@ -14,9 +14,6 @@ ...@@ -14,9 +14,6 @@
default: false default: false
} }
}, },
data() {
return {}
},
created() { created() {
this.children = [] this.children = []
}, },
......
src/components/firstui/fui-config/index.ts
/* /*
组件属性全局配置文件。优先级：全局配置文件props < 直接设置组件props 组件属性全局配置文件。优先级：全局配置文件props < 直接设置组件props
目前支持配置的组件：fui-button、fui-icon、fui-text、fui-input、fui-form-item 目前支持配置的组件：fui-button、fui-icon、fui-text、fui-input、fui-form-item、fui-list-cell
*/ */
// 主色（V1.9.8+），仅Nvue端以及无法使用css变量控制颜色的组件使用【保持与fui-theme中一致】
const color = {
primary: '#465CFF',
success: '#09BE4F',
warning: '#FFB703',
danger: '#FF2B2B',
purple: '#6831FF',
link: '#465CFF'
}
//全局方法（V1.9.8+）
const app = {
toast: function(text: string, icon: 'none' | 'loading' | 'success' | 'error' = 'none') {
text && uni.showToast({
title: text,
icon: icon,
duration: 2000
})
},
modal: function(title: string, content: string, callback: (confirm: boolean) => {}, showCancel: boolean, confirmColor: string, confirmText: string) {
uni.showModal({
title: title,
content: content,
showCancel: showCancel || false,
// #ifndef MP-TOUTIAO
cancelColor: "#7F7F7F",
confirmColor: confirmColor || color.primary,
// #endif
confirmText: confirmText || "确定",
success(res) {
if (res.confirm) {
callback && callback(true)
} else {
callback && callback(false)
}
},
fail(err) {
console.log(err)
}
})
},
href(url: string, isMain: boolean) {
if (isMain) {
uni.switchTab({
url: url
})
} else {
uni.navigateTo({
url: url
});
}
}
}
const fuiConfig = { const fuiConfig = {
//组件名称，小驼峰命名 //组件名称，小驼峰命名
//如fui-button写成fuiButton //如fui-button写成fuiButton
...@@ -14,11 +68,15 @@ const fuiConfig = { ...@@ -14,11 +68,15 @@ const fuiConfig = {
}, },
fuiIcon: { fuiIcon: {
size: 64, size: 64,
unit: 'rpx' unit: 'rpx',
//V1.9.8+
color: ''
}, },
fuiText: { fuiText: {
size: 32, size: 32,
unit: 'rpx' unit: 'rpx',
//仅Nvue有效，black 默认颜色，V1.9.8+
color: ''
}, },
fuiInput: { fuiInput: {
labelSize: 32, labelSize: 32,
...@@ -26,9 +84,22 @@ const fuiConfig = { ...@@ -26,9 +84,22 @@ const fuiConfig = {
}, },
fuiFormItem: { fuiFormItem: {
labelSize: 32, labelSize: 32,
labelWidth: 160, labelWidth: 170,
labelRight: 16 labelRight: 30,
} labelWeight: 400,
labelAlign: 'left',
asteriskPosition: 'left'
},
// V1.9.8+
fuiListCell: {
padding: ['32rpx', '32rpx'],
arrowColor: '',
//仅Nvue有效
borderColor: '',
bottomLeft: 32
},
color,
...app
} }
export default fuiConfig export default fuiConfig
src/components/firstui/fui-countdown-verify/fui-countdown-verify.vue
<template> <template>
<view class="fui-countdown__verify" :class="{'fui-cdv__disabled':status>1}" <view class="fui-countdown__verify" :class="{'fui-cdv__disabled':status>1}"
:style="{ width: width+'rpx', height: height+'rpx', marginLeft: marginLeft+'rpx',marginRight:marginRight+'rpx', borderRadius: radius+'rpx', background: background,borderColor:!borderColor || borderColor==='true'?background:borderColor }"> :style="{ width: width+'rpx', height: height+'rpx', marginLeft: marginLeft+'rpx',marginRight:marginRight+'rpx', borderRadius: radius+'rpx', background: background,borderColor:!getBorderColor || getBorderColor===true?background:getBorderColor }">
<text :style="{fontSize: size + 'rpx',lineHeight:size + 'rpx', color: color}" class="fui-countdown__verify-text" <text :style="{fontSize: size + 'rpx',lineHeight:size + 'rpx', color: getColor}"
:class="{'fui-cdv__color':!color}">{{ showText }}</text> class="fui-countdown__verify-text" :class="{'fui-cdv__color':!getColor}">{{ showText }}</text>
<view class="fui-countdown__verify-main fui-countdown__verify-active" :style="{borderRadius: radius+'rpx'}" <view class="fui-countdown__verify-main fui-countdown__verify-active" :style="{borderRadius: radius+'rpx'}"
@tap.stop="sendCode" v-if="status===1"></view> @tap.stop="sendCode" v-if="status===1"></view>
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
<view class="fui-countdown__verify-line" :class="{'fui-cdv__border-color':!borderColor}" <view class="fui-countdown__verify-line" :class="{'fui-cdv__border-color':!getBorderColor}"
:style="{borderColor: borderColor, borderRadius: (radius * 2)+'rpx'}"> :style="{borderColor: getBorderColor, borderRadius: (radius * 2)+'rpx'}">
</view> </view>
<!-- #endif --> <!-- #endif -->
</view> </view>
...@@ -67,42 +67,48 @@ ...@@ -67,42 +67,48 @@
default: 24 default: 24
}, },
//字体颜色 //字体颜色
// #ifdef APP-NVUE
color: {
type: String,
default: '#465CFF'
},
// #endif
// #ifndef APP-NVUE
color: { color: {
type: String, type: String,
default: '' default: ''
}, },
// #endif
//背景色 //背景色
background: { background: {
type: String, type: String,
default: 'transparent' default: 'transparent'
}, },
//边框颜色 //边框颜色
// #ifdef APP-NVUE
borderColor: {
type: String,
default: '#465CFF'
},
// #endif
// #ifndef APP-NVUE
borderColor: { borderColor: {
type: String, type: String,
default: '' default: ''
}, },
// #endif
//自定义参数 //自定义参数
param: { param: {
type: [Number, String], type: [Number, String],
default: 0 default: 0
} }
}, },
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
},
getBorderColor() {
let color = this.borderColor;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color
}
},
data() { data() {
return { return {
showText: '', showText: '',
......
src/components/firstui/fui-data-tag/fui-data-tag.vue
...@@ -2,25 +2,25 @@ ...@@ -2,25 +2,25 @@
<view class="fui-data__tag-wrap" :style="{marginBottom:'-'+gap+'rpx'}"> <view class="fui-data__tag-wrap" :style="{marginBottom:'-'+gap+'rpx'}">
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
<view class="fui-data__tag-item" :class="{'fui-data__tag-disable':item.disable}" <view class="fui-data__tag-item" :class="{'fui-data__tag-disable':item.disable}"
:style="{width:width?width+'rpx':'auto',height:height?height+'rpx':'auto',paddingTop:padding[0] || 0,paddingRight:padding[1] || 0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0,borderRadius:radius+'rpx',marginRight:gap+'rpx',marginBottom:gap+'rpx',background:item.selected?activeBgColor:background,borderColor:item.selected?borderColor:background}" :style="{width:width?width+'rpx':'auto',height:height?height+'rpx':'auto',paddingTop:padding[0] || 0,paddingRight:padding[1] || 0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0,borderRadius:radius+'rpx',marginRight:gap+'rpx',marginBottom:gap+'rpx',background:item.selected?activeBgColor:background,borderColor:item.selected?(borderColor || primaryColor):(defaultBorderColor || background)}"
v-for="(item,index) in dataList" :key="index"> v-for="(item,index) in dataList" :key="index">
<view class="fui-data__tag-inner" @tap.stop="handleClick(index)"> <view class="fui-data__tag-inner" @tap.stop="handleClick(index)">
<text class="fui-dt__icon" :style="{color:markColor,fontSize:markSize+'rpx',lineHeight:markSize+'rpx'}" <text class="fui-dt__icon" :style="{color:markColor || primaryColor,fontSize:markSize+'rpx',lineHeight:markSize+'rpx'}"
v-if="mark && item.selected">{{icon}}</text> v-if="mark && item.selected">{{icon}}</text>
</view> </view>
<text class="fui-data__tag-text" <text class="fui-data__tag-text"
:style="{fontSize:size+'rpx',color:item.selected?activeColor:color}">{{item.text}}</text> :style="{fontSize:size+'rpx',color:item.selected?(activeColor || primaryColor):color}">{{item.text}}</text>
</view> </view>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef APP-NVUE --> <!-- #ifdef APP-NVUE -->
<view class="fui-data__tag-item" :class="{'fui-data__tag-disable':item.disable}" <view class="fui-data__tag-item" :class="{'fui-data__tag-disable':item.disable}"
:style="{width:width?width+'rpx':'auto',height:height?height+'rpx':'auto',paddingTop:padding[0] || 0,paddingRight:padding[1] || 0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0,borderRadius:radius+'rpx',marginRight:gap+'rpx',marginBottom:gap+'rpx',background:item.selected?activeBgColor:background,borderColor:item.selected?borderColor:background}" :style="{width:width?width+'rpx':'auto',height:height?height+'rpx':'auto',paddingTop:padding[0] || 0,paddingRight:padding[1] || 0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0,borderRadius:radius+'rpx',marginRight:gap+'rpx',marginBottom:gap+'rpx',background:item.selected?activeBgColor:background,borderColor:item.selected?(borderColor || primaryColor):defaultBorderColor || background}"
v-for="(item,index) in dataList" :key="index" @tap.stop="handleClick(index)"> v-for="(item,index) in dataList" :key="index" @tap.stop="handleClick(index)">
<text class="fui-dt__icon" :style="{color:markColor,fontSize:markSize+'rpx',lineHeight:markSize+'rpx'}" <text class="fui-dt__icon" :style="{color:markColor || primaryColor,fontSize:markSize+'rpx',lineHeight:markSize+'rpx'}"
v-if="mark && item.selected">{{icon}}</text> v-if="mark && item.selected">{{icon}}</text>
<text class="fui-data__tag-text" <text class="fui-data__tag-text"
:style="{fontSize:size+'rpx',lineHeight:size+'rpx',color:item.selected?activeColor:color}">{{item.text}}</text> :style="{fontSize:size+'rpx',lineHeight:size+'rpx',color:item.selected?(activeColor || primaryColor):color}">{{item.text}}</text>
</view> </view>
<!-- #endif --> <!-- #endif -->
</view> </view>
...@@ -109,7 +109,7 @@ ...@@ -109,7 +109,7 @@
}, },
activeColor: { activeColor: {
type: String, type: String,
default: '#465CFF' default: ''
}, },
background: { background: {
type: String, type: String,
...@@ -119,9 +119,14 @@ ...@@ -119,9 +119,14 @@
type: String, type: String,
default: '#fff' default: '#fff'
}, },
//默认边框颜色
defaultBorderColor: {
type: String,
default: ''
},
borderColor: { borderColor: {
type: String, type: String,
default: '#465CFF' default: ''
}, },
//设为true时，圆角值不建议设过大 //设为true时，圆角值不建议设过大
mark: { mark: {
...@@ -134,7 +139,7 @@ ...@@ -134,7 +139,7 @@
}, },
markColor: { markColor: {
type: String, type: String,
default: '#465CFF' default: ''
} }
}, },
watch: { watch: {
...@@ -153,6 +158,12 @@ ...@@ -153,6 +158,12 @@
created() { created() {
this.initData(this.options) this.initData(this.options)
}, },
computed: {
primaryColor() {
const app = uni && uni.$fui && uni.$fui.color;
return (app && app.primary) || '#465CFF';
}
},
data() { data() {
return { return {
icon: '\ue600', icon: '\ue600',
...@@ -350,7 +361,7 @@ ...@@ -350,7 +361,7 @@
.fui-data__tag-wrap { .fui-data__tag-wrap {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
width: 100%; max-width: 100%;
display: flex; display: flex;
/* #endif */ /* #endif */
flex-direction: row; flex-direction: row;
......
src/components/firstui/fui-date-picker/fui-date-picker.vue
...@@ -2,8 +2,9 @@ ...@@ -2,8 +2,9 @@
<view class="fui-date__picker-wrap" @touchend="stop"> <view class="fui-date__picker-wrap" @touchend="stop">
<view class="fui-date__picker-mask" @touchmove.stop.prevent="stop" :class="{'fui-dpk__mask-show':isShow}" <view class="fui-date__picker-mask" @touchmove.stop.prevent="stop" :class="{'fui-dpk__mask-show':isShow}"
:style="maskStyl" ref="fui_dpkm_ani" @tap.stop="maskClick"></view> :style="maskStyl" ref="fui_dpkm_ani" @tap.stop="maskClick"></view>
<view class="fui-date__picker-content" <!-- fix：此处key值可解决Nvue端动态切换背景不生效的问题 -->
:class="{'fui-dpk__content-dark':theme==='dark','fui-dpk__content-show':isShow,'fui-date__picker-radius':radius}" <view :key="theme" class="fui-date__picker-content"
:class="{'fui-dpk__content-dark':theme==='dark','fui-dpk__content-light':theme!=='dark','fui-dpk__content-show':isShow,'fui-date__picker-radius':radius}"
:style="{zIndex:zIndex}" ref="fui_dpk_ani"> :style="{zIndex:zIndex}" ref="fui_dpk_ani">
<view class="fui-date__picker-header" <view class="fui-date__picker-header"
:class="{'fui-dpk__header-dark':theme==='dark','fui-date__picker-radius':radius}" :style="headerStyl"> :class="{'fui-dpk__header-dark':theme==='dark','fui-date__picker-radius':radius}" :style="headerStyl">
...@@ -13,11 +14,12 @@ ...@@ -13,11 +14,12 @@
<text class="fui-date__picker-title" <text class="fui-date__picker-title"
:class="[theme==='dark'?'fui-dpk__title-color_dark':'fui-dpk__title-color']" :class="[theme==='dark'?'fui-dpk__title-color_dark':'fui-dpk__title-color']"
:style="titleStyl">{{title}}</text> :style="titleStyl">{{title}}</text>
<text class="fui-dpk__btn-sure fui-dpk__sure-color" :style="confrimStyl" <text class="fui-dpk__btn-sure" :class="{'fui-dpk__sure-color':!confirmColor}" :style="confrimStyl"
@tap.stop="btnConfirm">确定</text> @tap.stop="btnConfirm">确定</text>
</view> </view>
<view class="fui-dpk__range-wrap" v-if="range"> <view class="fui-dpk__range-wrap" v-if="range">
<view class="fui-dpk__range-inner" :class="{'fui-dpk__range-dark':theme==='dark'}"> <view class="fui-dpk__range-inner"
:class="[theme==='dark'?'fui-dpk__range-dark':'fui-dpk__range-light']">
<text class="fui-dpk__range-text" :class="{'fui-dpk__range-active':isActive==1}" :style="startStyl" <text class="fui-dpk__range-text" :class="{'fui-dpk__range-active':isActive==1}" :style="startStyl"
@tap.stop="rangeChange($event,1)">{{startDate.result || start}}</text> @tap.stop="rangeChange($event,1)">{{startDate.result || start}}</text>
<text class="fui-dpk__range-text" :class="{'fui-dpk__range-active':isActive==2}" :style="endStyl" <text class="fui-dpk__range-text" :class="{'fui-dpk__range-active':isActive==2}" :style="endStyl"
...@@ -201,10 +203,12 @@ ...@@ -201,10 +203,12 @@
<!-- #endif --> <!-- #endif -->
<!-- #ifndef MP-ALIPAY --> <!-- #ifndef MP-ALIPAY -->
<picker-view :mask-style="theme==='dark'?darkStyle:''" <picker-view :mask-top-style="theme==='dark'?darkStyle:''"
:mask-bottom-style="theme==='dark'?darkBottomStyle:''" :mask-style="theme==='dark'?darkStyle:''"
:indicator-style="theme==='dark'?indicatorStyl:'height: 44px;border-top-width:0.5px;border-bottom-width:0.5px;'" :indicator-style="theme==='dark'?indicatorStyl:'height: 44px;border-top-width:0.5px;border-bottom-width:0.5px;'"
:indicator-class="theme==='dark'?'fui-date__picker-indicator':''" class="fui-date__picker-view" :indicator-class="theme==='dark'?'fui-date__picker-indicator':''" class="fui-date__picker-view"
:style="{height:height+'rpx'}" :value="vals" @change="pickerChange"> :style="{height:height+'rpx'}" :key="theme+type" :value="vals" immediate-change
@change="pickerChange">
<picker-view-column v-if="type==1 || type==2 || type==3 || type==4 || type==5"> <picker-view-column v-if="type==1 || type==2 || type==3 || type==4 || type==5">
<text :style="contentStyl" v-for="(item,index) in years" :key="index" <text :style="contentStyl" v-for="(item,index) in years" :key="index"
class="fui-date__picker-text" class="fui-date__picker-text"
...@@ -269,7 +273,7 @@ ...@@ -269,7 +273,7 @@
}, },
minDate: { minDate: {
type: String, type: String,
default: '2020-01-01' default: '2010-01-01'
}, },
maxDate: { maxDate: {
type: String, type: String,
...@@ -381,6 +385,11 @@ ...@@ -381,6 +385,11 @@
type: [Number, String], type: [Number, String],
default: 999 default: 999
}, },
//点击确认按钮后是否立即关闭弹框
isClose: {
type: Boolean,
default: true
},
//自定义参数 //自定义参数
param: { param: {
type: [Number, String], type: [Number, String],
...@@ -412,8 +421,15 @@ ...@@ -412,8 +421,15 @@
}, },
confrimStyl() { confrimStyl() {
let styles = `font-size:${this.btnSize}rpx;` let styles = `font-size:${this.btnSize}rpx;`
if (this.confirmColor) { let color = this.confirmColor;
styles += `color:${this.confirmColor};` // #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
if (color) {
styles += `color:${color};`
} }
return styles return styles
}, },
...@@ -450,15 +466,29 @@ ...@@ -450,15 +466,29 @@
}, },
startStyl() { startStyl() {
let style = '' let style = ''
if (this.isActive == 1 && this.rangeBackground) { let color = this.rangeBackground;
style = `background:${this.rangeBackground};` // #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
if (this.isActive == 1 && color) {
style = `background:${color};`
} }
return style return style
}, },
endStyl() { endStyl() {
let style = '' let style = ''
if (this.isActive == 2 && this.rangeBackground) { let color = this.rangeBackground;
style = `background:${this.rangeBackground};` // #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
if (this.isActive == 2 && color) {
style = `background:${color};`
} }
return style return style
} }
...@@ -477,18 +507,24 @@ ...@@ -477,18 +507,24 @@
secondRange(val) { secondRange(val) {
this.getSeconds() this.getSeconds()
}, },
// #ifdef APP-NVUE
isShow: { isShow: {
handler(newVal) { handler(newVal) {
if (newVal) { if (newVal) {
// #ifndef APP-NVUE
this.isInitShow = true
// #endif
// #ifdef APP-NVUE
this.openPicker(); this.openPicker();
// #endif
} else { } else {
this.close(); // #ifdef APP-NVUE
this.closePicker();
// #endif
} }
}, },
immediate: true immediate: true
}, },
// #endif
show(val) { show(val) {
this.isShow = val; this.isShow = val;
} }
...@@ -508,16 +544,19 @@ ...@@ -508,16 +544,19 @@
// #ifndef APP-NVUE // #ifndef APP-NVUE
darkStyle: 'background-image: -webkit-linear-gradient(top, rgba(35, 35, 35, .95), rgba(35, 35, 35, .6)), -webkit-linear-gradient(bottom, rgba(35, 35, 35, .95), rgba(35, 35, 35, .6));', darkStyle: 'background-image: -webkit-linear-gradient(top, rgba(35, 35, 35, .95), rgba(35, 35, 35, .6)), -webkit-linear-gradient(bottom, rgba(35, 35, 35, .95), rgba(35, 35, 35, .6));',
indicatorStyl: 'border-color: #333;height: 44px;', indicatorStyl: 'border-color: #333;height: 44px;',
darkBottomStyle: '',
// #endif // #endif
// #ifdef APP-NVUE // #ifdef APP-NVUE
darkStyle: '', darkStyle: 'background: linear-gradient(to bottom, rgba(35, 35, 35, .95), rgba(35, 35, 35, .6));',
indicatorStyl: 'height: 44px;border-top-width:0.5px;border-bottom-width:0.5px', darkBottomStyle: 'background: linear-gradient(to top, rgba(35, 35, 35, .95), rgba(35, 35, 35, .6));',
indicatorStyl: 'border-color: #333;height: 44px;border-top-width:0.5px;border-bottom-width:0.5px',
// #endif // #endif
isEnd: true, isEnd: true,
isShow: false, isShow: false,
isActive: 1, isActive: 1,
startDate: {}, startDate: {},
endDate: {} endDate: {},
isInitShow: false
}; };
}, },
methods: { methods: {
...@@ -560,6 +599,9 @@ ...@@ -560,6 +599,9 @@
open() { open() {
this.isShow = true; this.isShow = true;
}, },
close() {
this.isShow = false;
},
compareDate(start, end) { compareDate(start, end) {
let type = Number(this.type) let type = Number(this.type)
if (type == 8) { if (type == 8) {
...@@ -727,7 +769,8 @@ ...@@ -727,7 +769,8 @@
let max = 12; let max = 12;
if (year == this.minArr[0]) { if (year == this.minArr[0]) {
min = this.minArr[1] min = this.minArr[1]
} else if (year == this.maxArr[0]) { }
if (year == this.maxArr[0]) {
max = this.maxArr[1] max = this.maxArr[1]
} }
max = max < min ? min : max max = max < min ? min : max
...@@ -740,7 +783,8 @@ ...@@ -740,7 +783,8 @@
let max = new Date(year, month, 0).getDate(); let max = new Date(year, month, 0).getDate();
if (year == this.minArr[0] && month == this.minArr[1]) { if (year == this.minArr[0] && month == this.minArr[1]) {
min = this.minArr[2] min = this.minArr[2]
} else if (year == this.maxArr[0] && month == this.maxArr[1]) { }
if (year == this.maxArr[0] && month == this.maxArr[1]) {
max = this.maxArr[2] max = this.maxArr[2]
} }
max = !max || max < min ? min : max max = !max || max < min ? min : max
...@@ -810,7 +854,7 @@ ...@@ -810,7 +854,7 @@
[hi, mi, si], [hi, mi, si],
[mi, si] [mi, si]
][type - 1] ][type - 1]
}, 50) }, 200)
}) })
}, },
getResult() { getResult() {
...@@ -933,17 +977,19 @@ ...@@ -933,17 +977,19 @@
//判断选择结果 //判断选择结果
let start = this.startDate.result; let start = this.startDate.result;
let end = this.endDate.result; let end = this.endDate.result;
if (!start || !end) { if (!start && !end) {
let msg = !start ? this.start : this.end this.startDate = this.getResult()
this.isActive = 2
uni.showToast({ uni.showToast({
title: `请选择${msg}`, title: `请选择${this.end}`,
icon: 'none' icon: 'none'
}) })
if (start && !end) { return
this.isActive = 2 } else if (start && !end) {
this.endDate = this.getResult()
end = this.endDate.result;
} }
return; if (!this.compareDate(start, end)) {
} else if (!this.compareDate(start, end)) {
uni.showToast({ uni.showToast({
title: `${this.end}不能小于${this.start}`, title: `${this.end}不能小于${this.start}`,
icon: 'none' icon: 'none'
...@@ -952,11 +998,14 @@ ...@@ -952,11 +998,14 @@
} }
} }
setTimeout(() => { setTimeout(() => {
if (this.isClose) {
this.isShow = false; this.isShow = false;
}
this.waitForTrigger() this.waitForTrigger()
}, 80) }, 80)
}, },
pickerChange(e) { pickerChange(e) {
if (!this.isInitShow) return;
let value = e.detail.value; let value = e.detail.value;
let type = Number(this.type) let type = Number(this.type)
if (type > 1 && type < 6) { if (type > 1 && type < 6) {
...@@ -977,7 +1026,7 @@ ...@@ -977,7 +1026,7 @@
} else { } else {
this.endDate = this.getResult() this.endDate = this.getResult()
} }
}, 35) }, 50)
} }
this.isEnd = true; this.isEnd = true;
}, },
...@@ -996,7 +1045,7 @@ ...@@ -996,7 +1045,7 @@
this._animation(true); this._animation(true);
}, 20); }, 20);
}, },
close() { closePicker() {
this._animation(false); this._animation(false);
}, },
_transtion(ref, styles, duration, callback) { _transtion(ref, styles, duration, callback) {
...@@ -1087,19 +1136,12 @@ ...@@ -1087,19 +1136,12 @@
transition-property: opacity; transition-property: opacity;
transition-duration: .25s; transition-duration: .25s;
transform: translateY(100%); transform: translateY(100%);
opacity: 0; /* opacity: 0; */
/* #endif */ /* #endif */
transform-origin: center center; transform-origin: center center;
flex-direction: column; flex-direction: column;
background: #fff;
} }
/* #ifndef APP-NVUE */
.fui-dpk__content-dark {
background: #222;
}
/* #endif */
.fui-dpk__content-show { .fui-dpk__content-show {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
...@@ -1112,6 +1154,15 @@ ...@@ -1112,6 +1154,15 @@
/* #endif */ /* #endif */
} }
.fui-dpk__content-light {
background-color: #fff;
}
.fui-dpk__content-dark {
background-color: #222;
opacity: 1;
}
.fui-date__picker-radius { .fui-date__picker-radius {
border-top-left-radius: 24rpx; border-top-left-radius: 24rpx;
border-top-right-radius: 24rpx; border-top-right-radius: 24rpx;
...@@ -1184,12 +1235,15 @@ ...@@ -1184,12 +1235,15 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 560rpx; width: 560rpx;
background: #EEEEEE;
border-radius: 16rpx; border-radius: 16rpx;
overflow: hidden; overflow: hidden;
padding: 2px; padding: 2px;
} }
.fui-dpk__range-light {
background: #fff;
}
.fui-dpk__range-dark { .fui-dpk__range-dark {
background: #333; background: #333;
} }
...@@ -1219,10 +1273,6 @@ ...@@ -1219,10 +1273,6 @@
.fui-dpk__range-active { .fui-dpk__range-active {
color: #fff; color: #fff;
/* #ifdef APP-NVUE */
background: #465CFF;
/* #endif */
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
background: var(--fui-color-primary, #465CFF); background: var(--fui-color-primary, #465CFF);
/* #endif */ /* #endif */
...@@ -1293,16 +1343,12 @@ ...@@ -1293,16 +1343,12 @@
color: #D1D1D1; color: #D1D1D1;
} }
.fui-dpk__sure-color {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
.fui-dpk__sure-color {
color: var(--fui-color-primary, #465CFF) !important; color: var(--fui-color-primary, #465CFF) !important;
/* #endif */
/* #ifdef APP-NVUE */
color: #465CFF;
/* #endif */
} }
/* #endif */
.fui-date__picker-view { .fui-date__picker-view {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
width: 100%; width: 100%;
...@@ -1336,13 +1382,7 @@ ...@@ -1336,13 +1382,7 @@
.fui-dpk__color-dark { .fui-dpk__color-dark {
/* #ifndef APP-NVUE */
color: #D1D1D1; color: #D1D1D1;
/* #endif */
/* #ifdef APP-NVUE */
color: #333;
/* #endif */
} }
......
src/components/firstui/fui-dialog/fui-dialog.vue
...@@ -20,6 +20,7 @@ ...@@ -20,6 +20,7 @@
// #ifdef APP-NVUE // #ifdef APP-NVUE
const animation = uni.requireNativePlugin('animation'); const animation = uni.requireNativePlugin('animation');
// #endif // #endif
const primaryColor = (uni && uni.$fui && uni.$fui.color && uni.$fui.color.primary) || '#465CFF';
export default { export default {
name: 'fui-dialog', name: 'fui-dialog',
emits: ['click', 'close'], emits: ['click', 'close'],
...@@ -51,7 +52,7 @@ ...@@ -51,7 +52,7 @@
text: '取消' text: '取消'
}, { }, {
text: '确定', text: '确定',
color: '#465CFF' color: primaryColor
}] }]
} }
}, },
......
src/components/firstui/fui-digital-keyboard/fui-digital-keyboard.vue
...@@ -24,8 +24,8 @@ ...@@ -24,8 +24,8 @@
</view> </view>
<view class="fui-dk__button-wrap"> <view class="fui-dk__button-wrap">
<view class="fui-dk__button" <view class="fui-dk__button"
:class="{'fui-dk__button-color':!background,'fui-dk__btn-disabled':disabled}" :class="{'fui-dk__button-color':!getBgColor,'fui-dk__btn-disabled':disabled}"
:style="{background:background}"> :style="{background:getBgColor}">
<text class="fui-dk__button-text" <text class="fui-dk__button-text"
:style="{color:color,fontSize:size+'rpx',fontWeight:fontWeight}">{{text}}</text> :style="{color:color,fontSize:size+'rpx',fontWeight:fontWeight}">{{text}}</text>
<view class="fui-dk__button-ck" :class="{'fui-dk__highlight':!disabled}" @tap.stop="confirm"> <view class="fui-dk__button-ck" :class="{'fui-dk__highlight':!disabled}" @tap.stop="confirm">
...@@ -58,18 +58,10 @@ ...@@ -58,18 +58,10 @@
type: String, type: String,
default: '确定' default: '确定'
}, },
// #ifdef APP-NVUE
background: {
type: String,
default: '#465CFF'
},
// #endif
// #ifndef APP-NVUE
background: { background: {
type: String, type: String,
default: '' default: ''
}, },
// #endif
color: { color: {
type: String, type: String,
default: '#fff' default: '#fff'
...@@ -136,6 +128,18 @@ ...@@ -136,6 +128,18 @@
this.initData() this.initData()
} }
}, },
computed: {
getBgColor() {
let color = this.background;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color;
}
},
data() { data() {
return { return {
iphoneX: false, iphoneX: false,
......
src/components/firstui/fui-digital-roller/fui-digital-roller.vue
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<view class="fui-digital__roller-column" <view class="fui-digital__roller-column"
:style="{transform:`translateY(-${(keys[index] || 0) * rollHeight}px)`}"> :style="{transform:`translateY(-${(keys[index] || 0) * rollHeight}px)`}">
<text class="fui-digital__roller-item" v-for="(item,idx) in items" :key="idx" <text class="fui-digital__roller-item" v-for="(item,idx) in items" :key="idx"
:style="{color:color,fontSize:size+'rpx',lineHeight:size+'rpx',fontWeight:fontWeight,height:rollHeight+'px'}">{{item}}</text> :style="{color:getColor,fontSize:size+'rpx',lineHeight:size+'rpx',fontWeight:fontWeight,height:rollHeight+'px'}">{{item}}</text>
</view> </view>
<!-- #endif --> <!-- #endif -->
</view> </view>
...@@ -28,18 +28,10 @@ ...@@ -28,18 +28,10 @@
type: [Number, String], type: [Number, String],
default: '' default: ''
}, },
// #ifdef APP-NVUE
color: {
type: String,
default: '#465CFF'
},
// #endif
// #ifndef APP-NVUE
color: { color: {
type: String, type: String,
default: '' default: ''
}, },
// #endif
size: { size: {
type: [Number, String], type: [Number, String],
default: 32 default: 32
...@@ -68,6 +60,16 @@ ...@@ -68,6 +60,16 @@
styles += `width:${this.width}rpx;` styles += `width:${this.width}rpx;`
} }
return styles return styles
},
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;
} }
}, },
watch: { watch: {
......
src/components/firstui/fui-divider/fui-divider.vue
...@@ -54,9 +54,6 @@ ...@@ -54,9 +54,6 @@
default: '#F1F4FA' default: '#F1F4FA'
} }
}, },
data() {
return {}
},
computed: { computed: {
getTop() { getTop() {
return Number(this.height) / 2 + 'rpx' return Number(this.height) / 2 + 'rpx'
......
src/components/firstui/fui-drag/f-drag-item.vue
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
</view> </view>
<image :draggable="false" :style="{width:width-(padding*2)+'px',height:height-(padding*2)+'px'}" <image :draggable="false" :style="{width:width-(padding*2)+'px',height:height-(padding*2)+'px'}"
:src="src" class="fui-drag__item-img" :class="{'fui-drag__item-mr':type==2}" :src="src" class="fui-drag__item-img" :class="{'fui-drag__item-mr':type==2}"
v-if="src && src!==true && src!=='true' && type==1" > v-if="src && src!==true && src!=='true' && type==1">
</image> </image>
<view class="fui-drag__item-icon" @tap.stop="handleDel" :class="{'fui-drag__item-ab':type==1}" <view class="fui-drag__item-icon" @tap.stop="handleDel" :class="{'fui-drag__item-ab':type==1}"
v-if="type==1 && isDel"> v-if="type==1 && isDel">
...@@ -89,7 +89,9 @@ ...@@ -89,7 +89,9 @@
this.size = styles.size || 30 this.size = styles.size || 30
this.color = styles.color || '#181818' this.color = styles.color || '#181818'
this.isDel = styles.isDel || false this.isDel = styles.isDel || false
this.delColor = styles.delColor || '#FF2B2B' const app = uni && uni.$fui && uni.$fui.color;
const dangerColor = (app && app.danger) || '#FF2B2B';
this.delColor = styles.delColor || dangerColor
this.slideColor = styles.slideColor || '#B2B2B2' this.slideColor = styles.slideColor || '#B2B2B2'
}, },
handleDel() { handleDel() {
...@@ -106,7 +108,7 @@ ...@@ -106,7 +108,7 @@
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
transform: translate3d(0,0,0); transform: translate3d(0, 0, 0);
backface-visibility: hidden; backface-visibility: hidden;
/* #endif */ /* #endif */
justify-content: center; justify-content: center;
...@@ -185,7 +187,7 @@ ...@@ -185,7 +187,7 @@
display: block; display: block;
pointer-events: none; pointer-events: none;
flex-shrink: 0; flex-shrink: 0;
transform: translate3d(0,0,0); transform: translate3d(0, 0, 0);
backface-visibility: hidden; backface-visibility: hidden;
/* #endif */ /* #endif */
} }
......
src/components/firstui/fui-drag/fui-drag.vue
...@@ -5,19 +5,11 @@ ...@@ -5,19 +5,11 @@
:class="[dragging?'fui-drag-item__show':'fui-drag-item__hidden']"> :class="[dragging?'fui-drag-item__show':'fui-drag-item__hidden']">
<!-- #endif --> <!-- #endif -->
<!-- #ifdef APP-VUE || MP-WEIXIN || H5 --> <!-- #ifdef APP-VUE || MP-WEIXIN || H5 -->
<!-- #ifdef VUE2 -->
<view class="fui-drag__wrap" :catch:touchmove="wxDrag?handler.stopTouchMove:''"
:class="[dragging?'fui-drag-item__show':'fui-drag-item__hidden']" ref="fui_drag" :id="elId"
:style="{width:wrapWidth+'px',height:(rows * cellHeight)+'px'}" :list="list"
:change:list="handler.listChange" :param="param" :change:param="handler.paramChange">
<!-- #endif -->
<!-- #ifdef VUE3 -->
<!-- vue3下编译到小程序data数据与wxs混用中无法获取 $data数据无法直接应用到页面，uni-app官方编译bug--> <!-- vue3下编译到小程序data数据与wxs混用中无法获取 $data数据无法直接应用到页面，uni-app官方编译bug-->
<view class="fui-drag__wrap" :catch:touchmove="wxDrag?true:''" <view class="fui-drag__wrap" :catch:touchmove="wxDrag?true:''"
:class="[dragging?'fui-drag-item__show':'fui-drag-item__hidden']" ref="fui_drag" :id="elId" :class="[dragging?'fui-drag-item__show':'fui-drag-item__hidden']" ref="fui_drag" :id="elId"
:style="{width:wrapWidth+'px',height:(rows * cellHeight)+'px'}" :list="list" :style="{width:wrapWidth+'px',height:(rows * cellHeight)+'px'}" :list="list"
:change:list="handler.listChange" :param="param" :change:param="handler.paramChange"> :change:list="handler.listChange" :param="param" :change:param="handler.paramChange">
<!-- #endif -->
<view class="fui-drag-item__wrap" :style="{width:cellWidth+'px',height:cellHeight+'px'}" <view class="fui-drag-item__wrap" :style="{width:cellWidth+'px',height:cellHeight+'px'}"
v-for="(item, index) in list" :key="item.id" :data-index="index" @longpress="handler.longPress" v-for="(item, index) in list" :key="item.id" :data-index="index" @longpress="handler.longPress"
:data-param="param" :data-isdrag="isDrag && dragging?1:0" @touchstart="handler.touchStart" :data-param="param" :data-isdrag="isDrag && dragging?1:0" @touchstart="handler.touchStart"
......
src/components/firstui/fui-drag/index.wxs
...@@ -5,7 +5,7 @@ function isPC() { ...@@ -5,7 +5,7 @@ function isPC() {
var userAgentInfo = navigator.userAgent; var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
var flag = true; var flag = true;
for (var v = 0; v < Agents.length - 1; v++) { for (var v = 0; v< Agents.length - 1; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) { if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false; flag = false;
break; break;
......
src/components/firstui/fui-drawer/fui-drawer.vue
...@@ -59,7 +59,8 @@ ...@@ -59,7 +59,8 @@
// #endif // #endif
return { return {
isNvue: isNvue, isNvue: isNvue,
isShow: false isShow: false,
width: 0
} }
}, },
// #ifdef APP-NVUE // #ifdef APP-NVUE
...@@ -76,7 +77,37 @@ ...@@ -76,7 +77,37 @@
} }
}, },
// #endif // #endif
mounted() {
setTimeout(() => {
this._getSize((width) => {
this.width = width
})
}, 100)
},
methods: { methods: {
_getSize(callback) {
// #ifndef APP-NVUE
uni.createSelectorQuery()
// #ifndef MP-ALIPAY
.in(this)
// #endif
.select('.fui-drawer__popup')
.boundingClientRect()
.exec(ret => {
if (ret) {
callback && callback(ret[0].width || 0)
}
})
// #endif
// #ifdef APP-NVUE
dom.getComponentRect(this.$refs['fui_dwr_ani'], (ret) => {
const size = ret.size
if (size) {
callback && callback(size.width)
}
})
// #endif
},
handleClose(e) { handleClose(e) {
if (!this.maskClosable) return; if (!this.maskClosable) return;
this.$emit('close', {}); this.$emit('close', {});
......
src/components/firstui/fui-dropdown-list/fui-dropdown-list.vue
...@@ -11,8 +11,8 @@ ...@@ -11,8 +11,8 @@
:class="{'fui-ddl__reverse':isReverse,'fui-ddl__item-line':splitLine && itemList.length-1!==index}" :class="{'fui-ddl__reverse':isReverse,'fui-ddl__item-line':splitLine && itemList.length-1!==index}"
v-for="(model,index) in itemList" :key="index" @tap.stop.prevent="itemClick($event,index)"> v-for="(model,index) in itemList" :key="index" @tap.stop.prevent="itemClick($event,index)">
<view class="fui-ddl__checkbox" <view class="fui-ddl__checkbox"
:class="{'fui-is__checkmark':isCheckMark,'fui-ddl__checkbox-color':(!checkboxColor || checkboxColor=='true') && model.checked && !isCheckMark}" :class="{'fui-is__checkmark':isCheckMark,'fui-ddl__checkbox-color':(!checkboxColor || checkboxColor===true) && model.checked && !isCheckMark}"
:style="{background:model.checked && !isCheckMark ?checkboxColor:'transparent',borderColor:model.checked && !isCheckMark ?checkboxColor:borderColor}" :style="{background:model.checked && !isCheckMark ?getChkColor:'transparent',borderColor:model.checked && !isCheckMark ?getChkColor:borderColor}"
v-if="isCheckbox"> v-if="isCheckbox">
<view class="fui-ddl__checkmark" <view class="fui-ddl__checkmark"
:style="{borderBottomColor:checkmarkColor,borderRightColor:checkmarkColor}" :style="{borderBottomColor:checkmarkColor,borderRightColor:checkmarkColor}"
...@@ -22,8 +22,7 @@ ...@@ -22,8 +22,7 @@
<view class="fui-ddl__icon-box" <view class="fui-ddl__icon-box"
:class="{'fui-ddl__icon-ml':!isReverse && isCheckbox,'fui-ddl__icon-mr':isReverse}" :class="{'fui-ddl__icon-ml':!isReverse && isCheckbox,'fui-ddl__icon-mr':isReverse}"
:style="{width:iconWidth+'rpx',height:iconWidth+'rpx'}" v-if="model.src"> :style="{width:iconWidth+'rpx',height:iconWidth+'rpx'}" v-if="model.src">
<image :src="model.src" <image :src="model.src" :style="{width:iconWidth+'rpx',height:iconWidth+'rpx'}"></image>
:style="{width:iconWidth+'rpx',height:iconWidth+'rpx'}"></image>
</view> </view>
<text class="fui-ddl__item-text" <text class="fui-ddl__item-text"
:class="{'fui-ddl__text-pl':!isReverse && (isCheckbox || model.src),'fui-ddl__text-pr':isReverse && (isCheckbox || model.src)}" :class="{'fui-ddl__text-pl':!isReverse && (isCheckbox || model.src),'fui-ddl__text-pr':isReverse && (isCheckbox || model.src)}"
...@@ -80,12 +79,7 @@ ...@@ -80,12 +79,7 @@
}, },
checkboxColor: { checkboxColor: {
type: String, type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: '' default: ''
// #endif
}, },
borderColor: { borderColor: {
type: String, type: String,
...@@ -154,6 +148,16 @@ ...@@ -154,6 +148,16 @@
styles += `width:${width}rpx;` styles += `width:${width}rpx;`
} }
return styles return styles
},
getChkColor() {
let color = this.checkboxColor;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color;
} }
}, },
data() { data() {
......
src/components/firstui/fui-dropdown-menu/fui-dropdown-menu.vue
...@@ -14,8 +14,8 @@ ...@@ -14,8 +14,8 @@
:class="{'fui-ddm__reverse':isReverse,'fui-ddm__item-line':splitLine && itemList.length-1!==index}" :class="{'fui-ddm__reverse':isReverse,'fui-ddm__item-line':splitLine && itemList.length-1!==index}"
v-for="(model,index) in itemList" :key="index" @tap.stop="itemClick(index)"> v-for="(model,index) in itemList" :key="index" @tap.stop="itemClick(index)">
<view class="fui-ddm__checkbox" <view class="fui-ddm__checkbox"
:class="{'fui-is__checkmark':isCheckMark,'fui-ddm__checkbox-color':(!checkboxColor || checkboxColor=='true') && model.checked && !isCheckMark}" :class="{'fui-is__checkmark':isCheckMark,'fui-ddm__checkbox-color':(!checkboxColor || checkboxColor===true) && model.checked && !isCheckMark}"
:style="{background:model.checked && !isCheckMark ?checkboxColor:'transparent',borderColor:model.checked && !isCheckMark ?checkboxColor:borderColor}" :style="{background:model.checked && !isCheckMark ?getChkColor:'transparent',borderColor:model.checked && !isCheckMark ?getChkColor:borderColor}"
v-if="isCheckbox"> v-if="isCheckbox">
<view class="fui-ddm__checkmark" <view class="fui-ddm__checkmark"
:style="{borderBottomColor:checkmarkColor,borderRightColor:checkmarkColor}" :style="{borderBottomColor:checkmarkColor,borderRightColor:checkmarkColor}"
...@@ -89,12 +89,7 @@ ...@@ -89,12 +89,7 @@
//选择框选中后颜色 //选择框选中后颜色
checkboxColor: { checkboxColor: {
type: String, type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: '' default: ''
// #endif
}, },
//选择框未选中时边框颜色 //选择框未选中时边框颜色
borderColor: { borderColor: {
...@@ -208,6 +203,16 @@ ...@@ -208,6 +203,16 @@
} }
// #endif // #endif
return styles return styles
},
getChkColor() {
let color = this.checkboxColor;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color;
} }
}, },
created() { created() {
......
src/components/firstui/fui-empty/fui-empty.vue
...@@ -29,15 +29,18 @@ ...@@ -29,15 +29,18 @@
type: String, type: String,
default: '' default: ''
}, },
// #ifdef APP-NVUE
color: { color: {
type: String, type: String,
// #ifdef APP-NVUE
default: '#333333' default: '#333333'
},
// #endif // #endif
// #ifndef APP-NVUE // #ifndef APP-NVUE
color: {
type: String,
default: '' default: ''
// #endif
}, },
// #endif
size: { size: {
type: [Number, String], type: [Number, String],
default: 32 default: 32
...@@ -46,15 +49,18 @@ ...@@ -46,15 +49,18 @@
type: String, type: String,
default: '' default: ''
}, },
// #ifdef APP-NVUE
descrColor: { descrColor: {
type: String, type: String,
// #ifdef APP-NVUE
default: '#B2B2B2' default: '#B2B2B2'
},
// #endif // #endif
// #ifndef APP-NVUE // #ifndef APP-NVUE
descrColor: {
type: String,
default: '' default: ''
// #endif
}, },
// #endif
descrSize: { descrSize: {
type: [Number, String], type: [Number, String],
default: 24 default: 24
...@@ -67,10 +73,7 @@ ...@@ -67,10 +73,7 @@
type: [Number, String], type: [Number, String],
default: 0 default: 0
} }
}, }
data() {
return {}
},
} }
</script> </script>
......
src/components/firstui/fui-fab/bindingx.js 0 → 100644
// #ifdef APP-NVUE
const animation = uni.requireNativePlugin('animation');
export default {
data() {
return {
startX: 0,
startY: 0,
lastLeft: 0,
lastTop: 0,
isMove: false
}
},
created() {
this.refFab = null;
this.loop = null
},
mounted() {
this.$nextTick(() => {
setTimeout(() => {
this.refFab = this.getEl(this.$refs['fui_fab_move_ref'])
}, 50)
})
},
methods: {
getEl(el) {
return el.ref || el[0].ref;
},
_aniMove(x, y) {
if (!this.refFab || !this.isDrag) return
animation.transition(this.refFab, {
styles: {
transform: `translate(${x}px,${y}px)`
},
duration: 0,
timingFunction: 'linear',
needLayout: false,
delay: 0
}, () => {
if (Math.abs(x) > 0.1 || Math.abs(y) > 0.1) {
this.isMove = true;
}
});
},
touchstart(e) {
if (!this.isDrag) return;
var touch = e.touches || e.changedTouches
this.startX = touch[0].screenX
this.startY = touch[0].screenY
},
touchmove(e) {
if (!this.isDrag) return;
var touch = e.touches || e.changedTouches
let pageX = touch[0].screenX,
pageY = touch[0].screenY;
var left = pageX - this.startX + this.lastLeft;
left = left < -this.eLeft ? -this.eLeft : left;
left = left > this.maxWidth ? this.maxWidth : left;
this.startX = pageX
var top = pageY - this.startY + this.lastTop;
top = top < -this.eTop ? -this.eTop : top;
top = top > this.maxHeight ? this.maxHeight : top;
this.startY = pageY
this.lastLeft = left
this.lastTop = top
this._aniMove(left, top)
},
touchend(e) {
clearTimeout(this.loop)
this.loop = setTimeout(() => {
this.isMove = false
}, 50)
}
}
}
// #endif
// #ifndef APP-NVUE
export default {}
// #endif
src/components/firstui/fui-fab/fui-fab.vue
...@@ -2,7 +2,11 @@ ...@@ -2,7 +2,11 @@
<view @touchmove.stop.prevent="stop"> <view @touchmove.stop.prevent="stop">
<view class="fui-fab__mask" :class="{'fui-fab__mask-show':isShow}" :style="getStyle" ref="fui_mask_ani" <view class="fui-fab__mask" :class="{'fui-fab__mask-show':isShow}" :style="getStyle" ref="fui_mask_ani"
v-if="mask" @tap.stop="maskClick"></view> v-if="mask" @tap.stop="maskClick"></view>
<view class="fui-fab__btn-wrap" :class="[position==='left'?'fui-fab__wrap-left':'fui-fab__wrap-right']"
<!-- #ifdef APP-VUE || MP-WEIXIN || H5-->
<view class="fui-fab__btn-wrap" :data-disabled="isDrag?0:1" :data-width="maxWidth" :data-height="maxHeight"
:data-left="eLeft" :data-top="eTop" @touchstart="handler.touchstart" @touchmove="handler.touchmove"
@mousedown="handler.mousedown" :class="[position==='left'?'fui-fab__wrap-left':'fui-fab__wrap-right']"
:style="getStyles"> :style="getStyles">
<view class="fui-fab__btn-list" <view class="fui-fab__btn-list"
:class="{'fui-fab__btn-hidden':isHidden,'fui-fab__list-ani':isShow,'fui-fab__list-left':position==='left','fui-fab__list-right':position==='right'}" :class="{'fui-fab__btn-hidden':isHidden,'fui-fab__list-ani':isShow,'fui-fab__list-left':position==='left','fui-fab__list-right':position==='right'}"
...@@ -12,8 +16,8 @@ ...@@ -12,8 +16,8 @@
v-for="(btn,idx) in fabs" :key="idx" @tap.stop="handleClick($event,idx)"> v-for="(btn,idx) in fabs" :key="idx" @tap.stop="handleClick($event,idx)">
<text class="fui-fab__btn-text" v-if="btn.text" <text class="fui-fab__btn-text" v-if="btn.text"
:style="{fontSize:(btn.size || 32)+'rpx',color:btn.color || '#fff',textAlign:position==='left'?'left':'right'}">{{btn.text}}</text> :style="{fontSize:(btn.size || 32)+'rpx',color:btn.color || '#fff',textAlign:position==='left'?'left':'right'}">{{btn.text}}</text>
<view class="fui-fab__button" :class="{'fui-fab__btn-color':!background && !btn.background }" <view class="fui-fab__button" :class="{'fui-fab__btn-color':!getBgColor && !btn.background }"
:style="{width:width+'rpx',height:width+'rpx',background:btn.background || background}"> :style="{width:width+'rpx',height:width+'rpx',background:btn.background || getBgColor}">
<fui-icon :name="btn.name" v-if="btn.name" :color="btn.abbrColor || '#fff'" <fui-icon :name="btn.name" v-if="btn.name" :color="btn.abbrColor || '#fff'"
:size="btn.abbrSize || 64"></fui-icon> :size="btn.abbrSize || 64"></fui-icon>
<image :src="btn.src" <image :src="btn.src"
...@@ -25,8 +29,8 @@ ...@@ -25,8 +29,8 @@
</view> </view>
</view> </view>
</view> </view>
<view class="fui-fab__btn-main" :class="{'fui-fab__btn-color':!background}" <view class="fui-fab__btn-main" :class="{'fui-fab__btn-color':!getBgColor}"
:style="{width:width+'rpx',height:width+'rpx',background:background}" :style="{width:width+'rpx',height:width+'rpx',background:getBgColor}"
@tap.stop="handleClick($event,-1)"> @tap.stop="handleClick($event,-1)">
<view class="fui-fab__btn-inner" :class="{'fui-fab__btn-ani':isShow}" ref="fui_fm_ani"> <view class="fui-fab__btn-inner" :class="{'fui-fab__btn-ani':isShow}" ref="fui_fm_ani">
<slot> <slot>
...@@ -35,17 +39,98 @@ ...@@ -35,17 +39,98 @@
</view> </view>
</view> </view>
</view> </view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view class="fui-fab__btn-wrap" @touchstart="touchstart" @touchmove.stop.prevent="touchmove"
@touchend="touchend" @touchcancel="touchend" ref="fui_fab_move_ref"
:class="[position==='left'?'fui-fab__wrap-left':'fui-fab__wrap-right']" :style="getStyles">
<view class="fui-fab__btn-list"
:class="{'fui-fab__btn-hidden':isHidden,'fui-fab__list-ani':isShow,'fui-fab__list-left':position==='left','fui-fab__list-right':position==='right'}"
ref="fui_fab_ani">
<view class="fui-fab__button-box"
:class="[position==='left'?'fui-fab__button-left':'fui-fab__button-right']"
v-for="(btn,idx) in fabs" :key="idx" @tap.stop="handleClick($event,idx)">
<text class="fui-fab__btn-text" v-if="btn.text"
:style="{fontSize:(btn.size || 32)+'rpx',color:btn.color || '#fff',textAlign:position==='left'?'left':'right'}">{{btn.text}}</text>
<view class="fui-fab__button" :class="{'fui-fab__btn-color':!getBgColor && !btn.background }"
:style="{width:width+'rpx',height:width+'rpx',background:btn.background || getBgColor}">
<fui-icon :name="btn.name" v-if="btn.name" :color="btn.abbrColor || '#fff'"
:size="btn.abbrSize || 64"></fui-icon>
<image :src="btn.src"
:style="{width:(btn.width || 56)+'rpx',height:(btn.height || 56)+'rpx',borderRadius:(btn.radius || 0)+'rpx'}"
v-if="!btn.name && btn.src" mode="widthFix"></image>
<text class="fui-fab__btn-abbr"
:style="{fontSize:(btn.abbrSize || 36)+'rpx',lineHeight:(btn.abbrSize || 36)+'rpx',color:btn.abbrColor || '#fff'}"
v-if="!btn.name && !btn.src && btn.abbr">{{btn.abbr}}</text>
</view>
</view>
</view> </view>
</template> <view class="fui-fab__btn-main" :class="{'fui-fab__btn-color':!getBgColor}"
:style="{width:width+'rpx',height:width+'rpx',background:getBgColor}"
@tap.stop="handleClick($event,-1)">
<view class="fui-fab__btn-inner" :class="{'fui-fab__btn-ani':isShow}" ref="fui_fm_ani">
<slot>
<fui-icon name="plus" :color="color" :size="80"></fui-icon>
</slot>
</view>
</view>
</view>
<!-- #endif -->
<!-- #ifndef APP-PLUS || MP-WEIXIN || H5 -->
<view class="fui-fab__btn-wrap" @touchstart="touchstart" @touchmove.stop.prevent="touchmove"
:class="[position==='left'?'fui-fab__wrap-left':'fui-fab__wrap-right']" :style="getStyles">
<view class="fui-fab__btn-list"
:class="{'fui-fab__btn-hidden':isHidden,'fui-fab__list-ani':isShow,'fui-fab__list-left':position==='left','fui-fab__list-right':position==='right'}"
ref="fui_fab_ani">
<view class="fui-fab__button-box"
:class="[position==='left'?'fui-fab__button-left':'fui-fab__button-right']"
v-for="(btn,idx) in fabs" :key="idx" @tap.stop="handleClick($event,idx)">
<text class="fui-fab__btn-text" v-if="btn.text"
:style="{fontSize:(btn.size || 32)+'rpx',color:btn.color || '#fff',textAlign:position==='left'?'left':'right'}">{{btn.text}}</text>
<view class="fui-fab__button" :class="{'fui-fab__btn-color':!getBgColor && !btn.background }"
:style="{width:width+'rpx',height:width+'rpx',background:btn.background || getBgColor}">
<fui-icon :name="btn.name" v-if="btn.name" :color="btn.abbrColor || '#fff'"
:size="btn.abbrSize || 64"></fui-icon>
<image :src="btn.src"
:style="{width:(btn.width || 56)+'rpx',height:(btn.height || 56)+'rpx',borderRadius:(btn.radius || 0)+'rpx'}"
v-if="!btn.name && btn.src" mode="widthFix"></image>
<text class="fui-fab__btn-abbr"
:style="{fontSize:(btn.abbrSize || 36)+'rpx',lineHeight:(btn.abbrSize || 36)+'rpx',color:btn.abbrColor || '#fff'}"
v-if="!btn.name && !btn.src && btn.abbr">{{btn.abbr}}</text>
</view>
</view>
</view>
<view class="fui-fab__btn-main" :class="{'fui-fab__btn-color':!getBgColor}"
:style="{width:width+'rpx',height:width+'rpx',background:getBgColor}"
@tap.stop="handleClick($event,-1)">
<view class="fui-fab__btn-inner" :class="{'fui-fab__btn-ani':isShow}" ref="fui_fm_ani">
<slot>
<fui-icon name="plus" :color="color" :size="80"></fui-icon>
</slot>
</view>
</view>
</view>
<!-- #endif -->
</view>
</template>
<!-- #ifdef APP-VUE || MP-WEIXIN || H5-->
<script src="./index.wxs" module="handler" lang="wxs"></script>
<!-- #endif -->
<script> <script>
//非easycom模式取消注释引入字体组件，按实际路径进行调整 //非easycom模式取消注释引入字体组件，按实际路径进行调整
// import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue" // import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
// #ifdef APP-NVUE // #ifdef APP-NVUE
const animation = uni.requireNativePlugin('animation'); const animation = uni.requireNativePlugin('animation');
const dom = uni.requireNativePlugin('dom');
// #endif // #endif
import mpjs from './mpjs.js'
import bindingx from './bindingx.js'
export default { export default {
name: "fui-fab", name: "fui-fab",
mixins: [mpjs, bindingx],
emits: ['click', 'change'], emits: ['click', 'change'],
// components:{ // components:{
// fuiIcon // fuiIcon
...@@ -73,18 +158,10 @@ ...@@ -73,18 +158,10 @@
type: [Number, String], type: [Number, String],
default: 108 default: 108
}, },
// #ifdef APP-NVUE
background: {
type: String,
default: "#465CFF"
},
// #endif
// #ifndef APP-NVUE
background: { background: {
type: String, type: String,
default: "" default: ""
}, },
// #endif
color: { color: {
type: String, type: String,
default: "#fff" default: "#fff"
...@@ -104,6 +181,11 @@ ...@@ -104,6 +181,11 @@
zIndex: { zIndex: {
type: [Number, String], type: [Number, String],
default: 99 default: 99
},
//V1.9.8+
isDrag: {
type: Boolean,
default: false
} }
}, },
computed: { computed: {
...@@ -114,10 +196,25 @@ ...@@ -114,10 +196,25 @@
} else { } else {
styles += `right:${this.distance}rpx;` styles += `right:${this.distance}rpx;`
} }
// #ifndef APP-PLUS || MP-WEIXIN || H5
if (this.isDrag) {
styles += `transform:${this.transform};`
}
// #endif
return styles; return styles;
}, },
getStyle() { getStyle() {
return `background:${this.maskBackground};z-index:${Number(this.zIndex)-10};` return `background:${this.maskBackground};z-index:${Number(this.zIndex)-10};`
},
getBgColor() {
let color = this.background;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color;
} }
}, },
watch: { watch: {
...@@ -125,13 +222,24 @@ ...@@ -125,13 +222,24 @@
this.$emit("change", { this.$emit("change", {
isShow: val isShow: val
}) })
},
position(val) {
this.$nextTick(() => {
setTimeout(() => {
this._getSize()
}, 50);
})
} }
}, },
data() { data() {
return { return {
isShow: false, isShow: false,
isHidden: true, isHidden: true,
timer: null timer: null,
maxWidth: 0,
maxHeight: 0,
eLeft: 0,
eTop: 0,
}; };
}, },
// #ifndef APP-NVUE // #ifndef APP-NVUE
...@@ -148,8 +256,9 @@ ...@@ -148,8 +256,9 @@
}, },
// #endif // #endif
// #endif // #endif
// #ifdef APP-NVUE
mounted() { mounted() {
// #ifdef APP-NVUE
if (!this.$refs['fui_fab_ani']) return; if (!this.$refs['fui_fab_ani']) return;
let styles = { let styles = {
transform: 'scale(0)', transform: 'scale(0)',
...@@ -164,10 +273,47 @@ ...@@ -164,10 +273,47 @@
}, },
() => {} () => {}
); );
},
// #endif // #endif
this.$nextTick(() => {
setTimeout(() => {
this._getSize()
}, 50);
})
},
methods: { methods: {
stop() {}, stop() {},
_getSize() {
if (!this.isDrag) return;
const sys = uni.getSystemInfoSync()
// #ifndef APP-NVUE
uni.createSelectorQuery()
// #ifndef MP-ALIPAY
.in(this)
// #endif
.select('.fui-fab__btn-wrap')
.boundingClientRect()
.exec(ret => {
if (ret) {
this.maxWidth = sys.windowWidth - ret[0].width - ret[0].left;
this.maxHeight = sys.windowHeight - ret[0].height - ret[0].top;
this.eLeft = ret[0].left || 0;
this.eTop = ret[0].top || 0;
}
})
// #endif
// #ifdef APP-NVUE
dom.getComponentRect(this.$refs['fui_fab_move_ref'], (ret) => {
const size = ret.size
if (size) {
this.maxWidth = sys.windowWidth - size.width - size.left;
this.maxHeight = sys.windowHeight - size.height - size.top;
this.eLeft = size.left || 0;
this.eTop = size.top || 0;
}
})
// #endif
},
// #ifdef APP-NVUE // #ifdef APP-NVUE
_animation(type) { _animation(type) {
let styles = { let styles = {
...@@ -221,6 +367,14 @@ ...@@ -221,6 +367,14 @@
// #ifdef APP-NVUE // #ifdef APP-NVUE
e.stopPropagation(); e.stopPropagation();
// #endif // #endif
// #ifdef APP-NVUE
if (this.isMove) {
this.isMove = false;
return;
};
// #endif
this.isHidden = false this.isHidden = false
clearTimeout(this.timer) clearTimeout(this.timer)
this.$nextTick(() => { this.$nextTick(() => {
......
src/components/firstui/fui-fab/index.wxs 0 → 100644
var movable = {
width: 100,
height: 100,
disabled: false,
left: 0,
top: 0
}
function isPC() {
if (typeof navigator !== 'object') return false;
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
var flag = true;
for (var v = 0; v< Agents.length - 1; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
var isH5 = false
if (typeof window === 'object') isH5 = true
function setInitValue(dataset, isChange) {
movable.width = +dataset.width
movable.height = +dataset.height
movable.top = +dataset.top
movable.left = +dataset.left
//H5获取bool值为undefined
movable.disabled = (+dataset.disabled) == 1 ? true : false
}
function touchstart(e, ins) {
if (movable.disabled) return;
var state = e.instance.getState()
var touch = e.touches[0] || e.changedTouches[0];
if (isH5 && isPC()) {
touch = e;
}
var dataset = e.instance.getDataset()
state.startX = touch.clientX
state.startY = touch.clientY
setInitValue(dataset)
}
function styleChange(left, top, ins) {
if (!ins) return;
var mview = ins.selectComponent('.fui-fab__btn-wrap');
if (!mview) return;
mview.setStyle({
transform: 'translate3d(' + left + 'px,' + top + 'px,0)'
})
}
function touchmove(e, ins, event) {
if (movable.disabled) return;
if (e.preventDefault) {
// 阻止页面滚动
e.preventDefault()
}
var state = {}
var touch = {}
if (isH5 && isPC()) {
touch = e;
state = event.instance.getState()
} else {
touch = e.touches[0] || e.changedTouches[0]
state = e.instance.getState()
}
var pageX = touch.clientX;
var pageY = touch.clientY;
var left = pageX - state.startX + (state.lastLeft || 0);
left = left < -movable.left ? -movable.left : left;
left = left > movable.width ? movable.width : left;
state.startX = pageX
var top = pageY - state.startY + (state.lastTop || 0);
top = top < -movable.top ? -movable.top : top;
top = top > movable.height ? movable.height : top;
state.startY = pageY
state.lastLeft = left
state.lastTop = top
styleChange(left, top, ins)
}
var _movable = false;
function mousedown(e, ins) {
if (!isH5 || !isPC()) return
touchstart(e, ins)
_movable = true
window.onmousemove = function(event) {
if (!isH5 || !isPC() || !_movable) return
touchmove(event, ins, e)
}
window.onmouseup = function(event) {
if (!isH5 || !isPC() || !_movable) return
_movable = false
}
}
module.exports = {
touchstart: touchstart,
touchmove: touchmove,
mousedown: mousedown
}
src/components/firstui/fui-fab/mpjs.js 0 → 100644
// #ifndef APP-PLUS || MP-WEIXIN || H5
export default {
data() {
return {
startX: 0,
startY: 0,
lastLeft: 0,
lastTop: 0,
transform: ''
}
},
methods: {
touchstart(e) {
if (!this.isDrag) return;
const touch = e.touches || e.changedTouches
this.startX = touch[0].clientX
this.startY = touch[0].clientY
},
touchmove(e) {
if (!this.isDrag) return;
const touch = e.touches || e.changedTouches
let pageX = touch[0].clientX,
pageY = touch[0].clientY;
var left = pageX - this.startX + this.lastLeft;
left = left < -this.eLeft ? -this.eLeft : left;
left = left > this.maxWidth ? this.maxWidth : left;
this.startX = pageX
var top = pageY - this.startY + this.lastTop;
top = top < -this.eTop ? -this.eTop : top;
top = top > this.maxHeight ? this.maxHeight : top;
this.startY = pageY
this.lastLeft = left
this.lastTop = top
this.transform = `translate3d(${left}px,${top}px,0)`
}
}
}
// #endif
// #ifdef APP-PLUS|| MP-WEIXIN || H5
export default {}
// #endif
src/components/firstui/fui-footer/fui-footer.vue
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
:class="{'fui-link__color':!item.color}" hover-class="fui-link-hover" hover-stop-propagation :class="{'fui-link__color':!item.color}" hover-class="fui-link-hover" hover-stop-propagation
:open-type="item.openType || 'navigate'" :url="item.url" :delta="item.delta"><text :open-type="item.openType || 'navigate'" :url="item.url" :delta="item.delta"><text
class="fui-link__text" :class="{'fui-link__text-border':index===navigate.length-1}" class="fui-link__text" :class="{'fui-link__text-border':index===navigate.length-1}"
:style="{color:item.color || '#465CFF',fontSize:(item.size || 28)+'rpx',borderColor:borderColor,lineHeight:(item.size || 28)+'rpx'}">{{item.text}}</text> :style="{color:item.color || linkColor,fontSize:(item.size || 28)+'rpx',borderColor:borderColor,lineHeight:(item.size || 28)+'rpx'}">{{item.text}}</text>
</navigator> </navigator>
</view> </view>
<view class="fui-footer__text" :class="{'fui-as__safe-weex':iphoneX && safeArea}" :style="{color:color,fontSize:size+'rpx'}"> <view class="fui-footer__text" :class="{'fui-as__safe-weex':iphoneX && safeArea}" :style="{color:color,fontSize:size+'rpx'}">
...@@ -63,6 +63,12 @@ ...@@ -63,6 +63,12 @@
default: true default: true
} }
}, },
computed: {
linkColor() {
const app = uni && uni.$fui && uni.$fui.color;
return (app && app.link) || '#465CFF';
}
},
data() { data() {
return { return {
iphoneX: false iphoneX: false
...@@ -82,9 +88,8 @@ ...@@ -82,9 +88,8 @@
let iphonex = false; let iphonex = false;
let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax', let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax',
'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini', 'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini',
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini', 'iphone14plus', 'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini',
'iphone14pro', 'iphone14promax', 'iphone15', 'iphone15mini', 'iphone15plus', 'iphone14pro', 'iphone14promax', 'iphone15'
'iphone15pro', 'iphone15promax'
] ]
const model = res.model.replace(/\s/g, "").toLowerCase() const model = res.model.replace(/\s/g, "").toLowerCase()
const newModel = model.split('<')[0] const newModel = model.split('<')[0]
...@@ -139,7 +144,8 @@ ...@@ -139,7 +144,8 @@
} }
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
.fui-link__color text { .fui-link__color text,
.fui-link__color {
color: var(--fui-color-link, #465CFF) !important; color: var(--fui-color-link, #465CFF) !important;
} }
......
src/components/firstui/fui-form-field/fui-form-field.vue
...@@ -7,20 +7,24 @@ ...@@ -7,20 +7,24 @@
<script> <script>
//此组件只为form表单提交传递数据使用，暂时用于微信小程序/百度小程序/QQ小程序 //此组件只为form表单提交传递数据使用，暂时用于微信小程序/百度小程序/QQ小程序
export default { export default {
emits: ['input', 'update:modelValue'],
name: "fui-form-field", name: "fui-form-field",
// #ifndef VUE3
behaviors: ['uni://form-field'], behaviors: ['uni://form-field'],
// #endif
props: { props: {
//是否为隐藏域 //是否为隐藏域
hidden: { hidden: {
type: Boolean, type: Boolean,
default: false default: false
}
}, },
data() { value: {
return {} type: [Number, String, Array],
default: ''
}, },
modelValue: {
type: [Number, String, Array],
default: ''
}
}
} }
</script> </script>
......
src/components/firstui/fui-form-item/fui-form-item.vue
...@@ -4,15 +4,15 @@ ...@@ -4,15 +4,15 @@
@tap="handleClick"> @tap="handleClick">
<!-- #ifdef APP-NVUE --> <!-- #ifdef APP-NVUE -->
<view class="fui-form__asterisk" :style="{left:getAkPosi}" v-if="asterisk"> <view class="fui-form__asterisk" :style="{left:getAkPosi}" v-if="asterisk">
<text :style="{color:asteriskColor || akColor || '#FF2B2B'}">*</text> <text :style="{color:asteriskColor || akColor || dangerColor}">*</text>
</view> </view>
<!-- #endif --> <!-- #endif -->
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
<view class="fui-form__asterisk" v-if="asterisk" <view class="fui-form__asterisk" v-if="asterisk"
:style="{color:asteriskColor || akColor || '#FF2B2B',left:getAkPosi}">*</view> :style="{color:asteriskColor || akColor || dangerColor,left:getAkPosi}">*</view>
<!-- #endif --> <!-- #endif -->
<text class="fui-form__item-sizing" <text class="fui-form__item-sizing"
:style="{width:getLabelWidth,fontSize:getLabelSize,color:labelColor || lColor || '#333',paddingRight:getLabelRight,textAlign:getLabelAlign}" :style="{width:getLabelWidth,fontSize:getLabelSize,color:labelColor || lColor || '#333',paddingRight:getLabelRight,textAlign:getLabelAlign,fontWeight:getLabelWeight}"
v-if="label">{{label}}</text> v-if="label">{{label}}</text>
<view class="fui-form__item-content"> <view class="fui-form__item-content">
<slot></slot> <slot></slot>
...@@ -77,6 +77,10 @@ ...@@ -77,6 +77,10 @@
type: String, type: String,
default: '' default: ''
}, },
labelWeight: {
type: [Number, String],
default: 0
},
//是否显示必填的红色星号 //是否显示必填的红色星号
asterisk: { asterisk: {
type: Boolean, type: Boolean,
...@@ -152,6 +156,10 @@ ...@@ -152,6 +156,10 @@
const labelAlign = (uni.$fui && uni.$fui.fuiFormItem && uni.$fui.fuiFormItem.labelAlign) || 'left' const labelAlign = (uni.$fui && uni.$fui.fuiFormItem && uni.$fui.fuiFormItem.labelAlign) || 'left'
return this.labelAlign || this.lAlign || labelAlign return this.labelAlign || this.lAlign || labelAlign
}, },
getLabelWeight() {
const global = (uni.$fui && uni.$fui.fuiFormItem && uni.$fui.fuiFormItem.labelWeight) || 400
return this.labelWeight || this.lWeight || global
},
getAkPosi() { getAkPosi() {
const akPosi = (uni.$fui && uni.$fui.fuiFormItem && uni.$fui.fuiFormItem.asteriskPosition) || 'left' const akPosi = (uni.$fui && uni.$fui.fuiFormItem && uni.$fui.fuiFormItem.asteriskPosition) || 'left'
const position = this.asteriskPosition || this.akPosi || akPosi const position = this.asteriskPosition || this.akPosi || akPosi
...@@ -160,6 +168,10 @@ ...@@ -160,6 +168,10 @@
const pr = this.padding[1] const pr = this.padding[1]
const pdr = pr ? pr.replace('rpx', '').replace('px', '') : 0; const pdr = pr ? pr.replace('rpx', '').replace('px', '') : 0;
return position === 'right' ? `${Number(lWidth) + Number(pdr || 0) - Number(lRight || 0)}rpx` : '12rpx' return position === 'right' ? `${Number(lWidth) + Number(pdr || 0) - Number(lRight || 0)}rpx` : '12rpx'
},
dangerColor() {
const app = uni && uni.$fui && uni.$fui.color;
return (app && app.danger) || '#FF2B2B';
} }
}, },
data() { data() {
...@@ -168,6 +180,7 @@ ...@@ -168,6 +180,7 @@
lColor: '', lColor: '',
lWidth: 0, lWidth: 0,
lAlign: '', lAlign: '',
lWeight: 0,
akColor: '', akColor: '',
akPosi: '' akPosi: ''
} }
...@@ -182,6 +195,7 @@ ...@@ -182,6 +195,7 @@
this.lSize = this.form.labelSize; this.lSize = this.form.labelSize;
this.lColor = this.form.labelColor; this.lColor = this.form.labelColor;
this.lWidth = this.form.labelWidth; this.lWidth = this.form.labelWidth;
this.lWeight = this.form.labelWeight;
this.lAlign = this.form.labelAlign; this.lAlign = this.form.labelAlign;
this.akColor = this.form.asteriskColor; this.akColor = this.form.asteriskColor;
this.akPosi = this.form.asteriskPosition; this.akPosi = this.form.asteriskPosition;
...@@ -247,12 +261,14 @@ ...@@ -247,12 +261,14 @@
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
.fui-form__item-sizing { .fui-form__item-sizing {
box-sizing: border-box; box-sizing: border-box;
flex-shrink: 0;
} }
/* #endif */ /* #endif */
.fui-form__item-content { .fui-form__item-content {
flex: 1; flex: 1;
width: 0;
} }
.fui-form__item-bottom { .fui-form__item-bottom {
......
src/components/firstui/fui-form/fui-form.vue
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
:style="{paddingTop:padding[0] || 0,paddingRight:padding[1] || 0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0}"> :style="{paddingTop:padding[0] || 0,paddingRight:padding[1] || 0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0}">
<slot></slot> <slot></slot>
<view class="fui-form__msg-wrap" <view class="fui-form__msg-wrap"
:style="{top:top+'px',left:left+'rpx',right:right+'rpx',background:background,borderRadius:radius+'rpx'}" :style="{top:top+'px',left:left+'rpx',right:right+'rpx',background:getBgColor,borderRadius:radius+'rpx'}"
v-if="show" :class="{'fui-form__msg-bg':!background,'fui-form__msg-show':errorMsg}"><text v-if="show" :class="{'fui-form__msg-bg':!getBgColor,'fui-form__msg-show':errorMsg}"><text
class="fui-form__text" :style="{fontSize:size+'rpx',color:color}">{{errorMsg}}</text></view> class="fui-form__text" :style="{fontSize:size+'rpx',color:color}">{{errorMsg}}</text></view>
<view class="fui-form__mask" v-if="disabled"></view> <view class="fui-form__mask" v-if="disabled"></view>
</view> </view>
...@@ -53,12 +53,7 @@ ...@@ -53,12 +53,7 @@
//错误提示框背景色 //错误提示框背景色
background: { background: {
type: String, type: String,
// #ifdef APP-NVUE
default: '#FF2B2B'
// #endif
// #ifndef APP-NVUE
default: '' default: ''
// #endif
}, },
//错误提示字体大小 //错误提示字体大小
size: { size: {
...@@ -87,7 +82,7 @@ ...@@ -87,7 +82,7 @@
}, },
labelColor: { labelColor: {
type: String, type: String,
default: '#333' default: ''
}, },
//form-item label宽度,单位rpx 默认使用全局设置值 //form-item label宽度,单位rpx 默认使用全局设置值
labelWidth: { labelWidth: {
...@@ -95,17 +90,21 @@ ...@@ -95,17 +90,21 @@
default: 0 default: 0
}, },
//label 对齐方式：left，right //label 对齐方式：left，right
labelAlign:{ labelAlign: {
type: String, type: String,
default: 'left' default: ''
},
labelWeight: {
type: [Number, String],
default: 0
}, },
// form-item 必填项星号颜色 // form-item 必填项星号颜色
asteriskColor: { asteriskColor: {
type: String, type: String,
default: '#FF2B2B' default: ''
}, },
//left,right //left,right
asteriskPosition:{ asteriskPosition: {
type: String, type: String,
default: '' default: ''
} }
...@@ -115,6 +114,18 @@ ...@@ -115,6 +114,18 @@
form: this form: this
} }
}, },
computed: {
getBgColor() {
let color = this.background;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.danger) || '#FF2B2B';
}
// #endif
return color;
}
},
data() { data() {
return { return {
errorMsg: '', errorMsg: '',
......
src/components/firstui/fui-gallery/fui-gallery.vue
...@@ -11,8 +11,7 @@ ...@@ -11,8 +11,7 @@
<text class="fui-gallery__index">{{active+1}}/{{imgUrls.length}}</text> <text class="fui-gallery__index">{{active+1}}/{{imgUrls.length}}</text>
</view> </view>
<view class="fui-gallery__descr-wrap" :class="{'fui-gallery__weex-safe':iphoneX && safeArea}" v-if="descr"> <view class="fui-gallery__descr-wrap" :class="{'fui-gallery__weex-safe':iphoneX && safeArea}" v-if="descr">
<text class="fui-gallery__descr" :class="{'fui-gallery__text-ellipsis':ellipsis}" <text class="fui-gallery__descr" :class="{'fui-gallery__text-ellipsis':ellipsis}">{{descr}}</text>
v-if="descr">{{descr}}</text>
</view> </view>
</view> </view>
</template> </template>
...@@ -73,7 +72,6 @@ ...@@ -73,7 +72,6 @@
this.defActive = Number(this.current); this.defActive = Number(this.current);
this.active = this.defActive; this.active = this.defActive;
this.initData(this.urls) this.initData(this.urls)
this.getDescr(this.active)
}, },
data() { data() {
let isNvue = false; let isNvue = false;
...@@ -101,6 +99,11 @@ ...@@ -101,6 +99,11 @@
}) })
} }
this.imgUrls = vals; this.imgUrls = vals;
this.$nextTick(() => {
setTimeout(() => {
this.getDescr(this.active)
}, 10)
})
} }
}, },
change(e) { change(e) {
...@@ -122,8 +125,8 @@ ...@@ -122,8 +125,8 @@
let iphonex = false; let iphonex = false;
let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax', let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax',
'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini', 'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini',
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini', 'iphone14plus', 'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini',
'iphone14pro', 'iphone14promax', 'iphone15', 'iphone15mini', 'iphone15plus', 'iphone14pro', 'iphone14promax', 'iphone15', 'iphone15mini',
'iphone15pro', 'iphone15promax' 'iphone15pro', 'iphone15promax'
] ]
const model = res.model.replace(/\s/g, "").toLowerCase() const model = res.model.replace(/\s/g, "").toLowerCase()
......
src/components/firstui/fui-grid/fui-grid.vue
...@@ -95,7 +95,7 @@ ...@@ -95,7 +95,7 @@
}, },
getWidth(fn) { getWidth(fn) {
let isNoSupported = false let isNoSupported = false
// #ifdef MP-BAIDU || MP-TOUTIAO || MP-QQ // #ifdef MP-BAIDU || MP-TOUTIAO || MP-QQ || MP-KUAISHOU || MP-JD || MP-360 || MP-LARK
isNoSupported = true isNoSupported = true
// #endif // #endif
......
src/components/firstui/fui-horizontal-scroll/bindingx.js 0 → 100644
// #ifdef APP-NVUE
const BindingX = uni.requireNativePlugin('bindingx');
export default {
methods: {
getEl(el) {
return this.$refs[el].ref;
},
nvueScrollHandler(e) {
const anchor = this.getEl('fui_scroller_view')
const element = this.getEl('fui_hor_indicator')
const scrollLeft = e.contentOffset.x
const contentWidth = e.contentSize.width
if (this.scroll && element) {
const barAllMoveWidth = this.bgWidth - this.blockWidth
const platform = uni.getSystemInfoSync().platform
const actionNum = platform.toLowerCase() === 'ios' ? 2 : 1
const expression = `(x / ${actionNum}) / ${contentWidth - this.width} * ${barAllMoveWidth}`
BindingX.bind({
anchor,
eventType: 'scroll',
props: [{
element,
property: 'transform.translateX',
expression
}]
})
}
if (scrollLeft + this.width === contentWidth) {
this.scrollEvent('right')
} else if (scrollLeft === 0) {
this.scrollEvent('left')
}
}
}
}
// #endif
// #ifndef APP-NVUE
export default {}
// #endif
src/components/firstui/fui-horizontal-scroll/fui-horizontal-scroll.vue 0 → 100644
<template>
<view class="fui-horizontal__scroll" :style="{marginTop:marginTop+'rpx',marginBottom:marginBottom+'rpx'}"
ref="fui_horizontal__scroll">
<!-- #ifdef APP-VUE || MP-WEIXIN || H5-->
<scroll-view scroll-x :upper-threshold="0" :lower-threshold="0" :data-width="width" :data-bgwidth="bgWidth"
:data-blockwidth="blockWidth" @scroll="handler.scroll" @scrolltoupper="handler.scrolltoupper"
@scrolltolower="handler.scrolltolower" class="fui-hor__scroll-view">
<view class="fui-hor__scroll-wrap">
<slot></slot>
</view>
</scroll-view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<scroller class="fui-hor__scroll-view" ref="fui_scroller_view" scroll-direction="horizontal"
:show-scrollbar="false" :offset-accuracy="2" @scroll="nvueScrollHandler">
<view class="fui-hor__scroll-wrap">
<slot></slot>
</view>
</scroller>
<!-- #endif -->
<!-- #ifndef APP-PLUS || MP-WEIXIN || H5-->
<scroll-view scroll-x :upper-threshold="0" :lower-threshold="0" class="fui-hor__scroll-view"
@scroll="scrollHandler" @scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower">
<view class="fui-hor__scroll-wrap">
<slot></slot>
</view>
</scroll-view>
<!-- #endif -->
<view class="fui-hor__scrollbar-wrap" :style="{marginTop:scrollGap+'rpx'}" v-if="scroll">
<view class="fui-hor__scrollbar" :class="{'fui-hor__scroll-radius':scrollCap==='round'}"
:style="{height:blockHeight+'px',width:bgWidth+'px',background:background}">
<view class="fui-hor__scroll-indicator"
:class="{'fui-hor__scroll-radius':scrollCap==='round','fui-hor__scroll-bg':!scrollBarColor}"
:style="getStyles" ref="fui_hor_indicator"></view>
</view>
</view>
</view>
</template>
<!-- #ifdef APP-VUE || MP-WEIXIN || H5-->
<script src="./index.wxs" module="handler" lang="wxs"></script>
<!-- #endif -->
<script>
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin('dom');
// #endif
import bindingx from './bindingx.js'
import mpjs from './mpjs.js'
export default {
name: "fui-horizontal-scroll",
mixins: [mpjs, bindingx],
emits: ['scrolltoupper', 'scrolltolower'],
props: {
marginTop: {
type: [String, Number],
default: 0
},
marginBottom: {
type: [String, Number],
default: 0
},
// 是否显示滚动条
scroll: {
type: Boolean,
default: true
},
// 滚动条区域宽度/长度
scrollWidth: {
type: [String, Number],
default: 96
},
// 滚动条的宽度
scrollBarWidth: {
type: [String, Number],
default: 32
},
// 滚动区域/滚动条高度
scrollHeight: {
type: [String, Number],
default: 8
},
//滚动条两端样式，可选值为 square、round
scrollCap: {
type: String,
default: 'round'
},
scrollBarColor: {
type: String,
default: ''
},
background: {
type: String,
default: '#EEEEEE'
},
//自定义滚动条距离上方内容间距
scrollGap: {
type: [String, Number],
default: 24
}
},
data() {
return {
width: 0,
//滚动条背景长度
bgWidth: 0,
//滚动条滑块长度
blockWidth: 0,
blockHeight: 0,
transform: ''
};
},
created() {
this.bgWidth = this.getPx(this.scrollWidth || 96)
this.blockWidth = this.getPx(this.scrollBarWidth || 32)
this.blockHeight = this.getPx(this.scrollHeight || 8)
},
mounted() {
this.$nextTick(() => {
this.init()
})
},
watch: {
scrollWidth(val) {
this.bgWidth = this.getPx(val || 96)
},
scrollBarWidth(val) {
this.blockWidth = this.getPx(this.scrollBarWidth || 32)
},
scrollHeight(val) {
this.blockHeight = this.getPx(this.scrollHeight || 8)
}
},
computed: {
getStyles() {
let style = `height:${this.blockHeight}px;width:${this.blockWidth}px;`
let color = this.scrollBarColor;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
if (color && color !== true) {
style += `background:${color};`
}
// #ifndef APP-PLUS || MP-WEIXIN
style += `transform:${this.transform}`
// #endif
return style
}
},
methods: {
//如果初始化有误，可调用此方法重新初始化
init() {
setTimeout(() => {
this._getSize()
}, 80);
},
getPx(rpx) {
let px = Math.floor(uni.upx2px(Number(rpx)));
px = px % 2 === 0 ? px : px + 1
return px;
},
scrollEvent(edge) {
const event = edge === 'left' ? 'scrolltoupper' : 'scrolltolower'
this.$emit(event)
},
_getSize() {
// #ifndef APP-NVUE
uni.createSelectorQuery()
// #ifndef MP-ALIPAY
.in(this)
// #endif
.select('.fui-horizontal__scroll')
.boundingClientRect()
.exec(ret => {
if (ret) {
this.width = ret[0].width || 0
}
})
// #endif
// #ifdef APP-NVUE
dom.getComponentRect(this.$refs['fui_horizontal__scroll'], (ret) => {
const size = ret.size
if (size) {
this.width = size.width
}
})
// #endif
}
}
}
</script>
<style scoped>
/* #ifndef APP-NVUE */
::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
color: transparent !important;
display: none;
}
/* #endif */
.fui-horizontal__scroll,
.fui-hor__scroll-view,
.fui-hor__scroll-wrap {
/* #ifndef APP-NVUE */
display: flex;
flex-shrink: 0;
/* #endif */
flex-direction: row;
}
.fui-horizontal__scroll {
flex-direction: column;
align-items: stretch;
/* #ifndef APP-NVUE */
align-content: flex-start;
/* #endif */
}
.fui-hor__scrollbar-wrap {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
}
.fui-hor__scrollbar {
position: relative;
overflow: hidden;
/* #ifndef APP-NVUE */
transform: translateZ(0);
/* #endif */
}
.fui-hor__scroll-radius {
border-radius: 100px;
}
.fui-hor__scroll-indicator {
position: absolute;
left: 0;
top: 0;
}
/* #ifndef APP-NVUE */
.fui-hor__scroll-bg {
background-color: var(--fui-color-primary, #465CFF) !important;
}
/* #endif */
</style>
src/components/firstui/fui-horizontal-scroll/index.wxs 0 → 100644
function scroll(event, ownerInstance) {
var detail = event.detail
var scrollWidth = detail.scrollWidth
var scrollLeft = detail.scrollLeft
var dataset = event.currentTarget.dataset
var width = dataset.width || 0
var scrollBarWidth = dataset.bgwidth || 0
var blockWidth = dataset.blockwidth || 0
var x = scrollLeft / (scrollWidth - width) * (scrollBarWidth - blockWidth)
setBarStyle(ownerInstance, x)
}
function scrolltolower(event, ownerInstance) {
ownerInstance.callMethod('scrollEvent', 'right')
var dataset = event.currentTarget.dataset
var scrollBarWidth = dataset.bgwidth || 0
var blockWidth = dataset.blockwidth || 0
setBarStyle(ownerInstance, scrollBarWidth - blockWidth)
}
function scrolltoupper(event, ownerInstance) {
ownerInstance.callMethod('scrollEvent', 'left')
setBarStyle(ownerInstance, 0)
}
function setBarStyle(ownerInstance, x) {
var block = ownerInstance.selectComponent('.fui-hor__scroll-indicator')
block && block.setStyle({
transform: 'translate3d(' + x + 'px,0,0)'
})
}
module.exports = {
scroll: scroll,
scrolltolower: scrolltolower,
scrolltoupper: scrolltoupper
}
src/components/firstui/fui-horizontal-scroll/mpjs.js 0 → 100644
// #ifndef APP-PLUS || MP-WEIXIN || H5
export default {
methods: {
scrollHandler(event) {
const detail = event.detail
const scrollWidth = detail.scrollWidth
const scrollLeft = detail.scrollLeft
const width = this.width
const scrollBarWidth = this.bgWidth
const blockWidth = this.blockWidth
const x = scrollLeft / (scrollWidth - width) * (scrollBarWidth - blockWidth)
this.transform = `translate3d(${x}px,0,0)`
},
scrolltoupper(event) {
this.scrollEvent('left')
this.transform = 'translate3d(0,0,0)'
},
scrolltolower(event) {
this.scrollEvent('right')
const x = this.bgWidth - this.blockWidth
this.transform = `translate3d(${x}px,0,0)`
}
}
}
// #endif
// #ifdef APP-PLUS|| MP-WEIXIN || H5
export default {}
// #endif
src/components/firstui/fui-icon/fui-icon.vue
<template> <template>
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
<text :style="{ color: color, fontSize: getSize, fontWeight: fontWeight}" class="fui-icon" <text :style="{ color:getColor, fontSize: getSize, fontWeight: fontWeight}" class="fui-icon"
:class="[!color && !primary?'fui-icon__color':'',primary && !color?'fui-icon__active-color':'',disabled?'fui-icon__not-allowed':'',customPrefix,customPrefix?name:'']" :class="[!getColor && !primary?'fui-icon__color':'',primary && (!color || color===true)?'fui-icon__active-color':'',disabled?'fui-icon__not-allowed':'',customPrefix,customPrefix?name:'']"
@click="handleClick">{{ icons[name] || '' }}</text> @click="handleClick">{{ icons[name] || '' }}</text>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef APP-NVUE --> <!-- #ifdef APP-NVUE -->
<text :style="{ color: color, fontSize: getSize,lineHeight:getSize, fontWeight: fontWeight}" class="fui-icon" <text
:class="[customPrefix]" @click="handleClick">{{ customPrefix?name:icons[name] }}</text> :style="{ color: primary && (!color || color===true)?primaryColor:getColor, fontSize: getSize,lineHeight:getSize, fontWeight: fontWeight}"
class="fui-icon" :class="[customPrefix]" @click="handleClick">{{ customPrefix?name:icons[name] }}</text>
<!-- #endif --> <!-- #endif -->
</template> </template>
...@@ -43,18 +44,10 @@ ...@@ -43,18 +44,10 @@
type: String, type: String,
default: '' default: ''
}, },
// #ifdef APP-NVUE
color: {
type: String,
default: '#333333'
},
// #endif
// #ifndef APP-NVUE
color: { color: {
type: String, type: String,
default: '' default: ''
}, },
// #endif
//字重 //字重
fontWeight: { fontWeight: {
type: [Number, String], type: [Number, String],
...@@ -73,7 +66,7 @@ ...@@ -73,7 +66,7 @@
type: String, type: String,
default: '' default: ''
}, },
//是否显示为主色调，color为空时有效。nvue不支持【内部使用】 //是否显示为主色调，color为空时有效。【内部使用】
primary: { primary: {
type: Boolean, type: Boolean,
default: false default: false
...@@ -84,6 +77,21 @@ ...@@ -84,6 +77,21 @@
const size = (uni.$fui && uni.$fui.fuiIcon && uni.$fui.fuiIcon.size) || 64 const size = (uni.$fui && uni.$fui.fuiIcon && uni.$fui.fuiIcon.size) || 64
const unit = (uni.$fui && uni.$fui.fuiIcon && uni.$fui.fuiIcon.unit) || 'rpx' const unit = (uni.$fui && uni.$fui.fuiIcon && uni.$fui.fuiIcon.unit) || 'rpx'
return (this.size || size) + (this.unit || unit) return (this.size || size) + (this.unit || unit)
},
primaryColor() {
const app = uni && uni.$fui && uni.$fui.color;
return (app && app.primary) || '#465CFF';
},
getColor() {
const app = uni && uni.$fui && uni.$fui.fuiIcon;
let color = this.color || (app && app.color)
// #ifdef APP-NVUE
if (!color || color === true) {
color = '#333333'
}
// #endif
return color;
} }
}, },
data() { data() {
......
src/components/firstui/fui-image-cropper/index.wxs
...@@ -3,7 +3,7 @@ function isPC() { ...@@ -3,7 +3,7 @@ function isPC() {
var userAgentInfo = navigator.userAgent; var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
var flag = true; var flag = true;
for (var v = 0; v < Agents.length - 1; v++) { for (var v = 0; v< Agents.length - 1; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) { if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false; flag = false;
break; break;
......
src/components/firstui/fui-index-list/f-index-list-item.vue
...@@ -2,13 +2,13 @@ ...@@ -2,13 +2,13 @@
<view class="fui-index__list-item" :class="{'fui-il__between':subRight}" @tap="onClick"> <view class="fui-index__list-item" :class="{'fui-il__between':subRight}" @tap="onClick">
<view class="fui-index__list-left"> <view class="fui-index__list-left">
<view class="fui-il__checkbox" <view class="fui-il__checkbox"
:class="{'fui-il__checkbox-color':(!selectedColor || selectedColor=='true') && model.checked}" :class="{'fui-il__checkbox-color':(!selectedColor || selectedColor === true) && model.checked}"
:style="{background:model.checked?selectedColor:'#fff',borderColor:model.checked?selectedColor:borderColor}" :style="{background:model.checked?getSelectedColor:'#fff',borderColor:model.checked?getSelectedColor:borderColor}"
v-if="isSelect"> v-if="isSelect">
<view class="fui-il__checkmark" v-if="model.checked"></view> <view class="fui-il__checkmark" v-if="model.checked"></view>
</view> </view>
<view class="fui-il__img-box" v-if="isSrc"> <view class="fui-il__img-box" v-if="isSrc">
<fLazyload v-if="model.src" :src="model.src" class="fui-index__list-img" width="72" height="72" mode="widthFix"></fLazyload> <image v-if="model.src" :src="model.src" class="fui-index__list-img" mode="widthFix"></image>
</view> </view>
<text class="fui-index__list-main">{{model.text || ''}}</text> <text class="fui-index__list-main">{{model.text || ''}}</text>
</view> </view>
...@@ -18,13 +18,9 @@ ...@@ -18,13 +18,9 @@
</template> </template>
<script> <script>
import fLazyload from '../fui-lazyload/fui-lazyload.vue'
//此组件为索引列表item项，若不满足要求可自行调整样式 //此组件为索引列表item项，若不满足要求可自行调整样式
export default { export default {
name: 'f-index-list-item', name: 'f-index-list-item',
components: {
fLazyload
},
props: { props: {
model: { model: {
type: Object, type: Object,
...@@ -38,12 +34,7 @@ ...@@ -38,12 +34,7 @@
}, },
selectedColor: { selectedColor: {
type: String, type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: '' default: ''
// #endif
}, },
//checkbox未选中时边框颜色 //checkbox未选中时边框颜色
borderColor: { borderColor: {
...@@ -73,8 +64,18 @@ ...@@ -73,8 +64,18 @@
default: 0 default: 0
} }
}, },
data() { computed: {
return {} getSelectedColor() {
let color = this.selectedColor;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color;
}
}, },
methods: { methods: {
onClick() { onClick() {
......
src/components/firstui/fui-index-list/fui-index-list.vue
...@@ -30,8 +30,6 @@ ...@@ -30,8 +30,6 @@
<scroll-view class="fui-index__list-sv" scroll-y :scroll-into-view="scrollViewId"> <scroll-view class="fui-index__list-sv" scroll-y :scroll-into-view="scrollViewId">
<slot></slot> <slot></slot>
<view :id="'fui_il_letter_'+idx" v-for="(list, idx) in lists" :key="list.key"> <view :id="'fui_il_letter_'+idx" v-for="(list, idx) in lists" :key="list.key">
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<view class="fui-index__list-letter" :class="{'fui-il__key-bg':!background}" <view class="fui-index__list-letter" :class="{'fui-il__key-bg':!background}"
:style="{background:background}"> :style="{background:background}">
<text class="fui-il__letter-text" <text class="fui-il__letter-text"
...@@ -99,7 +97,7 @@ ...@@ -99,7 +97,7 @@
<view class="fui-letter__item" v-for="(item, i) in lists" :key="i"> <view class="fui-letter__item" v-for="(item, i) in lists" :key="i">
<!-- @tap="letterTap(i)" --> <!-- @tap="letterTap(i)" -->
<text class="fui-letter__key" :class="{'fui-il__key-color':i === touchmoveIndex && !activeBackground}" <text class="fui-letter__key" :class="{'fui-il__key-color':i === touchmoveIndex && !activeBackground}"
:style="{ background: i === touchmoveIndex ? activeBackground : 'transparent', color: i === touchmoveIndex? activeColor : keyColor }">{{ item.letter }}</text> :style="{ background: i === touchmoveIndex ? getActiveBgColor : 'transparent', color: i === touchmoveIndex? activeColor : keyColor }">{{ item.letter }}</text>
</view> </view>
</view> </view>
</view> </view>
...@@ -168,15 +166,18 @@ ...@@ -168,15 +166,18 @@
type: String, type: String,
default: '#181818' default: '#181818'
}, },
// #ifdef APP-NVUE
background: { background: {
type: String, type: String,
// #ifdef APP-NVUE
default: '#F1F4FA' default: '#F1F4FA'
},
// #endif // #endif
// #ifndef APP-NVUE // #ifndef APP-NVUE
background: {
type: String,
default: '' default: ''
// #endif
}, },
// #endif
keyColor: { keyColor: {
type: String, type: String,
default: '#7F7F7F' default: '#7F7F7F'
...@@ -187,12 +188,7 @@ ...@@ -187,12 +188,7 @@
}, },
activeBackground: { activeBackground: {
type: String, type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: '' default: ''
// #endif
}, },
isSelect: { isSelect: {
type: Boolean, type: Boolean,
...@@ -205,12 +201,7 @@ ...@@ -205,12 +201,7 @@
}, },
selectedColor: { selectedColor: {
type: String, type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: '' default: ''
// #endif
}, },
//是否显示图片 //是否显示图片
isSrc: { isSrc: {
...@@ -237,6 +228,19 @@ ...@@ -237,6 +228,19 @@
this.initData() this.initData()
} }
}, },
computed: {
getActiveBgColor() {
let color = this.activeBackground;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color;
}
},
data() { data() {
let isNvue = false; let isNvue = false;
// #ifdef APP-NVUE // #ifdef APP-NVUE
......
src/components/firstui/fui-input-number/fui-input-number.vue
...@@ -305,12 +305,14 @@ ...@@ -305,12 +305,14 @@
.fui-number__input { .fui-number__input {
text-align: center; text-align: center;
font-weight: 500; font-weight: 500;
border-width: 0;
} }
/* #ifdef H5 */ /* #ifdef H5 */
input::-webkit-outer-spin-button, ::-webkit-inner-spin-button,
input::-webkit-inner-spin-button { ::-webkit-outer-spin-button{
-webkit-appearance: none; -webkit-appearance: none;
margin: 0;
} }
/* #endif */ /* #endif */
......
src/components/firstui/fui-input/fui-input.vue
<template> <template>
<view :class="{'fui-input__border':inputBorder,'fui-radius__fillet':isFillet}" :style="getStyles" @tap="fieldClick"> <!-- <view :class="{'fui-input__border':inputBorder,'fui-radius__fillet':isFillet}" :style="getStyles" @tap="fieldClick"> -->
<view class="fui-input__wrap" <view class="fui-input__wrap" :class="{'fui-input__border-nvue':inputBorder}"
:class="{'fui-radius__fillet':isFillet,'fui-input__border-radius':inputBorder && !isFillet}" :style="{paddingTop:padding[0] || 0,paddingRight:padding[1] || 0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0,background:backgroundColor,marginTop:marginTop+'rpx',borderRadius:getRadius,borderColor:borderColor}"
:style="{paddingTop:padding[0] || 0,paddingRight:padding[1] || 0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0,backgroundColor:backgroundColor}"> @tap="fieldClick">
<view v-if="borderTop && !inputBorder" <view v-if="borderTop && !inputBorder" :style="{background:borderColor,left:topLeft+'rpx',right:topRight+'rpx'}"
:style="{background:borderColor,left:topLeft+'rpx',right:topRight+'rpx'}" class="fui-input__border-top"> class="fui-input__border-top">
</view> </view>
<!-- #ifndef APP-NVUE -->
<view class="fui-input__border" :style="{borderRadius:getBorderRadius,borderColor:borderColor}"
v-if="inputBorder"></view>
<!-- #endif -->
<!-- #ifdef APP-NVUE --> <!-- #ifdef APP-NVUE -->
<view class="fui-input__required" v-if="required"> <view class="fui-input__required" v-if="required">
<text :style="{color:requiredColor}">*</text> <text :style="{color:requiredColor || dangerColor}">*</text>
</view> </view>
<!-- #endif --> <!-- #endif -->
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
<view class="fui-input__required" :style="{color:requiredColor}" v-if="required">*</view> <view class="fui-input__required" :style="{color:requiredColor || dangerColor}" v-if="required">*</view>
<!-- #endif --> <!-- #endif -->
<view class="fui-input__label" :style="{minWidth:labelWidth+'rpx'}" v-if="label"> <view class="fui-input__label" :style="{minWidth:labelWidth+'rpx'}" v-if="label">
<text :style="{fontSize:getLabelSize,color:labelColor}">{{label}}</text> <text :style="{fontSize:getLabelSize,color:labelColor}">{{label}}</text>
...@@ -21,26 +25,24 @@ ...@@ -21,26 +25,24 @@
<!-- 小程序不支持v-bind="{'password':password}" --> <!-- 小程序不支持v-bind="{'password':password}" -->
<!-- #ifdef APP-PLUS || H5 --> <!-- #ifdef APP-PLUS || H5 -->
<input v-bind="attribute" class="fui-input__self" :class="{'fui-input__text-right':textRight}" <input v-bind="attribute" class="fui-input__self" :class="{'fui-input__text-right':textRight}"
:style="{fontSize:getSize,color:color}" placeholder-class="fui-input__placeholder" :type="type" :style="{fontSize:getSize,color:color}" placeholder-class="fui-input__placeholder" :type="type" :name="name"
:name="name" :value="val" :placeholder="placeholder" :placeholder-style="placeholderStyl" :value="val" :placeholder="placeholder" :placeholder-style="placeholderStyl"
:disabled="disabled || readonly" :cursor-spacing="cursorSpacing" :maxlength="maxlength" :focus="focused" :disabled="disabled || readonly" :cursor-spacing="cursorSpacing" :maxlength="maxlength" :focus="focused"
:confirm-type="confirmType" :confirm-hold="confirmHold" :cursor="cursor" :confirm-type="confirmType" :confirm-hold="confirmHold" :cursor="cursor" :selection-start="selectionStart"
:selection-start="selectionStart" :selection-end="selectionEnd" :adjust-position="adjustPosition" :selection-end="selectionEnd" :adjust-position="adjustPosition" :hold-keyboard="holdKeyboard"
:hold-keyboard="holdKeyboard" :auto-blur="autoBlur" :enableNative="false" :always-embed="alwaysEmbed" :auto-blur="autoBlur" :enableNative="false" :always-embed="alwaysEmbed" @focus="onFocus" @blur="onBlur"
@focus="onFocus" @blur="onBlur" @input="onInput" @confirm="onConfirm" @input="onInput" @confirm="onConfirm" @keyboardheightchange="onKeyboardheightchange" />
@keyboardheightchange="onKeyboardheightchange" />
<!-- #endif --> <!-- #endif -->
<!-- #ifndef APP-PLUS || H5 --> <!-- #ifndef APP-PLUS || H5 -->
<input class="fui-input__self" :class="{'fui-input__text-right':textRight}" <input class="fui-input__self" :class="{'fui-input__text-right':textRight}"
:style="{fontSize:getSize,color:color}" placeholder-class="fui-input__placeholder" :type="type" :style="{fontSize:getSize,color:color}" placeholder-class="fui-input__placeholder" :type="type" :name="name"
:name="name" :value="val" :placeholder="placeholder" :password="password" :value="val" :placeholder="placeholder" :password="password" :placeholder-style="placeholderStyl"
:placeholder-style="placeholderStyl" :disabled="disabled || readonly" :cursor-spacing="cursorSpacing" :disabled="disabled || readonly" :cursor-spacing="cursorSpacing" :maxlength="maxlength" :focus="focused"
:maxlength="maxlength" :focus="focused" :confirm-type="confirmType" :confirm-hold="confirmHold" :confirm-type="confirmType" :confirm-hold="confirmHold" :cursor="cursor" :selection-start="selectionStart"
:cursor="cursor" :selection-start="selectionStart" :selection-end="selectionEnd" :selection-end="selectionEnd" :adjust-position="adjustPosition" :hold-keyboard="holdKeyboard"
:adjust-position="adjustPosition" :hold-keyboard="holdKeyboard" :auto-blur="autoBlur" :auto-blur="autoBlur" :enableNative="false" :always-embed="alwaysEmbed" @focus="onFocus" @blur="onBlur"
:enableNative="false" :always-embed="alwaysEmbed" @focus="onFocus" @blur="onBlur" @input="onInput" @input="onInput" @confirm="onConfirm" @keyboardheightchange="onKeyboardheightchange" />
@confirm="onConfirm" @keyboardheightchange="onKeyboardheightchange" />
<!-- #endif --> <!-- #endif -->
<view class="fui-input__clear-wrap" :style="{background:clearColor}" v-if="clearable && val != ''" <view class="fui-input__clear-wrap" :style="{background:clearColor}" v-if="clearable && val != ''"
@tap.stop="onClear"> @tap.stop="onClear">
...@@ -56,23 +58,21 @@ ...@@ -56,23 +58,21 @@
:style="{background:borderColor,left:bottomLeft+'rpx',right:bottomRight+'rpx'}" :style="{background:borderColor,left:bottomLeft+'rpx',right:bottomRight+'rpx'}"
class="fui-input__border-bottom"></view> class="fui-input__border-bottom"></view>
</view> </view>
</view> <!-- </view> -->
</template> </template>
<script> <script>
export default { export default {
name: "fui-input", name: "fui-input",
emits: ['input', 'update:modelValue', 'focus', 'blur', 'confirm', 'click', 'keyboardheightchange'], emits: ['input', 'update:modelValue', 'focus', 'blur', 'confirm', 'click', 'keyboardheightchange'],
// #ifndef VUE3
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
//加group是为了避免在表单中使用时给组件加value属性 //加group是为了避免在表单中使用时给组件加value属性
behaviors: ['wx://form-field-group'], behaviors: ['wx://form-field-group'],
// #endif // #endif
// #ifdef MP-BAIDU || MP-QQ // #ifdef MP-BAIDU || MP-QQ || H5
//如果在这些平台不需要也能识别，则删除 //如果在这些平台不需要也能识别，则删除
behaviors: ['uni://form-field'], behaviors: ['uni://form-field'],
// #endif // #endif
// #endif
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
options: { options: {
addGlobalClass: true, addGlobalClass: true,
...@@ -87,7 +87,7 @@ ...@@ -87,7 +87,7 @@
}, },
requiredColor: { requiredColor: {
type: String, type: String,
default: '#FF2B2B' default: ''
}, },
//左侧标题 //左侧标题
label: { label: {
...@@ -168,7 +168,7 @@ ...@@ -168,7 +168,7 @@
type: Boolean, type: Boolean,
default: false default: false
}, },
readonly:{ readonly: {
type: Boolean, type: Boolean,
default: false default: false
}, },
...@@ -242,7 +242,7 @@ ...@@ -242,7 +242,7 @@
}, },
radius: { radius: {
type: [Number, String], type: [Number, String],
default: -1 default: 8
}, },
borderTop: { borderTop: {
type: Boolean, type: Boolean,
...@@ -304,19 +304,19 @@ ...@@ -304,19 +304,19 @@
} }
}, },
computed: { computed: {
getStyles() { getRadius() {
let styles = `margin-top:${this.marginTop}rpx;` let radius = this.radius + 'rpx'
if (this.isFillet) {
// #ifdef APP-NVUE radius = '120px'
if (this.inputBorder) {
styles += `border-color:${this.borderColor};`
} }
// #endif return radius;
},
if (!this.inputBorder && !this.borderTop && !this.borderBottom && this.radius != -1) { getBorderRadius() {
styles += `border-radius:${this.radius}rpx;overflow:hidden;` let radius = Number(this.radius) * 2 + 'rpx'
if (this.isFillet) {
radius = '240px'
} }
return styles return radius;
}, },
getSize() { getSize() {
const size = (uni.$fui && uni.$fui.fuiInput && uni.$fui.fuiInput.size) || 32 const size = (uni.$fui && uni.$fui.fuiInput && uni.$fui.fuiInput.size) || 32
...@@ -325,6 +325,10 @@ ...@@ -325,6 +325,10 @@
getLabelSize() { getLabelSize() {
const labelSize = (uni.$fui && uni.$fui.fuiInput && uni.$fui.fuiInput.labelSize) || 32 const labelSize = (uni.$fui && uni.$fui.fuiInput && uni.$fui.fuiInput.labelSize) || 32
return `${this.labelSize || labelSize}rpx` return `${this.labelSize || labelSize}rpx`
},
dangerColor() {
const app = uni && uni.$fui && uni.$fui.color;
return (app && app.danger) || '#FF2B2B';
} }
}, },
watch: { watch: {
...@@ -344,8 +348,8 @@ ...@@ -344,8 +348,8 @@
value(newVal) { value(newVal) {
this.val = newVal this.val = newVal
}, },
password:{ password: {
handler(val){ handler(val) {
if (val) { if (val) {
this.attribute = { this.attribute = {
password: true password: true
...@@ -354,7 +358,7 @@ ...@@ -354,7 +358,7 @@
this.attribute = {} this.attribute = {}
} }
}, },
immediate:true immediate: true
} }
}, },
created() { created() {
...@@ -471,6 +475,7 @@ ...@@ -471,6 +475,7 @@
flex: 1; flex: 1;
align-items: center; align-items: center;
position: relative; position: relative;
border-width: 0;
} }
.fui-input__border-top { .fui-input__border-top {
...@@ -615,25 +620,16 @@ ...@@ -615,25 +620,16 @@
/* #endif */ /* #endif */
.fui-input__border {
border-radius: 8rpx;
position: relative;
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
border-style: solid; .fui-input__border-nvue {
border-width: 0.5px; border-width: 0.5px;
/* #endif */ border-style: solid;
/* #ifndef APP-NVUE */
border-width: 0;
/* #endif */
} }
.fui-input__border-radius { /* #endif */
border-radius: 8rpx;
}
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
.fui-input__border::after { .fui-input__border {
content: ' ';
position: absolute; position: absolute;
height: 200%; height: 200%;
width: 200%; width: 200%;
...@@ -646,14 +642,7 @@ ...@@ -646,14 +642,7 @@
pointer-events: none; pointer-events: none;
} }
.fui-radius__fillet::after {
border-radius: 200px !important;
}
/* #endif */ /* #endif */
.fui-radius__fillet {
border-radius: 100px !important;
}
.fui-input__text-right { .fui-input__text-right {
text-align: right; text-align: right;
......
src/components/firstui/fui-label/fui-label.vue
...@@ -34,9 +34,6 @@ ...@@ -34,9 +34,6 @@
default: false default: false
} }
}, },
data() {
return {}
},
created() { created() {
this.childrens = []; this.childrens = [];
}, },
......
src/components/firstui/fui-license-plate/fui-license-plate.js
...@@ -64,7 +64,7 @@ export default [{ ...@@ -64,7 +64,7 @@ export default [{
cn: '晋', cn: '晋',
en: 'P' en: 'P'
}] }]
}, {// echo建议 }, {
id: 'f_p3', id: 'f_p3',
keys: [{ keys: [{
cn: '蒙', cn: '蒙',
...@@ -82,7 +82,7 @@ export default [{ ...@@ -82,7 +82,7 @@ export default [{
cn: '贵', cn: '贵',
en: 'G' en: 'G'
}, { }, {
cn: '粤',// 功能需要优化 cn: '粤',
en: 'H' en: 'H'
}, { }, {
cn: '青', cn: '青',
...@@ -97,10 +97,10 @@ export default [{ ...@@ -97,10 +97,10 @@ export default [{
cn: '宁', cn: '宁',
en: '' en: ''
}] }]
}, {// 新特性待增加 }, {
id: 'f_p4', id: 'f_p4',
keys: [{ keys: [{
cn: 'ABC',// echo建议 cn: 'ABC',
en: '返回' en: '返回'
}, { }, {
cn: '琼', cn: '琼',
...@@ -119,7 +119,7 @@ export default [{ ...@@ -119,7 +119,7 @@ export default [{
en: 'B' en: 'B'
}, { }, {
cn: '港', cn: '港',
en: 'N'// 新特性待增加 en: 'N'
}, { }, {
cn: '澳', cn: '澳',
en: 'M' en: 'M'
......
src/components/firstui/fui-license-plate/fui-license-plate.vue
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<view v-if="toolbar" class="fui-lp__btn-wrap" <view v-if="toolbar" class="fui-lp__btn-wrap"
:class="[theme==='light'?'fui-lp__btnwrap-light':'fui-lp__btnwrap-dark']"> :class="[theme==='light'?'fui-lp__btnwrap-light':'fui-lp__btnwrap-dark']">
<text class="fui-lp__button" :class="{'fui-lp__button-color':!color}" <text class="fui-lp__button" :class="{'fui-lp__button-color':!color}"
:style="{color:color,fontSize:size+'rpx',fontWeight:fontWeight}" @tap.stop="onComplete">{{text}}</text> :style="{color:getColor,fontSize:size+'rpx',fontWeight:fontWeight}" @tap.stop="onComplete">{{text}}</text>
</view> </view>
<view class="fui-license__plate-grids"> <view class="fui-license__plate-grids">
<view class="fui-lp__grid-wrap" v-for="(item,index) in keyList" :key="item.id"> <view class="fui-lp__grid-wrap" v-for="(item,index) in keyList" :key="item.id">
...@@ -56,18 +56,10 @@ ...@@ -56,18 +56,10 @@
type: String, type: String,
default: '完成' default: '完成'
}, },
// #ifdef APP-NVUE
color: {
type: String,
default: '#465CFF'
},
// #endif
// #ifndef APP-NVUE
color: { color: {
type: String, type: String,
default: '' default: ''
}, },
// #endif
size: { size: {
type: [Number, String], type: [Number, String],
default: 30 default: 30
...@@ -108,6 +100,18 @@ ...@@ -108,6 +100,18 @@
} }
// #endif // #endif
}, },
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() { data() {
return { return {
iphoneX: false, iphoneX: false,
...@@ -157,9 +161,8 @@ ...@@ -157,9 +161,8 @@
let iphonex = false; let iphonex = false;
let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax', let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax',
'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini', 'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini',
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini', 'iphone14plus', 'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini',
'iphone14pro', 'iphone14promax', 'iphone15', 'iphone15mini', 'iphone15plus', 'iphone14pro', 'iphone14promax'
'iphone15pro', 'iphone15promax'
] ]
const model = res.model.replace(/\s/g, "").toLowerCase() const model = res.model.replace(/\s/g, "").toLowerCase()
const newModel = model.split('<')[0] const newModel = model.split('<')[0]
......
src/components/firstui/fui-link/fui-link.vue 0 → 100644
<template>
<a v-if="isShowA" class="fui-link__text" :href="href"
:class="{'fui-link__underline':underline,'fui-link__defcolor':!color,'fui-link__active':highlight}"
:style="{color:getColor,fontSize:size+'rpx',fontWeight:fontWeight}" :download="download">
<slot>{{text || href}}</slot>
</a>
<!-- #ifndef APP-NVUE -->
<text v-else class="fui-link__text" :class="{'fui-link__underline':underline,'fui-link__defcolor':!color,'fui-link__active':highlight}"
:style="{color:getColor,fontSize:size+'rpx',fontWeight:fontWeight}" @tap="openURL">
<slot>{{text || href}}</slot>
</text>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<text v-else class="fui-link__text" :class="{'fui-link__underline':underline,'fui-link__defcolor':!color,'fui-link__active':highlight}"
:style="{color:getColor,fontSize:size+'rpx',fontWeight:fontWeight}" @tap="openURL">{{text || href}}</text>
<!-- #endif -->
</template>
<script>
export default {
name: 'fui-link',
// #ifdef MP-WEIXIN
options: {
virtualHost: true
},
// #endif
props: {
href: {
type: String,
default: ''
},
text: {
type: String,
default: ''
},
download: {
type: String,
default: ''
},
underline: {
type: [Boolean, String],
default: false
},
copyTips: {
type: String,
default: '链接已复制'
},
color: {
type: String,
default: ''
},
size: {
type: [Number, String],
default: 28
},
fontWeight: {
type: [Number, String],
default: 400
},
highlight: {
type: Boolean,
default: false
}
},
computed: {
isShowA() {
let h5 = false
// #ifdef H5
h5 = true;
// #endif
if ((this.isMail() || this.isTel()) && h5) {
return true;
}
return false;
},
getColor() {
let color = this.color;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.link) || '#465CFF';
}
// #endif
return color;
}
},
methods: {
isMail() {
return this.href.startsWith('mailto:');
},
isTel() {
return this.href.startsWith('tel:');
},
openURL() {
// #ifdef APP-PLUS
if (this.isTel()) {
this.makePhoneCall(this.href.replace('tel:', ''));
} else {
plus.runtime.openURL(this.href);
}
// #endif
// #ifdef H5
window.open(this.href)
// #endif
// #ifdef MP
uni.setClipboardData({
data: this.href,
success: () => {
uni.showToast({
title: this.copyTips,
icon: 'none'
});
}
});
// #endif
},
makePhoneCall(phoneNumber) {
uni.makePhoneCall({
phoneNumber
})
}
}
}
</script>
<style scoped>
/* #ifdef H5 */
.fui-link__text {
cursor: pointer;
}
/* #endif */
.fui-link__underline {
text-decoration: underline;
}
/* #ifndef APP-NVUE */
.fui-link__defcolor {
color: var(--fui-color-link, #465CFF) !important;
}
/* #endif */
.fui-link__active:active{
opacity: .5;
}
</style>
src/components/firstui/fui-list-cell/fui-list-cell.vue
<template> <template>
<view class="fui-list__cell" :class="{'fui-highlight':highlight,'fui-list__cell-background':!background}" <view class="fui-list__cell" :class="{'fui-highlight':highlight,'fui-list__cell-background':!background}"
:style="{paddingTop:padding[0] || 0,paddingRight:padding[1] || 0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0,background:background,marginTop:marginTop+'rpx',marginBottom:marginBottom+'rpx',borderRadius:radius}" :style="{paddingTop:getPadding[0] || 0,paddingRight:getPadding[1] || 0,paddingBottom:getPadding[2] || getPadding[0] || 0,paddingLeft:getPadding[3] || getPadding[1] || 0,background:background,marginTop:marginTop+'rpx',marginBottom:marginBottom+'rpx',borderRadius:radius}"
@tap="handleClick"> @tap="handleClick">
<view v-if="topBorder" :style="{background:borderColor,left:topLeft+'rpx',right:topRight+'rpx'}" <view v-if="topBorder" :style="{background:getBorderColor,left:topLeft+'rpx',right:topRight+'rpx'}"
class="fui-cell__border-top" :class="{'fui-cell__border-color':!borderColor}"></view> class="fui-cell__border-top" :class="{'fui-cell__border-color':!getBorderColor}"></view>
<slot></slot> <slot></slot>
<view v-if="bottomBorder" :style="{background:borderColor,left:bottomLeft+'rpx',right:bottomRight+'rpx'}" <view v-if="bottomBorder" :style="{background:getBorderColor,left:getBottomLeft+'rpx',right:bottomRight+'rpx'}"
class="fui-cell__border-bottom" :class="{'fui-cell__border-color':!borderColor}"></view> class="fui-cell__border-bottom" :class="{'fui-cell__border-color':!getBorderColor}"></view>
<view class="fui-cell__arrow" v-if="arrow" :style="{'border-color':arrowColor}"> <view class="fui-cell__arrow" v-if="arrow" :style="{'border-color':getArrowColor}">
</view> </view>
</view> </view>
</template> </template>
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
padding: { padding: {
type: Array, type: Array,
default () { default () {
return ['32rpx', '32rpx'] return []
} }
}, },
//margin-top 单位rpx //margin-top 单位rpx
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
}, },
arrowColor: { arrowColor: {
type: String, type: String,
default: '#B2B2B2' default: ''
}, },
//是否显示上边框 //是否显示上边框
topBorder: { topBorder: {
...@@ -72,18 +72,10 @@ ...@@ -72,18 +72,10 @@
default: true default: true
}, },
//边框颜色，非nvue下传值则全局默认样式失效 //边框颜色，非nvue下传值则全局默认样式失效
// #ifdef APP-NVUE
borderColor: {
type: String,
default: '#EEEEEE'
},
// #endif
// #ifndef APP-NVUE
borderColor: { borderColor: {
type: String, type: String,
default: '' default: ''
}, },
// #endif
//上边框left值，单位rpx //上边框left值，单位rpx
topLeft: { topLeft: {
type: [Number, String], type: [Number, String],
...@@ -97,7 +89,7 @@ ...@@ -97,7 +89,7 @@
//下边框left值，单位rpx //下边框left值，单位rpx
bottomLeft: { bottomLeft: {
type: [Number, String], type: [Number, String],
default: 32 default: 0
}, },
//下边框right值，单位rpx //下边框right值，单位rpx
bottomRight: { bottomRight: {
...@@ -114,8 +106,36 @@ ...@@ -114,8 +106,36 @@
default: 0 default: 0
} }
}, },
data() { computed: {
return {} getPadding() {
let padding = this.padding
if (Array.isArray(padding) && padding.length === 0) {
const app = uni && uni.$fui && uni.$fui.fuiListCell;
padding = app && app.padding;
if (!padding || (Array.isArray(padding) && padding.length === 0)) {
padding = ['32rpx', '32rpx']
}
}
return padding;
},
getArrowColor() {
const app = uni && uni.$fui && uni.$fui.fuiListCell;
return this.arrowColor || (app && app.arrowColor) || '#B2B2B2'
},
getBorderColor() {
let color = this.borderColor;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.fuiListCell;
color = (app && app.borderColor) || '#EEEEEE'
}
// #endif
return color;
},
getBottomLeft() {
const app = uni && uni.$fui && uni.$fui.fuiListCell;
return this.bottomLeft || (app && app.bottomLeft) || 32
}
}, },
methods: { methods: {
handleClick() { handleClick() {
...@@ -203,6 +223,7 @@ ...@@ -203,6 +223,7 @@
.fui-cell__border-color { .fui-cell__border-color {
background-color: var(--fui-color-border, #EEEEEE) !important; background-color: var(--fui-color-border, #EEEEEE) !important;
} }
.fui-list__cell-background { .fui-list__cell-background {
background-color: var(--fui-bg-color, #fff); background-color: var(--fui-bg-color, #fff);
} }
......
src/components/firstui/fui-list/fui-list.vue
...@@ -119,10 +119,7 @@ ...@@ -119,10 +119,7 @@
type: [Number, String], type: [Number, String],
default: 0 default: 0
} }
}, }
data() {
return {}
},
} }
</script> </script>
......
src/components/firstui/fui-load-ani/fui-load-ani.vue
...@@ -62,10 +62,7 @@ ...@@ -62,10 +62,7 @@
type: Boolean, type: Boolean,
default: false default: false
} }
}, }
data() {
return {}
},
} }
</script> </script>
......
src/components/firstui/fui-loadmore/fui-loadmore.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<view class="fui-loadmore__wrap" :class="['fui-loadmore__'+direction]" :style="{height:height+'rpx'}"> <view class="fui-loadmore__wrap" :class="['fui-loadmore__'+direction]" :style="{height:height+'rpx'}">
<view class="fui-loadmore__icon" ref="fui_loadmore" <view class="fui-loadmore__icon" ref="fui_loadmore"
:class="{'fui-loadmore__border-left':!isNvue && !activeColor}" :class="{'fui-loadmore__border-left':!isNvue && !activeColor}"
:style="{width:iconWidth+'rpx',height:iconWidth+'rpx','border-left-color':activeColor,'border-right-color':iconColor,'border-top-color':iconColor,'border-bottom-color':iconColor}" :style="{width:iconWidth+'rpx',height:iconWidth+'rpx','border-left-color':getActiveColor,'border-right-color':iconColor,'border-top-color':iconColor,'border-bottom-color':iconColor}"
v-if="!src && state==2"> v-if="!src && state==2">
</view> </view>
<image class="fui-loadmore__icon-ani" ref="fui_loadmore" :src="src" <image class="fui-loadmore__icon-ani" ref="fui_loadmore" :src="src"
...@@ -60,12 +60,7 @@ ...@@ -60,12 +60,7 @@
//loading图标高亮部分颜色 //loading图标高亮部分颜色
activeColor: { activeColor: {
type: String, type: String,
// #ifdef APP-NVUE
default: "#465CFF"
// #endif
// #ifndef APP-NVUE
default: "" default: ""
// #endif
}, },
//loading 图标的宽度，单位rpx //loading 图标的宽度，单位rpx
iconWidth: { iconWidth: {
...@@ -104,6 +99,18 @@ ...@@ -104,6 +99,18 @@
}) })
} }
}, },
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() { data() {
let isNvue = false; let isNvue = false;
// #ifdef APP-NVUE // #ifdef APP-NVUE
......
src/components/firstui/fui-lottie/fui-lottie-app.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/components/firstui/fui-lottie/fui-lottie-mp.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/components/firstui/fui-lottie/fui-lottie.vue 0 → 100644
<template>
<view class="fui-lottie__wrap">
<!-- #ifdef APP-VUE || H5 -->
<view ref="lottieRef" id="lottieRef" :prop="options" :change:prop="handler.changeProp" :action="actionVal"
:change:action="handler.changeAction" :style="{width:width+'rpx',height:height+'rpx'}"></view>
<!-- #endif -->
<!-- #ifdef MP -->
<canvas :style="{width:lottieW+'px',height:lottieH+'px'}" :class="canvasId" type="2d"></canvas>
<!-- #endif -->
</view>
</template>
<!-- #ifdef APP-VUE || H5 -->
<script module="handler" lang="renderjs">
import lottie from './fui-lottie-app.js'
export default {
data() {
return {
ani: null,
prevAction: '',
isInit: false
}
},
methods: {
changeProp(vals, old) {
let appVue3 = false
// #ifdef APP-VUE
// #ifdef VUE3
appVue3 = true;
// #endif
// #endif
if (!this.isInit && !appVue3) return;
this.init(vals || old)
},
changeAction(newVal, oldVal) {
const action = newVal || oldVal
if (action === this.prevAction) return;
this.prevAction = action;
try {
this.ani && this.ani[action]()
} catch (e) {
//TODO handle the exception
}
},
init(vals) {
if (!vals || (!vals.path && !vals.animationData)) return;
this.ani && this.ani.destroy();
this.$nextTick(() => {
this.ani = lottie.loadAnimation({
// #ifndef H5
container: document.getElementById('lottieRef'),
// #endif
// #ifdef H5
container: this.$refs.lottieRef.$el,
// #endif
renderer: 'svg',
loop: vals.loop === undefined ? true : vals.loop,
autoplay: vals.autoplay === undefined ? true : vals.autoplay,
path: vals.path,
// 只能加载本地json，优先级高于path
animationData: vals.animationData
});
})
}
},
mounted() {
this.init(this.options)
setTimeout(() => {
this.isInit = true;
}, 200)
}
}
</script>
<!-- #endif -->
<script>
// #ifdef MP
import lottieMp from './fui-lottie-mp.js'
// #endif
export default {
name: "fui-lottie",
props: {
width: {
type: [Number, String],
default: 600
},
height: {
type: [Number, String],
default: 400
},
options: {
type: Object,
default () {
return {
path: '',
animationData: '',
autoplay: true,
loop: true
}
}
},
//动画操作，可取值 play、pause、stop、destroy
action: {
type: String,
default: 'play'
}
},
watch: {
// #ifdef MP
actionVal() {
this.changeMpAction()
},
options() {
if (!this.mpInitFlag) return;
this.initMp();
},
// #endif
action(val) {
this.actionVal = this.getAction(this.action)
}
},
data() {
const canvasId = `fui_lt_${Math.ceil(Math.random() * 10e5).toString(36)}`
return {
canvasId,
// #ifdef MP
lottieW: 300,
lottieH: 200,
// #endif
//可取值 play、pause、stop、destroy
actionVal: ''
};
},
// #ifdef VUE2
beforeDestroy() {
this.actionVal = 'destroy'
},
// #endif
// #ifdef VUE3
beforeUnmount() {
this.actionVal = 'destroy'
},
// #endif
// #ifdef MP
created() {
this.aniMp = null
this.mpInitFlag = false
this.lottieW = uni.upx2px(Number(this.width))
this.lottieH = uni.upx2px(Number(this.height))
},
// #endif
mounted() {
this.actionVal = this.getAction(this.action)
// #ifdef MP
this.initMp()
// #endif
},
methods: {
// #ifdef MP
changeMpAction() {
try {
this.aniMp && this.aniMp[this.actionVal]()
} catch (e) {
//TODO handle the exception
}
},
initMp() {
const options = {
...this.options
}
if (!options.path && !options.animationData) return;
this.aniMp && this.aniMp.destroy();
this.$nextTick(() => {
const query = uni.createSelectorQuery()
// #ifndef MP-ALIPAY
.in(this)
// #endif
// #ifndef MP-QQ
query.selectAll(`.${this.canvasId}`).node(res => {
const canvas = res[0].node;
const context = canvas.getContext('2d');
const dpr = uni.getSystemInfoSync().pixelRatio;
canvas.width = this.lottieW * dpr;
canvas.height = this.lottieH * dpr;
context.scale(dpr, dpr);
lottieMp.setup(canvas)
this.aniMp = lottieMp.loadAnimation({
loop: options.loop === undefined ? true : options.loop,
autoplay: options.autoplay === undefined ? true : options.autoplay,
//只支持网络地址
path: options.path,
animationData: options.animationData,
rendererSettings: {
context,
},
})
this.mpInitFlag = true
}).exec()
// #endif
});
},
// #endif
getAction(action) {
const actions = ['play', 'pause', 'stop', 'destroy']
let val = 'play'
if (~actions.indexOf(action)) {
val = action
}
return val
}
}
}
</script>
<style scoped>
/* #ifndef APP-NVUE */
.fui-lottie__wrap {
display: inline-flex;
}
/* #endif */
</style>
src/components/firstui/fui-modal/fui-modal.vue
...@@ -14,11 +14,12 @@ ...@@ -14,11 +14,12 @@
v-if="vals.length>0"> v-if="vals.length>0">
<view class="fui-modal__button" <view class="fui-modal__button"
:class="{'fui-modal__button-col':direction==='column' && index!==vals.length-1,'fui-modal__button-bg':!entity.plain && !entity.background,'fui-modal__button-border':entity.plain,'fui-modal__button-bc':entity.plain && !entity.background}" :class="{'fui-modal__button-col':direction==='column' && index!==vals.length-1,'fui-modal__button-bg':!entity.plain && !entity.background,'fui-modal__button-border':entity.plain,'fui-modal__button-bc':entity.plain && !entity.background}"
:style="{borderRadius:radius+'rpx',background:entity.plain?'transparent':(entity.background || '#465CFF'),borderColor:entity.plain?(entity.background || '#465CFF'):'transparent'}" :style="{borderRadius:radius+'rpx',background:entity.plain?'transparent':(entity.background || primaryColor),borderColor:entity.plain?(entity.background || primaryColor):'transparent'}"
v-for="(entity,index) in vals" :key="index"> v-for="(entity,index) in vals" :key="index">
<text class="fui-modal__button-inner" <text class="fui-modal__button-inner"
:class="{'fui-modal__button-color': !entity.color && entity.plain}" :class="{'fui-modal__button-color': !entity.color && entity.plain}"
:style="{color:entity.color || (entity.plain?'#465CFF':'#fff'),borderRadius:radius+'rpx'}" @tap.stop="handleClick($event,index)">{{entity.text}}</text> :style="{color:entity.color || (entity.plain?primaryColor:'#fff'),borderRadius:radius+'rpx'}"
@tap.stop="handleClick($event,index)">{{entity.text}}</text>
</view> </view>
</view> </view>
</view> </view>
...@@ -127,6 +128,10 @@ ...@@ -127,6 +128,10 @@
computed: { computed: {
getWidth() { getWidth() {
return "width:" + (Number(this.width) - 60) + 'rpx' return "width:" + (Number(this.width) - 60) + 'rpx'
},
primaryColor() {
const app = uni && uni.$fui && uni.$fui.color;
return (app && app.primary) || '#465CFF';
} }
}, },
watch: { watch: {
......
src/components/firstui/fui-movable-view/bindingx.js 0 → 100644
// #ifdef APP-NVUE
const animation = uni.requireNativePlugin('animation');
export default {
data() {
return {
startX: 0,
startY: 0,
lastLeft: 0,
lastTop: 0
}
},
created() {
this.refFab = null;
this.loop = null
},
mounted() {
this.$nextTick(() => {
setTimeout(() => {
this.refFab = this.getEl(this.$refs['fui-movable__view'])
}, 50)
})
},
methods: {
getEl(el) {
return el.ref || el[0].ref;
},
_aniMove(x, y) {
if (!this.refFab || this.direction === 'none') return
animation.transition(this.refFab, {
styles: {
transform: `translate(${x}px,${y}px)`
},
duration: 0,
timingFunction: 'linear',
needLayout: false,
delay: 0
}, () => {
this.change({
left: x,
top: y
})
});
},
touchstart(e) {
if (this.direction === 'none') return;
var touch = e.touches || e.changedTouches
if (this.direction === 'all') {
this.startX = touch[0].screenX
this.startY = touch[0].screenY
} else if (this.direction === 'vertical') {
this.startY = touch[0].screenY
} else {
this.startX = touch[0].screenX
}
},
getLeft(pageX) {
var left = pageX - this.startX + this.lastLeft;
left = left < -this.eLeft ? -this.eLeft : left;
left = left > this.maxWidth ? this.maxWidth : left;
return left
},
getTop(pageY) {
var top = pageY - this.startY + this.lastTop;
top = top < -this.eTop ? -this.eTop : top;
top = top > this.maxHeight ? this.maxHeight : top;
return top
},
touchmove(e) {
if (this.direction === 'none') return;
var touch = e.touches || e.changedTouches
let pageX = touch[0].screenX,
pageY = touch[0].screenY;
let left = 0,
top = 0;
if (this.direction === 'all') {
left = this.getLeft(pageX)
this.startX = pageX
top = this.getTop(pageY)
this.startY = pageY
} else if (this.direction === 'vertical') {
top = this.getTop(pageY)
this.startY = pageY
} else {
left = this.getLeft(pageX)
this.startX = pageX
}
this.lastLeft = left
this.lastTop = top
this._aniMove(left, top)
}
}
}
// #endif
// #ifndef APP-NVUE
export default {}
// #endif
src/components/firstui/fui-movable-view/fui-movable-view.vue 0 → 100644
<template>
<view>
<!-- #ifdef APP-VUE || H5 -->
<view class="fui-movable__view" :class="{'fui-movable__cursor':direction!=='none'}" :data-direction="direction"
:data-width="maxWidth" :data-height="maxHeight" :data-left="eLeft" :data-top="eTop"
@touchstart="handler.touchstart" @touchmove="handler.touchmove" @mousedown="handler.mousedown"
:style="getStyles">
<slot></slot>
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="fui-movable__view" :class="{'fui-movable__cursor':direction!=='none'}" :data-direction="direction"
:data-width="maxWidth" :data-height="maxHeight" :data-left="eLeft" :data-top="eTop"
@touchstart="handler.touchstart" :catchtouchmove="handler.touchmove" :style="getStyles">
<slot></slot>
</view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view class="fui-movable__view" @touchstart="touchstart" @touchmove.stop.prevent="touchmove"
ref="fui-movable__view" :style="getStyles">
<slot></slot>
</view>
<!-- #endif -->
<!-- #ifndef APP-PLUS || MP-WEIXIN || H5 -->
<view class="fui-movable__view" @touchstart="touchstart" @touchmove.stop.prevent="touchmove" :style="getStyles">
<slot></slot>
</view>
<!-- #endif -->
</view>
</template>
<!-- #ifdef APP-VUE || MP-WEIXIN || H5-->
<script src="./index.wxs" module="handler" lang="wxs"></script>
<!-- #endif -->
<script>
// #ifdef APP-NVUE
const animation = uni.requireNativePlugin('animation');
const dom = uni.requireNativePlugin('dom');
// #endif
import mpjs from './mpjs.js'
import bindingx from './bindingx.js'
export default {
name: "fui-movable-view",
emits: ['change'],
mixins: [mpjs, bindingx],
props: {
//left值,设置大于-1的值则right失效
left: {
type: [Number, String],
default: -1
},
right: {
type: [Number, String],
default: 80
},
//top值,设置大于-1的值则bottom失效
top: {
type: [Number, String],
default: -1
},
bottom: {
type: [Number, String],
default: 120
},
zIndex: {
type: [Number, String],
default: 10
},
//移动方向，属性值有all、vertical、horizontal、none
direction: {
type: String,
default: 'all'
}
},
data() {
return {
maxWidth: 0,
maxHeight: 0,
eLeft: 0,
eTop: 0,
};
},
watch: {
position(val) {
this.$nextTick(() => {
setTimeout(() => {
this._getSize()
}, 50);
})
}
},
mounted() {
this.$nextTick(() => {
setTimeout(() => {
this._getSize()
}, 50);
})
},
computed: {
position() {
return `${this.left}_${this.right}_${this.top}_${this.bottom}`
},
getStyles() {
let styles = `z-index:${this.zIndex};`
if (this.left != -1) {
styles += `left:${this.left}rpx;`
} else {
styles += `right:${this.right}rpx;`
}
if (this.top != -1) {
styles += `top:${this.top}rpx;`
} else {
styles += `bottom:${this.bottom}rpx;`
}
// #ifndef APP-PLUS || MP-WEIXIN || H5
if (this.direction !== 'none') {
styles += `transform:${this.transform};`
}
// #endif
return styles;
}
},
methods: {
_getSize() {
const sys = uni.getSystemInfoSync()
// #ifndef APP-NVUE
uni.createSelectorQuery()
// #ifndef MP-ALIPAY
.in(this)
// #endif
.select('.fui-movable__view')
.boundingClientRect()
.exec(ret => {
if (ret) {
this.maxWidth = sys.windowWidth - ret[0].width - ret[0].left;
this.maxHeight = sys.windowHeight - ret[0].height - ret[0].top;
this.eLeft = ret[0].left || 0;
this.eTop = ret[0].top || 0;
this.change({
left: 0,
top: 0
})
}
})
// #endif
// #ifdef APP-NVUE
dom.getComponentRect(this.$refs['fui-movable__view'], (ret) => {
const size = ret.size
if (size) {
this.maxWidth = sys.windowWidth - size.width - size.left;
this.maxHeight = sys.windowHeight - size.height - size.top;
this.eLeft = size.left || 0;
this.eTop = size.top || 0;
this.change({
left: 0,
top: 0
})
}
})
// #endif
},
reset() {
setTimeout(() => {
this._getSize()
}, 50);
},
change(e) {
this.$emit('change', {
x: e.left + this.eLeft,
y: e.top + this.eTop
})
}
}
}
</script>
<style scoped>
.fui-movable__view {
position: fixed;
}
/* #ifdef H5 */
.fui-movable__cursor {
cursor: grab;
}
/* #endif */
</style>
src/components/firstui/fui-movable-view/index.wxs 0 → 100644
var movable = {
width: 100,
height: 100,
direction: '',
left: 0,
top: 0
}
function isPC() {
if (typeof navigator !== 'object') return false;
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
var flag = true;
for (var v = 0; v< Agents.length - 1; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
var isH5 = false
if (typeof window === 'object') isH5 = true
function setInitValue(dataset, isChange) {
movable.width = +dataset.width
movable.height = +dataset.height
movable.top = +dataset.top
movable.left = +dataset.left
movable.direction = dataset.direction
}
function touchstart(e, ins) {
if (movable.direction == 'none') return;
var state = e.instance.getState()
var touch = e.touches[0] || e.changedTouches[0];
if (isH5 && isPC()) {
touch = e;
}
var dataset = e.instance.getDataset()
if (movable.direction == 'all') {
state.startX = touch.clientX
state.startY = touch.clientY
} else if (movable.direction == 'vertical') {
state.startY = touch.clientY
} else {
state.startX = touch.clientX
}
setInitValue(dataset)
}
function styleChange(left, top, ins) {
if (!ins) return;
var mview = ins.selectComponent('.fui-movable__view');
if (!mview) return;
mview.setStyle({
transform: 'translate3d(' + left + 'px,' + top + 'px,0)'
})
ins.callMethod('change', {
left: left,
top: top
})
}
function getLeft(pageX, state) {
var left = pageX - state.startX + (state.lastLeft || 0);
left = left < -movable.left ? -movable.left : left;
left = left > movable.width ? movable.width : left;
return left
}
function getTop(pageY, state) {
var top = pageY - state.startY + (state.lastTop || 0);
top = top < -movable.top ? -movable.top : top;
top = top > movable.height ? movable.height : top;
return top
}
function touchmove(e, ins, event) {
if (movable.direction == 'none') return;
if (e.preventDefault) {
// 阻止页面滚动
e.preventDefault()
}
var state = {}
var touch = {}
if (isH5 && isPC()) {
touch = e;
state = event.instance.getState()
} else {
touch = e.touches[0] || e.changedTouches[0]
state = e.instance.getState()
}
var pageX = touch.clientX;
var pageY = touch.clientY;
var left = 0,
top = 0;
if (movable.direction == 'all') {
left = getLeft(pageX, state)
state.startX = pageX
top = getTop(pageY, state)
state.startY = pageY
} else if (movable.direction == 'vertical') {
top = getTop(pageY, state)
state.startY = pageY
} else {
left = getLeft(pageX, state)
state.startX = pageX
}
state.lastLeft = left
state.lastTop = top
styleChange(left, top, ins)
}
var _movable = false;
function mousedown(e, ins) {
if (!isH5 || !isPC()) return
touchstart(e, ins)
_movable = true
window.onmousemove = function(event) {
if (!isH5 || !isPC() || !_movable) return
touchmove(event, ins, e)
}
window.onmouseup = function(event) {
if (!isH5 || !isPC() || !_movable) return
_movable = false
}
}
module.exports = {
touchstart: touchstart,
touchmove: touchmove,
mousedown: mousedown
}
src/components/firstui/fui-movable-view/mpjs.js 0 → 100644
// #ifndef APP-PLUS || MP-WEIXIN || H5
export default {
data() {
return {
startX: 0,
startY: 0,
lastLeft: 0,
lastTop: 0,
transform: ''
}
},
methods: {
touchstart(e) {
if (this.direction === 'none') return;
const touch = e.touches || e.changedTouches
if (this.direction === 'all') {
this.startX = touch[0].clientX
this.startY = touch[0].clientY
} else if (this.direction === 'vertical') {
this.startY = touch[0].clientY
} else {
this.startX = touch[0].clientX
}
},
getLeft(pageX) {
var left = pageX - this.startX + this.lastLeft;
left = left < -this.eLeft ? -this.eLeft : left;
left = left > this.maxWidth ? this.maxWidth : left;
return left
},
getTop(pageY, state) {
var top = pageY - this.startY + this.lastTop;
top = top < -this.eTop ? -this.eTop : top;
top = top > this.maxHeight ? this.maxHeight : top;
return top
},
touchmove(e) {
if (this.direction == 'none') return;
const touch = e.touches || e.changedTouches
let pageX = touch[0].clientX,
pageY = touch[0].clientY;
let left = 0,
top = 0;
if (this.direction === 'all') {
left = this.getLeft(pageX)
this.startX = pageX
top = this.getTop(pageY)
this.startY = pageY
} else if (this.direction === 'vertical') {
top = this.getTop(pageY)
this.startY = pageY
} else {
left = this.getLeft(pageX)
this.startX = pageX
}
this.lastLeft = left
this.lastTop = top
this.transform = `translate3d(${left}px,${top}px,0)`
this.change({
left,
top
})
}
}
}
// #endif
// #ifdef APP-PLUS|| MP-WEIXIN || H5
export default {}
// #endif
src/components/firstui/fui-notice-bar/fui-notice-bar.vue
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<view :id="elId_box" <view :id="elId_box"
:class="{'fui-notice__content':scrollable,'fui-notice__content-single':!scrollable && single}"> :class="{'fui-notice__content':scrollable,'fui-notice__content-single':!scrollable && single}">
<text ref="animationEle" class="fui-notice__text" :id="elId" <text ref="animationEle" class="fui-notice__text" :id="elId"
:style="{color:color,fontSize:size+'rpx',lineHeight:scrollable && !isNvue?size+'rpx':'normal',fontWeight:bold?'bold':'normal',width:wrapWidth+'px', 'animationDuration': animationDuration,'-webkit-animationDuration': animationDuration,animationPlayState: webviewHide?'paused':animationPlayState,'-webkit-animationPlayState':webviewHide?'paused':animationPlayState, animationDelay: animationDelay, '-webkit-animationDelay':animationDelay}" :style="{color:getColor,fontSize:size+'rpx',lineHeight:scrollable && !isNvue?size+'rpx':'normal',fontWeight:bold?'bold':'normal',width:wrapWidth+'px', 'animationDuration': animationDuration,'-webkit-animationDuration': animationDuration,animationPlayState: webviewHide?'paused':animationPlayState,'-webkit-animationPlayState':webviewHide?'paused':animationPlayState, animationDelay: animationDelay, '-webkit-animationDelay':animationDelay}"
:class="{'fui-notice__single':!scrollable && single,'fui-notice__scrollable':scrollable,'fui-notice__text-color':!color && !isNvue}">{{content}}</text> :class="{'fui-notice__single':!scrollable && single,'fui-notice__scrollable':scrollable,'fui-notice__text-color':!color && !isNvue}">{{content}}</text>
</view> </view>
</view> </view>
...@@ -43,12 +43,7 @@ ...@@ -43,12 +43,7 @@
}, },
color: { color: {
type: String, type: String,
// #ifdef APP-NVUE
default: '#FF2B2B'
// #endif
// #ifndef APP-NVUE
default: '' default: ''
// #endif
}, },
bold: { bold: {
type: Boolean, type: Boolean,
...@@ -85,6 +80,18 @@ ...@@ -85,6 +80,18 @@
default: 0 default: 0
} }
}, },
computed: {
getColor() {
let color = this.color;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.danger) || '#FF2B2B';
}
// #endif
return color;
}
},
data() { data() {
const elId = `fui_${Math.ceil(Math.random() * 10e5).toString(36)}` const elId = `fui_${Math.ceil(Math.random() * 10e5).toString(36)}`
const elId_box = `fui_${Math.ceil(Math.random() * 10e5).toString(36)}` const elId_box = `fui_${Math.ceil(Math.random() * 10e5).toString(36)}`
......
src/components/firstui/fui-overflow-hidden/fui-overflow-hidden.vue
...@@ -84,9 +84,6 @@ ...@@ -84,9 +84,6 @@
default: 0 default: 0
} }
}, },
data() {
return {}
},
computed: { computed: {
getGradientBgColor() { getGradientBgColor() {
// #ifdef APP-NVUE // #ifdef APP-NVUE
......
src/components/firstui/fui-pagination/fui-pagination.vue
...@@ -2,21 +2,35 @@ ...@@ -2,21 +2,35 @@
<view class="fui-pagination__wrap"> <view class="fui-pagination__wrap">
<view class="fui-pagination__btn" <view class="fui-pagination__btn"
:class="{'fui-pagination__disabled':currentIndex === 1,'fui-pagination__btn-ac':currentIndex !== 1 && highlight,'fui-pagination__color':!color}" :class="{'fui-pagination__disabled':currentIndex === 1,'fui-pagination__btn-ac':currentIndex !== 1 && highlight,'fui-pagination__color':!color}"
:style="{width:width+'rpx',height:height+'rpx',borderColor:borderColor,background:background,borderRadius:(radius==-1?height:radius)+'rpx'}" :style="{width:width+'rpx',height:height+'rpx',borderColor:borderColor,background:background,borderRadius:radius+'rpx'}"
@click="clickPrev"> @click="clickPrev">
<text :class="{'fui-pagination__color':!color}" :style="{color:color,fontSize:size+'rpx'}" v-if="!custom">{{prevText}}</text> <text :class="{'fui-pagination__color':!color}" :style="{color:color,fontSize:size+'rpx'}"
v-if="!custom">{{prevText}}</text>
<slot name="prev"></slot> <slot name="prev"></slot>
</view> </view>
<view class="fui-pagination__num" v-if="isPage"> <view class="fui-pagination__num" v-if="isPage && pageType==1">
<text :class="{'fui-pagination__active-color':!currentColor}" <text :class="{'fui-pagination__active-color':!currentColor}"
:style="{color:currentColor,fontSize:pageFontSize+'rpx'}">{{currentIndex}}</text> :style="{color:getCurrentColor,fontSize:pageFontSize+'rpx'}">{{currentIndex}}</text>
<text :class="{'fui-pagination__color':!pageColor}" :style="{color:pageColor,fontSize:pageFontSize+'rpx'}">/{{maxPage || 0}}</text> <text :class="{'fui-pagination__color':!pageColor}"
:style="{color:pageColor,fontSize:pageFontSize+'rpx'}">/{{maxPage || 0}}</text>
</view> </view>
<view class="fui-page__number" v-if="isPage && pageType==2">
<view class="fui-page__num-item" :class="{'fui-pagination__bg':!activeBgColor && currentIndex===item}"
v-for="(item,index) in pageNumber" :key="index"
:style="{background:currentIndex===item?getActiveBgColor:pageBgColor,borderRadius:radius+'rpx'}"
@tap.stop="handleClick(item,index)">
<text class="fui-page__num-text" :class="{'fui-pagination__color':!color && currentIndex!==item}"
:style="{color:currentIndex===item?activeColor:pageColor}">{{item}}</text>
</view>
</view>
<view class="fui-pagination__btn" <view class="fui-pagination__btn"
:class="{'fui-pagination__disabled':currentIndex === maxPage,'fui-pagination__btn-ac':currentIndex !== maxPage && highlight,'fui-pagination__color':!color}" :class="{'fui-pagination__disabled':currentIndex === maxPage,'fui-pagination__btn-ac':currentIndex !== maxPage && highlight,'fui-pagination__color':!color}"
:style="{width:width+'rpx',height:height+'rpx',borderColor:borderColor,background:background,borderRadius:(radius==-1?height:radius)+'rpx'}" :style="{width:width+'rpx',height:height+'rpx',borderColor:borderColor,background:background,borderRadius:radius+'rpx'}"
@click="clickNext"> @click="clickNext">
<text :class="{'fui-pagination__color':!color}" :style="{color:color,fontSize:size+'rpx'}" v-if="!custom">{{nextText}}</text> <text :class="{'fui-pagination__color':!color }" :style="{color:color,fontSize:size+'rpx'}"
v-if="!custom">{{nextText}}</text>
<slot name="next"></slot> <slot name="next"></slot>
</view> </view>
</view> </view>
...@@ -37,11 +51,11 @@ ...@@ -37,11 +51,11 @@
}, },
width: { width: {
type: [Number, String], type: [Number, String],
default: 160 default: 128
}, },
height: { height: {
type: [Number, String], type: [Number, String],
default: 64 default: 60
}, },
borderColor: { borderColor: {
type: String, type: String,
...@@ -66,7 +80,7 @@ ...@@ -66,7 +80,7 @@
}, },
radius: { radius: {
type: [Number, String], type: [Number, String],
default: -1 default: 12
}, },
//是否有点击效果 //是否有点击效果
highlight: { highlight: {
...@@ -86,23 +100,21 @@ ...@@ -86,23 +100,21 @@
//当前页码字体颜色 //当前页码字体颜色
currentColor: { currentColor: {
type: String, type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: '' default: ''
// #endif
}, },
//页码字体颜色 //页码字体颜色
// #ifdef APP-NVUE
pageColor: { pageColor: {
type: String, type: String,
// #ifdef APP-NVUE default: '#333',
default: '#333' },
// #endif // #endif
// #ifndef APP-NVUE // #ifndef APP-NVUE
pageColor: {
type: String,
default: '' default: ''
// #endif
}, },
// #endif
//页码字体大小 //页码字体大小
pageFontSize: { pageFontSize: {
type: [Number, String], type: [Number, String],
...@@ -113,6 +125,23 @@ ...@@ -113,6 +125,23 @@
type: Boolean, type: Boolean,
default: true default: true
}, },
//页码展示类型 1-简约型 2-展开型
pageType: {
type: [Number, String],
default: 1
},
pageBgColor: {
type: String,
default: 'rgba(0,0,0,0)'
},
activeBgColor: {
type: String,
default: ''
},
activeColor: {
type: String,
default: '#fff'
},
//数据总量 //数据总量
total: { total: {
type: [Number, String], type: [Number, String],
...@@ -133,22 +162,101 @@ ...@@ -133,22 +162,101 @@
maxPage = Math.ceil(total / pageSize) maxPage = Math.ceil(total / pageSize)
} }
return maxPage return maxPage
},
getCurrentColor() {
let color = this.currentColor;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color;
},
getActiveBgColor() {
let color = this.activeBgColor;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color;
} }
}, },
watch: { watch: {
current(val) { current(val) {
this.currentIndex = +val this.currentIndex = +val
},
total(val) {
if (this.pageType == 2) {
this.getPageNumber()
}
},
pageSize(val) {
if (this.pageType == 2) {
this.getPageNumber()
}
} }
}, },
created() { created() {
this.currentIndex = +this.current this.currentIndex = +this.current
if (this.pageType == 2) {
this.getPageNumber()
}
}, },
data() { data() {
return { return {
currentIndex: 1 currentIndex: 1,
pageNumber: [],
pagerCount: 0
}; };
}, },
methods: { methods: {
toArray(start, end) {
return Array.from(new Array(end + 1).keys()).slice(start);
},
getPageNumber() {
const num = this.currentIndex
const total = this.total
const pageSize = this.pageSize
// TODO 最大展示页数，移动端宽度有限，暂时固定
let pagerCount = this.pagerCount
if (!pagerCount) {
pagerCount = 6
const width = Number(this.width)
if (!isNaN(width) && width <= 60) {
pagerCount = 8;
}
this.pagerCount = pagerCount;
}
let showPagerArr = this.toArray(1, pagerCount)
let pagerNum = Math.ceil(total / pageSize)
if (pagerNum <= 1) {
showPagerArr = [1]
} else if (pagerNum <= pagerCount) {
showPagerArr = this.toArray(1, pagerNum)
} else {
showPagerArr[pagerCount - 1] = pagerNum;
if (num < pagerCount - 1) {
showPagerArr[pagerCount - 2] = '...'
} else if (num >= pagerNum - (pagerCount - 3)) {
showPagerArr[1] = '...';
showPagerArr.forEach((item, index) => {
if (index > 1) {
showPagerArr[index] = pagerNum - (pagerCount - 3) + (index - 2)
}
})
} else {
showPagerArr[1] = '...';
for (let i = 0; i < pagerCount - 3; i++) {
showPagerArr[i + 2] = num + i
}
showPagerArr[pagerCount - 2] = '...'
}
}
this.pageNumber = showPagerArr
},
clickPrev() { clickPrev() {
if (Number(this.currentIndex) === 1) return; if (Number(this.currentIndex) === 1) return;
this.currentIndex -= 1 this.currentIndex -= 1
...@@ -159,7 +267,23 @@ ...@@ -159,7 +267,23 @@
this.currentIndex += 1 this.currentIndex += 1
this.change('next') this.change('next')
}, },
handleClick(item, index) {
let pageNo = Number(item)
const idx = this.pagerCount === 6 ? 4 : 6;
if (isNaN(pageNo)) {
if (index === 1) {
pageNo = this.pageNumber[index + 1] - (this.pagerCount - 4)
} else if (index === idx) {
pageNo = this.pageNumber[index - 1] + 1
}
} else {
if (Number(this.currentIndex) === pageNo) return;
}
this.currentIndex = pageNo;
this.change('pageNumber')
},
change(e) { change(e) {
this.getPageNumber()
this.$emit('change', { this.$emit('change', {
type: e, type: e,
current: this.currentIndex current: this.currentIndex
...@@ -198,7 +322,7 @@ ...@@ -198,7 +322,7 @@
/* #endif */ /* #endif */
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
border-width: 1rpx; border-width: 1px;
/* #endif */ /* #endif */
border-style: solid; border-style: solid;
flex-shrink: 0; flex-shrink: 0;
...@@ -225,7 +349,12 @@ ...@@ -225,7 +349,12 @@
.fui-pagination__active-color { .fui-pagination__active-color {
color: var(--fui-color-primary, #465CFF) !important; color: var(--fui-color-primary, #465CFF) !important;
} }
.fui-pagination__color{
.fui-pagination__bg {
background: var(--fui-color-primary, #465CFF) !important;
}
.fui-pagination__color {
color: var(--fui-color-section, #333) !important; color: var(--fui-color-section, #333) !important;
} }
...@@ -237,4 +366,37 @@ ...@@ -237,4 +366,37 @@
cursor: not-allowed; cursor: not-allowed;
/* #endif */ /* #endif */
} }
.fui-page__number {
/* #ifndef APP-NVUE */
display: flex;
box-sizing: border-box;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.fui-page__num-item {
/* #ifndef APP-NVUE */
min-width: 60rpx;
display: flex;
transform: translateZ(0);
/* #endif */
height: 60rpx;
align-items: center;
justify-content: center;
margin: 0 4rpx;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.fui-page__num-item:active {
opacity: .5;
}
.fui-page__num-text {
font-size: 24rpx;
}
</style> </style>
src/components/firstui/fui-picker/fui-picker.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<view class="fui-picker__wrap" @touchend="stop"> <view class="fui-picker__wrap" @touchend="stop">
<view class="fui-picker__mask" @touchmove.stop.prevent="stop" :class="{'fui-picker__mask-show':isShow}" <view class="fui-picker__mask" @touchmove.stop.prevent="stop" :class="{'fui-picker__mask-show':isShow}"
:style="maskStyl" ref="fui_pkm_ani" @tap.stop="maskClick"></view> :style="maskStyl" ref="fui_pkm_ani" @tap.stop="maskClick"></view>
<view class="fui-picker__content" <view :key="theme" class="fui-picker__content"
:class="{'fui-picker__content-dark':theme==='dark','fui-picker__content-show':isShow,'fui-picker__radius':radius}" :class="{'fui-picker__content-dark':theme==='dark','fui-picker__content-show':isShow,'fui-picker__radius':radius}"
:style="{zIndex:zIndex}" ref="fui_pk_ani"> :style="{zIndex:zIndex}" ref="fui_pk_ani">
<view class="fui-picker__header" <view class="fui-picker__header"
...@@ -92,10 +92,12 @@ ...@@ -92,10 +92,12 @@
<!-- #endif --> <!-- #endif -->
<!-- #ifndef MP-ALIPAY --> <!-- #ifndef MP-ALIPAY -->
<picker-view :mask-style="theme==='dark'?darkStyle:''" <picker-view :mask-top-style="theme==='dark'?darkStyle:''"
:mask-bottom-style="theme==='dark'?darkBottomStyle:''" :mask-style="theme==='dark'?darkStyle:''"
:indicator-style="theme==='dark'?indicatorStyl:'height: 44px;border-top-width:0.5px;border-bottom-width:0.5px;'" :indicator-style="theme==='dark'?indicatorStyl:'height: 44px;border-top-width:0.5px;border-bottom-width:0.5px;'"
:indicator-class="theme==='dark'?'fui-picker__indicator':''" class="fui-picker__view" :indicator-class="theme==='dark'?'fui-picker__indicator':''" class="fui-picker__view"
:style="{height:height+'rpx'}" :value="vals" @change="pickerChange"> :style="{height:height+'rpx'}" :key="theme+layer" :value="vals" immediate-change
@change="pickerChange">
<picker-view-column> <picker-view-column>
<text :style="contentStyl" class="fui-picker__text" <text :style="contentStyl" class="fui-picker__text"
:class="{'fui-picker__color-dark':theme==='dark'}" v-for="(item,index) in firstArr" :class="{'fui-picker__color-dark':theme==='dark'}" v-for="(item,index) in firstArr"
...@@ -228,6 +230,10 @@ ...@@ -228,6 +230,10 @@
type: [Number, String], type: [Number, String],
default: 1001 default: 1001
}, },
isClose: {
type: Boolean,
default: true
},
//自定义参数 //自定义参数
param: { param: {
type: [Number, String], type: [Number, String],
...@@ -259,8 +265,15 @@ ...@@ -259,8 +265,15 @@
}, },
confrimStyl() { confrimStyl() {
let styles = `font-size:${this.btnSize}rpx;` let styles = `font-size:${this.btnSize}rpx;`
if (this.confirmColor) { let color = this.confirmColor;
styles += `color:${this.confirmColor};` // #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
if (color) {
styles += `color:${color};`
} }
return styles return styles
}, },
...@@ -294,35 +307,43 @@ ...@@ -294,35 +307,43 @@
} }
}, },
watch: { watch: {
layer(val) {
this.reset();
},
value(val) { value(val) {
if (val) { if (val) {
this.setDefaultOptions() this.setDefaultOptions()
} }
}, },
options(val) { options(val) {
this.reset();
setTimeout(() => { setTimeout(() => {
this.initialize() this.initialize()
}, 50) }, 50)
}, },
fields(val) { fields(val) {
this.reset();
setTimeout(() => { setTimeout(() => {
this.initialize() this.initialize()
}, 50) }, 50)
}, },
// #ifdef APP-NVUE
isShow: { isShow: {
handler(newVal) { handler(newVal) {
if (newVal) { if (newVal) {
// #ifdef APP-NVUE
this.openPicker(); this.openPicker();
// #endif
// #ifndef APP-NVUE
this.isInitShow = true;
// #endif
} else { } else {
this.close(); // #ifdef APP-NVUE
this.closePicker();
// #endif
} }
}, },
immediate: true immediate: true
}, },
// #endif
show(val) { show(val) {
this.isShow = val; this.isShow = val;
} }
...@@ -333,20 +354,23 @@ ...@@ -333,20 +354,23 @@
secondArr: [], secondArr: [],
thirdArr: [], thirdArr: [],
fourthArr: [], fourthArr: [],
vals: [0], vals: [],
// #ifndef APP-NVUE // #ifndef APP-NVUE
darkStyle: 'background-image: -webkit-linear-gradient(top, rgba(35, 35, 35, .95), rgba(35, 35, 35, .6)), -webkit-linear-gradient(bottom, rgba(35, 35, 35, .95), rgba(35, 35, 35, .6));', darkStyle: 'background-image: -webkit-linear-gradient(top, rgba(35, 35, 35, .95), rgba(35, 35, 35, .6)), -webkit-linear-gradient(bottom, rgba(35, 35, 35, .95), rgba(35, 35, 35, .6));',
indicatorStyl: 'border-color: #333;height: 44px;', indicatorStyl: 'border-color: #333;height: 44px;',
darkBottomStyle: '',
// #endif // #endif
// #ifdef APP-NVUE // #ifdef APP-NVUE
darkStyle: '', darkStyle: 'background: linear-gradient(to bottom, rgba(35, 35, 35, .95), rgba(35, 35, 35, .6));',
indicatorStyl: 'height: 44px;border-top-width:0.5px;border-bottom-width:0.5px', darkBottomStyle: 'background: linear-gradient(to top, rgba(35, 35, 35, .95), rgba(35, 35, 35, .6));',
indicatorStyl: 'border-color: #333;height: 44px;border-top-width:0.5px;border-bottom-width:0.5px',
// #endif // #endif
tKey: 'text', tKey: 'text',
vKey: 'value', vKey: 'value',
cKey: 'children', cKey: 'children',
isEnd: true, isEnd: true,
isShow: false isShow: false,
isInitShow: false
}; };
}, },
methods: { methods: {
...@@ -505,10 +529,14 @@ ...@@ -505,10 +529,14 @@
open() { open() {
this.isShow = true; this.isShow = true;
}, },
//手动关闭弹框
close() {
this.isShow = false;
},
setDefaultOptions() { setDefaultOptions() {
let values = this.value; let values = this.value;
if (this.layer == 1 && !Array.isArray(values)) { if (this.layer == 1 && !Array.isArray(values)) {
values = [values] values = values ? [values] : []
} }
let vals = []; let vals = [];
let txtArr = this.firstArr; let txtArr = this.firstArr;
...@@ -536,13 +564,19 @@ ...@@ -536,13 +564,19 @@
vals.push(this.fourthArr.indexOf(values[i])) vals.push(this.fourthArr.indexOf(values[i]))
} }
} }
this.vals = []
this.$nextTick(() => { this.$nextTick(() => {
setTimeout(() => { setTimeout(() => {
this.vals = vals; this.vals = vals;
}, 20) }, 150)
}) })
} else { } else {
this.vals = []
this.$nextTick(() => {
setTimeout(() => {
this.reset() this.reset()
}, 150)
})
} }
}, },
setOneLayers(value) { setOneLayers(value) {
...@@ -674,12 +708,14 @@ ...@@ -674,12 +708,14 @@
e.stopPropagation(); e.stopPropagation();
// #endif // #endif
setTimeout(() => { setTimeout(() => {
if (this.isClose) {
this.isShow = false; this.isShow = false;
}
this.waitForTrigger() this.waitForTrigger()
}, 50) }, 50)
}, },
pickerChange(e) { pickerChange(e) {
if (!this.isShow) return; if (!this.isInitShow) return;
let value = e.detail.value; let value = e.detail.value;
if (this.linkage) { if (this.linkage) {
if (this.layer == 1) { if (this.layer == 1) {
...@@ -705,7 +741,7 @@ ...@@ -705,7 +741,7 @@
this._animation(true); this._animation(true);
}, 20); }, 20);
}, },
close() { closePicker() {
this._animation(false); this._animation(false);
}, },
_transtion(ref, styles, duration, callback) { _transtion(ref, styles, duration, callback) {
...@@ -796,20 +832,17 @@ ...@@ -796,20 +832,17 @@
transition-property: opacity; transition-property: opacity;
transition-duration: .25s; transition-duration: .25s;
transform: translateY(100%); transform: translateY(100%);
opacity: 0; /* opacity: 0; */
/* #endif */ /* #endif */
transform-origin: center center; transform-origin: center center;
flex-direction: column; flex-direction: column;
background: #fff; background: #fff;
} }
/* #ifndef APP-NVUE */
.fui-picker__content-dark { .fui-picker__content-dark {
background: #222; background: #222;
} }
/* #endif */
.fui-picker__content-show { .fui-picker__content-show {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
...@@ -935,16 +968,12 @@ ...@@ -935,16 +968,12 @@
color: #D1D1D1; color: #D1D1D1;
} }
.fui-pk__sure-color {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
.fui-pk__sure-color {
color: var(--fui-color-primary, #465CFF) !important; color: var(--fui-color-primary, #465CFF) !important;
/* #endif */
/* #ifdef APP-NVUE */
color: #465CFF;
/* #endif */
} }
/* #endif */
.fui-picker__view { .fui-picker__view {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
width: 100%; width: 100%;
...@@ -978,13 +1007,7 @@ ...@@ -978,13 +1007,7 @@
.fui-picker__color-dark { .fui-picker__color-dark {
/* #ifndef APP-NVUE */
color: #D1D1D1; color: #D1D1D1;
/* #endif */
/* #ifdef APP-NVUE */
color: #333;
/* #endif */
} }
......
src/components/firstui/fui-poster/fui-poster.vue
<template> <template>
<!-- #ifndef MP-QQ --> <!-- #ifndef MP-QQ -->
<canvas :style="{ width: w + 'px', height: h + 'px' }" :canvas-id="canvasId" :id="canvasId" <canvas :style="{ width: w + 'px', height: h + 'px' }" :canvas-id="canvasId" :id="canvasId"
class="fui-poster__canvas"></canvas> class="fui-poster__canvas" v-if="canvasId"></canvas>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef MP-QQ --> <!-- #ifdef MP-QQ -->
...@@ -69,10 +69,12 @@ ...@@ -69,10 +69,12 @@
this.h = this._toPx(this.height) this.h = this._toPx(this.height)
}, },
mounted() { mounted() {
poster.create(Number(this.pixelRatio), this.canvasId, this) this.$nextTick(()=>{
setTimeout(() => { setTimeout(() => {
poster.create(Number(this.pixelRatio), this.canvasId, this)
this.$emit('ready') this.$emit('ready')
}, 50) }, 50)
})
}, },
methods: { methods: {
_toPx(rpx) { _toPx(rpx) {
......
src/components/firstui/fui-poster/index.js
...@@ -239,6 +239,7 @@ const poster = { ...@@ -239,6 +239,7 @@ const poster = {
context.save(); context.save();
context.setGlobalAlpha(opacity); context.setGlobalAlpha(opacity);
if (gradientColor) { if (gradientColor) {
// #ifndef MP-KUAISHOU
let grd = null; let grd = null;
if (gradientType == 1) { if (gradientType == 1) {
//从上到下 //从上到下
...@@ -251,6 +252,11 @@ const poster = { ...@@ -251,6 +252,11 @@ const poster = {
grd.addColorStop(1, gradientColor) grd.addColorStop(1, gradientColor)
// Fill with gradient // Fill with gradient
context.setFillStyle(grd); context.setFillStyle(grd);
// #endif
// #ifdef MP-KUAISHOU
context.setFillStyle(backgroundColor);
// #endif
} else { } else {
context.setFillStyle(backgroundColor); context.setFillStyle(backgroundColor);
} }
......
src/components/firstui/fui-progress/fui-progress.vue
...@@ -4,12 +4,12 @@ ...@@ -4,12 +4,12 @@
:style="{ height: height + 'rpx', borderRadius: radius+'rpx', background: background }"> :style="{ height: height + 'rpx', borderRadius: radius+'rpx', background: background }">
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
<view class="fui-progress__bar" :class="{'fui-progress__active-color':!activeColor}" <view class="fui-progress__bar" :class="{'fui-progress__active-color':!activeColor}"
:style="{background: activeColor ,transform:`translate3d(-${translateX},0,0)`,transitionDuration:`${time}s`}"> :style="{background: getActiveColor ,transform:`translate3d(-${translateX},0,0)`,transitionDuration:`${time}s`}">
</view> </view>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef APP-NVUE --> <!-- #ifdef APP-NVUE -->
<view ref="fui_pg_ani" class="fui-progress__bar" :style="{background: activeColor}"></view> <view ref="fui_pg_ani" class="fui-progress__bar" :style="{background: getActiveColor}"></view>
<!-- #endif --> <!-- #endif -->
</view> </view>
<text class="fui-progress__percent" <text class="fui-progress__percent"
...@@ -66,12 +66,7 @@ ...@@ -66,12 +66,7 @@
//已选进度条颜色,可渐变 //已选进度条颜色,可渐变
activeColor: { activeColor: {
type: String, type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: '' default: ''
// #endif
}, },
//进度增加1%所需毫秒数 //进度增加1%所需毫秒数
duration: { duration: {
...@@ -87,6 +82,18 @@ ...@@ -87,6 +82,18 @@
mounted() { mounted() {
this.darwProgress(); this.darwProgress();
}, },
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() { data() {
return { return {
percentage: 0, percentage: 0,
......
src/components/firstui/fui-puzzle-verify/fui-puzzle-verify.vue
...@@ -41,8 +41,8 @@ ...@@ -41,8 +41,8 @@
</view> </view>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef APP-NVUE --> <!-- #ifdef APP-NVUE -->
<view ref="sliderRef" class="fui-sc__slider" :class="{'fui-sc__slider-bg':!sliderBgColor}" <view ref="sliderRef" class="fui-sc__slider"
:style="{width:(sliderH * 2)+'px',height:sliderH+'px',borderRadius:sliderH+'px',background:sliderBgColor}" :style="{width:(sliderH * 2)+'px',height:sliderH+'px',borderRadius:sliderH+'px',background:getSliderBgColor}"
@touchstart="touchstart" @horizontalpan="touchmove" @touchend="touchend"> @touchstart="touchstart" @horizontalpan="touchmove" @touchend="touchend">
<fui-icon name="slide" :size="56" :color="slideColor"></fui-icon> <fui-icon name="slide" :size="56" :color="slideColor"></fui-icon>
</view> </view>
...@@ -131,18 +131,10 @@ ...@@ -131,18 +131,10 @@
type: String, type: String,
default: '#B2B2B2' default: '#B2B2B2'
}, },
// #ifdef APP-NVUE
sliderBgColor: {
type: String,
default: '#465CFF'
},
// #endif
// #ifndef APP-NVUE
sliderBgColor: { sliderBgColor: {
type: String, type: String,
default: '' default: ''
}, },
// #endif
slideColor: { slideColor: {
type: String, type: String,
default: '#FFFFFF' default: '#FFFFFF'
...@@ -168,6 +160,18 @@ ...@@ -168,6 +160,18 @@
this.reset() this.reset()
} }
}, },
computed: {
getSliderBgColor() {
let color = this.sliderBgColor
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color
}
},
data() { data() {
let sys = uni.getSystemInfoSync() let sys = uni.getSystemInfoSync()
let isNvue = false let isNvue = false
...@@ -397,9 +401,21 @@ ...@@ -397,9 +401,21 @@
background: var(--fui-color-primary, #465CFF) !important; background: var(--fui-color-primary, #465CFF) !important;
} }
/* #endif */
/* #ifndef APP-NVUE */
.fui-sc__reset-ani { .fui-sc__reset-ani {
transition: transform 0.2s; transition: transform 0.2s;
} }
/* #endif */ /* #endif */
/* fix：Vue3下动画问题，app端直接移除class效果未消失，导致卡顿 */
/* #ifdef VUE3 */
.fui-pv__un-ani {
transition: transform 0s;
}
/* #endif */
</style> </style>
src/components/firstui/fui-puzzle-verify/index.wxs
...@@ -7,7 +7,7 @@ function isPC() { ...@@ -7,7 +7,7 @@ function isPC() {
var userAgentInfo = navigator.userAgent; var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
var flag = true; var flag = true;
for (var v = 0; v < Agents.length - 1; v++) { for (var v = 0; v< Agents.length - 1; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) { if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false; flag = false;
break; break;
...@@ -36,11 +36,15 @@ function styleChange(left, ins) { ...@@ -36,11 +36,15 @@ function styleChange(left, ins) {
if (!slider || !slot) return; if (!slider || !slot) return;
if (left == 0) { if (left == 0) {
slider.removeClass('fui-pv__un-ani')
slot.removeClass('fui-pv__un-ani')
slider.addClass('fui-sc__reset-ani') slider.addClass('fui-sc__reset-ani')
slot.addClass('fui-sc__reset-ani') slot.addClass('fui-sc__reset-ani')
} else { } else {
slider.removeClass('fui-sc__reset-ani') slider.removeClass('fui-sc__reset-ani')
slot.removeClass('fui-sc__reset-ani') slot.removeClass('fui-sc__reset-ani')
slider.addClass('fui-pv__un-ani')
slot.addClass('fui-pv__un-ani')
} }
slider.setStyle({ slider.setStyle({
transform: 'translate3d(' + left + 'px,0,0)' transform: 'translate3d(' + left + 'px,0,0)'
......
src/components/firstui/fui-qrcode/fui-qrcode.vue
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<!-- #ifndef APP-NVUE || MP-QQ --> <!-- #ifndef APP-NVUE || MP-QQ -->
<canvas :canvas-id="canvasId" :id="canvasId" :style="{width:w+'px',height:h+'px'}" @longtap="longtap" <canvas :canvas-id="canvasId" :id="canvasId" :style="{width:w+'px',height:h+'px'}" @longtap="longtap"
@touchstart="touchstart" @touchend="touchend"></canvas> @touchstart="touchstart" @touchend="touchend" v-if="canvasId"></canvas>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef MP-QQ --> <!-- #ifdef MP-QQ -->
...@@ -113,12 +113,14 @@ ...@@ -113,12 +113,14 @@
this.ctx = null; this.ctx = null;
}, },
mounted() { mounted() {
this.$nextTick(() => {
setTimeout(() => { setTimeout(() => {
this.draw() this.draw()
this.$emit('ready', { this.$emit('ready', {
canvasId: this.canvasId canvasId: this.canvasId
}) })
}, 50) }, 50)
})
}, },
// #ifndef VUE3 // #ifndef VUE3
beforeDestroy() { beforeDestroy() {
......
src/components/firstui/fui-radio-group/fui-radio-group.vue
<template> <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 -->
<radio-group :name="name"> <radio-group :name="name">
<slot></slot> <slot></slot>
</radio-group> </radio-group>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ --> <!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ -->
<fui-form-field :name="name" :value="val"> <fui-form-field :name="name" v-model="val">
<slot></slot> <slot></slot>
</fui-form-field> </fui-form-field>
<!-- #endif --> <!-- #endif -->
...@@ -16,10 +16,11 @@ ...@@ -16,10 +16,11 @@
export default { export default {
name: "fui-radio-group", name: "fui-radio-group",
emits: ['change', 'input', 'update:modelValue'], emits: ['change', 'input', 'update:modelValue'],
// #ifndef VUE3
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
behaviors: ['wx://form-field-group'], behaviors: ['wx://form-field-group'],
// #endif // #endif
// #ifdef MP-BAIDU || MP-QQ || H5
behaviors: ['uni://form-field'],
// #endif // #endif
props: { props: {
name: { name: {
...@@ -79,7 +80,7 @@ ...@@ -79,7 +80,7 @@
} }
this.radioChange(e) this.radioChange(e)
}, },
modelChange(val){ modelChange(val) {
this.childrens.forEach(item => { this.childrens.forEach(item => {
if (item.value === val) { if (item.value === val) {
item.val = true; item.val = true;
......
src/components/firstui/fui-radio/fui-radio.vue
<template> <template>
<view class="fui-radio__input" <view class="fui-radio__input"
:class="{'fui-radio__disabled':disabled,'fui-radio__color':!color && val && !isCheckMark}" :class="{'fui-radio__disabled':disabled,'fui-radio__color':!getColor && val && !isCheckMark}"
:style="{backgroundColor:getBackgroundColor(val,isCheckMark),borderColor:getBorderColor(val,isCheckMark),zoom:isNvue?1:scaleRatio,transform:`scale(${isNvue?scaleRatio:1})`,borderRadius:borderRadius}" :style="{backgroundColor:getBackgroundColor(val,isCheckMark),borderColor:getBorderColor(val,isCheckMark),zoom:isNvue?1:scaleRatio,transform:`scale(${isNvue?scaleRatio:1})`,borderRadius:borderRadius}"
@tap.stop="radioChange"> @tap.stop="radioChange">
<view class="fui-check__mark" :style="{borderBottomColor:checkMarkColor,borderRightColor:checkMarkColor}" <view class="fui-check__mark" :style="{borderBottomColor:checkMarkColor,borderRightColor:checkMarkColor}"
v-if="val"></view> v-if="val"></view>
<radio class="fui-radio__hidden" style="opacity: 0;position: absolute;" :color="color" :disabled="disabled" :value="value" :checked="val"></radio> <radio class="fui-radio__hidden" style="opacity: 0;position: absolute;" :color="getColor" :disabled="disabled" :value="value" :checked="val"></radio>
</view> </view>
</template> </template>
...@@ -32,12 +32,7 @@ ...@@ -32,12 +32,7 @@
//radio选中背景颜色 //radio选中背景颜色
color: { color: {
type: String, type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: '' default: ''
// #endif
}, },
//radio未选中时边框颜色 //radio未选中时边框颜色
borderColor: { borderColor: {
...@@ -97,6 +92,18 @@ ...@@ -97,6 +92,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() { data() {
let isNvue = false; let isNvue = false;
// #ifdef APP-NVUE // #ifdef APP-NVUE
...@@ -109,14 +116,14 @@ ...@@ -109,14 +116,14 @@
}, },
methods: { methods: {
getBackgroundColor(val, isCheckMark) { getBackgroundColor(val, isCheckMark) {
let color = val ? this.color : '#fff' let color = val ? this.getColor : '#fff'
if (isCheckMark) { if (isCheckMark) {
color = 'transparent' color = 'transparent'
} }
return color; return color;
}, },
getBorderColor(val, isCheckMark) { getBorderColor(val, isCheckMark) {
let color = val ? this.color : this.borderColor; let color = val ? this.getColor : this.borderColor;
if (isCheckMark) { if (isCheckMark) {
color = 'transparent' color = 'transparent'
} }
......
src/components/firstui/fui-rate/fui-rate.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
v-for="(item,index) in stars" :key="index" @touchstart.stop="touchstart" @touchmove.stop="touchmove" v-for="(item,index) in stars" :key="index" @touchstart.stop="touchstart" @touchmove.stop="touchmove"
@mousedown.stop="mousedown" @mousemove.stop="mousemove" @mouseup="mouseup"> @mousedown.stop="mousedown" @mousemove.stop="mousemove" @mouseup="mouseup">
<fui-icon :disabled="disabled" :name="getName(index,intScore,decimalScore)" :size="size" <fui-icon :disabled="disabled" :name="getName(index,intScore,decimalScore)" :size="size"
:color="index < intScore || (index == intScore && decimalScore > 0) ? activeColor : color"></fui-icon> :color="index < intScore || (index == intScore && decimalScore > 0) ? getActiveColor : color"></fui-icon>
</view> </view>
</view> </view>
</template> </template>
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
}, },
activeColor: { activeColor: {
type: String, type: String,
default: "#FFB703" default: ""
}, },
disabled: { disabled: {
type: Boolean, type: Boolean,
...@@ -75,10 +75,21 @@ ...@@ -75,10 +75,21 @@
this.initRateScore(newValue) this.initRateScore(newValue)
} }
}, },
computed: {
getActiveColor() {
let color = this.activeColor;
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.warning) || '#FFB703';
}
return color;
}
},
data() { data() {
return { return {
stars: [], stars: [],
pageX: 0, pageX: 0,
parentWidth: 0,
intScore: 0, intScore: 0,
decimalScore: 0, decimalScore: 0,
isPC: false, isPC: false,
...@@ -88,6 +99,7 @@ ...@@ -88,6 +99,7 @@
created() { created() {
this.initData(this.max) this.initData(this.max)
this.initRateScore(this.score) this.initRateScore(this.score)
this.drawer = this.getParent()
}, },
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
...@@ -141,6 +153,32 @@ ...@@ -141,6 +153,32 @@
return flag; return flag;
}, },
// #endif // #endif
_setWidth(width) {
const sys = uni.getSystemInfoSync()
if (this.pageX < 0) {
this.parentWidth = width
} else if (this.pageX > sys.windowWidth) {
this.parentWidth = -width
}
},
setParentWidth(width) {
setTimeout(() => {
this._setWidth(width)
}, 100)
},
initParentWidth() {
if (this.drawer) {
const sys = uni.getSystemInfoSync()
let pWidth = this.drawer.width
if (!pWidth) {
this.drawer._getSize((width) => {
this._setWidth(width)
})
} else {
this._setWidth(pWidth)
}
}
},
_getSize() { _getSize() {
// #ifndef APP-NVUE // #ifndef APP-NVUE
uni.createSelectorQuery() uni.createSelectorQuery()
...@@ -152,6 +190,7 @@ ...@@ -152,6 +190,7 @@
.exec(ret => { .exec(ret => {
if (ret) { if (ret) {
this.pageX = ret[0].left || 0 this.pageX = ret[0].left || 0
this.initParentWidth()
} }
}) })
// #endif // #endif
...@@ -160,12 +199,13 @@ ...@@ -160,12 +199,13 @@
const size = ret.size const size = ret.size
if (size) { if (size) {
this.pageX = size.left this.pageX = size.left
this.initParentWidth()
} }
}) })
// #endif // #endif
}, },
_getRateScore(clientX) { _getRateScore(clientX) {
const distance = clientX - this.pageX; const distance = clientX - (this.pageX + this.parentWidth);
let score = 0; let score = 0;
if (distance > 0) { if (distance > 0) {
let width = uni.upx2px((Number(this.size) + Number(this.spacing))); let width = uni.upx2px((Number(this.size) + Number(this.spacing)));
...@@ -237,6 +277,16 @@ ...@@ -237,6 +277,16 @@
if (!this.isPC || this.disabled || !this.touchable) return if (!this.isPC || this.disabled || !this.touchable) return
this.rated = false this.rated = false
// #endif // #endif
},
getParent(name = 'fui-drawer') {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== name) {
parent = parent.$parent;
if (!parent) return false;
parentName = parent.$options.name;
}
return parent;
} }
} }
} }
......
src/components/firstui/fui-result/fui-result.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<view class="fui-result__wrap" :style="{paddingTop:paddingTop+'rpx'}" v-if="ibColor"> <view class="fui-result__wrap" :style="{paddingTop:paddingTop+'rpx'}" v-if="ibColor">
<view class="fui-result__icon-box"> <view class="fui-result__icon-box">
<view class="fui-result__icon" <view class="fui-result__icon"
:style="{background:background,zoom:isNvue?1:scaleRatio,transform:`scale(${isNvue?scaleRatio:1})`}" :style="{background:background || getTypeColor,zoom:isNvue?1:scaleRatio,transform:`scale(${isNvue?scaleRatio:1})`}"
:class="[background?'':`fui-result__bg-${type}`]" v-if="show"> :class="[background?'':`fui-result__bg-${type}`]" v-if="show">
<view :class="['fui-result__ib-'+type]" :style="ibColor"></view> <view :class="['fui-result__ib-'+type]" :style="ibColor"></view>
<view :class="['fui-result__ia-'+type]" :style="{background:iconColor}" <view :class="['fui-result__ia-'+type]" :style="{background:iconColor}"
...@@ -100,6 +100,21 @@ ...@@ -100,6 +100,21 @@
style = `background:${this.iconColor}`; style = `background:${this.iconColor}`;
} }
return style; return style;
},
getTypeColor() {
let color = '';
// #ifdef APP-NVUE
const app = uni && uni.$fui && uni.$fui.color
let colors = {
waiting: (app && app.primary) || '#465CFF',
success: (app && app.success) || '#09BE4F',
warning: (app && app.warning) || '#FFB703',
fail: (app && app.danger) || '#FF2B2B'
}
color = colors[this.type || 'waiting']
// #endif
return color
} }
} }
} }
...@@ -138,42 +153,23 @@ ...@@ -138,42 +153,23 @@
overflow: hidden; overflow: hidden;
} }
.fui-result__bg-success {
/* #ifdef APP-NVUE */
background-color: #09BE4F !important;
/* #endif */
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
.fui-result__bg-success {
background-color: var(--fui-color-success, #09BE4F) !important; background-color: var(--fui-color-success, #09BE4F) !important;
/* #endif */
} }
.fui-result__bg-warning { .fui-result__bg-warning {
/* #ifdef APP-NVUE */
background-color: #FFB703 !important;
/* #endif */
/* #ifndef APP-NVUE */
background-color: var(--fui-color-warning, #FFB703) !important; background-color: var(--fui-color-warning, #FFB703) !important;
/* #endif */
} }
.fui-result__bg-fail { .fui-result__bg-fail {
/* #ifdef APP-NVUE */
background-color: #FF2B2B !important;
/* #endif */
/* #ifndef APP-NVUE */
background-color: var(--fui-color-danger, #FF2B2B) !important; background-color: var(--fui-color-danger, #FF2B2B) !important;
/* #endif */
} }
.fui-result__bg-waiting { .fui-result__bg-waiting {
/* #ifdef APP-NVUE */
background-color: #465CFF !important;
/* #endif */
/* #ifndef APP-NVUE */
background-color: var(--fui-color-primary, #465CFF) !important; background-color: var(--fui-color-primary, #465CFF) !important;
/* #endif */
} }
/* #endif */
.fui-result__ib-success { .fui-result__ib-success {
......
src/components/firstui/fui-rotate-verify/fui-rotate-verify.vue
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
<!-- #endif --> <!-- #endif -->
<view class="fui-rv__result" v-if="showRes || isPass" <view class="fui-rv__result" v-if="showRes || isPass"
:style="{ width: imgW + 'px', height:imgW + 'px',borderRadius:isNvue?(imgW+'px'):'50%' }"> :style="{ width: imgW + 'px', height:imgW + 'px',borderRadius:isNvue?(imgW+'px'):'50%' }">
<fui-icon :name="isPass?'check':'close'" :size="96" :color="isPass?passColor:failColor"></fui-icon> <fui-icon :name="isPass?'check':'close'" :size="96" :color="getColor"></fui-icon>
</view> </view>
</view> </view>
<!-- #ifdef APP-VUE || MP-WEIXIN || H5 --> <!-- #ifdef APP-VUE || MP-WEIXIN || H5 -->
...@@ -140,11 +140,11 @@ ...@@ -140,11 +140,11 @@
}, },
passColor: { passColor: {
type: String, type: String,
default: '#09BE4F' default: ''
}, },
failColor: { failColor: {
type: String, type: String,
default: '#FF2B2B' default: ''
}, },
zIndex: { zIndex: {
type: [Number, String], type: [Number, String],
...@@ -168,6 +168,14 @@ ...@@ -168,6 +168,14 @@
this.sliderWidth = this.getPx((Number(val) - 64)) this.sliderWidth = this.getPx((Number(val) - 64))
} }
}, },
computed: {
getColor() {
const app = uni && uni.$fui && uni.$fui.color;
let passColor = this.passColor || (app && app.success) || '#09BE4F'
let failColor = this.failColor || (app && app.danger) || '#FF2B2B'
return this.isPass ? passColor : failColor
}
},
data() { data() {
let isNvue = false let isNvue = false
// #ifdef APP-NVUE // #ifdef APP-NVUE
...@@ -343,11 +351,24 @@ ...@@ -343,11 +351,24 @@
/* #endif */ /* #endif */
} }
/* #endif */
/* #ifndef APP-NVUE */
.fui-rv__rest-ani { .fui-rv__rest-ani {
transition: transform 0.2s; transition: transform 0.2s;
} }
/* #endif */ /* #endif */
/* fix：vue3下动画问题，app端直接移除class效果未消失，导致卡顿 */
/* #ifdef VUE3 */
.fui-rv__un-ani {
transition: transform 0s;
}
/* #endif */
.fui-rv__result { .fui-rv__result {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
......
src/components/firstui/fui-rotate-verify/index.wxs
...@@ -6,7 +6,7 @@ function isPC() { ...@@ -6,7 +6,7 @@ function isPC() {
var userAgentInfo = navigator.userAgent; var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
var flag = true; var flag = true;
for (var v = 0; v < Agents.length - 1; v++) { for (var v = 0; v< Agents.length - 1; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) { if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false; flag = false;
break; break;
...@@ -40,11 +40,15 @@ function styleChange(left, deg, ins) { ...@@ -40,11 +40,15 @@ function styleChange(left, deg, ins) {
var image = ins.selectComponent('.fui-rv__image') var image = ins.selectComponent('.fui-rv__image')
if (!image || !block) return; if (!image || !block) return;
if (left == 0 && deg == 0) { if (left == 0 && deg == 0) {
block.removeClass('fui-rv__un-ani')
image.removeClass('fui-rv__un-ani')
block.addClass('fui-rv__rest-ani') block.addClass('fui-rv__rest-ani')
image.addClass('fui-rv__rest-ani') image.addClass('fui-rv__rest-ani')
} else { } else {
block.removeClass('fui-rv__rest-ani') block.removeClass('fui-rv__rest-ani')
image.removeClass('fui-rv__rest-ani') image.removeClass('fui-rv__rest-ani')
block.addClass('fui-rv__un-ani')
image.addClass('fui-rv__un-ani')
} }
block.setStyle({ block.setStyle({
transform: 'translate3d(' + left + 'px,0,0)' transform: 'translate3d(' + left + 'px,0,0)'
......
src/components/firstui/fui-safe-area/fui-safe-area.vue
...@@ -30,8 +30,8 @@ ...@@ -30,8 +30,8 @@
let iphonex = false; let iphonex = false;
let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax', let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax',
'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini', 'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini',
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini', 'iphone14plus', 'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini',
'iphone14pro', 'iphone14promax', 'iphone15', 'iphone15mini', 'iphone15plus', 'iphone14pro', 'iphone14promax', 'iphone15', 'iphone15mini',
'iphone15pro', 'iphone15promax' 'iphone15pro', 'iphone15promax'
] ]
const model = res.model.replace(/\s/g, "").toLowerCase() const model = res.model.replace(/\s/g, "").toLowerCase()
......
src/components/firstui/fui-search-bar/fui-search-bar.vue
<template> <template>
<view class="fui-search__bar-wrap" :class="{'fui-searchbar__wrap-bg':!background}" <view class="fui-search__bar-wrap" :class="{'fui-searchbar__wrap-bg':!background}"
:style="{ background: background, paddingTop: paddingTb+'rpx',paddingBottom:paddingTb+'rpx',paddingLeft:paddingLr+'rpx',paddingRight:paddingLr+'rpx' }"> :style="{ background: background, paddingTop: paddingTb+'rpx',paddingBottom:paddingTb+'rpx',paddingLeft:paddingLr+'rpx',paddingRight:paddingLr+'rpx' }">
<slot></slot>
<view class="fui-search__bar-form" :style="{height: height+'rpx'}"> <view class="fui-search__bar-form" :style="{height: height+'rpx'}">
<view class="fui-search__bar-box" <view class="fui-search__bar-box"
:class="{'fui-searchbar__focus-invalid':!isFocus && !isSearch && showLabel && !disabled}"
:style="{ height: height+'rpx', borderRadius: radius+'rpx', background: inputBackground }" :style="{ height: height+'rpx', borderRadius: radius+'rpx', background: inputBackground }"
v-if="showInput"> v-if="showInput">
<view class="fui-search__bar-icon"> <view class="fui-search__bar-icon">
<view class="fui-sbi__circle"></view> <view class="fui-sbi__circle"></view>
<view class="fui-sbi__line"></view> <view class="fui-sbi__line"></view>
</view> </view>
<input class="fui-search__bar-input" :class="{'fui-sb__input-color':!color}" <input ref="searchBarRef" class="fui-search__bar-input" :class="{'fui-sb__input-color':!color}"
:style="{color:color,height: height+'rpx'}" placeholder-class="fui-search__bar-pl" :style="{color:color,height: height+'rpx'}" placeholder-class="fui-search__bar-pl"
:placeholder="placeholder" :value="val" :focus="isFocus" :disabled="disabled" confirm-type="search" :placeholder="placeholder" :value="val" :focus="isFocus" :disabled="disabled" confirm-type="search"
@blur="inputBlur" @focus="inputFocus" @input="inputChange" @confirm="search" /> @blur="inputBlur" @focus="inputFocus" @input="inputChange" @confirm="search" />
...@@ -35,7 +37,7 @@ ...@@ -35,7 +37,7 @@
<text v-if="cancel && isSearch && !val && cancelText && cancelText!=='true'" class="fui-search__bar-btn" <text v-if="cancel && isSearch && !val && cancelText && cancelText!=='true'" class="fui-search__bar-btn"
:style="{ color: cancelColor }" @tap="hideInput">{{ cancelText }}</text> :style="{ color: cancelColor }" @tap="hideInput">{{ cancelText }}</text>
<text v-if="val && !disabled && isSearch && searchText && searchText!=='true'" class="fui-search__bar-btn" <text v-if="val && !disabled && isSearch && searchText && searchText!=='true'" class="fui-search__bar-btn"
:class="{'fui-sb__btn-color':!searchColor}" :style="{ color: searchColor }" :class="{'fui-sb__btn-color':!searchColor}" :style="{ color: getSearchColor }"
@tap="search">{{ searchText }}</text> @tap="search">{{ searchText }}</text>
</view> </view>
</template> </template>
...@@ -124,12 +126,7 @@ ...@@ -124,12 +126,7 @@
}, },
searchColor: { searchColor: {
type: String, type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: '' default: ''
// #endif
}, },
//是否显示搜索输入框 //是否显示搜索输入框
showInput: { showInput: {
...@@ -168,8 +165,35 @@ ...@@ -168,8 +165,35 @@
this.isFocus = val; this.isFocus = val;
}) })
}, },
// #ifdef APP-NVUE
isFocus(val) {
if (!this.$refs.searchBarRef) return;
this.$nextTick(() => {
setTimeout(() => {
if (val) {
this.$refs.searchBarRef.focus()
}
}, 50)
})
},
// #endif
value(val) { value(val) {
this.val = val; this.val = val;
if (this.focus || this.val.length > 0) {
this.isSearch = true;
}
}
},
computed: {
getSearchColor() {
let color = this.searchColor
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color
} }
}, },
data() { data() {
...@@ -177,6 +201,7 @@ ...@@ -177,6 +201,7 @@
isSearch: false, isSearch: false,
isFocus: false, isFocus: false,
val: '' val: ''
}; };
}, },
methods: { methods: {
...@@ -194,6 +219,10 @@ ...@@ -194,6 +219,10 @@
inputFocus(e) { inputFocus(e) {
if (!this.showLabel) { if (!this.showLabel) {
this.isSearch = true this.isSearch = true
} else {
// #ifdef H5 || MP-ALIPAY
this.onShowInput()
// #endif
} }
this.$emit('focus', e); this.$emit('focus', e);
}, },
...@@ -207,13 +236,14 @@ ...@@ -207,13 +236,14 @@
onShowInput() { onShowInput() {
if (!this.disabled && this.showInput) { if (!this.disabled && this.showInput) {
this.isSearch = true; this.isSearch = true;
this.$nextTick(() => {
setTimeout(() => { setTimeout(() => {
this.isFocus = true; this.isFocus = true;
}, 20) }, 50)
})
} }
this.$emit('click', {}); this.$emit('click', {});
}, },
hideInput() { hideInput() {
this.isSearch = false; this.isSearch = false;
this.isFocus = false; this.isFocus = false;
...@@ -230,6 +260,12 @@ ...@@ -230,6 +260,12 @@
value: this.val value: this.val
} }
}); });
},
reset() {
this.isSearch = false;
this.isFocus = false;
this.val = '';
uni.hideKeyboard()
} }
} }
}; };
...@@ -276,8 +312,20 @@ ...@@ -276,8 +312,20 @@
flex-direction: row; flex-direction: row;
z-index: 1; z-index: 1;
align-items: center; align-items: center;
/* #ifdef H5 || MP-ALIPAY */
opacity: 1;
/* #endif */
} }
/* #ifdef H5 || MP-ALIPAY */
.fui-searchbar__focus-invalid {
position: relative;
opacity: 0;
z-index: 3;
}
/* #endif */
.fui-search__bar-input { .fui-search__bar-input {
padding: 0 16rpx; padding: 0 16rpx;
border: 0; border: 0;
...@@ -388,13 +436,7 @@ ...@@ -388,13 +436,7 @@
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
transform: rotate(-45deg); transform: rotate(-45deg);
/* #ifdef APP-NVUE */
transform-origin: 8rpx 8rpx;
/* #endif */
/* #ifndef APP-NVUE */
transform-origin: 56% center; transform-origin: 56% center;
/* #endif */
} }
.fui-sbi__circle { .fui-sbi__circle {
......
src/components/firstui/fui-segmented-control/fui-segmented-control.vue
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
<view class="fui-segmented__control" :class="{'fui-segmented__disabled':disabled}" <view class="fui-segmented__control" :class="{'fui-segmented__disabled':disabled}"
:style="{marginTop:marginTop+'rpx',marginBottom:marginBottom+'rpx'}"> :style="{marginTop:marginTop+'rpx',marginBottom:marginBottom+'rpx'}">
<view class="fui-segmented__item" v-for="(item,index) in vals" :key="index" <view class="fui-segmented__item" v-for="(item,index) in vals" :key="index"
:style="{borderTopLeftRadius:index===0?radius+'rpx':'0',borderBottomLeftRadius:index===0?radius+'rpx':'0',borderTopRightRadius:index===values.length - 1?radius+'rpx':'0',borderBottomRightRadius:index===values.length - 1?radius+'rpx':'0',borderColor:type==='button'?color:'transparent',background:currentIndex===index && type==='button'?color:'transparent',height:height+'rpx'}" :style="{borderTopLeftRadius:index===0?radius+'rpx':'0',borderBottomLeftRadius:index===0?radius+'rpx':'0',borderTopRightRadius:index===values.length - 1?radius+'rpx':'0',borderBottomRightRadius:index===values.length - 1?radius+'rpx':'0',borderColor:type==='button'?getColor:'transparent',background:currentIndex===index && type==='button'?getColor:'transparent',height:height+'rpx'}"
:class="{'fui-segmented__first':index===0 && type==='button','fui-seg__item-bg':currentIndex===index && !color && type==='button','fui-seg__item-border':!color && type==='button','fui-segmented__item-border':type==='button'}" :class="{'fui-segmented__first':index===0 && type==='button','fui-seg__item-bg':currentIndex===index && !color && type==='button','fui-seg__item-border':!color && type==='button','fui-segmented__item-border':type==='button'}"
@click="handleClick(index)"> @click="handleClick(index)">
<text <text
:style="{fontSize:size+'rpx',color:currentIndex===index?activeColor:color,fontWeight:bold && currentIndex===index ?600:400}" :style="{fontSize:size+'rpx',color:currentIndex===index?activeColor:getColor,fontWeight:bold && currentIndex===index ?600:400}"
:class="{'fui-segmented__disabled':item.disabled,'fui-seg__text-color':!color && currentIndex!==index}">{{item.name}}</text> :class="{'fui-segmented__disabled':item.disabled,'fui-seg__text-color':!color && currentIndex!==index}">{{item.name}}</text>
<view class="fui-segmented__item-line" v-if="currentIndex===index && type==='text'" <view class="fui-segmented__item-line" v-if="currentIndex===index && type==='text'"
:style="{background:activeColor}"></view> :style="{background:activeColor}"></view>
...@@ -36,13 +36,7 @@ ...@@ -36,13 +36,7 @@
}, },
color: { color: {
type: String, type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: '' default: ''
// #endif
}, },
activeColor: { activeColor: {
type: String, type: String,
...@@ -77,6 +71,18 @@ ...@@ -77,6 +71,18 @@
default: 0 default: 0
} }
}, },
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() { data() {
return { return {
currentIndex: 0, currentIndex: 0,
......
src/components/firstui/fui-select/fui-select.vue
...@@ -18,14 +18,16 @@ ...@@ -18,14 +18,16 @@
</slot> </slot>
<scroll-view scroll-y class="fui-select__scroll" :show-scrollbar="false" :style="{height:height+'rpx'}"> <scroll-view scroll-y class="fui-select__scroll" :show-scrollbar="false" :style="{height:height+'rpx'}">
<view class="fui-select__list"> <view class="fui-select__list">
<fui-list-cell v-for="(model,index) in itemList" :key="index" :highlight="highlight" <fui-list-cell v-for="(model,index) in itemList" :key="index"
:padding="padding" :bottomBorder="splitLine && itemList.length-1!==index" :highlight="highlight && !model.disabled" :padding="padding"
:borderColor="lineColor" :background="background" :bottomLeft="bottomLeft" :bottomBorder="splitLine && itemList.length-1!==index" :borderColor="lineColor"
:arrow="type==='list'" :arrowColor="arrowColor" @click="itemClick(index)"> :background="background" :bottomLeft="bottomLeft" :arrow="type==='list'"
<view class="fui-select__item" :class="{'fui-select__reverse':isReverse && type==='select'}"> :arrowColor="arrowColor" @click="itemClick(index)">
<view class="fui-select__item"
:class="{'fui-select__reverse':isReverse && type==='select','fui-sitem__disable':model.disabled}">
<view class="fui-select__checkbox" <view class="fui-select__checkbox"
:class="{'fui-select__is-checkmark ':isCheckMark,'fui-select__checkbox-color':(!checkboxColor || checkboxColor=='true') && model.checked && !isCheckMark}" :class="{'fui-select__is-checkmark ':isCheckMark,'fui-select__checkbox-color':(!checkboxColor || checkboxColor===true) && model.checked && !isCheckMark}"
:style="{background:model.checked && !isCheckMark ?checkboxColor:'transparent',borderColor:model.checked && !isCheckMark ?checkboxColor:borderColor}" :style="{background:model.checked && !isCheckMark ?getCheckboxColor:'transparent',borderColor:model.checked && !isCheckMark ?getCheckboxColor:borderColor}"
v-if="type==='select'"> v-if="type==='select'">
<view class="fui-select__checkmark" <view class="fui-select__checkmark"
:style="{borderBottomColor:checkmarkColor,borderRightColor:checkmarkColor}" :style="{borderBottomColor:checkmarkColor,borderRightColor:checkmarkColor}"
...@@ -49,7 +51,7 @@ ...@@ -49,7 +51,7 @@
</scroll-view> </scroll-view>
<view class="fui-select__btn-wrap" v-if="type==='select'"> <view class="fui-select__btn-wrap" v-if="type==='select'">
<view class="fui-select__btn" :class="{'fui-select__btn-color':!btnBackground}" <view class="fui-select__btn" :class="{'fui-select__btn-color':!btnBackground}"
:style="{background:btnBackground}"> :style="{background:getBgColor}">
<text class="fui-select__btn" :class="['fui-select__btn-text']" :style="{color:btnColor}" <text class="fui-select__btn" :class="['fui-select__btn-text']" :style="{color:btnColor}"
@tap.stop="handleClick">{{btnText}}</text> @tap.stop="handleClick">{{btnText}}</text>
</view> </view>
...@@ -130,18 +132,10 @@ ...@@ -130,18 +132,10 @@
} }
}, },
//选择框选中后颜色 //选择框选中后颜色
// #ifndef APP-NVUE
checkboxColor: { checkboxColor: {
type: String, type: String,
default: '' default: ''
}, },
// #endif
// #ifdef APP-NVUE
checkboxColor: {
type: String,
default: '#465CFF'
},
// #endif
borderColor: { borderColor: {
type: String, type: String,
default: '#ccc' default: '#ccc'
...@@ -202,18 +196,10 @@ ...@@ -202,18 +196,10 @@
type: String, type: String,
default: '确定' default: '确定'
}, },
// #ifdef APP-NVUE
btnBackground: {
type: String,
default: '#465CFF'
},
// #endif
// #ifndef APP-NVUE
btnBackground: { btnBackground: {
type: String, type: String,
default: '' default: ''
}, },
// #endif
btnColor: { btnColor: {
type: String, type: String,
default: '#fff' default: '#fff'
...@@ -239,6 +225,26 @@ ...@@ -239,6 +225,26 @@
computed: { computed: {
getStyles() { getStyles() {
return `background:${this.maskBackground};z-index:${Number(this.zIndex)-1};` return `background:${this.maskBackground};z-index:${Number(this.zIndex)-1};`
},
getCheckboxColor() {
let color = this.checkboxColor
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color
},
getBgColor() {
let color = this.btnBackground
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color
} }
}, },
watch: { watch: {
...@@ -290,8 +296,8 @@ ...@@ -290,8 +296,8 @@
let iphonex = false; let iphonex = false;
let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax', let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax',
'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini', 'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini',
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini', 'iphone14plus', 'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini',
'iphone14pro', 'iphone14promax', 'iphone15', 'iphone15mini', 'iphone15plus', 'iphone14pro', 'iphone14promax', 'iphone15', 'iphone15mini',
'iphone15pro', 'iphone15promax' 'iphone15pro', 'iphone15promax'
] ]
const model = res.model.replace(/\s/g, "").toLowerCase() const model = res.model.replace(/\s/g, "").toLowerCase()
...@@ -356,7 +362,8 @@ ...@@ -356,7 +362,8 @@
vals = vals.map(item => { vals = vals.map(item => {
return { return {
text: item, text: item,
checked: false checked: false,
disabled: false
} }
}) })
} else { } else {
...@@ -373,6 +380,7 @@ ...@@ -373,6 +380,7 @@
itemClick(index) { itemClick(index) {
let vals = [...this.itemList] let vals = [...this.itemList]
let item = vals[index] let item = vals[index]
if (item && item.disabled) return;
if (this.type === 'select') { if (this.type === 'select') {
if (this.multiple) { if (this.multiple) {
item.checked = !item.checked; item.checked = !item.checked;
...@@ -519,6 +527,13 @@ ...@@ -519,6 +527,13 @@
/* #endif */ /* #endif */
} }
.fui-sitem__disable {
opacity: .5;
/* #ifdef H5 */
cursor: not-allowed;
/* #endif */
}
.fui-select__flex { .fui-select__flex {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
width: 100%; width: 100%;
......
src/components/firstui/fui-share-sheet/fui-share-sheet.vue
...@@ -253,9 +253,8 @@ ...@@ -253,9 +253,8 @@
let iphonex = false; let iphonex = false;
let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax', let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax',
'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini', 'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini',
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini', 'iphone14plus', 'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini',
'iphone14pro', 'iphone14promax', 'iphone15', 'iphone15mini', 'iphone15plus', 'iphone14pro', 'iphone14promax'
'iphone15pro', 'iphone15promax'
] ]
const model = res.model.replace(/\s/g, "").toLowerCase() const model = res.model.replace(/\s/g, "").toLowerCase()
const newModel = model.split('<')[0] const newModel = model.split('<')[0]
......
src/components/firstui/fui-single-input/fui-single-input.vue
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
:class="{'fui-sinput__disabled':disabled}"> :class="{'fui-sinput__disabled':disabled}">
<view class="fui-sinput__item" <view class="fui-sinput__item"
:class="{'fui-sinput__border-color':!borderColor && activeIndex!==index && !inputVal[index],'fui-sinput__active-color':!activeColor && (activeIndex===index || inputVal[index])}" :class="{'fui-sinput__border-color':!borderColor && activeIndex!==index && !inputVal[index],'fui-sinput__active-color':!activeColor && (activeIndex===index || inputVal[index])}"
:style="{width:width+'rpx',height:height+'rpx',background:background,borderRadius:radius+'rpx',borderColor:activeIndex===index || inputVal[index]?activeColor:borderColor,borderTopWidth:(border==1?borderWidth:0)+'rpx',borderLeftWidth:(border==1?borderWidth:0)+'rpx',borderRightWidth:(border==1?borderWidth:0)+'rpx',borderBottomWidth:(border==1 || border==2?borderWidth:0)+'rpx'}" :style="{width:width+'rpx',height:height+'rpx',background:background,borderRadius:radius+'rpx',borderColor:activeIndex===index || inputVal[index]?getActiveColor:borderColor,borderTopWidth:(border==1?borderWidth:0)+'rpx',borderLeftWidth:(border==1?borderWidth:0)+'rpx',borderRightWidth:(border==1?borderWidth:0)+'rpx',borderBottomWidth:(border==1 || border==2?borderWidth:0)+'rpx'}"
@tap="onTap" v-for="(item,index) in inputArr" :key="index"> @tap="onTap" v-for="(item,index) in inputArr" :key="index">
<text class="fui-sinput__text" :class="{'fui-sinput__color':!color}" <text class="fui-sinput__text" :class="{'fui-sinput__color':!color}"
:style="{width:width+'rpx',height:height+'rpx',fontSize:size+'rpx',lineHeight:height+'rpx',color:color,fontWeight:fontWeight}">{{password?(inputVal[index] ? '●':''):(inputVal[index] || '')}}</text> :style="{width:width+'rpx',height:height+'rpx',fontSize:size+'rpx',lineHeight:height+'rpx',color:color,fontWeight:fontWeight}">{{password?(inputVal[index] ? '●':''):(inputVal[index] || '')}}</text>
...@@ -13,14 +13,14 @@ ...@@ -13,14 +13,14 @@
:style="{fontSize:size+'rpx',fontWeight:fontWeight}">{{password?(inputVal[index] ? '●':''):(inputVal[index] || '')}}</text> :style="{fontSize:size+'rpx',fontWeight:fontWeight}">{{password?(inputVal[index] ? '●':''):(inputVal[index] || '')}}</text>
<view class="fui-sinput__cursor" <view class="fui-sinput__cursor"
:class="{'fui-sinput__cursor-color':!cursorColor,'fui-sinput__cursor-ani':activeIndex===index && focus}" :class="{'fui-sinput__cursor-color':!cursorColor,'fui-sinput__cursor-ani':activeIndex===index && focus}"
:ref="item" v-if="cursor && !disabled" :style="{height:cursorHeight+'rpx',background:cursorColor}"> :ref="item" v-if="cursor && !disabled" :style="{height:cursorHeight+'rpx',background:getCursorColor}">
</view> </view>
</view> </view>
</view> </view>
<!-- #ifdef APP-NVUE --> <!-- #ifdef APP-NVUE -->
<input ref="inputRef" :value="val" :password="password" :type="type" class="fui-sinput__hidden" <input ref="inputRef" :value="val" :password="password" :type="type" class="fui-sinput__hidden"
:class="{'fui-sinput__alizero':aliZero}" @input="onInput" @blur="onBlur" :maxlength="length" :class="{'fui-sinput__alizero':aliZero}" @input="onInput" @blur="onBlur" :maxlength="length" v-if="native"
v-if="native" :disabled="disabled" @confirm="onConfirm" @focus="onTap" /> :disabled="disabled" @confirm="onConfirm" @focus="onTap" />
<!-- #endif --> <!-- #endif -->
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
<input ref="inputRef" :value="val" :password="password" :type="type" class="fui-sinput__hidden" <input ref="inputRef" :value="val" :password="password" :type="type" class="fui-sinput__hidden"
...@@ -85,12 +85,7 @@ ...@@ -85,12 +85,7 @@
}, },
cursorColor: { cursorColor: {
type: String, type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: '' default: ''
// #endif
}, },
cursorHeight: { cursorHeight: {
type: [Number, String], type: [Number, String],
...@@ -118,23 +113,21 @@ ...@@ -118,23 +113,21 @@
type: [Number, String], type: [Number, String],
default: 2 default: 2
}, },
// #ifdef APP-NVUE
borderColor: { borderColor: {
type: String, type: String,
// #ifdef APP-NVUE
default: '#eee' default: '#eee'
},
// #endif // #endif
// #ifndef APP-NVUE // #ifndef APP-NVUE
borderColor: {
type: String,
default: '' default: ''
// #endif
}, },
// #endif
activeColor: { activeColor: {
type: String, type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: '' default: ''
// #endif
}, },
borderWidth: { borderWidth: {
type: [Number, String], type: [Number, String],
...@@ -148,20 +141,45 @@ ...@@ -148,20 +141,45 @@
type: [Number, String], type: [Number, String],
default: 48 default: 48
}, },
// #ifdef APP-NVUE
color: { color: {
type: String, type: String,
// #ifdef APP-NVUE
default: '#181818' default: '#181818'
},
// #endif // #endif
// #ifndef APP-NVUE // #ifndef APP-NVUE
color: {
type: String,
default: '' default: ''
// #endif
}, },
// #endif
fontWeight: { fontWeight: {
type: [Number, String], type: [Number, String],
default: 600 default: 600
} }
}, },
computed:{
getCursorColor() {
let color = this.cursorColor
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color
},
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() { data() {
return { return {
inputArr: [], inputArr: [],
...@@ -202,10 +220,11 @@ ...@@ -202,10 +220,11 @@
this._animation(ref) this._animation(ref)
} }
}, },
focus(val){ focus(val) {
if(val){ if (!this.$refs.inputRef) return;
if (val) {
this.$refs.inputRef.focus() this.$refs.inputRef.focus()
}else{ } else {
this.$refs.inputRef.blur() this.$refs.inputRef.blur()
} }
}, },
...@@ -217,7 +236,7 @@ ...@@ -217,7 +236,7 @@
created() { created() {
this.inputArr = this.getArr(Number(this.length)) this.inputArr = this.getArr(Number(this.length))
let val = this.value.replace(/\s+/g, "") let val = this.value.replace(/\s+/g, "")
this.getVals(val,true) this.getVals(val, true)
}, },
mounted() { mounted() {
// #ifndef MP-TOUTIAO // #ifndef MP-TOUTIAO
......
src/components/firstui/fui-slide-verify/fui-slide-verify.vue
...@@ -3,12 +3,12 @@ ...@@ -3,12 +3,12 @@
<text class="fui-sv__text-tip" :style="{fontSize:size+'rpx',background:getBackground,color:color}" <text class="fui-sv__text-tip" :style="{fontSize:size+'rpx',background:getBackground,color:color}"
:class="{'fui-sv__opacity':isPass}">拖动滑块至虚线框内</text> :class="{'fui-sv__opacity':isPass}">拖动滑块至虚线框内</text>
<!-- #ifdef APP-PLUS || MP-WEIXIN || H5--> <!-- #ifdef APP-PLUS || MP-WEIXIN || H5-->
<view class="fui-sv__foreground" ref="foreground" :class="{'fui-sv__background':!activeBgColor}" <view class="fui-sv__foreground" ref="foreground" :class="{'fui-sv__background':!getActiveBgColor}"
:style="{background:activeBgColor}"> :style="{background:getActiveBgColor}">
<!-- #endif --> <!-- #endif -->
<!-- #ifndef APP-PLUS || MP-WEIXIN || H5--> <!-- #ifndef APP-PLUS || MP-WEIXIN || H5-->
<view class="fui-sv__foreground" :class="{'fui-sv__background':!activeBgColor,'fui-sv__reset-ani':resetAni}" <view class="fui-sv__foreground" :class="{'fui-sv__background':!getActiveBgColor,'fui-sv__reset-ani':resetAni}"
:style="{background:activeBgColor,width:fwidth+'px'}"> :style="{background:getActiveBgColor,width:fwidth+'px'}">
<!-- #endif --> <!-- #endif -->
<!-- #ifdef APP-NVUE --> <!-- #ifdef APP-NVUE -->
<text :class="{'fui-sv__opacity':!isPass}" class="fui-sv__text-res" <text :class="{'fui-sv__opacity':!isPass}" class="fui-sv__text-res"
...@@ -22,31 +22,31 @@ ...@@ -22,31 +22,31 @@
:style="{width:totalWidth+'px',fontSize:size+'rpx',height:height+'rpx',lineHeight:height+'rpx',color:activeColor}">拖动滑块至虚线框内</text> :style="{width:totalWidth+'px',fontSize:size+'rpx',height:height+'rpx',lineHeight:height+'rpx',color:activeColor}">拖动滑块至虚线框内</text>
</view> </view>
<!-- #ifdef APP-VUE || MP-WEIXIN || H5--> <!-- #ifdef APP-VUE || MP-WEIXIN || H5-->
<view class="fui-sv__slider" :class="{'fui-sv__border-color':!passColor && isPass}" <view class="fui-sv__slider" :class="{'fui-sv__border-color':!getPassColor && isPass}"
:style="{width:sliderW+'px',borderColor:isPass?passColor: borderColor}" :change:prop="parse.slidereset" :style="{width:sliderW+'px',borderColor:isPass?getPassColor: borderColor}" :change:prop="parse.slidereset"
:prop="resetNum" :data-width="totalWidth" :data-tleft="targetWidth" :data-swidth="sliderW" :prop="resetNum" :data-width="totalWidth" :data-tleft="targetWidth" :data-swidth="sliderW"
:data-pass="isPass?1:0" :data-range="range" @touchstart="parse.touchstart" @touchmove="parse.touchmove" :data-pass="isPass?1:0" :data-range="range" @touchstart="parse.touchstart" @touchmove="parse.touchmove"
@touchend="parse.touchend" @mousedown="parse.mousedown"> @touchend="parse.touchend" @mousedown="parse.mousedown">
<fui-icon name="right" :color="arrowColor" :size="iconSize" v-if="!isPass"></fui-icon> <fui-icon name="right" :color="arrowColor" :size="iconSize" v-if="!isPass"></fui-icon>
<fui-icon name="checkbox-fill" :color="passColor" primary :size="iconSize" v-else></fui-icon> <fui-icon name="checkbox-fill" :color="getPassColor" primary :size="iconSize" v-else></fui-icon>
</view> </view>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef APP-NVUE --> <!-- #ifdef APP-NVUE -->
<view class="fui-sv__slider" @touchstart="touchstart" @horizontalpan="touchmove" @touchend="touchend" <view class="fui-sv__slider" @touchstart="touchstart" @horizontalpan="touchmove" @touchend="touchend"
ref="slider" :style="{width:sliderW+'px',borderColor:isPass?passColor: borderColor}"> ref="slider" :style="{width:sliderW+'px',borderColor:isPass?getPassColor: borderColor}">
<fui-icon name="right" :color="arrowColor" :size="iconSize" v-if="!isPass"></fui-icon> <fui-icon name="right" :color="arrowColor" :size="iconSize" v-if="!isPass"></fui-icon>
<fui-icon name="checkbox-fill" :color="passColor" :size="iconSize" v-else></fui-icon> <fui-icon name="checkbox-fill" :color="getPassColor" :size="iconSize" v-else></fui-icon>
</view> </view>
<!-- #endif --> <!-- #endif -->
<!-- #ifndef APP-PLUS || MP-WEIXIN || H5--> <!-- #ifndef APP-PLUS || MP-WEIXIN || H5-->
<view class="fui-sv__slider" <view class="fui-sv__slider"
:class="{'fui-sv__border-color':!passColor && isPass,'fui-sv__reset-ani':resetAni}" :class="{'fui-sv__border-color':!getPassColor && isPass,'fui-sv__reset-ani':resetAni}"
:style="{width:sliderW+'px',borderColor:isPass?passColor: borderColor,transform:transform}" :style="{width:sliderW+'px',borderColor:isPass?getPassColor: borderColor,transform:transform}"
@touchstart="touchstart" @touchmove.stop.prevent="touchmove" @touchend="touchend"> @touchstart="touchstart" @touchmove.stop.prevent="touchmove" @touchend="touchend">
<fui-icon name="right" :color="arrowColor" :size="iconSize" v-if="!isPass"></fui-icon> <fui-icon name="right" :color="arrowColor" :size="iconSize" v-if="!isPass"></fui-icon>
<fui-icon name="checkbox-fill" :color="passColor" primary :size="iconSize" v-else></fui-icon> <fui-icon name="checkbox-fill" :color="getPassColor" primary :size="iconSize" v-else></fui-icon>
</view> </view>
<!-- #endif --> <!-- #endif -->
<view class="fui-sv__dotted-box" <view class="fui-sv__dotted-box"
...@@ -90,18 +90,10 @@ ...@@ -90,18 +90,10 @@
type: String, type: String,
default: "#EEEEEE" default: "#EEEEEE"
}, },
// #ifdef APP-NVUE
activeBgColor: {
type: String,
default: "#465CFF"
},
// #endif
// #ifndef APP-NVUE
activeBgColor: { activeBgColor: {
type: String, type: String,
default: "" default: ""
}, },
// #endif
sliderWidth: { sliderWidth: {
type: [Number, String], type: [Number, String],
default: 80 default: 80
...@@ -114,18 +106,10 @@ ...@@ -114,18 +106,10 @@
type: String, type: String,
default: '#EEEEEE' default: '#EEEEEE'
}, },
// #ifdef APP-NVUE
passColor: {
type: String,
default: '#465CFF'
},
// #endif
// #ifndef APP-NVUE
passColor: { passColor: {
type: String, type: String,
default: '' default: ''
}, },
// #endif
size: { size: {
type: [Number, String], type: [Number, String],
default: 28 default: 28
...@@ -160,6 +144,26 @@ ...@@ -160,6 +144,26 @@
// #ifdef APP-NVUE // #ifdef APP-NVUE
return 'transparent' return 'transparent'
// #endif // #endif
},
getActiveBgColor() {
let color = this.activeBgColor;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color;
},
getPassColor(){
let color = this.passColor;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color;
} }
}, },
watch: { watch: {
...@@ -365,4 +369,13 @@ ...@@ -365,4 +369,13 @@
} }
/* #endif */ /* #endif */
/* fix：vue3下动画问题，app端直接移除class效果未消失，导致卡顿 */
/* #ifdef VUE3 */
.fui-sv__un-ani {
transition: transform 0s;
}
/* #endif */
</style> </style>
src/components/firstui/fui-slide-verify/index.wxs
...@@ -8,7 +8,7 @@ function isPC() { ...@@ -8,7 +8,7 @@ function isPC() {
var userAgentInfo = navigator.userAgent; var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
var flag = true; var flag = true;
for (var v = 0; v < Agents.length - 1; v++) { for (var v = 0; v< Agents.length - 1; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) { if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false; flag = false;
break; break;
...@@ -45,11 +45,16 @@ function styleChange(left, ins) { ...@@ -45,11 +45,16 @@ function styleChange(left, ins) {
var foreground = ins.selectComponent('.fui-sv__foreground') var foreground = ins.selectComponent('.fui-sv__foreground')
if (!slider || !foreground) return; if (!slider || !foreground) return;
if (left == 0) { if (left == 0) {
slider.removeClass('fui-sv__un-ani')
foreground.removeClass('fui-sv__un-ani')
slider.addClass('fui-sv__reset-ani') slider.addClass('fui-sv__reset-ani')
foreground.addClass('fui-sv__reset-ani') foreground.addClass('fui-sv__reset-ani')
} else { } else {
slider.removeClass('fui-sv__reset-ani') slider.removeClass('fui-sv__reset-ani')
foreground.removeClass('fui-sv__reset-ani') foreground.removeClass('fui-sv__reset-ani')
slider.addClass('fui-sv__un-ani')
foreground.addClass('fui-sv__un-ani')
} }
slider.setStyle({ slider.setStyle({
transform: 'translate3d(' + left + 'px,0,0)' transform: 'translate3d(' + left + 'px,0,0)'
......
src/components/firstui/fui-slider-captcha/fui-slider-captcha.vue
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
<!--如果隐藏导致不工作，则使用v-if控制--> <!--如果隐藏导致不工作，则使用v-if控制-->
<canvas class="fui-sc__canvas" :canvas-id="canvasId" :id="canvasId" <canvas class="fui-sc__canvas" :canvas-id="canvasId" :id="canvasId"
:style="{ width: w + 'px', height:h + 'px' }"></canvas> :style="{ width: w + 'px', height:h + 'px' }" v-if="canvasId"></canvas>
<!-- #endif --> <!-- #endif -->
<view class="fui-slider__captcha" :style="{background:background}" @tap.stop="stop"> <view class="fui-slider__captcha" :style="{background:background}" @tap.stop="stop">
<text class="fui-sc__title" <text class="fui-sc__title"
...@@ -39,8 +39,8 @@ ...@@ -39,8 +39,8 @@
<view class="fui-sc__bar" :style="{width: w + 'px',height:(sliderH/2)+'px',borderRadius:sliderH+'px'}"> <view class="fui-sc__bar" :style="{width: w + 'px',height:(sliderH/2)+'px',borderRadius:sliderH+'px'}">
</view> </view>
<!-- #ifdef APP-VUE || MP-WEIXIN || H5--> <!-- #ifdef APP-VUE || MP-WEIXIN || H5-->
<view class="fui-sc__slider" :class="{'fui-sc__slider-bg':!sliderBgColor}" <view class="fui-sc__slider" :class="{'fui-sc__slider-bg':!getSliderBgColor}"
:style="{width:(sliderH * 2)+'px',height:sliderH+'px',borderRadius:sliderH+'px',background:sliderBgColor}" :style="{width:(sliderH * 2)+'px',height:sliderH+'px',borderRadius:sliderH+'px',background:getSliderBgColor}"
:change:prop="parse.slidereset" :prop="resetNum" :data-type="type" :data-width="w" :data-start="x" :change:prop="parse.slidereset" :prop="resetNum" :data-type="type" :data-width="w" :data-start="x"
:data-end="x1" :data-swidth="sliderH * 2" :data-end="x1" :data-swidth="sliderH * 2"
:data-disabled="!slotSrc || isPass || disabled || !isShow?1:0" :data-range="range" :data-disabled="!slotSrc || isPass || disabled || !isShow?1:0" :data-range="range"
...@@ -50,16 +50,16 @@ ...@@ -50,16 +50,16 @@
</view> </view>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef APP-NVUE --> <!-- #ifdef APP-NVUE -->
<view ref="sliderRef" class="fui-sc__slider" :class="{'fui-sc__slider-bg':!sliderBgColor}" <view ref="sliderRef" class="fui-sc__slider" :class="{'fui-sc__slider-bg':!getSliderBgColor}"
:style="{width:(sliderH * 2)+'px',height:sliderH+'px',borderRadius:sliderH+'px',background:sliderBgColor}" :style="{width:(sliderH * 2)+'px',height:sliderH+'px',borderRadius:sliderH+'px',background:getSliderBgColor}"
@touchstart="touchstart" @horizontalpan="touchmove" @touchend="touchend"> @touchstart="touchstart" @horizontalpan="touchmove" @touchend="touchend">
<fui-icon name="slide" :size="56" :color="slideColor"></fui-icon> <fui-icon name="slide" :size="56" :color="slideColor"></fui-icon>
</view> </view>
<!-- #endif --> <!-- #endif -->
<!-- #ifndef APP-PLUS || MP-WEIXIN || H5--> <!-- #ifndef APP-PLUS || MP-WEIXIN || H5-->
<view class="fui-sc__slider" :class="{'fui-sc__slider-bg':!sliderBgColor,'fui-sc__reset-ani':resetAni}" <view class="fui-sc__slider" :class="{'fui-sc__slider-bg':!getSliderBgColor,'fui-sc__reset-ani':resetAni}"
:style="{width:(sliderH * 2)+'px',height:sliderH+'px',borderRadius:sliderH+'px',background:sliderBgColor,transform:transform}" :style="{width:(sliderH * 2)+'px',height:sliderH+'px',borderRadius:sliderH+'px',background:getSliderBgColor,transform:transform}"
@touchstart="touchstart" @touchmove.stop.prevent="touchmove" @touchend="touchend"> @touchstart="touchstart" @touchmove.stop.prevent="touchmove" @touchend="touchend">
<fui-icon name="slide" :size="56" :color="slideColor"></fui-icon> <fui-icon name="slide" :size="56" :color="slideColor"></fui-icon>
</view> </view>
...@@ -149,18 +149,10 @@ ...@@ -149,18 +149,10 @@
type: String, type: String,
default: '#B2B2B2' default: '#B2B2B2'
}, },
// #ifdef APP-NVUE
sliderBgColor: {
type: String,
default: '#465CFF'
},
// #endif
// #ifndef APP-NVUE
sliderBgColor: { sliderBgColor: {
type: String, type: String,
default: '' default: ''
}, },
// #endif
slideColor: { slideColor: {
type: String, type: String,
default: '#FFFFFF' default: '#FFFFFF'
...@@ -202,6 +194,18 @@ ...@@ -202,6 +194,18 @@
} }
} }
}, },
computed: {
getSliderBgColor() {
let color = this.sliderBgColor;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color;
}
},
data() { data() {
let sys = uni.getSystemInfoSync() let sys = uni.getSystemInfoSync()
// #ifndef MP-WEIXIN // #ifndef MP-WEIXIN
...@@ -249,6 +253,8 @@ ...@@ -249,6 +253,8 @@
}) })
}, },
mounted() { mounted() {
this.$nextTick(() => {
setTimeout(() => {
if (this.type == 1) { if (this.type == 1) {
this.src && this.handleImage() this.src && this.handleImage()
} else { } else {
...@@ -256,6 +262,8 @@ ...@@ -256,6 +262,8 @@
this.handleImage() this.handleImage()
} }
} }
}, 50);
})
}, },
methods: { methods: {
getPx(value) { getPx(value) {
...@@ -696,9 +704,20 @@ ...@@ -696,9 +704,20 @@
background: var(--fui-color-primary, #465CFF) !important; background: var(--fui-color-primary, #465CFF) !important;
} }
/* #endif */
/* #ifndef APP-NVUE */
.fui-sc__reset-ani { .fui-sc__reset-ani {
transition: transform 0.2s; transition: transform 0.2s;
} }
/* #endif */ /* #endif */
/* fix：vue3下动画问题，app端直接移除class效果未消失，导致卡顿 */
/* #ifdef VUE3 */
.fui-sc__un-ani {
transition: transform 0s;
}
/* #endif */
</style> </style>
src/components/firstui/fui-slider-captcha/index.wxs
...@@ -10,7 +10,7 @@ function isPC() { ...@@ -10,7 +10,7 @@ function isPC() {
var userAgentInfo = navigator.userAgent; var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
var flag = true; var flag = true;
for (var v = 0; v < Agents.length - 1; v++) { for (var v = 0; v< Agents.length - 1; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) { if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false; flag = false;
break; break;
...@@ -39,11 +39,15 @@ function styleChange(left, ins) { ...@@ -39,11 +39,15 @@ function styleChange(left, ins) {
if (!slider || !slot) return; if (!slider || !slot) return;
if (left == 0) { if (left == 0) {
slider.removeClass('fui-sc__un-ani')
slot.removeClass('fui-sc__un-ani')
slider.addClass('fui-sc__reset-ani') slider.addClass('fui-sc__reset-ani')
slot.addClass('fui-sc__reset-ani') slot.addClass('fui-sc__reset-ani')
} else { } else {
slider.removeClass('fui-sc__reset-ani') slider.removeClass('fui-sc__reset-ani')
slot.removeClass('fui-sc__reset-ani') slot.removeClass('fui-sc__reset-ani')
slider.addClass('fui-sc__un-ani')
slot.addClass('fui-sc__un-ani')
} }
slider.setStyle({ slider.setStyle({
transform: 'translate3d(' + left + 'px,0,0)' transform: 'translate3d(' + left + 'px,0,0)'
......
src/components/firstui/fui-slider/fui-slider.vue
...@@ -7,10 +7,10 @@ ...@@ -7,10 +7,10 @@
<view class="fui-slider__wrap" :style="{width:width+'px',height:(blockHeight<height?height:blockHeight)+'px'}"> <view class="fui-slider__wrap" :style="{width:width+'px',height:(blockHeight<height?height:blockHeight)+'px'}">
<view class="fui-slider__pole" <view class="fui-slider__pole"
:style="{width:width+'px',height:height+'px',borderRadius:radius+'px',background:background}"> :style="{width:width+'px',height:height+'px',borderRadius:radius+'px',background:background}">
<view class="fui-slider__pole-left" :class="{'fui-slider__pole-bg':!activeColor}" <view class="fui-slider__pole-left" :class="{'fui-slider__pole-bg':!getActiveColor}"
:style="{background:activeColor}"></view> :style="{background:getActiveColor}"></view>
<view class="fui-slider__pole-right" :class="{'fui-slider__pole-bg':!activeColor}" <view class="fui-slider__pole-right" :class="{'fui-slider__pole-bg':!getActiveColor}"
:style="{background:activeColor}"></view> :style="{background:getActiveColor}"></view>
</view> </view>
<view class="fui-slider__handle" <view class="fui-slider__handle"
:style="{width:blockWidth+'px',height:blockHeight+'px',borderRadius:blockRadius+'px',background:blockColor}" :style="{width:blockWidth+'px',height:blockHeight+'px',borderRadius:blockRadius+'px',background:blockColor}"
...@@ -37,9 +37,9 @@ ...@@ -37,9 +37,9 @@
<view class="fui-slider__pole" <view class="fui-slider__pole"
:style="{width:width+'px',height:height+'px',borderRadius:radius+'px',background:background}"> :style="{width:width+'px',height:height+'px',borderRadius:radius+'px',background:background}">
<view class="fui-slider__pole-left" :class="['fui-slider__pole-r']" ref="poleLeft" <view class="fui-slider__pole-left" :class="['fui-slider__pole-r']" ref="poleLeft"
:style="{background:activeColor}"></view> :style="{background:getActiveColor}"></view>
<view class="fui-slider__pole-right" :class="['fui-slider__pole-l']" ref="poleRight" <view class="fui-slider__pole-right" :class="['fui-slider__pole-l']" ref="poleRight"
:style="{background:activeColor}"></view> :style="{background:getActiveColor}"></view>
</view> </view>
<view class="fui-slider__handle" fireEventSync="true" @touchstart="touchstart" @horizontalpan="touchmove" <view class="fui-slider__handle" fireEventSync="true" @touchstart="touchstart" @horizontalpan="touchmove"
@touchend="touchend" ref="handleLeft" @touchend="touchend" ref="handleLeft"
...@@ -57,12 +57,12 @@ ...@@ -57,12 +57,12 @@
<view class="fui-slider__wrap" :style="{width:width+'px',height:(blockHeight<height?height:blockHeight)+'px'}"> <view class="fui-slider__wrap" :style="{width:width+'px',height:(blockHeight<height?height:blockHeight)+'px'}">
<view class="fui-slider__pole" <view class="fui-slider__pole"
:style="{width:width+'px',height:height+'px',borderRadius:radius+'px',background:background}"> :style="{width:width+'px',height:height+'px',borderRadius:radius+'px',background:background}">
<view class="fui-slider__pole-left" :class="['fui-slider__pole-r',activeColor?'':'fui-slider__pole-bg']" <view class="fui-slider__pole-left" :class="['fui-slider__pole-r',getActiveColor?'':'fui-slider__pole-bg']"
:style="{background:activeColor,transform:transLeft}"> :style="{background:getActiveColor,transform:transLeft}">
</view> </view>
<view class="fui-slider__pole-right" <view class="fui-slider__pole-right"
:class="['fui-slider__pole-l',activeColor?'':'fui-slider__pole-bg']" :class="['fui-slider__pole-l',getActiveColor?'':'fui-slider__pole-bg']"
:style="{background:activeColor,transform:transRight}"> :style="{background:getActiveColor,transform:transRight}">
</view> </view>
</view> </view>
<view class="fui-slider__handle" <view class="fui-slider__handle"
...@@ -134,18 +134,10 @@ ...@@ -134,18 +134,10 @@
type: String, type: String,
default: '#e1e1e1' default: '#e1e1e1'
}, },
// #ifdef APP-NVUE
activeColor: {
type: String,
default: '#465CFF'
},
// #endif
// #ifndef APP-NVUE
activeColor: { activeColor: {
type: String, type: String,
default: '' default: ''
}, },
// #endif
blockWidth: { blockWidth: {
type: [Number, String], type: [Number, String],
default: 24 default: 24
...@@ -196,6 +188,18 @@ ...@@ -196,6 +188,18 @@
this.end = end this.end = end
} }
}, },
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() { data() {
return { return {
start: 0, start: 0,
......
src/components/firstui/fui-slider/index.wxs
...@@ -16,7 +16,7 @@ function isPC() { ...@@ -16,7 +16,7 @@ function isPC() {
var userAgentInfo = navigator.userAgent; var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
var flag = true; var flag = true;
for (var v = 0; v < Agents.length - 1; v++) { for (var v = 0; v< Agents.length - 1; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) { if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false; flag = false;
break; break;
......
src/components/firstui/fui-steps/fui-steps.vue
...@@ -8,20 +8,25 @@ ...@@ -8,20 +8,25 @@
:class="[direction==='row'?'fui-steps__flex-row':'fui-steps__flex-col',direction==='row'?'':'fui-steps__node-weex']" :class="[direction==='row'?'fui-steps__flex-row':'fui-steps__flex-col',direction==='row'?'':'fui-steps__node-weex']"
:style="getStyles"> :style="getStyles">
<view class="fui-steps__line" <view class="fui-steps__line"
:class="[direction==='row'?'fui-steps__line-row':'fui-steps__line-col',index<=current && index!==0 && !activeColor?'fui-steps__background':'']" :class="['fui-steps__line-'+direction+(lineBold?'_bold':''),index<=current && index!==0 && !getActiveColor?'fui-steps__background':'']"
:style="{background:index===0?'transparent':(index<=current?activeColor:nodeColor)}" :style="{background:index===0?'transparent':(index<=current?getActiveColor:nodeColor)}"
v-if="direction==='row'"></view> v-if="direction==='row'"></view>
<view class="fui-steps__node"> <view class="fui-steps__node">
<text class="fui-steps__node-text" <text class="fui-steps__node-text"
:class="{'fui-steps__background':index<=current && !activeColor,'fui-steps__border':index<=current && !activeColor}" :class="{'fui-steps__background':index<=current && !getActiveColor,'fui-steps__border':index<=current && !getActiveColor}"
v-if="item.text && !(isMark && index==current)" v-if="item.text && !(isMark && index==current)"
:style="{background:index<=current?activeColor:'#fff',borderColor:index<=current?activeColor:nodeColor,color:index<=current?'#fff':color}">{{item.text}}</text> :style="{background:index<=current?getActiveColor:'#fff',borderColor:index<=current?getActiveColor:nodeColor,color:index<=current?'#fff':color}">{{item.text}}</text>
<view class="fui-steps__checkbox" :class="{'fui-steps__background':!activeColor}" <view class="fui-steps__checkbox" :class="{'fui-steps__background':!getActiveColor && !processColor}"
:style="{background:activeColor}" v-if="isMark && index==current"> :style="{background:processColor || getActiveColor}" v-if="isMark && index==current">
<view class="fui-steps__checkmark"></view> <template v-if="processStatus==='fail'">
<view class="fui-steps__ia-fail"></view>
<view class="fui-steps__ib-fail"></view>
</template>
<view class="fui-steps__ic-waiting" v-else-if="processStatus==='wait'"></view>
<view class="fui-steps__checkmark" v-else></view>
</view> </view>
<view class="fui-steps__node-dot" :class="{'fui-steps__background':index<=current && !activeColor}" <view class="fui-steps__node-dot" :class="{'fui-steps__background':index<=current && !getActiveColor}"
:style="{background:index<=current?activeColor:nodeColor}" :style="{background:index<=current?getActiveColor:nodeColor}"
v-if="!item.text && !item.src && !(isMark && index==current)"> v-if="!item.text && !item.src && !(isMark && index==current)">
</view> </view>
<image :src="index<=current?(item.activeSrc || item.src):item.src" mode="widthFix" <image :src="index<=current?(item.activeSrc || item.src):item.src" mode="widthFix"
...@@ -29,21 +34,21 @@ ...@@ -29,21 +34,21 @@
:style="{borderRadius:radius || 0}"></image> :style="{borderRadius:radius || 0}"></image>
</view> </view>
<view class="fui-steps__line" <view class="fui-steps__line"
:class="[direction==='row'?'fui-steps__line-row':'fui-steps__line-col',index!==items.length-1 && !activeColor && (index<current || (index==current && isWait && direction==='row'))?'fui-steps__background':'']" :class="['fui-steps__line-'+direction+(lineBold?'_bold':''),index!==items.length-1 && !getActiveColor && (index<current || (index==current && isWait && direction==='row' && !processColor))?'fui-steps__background':'']"
:style="{background:index===items.length-1?'transparent':((index<current) || (index==current && isWait && direction==='row')?activeColor:nodeColor)}"> :style="{background:index===items.length-1?'transparent':((index<current) || (index==current && isWait && direction==='row')?getColor(index,current):nodeColor)}">
</view> </view>
</view> </view>
<view class="fui-steps__content" <view class="fui-steps__content"
:class="[direction==='row'?'fui-steps__content-row':'fui-steps__content-col']" :class="[direction==='row'?'fui-steps__content-row':'fui-steps__content-col']"
:style="{paddingBottom:index===items.length-1 || direction==='row'? '0rpx':'64rpx',paddingLeft:direction==='row'?'20rpx':(isNvue?`${height+24}rpx`:'24rpx')}"> :style="{paddingBottom:index===items.length-1 || direction==='row'? '0rpx':'64rpx',paddingLeft:direction==='row'?'20rpx':(isNvue?`${height+24}rpx`:'24rpx')}">
<text class="fui-steps__title" <text class="fui-steps__title"
:class="{'fui-steps__text-row':direction==='row','fui-steps__color':index<=current && !activeColor}" :class="{'fui-steps__text-row':direction==='row','fui-steps__color':(index<current && !getActiveColor) || (index===current && !processColor && !getActiveColor)}"
v-if="item.title" v-if="item.title"
:style="{color:index<=current?activeColor:color,fontSize:size+'rpx',fontWeight:fontWeight}">{{item.title}}</text> :style="{color:index<=current?getColor(index,current):color,fontSize:size+'rpx',fontWeight:fontWeight}">{{item.title}}</text>
<text class="fui-steps__descr" <text class="fui-steps__descr"
:class="{'fui-steps__text-row':direction==='row','fui-steps__color':index<=current && !activeColor}" :class="{'fui-steps__text-row':direction==='row','fui-steps__color':(index<current && !getActiveColor) || (index===current && !processColor && !getActiveColor)}"
v-if="item.descr" v-if="item.descr"
:style="{color:index<=current?activeColor:descrColor,fontSize:descrSize+'rpx'}">{{item.descr}}</text> :style="{color:index<=current?getColor(index,current):descrColor,fontSize:descrSize+'rpx'}">{{item.descr}}</text>
</view> </view>
</view> </view>
</view> </view>
...@@ -107,18 +112,20 @@ ...@@ -107,18 +112,20 @@
type: [Number, String], type: [Number, String],
default: 24 default: 24
}, },
// #ifdef APP-NVUE
activeColor: { activeColor: {
type: String, type: String,
default: '#465CFF' default: ''
}, },
// #endif //V1.9.8+ 设置当前步骤的状态 wait / error / success
// #ifndef APP-NVUE processStatus: {
activeColor: { type: String,
default: ''
},
//V1.9.8+ 设置当前步骤的状态 颜色
processColor: {
type: String, type: String,
default: '' default: ''
}, },
// #endif
radius: { radius: {
type: String, type: String,
default: '0rpx' default: '0rpx'
...@@ -131,6 +138,11 @@ ...@@ -131,6 +138,11 @@
isWait: { isWait: {
type: Boolean, type: Boolean,
default: false default: false
},
//步骤线条是否加粗 V1.9.8+
lineBold: {
type: Boolean,
default: false
} }
}, },
computed: { computed: {
...@@ -152,6 +164,23 @@ ...@@ -152,6 +164,23 @@
} }
}, },
methods: { methods: {
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;
},
getColor(index, current) {
let color = this.getActiveColor
if (index === current) {
color = this.processColor || color
}
return color;
},
handleClick(index) { handleClick(index) {
this.$emit('click', { this.$emit('click', {
index: index, index: index,
...@@ -230,10 +259,20 @@ ...@@ -230,10 +259,20 @@
height: 1px; height: 1px;
transform: scaleY(.5) translateZ(0); transform: scaleY(.5) translateZ(0);
/* #endif */ /* #endif */
}
.fui-steps__line-row_bold {
/* #ifdef APP-NVUE */
height: 1px;
/* #endif */
/* #ifndef APP-NVUE */
height: 2px;
transform: scaleY(.5) translateZ(0);
/* #endif */
} }
.fui-steps__line-col { .fui-steps__line-column {
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
width: 0.5px; width: 0.5px;
/* #endif */ /* #endif */
...@@ -244,6 +283,17 @@ ...@@ -244,6 +283,17 @@
/* #endif */ /* #endif */
} }
.fui-steps__line-column_bold {
/* #ifdef APP-NVUE */
width: 1px;
/* #endif */
/* #ifndef APP-NVUE */
width: 2px;
transform: scaleX(.5) translateZ(0);
/* #endif */
}
.fui-steps__node-box { .fui-steps__node-box {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
...@@ -300,6 +350,7 @@ ...@@ -300,6 +350,7 @@
height: 44rpx; height: 44rpx;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: block; display: block;
flex-shrink: 0;
/* #endif */ /* #endif */
} }
...@@ -372,6 +423,7 @@ ...@@ -372,6 +423,7 @@
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
flex-direction: column;
} }
.fui-steps__checkmark { .fui-steps__checkmark {
...@@ -408,4 +460,35 @@ ...@@ -408,4 +460,35 @@
} }
/* #endif */ /* #endif */
.fui-steps__ia-fail {
width: 48rpx;
height: 3px;
transform: rotate(45deg) scale(0.5);
background: #FFFFFF;
}
.fui-steps__ib-fail {
width: 48rpx;
height: 3px;
margin-top: -3px;
transform: rotate(-45deg) scale(0.5);
background: #FFFFFF;
}
.fui-steps__ic-waiting {
height: 32rpx;
width: 32rpx;
border-width: 3px;
border-style: solid;
border-top-width: 0;
border-right-width: 0;
border-color: #fff;
margin-left: 6rpx;
margin-top: -6rpx;
/* #ifndef APP-NVUE */
box-sizing: border-box;
/* #endif */
transform: scale(.5);
}
</style> </style>
src/components/firstui/fui-swipe-action/bindingx.js
...@@ -60,7 +60,7 @@ export default { ...@@ -60,7 +60,7 @@ export default {
if (this.stop) return if (this.stop) return
this.stop = true this.stop = true
if (this.autoClose) { if (this.autoClose) {
this.group.closeAuto(this) this.group && this.group.closeAuto(this)
} }
const rightWidth = this.button.right.width || 0 const rightWidth = this.button.right.width || 0
......
src/components/firstui/fui-swipe-action/fui-swipe-action.vue
...@@ -70,6 +70,7 @@ ...@@ -70,6 +70,7 @@
import mpwxs from './mpwxs.js' import mpwxs from './mpwxs.js'
import mpjs from './mpjs.js' import mpjs from './mpjs.js'
import bindingx from './bindingx.js' import bindingx from './bindingx.js'
const dangerColor = (uni && uni.$fui && uni.$fui.color && uni.$fui.color.danger) || '#FF2B2B'
export default { export default {
name: "fui-swipe-action", name: "fui-swipe-action",
mixins: [mpwxs, mpjs, bindingx], mixins: [mpwxs, mpjs, bindingx],
...@@ -80,7 +81,7 @@ ...@@ -80,7 +81,7 @@
default () { default () {
return [{ return [{
text: '删除', text: '删除',
background: '#FF2B2B' background: dangerColor
}] }]
} }
}, },
...@@ -113,9 +114,6 @@ ...@@ -113,9 +114,6 @@
default: 0 default: 0
} }
}, },
data() {
return {}
},
// #ifndef VUE3 // #ifndef VUE3
beforeDestroy() { beforeDestroy() {
if (this.__beforeUnmount) return if (this.__beforeUnmount) return
......
src/components/firstui/fui-swipe-action/index.wxs
...@@ -5,7 +5,7 @@ function isPC() { ...@@ -5,7 +5,7 @@ function isPC() {
var userAgentInfo = navigator.userAgent; var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
var flag = true; var flag = true;
for (var v = 0; v < Agents.length - 1; v++) { for (var v = 0; v< Agents.length - 1; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) { if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false; flag = false;
break; break;
......
src/components/firstui/fui-swipe-action/mpjs.js
...@@ -46,7 +46,7 @@ export default { ...@@ -46,7 +46,7 @@ export default {
}, },
closeSwipe(e) { closeSwipe(e) {
if (!this.autoClose) return if (!this.autoClose) return
this.group.closeAuto(this) this.group && this.group.closeAuto(this)
}, },
//解决 ios 13 点击区域错位的问题 //解决 ios 13 点击区域错位的问题
appTouchStart(e) { appTouchStart(e) {
......
src/components/firstui/fui-swipe-action/mpwxs.js
...@@ -36,7 +36,7 @@ export default { ...@@ -36,7 +36,7 @@ export default {
methods: { methods: {
closeSwipe(e) { closeSwipe(e) {
if (!this.autoClose) return if (!this.autoClose) return
this.group.closeAuto(this) this.group && this.group.closeAuto(this)
}, },
change(e) { change(e) {
this.$emit('change', { this.$emit('change', {
......
src/components/firstui/fui-swiper-dot/fui-swiper-dot.vue
...@@ -58,6 +58,11 @@ ...@@ -58,6 +58,11 @@
} }
}, },
data() { data() {
let primaryColor = '';
// #ifdef APP-NVUE
const app = uni && uni.$fui && uni.$fui.color;
primaryColor = (app && app.primary) || '#465CFF';
// #endif
return { return {
dots: { dots: {
left: 0, left: 0,
...@@ -69,7 +74,7 @@ ...@@ -69,7 +74,7 @@
radius: true, radius: true,
background: 'rgba(0,0,0,.6)', background: 'rgba(0,0,0,.6)',
// #ifdef APP-NVUE // #ifdef APP-NVUE
activeBackground: '#465CFF', activeBackground: primaryColor,
// #endif // #endif
// #ifndef APP-NVUE // #ifndef APP-NVUE
activeBackground: '', activeBackground: '',
......
src/components/firstui/fui-switch/fui-switch.vue
...@@ -2,20 +2,20 @@ ...@@ -2,20 +2,20 @@
<view class="fui-switch__input" :style="{zoom:isNvue?1:scaleRatio,transform:`scale(${isNvue?scaleRatio:1})`}"> <view class="fui-switch__input" :style="{zoom:isNvue?1:scaleRatio,transform:`scale(${isNvue?scaleRatio:1})`}">
<!-- #ifdef APP-NVUE --> <!-- #ifdef APP-NVUE -->
<switch v-if="type==='switch'" @change="change" :name="name" :checked="val" :disabled="disabled" <switch v-if="type==='switch'" @change="change" :name="name" :checked="val" :disabled="disabled"
:color="color || '#465CFF'"> :color="getColor">
</switch> </switch>
<!-- #endif --> <!-- #endif -->
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
<view class="fui-switch__input-def" :style="{background:val?color:'#dfdfdf',borderColor:val?color:borderColor}" <view class="fui-switch__input-def" :style="{background:val?color:'#dfdfdf',borderColor:val?color:borderColor}"
:class="{'fui-switch__input--checked':val,'fui-checkbox__disabled':disabled,'fui-switch__color':val && !color}" :class="{'fui-switch__input--checked':val,'fui-checkbox__disabled':disabled,'fui-switch__color':val && !color}"
v-if="type==='switch'"> v-if="type==='switch'">
<switch class="fui-switch__hidden" :class="{'fui-pointer__events':isLabel}" @change="change" :name="name" :checked="val" :disabled="disabled" <switch class="fui-switch__hidden" :class="{'fui-pointer__events':isLabel}" @change="change" :name="name"
:color="color"> :checked="val" :disabled="disabled" :color="color">
</switch> </switch>
</view> </view>
<!-- #endif --> <!-- #endif -->
<view class="fui-checkbox__self" :class="{'fui-checkbox__disabled':disabled,'fui-switch__color':!color && val}" <view class="fui-checkbox__self" :class="{'fui-checkbox__disabled':disabled,'fui-switch__color':!getColor && val}"
:style="{background:val?color:'#fff',border:val?`1px solid ${color}`:`1px solid ${borderColor}`}" v-else> :style="{background:val?getColor:'#fff',border:val?`1px solid ${getColor}`:`1px solid ${borderColor}`}" v-else>
<view class="fui-check__mark" :style="{borderBottomColor:checkMarkColor,borderRightColor:checkMarkColor}" <view class="fui-check__mark" :style="{borderBottomColor:checkMarkColor,borderRightColor:checkMarkColor}"
v-if="val"></view> v-if="val"></view>
<switch class="fui-switch__hidden" :class="{'fui-pointer__events':isLabel}" <switch class="fui-switch__hidden" :class="{'fui-pointer__events':isLabel}"
...@@ -29,14 +29,12 @@ ...@@ -29,14 +29,12 @@
export default { export default {
name: "fui-switch", name: "fui-switch",
emits: ['change'], emits: ['change'],
// #ifndef VUE3
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
behaviors: ['wx://form-field-group'], behaviors: ['wx://form-field-group'],
// #endif // #endif
// #ifdef MP-BAIDU || MP-QQ // #ifdef MP-BAIDU || MP-QQ || H5
behaviors: ['uni://form-field'], behaviors: ['uni://form-field'],
// #endif // #endif
// #endif
props: { props: {
//开关选择器名称 //开关选择器名称
name: { name: {
...@@ -59,12 +57,7 @@ ...@@ -59,12 +57,7 @@
//switch选中颜色 //switch选中颜色
color: { color: {
type: String, type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: '' default: ''
// #endif
}, },
//边框颜色，type=checkbox时生效 //边框颜色，type=checkbox时生效
borderColor: { borderColor: {
...@@ -81,6 +74,18 @@ ...@@ -81,6 +74,18 @@
default: 1 default: 1
} }
}, },
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() { data() {
let isNvue = false; let isNvue = false;
// #ifdef APP-NVUE // #ifdef APP-NVUE
......
src/components/firstui/fui-tabbar/fui-tabbar.vue
...@@ -16,11 +16,12 @@ ...@@ -16,11 +16,12 @@
<!-- #endif --> <!-- #endif -->
<text <text
:class="[item.dot?'fui-tabbar__dot':'fui-tabbar__badge',badgeBackground?'':'fui-tabbar__badge-color']" :class="[item.dot?'fui-tabbar__dot':'fui-tabbar__badge',badgeBackground?'':'fui-tabbar__badge-color']"
:style="{background:badgeBackground,color:badgeColor,width:getWidth(item.badge,item.dot)}" :style="{background:getBadgeBgColor,color:badgeColor,width:getWidth(item.badge,item.dot)}"
v-if="item.badge">{{item.dot?'':item.badge}}</text> v-if="item.badge">{{item.dot?'':item.badge}}</text>
</view> </view>
<text class="fui-tabbar__text" :class="{'fui-tabbar__selected-color':!selectedColor && current==index}" <text class="fui-tabbar__text"
:style="{fontSize:size+'rpx',fontWeight:fontWeight,color:current==index?selectedColor:(item.midButton?(item.color || color):color)}" :class="{'fui-tabbar__selected-color':!getSelectedColor && current==index}"
:style="{fontSize:size+'rpx',fontWeight:fontWeight,color:current==index?getSelectedColor:(item.midButton?(item.color || color):color)}"
v-if="item.text">{{item.text}}</text> v-if="item.text">{{item.text}}</text>
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
...@@ -69,12 +70,7 @@ ...@@ -69,12 +70,7 @@
//字体选中颜色 //字体选中颜色
selectedColor: { selectedColor: {
type: String, type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: '' default: ''
// #endif
}, },
//背景颜色 //背景颜色
background: { background: {
...@@ -102,12 +98,7 @@ ...@@ -102,12 +98,7 @@
//角标背景颜色 //角标背景颜色
badgeBackground: { badgeBackground: {
type: String, type: String,
// #ifdef APP-NVUE
default: '#FF2B2B'
// #endif
// #ifndef APP-NVUE
default: '' default: ''
// #endif
}, },
//z-index //z-index
zIndex: { zIndex: {
...@@ -125,6 +116,28 @@ ...@@ -125,6 +116,28 @@
this.initData(vals) this.initData(vals)
} }
}, },
computed: {
getSelectedColor() {
let color = this.selectedColor
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color
},
getBadgeBgColor() {
let color = this.badgeBackground
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.danger) || '#FF2B2B';
}
// #endif
return color
}
},
data() { data() {
let isNvue = false let isNvue = false
// #ifdef APP-NVUE // #ifdef APP-NVUE
...@@ -167,9 +180,8 @@ ...@@ -167,9 +180,8 @@
let iphonex = false; let iphonex = false;
let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax', let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax',
'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini', 'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini',
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini', 'iphone14plus', 'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini',
'iphone14pro', 'iphone14promax', 'iphone15', 'iphone15mini', 'iphone15plus', 'iphone14pro', 'iphone14promax'
'iphone15pro', 'iphone15promax'
] ]
const model = res.model.replace(/\s/g, "").toLowerCase() const model = res.model.replace(/\s/g, "").toLowerCase()
const newModel = model.split('<')[0] const newModel = model.split('<')[0]
......
src/components/firstui/fui-table/fui-table.vue
...@@ -19,9 +19,17 @@ ...@@ -19,9 +19,17 @@
:class="{'fui-table__border-right':border,'fui-table__border-left':border && index===0,'fui-table__center': (item.align || align)==='center','fui-table__right':(item.align || align)==='right','fui-table--col-fixed':item.fixed && !isNvue}" :class="{'fui-table__border-right':border,'fui-table__border-left':border && index===0,'fui-table__center': (item.align || align)==='center','fui-table__right':(item.align || align)==='right','fui-table--col-fixed':item.fixed && !isNvue}"
:style="{borderRightColor:border?borderColor:'transparent',borderLeftColor:border && index===0?borderColor:'transparent',background:item.background || headerBgColor,width:(item.width+divideW)+'px',paddingTop:padding+'rpx',paddingBottom:padding+'rpx',left:item.fixed && item.fixed!=='right' && !isNvue?item.left+'px':'auto',right:item.fixed==='right' && !isNvue?item.right+'px':'auto'}" :style="{borderRightColor:border?borderColor:'transparent',borderLeftColor:border && index===0?borderColor:'transparent',background:item.background || headerBgColor,width:(item.width+divideW)+'px',paddingTop:padding+'rpx',paddingBottom:padding+'rpx',left:item.fixed && item.fixed!=='right' && !isNvue?item.left+'px':'auto',right:item.fixed==='right' && !isNvue?item.right+'px':'auto'}"
v-for="(item,index) in hData" :key="index"> v-for="(item,index) in hData" :key="index">
<text class="fui-table--td-text" <view class="fui-table__checkbox"
:class="{'fui-table__checkbox-color':(!checkboxColor || checkboxColor===true) && chkAll}"
:style="{background:chkAll ?getCheckboxColor:'transparent',borderColor:chkAll ?getCheckboxColor:checkboxBorderColor}"
v-if="item.type==='selection'" @tap.stop="selectionAll">
<view class="fui-table__checkmark"
:style="{borderBottomColor:checkmarkColor,borderRightColor:checkmarkColor}"></view>
</view>
<text v-else class="fui-table--td-text"
:class="{'fui-text__center':(item.align || align)==='center','fui-text__right':(item.align || align)==='right','fui-td__ellipsis':ellipsis}" :class="{'fui-text__center':(item.align || align)==='center','fui-text__right':(item.align || align)==='right','fui-td__ellipsis':ellipsis}"
:style="{width:(item.width+divideW)+'px',color:item.color || color,fontSize:(item.size || size)+'rpx',fontWeight:fontWeight}">{{item.label || item.prop}}</text> :style="{width:(item.width+divideW)+'px',color:item.color || color,fontSize:(item.size || size)+'rpx',fontWeight:fontWeight}">{{item.label || item.prop}}</text>
<view class="fui-table__td-sk" :style="{backgroundColor:borderColor}" <view class="fui-table__td-sk" :style="{backgroundColor:borderColor}"
v-if="border && item.fixed==='right'"></view> v-if="border && item.fixed==='right'"></view>
</view> </view>
...@@ -29,14 +37,22 @@ ...@@ -29,14 +37,22 @@
<view class="fui-table--tr" <view class="fui-table--tr"
:class="{'fui-table__border-bottom':horBorder,'fui-table__border-top':horBorder && !show && index===0}" :class="{'fui-table__border-bottom':horBorder,'fui-table__border-top':horBorder && !show && index===0}"
:style="{borderBottomColor:horBorder?borderColor:'transparent',borderTopColor:horBorder && !show && index===0?borderColor:'transparent'}" :style="{borderBottomColor:horBorder?borderColor:'transparent',borderTopColor:horBorder && !show && index===0?borderColor:'transparent'}"
v-for="(item,index) in itemList" :key="index" @tap.stop="trClick(index)"> v-for="(item,index) in tableData" :key="index" @tap.stop="trClick(index)">
<view class="fui-table--td" <view class="fui-table--td"
:class="{'fui-table__border-right':border,'fui-table__border-left':border && idx===0,'fui-table__center':(model.align || align)==='center','fui-table__right':(model.align || align)==='right','fui-table__td-wrap':model.type===3,'fui-table--col-fixed':model.fixed && !isNvue}" :class="{'fui-table__border-right':border,'fui-table__border-left':border && idx===0,'fui-table__center':(model.align || align)==='center','fui-table__right':(model.align || align)==='right','fui-table__td-wrap':model.type===3,'fui-table--col-fixed':model.fixed && !isNvue}"
v-for="(model,idx) in hData" :key="model.tdId" v-for="(model,idx) in hData" :key="model.tdId"
:style="{borderRightColor:border?borderColor:'transparent',borderLeftColor:border && idx===0?borderColor:'transparent',background:item.background || ((index+1)%2===0 && stripe?stripeColor:background),width:(model.width+divideW)+'px',paddingTop:padding+'rpx',paddingBottom:padding+'rpx',left:model.fixed && model.fixed!=='right' && !isNvue?model.left+'px':'auto',right:model.fixed==='right' && !isNvue?model.right+'px':'auto'}"> :style="{borderRightColor:border?borderColor:'transparent',borderLeftColor:border && idx===0?borderColor:'transparent',background:item.background || ((index+1)%2===0 && stripe?stripeColor:background),width:(model.width+divideW)+'px',paddingTop:padding+'rpx',paddingBottom:padding+'rpx',left:model.fixed && model.fixed!=='right' && !isNvue?model.left+'px':'auto',right:model.fixed==='right' && !isNvue?model.right+'px':'auto'}">
<template v-if="model.type!==3"> <template v-if="model.type!==3">
<view class="fui-table__checkbox"
:class="{'fui-table__checkbox-color':(!checkboxColor || checkboxColor===true) && item.is_selected,'fui-table__disabled':item.is_disabled}"
:style="{background:item.is_selected ?getCheckboxColor:'transparent',borderColor:item.is_selected ?getCheckboxColor:checkboxBorderColor}"
v-if="model.type==='selection'" @tap.stop="selectionChange(index)">
<view class="fui-table__checkmark"
:style="{borderBottomColor:checkmarkColor,borderRightColor:checkmarkColor}">
</view>
</view>
<image class="fui-table--td-img" :src="item[model.prop] || ''" mode="widthFix" <image class="fui-table--td-img" :src="item[model.prop] || ''" mode="widthFix"
v-if="model.type===2" v-else-if="model.type===2"
:style="{width:(model.imgWidth || 120)+'rpx',height:model.imgHeight?model.imgHeight+'rpx':'auto'}"> :style="{width:(model.imgWidth || 120)+'rpx',height:model.imgHeight?model.imgHeight+'rpx':'auto'}">
</image> </image>
<text class="fui-table--td-text" <text class="fui-table--td-text"
...@@ -62,7 +78,7 @@ ...@@ -62,7 +78,7 @@
<script> <script>
export default { export default {
name: "fui-table", name: "fui-table",
emits: ['click', 'rowClick'], emits: ['click', 'rowClick', 'selectionChange', 'select', 'selectAll'],
props: { props: {
header: { header: {
type: Array, type: Array,
...@@ -168,11 +184,51 @@ ...@@ -168,11 +184,51 @@
padding: { padding: {
type: [Number, String], type: [Number, String],
default: 20 default: 20
},
//是否添加多选框
selection: {
type: Boolean,
default: false
},
initEmitChange: {
type: Boolean,
default: false
},
//选择框选中后颜色
checkboxColor: {
type: String,
default: ''
},
checkboxBorderColor: {
type: String,
default: '#eee'
},
checkmarkColor: {
type: String,
default: '#fff'
} }
}, },
watch: { watch: {
header(val) { header(vals) {
this.handleHeader(this.header) this.handleHeader(vals)
},
itemList(vals) {
this.handleData(vals)
},
selection(vals) {
this.handleData(vals)
}
},
computed:{
getCheckboxColor(){
let color = this.checkboxColor
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color
} }
}, },
data() { data() {
...@@ -188,11 +244,13 @@ ...@@ -188,11 +244,13 @@
tableData: [], tableData: [],
totalW: 0, totalW: 0,
isNvue: isNvue, isNvue: isNvue,
scrollH: 0 scrollH: 0,
chkAll: false
}; };
}, },
created() { created() {
this.handleHeader(this.header) this.handleHeader(this.header)
this.handleData(this.itemList)
}, },
methods: { methods: {
getPx(value) { getPx(value) {
...@@ -202,9 +260,16 @@ ...@@ -202,9 +260,16 @@
getId(index) { getId(index) {
return `${index}_tr_${Math.ceil(Math.random() * 10e5).toString(36)}` return `${index}_tr_${Math.ceil(Math.random() * 10e5).toString(36)}`
}, },
handleHeader(vals) { handleHeader(header) {
if (!vals || vals.length === 0) return; if (!header || header.length === 0) return;
vals = JSON.parse(JSON.stringify(vals)) let vals = JSON.parse(JSON.stringify(header))
if (this.selection) {
vals.unshift({
fixed: true,
width: 100,
type: 'selection'
})
}
let winWidth = uni.getSystemInfoSync().windowWidth let winWidth = uni.getSystemInfoSync().windowWidth
let width = 0, let width = 0,
left = 0, left = 0,
...@@ -246,6 +311,18 @@ ...@@ -246,6 +311,18 @@
} }
this.hData = vals; this.hData = vals;
}, },
handleData(vals) {
if (!vals || vals.length === 0) return;
let table = JSON.parse(JSON.stringify(vals))
table.map(item => {
item.is_disabled = item.is_disabled || false;
item.is_selected = item.is_selected || false;
})
this.tableData = table;
if (this.initEmitChange) {
this.emitSelectionChange()
}
},
handleTap(index, j) { handleTap(index, j) {
let item = this.itemList[index] let item = this.itemList[index]
this.$emit('click', { this.$emit('click', {
...@@ -277,6 +354,95 @@ ...@@ -277,6 +354,95 @@
item.fn = fn item.fn = fn
this.hData = data; this.hData = data;
} }
},
selectionAll() {
if (this.chkAll) {
this.chkAll = false
this.tableData.map(item => {
if (!item.is_disabled) {
item.is_selected = false
}
})
} else {
this.chkAll = true;
this.tableData.map(item => {
if (!item.is_disabled) {
item.is_selected = true
}
})
}
this.$emit('selectAll', {
is_selected: this.chkAll
})
setTimeout(() => {
this.emitSelectionChange()
}, 0)
},
emitSelectionChange() {
const itemList = this.tableData.filter(item => item.is_selected === true && item.is_disabled !== true)
let data = JSON.parse(JSON.stringify(itemList))
data.forEach(item => {
delete item.is_selected
delete item.is_disabled
})
this.$emit('selectionChange', data)
},
checkSelectionAll() {
if (!this.tableData || this.tableData.length === 0) return;
const index = this.tableData.findIndex(item => item.is_selected === false && item.is_disabled !== true)
if (~index) {
this.chkAll = false
} else {
this.chkAll = true
}
setTimeout(() => {
this.emitSelectionChange()
}, 0)
},
selectionChange(index, selected) {
const item = this.tableData[index]
if (item.is_disabled) return;
if (selected === undefined || selected === null) {
item.is_selected = !item.is_selected;
} else {
item.is_selected = selected;
}
this.$emit('select', {
is_selected: item.is_selected,
item: item,
index: index
})
this.checkSelectionAll()
},
//用于多选表格，清空用户的选择
clearSelection() {
this.chkAll = false
this.tableData.map(item => {
if (!item.is_disabled) {
item.is_selected = false
}
})
},
toggleRowSelection(row, selected) {
const index = this.itemList.indexOf(row)
if (index !== -1) {
this.selectionChange(index, selected)
}
},
toggleRowDisabled(row, disabled) {
const index = this.itemList.indexOf(row)
if (index !== -1) {
const item = this.tableData[index]
if (disabled === undefined || disabled === null) {
item.is_disabled = !item.is_disabled;
} else {
item.is_disabled = disabled;
}
}
},
//用于多选表格，切换所有行的选中状态（全选/取消）
toggleAllSelection() {
this.selectionAll()
} }
} }
} }
...@@ -451,4 +617,62 @@ ...@@ -451,4 +617,62 @@
} }
/* #endif */ /* #endif */
.fui-table__checkbox {
font-size: 0;
color: rgba(0, 0, 0, 0);
width: 36rpx;
height: 36rpx;
border-width: 1px;
border-style: solid;
/* #ifndef APP-NVUE */
display: inline-flex;
box-sizing: border-box;
vertical-align: top;
flex-shrink: 0;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
border-radius: 8rpx;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
/* #ifndef APP-NVUE */
.fui-table__checkbox-color {
background: var(--fui-color-primary, #465CFF) !important;
border-color: var(--fui-color-primary, #465CFF) !important;
}
/* #endif */
.fui-table__disabled {
opacity: .5;
/* #ifdef H5 */
cursor: not-allowed;
/* #endif */
}
.fui-table__checkmark {
width: 18rpx;
height: 36rpx;
border-bottom-style: solid;
border-bottom-width: 3px;
border-bottom-color: #FFFFFF;
border-right-style: solid;
border-right-width: 3px;
border-right-color: #FFFFFF;
/* #ifndef APP-NVUE */
box-sizing: border-box;
transform: rotate(45deg) scale(0.5) translateZ(0);
/* #endif */
/* #ifdef APP-NVUE */
transform: rotate(45deg) scale(0.5);
/* #endif */
transform-origin: 54% 48%;
}
</style> </style>
src/components/firstui/fui-tabs/fui-tabs.vue
...@@ -12,8 +12,8 @@ ...@@ -12,8 +12,8 @@
<view class="fui-tabs__line-wrap" :class="{'fui-tabs__line-center':center}" <view class="fui-tabs__line-wrap" :class="{'fui-tabs__line-center':center}"
:style="{bottom:bottom +'rpx',left:`-${padding}rpx`,right:`-${padding}rpx`}" v-if="isSlider"> :style="{bottom:bottom +'rpx',left:`-${padding}rpx`,right:`-${padding}rpx`}" v-if="isSlider">
<view class="fui-tabs__ac-line" <view class="fui-tabs__ac-line"
:class="{'fui-tabs__line-short':short,'fui-tabs__full':!short,'fui-tabs__slider-color':!sliderBackground}" :class="{'fui-tabs__line-short':short,'fui-tabs__full':!short,'fui-tabs__slider-color':!getSliderBgColor}"
:style="{height:sliderHeight+'rpx',background:sliderBackground,borderRadius:sliderRadius==-1?sliderHeight+'rpx':sliderRadius+'rpx',transform: `scale(${tabIndex===index?(isNvue?1:scale):(isNvue?0.00001:0)})`}"> :style="{height:sliderHeight+'rpx',background:getSliderBgColor,borderRadius:sliderRadius==-1?sliderHeight+'rpx':sliderRadius+'rpx',transform: `scale(${tabIndex===index?(isNvue?1:scale):(isNvue?0.00001:0)})`}">
</view> </view>
</view> </view>
<image class="fui-tabs__icon" :class="{'fui-tabs__icon-column':direction==='column'}" <image class="fui-tabs__icon" :class="{'fui-tabs__icon-column':direction==='column'}"
...@@ -22,11 +22,11 @@ ...@@ -22,11 +22,11 @@
<!-- #ifdef APP-NVUE --> <!-- #ifdef APP-NVUE -->
<view class="fui-tabs__text"> <view class="fui-tabs__text">
<text class="fui-tabs__text-nvue" <text class="fui-tabs__text-nvue"
:class="{'fui-tabs__selected-color':!selectedColor && tabIndex===index,'fui-tabs__text-color':!color && tabIndex!==index}" :class="{'fui-tabs__selected-color':!getSelectedColor && tabIndex===index,'fui-tabs__text-color':!color && tabIndex!==index}"
:style="{fontSize:(tabIndex===index && isNvue? selectedSize:size)+'rpx',color:tabIndex===index?selectedColor:color,fontWeight:tabIndex===index?selectedFontWeight:fontWeight,height:height+'rpx',lineHeight:height+'rpx'}">{{tab.name}}</text> :style="{fontSize:(tabIndex===index && isNvue? selectedSize:size)+'rpx',color:tabIndex===index?getSelectedColor:color,fontWeight:tabIndex===index?selectedFontWeight:fontWeight,height:height+'rpx',lineHeight:height+'rpx'}">{{tab.name}}</text>
<text <text
:class="{'fui-tabs__badge-color':!badgeBackground,'fui-tabs__badge-dot':isDot,'fui-tabs__badge':!isDot}" :class="{'fui-tabs__badge-color':!getBadgeBgColor,'fui-tabs__badge-dot':isDot,'fui-tabs__badge':!isDot}"
:style="{color:badgeColor,background:badgeBackground}" :style="{color:badgeColor,background:getBadgeBgColor}"
v-if="tab.badge">{{isDot?'':tab.badge}}</text> v-if="tab.badge">{{isDot?'':tab.badge}}</text>
</view> </view>
...@@ -34,11 +34,11 @@ ...@@ -34,11 +34,11 @@
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
<!--vue3中text嵌套text使用v-if会显示v-if文本--> <!--vue3中text嵌套text使用v-if会显示v-if文本-->
<view class="fui-tabs__text" <view class="fui-tabs__text"
:class="{'fui-tabs__selected-color':!selectedColor && tabIndex===index,'fui-tabs__text-color':!color && tabIndex!==index}" :class="{'fui-tabs__selected-color':!getSelectedColor && tabIndex===index,'fui-tabs__text-color':!color && tabIndex!==index}"
:style="{fontSize:(tabIndex===index && isNvue? selectedSize:size)+'rpx',color:tabIndex===index?selectedColor:color,fontWeight:tabIndex===index?selectedFontWeight:fontWeight,transform:`scale(${tabIndex===index && !isNvue?scale:1})`}"> :style="{fontSize:(tabIndex===index && isNvue? selectedSize:size)+'rpx',color:tabIndex===index?getSelectedColor:color,fontWeight:tabIndex===index?selectedFontWeight:fontWeight,transform:`scale(${tabIndex===index && !isNvue?scale:1})`}">
{{tab.name}}<text {{tab.name}}<text
:class="{'fui-tabs__badge-color':!badgeBackground,'fui-tabs__badge-dot':isDot,'fui-tabs__badge':!isDot}" :class="{'fui-tabs__badge-color':!getBadgeBgColor,'fui-tabs__badge-dot':isDot,'fui-tabs__badge':!isDot}"
:style="{color:badgeColor,background:badgeBackground}" :style="{color:badgeColor,background:getBadgeBgColor}"
v-if="tab.badge">{{isDot?'':tab.badge}}</text> v-if="tab.badge">{{isDot?'':tab.badge}}</text>
</view> </view>
<!-- #endif --> <!-- #endif -->
...@@ -113,18 +113,10 @@ ...@@ -113,18 +113,10 @@
default: 32 default: 32
}, },
//选中后字体颜色 //选中后字体颜色
// #ifdef APP-NVUE
selectedColor: {
type: String,
default: '#465CFF'
},
// #endif
// #ifndef APP-NVUE
selectedColor: { selectedColor: {
type: String, type: String,
default: '' default: ''
}, },
// #endif
//选中后字重 //选中后字重
selectedFontWeight: { selectedFontWeight: {
type: [Number, String], type: [Number, String],
...@@ -140,18 +132,10 @@ ...@@ -140,18 +132,10 @@
type: String, type: String,
default: '#fff' default: '#fff'
}, },
// #ifdef APP-NVUE
badgeBackground: {
type: String,
default: '#FF2B2B'
},
// #endif
// #ifndef APP-NVUE
badgeBackground: { badgeBackground: {
type: String, type: String,
default: '' default: ''
}, },
// #endif
isDot: { isDot: {
type: Boolean, type: Boolean,
default: false default: false
...@@ -166,18 +150,10 @@ ...@@ -166,18 +150,10 @@
default: 5 default: 5
}, },
//滑块背景颜 //滑块背景颜
// #ifdef APP-NVUE
sliderBackground: {
type: String,
default: '#465CFF'
},
// #endif
// #ifndef APP-NVUE
sliderBackground: { sliderBackground: {
type: String, type: String,
default: '' default: ''
}, },
// #endif
//滑块 radius //滑块 radius
sliderRadius: { sliderRadius: {
type: [Number, String], type: [Number, String],
...@@ -252,6 +228,38 @@ ...@@ -252,6 +228,38 @@
created() { created() {
this.initData(this.tabs) this.initData(this.tabs)
}, },
computed:{
getSelectedColor(){
let color = this.selectedColor
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color
},
getSliderBgColor(){
let color = this.sliderBackground
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color
},
getBadgeBgColor(){
let color = this.badgeBackground
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.danger) || '#FF2B2B';
}
// #endif
return color
}
},
data() { data() {
let isNvue = false; let isNvue = false;
// #ifdef APP-NVUE // #ifdef APP-NVUE
......
src/components/firstui/fui-tag/fui-tag.vue
...@@ -10,6 +10,14 @@ ...@@ -10,6 +10,14 @@
</template> </template>
<script> <script>
function hexToRGB(hex) {
if (hex.length === 4) {
let text = hex.substring(1, 4);
hex = '#' + text + text;
}
let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? `${parseInt(result[1], 16)},${parseInt(result[2], 16)},${parseInt(result[3], 16)}` : '241,244,250';
}
export default { export default {
name: "fui-tag", name: "fui-tag",
emits: ['click'], emits: ['click'],
...@@ -103,22 +111,16 @@ ...@@ -103,22 +111,16 @@
// #ifdef APP-NVUE // #ifdef APP-NVUE
isNvue = true isNvue = true
// #endif // #endif
const app = uni && uni.$fui && uni.$fui.color;
return { return {
isNvue: isNvue, isNvue: isNvue,
// #ifdef APP-NVUE // #ifdef APP-NVUE
dark: { dark: {
'primary': '#465CFF', primary: (app && app.primary) || '#465CFF',
'success': '#09BE4F', success: (app && app.success) || '#09BE4F',
'warning': '#FFB703', warning: (app && app.warning) || '#FFB703',
'danger': '#FF2B2B', danger: (app && app.danger) || '#FF2B2B',
'purple': '#6831FF' purple: (app && app.purple) || '#6831FF',
},
light: {
'primary': '#F1F4FA',
'success': 'rgba(9, 190, 79, .05)',
'warning': 'rgba(255, 183, 3, .1)',
'danger': 'rgba(255, 43, 43, .05)',
'purple': 'rgba(104, 49, 255, .05)'
} }
// #endif // #endif
} }
...@@ -130,7 +132,7 @@ ...@@ -130,7 +132,7 @@
if (!background) { if (!background) {
switch (this.theme) { switch (this.theme) {
case 'light': case 'light':
background = this.light[this.type] background = `rgba(${hexToRGB(this.dark[this.type])},.05)`
break; break;
case 'dark': case 'dark':
background = this.dark[this.type] background = this.dark[this.type]
...@@ -161,7 +163,7 @@ ...@@ -161,7 +163,7 @@
// #ifdef APP-NVUE // #ifdef APP-NVUE
if (!borderColor) { if (!borderColor) {
if (this.theme === 'light') { if (this.theme === 'light') {
borderColor = this.light[this.type] borderColor = `rgba(${hexToRGB(this.dark[this.type])},.05)`
} else { } else {
borderColor = this.dark[this.type] borderColor = this.dark[this.type]
} }
......
src/components/firstui/fui-text/fui-text.vue
...@@ -6,8 +6,8 @@ ...@@ -6,8 +6,8 @@
<slot></slot> <slot></slot>
<text class="fui-text__content" <text class="fui-text__content"
:style="{color:getColor,fontSize:getSize,lineHeight:lineHeight?getSize:'auto',textAlign:align,textDecoration:decoration,fontWeight:fontWeight}" :style="{color:getColor,fontSize:getSize,lineHeight:lineHeight?getSize:'auto',textAlign:align,textDecoration:decoration,fontWeight:fontWeight}"
:class="[color?'':'fui-text__'+type]" :selectable="selectable" :userSelect="userSelect" :class="[color?'':'fui-text__'+type,unShrink?'fui-text__unshrink':'']" :selectable="selectable"
:decode="decode">{{getText(text, textType, format)}}</text> :userSelect="userSelect" :decode="decode">{{getText(text, textType, format)}}</text>
<slot name="right"></slot> <slot name="right"></slot>
</view> </view>
</template> </template>
...@@ -105,32 +105,35 @@ ...@@ -105,32 +105,35 @@
type: Boolean, type: Boolean,
default: false default: false
}, },
unShrink: {
type: Boolean,
default: false
},
param: { param: {
type: [Number, String], type: [Number, String],
default: '' default: ''
} }
}, },
data() {
return {}
},
computed: { computed: {
getSize() { getSize() {
const size = (uni.$fui && uni.$fui.fuiText && uni.$fui.fuiText.size) || 32 const size = (uni && uni.$fui && uni.$fui.fuiText && uni.$fui.fuiText.size) || 32
const unit = (uni.$fui && uni.$fui.fuiText && uni.$fui.fuiText.unit) || 'rpx' const unit = (uni && uni.$fui && uni.$fui.fuiText && uni.$fui.fuiText.unit) || 'rpx'
return (this.size || size) + (this.unit || unit) return (this.size || size) + (this.unit || unit)
}, },
getColor() { getColor() {
let color = this.color || '' let color = this.color || ''
// #ifdef APP-NVUE // #ifdef APP-NVUE
if (!color && this.type) { if (!color && this.type) {
const app = uni && uni.$fui && uni.$fui.color;
const text = uni && uni.$fui && uni.$fui.fuiText;
color = { color = {
primary: '#465CFF', primary: (app && app.primary) || '#465CFF',
success: '#09BE4F', success: (app && app.success) || '#09BE4F',
warning: '#FFB703', warning: (app && app.warning) || '#FFB703',
danger: '#FF2B2B', danger: (app && app.danger) || '#FF2B2B',
purple: '#6831FF', purple: (app && app.purple) || '#6831FF',
gray: '#B2B2B2', gray: '#B2B2B2',
black: '#181818' black: (text && text.color) || '#181818'
} [this.type] } [this.type]
} }
// #endif // #endif
...@@ -215,6 +218,10 @@ ...@@ -215,6 +218,10 @@
display: flex; display: flex;
} }
.fui-text__unshrink {
flex-shrink: 0;
}
/* #endif */ /* #endif */
......
src/components/firstui/fui-textarea/fui-textarea.vue
<template> <template>
<view :class="{'fui-textarea__border':textareaBorder && !isRadius}" <view class="fui-textarea__wrap"
:style="{marginTop:marginTop+'rpx',borderColor:borderColor}" @tap="fieldClick"> :class="{'fui-textarea__flex-start':flexStart,'fui-textarea__border-nvue':textareaBorder}"
<view class="fui-textarea__wrap" :class="{'fui-textarea__flex-start':flexStart}" :style="{paddingTop:padding[0] || 0,paddingRight:padding[1] || 0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0,background:backgroundColor,borderRadius:radius+'rpx',borderColor:borderColor,marginTop:marginTop+'rpx'}"
:style="{paddingTop:padding[0] || 0,paddingRight:padding[1] || 0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0,backgroundColor:backgroundColor,borderRadius:radius+'rpx'}"> @tap="fieldClick">
<view v-if="borderTop && !textareaBorder && !isRadius" <view v-if="borderTop && !textareaBorder"
:style="{background:borderColor,left:topLeft+'rpx',right:topRight+'rpx'}" :style="{background:borderColor,left:topLeft+'rpx',right:topRight+'rpx'}" class="fui-textarea__border-top">
class="fui-textarea__border-top">
</view> </view>
<!-- #ifndef APP-NVUE -->
<view class="fui-textarea__border" :style="{borderRadius:getRadius,borderColor:borderColor}"
v-if="textareaBorder"></view>
<!-- #endif -->
<!-- #ifdef APP-NVUE --> <!-- #ifdef APP-NVUE -->
<view class="fui-textarea__required" v-if="required && !flexStart"> <view class="fui-textarea__required" v-if="required && !flexStart">
<text :style="{color:requiredColor,paddingTop:'2rpx'}">*</text> <text :style="{color:getRequiredColor,paddingTop:'2rpx'}">*</text>
</view> </view>
<text class="fui-textarea__required" :style="{color:requiredColor,top:requiredTop}" <text class="fui-textarea__required" :style="{color:getRequiredColor,top:requiredTop}"
v-if="required && flexStart">*</text> v-if="required && flexStart">*</text>
<!-- #endif --> <!-- #endif -->
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
<view class="fui-textarea__required" :class="{'fui-required__flex-start':flexStart}" <view class="fui-textarea__required" :class="{'fui-required__flex-start':flexStart}"
:style="{color:requiredColor,top:flexStart?requiredTop:'50%'}" v-if="required">*</view> :style="{color:getRequiredColor,top:flexStart?requiredTop:'50%'}" v-if="required">*</view>
<!-- #endif --> <!-- #endif -->
<view class="fui-textarea__label" :style="{minWidth:labelWidth+'rpx'}" v-if="label"> <view class="fui-textarea__label" :style="{minWidth:labelWidth+'rpx'}" v-if="label">
<text :style="{fontSize:labelSize+'rpx',color:labelColor}">{{label}}</text> <text :style="{fontSize:labelSize+'rpx',color:labelColor}">{{label}}</text>
...@@ -39,27 +42,24 @@ ...@@ -39,27 +42,24 @@
</view> </view>
</view> </view>
<slot></slot> <slot></slot>
<view v-if="borderBottom && !textareaBorder && !isRadius" <view v-if="borderBottom && !textareaBorder"
:style="{background:borderColor,left:bottomLeft+'rpx',right:bottomRight+'rpx'}" :style="{background:borderColor,left:bottomLeft+'rpx',right:bottomRight+'rpx'}"
class="fui-textarea__border-bottom"></view> class="fui-textarea__border-bottom"></view>
</view> </view>
</view>
</template> </template>
<script> <script>
export default { export default {
name: "fui-textarea", name: "fui-textarea",
emits: ['input', 'update:modelValue', 'focus', 'blur', 'confirm', 'click', 'linechange', 'keyboardheightchange'], emits: ['input', 'update:modelValue', 'focus', 'blur', 'confirm', 'click', 'linechange', 'keyboardheightchange'],
// #ifndef VUE3
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
//加group是为了避免在表单中使用时给组件加value属性 //加group是为了避免在表单中使用时给组件加value属性
behaviors: ['wx://form-field-group'], behaviors: ['wx://form-field-group'],
// #endif // #endif
// #ifdef MP-BAIDU || MP-QQ // #ifdef MP-BAIDU || MP-QQ || H5
//如果在这些平台不需要也能识别，则删除 //如果在这些平台不需要也能识别，则删除
behaviors: ['uni://form-field'], behaviors: ['uni://form-field'],
// #endif // #endif
// #endif
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
options: { options: {
addGlobalClass: true, addGlobalClass: true,
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
}, },
requiredColor: { requiredColor: {
type: String, type: String,
default: '#FF2B2B' default: ''
}, },
requiredTop: { requiredTop: {
type: String, type: String,
...@@ -235,7 +235,7 @@ ...@@ -235,7 +235,7 @@
type: [Number, String], type: [Number, String],
default: 0 default: 0
}, },
//边框颜色，inputBorder为true时，非nvue端边框颜色通过css变量修改 //边框颜色
borderColor: { borderColor: {
type: String, type: String,
default: '#eaeef1' default: '#eaeef1'
...@@ -286,13 +286,25 @@ ...@@ -286,13 +286,25 @@
default: 28 default: 28
} }
}, },
computed: {
getRadius() {
return Number(this.radius) * 2 + 'rpx'
},
getRequiredColor() {
let color = this.requiredColor;
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.danger) || '#FF2B2B';
}
return color;
}
},
data() { data() {
return { return {
placeholderStyl: '', placeholderStyl: '',
count: 0, count: 0,
focused: false, focused: false,
val: '', val: ''
isRadius: false
}; };
}, },
watch: { watch: {
...@@ -313,13 +325,6 @@ ...@@ -313,13 +325,6 @@
value(newVal) { value(newVal) {
this.val = this.getVal(newVal) this.val = this.getVal(newVal)
this.count = this.getCount(String(this.val).length) this.count = this.getCount(String(this.val).length)
},
radius(val) {
if (this.radius && this.radius !== true && Number(this.radius) > 0) {
this.isRadius = true
} else {
this.isRadius = false
}
} }
}, },
created() { created() {
...@@ -338,9 +343,6 @@ ...@@ -338,9 +343,6 @@
this.fieldPlaceholderStyle() this.fieldPlaceholderStyle()
}, },
mounted() { mounted() {
if (this.radius && this.radius !== true && Number(this.radius) > 0) {
this.isRadius = true
}
this.$nextTick(() => { this.$nextTick(() => {
this.focused = this.focus this.focused = this.focus
}) })
...@@ -417,6 +419,7 @@ ...@@ -417,6 +419,7 @@
flex: 1; flex: 1;
align-items: center; align-items: center;
position: relative; position: relative;
border-width: 0;
} }
.fui-textarea__flex-start { .fui-textarea__flex-start {
...@@ -534,21 +537,18 @@ ...@@ -534,21 +537,18 @@
/* #endif */ /* #endif */
.fui-textarea__border {
border-radius: 4rpx;
position: relative;
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
.fui-textarea__border-nvue {
border-style: solid; border-style: solid;
border-width: 0.5px; border-width: 0.5px;
/* #endif */
/* #ifndef APP-NVUE */
border-width: 0;
/* #endif */
} }
/* #endif */
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
.fui-textarea__border::after { .fui-textarea__border {
content: ' '; border-radius: 4rpx;
position: relative;
position: absolute; position: absolute;
height: 200%; height: 200%;
width: 200%; width: 200%;
...@@ -571,6 +571,9 @@ ...@@ -571,6 +571,9 @@
} }
.fui-textarea__counter { .fui-textarea__counter {
/* #ifndef APP-NVUE */
width: 100%;
/* #endif */
padding-top: 8rpx; padding-top: 8rpx;
text-align: right; text-align: right;
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
......
src/components/firstui/fui-timeaxis/fui-timeaxis.vue
...@@ -37,9 +37,6 @@ ...@@ -37,9 +37,6 @@
// #endif // #endif
} }
}, },
data() {
return {}
},
provide() { provide() {
return { return {
timeaxis: this timeaxis: this
......
src/components/firstui/fui-upload-video/fui-upload-video.vue
...@@ -19,14 +19,16 @@ ...@@ -19,14 +19,16 @@
<fui-icon name="close" color="#fff" :size="28"></fui-icon> <fui-icon name="close" color="#fff" :size="28"></fui-icon>
</view> </view>
<progress border-radius="6" class="fui-uploadv__progress" backgroundColor="rgba(255, 255, 255, 0.5)" <progress border-radius="6" class="fui-uploadv__progress" backgroundColor="rgba(255, 255, 255, 0.5)"
:activeColor="progressColor" :percent="progress[index]" :stroke-width="3" :activeColor="getProgressColor" :percent="progress[index]" :stroke-width="3"
v-if="progress[index]<100 && progress[index]>0"></progress> v-if="progress[index]<100 && progress[index]>0"></progress>
</view> </view>
</view> </view>
<view class="fui-uploadv__item" :style="{width:width+'rpx',height:height+'rpx',background:background}" <view class="fui-uploadv__item"
:class="[borderColor && borderColor!==true?'fui-upload__border':'fui-upload__noborder']"
:style="{width:width+'rpx',height:height+'rpx',background:background,borderRadius:radius+'rpx',borderColor:borderColor,borderStyle:borderSytle}"
v-if="showAdd" @tap.stop="chooseVideo"> v-if="showAdd" @tap.stop="chooseVideo">
<slot> <slot>
<fui-icon name="plus" :size="88" :color="addColor"></fui-icon> <fui-icon name="plus" :size="addSize" :color="addColor"></fui-icon>
</slot> </slot>
</view> </view>
</view> </view>
...@@ -37,7 +39,7 @@ ...@@ -37,7 +39,7 @@
// import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue" // import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
export default { export default {
name: "fui-upload-video", name: "fui-upload-video",
emits: ['success', 'error', 'complete'], emits: ['success', 'error', 'complete', 'reupload'],
// components:{ // components:{
// fuiIcon // fuiIcon
// }, // },
...@@ -69,17 +71,34 @@ ...@@ -69,17 +71,34 @@
type: String, type: String,
default: '#333' default: '#333'
}, },
addSize: {
type: [Number, String],
default: 88
},
background: { background: {
type: String, type: String,
default: '#eee' default: '#eee'
}, },
radius: {
type: [Number, String],
default: 0
},
borderColor: {
type: String,
default: ''
},
//solid、dashed、dotted
borderSytle: {
type: String,
default: 'solid'
},
isView: { isView: {
type: Boolean, type: Boolean,
default: false default: false
}, },
progressColor: { progressColor: {
type: String, type: String,
default: '#465CFF' default: ''
}, },
delColor: { delColor: {
type: String, type: String,
...@@ -97,6 +116,11 @@ ...@@ -97,6 +116,11 @@
type: Boolean, type: Boolean,
default: false default: false
}, },
//V1.9.8+ 是否调用upload 方法进行上传操作
callUpload: {
type: Boolean,
default: false
},
compressed: { compressed: {
type: Boolean, type: Boolean,
default: true default: true
...@@ -180,6 +204,14 @@ ...@@ -180,6 +204,14 @@
show = false show = false
} }
return show return show
},
getProgressColor() {
let color = this.progressColor;
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
return color;
} }
}, },
methods: { methods: {
...@@ -215,12 +247,18 @@ ...@@ -215,12 +247,18 @@
reUpload(index) { reUpload(index) {
if (this.progress[index] !== -99) return; if (this.progress[index] !== -99) return;
this.$set(this.status, index, 'uploading') this.$set(this.status, index, 'uploading')
if (this.callUpload) {
this.$emit('reupload', {
index
})
} else {
this.$set(this.progress, index, 0) this.$set(this.progress, index, 0)
this.uploadVideo(index, this.urls[index]).then((res) => { this.uploadVideo(index, this.urls[index]).then((res) => {
this._success(res) this._success(res)
}).catch((res) => { }).catch((res) => {
this._error(res) this._error(res)
}) })
}
}, },
getStatus() { getStatus() {
if (this.status.length === 0) return ''; if (this.status.length === 0) return '';
...@@ -288,11 +326,13 @@ ...@@ -288,11 +326,13 @@
return; return;
} }
} }
// #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-JD
if (Number(this.size) * 1024 * 1024 < e.size) { if (Number(this.size) * 1024 * 1024 < e.size) {
let err = `单个视频大小不能超过：${this.size}MB` let err = `单个视频大小不能超过：${this.size}MB`
this.toast(err); this.toast(err);
return; return;
} }
// #endif
this.urls.push(path) this.urls.push(path)
this.status.push(this.immediate ? 'uploading' : 'preupload') this.status.push(this.immediate ? 'uploading' : 'preupload')
...@@ -395,6 +435,49 @@ ...@@ -395,6 +435,49 @@
}) })
} }
} }
},
setProgress(progress, index) {
this.$set(this.progress, index, progress)
},
upload(callback, index) {
// 传入一个返回Promise的文件上传的函数
//V1.9.8+，新增此方法主要为了更好的扩展使用
let urls = [...this.urls]
if (index === undefined || index === null) {
const len = urls.length
for (let i = 0; i < len; i++) {
if (urls[i].startsWith('https')) {
continue;
} else {
this.$set(this.status, i, "uploading")
this.$set(this.progress, i, 0)
if (typeof callback === 'function') {
callback(urls[i], i).then(res => {
this.$set(this.status, i, 'success')
this.$set(this.progress, i, 100)
this.result(res, i)
}).catch(err => {
this.$set(this.status, i, 'error')
this.$set(this.status, i, -99)
})
}
}
}
} else {
//如果传入index，则是重新上传时调用
this.$set(this.status, index, "uploading")
this.$set(this.progress, index, 0)
if (typeof callback === 'function') {
callback(urls[index], index).then(res => {
this.$set(this.status, index, 'success')
this.$set(this.progress, index, 100)
this.result(res, index)
}).catch(err => {
this.$set(this.status, index, 'error')
this.$set(this.progress, index, -99)
})
}
}
} }
} }
} }
...@@ -422,9 +505,20 @@ ...@@ -422,9 +505,20 @@
cursor: pointer; cursor: pointer;
/* #endif */ /* #endif */
position: relative; position: relative;
/* #ifndef APP-NVUE */
box-sizing: border-box;
/* #endif */
}
.fui-upload__noborder {
border-width: 0;
}
.fui-upload__border {
border-width: 1px;
} }
.fui-upload__video{ .fui-upload__video {
width: 640rpx; width: 640rpx;
height: 320rpx; height: 320rpx;
} }
......
src/components/firstui/fui-upload/fui-upload.vue
<template> <template>
<view class="fui-upload__wrap"> <view class="fui-upload__wrap">
<view class="fui-upload__item" :style="{width:width+'rpx',height:height+'rpx'}" v-for="(item,index) in urls" <view class="fui-upload__item" :style="{width:width+'rpx',height:height+'rpx',borderRadius:radius+'rpx'}"
:key="index"> v-for="(item,index) in urls" :key="index">
<image class="fui-upload__img" :style="{width:width+'rpx',height:height+'rpx'}" :src="item" <image class="fui-upload__img" :style="{width:width+'rpx',height:height+'rpx',borderRadius:radius+'rpx'}"
mode="aspectFill" @tap.stop="previewImage(index)"></image> :src="item" mode="aspectFill" @tap.stop="previewImage(index)"></image>
<view class="fui-upload__mask" v-if="status[index]!=='success' && status[index]!=='preupload' "> <view class="fui-upload__mask" v-if="status[index]!=='success' && status[index]!=='preupload' ">
<fui-icon name="warning-fill" color="#fff" :size="48" v-if="status[index]==='error'"></fui-icon> <fui-icon name="warning-fill" color="#fff" :size="48" v-if="status[index]==='error'"></fui-icon>
<text class="fui-reupload__btn" @tap.stop="reUpload(index)" v-if="status[index]==='error'">重新上传</text> <text class="fui-reupload__btn" @tap.stop="reUpload(index)" v-if="status[index]==='error'">重新上传</text>
...@@ -19,10 +19,12 @@ ...@@ -19,10 +19,12 @@
<fui-icon name="close" color="#fff" :size="32"></fui-icon> <fui-icon name="close" color="#fff" :size="32"></fui-icon>
</view> </view>
</view> </view>
<view class="fui-upload__item" :style="{width:width+'rpx',height:height+'rpx',background:background}" <view class="fui-upload__item"
:class="[borderColor && borderColor!==true?'fui-upload__border':'fui-upload__noborder']"
:style="{width:width+'rpx',height:height+'rpx',background:background,borderRadius:radius+'rpx',borderColor:borderColor,borderStyle:borderSytle}"
v-if="showAdd" @tap.stop="chooseImage"> v-if="showAdd" @tap.stop="chooseImage">
<slot> <slot>
<fui-icon name="plus" :size="88" :color="addColor"></fui-icon> <fui-icon name="plus" :size="addSize" :color="addColor"></fui-icon>
</slot> </slot>
</view> </view>
</view> </view>
...@@ -33,7 +35,7 @@ ...@@ -33,7 +35,7 @@
// import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue" // import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
export default { export default {
name: "fui-upload", name: "fui-upload",
emits: ['success', 'error', 'complete', 'preview'], emits: ['success', 'error', 'complete', 'preview', 'reupload'],
// components:{ // components:{
// fuiIcon // fuiIcon
// }, // },
...@@ -64,10 +66,27 @@ ...@@ -64,10 +66,27 @@
type: String, type: String,
default: '#333' default: '#333'
}, },
addSize: {
type: [Number, String],
default: 88
},
background: { background: {
type: String, type: String,
default: '#eee' default: '#eee'
}, },
radius: {
type: [Number, String],
default: 0
},
borderColor: {
type: String,
default: ''
},
//solid、dashed、dotted
borderSytle: {
type: String,
default: 'solid'
},
isDel: { isDel: {
type: Boolean, type: Boolean,
default: true default: true
...@@ -88,6 +107,11 @@ ...@@ -88,6 +107,11 @@
type: Boolean, type: Boolean,
default: false default: false
}, },
//V1.9.8+ 是否调用upload 方法进行上传操作
callUpload: {
type: Boolean,
default: false
},
sizeType: { sizeType: {
type: Array, type: Array,
default () { default () {
...@@ -136,6 +160,7 @@ ...@@ -136,6 +160,7 @@
data() { data() {
return { return {
urls: [], urls: [],
tempFiles: [],
//preupload、uploading、success、error //preupload、uploading、success、error
status: [] status: []
}; };
...@@ -163,19 +188,30 @@ ...@@ -163,19 +188,30 @@
urls = urls || [] urls = urls || []
this.status = []; this.status = [];
let status = []; let status = [];
let tempFiles = []
urls.forEach(item => { urls.forEach(item => {
status.push('success') status.push('success')
tempFiles.push({
path: item
})
}) })
this.urls = [...urls]; this.urls = [...urls];
this.tempFiles = tempFiles;
this.status = status; this.status = status;
}, },
reUpload(index) { reUpload(index) {
this.$set(this.status, index, 'uploading') this.$set(this.status, index, 'uploading')
if (this.callUpload) {
this.$emit('reupload', {
index
})
} else {
this.uploadImage(index, this.urls[index]).then((res) => { this.uploadImage(index, this.urls[index]).then((res) => {
this._success(res) this._success(res)
}).catch((res) => { }).catch((res) => {
this._error(res) this._error(res)
}) })
}
}, },
getStatus() { getStatus() {
if (this.status.length === 0) return ''; if (this.status.length === 0) return '';
...@@ -272,6 +308,7 @@ ...@@ -272,6 +308,7 @@
} }
imageArr.push(path) imageArr.push(path)
this.urls.push(path) this.urls.push(path)
this.tempFiles.push(e.tempFiles[i])
this.status.push(this.immediate ? 'uploading' : 'preupload') this.status.push(this.immediate ? 'uploading' : 'preupload')
} }
this.onComplete('choose') this.onComplete('choose')
...@@ -339,6 +376,7 @@ ...@@ -339,6 +376,7 @@
success(res) { success(res) {
if (res.confirm) { if (res.confirm) {
_this.urls.splice(index, 1) _this.urls.splice(index, 1)
_this.tempFiles.splice(index, 1)
_this.status.splice(index, 1) _this.status.splice(index, 1)
_this.onComplete('delete') _this.onComplete('delete')
} }
...@@ -347,6 +385,7 @@ ...@@ -347,6 +385,7 @@
} else { } else {
this.urls.splice(index, 1) this.urls.splice(index, 1)
this.tempFiles.splice(index, 1)
this.status.splice(index, 1) this.status.splice(index, 1)
this.onComplete('delete') this.onComplete('delete')
} }
...@@ -386,6 +425,40 @@ ...@@ -386,6 +425,40 @@
}) })
} }
} }
},
upload(callback, index) {
// 传入一个返回Promise的文件上传的函数
//V1.9.8+，新增此方法主要为了更好的扩展使用
if (index === undefined || index === null) {
let urls = [...this.urls]
const len = urls.length
for (let i = 0; i < len; i++) {
if (urls[i].startsWith('https')) {
continue;
} else {
this.$set(this.status, i, "uploading")
if (typeof callback === 'function') {
callback(this.tempFiles[i]).then(res => {
this.$set(this.status, i, 'success')
this.result(res, i)
}).catch(err => {
this.$set(this.status, i, 'error')
})
}
}
}
} else {
//如果传入index，则是重新上传时调用
this.$set(this.status, index, "uploading")
if (typeof callback === 'function') {
callback(this.tempFiles[index]).then(res => {
this.$set(this.status, index, 'success')
this.result(res, index)
}).catch(err => {
this.$set(this.status, index, 'error')
})
}
}
} }
} }
} }
...@@ -412,6 +485,18 @@ ...@@ -412,6 +485,18 @@
cursor: pointer; cursor: pointer;
/* #endif */ /* #endif */
position: relative; position: relative;
/* #ifndef APP-NVUE */
box-sizing: border-box;
/* #endif */
}
.fui-upload__noborder {
border-width: 0;
}
.fui-upload__border {
border-width: 1px;
} }
.fui-upload__del { .fui-upload__del {
......
src/components/firstui/fui-vtabs-content/fui-vtabs-content.vue
...@@ -17,9 +17,6 @@ ...@@ -17,9 +17,6 @@
default: 0 default: 0
} }
}, },
data() {
return {}
},
mounted() { mounted() {
if (this.vtabs && this.vtabs.linkage) { if (this.vtabs && this.vtabs.linkage) {
this.vtabs.children.push(this) this.vtabs.children.push(this)
......
src/components/firstui/fui-vtabs/fui-vtabs.vue
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
:scroll-into-view="scrollInto" :scroll-with-animation="isTap"> :scroll-into-view="scrollInto" :scroll-with-animation="isTap">
<view class="fui-vtabs__item__wrap" :style="{width:tabWidth+'rpx'}"> <view class="fui-vtabs__item__wrap" :style="{width:tabWidth+'rpx'}">
<view class="fui-vtabs__item" <view class="fui-vtabs__item"
:class="{'fui-vtabs__left-border':isBorder,'fui-vtabs__item-hover':!item.disable,'fui-vtabs__item-disable':item.disable,'fui-vtabs__border-color':!borderColor && current===index && isBorder}" :class="{'fui-vtabs__left-border':isBorder,'fui-vtabs__item-hover':!item.disable,'fui-vtabs__item-disable':item.disable,'fui-vtabs__border-color':!getBorderColor && current===index && isBorder}"
:id="'fui_vtabs_bar_'+index" v-for="(item,index) in vals" :key="index" :id="'fui_vtabs_bar_'+index" v-for="(item,index) in vals" :key="index"
:style="{background:current===index?activeBgColor:background,borderLeftColor:current===index && isBorder?borderColor:'transparent',width:tabWidth+'rpx',height:tabHeight+'rpx'}" :style="{background:current===index?activeBgColor:background,borderLeftColor:current===index && isBorder?getBorderColor:'transparent',width:tabWidth+'rpx',height:tabHeight+'rpx'}"
@tap="switchTab(index)"> @tap="switchTab(index)">
<image class="fui-vtabs__icon" <image class="fui-vtabs__icon"
:style="{width:(item.iconWidth || 40)+'rpx',height:(item.iconHeight || 40)+'rpx'}" :style="{width:(item.iconWidth || 40)+'rpx',height:(item.iconHeight || 40)+'rpx'}"
...@@ -15,20 +15,20 @@ ...@@ -15,20 +15,20 @@
</image> </image>
<!-- #ifdef APP-NVUE --> <!-- #ifdef APP-NVUE -->
<text class="fui-vtabs__text" <text class="fui-vtabs__text"
:class="{'fui-vtabs__selected-color':!activeColor && current===index}" :class="{'fui-vtabs__selected-color':!getActiveColor && current===index}"
:style="{fontSize:(current===index?activeSize:size)+'rpx',color:current===index?activeColor:color,fontWeight:current===index?activeFontWeight:fontWeight}">{{item.name}}<text :style="{fontSize:(current===index?activeSize:size)+'rpx',color:current===index?getActiveColor:color,fontWeight:current===index?activeFontWeight:fontWeight}">{{item.name}}<text
:class="{'fui-vtabs__badge-color':!badgeBackground,'fui-vtabs__badge-dot':isDot,'fui-vtabs__badge':!isDot}" :class="{'fui-vtabs__badge-color':!getBadgeBackground,'fui-vtabs__badge-dot':isDot,'fui-vtabs__badge':!isDot}"
:style="{color:badgeColor,background:badgeBackground}" :style="{color:badgeColor,background:getBadgeBackground}"
v-if="item.badge">{{isDot?'':item.badge}}</text></text> v-if="item.badge">{{isDot?'':item.badge}}</text></text>
<!-- #endif --> <!-- #endif -->
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
<view class="fui-vtabs__text" <view class="fui-vtabs__text"
:class="{'fui-vtabs__selected-color':!activeColor && current===index}" :class="{'fui-vtabs__selected-color':!getActiveColor && current===index}"
:style="{fontSize:(current===index?activeSize:size)+'rpx',color:current===index?activeColor:color,fontWeight:current===index?activeFontWeight:fontWeight}"> :style="{fontSize:(current===index?activeSize:size)+'rpx',color:current===index?getActiveColor:color,fontWeight:current===index?activeFontWeight:fontWeight}">
{{item.name}}<text {{item.name}}<text
:class="{'fui-vtabs__badge-color':!badgeBackground,'fui-vtabs__badge-dot':isDot,'fui-vtabs__badge':!isDot}" :class="{'fui-vtabs__badge-color':!getBadgeBackground,'fui-vtabs__badge-dot':isDot,'fui-vtabs__badge':!isDot}"
:style="{color:badgeColor,background:badgeBackground}" :style="{color:badgeColor,background:getBadgeBackground}"
v-if="item.badge">{{isDot?'':item.badge}}</text> v-if="item.badge">{{isDot?'':item.badge}}</text>
</view> </view>
<!-- #endif --> <!-- #endif -->
...@@ -84,18 +84,10 @@ ...@@ -84,18 +84,10 @@
type: String, type: String,
default: '#333333' default: '#333333'
}, },
// #ifdef APP-NVUE
activeColor: {
type: String,
default: '#465CFF'
},
// #endif
// #ifndef APP-NVUE
activeColor: { activeColor: {
type: String, type: String,
default: '' default: ''
}, },
// #endif
fontWeight: { fontWeight: {
type: [Number, String], type: [Number, String],
default: 'normal' default: 'normal'
...@@ -116,18 +108,10 @@ ...@@ -116,18 +108,10 @@
type: Boolean, type: Boolean,
default: true default: true
}, },
// #ifdef APP-NVUE
borderColor: {
type: String,
default: '#465CFF'
},
// #endif
// #ifndef APP-NVUE
borderColor: { borderColor: {
type: String, type: String,
default: '' default: ''
}, },
// #endif
activeTab: { activeTab: {
type: [Number, String], type: [Number, String],
default: 0 default: 0
...@@ -140,18 +124,10 @@ ...@@ -140,18 +124,10 @@
type: String, type: String,
default: '#fff' default: '#fff'
}, },
// #ifdef APP-NVUE
badgeBackground: {
type: String,
default: '#FF2B2B'
},
// #endif
// #ifndef APP-NVUE
badgeBackground: { badgeBackground: {
type: String, type: String,
default: '' default: ''
}, },
// #endif
isDot: { isDot: {
type: Boolean, type: Boolean,
default: false default: false
...@@ -167,6 +143,38 @@ ...@@ -167,6 +143,38 @@
vtabs: this vtabs: this
} }
}, },
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;
},
getBorderColor(){
let color = this.borderColor
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color;
},
getBadgeBackground(){
let color = this.badgeBackground
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.danger) || '#FF2B2B';
}
// #endif
return color;
}
},
data() { data() {
return { return {
vals: [], vals: [],
......
src/components/firstui/fui-waterfall-item/fui-waterfall-item.vue
...@@ -3,12 +3,11 @@ ...@@ -3,12 +3,11 @@
:style="{width:width+'px' ,background:background,borderRadius:radius+'rpx',transform:transform}" :style="{width:width+'px' ,background:background,borderRadius:radius+'rpx',transform:transform}"
@tap="handleTap"> @tap="handleTap">
<slot name="upper"></slot> <slot name="upper"></slot>
<view :class="{'fui-waterfall__img-wrap':!isLoaded}" <view :class="{'fui-waterfall__img-wrap':!isLoaded,'fui-waterfall__hidden':imgHeight!=0}" :style="getStyl"
:style="{width:imgWidth!=0?imgWidth+'rpx':width+'px',height:isLoaded?'auto':width+'px'}" v-if="isSrc"> v-if="isSrc">
<image class="fui-waterfall__img" :src="src" mode="widthFix" :webp="webp" :draggable="draggable" <image class="fui-waterfall__img" :src="src" :mode="imgHeight!=0?'scaleToFill':'widthFix'" :webp="webp"
@load="handleLoad" @error="handleError" :draggable="draggable" @load="handleLoad" @error="handleError" :style="getStyles" v-if="isLoaded">
:style="{width:imgWidth!=0?imgWidth+'rpx':width+'px',borderRadius:`${radius}rpx ${radius}rpx 0 0`}" </image>
v-if="isLoaded"></image>
</view> </view>
<slot></slot> <slot></slot>
</view> </view>
...@@ -45,6 +44,11 @@ ...@@ -45,6 +44,11 @@
type: [Number, String], type: [Number, String],
default: 0 default: 0
}, },
//V1.9.8+ 设置图片高度，则不再等图片加载完成后再去渲染
imgHeight: {
type: [Number, String],
default: 0
},
webp: { webp: {
type: Boolean, type: Boolean,
default: false default: false
...@@ -71,10 +75,31 @@ ...@@ -71,10 +75,31 @@
} }
} }
}, },
computed: {
getStyles() {
const width = this.imgWidth != 0 ? `${this.imgWidth}rpx` : `${this.width}px`
let style =
`width:${width};border-radius:${this.radius}rpx ${this.radius}rpx 0 0;`
if (this.imgHeight != 0) {
style += `height:${this.imgHeight}rpx;`
}
return style;
},
getStyl() {
let style = this.getStyles;
if (this.imgHeight == 0 && !this.isLoaded) {
style += `height:${width}px;`
}
return style;
}
},
mounted() { mounted() {
if (!this.src) { if (!this.src || this.imgHeight != 0) {
this.$nextTick(() => { this.$nextTick(() => {
setTimeout(() => {
this.getWaterfallItemInfo() this.getWaterfallItemInfo()
}, 50)
}) })
} }
}, },
...@@ -143,7 +168,7 @@ ...@@ -143,7 +168,7 @@
} else { } else {
index++ index++
setTimeout(() => { setTimeout(() => {
this.getItemHeight(index) this.getItemHeight(callback, index)
}, 50) }, 50)
return return
} }
...@@ -152,12 +177,14 @@ ...@@ -152,12 +177,14 @@
// #endif // #endif
}, },
handleLoad(e) { handleLoad(e) {
if (this.imgHeight != 0) return;
setTimeout(() => { setTimeout(() => {
this.getWaterfallItemInfo() this.getWaterfallItemInfo()
}, 50) }, 50)
}, },
handleError(e) { handleError(e) {
this.isLoaded = false this.isLoaded = false
if (this.imgHeight != 0) return;
setTimeout(() => { setTimeout(() => {
this.getWaterfallItemInfo() this.getWaterfallItemInfo()
}, 50) }, 50)
...@@ -196,6 +223,10 @@ ...@@ -196,6 +223,10 @@
overflow: hidden; overflow: hidden;
} }
.fui-waterfall__hidden {
overflow: hidden;
}
.fui-waterfall__img { .fui-waterfall__img {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: block; display: block;
......
src/utils/http/axios/Axios.ts
import type { AxiosError, AxiosInstance, AxiosPromise, AxiosRequestConfig, AxiosResponse } from 'axios' import type { AxiosInstance, AxiosPromise, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from 'axios'
import axios, { AxiosError } from 'axios'
import type { RequestOptions, Result, UploadFileParams } from '/#/axios' import type { RequestOptions, Result, UploadFileParams } from '/#/axios'
import type { CreateAxiosOptions } from './axiosTransform' import type { CreateAxiosOptions } from './axiosTransform'
import axios from 'axios'
import createError from 'axios/lib/core/createError'
import qs from 'qs' import qs from 'qs'
import { AxiosCanceler } from './axiosCancel' import { AxiosCanceler } from './axiosCancel'
import { isFunction } from '/@/utils/is' import { isFunction } from '/@/utils/is'
...@@ -14,7 +13,7 @@ import { ContentTypeEnum, RequestEnum } from '/@/enums/httpEnum' ...@@ -14,7 +13,7 @@ import { ContentTypeEnum, RequestEnum } from '/@/enums/httpEnum'
* @param config 请求配置 * @param config 请求配置
* @returns 请求结果 * @returns 请求结果
*/ */
axios.defaults.adapter = function (config: CreateAxiosOptions): AxiosPromise<any> { axios.defaults.adapter = function (config: InternalAxiosRequestConfig): AxiosPromise<any> {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const request = uni.request({ const request = uni.request({
method: config.method.toUpperCase() as RequestEnum, method: config.method.toUpperCase() as RequestEnum,
...@@ -34,16 +33,19 @@ axios.defaults.adapter = function (config: CreateAxiosOptions): AxiosPromise<any ...@@ -34,16 +33,19 @@ axios.defaults.adapter = function (config: CreateAxiosOptions): AxiosPromise<any
}) })
}, },
fail: (response) => { fail: (response) => {
// @ts-expect-error try {
const { errMsg, statusCode } = response const { errMsg } = response
const error = createError(errMsg, config, statusCode, request, { const isTimeout = errMsg.includes('timeout')
const error = AxiosError.from(
errMsg,
isTimeout ? AxiosError.ETIMEDOUT : AxiosError.ECONNABORTED,
config, config,
message: errMsg, request,
data: undefined, )
...response,
})
reject(error) reject(error)
} catch (error) {
reject(error)
}
}, },
}) })
}) })
...@@ -114,7 +116,7 @@ export class VAxios { ...@@ -114,7 +116,7 @@ export class VAxios {
const axiosCanceler = new AxiosCanceler() const axiosCanceler = new AxiosCanceler()
// Request interceptor configuration processing // Request interceptor configuration processing
this.axiosInstance.interceptors.request.use((config: AxiosRequestConfig) => { this.axiosInstance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
// If cancel repeat request is turned on, then cancel repeat request is prohibited // If cancel repeat request is turned on, then cancel repeat request is prohibited
// @ts-expect-error // @ts-expect-error
const { ignoreCancelToken } = config.requestOptions const { ignoreCancelToken } = config.requestOptions
...@@ -123,6 +125,7 @@ export class VAxios { ...@@ -123,6 +125,7 @@ export class VAxios {
!ignoreCancel && axiosCanceler.addPending(config) !ignoreCancel && axiosCanceler.addPending(config)
if (requestInterceptors && isFunction(requestInterceptors)) { if (requestInterceptors && isFunction(requestInterceptors)) {
// @ts-expect-error
config = requestInterceptors(config, this.options) config = requestInterceptors(config, this.options)
} }
return config return config
...@@ -254,7 +257,7 @@ export class VAxios { ...@@ -254,7 +257,7 @@ export class VAxios {
} }
request<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> { request<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
let conf: CreateAxiosOptions = cloneDeep(config) let conf = cloneDeep(config) as CreateAxiosOptions
const transform = this.getTransform() const transform = this.getTransform()
const { requestOptions } = this.options const { requestOptions } = this.options
......
types/auto-imports.d.ts
...@@ -74,6 +74,7 @@ declare global { ...@@ -74,6 +74,7 @@ declare global {
const toRaw: typeof import('vue')['toRaw'] const toRaw: typeof import('vue')['toRaw']
const toRef: typeof import('vue')['toRef'] const toRef: typeof import('vue')['toRef']
const toRefs: typeof import('vue')['toRefs'] const toRefs: typeof import('vue')['toRefs']
const toValue: typeof import('vue')['toValue']
const triggerRef: typeof import('vue')['triggerRef'] const triggerRef: typeof import('vue')['triggerRef']
const unref: typeof import('vue')['unref'] const unref: typeof import('vue')['unref']
const useAttrs: typeof import('vue')['useAttrs'] const useAttrs: typeof import('vue')['useAttrs']
......
types/components.d.ts
...@@ -59,6 +59,7 @@ declare module '@vue/runtime-core' { ...@@ -59,6 +59,7 @@ declare module '@vue/runtime-core' {
FuiGallery: typeof import('./../src/components/firstui/fui-gallery/fui-gallery.vue')['default'] FuiGallery: typeof import('./../src/components/firstui/fui-gallery/fui-gallery.vue')['default']
FuiGrid: typeof import('./../src/components/firstui/fui-grid/fui-grid.vue')['default'] FuiGrid: typeof import('./../src/components/firstui/fui-grid/fui-grid.vue')['default']
FuiGridItem: typeof import('./../src/components/firstui/fui-grid-item/fui-grid-item.vue')['default'] FuiGridItem: typeof import('./../src/components/firstui/fui-grid-item/fui-grid-item.vue')['default']
FuiHorizontalScroll: typeof import('./../src/components/firstui/fui-horizontal-scroll/fui-horizontal-scroll.vue')['default']
FuiIcon: typeof import('./../src/components/firstui/fui-icon/fui-icon.vue')['default'] FuiIcon: typeof import('./../src/components/firstui/fui-icon/fui-icon.vue')['default']
FuiImageCropper: typeof import('./../src/components/firstui/fui-image-cropper/fui-image-cropper.vue')['default'] FuiImageCropper: typeof import('./../src/components/firstui/fui-image-cropper/fui-image-cropper.vue')['default']
FuiIndexList: typeof import('./../src/components/firstui/fui-index-list/fui-index-list.vue')['default'] FuiIndexList: typeof import('./../src/components/firstui/fui-index-list/fui-index-list.vue')['default']
...@@ -68,13 +69,16 @@ declare module '@vue/runtime-core' { ...@@ -68,13 +69,16 @@ declare module '@vue/runtime-core' {
FuiLandscape: typeof import('./../src/components/firstui/fui-landscape/fui-landscape.vue')['default'] FuiLandscape: typeof import('./../src/components/firstui/fui-landscape/fui-landscape.vue')['default']
FuiLazyload: typeof import('./../src/components/firstui/fui-lazyload/fui-lazyload.vue')['default'] FuiLazyload: typeof import('./../src/components/firstui/fui-lazyload/fui-lazyload.vue')['default']
FuiLicensePlate: typeof import('./../src/components/firstui/fui-license-plate/fui-license-plate.vue')['default'] FuiLicensePlate: typeof import('./../src/components/firstui/fui-license-plate/fui-license-plate.vue')['default']
FuiLink: typeof import('./../src/components/firstui/fui-link/fui-link.vue')['default']
FuiList: typeof import('./../src/components/firstui/fui-list/fui-list.vue')['default'] FuiList: typeof import('./../src/components/firstui/fui-list/fui-list.vue')['default']
FuiListCell: typeof import('./../src/components/firstui/fui-list-cell/fui-list-cell.vue')['default'] FuiListCell: typeof import('./../src/components/firstui/fui-list-cell/fui-list-cell.vue')['default']
FuiLoadAni: typeof import('./../src/components/firstui/fui-load-ani/fui-load-ani.vue')['default'] FuiLoadAni: typeof import('./../src/components/firstui/fui-load-ani/fui-load-ani.vue')['default']
FuiLoading: typeof import('./../src/components/firstui/fui-loading/fui-loading.vue')['default'] FuiLoading: typeof import('./../src/components/firstui/fui-loading/fui-loading.vue')['default']
FuiLoadmore: typeof import('./../src/components/firstui/fui-loadmore/fui-loadmore.vue')['default'] FuiLoadmore: typeof import('./../src/components/firstui/fui-loadmore/fui-loadmore.vue')['default']
FuiLottie: typeof import('./../src/components/firstui/fui-lottie/fui-lottie.vue')['default']
FuiMessage: typeof import('./../src/components/firstui/fui-message/fui-message.vue')['default'] FuiMessage: typeof import('./../src/components/firstui/fui-message/fui-message.vue')['default']
FuiModal: typeof import('./../src/components/firstui/fui-modal/fui-modal.vue')['default'] FuiModal: typeof import('./../src/components/firstui/fui-modal/fui-modal.vue')['default']
FuiMovableView: typeof import('./../src/components/firstui/fui-movable-view/fui-movable-view.vue')['default']
FuiNavBar: typeof import('./../src/components/firstui/fui-nav-bar/fui-nav-bar.vue')['default'] FuiNavBar: typeof import('./../src/components/firstui/fui-nav-bar/fui-nav-bar.vue')['default']
FuiNoticeBar: typeof import('./../src/components/firstui/fui-notice-bar/fui-notice-bar.vue')['default'] FuiNoticeBar: typeof import('./../src/components/firstui/fui-notice-bar/fui-notice-bar.vue')['default']
FuiOverflowHidden: typeof import('./../src/components/firstui/fui-overflow-hidden/fui-overflow-hidden.vue')['default'] FuiOverflowHidden: typeof import('./../src/components/firstui/fui-overflow-hidden/fui-overflow-hidden.vue')['default']
......
vite.config.ts
...@@ -31,7 +31,7 @@ export default ({ mode }: ConfigEnv): UserConfig => { ...@@ -31,7 +31,7 @@ export default ({ mode }: ConfigEnv): UserConfig => {
include: ['lodash-es', '@vueuse/core'], include: ['lodash-es', '@vueuse/core'],
}, },
esbuild: { esbuild: {
drop: ['console', 'debugger'], drop: isDevFn(mode) ? [] : ['console', 'debugger'],
}, },
build: { build: {
target: 'es2015', target: 'es2015',
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论