提交 069523bf 作者: 方治民

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

......@@ -66,59 +66,59 @@
}
},
"dependencies": {
"@dcloudio/uni-app": "3.0.0-alpha-3080120230425001",
"@dcloudio/uni-app-plus": "3.0.0-alpha-3080120230425001",
"@dcloudio/uni-components": "3.0.0-alpha-3080120230425001",
"@dcloudio/uni-h5": "3.0.0-alpha-3080120230425001",
"@dcloudio/uni-mp-alipay": "3.0.0-alpha-3080120230425001",
"@dcloudio/uni-mp-baidu": "3.0.0-alpha-3080120230425001",
"@dcloudio/uni-mp-jd": "3.0.0-alpha-3080120230425001",
"@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-3080120230425001",
"@dcloudio/uni-mp-lark": "3.0.0-alpha-3080120230425001",
"@dcloudio/uni-mp-qq": "3.0.0-alpha-3080120230425001",
"@dcloudio/uni-mp-toutiao": "3.0.0-alpha-3080120230425001",
"@dcloudio/uni-mp-weixin": "3.0.0-alpha-3080120230425001",
"@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3080120230425001",
"@dcloudio/uni-app": "3.0.0-3080320230526001",
"@dcloudio/uni-app-plus": "3.0.0-3080320230526001",
"@dcloudio/uni-components": "3.0.0-3080320230526001",
"@dcloudio/uni-h5": "3.0.0-3080320230526001",
"@dcloudio/uni-mp-alipay": "3.0.0-3080320230526001",
"@dcloudio/uni-mp-baidu": "3.0.0-3080320230526001",
"@dcloudio/uni-mp-jd": "3.0.0-3080320230526001",
"@dcloudio/uni-mp-kuaishou": "3.0.0-3080320230526001",
"@dcloudio/uni-mp-lark": "3.0.0-3080320230526001",
"@dcloudio/uni-mp-qq": "3.0.0-3080320230526001",
"@dcloudio/uni-mp-toutiao": "3.0.0-3080320230526001",
"@dcloudio/uni-mp-weixin": "3.0.0-3080320230526001",
"@dcloudio/uni-quickapp-webview": "3.0.0-3080320230526001",
"@dcloudio/uni-ui": "^1.4.27",
"@faker-js/faker": "^7.6.0",
"@vue/runtime-core": "^3.2.47",
"@vueuse/core": "^10.1.0",
"axios": "^0.26.1",
"@faker-js/faker": "^8.0.2",
"@vue/runtime-core": "~3.2.47",
"@vueuse/core": "^10.1.2",
"axios": "^1.4.0",
"crypto-js": "^4.1.1",
"dayjs": "^1.11.7",
"lodash-es": "^4.17.21",
"nanoid": "^4.0.2",
"pinia": "^2.0.35",
"pinyin-pro": "^3.13.2",
"pinia": "~2.0.36",
"pinyin-pro": "^3.14.0",
"qs": "~6.9.7",
"stompjs": "^2.3.3",
"urijs": "^1.19.11",
"vue": "^3.2.47",
"vue": "~3.2.47",
"vue-i18n": "^9.2.2",
"vue-request": "2.0.0-rc.4",
"vue-types": "^5.0.2"
"vue-types": "^5.0.3"
},
"devDependencies": {
"@antfu/eslint-config": "^0.38.5",
"@commitlint/cli": "^17.6.1",
"@commitlint/config-conventional": "^17.6.1",
"@antfu/eslint-config": "^0.39.3",
"@commitlint/cli": "^17.6.3",
"@commitlint/config-conventional": "^17.6.3",
"@dcloudio/types": "^3.3.3",
"@dcloudio/uni-automator": "3.0.0-alpha-3080120230425001",
"@dcloudio/uni-cli-shared": "3.0.0-alpha-3080120230425001",
"@dcloudio/uni-automator": "3.0.0-3080320230526001",
"@dcloudio/uni-cli-shared": "3.0.0-3080320230526001",
"@dcloudio/uni-helper-json": "^1.0.13",
"@dcloudio/uni-stacktracey": "3.0.0-alpha-3080120230425001",
"@dcloudio/vite-plugin-uni": "3.0.0-alpha-3080120230425001",
"@iconify/json": "^2.2.56",
"@dcloudio/uni-stacktracey": "3.0.0-3080320230526001",
"@dcloudio/vite-plugin-uni": "3.0.0-3080320230526001",
"@iconify/json": "^2.2.71",
"@types/crypto-js": "^4.1.1",
"@types/lodash-es": "^4.17.7",
"@types/mapbox-gl": "^2.7.10",
"@types/node": "^18.16.2",
"@types/mapbox-gl": "^2.7.11",
"@types/node": "^18.16.16",
"@types/prettier": "^2.7.2",
"@types/qs": "^6.9.7",
"@types/stompjs": "^2.3.5",
"@types/urijs": "^1.19.19",
"@typescript-eslint/eslint-plugin": "^5.59.1",
"@typescript-eslint/parser": "^5.59.1",
"@typescript-eslint/eslint-plugin": "^5.59.8",
"@typescript-eslint/parser": "^5.59.8",
"commitizen": "^4.3.0",
"conventional-changelog-cli": "^2.2.2",
"cz-conventional-changelog": "^3.3.0",
......@@ -126,38 +126,38 @@
"cz-git": "^1.6.1",
"czg": "^1.6.1",
"dotenv": "^16.0.3",
"eslint": "^8.39.0",
"eslint": "^8.41.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.11.0",
"eslint-plugin-vue": "^9.14.1",
"husky": "^8.0.3",
"jest": "27.0.4",
"jest-environment-node": "27.5.1",
"less": "^4.1.3",
"lint-staged": "^13.2.2",
"mapbox-gl": "^2.14.1",
"mapbox-gl": "^2.15.0",
"npm-run-all": "^4.1.5",
"picocolors": "^1.0.0",
"pont-engine": "^1.5.7",
"postcss": "^8.4.23",
"pont-engine": "^1.5.10",
"postcss": "^8.4.24",
"postcss-html": "^1.5.0",
"postcss-less": "^6.0.0",
"prettier": "^2.8.8",
"rimraf": "^5.0.0",
"rimraf": "^5.0.1",
"sass": "^1.62.1",
"sort-package-json": "^2.4.1",
"stylelint": "^15.6.0",
"stylelint": "^15.6.2",
"stylelint-config-html": "^1.1.0",
"stylelint-config-recommended": "^12.0.0",
"stylelint-config-standard": "^33.0.0",
"stylelint-order": "^6.0.3",
"typescript": "^5.0.4",
"unocss": "^0.50.8",
"unocss-preset-weapp": "^0.5.3",
"unplugin-auto-import": "^0.15.3",
"unocss": "^0.52.4",
"unocss-preset-weapp": "^0.52.1",
"unplugin-auto-import": "^0.16.2",
"unplugin-vue-components": "^0.24.1",
"vite": "^4.3.3",
"vue-eslint-parser": "^9.1.1"
"vite": "^4.3.9",
"vue-eslint-parser": "^9.3.0"
},
"engines": {
"node": ">=16",
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -26,49 +26,74 @@
type: String,
required: true,
},
debug: {
type: Boolean,
default: false,
},
})
const src = ref()
const visibleSrc = ref()
const hashCacheKey = ref()
onMounted(async () => {
// 尝试缓存图片,如果失败则使用原始图片
await tryCache()
})
// 监听 src 变化
watch(
() => props.src,
async () => await tryCache(),
)
function log(...args: any[]) {
if (props.debug) {
console.log('[CacheImage]', ...args)
}
}
// 尝试缓存图片,如果失败则使用原始图片
async function tryCache() {
let url = props.src
if (!url) {
return
}
// #ifdef APP-PLUS
const hash = md5(url).toString()
hashCacheKey.value = `G_CACHE_IMAGE_${hash}`
if (uni.getStorageSync(hashCacheKey.value)) {
console.debug('CacheImage cache hit')
url = uni.getStorageSync(hashCacheKey.value)
} else {
console.debug('CacheImage cache miss')
try {
const res = await uni.downloadFile({ url })
if (res.statusCode === 200) {
const { savedFilePath } = await new Promise<UniApp.SaveFileSuccess>((resolve, reject) => {
uni.saveFile({
tempFilePath: res.tempFilePath,
success: (res) => resolve(res),
fail: (err) => reject(err),
// 如果是网络图片,则缓存到本地
if (url.startsWith('http')) {
// #ifdef APP-PLUS
const hash = md5(url).toString()
hashCacheKey.value = `G_CACHE_IMAGE_${hash}`
if (uni.getStorageSync(hashCacheKey.value)) {
log('cache hit', url)
url = uni.getStorageSync(hashCacheKey.value)
} else {
log('cache miss', url)
try {
const res = await uni.downloadFile({ url })
if (res.statusCode === 200) {
const { savedFilePath } = await new Promise<UniApp.SaveFileSuccess>((resolve, reject) => {
uni.saveFile({
tempFilePath: res.tempFilePath,
success: (res) => resolve(res),
fail: (err) => reject(err),
})
})
})
url = `${savedFilePath}`
url = `${savedFilePath}`
// 缓存图片本地地址
uni.setStorageSync(hashCacheKey.value, url)
// 缓存图片本地地址
uni.setStorageSync(hashCacheKey.value, url)
} else {
log('cache error', url, res)
url = props.src
}
} catch (e) {
console.error(e)
}
} catch (e) {
console.error(e)
}
log(props.src, '=>', url, hash, hashCacheKey.value)
// #endif
}
console.debug(props.src, '=>', url, hash, hashCacheKey.value)
// #endif
src.value = url
visibleSrc.value = url
}
const hasError = ref(false)
......@@ -78,7 +103,7 @@
}
hasError.value = true
src.value = props.src
visibleSrc.value = props.src
// 清除缓存
hashCacheKey.value && uni.removeStorageSync(hashCacheKey.value)
console.warn('CacheImage cache error')
......@@ -87,12 +112,13 @@
<template>
<fui-lazyload
v-bind="$attrs"
:mode="props.mode"
:width="props.width"
:height="props.height"
:radius="props.radius"
:background="props.background"
:src="src"
:src="visibleSrc"
@error="onError"
>
<slot></slot>
......
......@@ -25,11 +25,11 @@
</script>
<template>
<view class="empty" :style="[{ background: bgColor }]">
<view class="empty" :style="{ background: bgColor }">
<!-- 暂无数据/空数据 -->
<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>
</template>
......
......@@ -213,8 +213,8 @@
let iphonex = false;
let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax',
'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini',
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini', 'iphone14plus',
'iphone14pro', 'iphone14promax', 'iphone15', 'iphone15mini', 'iphone15plus',
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini',
'iphone14pro', 'iphone14promax', 'iphone15', 'iphone15mini',
'iphone15pro', 'iphone15promax'
]
const model = res.model.replace(/\s/g, "").toLowerCase()
......
......@@ -122,16 +122,14 @@
default: false
}
},
data() {
return {}
},
methods: {
getColor(type) {
const color = "#465CFF"
const app = uni && uni.$fui && uni.$fui.color
const color = (app && app.primary) || "#465CFF"
const colors = {
'success': '#09BE4F',
'warn': '#FFB703',
'clear': '#FF2B2B'
'success': (app && app.success) || '#09BE4F',
'warn': (app && app.warning) || '#FFB703',
'clear': (app && app.danger) || '#FF2B2B'
}
return colors[type] ? colors[type] : color;
},
......
......@@ -17,13 +17,13 @@
<!-- #ifdef MP-QQ -->
<canvas :disable-scroll="!completed" canvas-id="canvas_autograph" @touchstart="onTouchstart"
@touchmove="onTouchmove" @touchend="onTouchend" @touchcancel="onTouchCancel"
:style="{width:w+'px',height:h+'px'}" ></canvas>
:style="{width:w+'px',height:h+'px'}"></canvas>
<!-- #endif -->
<!-- #ifdef MP-TOUTIAO -->
<canvas :disable-scroll="!completed" :canvas-id="canvasId" :id="canvasId" @touchstart="onTouchstart"
@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 -->
</view>
</template>
......@@ -116,32 +116,34 @@
this.touchs = null;
},
mounted() {
setTimeout(() => {
// #ifdef APP-NVUE
let ganvas = this.$refs[this.canvasId];
/*通过元素引用获取canvas对象*/
let canvasObj = enable(ganvas, {
bridge: WeexBridge
});
/*获取绘图所需的上下文,暂不支持3d*/
this.ctx = canvasObj.getContext('2d');
if (!this.isAndroid) {
this.getDom()
}
// #endif
this.$nextTick(() => {
setTimeout(() => {
// #ifdef APP-NVUE
let ganvas = this.$refs[this.canvasId];
/*通过元素引用获取canvas对象*/
let canvasObj = enable(ganvas, {
bridge: WeexBridge
});
/*获取绘图所需的上下文,暂不支持3d*/
this.ctx = canvasObj.getContext('2d');
if (!this.isAndroid) {
this.getDom()
}
// #endif
// #ifndef APP-NVUE
this.ctx = uni.createCanvasContext(this.canvasId, this)
// #endif
// #ifndef APP-NVUE
this.ctx = uni.createCanvasContext(this.canvasId, this)
// #endif
// #ifdef MP-BAIDU
this.redraw()
// #endif
// #ifdef MP-BAIDU
this.redraw()
// #endif
this.$emit('ready', {
canvasId: this.canvasId
})
}, 50)
this.$emit('ready', {
canvasId: this.canvasId
})
}, 50)
})
},
// #ifndef VUE3
beforeDestroy() {
......
import GCanvas from './env/canvas';
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 GBridgeWeex from './bridge/bridge-weex';
......@@ -12,12 +12,12 @@ export let WeexBridge = GBridgeWeex;
export function enable(el, {
bridge,
debug,// 2021-5-6变更
debug,
disableAutoSwap,
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, [
0, // renderMode: 0--RENDERMODE_WHEN_DIRTY, 1--RENDERMODE_CONTINUOUSLY
......@@ -29,7 +29,7 @@ export function enable(el, {
false // sameLevel: newCanvasMode = true && true => GCanvasView and Webview is same level
]);
if (debug === true) {// echo建议
if (debug === true) {
GBridge.callEnableDebug();
}
if (disableComboCommands) {
......@@ -41,7 +41,7 @@ export function enable(el, {
});
let pixelRatio = uni.getSystemInfoSync().pixelRatio;
canvas.width = el.style.width * pixelRatio;
canvas.height = el.style.height * pixelRatio;// 新特性待增加
canvas.height = el.style.height * pixelRatio;
return canvas;
};
<template>
<text
:class="[dot?'fui-badge__dot':'fui-badge__wrap',background?'':('fui-badge__bg-'+type),absolute?'fui-badge__absolute':'',scaleRatio!=1 && isNvue?'fui-badge__trans-origin':'',!background && type==='white'?'fui-badge__text-color':'']"
:style="{top:absolute?top:'auto',right:absolute?right:'auto',zoom:scaleRatio,transform:isNvue?`scale(${scaleRatio})`:'scale(1)',marginTop:marginTop+'rpx',marginLeft:marginLeft+'rpx',marginRight:marginRight+'rpx',width:width,color:color,background:background}"
:style="{top:absolute?top:'auto',right:absolute?right:'auto',zoom:scaleRatio,transform:isNvue?`scale(${scaleRatio})`:'scale(1)',marginTop:marginTop+'rpx',marginLeft:marginLeft+'rpx',marginRight:marginRight+'rpx',width:width,color:color,background:getBgColor}"
@tap="handleClick" v-if="showValue || dot">{{dot?'':showValue}}</text>
</template>
......@@ -83,6 +83,27 @@
showValue: ''
};
},
computed: {
getBgColor() {
let color = this.background
// #ifdef APP-NVUE
if (!color && this.type) {
//primary,success,warning,danger,purple,white
const app = uni && uni.$fui && uni.$fui.color
const colors = {
primary: (app && app.primary) || '#465CFF',
success: (app && app.success) || '#09BE4F',
warning: (app && app.warning) || '#FFB703',
danger: (app && app.danger) || '#FF2B2B',
purple: (app && app.purple) || '#6831FF',
white: '#FFFFFF'
}
color = colors[this.type] || colors.primary
}
// #endif
return color
}
},
watch: {
value(val) {
this.getWidth()
......@@ -180,30 +201,6 @@
/* #endif */
/* #ifdef APP-NVUE */
.fui-badge__bg-primary {
background-color: #465CFF !important;
}
.fui-badge__bg-success {
background-color: #09BE4F !important;
}
.fui-badge__bg-warning {
background-color: #FFB703 !important;
}
.fui-badge__bg-danger {
background-color: #FF2B2B !important;
}
.fui-badge__bg-purple {
background-color: #6831FF !important;
}
.fui-badge__bg-white {
background-color: #FFFFFF !important;
}
.fui-badge__text-color {
color: #FF2B2B !important;
}
......
......@@ -7,12 +7,12 @@
<!-- #ifndef APP-NVUE || MP-QQ -->
<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 -->
<!-- #ifdef MP-QQ -->
<canvas canvas-id="canvas_barcode" :style="{width:w+'px',height:h+'px'}" @longtap="longtap"
@touchstart="touchstart" @touchend="touchend"></canvas>
<canvas canvas-id="canvas_barcode" :style="{width:w+'px',height:h+'px'}" @longtap="longtap" @touchstart="touchstart"
@touchend="touchend"></canvas>
<!-- #endif -->
</template>
......@@ -55,7 +55,7 @@
default: 200
},
value: {
type: String,
type: [Number, String],
default: ''
}
},
......@@ -84,11 +84,13 @@
this.ctx = null;
},
mounted() {
setTimeout(() => {
this.$emit('ready', {
canvasId: this.canvasId
})
}, 50)
this.$nextTick(() => {
setTimeout(() => {
this.$emit('ready', {
canvasId: this.canvasId
})
}, 50)
});
},
// #ifndef VUE3
beforeDestroy() {
......@@ -118,7 +120,7 @@
// #endif
}
const opts = Object.assign({}, this.defalutOptions, options)
new barcode(this.value, Object.assign({
new barcode(String(this.value), Object.assign({
width: this.w,
height: this.h
}, opts), this.ctx)
......
......@@ -148,9 +148,8 @@
let iphonex = false;
let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax',
'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini',
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini', 'iphone14plus',
'iphone14pro', 'iphone14promax', 'iphone15', 'iphone15mini', 'iphone15plus',
'iphone15pro', 'iphone15promax'
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini',
'iphone14pro', 'iphone14promax', 'iphone15'
]
const model = res.model.replace(/\s/g, "").toLowerCase()
const newModel = model.split('<')[0]
......
......@@ -104,9 +104,8 @@
let iphonex = false;
let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax',
'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini',
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini', 'iphone14plus',
'iphone14pro', 'iphone14promax', 'iphone15', 'iphone15mini', 'iphone15plus',
'iphone15pro', 'iphone15promax'
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini',
'iphone14pro', 'iphone14promax'
]
const model = res.model.replace(/\s/g, "").toLowerCase()
const newModel = model.split('<')[0]
......
......@@ -79,7 +79,7 @@
},
right: {
type: [Number, String],
default: 8
default: 0
},
top: {
type: [Number, String],
......
<template>
<view class="fui-button__wrap" :class="[!width || width==='100%' || width===true?'fui-button__flex-1':'',disabled && !disabledBackground ? 'fui-button__opacity' : '']"
:style="{width: width,height: getHeight,marginTop:margin[0] || 0, marginRight:margin[1]||0,marginBottom:margin[2] || margin[0]||0,marginLeft:margin[3] || margin[1]||0,borderRadius: getRadius,background:getBackground}"
<view class="fui-button__wrap"
:class="[!getWidth || getWidth==='100%' || getWidth===true?'fui-button__flex-1':'',disabled && !disabledBackground ? 'fui-button__opacity' : '']"
:style="{width: getWidth,height: getHeight,marginTop:margin[0] || 0, marginRight:margin[1]||0,marginBottom:margin[2] || margin[0]||0,marginLeft:margin[3] || margin[1]||0,borderRadius: getRadius,background:getBackground}"
@touchstart="handleStart" @touchend="handleClick" @touchcancel="handleEnd">
<button class="fui-button" :class="[
bold ? 'fui-text__bold' : '',
time && (plain || type==='link') ? 'fui-button__opacity' : '',
!background && !disabledBackground && !plain?('fui-button__'+type):'',
!width || width==='100%' || width===true?'fui-button__flex-1':'',
!getWidth || getWidth==='100%' || getWidth===true?'fui-button__flex-1':'',
time && !plain && type!=='link' ? 'fui-button__active' : '',
pc && !disabled?(plain || type==='link'?'fui-button__opacity-pc':'fui-button__active-pc'):'',
]" :style="{
width: width,
width: getWidth,
height: getHeight,
lineHeight: getHeight,
background: disabled ? (disabledBackground || getTypeColor) : (plain ? 'transparent' : getBackground),
......@@ -20,9 +21,10 @@
borderRadius: getRadius,
fontSize: getSize,
color: getColor
}" :loading="loading" :form-type="formType" :open-type="openType" @getuserinfo="bindgetuserinfo"
@getphonenumber="bindgetphonenumber" @contact="bindcontact" @error="binderror"
@opensetting="bindopensetting" :disabled="disabled" :scope="scope" @tap.stop="handleTap">
}" :loading="loading" :form-type="formType" :open-type="openType" :app-parameter="appParameter"
@getuserinfo="bindgetuserinfo" @getphonenumber="bindgetphonenumber" @contact="bindcontact"
@error="binderror" @opensetting="bindopensetting" @chooseavatar="bindchooseavatar"
@launchapp="bindlaunchapp" :disabled="disabled" :scope="scope" @tap.stop="handleTap">
<text class="fui-button__text"
:class="{'fui-btn__gray-color':!background && !disabledBackground && !plain && type==='gray' && color==='#fff','fui-text__bold':bold}"
v-if="text"
......@@ -42,10 +44,11 @@
export default {
name: 'fui-button',
emits: ['click', 'getuserinfo', 'contact', 'getphonenumber', 'error', 'opensetting'],
// #ifndef VUE3
// #ifdef MP-WEIXIN
behaviors: ['wx://form-field-button'],
// #endif
// #ifdef MP-BAIDU || MP-QQ
behaviors: ['uni://form-field'],
// #endif
props: {
//样式类型:primary,success, warning,danger,link,purple,gray
......@@ -94,6 +97,11 @@
type: String,
default: ''
},
//按钮大小,优先级高于width和height,medium、small、mini
btnSize: {
type: String,
default: ''
},
//宽度
width: {
type: String,
......@@ -151,6 +159,10 @@
type: String,
default: ''
},
appParameter: {
type: String,
default: ''
},
index: {
type: [Number, String],
default: 0
......@@ -161,13 +173,14 @@
// #ifndef APP-NVUE
return '';
// #endif
const app = uni && uni.$fui && uni.$fui.color
let colors = {
primary: '#465CFF',
success: '#09BE4F',
warning: '#FFB703',
danger: '#FF2B2B',
primary: (app && app.primary) || '#465CFF',
success: (app && app.success) || '#09BE4F',
warning: (app && app.warning) || '#FFB703',
danger: (app && app.danger) || '#FF2B2B',
link: 'transparent',
purple: '#6831FF',
purple: (app && app.purple) || '#6831FF',
gray: '#F8F8F8'
}
return colors[this.type] || 'transparent'
......@@ -190,18 +203,44 @@
if (this.disabled && this.disabledBackground) {
color = this.disabledColor || '#FFFFFF'
} else {
color = this.type === 'gray' ? '#465CFF' : '#FFFFFF'
const app = uni && uni.$fui && uni.$fui.color;
const primary = (app && app.primary) || '#465CFF';
color = this.type === 'gray' ? primary : '#FFFFFF'
}
}
return color;
},
getSize() {
const size = (uni && uni.$fui && uni.$fui.fuiButton && uni.$fui.fuiButton.size) || 32
return `${this.size || size}rpx`
let size = this.size || (uni && uni.$fui && uni.$fui.fuiButton && uni.$fui.fuiButton.size) || 32
if (this.btnSize === 'small') {
size = size > 28 ? 28 : size;
} else if (this.btnSize === 'mini') {
size = size > 28 ? 24 : size;
}
return `${size}rpx`
},
getWidth() {
//medium 400*84 / small 200*84/ mini 120 * 64
let width = this.width;
if (this.btnSize && this.btnSize !== true) {
width = {
'medium': '400rpx',
'small': '200rpx',
'mini': '120rpx'
} [this.btnSize] || width
}
return width
},
getHeight() {
const height = (uni && uni.$fui && uni.$fui.fuiButton && uni.$fui.fuiButton.height) || '96rpx'
return this.height || height
let height = this.height || (uni && uni.$fui && uni.$fui.fuiButton && uni.$fui.fuiButton.height) || '96rpx'
if (this.btnSize && this.btnSize !== true) {
height = {
'medium': '84rpx',
'small': '72rpx',
'mini': '64rpx'
} [this.btnSize] || height
}
return height
},
// #ifndef APP-NVUE
getBorderRadius() {
......@@ -306,6 +345,16 @@
detail = {}
} = {}) {
this.$emit('opensetting', detail);
},
bindchooseavatar({
detail = {}
} = {}) {
this.$emit('chooseavatar', detail);
},
bindlaunchapp({
detail = {}
} = {}) {
this.$emit('launchapp', detail);
}
}
};
......
......@@ -30,31 +30,17 @@
<view class="fui-calendar__date-wrap">
<view class="fui-calendar__date" :style="{width:itemWidth}" :class="['fui-calendar__dh']"
v-for="(week,i) in item.weekdayArr" :key="week"></view>
<!-- #ifdef APP-NVUE -->
<text class="fui-calendar__date"
<!--vue3中text嵌套text会出现警告和部分错误信息-->
<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)}"
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会出现警告和部分错误信息-->
<!-- #ifndef APP-NVUE -->
<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)}"
v-for="(sub,idx) in item.daysArr" :key="idx" @tap.stop="dateClick(index,sub)"
: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-lunar" v-if="showLunar && language!=='en'"
:style="{color:getColor(index,idx,values)}">{{getText(index,idx)}}</text>
<text class="fui-calendar__date-descr" v-if="!showLunar || language==='en'"
:style="{color:getColor(index,idx,values)}">{{getText(index,idx)}}</text>
<!-- #ifndef APP-NVUE -->
</view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
</text>
<!-- #endif -->
<text class="fui-calendar__date-val" :style="{color:getColor(index,idx,values)}">{{sub}}</text>
<text class="fui-calendar__date-lunar" v-if="showLunar && language!=='en'"
:style="{color:getColor(index,idx,values)}">{{getText(index,idx)}}</text>
<text class="fui-calendar__date-descr" v-if="!showLunar || language==='en'"
:style="{color:getColor(index,idx,values)}">{{getText(index,idx)}}</text>
</view>
</view>
</swiper-item>
</swiper>
......@@ -62,37 +48,22 @@
<view class="fui-calendar__date-wrap">
<view class="fui-calendar__date" :style="{width:itemWidth}" :class="['fui-calendar__dh']"
v-for="(week,i) in singleMonth.weekdayArr" :key="week"></view>
<!-- #ifdef APP-NVUE -->
<text class="fui-calendar__date"
<!--vue3中text嵌套text会出现警告和部分错误信息-->
<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)}"
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会出现警告和部分错误信息-->
<!-- #ifndef APP-NVUE -->
<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)}"
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 -->
<text class="fui-calendar__date-val"
:style="{color:getColor(month-1,idx,values)}">{{sub}}</text>
<text class="fui-calendar__date-lunar" v-if="showLunar && language!=='en'"
:style="{color:getColor(month-1,idx,values)}">{{getText(month-1,idx)}}</text>
<text class="fui-calendar__date-descr" v-if="!showLunar || language==='en'"
:style="{color:getColor(month-1,idx,values)}">{{getText(month-1,idx)}}</text>
<!-- #ifndef APP-NVUE -->
</view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
</text>
<!-- #endif -->
<text class="fui-calendar__date-val" :style="{color:getColor(month-1,idx,values)}">{{sub}}</text>
<text class="fui-calendar__date-lunar" v-if="showLunar && language!=='en'"
:style="{color:getColor(month-1,idx,values)}">{{getText(month-1,idx)}}</text>
<text class="fui-calendar__date-descr" v-if="!showLunar || language==='en'"
:style="{color:getColor(month-1,idx,values)}">{{getText(month-1,idx)}}</text>
</view>
</view>
</view>
<view class="fui-calendar__btn-wrap" v-if="showBtn">
<view class="fui-calendar__btn"
:class="{'fui-calendar__btn-color':!btnBackground,'fui-calendar__diaabled':btnDisabled}"
:style="{background:btnBackground}">
<view class="fui-calendar__btn" :class="{'fui-calendar__diaabled':btnDisabled}"
:style="{background:btnBackground || primaryColor}">
<text class="fui-calendar__btn"
:class="{'fui-calendar__btn-text':true,'fui-calendar__btn-active':!btnDisabled}"
:style="{color:btnColor}" @tap.stop="handleClick">{{btnText}}</text>
......@@ -196,11 +167,11 @@
//选中日期背景色
activeBackground: {
type: String,
default: '#465CFF'
default: ''
},
rangeColor: {
type: String,
default: '#465CFF'
default: ''
},
rangeBackground: {
type: String,
......@@ -232,7 +203,7 @@
},
btnBackground: {
type: String,
default: '#465CFF'
default: ''
},
btnColor: {
type: String,
......@@ -272,6 +243,10 @@
// #ifndef APP-NVUE
return '14.2857%'
// #endif
},
primaryColor() {
const app = uni && uni.$fui && uni.$fui.color;
return (app && app.primary) || '#465CFF';
}
},
watch: {
......@@ -394,7 +369,7 @@
if (~values.indexOf(date)) {
color = this.activeColor
} else if (values[1] && this._isSection(date, values[0], values[1])) {
color = this.rangeColor
color = this.rangeColor || this.primaryColor
}
} else {
if (~values.indexOf(date)) {
......@@ -412,13 +387,13 @@
let type = this.type;
if (type == 3) {
if (~values.indexOf(date)) {
background = this.activeBackground
background = this.activeBackground || this.primaryColor
} else if (values[1] && this._isSection(date, values[0], values[1])) {
background = this.rangeBackground
}
} else {
if (~values.indexOf(date)) {
background = this.activeBackground
background = this.activeBackground || this.primaryColor
}
}
return background
......
......@@ -7,10 +7,10 @@
<view class="fui-cascader__header-item" :id="`fui_cr_${idx}`" v-for="(item, idx) in selectedArr"
:key="idx" @tap.stop="swichTabs(idx)">
<text class="fui-cascader__header-text"
:class="{'fui-cascader__hi-width':item.text.length>6,'fui-cascader__color':idx === current && !activeColor}"
:style="{ color: idx === current ? activeColor : color, fontSize: size + 'rpx',fontWeight:idx === current?'bold':'normal' }">{{ item.text }}</text>
<view class="fui-cascader__header-line" :class="{'fui-cascader__bg':!activeColor}"
:style="{ background: activeColor }" v-if="idx === current && showLine"></view>
:class="{'fui-cascader__hi-width':item.text.length>6,'fui-cascader__color':idx === current && !getActiveColor}"
:style="{ color: idx === current ? getActiveColor : color, fontSize: size + 'rpx',fontWeight:idx === current?'bold':'normal' }">{{ item.text }}</text>
<view class="fui-cascader__header-line" :class="{'fui-cascader__bg':!getActiveColor}"
:style="{ background: getActiveColor }" v-if="idx === current && showLine"></view>
</view>
</view>
</scroll-view>
......@@ -32,8 +32,8 @@
<view class="fui-cascader__cell" :id="`fui_c_${subi}`" v-for="(sub, subi) in item.data"
:key="subi" @tap.stop="change(index, subi, sub)">
<view class="fui-cascader__checkmark"
:class="{'fui-cascader__icon-border':!activeColor}"
:style="{borderBottomColor:checkMarkColor || activeColor,borderRightColor:checkMarkColor || activeColor}"
:class="{'fui-cascader__icon-border':!getActiveColor}"
:style="{borderBottomColor:checkMarkColor || getActiveColor,borderRightColor:checkMarkColor || getActiveColor}"
v-if="item.index === subi"></view>
<image :src="sub.src" v-if="sub.src" class="fui-cascader__img"
:style="{ width: imgWidth+'rpx', height: imgHeight+'rpx', borderRadius: radius+'rpx' }">
......@@ -105,18 +105,10 @@
default: '#181818'
},
//选中颜色
// #ifdef APP-NVUE
activeColor: {
type: String,
default: '#465CFF'
},
// #endif
// #ifndef APP-NVUE
activeColor: {
type: String,
default: ''
},
// #endif
showLine: {
type: Boolean,
default: true
......@@ -159,6 +151,18 @@
default: '#181818'
}
},
computed: {
getActiveColor() {
let color = this.activeColor;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color;
}
},
data() {
return {
current: 0,
......
<template>
<!-- #ifdef APP-PLUS || H5 || MP-ALIPAY || MP-TOUTIAO -->
<!-- #ifdef APP-PLUS || H5 || MP-ALIPAY || MP-TOUTIAO|| MP-KUAISHOU || MP-JD || MP-360 || MP-LARK -->
<checkbox-group :name="name">
<slot></slot>
</checkbox-group>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ -->
<fui-form-field :name="name" :value="vals">
<fui-form-field :name="name" v-model="vals">
<slot></slot>
</fui-form-field>
<!-- #endif -->
......@@ -16,10 +16,11 @@
export default {
name: "fui-checkbox-group",
emits: ['change', 'input', 'update:modelValue'],
// #ifndef VUE3
// #ifdef MP-WEIXIN
behaviors: ['wx://form-field-group'],
// #endif
// #ifdef MP-BAIDU || MP-QQ || H5
behaviors: ['uni://form-field'],
// #endif
props: {
name: {
......
<template>
<view class="fui-checkbox__input"
:class="{'fui-checkbox__disabled':disabled,'fui-checkbox__color':!color && val && !isCheckMark}"
:class="{'fui-checkbox__disabled':disabled,'fui-checkbox__color':!getColor && val && !isCheckMark}"
:style="{backgroundColor:getBackgroundColor(val,isCheckMark),borderColor:getBorderColor(val,isCheckMark),zoom:isNvue?1:scaleRatio,transform:`scale(${isNvue?scaleRatio:1})`,borderRadius:borderRadius}"
@tap.stop="checkboxChange">
<view class="fui-check__mark" :style="{borderBottomColor:checkMarkColor,borderRightColor:checkMarkColor}"
v-if="val"></view>
<checkbox class="fui-checkbox__hidden" style="opacity: 0;position: absolute;" :color="color" :disabled="disabled" :value="value" :checked="val">
<checkbox class="fui-checkbox__hidden" style="opacity: 0;position: absolute;" :color="getColor"
:disabled="disabled" :value="value" :checked="val">
</checkbox>
</view>
</template>
......@@ -35,27 +36,25 @@
//checkbox选中背景颜色
color: {
type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: ''
// #endif
},
//checkbox未选中时边框颜色
borderColor: {
type: String,
default: '#ccc'
},
// #ifdef APP-NVUE
borderRadius: {
type: String,
default: '40px'
},
// #endif
// #ifndef APP-NVUE
borderRadius: {
type: String,
// #ifdef APP-NVUE
default: '40rpx'
// #endif
// #ifndef APP-NVUE
default: '50%'
// #endif
},
// #endif
//是否只展示对号,无边框背景
isCheckMark: {
type: Boolean,
......@@ -100,6 +99,18 @@
}
}
},
computed: {
getColor() {
let color = this.color;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color;
}
},
data() {
let isNvue = false;
// #ifdef APP-NVUE
......@@ -112,14 +123,14 @@
},
methods: {
getBackgroundColor(val, isCheckMark) {
let color = val ? this.color : '#fff'
let color = val ? this.getColor : '#fff'
if (isCheckMark) {
color = 'transparent'
}
return color;
},
getBorderColor(val, isCheckMark) {
let color = val ? this.color : this.borderColor;
let color = val ? this.getColor : this.borderColor;
if (isCheckMark) {
color = 'transparent'
}
......
......@@ -6,10 +6,10 @@
<!-- #ifdef APP-VUE || H5 -->
<canvas :start="percentage" :change:start="parse.init" :width="w" :change:width="parse.widthChange"
:sw="strokeWidth" :change:sw="parse.widthChange" :data-width="w" :data-sw="strokeWidth" :data-lc="lineCap"
:data-size="size" :data-percent="percentage" :data-color="color" :data-show="show" :data-ds="defaultShow"
:data-background="background" :data-foreground="foreground" :data-sa="sAngle" :data-ccw="counterclockwise"
:data-speed="speed" :data-am="activeMode" :data-cid="circleId" :canvas-id="circleId" :class="[circleId]"
:style="{width: w + 'px',height: w + 'px'}"></canvas>
:data-size="size" :data-percent="percentage" :data-color="color || primaryColor" :data-show="show" :data-ds="defaultShow"
:data-background="background" :data-foreground="foreground || primaryColor" :data-gradient="gradient" :data-sa="sAngle"
:data-ccw="counterclockwise" :data-speed="speed" :data-am="activeMode" :data-cid="circleId"
:canvas-id="circleId" :class="[circleId]" :style="{width: w + 'px',height: w + 'px'}"></canvas>
<!-- #endif -->
<!-- #ifdef MP -->
......@@ -18,8 +18,9 @@
:style="{width: w*4 +'px',height:w*4 +'px'}"></canvas>
<!-- #endif -->
<!-- #ifndef MP-ALIPAY -->
<canvas class="fui-circle__canvas" :canvas-id="circleId" :id="circleId"
:style="{width: w +'px',height:w +'px'}"></canvas>
<!-- 此处加v-if是因为vue3下编译到头条/抖音等小程序动态id失效,需等uni-app官方调整 -->
<canvas class="fui-circle__canvas" :canvas-id="circleId" :id="circleId" :style="{width: w +'px',height:w +'px'}"
v-if="circleId"></canvas>
<!-- #endif -->
<!-- #endif -->
<view class="fui-circle__inner">
......@@ -46,6 +47,7 @@
const width = res.width;
let ele = `.${res.cid}>canvas`
const canvas = document.querySelectorAll(this.format(ele))[0];
if (!canvas) return;
const ctx = canvas.getContext('2d');
state.context = ctx;
state.canvas = canvas;
......@@ -75,7 +77,12 @@
drawCircle(start, ctx, canvas, percent, res, state, owner) {
if (!ctx || !canvas) return;
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 renderLoop = () => {
drawFrame((res) => {
......@@ -104,7 +111,7 @@
if (!isEnd) {
let sa = Number(res.sa) * Math.PI
let eAngle = ((2 * Math.PI) / 100) * start + sa;
_this.drawArc(ctx, eAngle, res.foreground, res);
_this.drawArc(ctx, eAngle, gradient, res);
}
owner.callMethod('change', {
percent: start
......@@ -176,7 +183,7 @@
default: 120
},
//背景填充颜色,仅nvue ios有效
fillStyle:{
fillStyle: {
type: String,
default: '#FFFFFF'
},
......@@ -198,7 +205,7 @@
//圆环进度字体颜色
color: {
type: String,
default: '#465CFF'
default: ''
},
//是否显示进度文字
show: {
......@@ -218,7 +225,12 @@
//默认前景颜色
foreground: {
type: String,
default: '#465CFF'
default: ''
},
//进度条渐变颜色,结合foreground使用
gradient: {
type: String,
default: ''
},
//起始弧度,单位弧度 实际 Math.PI * sAngle
sAngle: {
......@@ -246,6 +258,12 @@
this.initWidth(val)
}
},
computed: {
primaryColor() {
const app = uni && uni.$fui && uni.$fui.color;
return (app && app.primary) || '#465CFF';
}
},
data() {
// #ifndef MP-WEIXIN
const circleId = `fui_cc_${Math.ceil(Math.random() * 10e5).toString(36)}`
......
......@@ -25,9 +25,11 @@ export default {
}
},
mounted() {
setTimeout(() => {
this.init();
}, 50)
this.$nextTick(() => {
setTimeout(() => {
this.init();
}, 50)
})
},
methods: {
//初始化绘制
......@@ -44,7 +46,7 @@ export default {
// #endif
ctx.setLineWidth(sw);
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);
},
drawCircle(start) {
......@@ -60,7 +62,15 @@ export default {
sw = sw * 4
// #endif
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)
if (percentage > 0) {
start += Number(this.speed);
......@@ -72,7 +82,7 @@ export default {
si = si * 4
// #endif
ctx.setFontSize(si);
ctx.setFillStyle(this.color);
ctx.setFillStyle(this.color || this.primaryColor);
ctx.setTextAlign('center');
ctx.setTextBaseline('middle');
let percent = `${this.counterclockwise ? 100 - start : start}%`;
......@@ -85,7 +95,7 @@ export default {
if (percentage == 0 || (this.counterclockwise && start == 100)) {
ctx.draw();
} 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);
}
let time = 1000 / 60
......@@ -117,7 +127,7 @@ export default {
radius = radius * 4
sw = sw * 4
// #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();
!def && ctx.draw();
}
......
......@@ -54,7 +54,7 @@ export default {
drawDefaultCircle(ctx) {
ctx.setLineWidth(Number(this.strokeWidth));
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);
},
//进度圆环
......@@ -77,7 +77,14 @@ export default {
// ctx.clearRect(0, 0, this.w, this.w)
this.defaultShow && this.drawDefaultCircle(ctx)
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)
if (percentage > 0) {
start += Number(this.speed);
......@@ -85,7 +92,7 @@ export default {
}
if (this.show) {
ctx.setFontSize(this.fontSize);
ctx.setFillStyle(this.color);
ctx.setFillStyle(this.color || this.primaryColor);
ctx.setTextAlign('center');
ctx.setTextBaseline('middle');
let percent = `${this.counterclockwise ? 100 - start : start}%`;
......@@ -95,7 +102,7 @@ export default {
if (percentage == 0 || (this.counterclockwise && start == 100)) {
ctx.draw();
} 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);
}
setTimeout(() => {
......@@ -117,7 +124,7 @@ export default {
ctx.setLineCap(this.lineCap);
ctx.beginPath();
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();
!def && ctx.draw();
}
......
......@@ -27,7 +27,7 @@ const getClipboardData = function(data, callback, e) {
// #endif
// #ifdef H5
let event = window.event || e || {}
let event =window.event || e || {}
let clipboard = new ClipboardJS("", {
text: () => data
})
......
......@@ -103,21 +103,6 @@
watch: {
open(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) {
......@@ -150,14 +135,12 @@
},
methods: {
init() {
const promise = []
// #ifndef APP-NVUE
promise.push(this.getCollapseHeight())
this.getCollapseHeight()
// #endif
// #ifdef APP-NVUE
promise.push(this.getNvueHeight())
this.getNvueHeight()
// #endif
return Promise.all(promise)
},
uninstall() {
if (this.collapse) {
......@@ -181,49 +164,41 @@
}
},
getCollapseHeight(index = 0) {
return new Promise((resolve) => {
uni.createSelectorQuery()
// #ifndef MP-ALIPAY
.in(this)
uni.createSelectorQuery()
// #ifndef MP-ALIPAY
.in(this)
// #endif
.select(`#${this.elId}`)
.fields({
size: true
}, data => {
if (index >= 10) return
if (!data) {
index++
this.getCollapseHeight(index)
return
}
// #ifdef APP-NVUE
this.height = data.height + 1
// #endif
.select(`#${this.elId}`)
.fields({
size: true
}, data => {
if (index >= 10) return
if (!data) {
index++
this.getCollapseHeight(index)
return
}
// #ifdef APP-NVUE
this.height = data.height + 1
// #endif
// #ifndef APP-NVUE
this.height = data.height
// #endif
this.isHeight = true
resolve(this.height)
})
.exec()
})
// #ifndef APP-NVUE
this.height = data.height
// #endif
this.isHeight = true
})
.exec()
},
getNvueHeight() {
return new Promise((resolve) => {
const result = dom.getComponentRect(this.$refs['fui_collapse__el'], option => {
if (option && option.result && option.size) {
// #ifdef APP-NVUE
this.height = option.size.height + 1
// #endif
// #ifndef APP-NVUE
this.height = option.size.height
// #endif
this.isHeight = true
resolve(this.height)
}
})
const result = dom.getComponentRect(this.$refs['fui_collapse__el'], option => {
if (option && option.result && option.size) {
// #ifdef APP-NVUE
this.height = option.size.height + 1
// #endif
// #ifndef APP-NVUE
this.height = option.size.height
// #endif
this.isHeight = true
}
})
},
getCollapse(name = 'fui-collapse') {
......
......@@ -14,9 +14,6 @@
default: false
}
},
data() {
return {}
},
created() {
this.children = []
},
......
/*
组件属性全局配置文件。优先级:全局配置文件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 = {
//组件名称,小驼峰命名
//如fui-button写成fuiButton
......@@ -14,11 +68,15 @@ const fuiConfig = {
},
fuiIcon: {
size: 64,
unit: 'rpx'
unit: 'rpx',
//V1.9.8+
color: ''
},
fuiText: {
size: 32,
unit: 'rpx'
unit: 'rpx',
//仅Nvue有效,black 默认颜色,V1.9.8+
color: ''
},
fuiInput: {
labelSize: 32,
......@@ -26,9 +84,22 @@ const fuiConfig = {
},
fuiFormItem: {
labelSize: 32,
labelWidth: 160,
labelRight: 16
}
labelWidth: 170,
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
<template>
<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 }">
<text :style="{fontSize: size + 'rpx',lineHeight:size + 'rpx', color: color}" class="fui-countdown__verify-text"
:class="{'fui-cdv__color':!color}">{{ showText }}</text>
: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: getColor}"
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'}"
@tap.stop="sendCode" v-if="status===1"></view>
<!-- #ifndef APP-NVUE -->
<view class="fui-countdown__verify-line" :class="{'fui-cdv__border-color':!borderColor}"
:style="{borderColor: borderColor, borderRadius: (radius * 2)+'rpx'}">
<view class="fui-countdown__verify-line" :class="{'fui-cdv__border-color':!getBorderColor}"
:style="{borderColor: getBorderColor, borderRadius: (radius * 2)+'rpx'}">
</view>
<!-- #endif -->
</view>
......@@ -67,42 +67,48 @@
default: 24
},
//字体颜色
// #ifdef APP-NVUE
color: {
type: String,
default: '#465CFF'
},
// #endif
// #ifndef APP-NVUE
color: {
type: String,
default: ''
},
// #endif
//背景色
background: {
type: String,
default: 'transparent'
},
//边框颜色
// #ifdef APP-NVUE
borderColor: {
type: String,
default: '#465CFF'
},
// #endif
// #ifndef APP-NVUE
borderColor: {
type: String,
default: ''
},
// #endif
//自定义参数
param: {
type: [Number, String],
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() {
return {
showText: '',
......
......@@ -2,25 +2,25 @@
<view class="fui-data__tag-wrap" :style="{marginBottom:'-'+gap+'rpx'}">
<!-- #ifndef APP-NVUE -->
<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">
<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>
</view>
<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>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<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)">
<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>
<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>
<!-- #endif -->
</view>
......@@ -109,7 +109,7 @@
},
activeColor: {
type: String,
default: '#465CFF'
default: ''
},
background: {
type: String,
......@@ -119,9 +119,14 @@
type: String,
default: '#fff'
},
//默认边框颜色
defaultBorderColor: {
type: String,
default: ''
},
borderColor: {
type: String,
default: '#465CFF'
default: ''
},
//设为true时,圆角值不建议设过大
mark: {
......@@ -134,7 +139,7 @@
},
markColor: {
type: String,
default: '#465CFF'
default: ''
}
},
watch: {
......@@ -153,6 +158,12 @@
created() {
this.initData(this.options)
},
computed: {
primaryColor() {
const app = uni && uni.$fui && uni.$fui.color;
return (app && app.primary) || '#465CFF';
}
},
data() {
return {
icon: '\ue600',
......@@ -350,7 +361,7 @@
.fui-data__tag-wrap {
/* #ifndef APP-NVUE */
width: 100%;
max-width: 100%;
display: flex;
/* #endif */
flex-direction: row;
......
......@@ -20,6 +20,7 @@
// #ifdef APP-NVUE
const animation = uni.requireNativePlugin('animation');
// #endif
const primaryColor = (uni && uni.$fui && uni.$fui.color && uni.$fui.color.primary) || '#465CFF';
export default {
name: 'fui-dialog',
emits: ['click', 'close'],
......@@ -51,7 +52,7 @@
text: '取消'
}, {
text: '确定',
color: '#465CFF'
color: primaryColor
}]
}
},
......
......@@ -24,8 +24,8 @@
</view>
<view class="fui-dk__button-wrap">
<view class="fui-dk__button"
:class="{'fui-dk__button-color':!background,'fui-dk__btn-disabled':disabled}"
:style="{background:background}">
:class="{'fui-dk__button-color':!getBgColor,'fui-dk__btn-disabled':disabled}"
:style="{background:getBgColor}">
<text class="fui-dk__button-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">
......@@ -58,18 +58,10 @@
type: String,
default: '确定'
},
// #ifdef APP-NVUE
background: {
type: String,
default: '#465CFF'
},
// #endif
// #ifndef APP-NVUE
background: {
type: String,
default: ''
},
// #endif
color: {
type: String,
default: '#fff'
......@@ -136,6 +128,18 @@
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() {
return {
iphoneX: false,
......
......@@ -13,7 +13,7 @@
<view class="fui-digital__roller-column"
:style="{transform:`translateY(-${(keys[index] || 0) * rollHeight}px)`}">
<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>
<!-- #endif -->
</view>
......@@ -28,18 +28,10 @@
type: [Number, String],
default: ''
},
// #ifdef APP-NVUE
color: {
type: String,
default: '#465CFF'
},
// #endif
// #ifndef APP-NVUE
color: {
type: String,
default: ''
},
// #endif
size: {
type: [Number, String],
default: 32
......@@ -68,6 +60,16 @@
styles += `width:${this.width}rpx;`
}
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: {
......
......@@ -54,9 +54,6 @@
default: '#F1F4FA'
}
},
data() {
return {}
},
computed: {
getTop() {
return Number(this.height) / 2 + 'rpx'
......
......@@ -9,7 +9,7 @@
</view>
<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}"
v-if="src && src!==true && src!=='true' && type==1" >
v-if="src && src!==true && src!=='true' && type==1">
</image>
<view class="fui-drag__item-icon" @tap.stop="handleDel" :class="{'fui-drag__item-ab':type==1}"
v-if="type==1 && isDel">
......@@ -89,7 +89,9 @@
this.size = styles.size || 30
this.color = styles.color || '#181818'
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'
},
handleDel() {
......@@ -106,7 +108,7 @@
/* #ifndef APP-NVUE */
display: flex;
box-sizing: border-box;
transform: translate3d(0,0,0);
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
/* #endif */
justify-content: center;
......@@ -185,7 +187,7 @@
display: block;
pointer-events: none;
flex-shrink: 0;
transform: translate3d(0,0,0);
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
/* #endif */
}
......
......@@ -5,19 +5,11 @@
:class="[dragging?'fui-drag-item__show':'fui-drag-item__hidden']">
<!-- #endif -->
<!-- #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-->
<view class="fui-drag__wrap" :catch:touchmove="wxDrag?true:''"
: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 -->
<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"
:data-param="param" :data-isdrag="isDrag && dragging?1:0" @touchstart="handler.touchStart"
......
......@@ -5,7 +5,7 @@ function isPC() {
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++) {
for (var v = 0; v< Agents.length - 1; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
......
......@@ -59,7 +59,8 @@
// #endif
return {
isNvue: isNvue,
isShow: false
isShow: false,
width: 0
}
},
// #ifdef APP-NVUE
......@@ -76,7 +77,37 @@
}
},
// #endif
mounted() {
setTimeout(() => {
this._getSize((width) => {
this.width = width
})
}, 100)
},
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) {
if (!this.maskClosable) return;
this.$emit('close', {});
......
......@@ -11,8 +11,8 @@
: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)">
<view class="fui-ddl__checkbox"
: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}"
:class="{'fui-is__checkmark':isCheckMark,'fui-ddl__checkbox-color':(!checkboxColor || checkboxColor===true) && model.checked && !isCheckMark}"
:style="{background:model.checked && !isCheckMark ?getChkColor:'transparent',borderColor:model.checked && !isCheckMark ?getChkColor:borderColor}"
v-if="isCheckbox">
<view class="fui-ddl__checkmark"
:style="{borderBottomColor:checkmarkColor,borderRightColor:checkmarkColor}"
......@@ -22,8 +22,7 @@
<view class="fui-ddl__icon-box"
:class="{'fui-ddl__icon-ml':!isReverse && isCheckbox,'fui-ddl__icon-mr':isReverse}"
:style="{width:iconWidth+'rpx',height:iconWidth+'rpx'}" v-if="model.src">
<image :src="model.src"
:style="{width:iconWidth+'rpx',height:iconWidth+'rpx'}"></image>
<image :src="model.src" :style="{width:iconWidth+'rpx',height:iconWidth+'rpx'}"></image>
</view>
<text class="fui-ddl__item-text"
:class="{'fui-ddl__text-pl':!isReverse && (isCheckbox || model.src),'fui-ddl__text-pr':isReverse && (isCheckbox || model.src)}"
......@@ -80,12 +79,7 @@
},
checkboxColor: {
type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: ''
// #endif
},
borderColor: {
type: String,
......@@ -154,6 +148,16 @@
styles += `width:${width}rpx;`
}
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() {
......
......@@ -14,8 +14,8 @@
: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)">
<view class="fui-ddm__checkbox"
: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}"
:class="{'fui-is__checkmark':isCheckMark,'fui-ddm__checkbox-color':(!checkboxColor || checkboxColor===true) && model.checked && !isCheckMark}"
:style="{background:model.checked && !isCheckMark ?getChkColor:'transparent',borderColor:model.checked && !isCheckMark ?getChkColor:borderColor}"
v-if="isCheckbox">
<view class="fui-ddm__checkmark"
:style="{borderBottomColor:checkmarkColor,borderRightColor:checkmarkColor}"
......@@ -89,12 +89,7 @@
//选择框选中后颜色
checkboxColor: {
type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: ''
// #endif
},
//选择框未选中时边框颜色
borderColor: {
......@@ -208,6 +203,16 @@
}
// #endif
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() {
......
......@@ -29,15 +29,18 @@
type: String,
default: ''
},
// #ifdef APP-NVUE
color: {
type: String,
// #ifdef APP-NVUE
default: '#333333'
// #endif
// #ifndef APP-NVUE
},
// #endif
// #ifndef APP-NVUE
color: {
type: String,
default: ''
// #endif
},
// #endif
size: {
type: [Number, String],
default: 32
......@@ -46,15 +49,18 @@
type: String,
default: ''
},
// #ifdef APP-NVUE
descrColor: {
type: String,
// #ifdef APP-NVUE
default: '#B2B2B2'
// #endif
// #ifndef APP-NVUE
},
// #endif
// #ifndef APP-NVUE
descrColor: {
type: String,
default: ''
// #endif
},
// #endif
descrSize: {
type: [Number, String],
default: 24
......@@ -67,10 +73,7 @@
type: [Number, String],
default: 0
}
},
data() {
return {}
},
}
}
</script>
......
// #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
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
}
// #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
......@@ -5,7 +5,7 @@
: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
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>
</view>
<view class="fui-footer__text" :class="{'fui-as__safe-weex':iphoneX && safeArea}" :style="{color:color,fontSize:size+'rpx'}">
......@@ -63,6 +63,12 @@
default: true
}
},
computed: {
linkColor() {
const app = uni && uni.$fui && uni.$fui.color;
return (app && app.link) || '#465CFF';
}
},
data() {
return {
iphoneX: false
......@@ -82,9 +88,8 @@
let iphonex = false;
let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax',
'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini',
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini', 'iphone14plus',
'iphone14pro', 'iphone14promax', 'iphone15', 'iphone15mini', 'iphone15plus',
'iphone15pro', 'iphone15promax'
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini',
'iphone14pro', 'iphone14promax', 'iphone15'
]
const model = res.model.replace(/\s/g, "").toLowerCase()
const newModel = model.split('<')[0]
......@@ -139,7 +144,8 @@
}
/* #ifndef APP-NVUE */
.fui-link__color text {
.fui-link__color text,
.fui-link__color {
color: var(--fui-color-link, #465CFF) !important;
}
......
......@@ -7,20 +7,24 @@
<script>
//此组件只为form表单提交传递数据使用,暂时用于微信小程序/百度小程序/QQ小程序
export default {
emits: ['input', 'update:modelValue'],
name: "fui-form-field",
// #ifndef VUE3
behaviors: ['uni://form-field'],
// #endif
props: {
//是否为隐藏域
hidden: {
type: Boolean,
default: false
},
value: {
type: [Number, String, Array],
default: ''
},
modelValue: {
type: [Number, String, Array],
default: ''
}
},
data() {
return {}
},
}
}
</script>
......
......@@ -4,15 +4,15 @@
@tap="handleClick">
<!-- #ifdef APP-NVUE -->
<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>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<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 -->
<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>
<view class="fui-form__item-content">
<slot></slot>
......@@ -77,6 +77,10 @@
type: String,
default: ''
},
labelWeight: {
type: [Number, String],
default: 0
},
//是否显示必填的红色星号
asterisk: {
type: Boolean,
......@@ -152,6 +156,10 @@
const labelAlign = (uni.$fui && uni.$fui.fuiFormItem && uni.$fui.fuiFormItem.labelAlign) || 'left'
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() {
const akPosi = (uni.$fui && uni.$fui.fuiFormItem && uni.$fui.fuiFormItem.asteriskPosition) || 'left'
const position = this.asteriskPosition || this.akPosi || akPosi
......@@ -160,6 +168,10 @@
const pr = this.padding[1]
const pdr = pr ? pr.replace('rpx', '').replace('px', '') : 0;
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() {
......@@ -168,6 +180,7 @@
lColor: '',
lWidth: 0,
lAlign: '',
lWeight: 0,
akColor: '',
akPosi: ''
}
......@@ -182,6 +195,7 @@
this.lSize = this.form.labelSize;
this.lColor = this.form.labelColor;
this.lWidth = this.form.labelWidth;
this.lWeight = this.form.labelWeight;
this.lAlign = this.form.labelAlign;
this.akColor = this.form.asteriskColor;
this.akPosi = this.form.asteriskPosition;
......@@ -247,12 +261,14 @@
/* #ifndef APP-NVUE */
.fui-form__item-sizing {
box-sizing: border-box;
flex-shrink: 0;
}
/* #endif */
.fui-form__item-content {
flex: 1;
width: 0;
}
.fui-form__item-bottom {
......
......@@ -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}">
<slot></slot>
<view class="fui-form__msg-wrap"
:style="{top:top+'px',left:left+'rpx',right:right+'rpx',background:background,borderRadius:radius+'rpx'}"
v-if="show" :class="{'fui-form__msg-bg':!background,'fui-form__msg-show':errorMsg}"><text
:style="{top:top+'px',left:left+'rpx',right:right+'rpx',background:getBgColor,borderRadius:radius+'rpx'}"
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>
<view class="fui-form__mask" v-if="disabled"></view>
</view>
......@@ -53,12 +53,7 @@
//错误提示框背景色
background: {
type: String,
// #ifdef APP-NVUE
default: '#FF2B2B'
// #endif
// #ifndef APP-NVUE
default: ''
// #endif
},
//错误提示字体大小
size: {
......@@ -87,7 +82,7 @@
},
labelColor: {
type: String,
default: '#333'
default: ''
},
//form-item label宽度,单位rpx 默认使用全局设置值
labelWidth: {
......@@ -95,17 +90,21 @@
default: 0
},
//label 对齐方式:left,right
labelAlign:{
labelAlign: {
type: String,
default: 'left'
default: ''
},
labelWeight: {
type: [Number, String],
default: 0
},
// form-item 必填项星号颜色
asteriskColor: {
type: String,
default: '#FF2B2B'
default: ''
},
//left,right
asteriskPosition:{
asteriskPosition: {
type: String,
default: ''
}
......@@ -115,6 +114,18 @@
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() {
return {
errorMsg: '',
......
......@@ -11,8 +11,7 @@
<text class="fui-gallery__index">{{active+1}}/{{imgUrls.length}}</text>
</view>
<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}"
v-if="descr">{{descr}}</text>
<text class="fui-gallery__descr" :class="{'fui-gallery__text-ellipsis':ellipsis}">{{descr}}</text>
</view>
</view>
</template>
......@@ -73,7 +72,6 @@
this.defActive = Number(this.current);
this.active = this.defActive;
this.initData(this.urls)
this.getDescr(this.active)
},
data() {
let isNvue = false;
......@@ -101,6 +99,11 @@
})
}
this.imgUrls = vals;
this.$nextTick(() => {
setTimeout(() => {
this.getDescr(this.active)
}, 10)
})
}
},
change(e) {
......@@ -122,8 +125,8 @@
let iphonex = false;
let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax',
'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini',
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini', 'iphone14plus',
'iphone14pro', 'iphone14promax', 'iphone15', 'iphone15mini', 'iphone15plus',
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini',
'iphone14pro', 'iphone14promax', 'iphone15', 'iphone15mini',
'iphone15pro', 'iphone15promax'
]
const model = res.model.replace(/\s/g, "").toLowerCase()
......
......@@ -95,7 +95,7 @@
},
getWidth(fn) {
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
// #endif
......
// #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
<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>
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
}
// #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
<template>
<!-- #ifndef APP-NVUE -->
<text :style="{ color: color, 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:'']"
<text :style="{ color:getColor, fontSize: getSize, fontWeight: fontWeight}" class="fui-icon"
: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>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<text :style="{ color: color, fontSize: getSize,lineHeight:getSize, fontWeight: fontWeight}" class="fui-icon"
:class="[customPrefix]" @click="handleClick">{{ customPrefix?name:icons[name] }}</text>
<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 -->
</template>
......@@ -43,18 +44,10 @@
type: String,
default: ''
},
// #ifdef APP-NVUE
color: {
type: String,
default: '#333333'
},
// #endif
// #ifndef APP-NVUE
color: {
type: String,
default: ''
},
// #endif
//字重
fontWeight: {
type: [Number, String],
......@@ -73,7 +66,7 @@
type: String,
default: ''
},
//是否显示为主色调,color为空时有效。nvue不支持【内部使用】
//是否显示为主色调,color为空时有效。【内部使用】
primary: {
type: Boolean,
default: false
......@@ -84,6 +77,21 @@
const size = (uni.$fui && uni.$fui.fuiIcon && uni.$fui.fuiIcon.size) || 64
const unit = (uni.$fui && uni.$fui.fuiIcon && uni.$fui.fuiIcon.unit) || 'rpx'
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() {
......
......@@ -3,7 +3,7 @@ function isPC() {
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++) {
for (var v = 0; v< Agents.length - 1; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
......
......@@ -2,13 +2,13 @@
<view class="fui-index__list-item" :class="{'fui-il__between':subRight}" @tap="onClick">
<view class="fui-index__list-left">
<view class="fui-il__checkbox"
:class="{'fui-il__checkbox-color':(!selectedColor || selectedColor=='true') && model.checked}"
:style="{background:model.checked?selectedColor:'#fff',borderColor:model.checked?selectedColor:borderColor}"
:class="{'fui-il__checkbox-color':(!selectedColor || selectedColor === true) && model.checked}"
:style="{background:model.checked?getSelectedColor:'#fff',borderColor:model.checked?getSelectedColor:borderColor}"
v-if="isSelect">
<view class="fui-il__checkmark" v-if="model.checked"></view>
</view>
<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>
<text class="fui-index__list-main">{{model.text || ''}}</text>
</view>
......@@ -18,13 +18,9 @@
</template>
<script>
import fLazyload from '../fui-lazyload/fui-lazyload.vue'
//此组件为索引列表item项,若不满足要求可自行调整样式
export default {
name: 'f-index-list-item',
components: {
fLazyload
},
props: {
model: {
type: Object,
......@@ -38,12 +34,7 @@
},
selectedColor: {
type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: ''
// #endif
},
//checkbox未选中时边框颜色
borderColor: {
......@@ -73,9 +64,19 @@
default: 0
}
},
data() {
return {}
},
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;
}
},
methods: {
onClick() {
this.$emit("itemClick", {
......
......@@ -30,8 +30,6 @@
<scroll-view class="fui-index__list-sv" scroll-y :scroll-into-view="scrollViewId">
<slot></slot>
<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}"
:style="{background:background}">
<text class="fui-il__letter-text"
......@@ -75,21 +73,21 @@
<!-- #endif -->
<!-- #ifdef VUE3 -->
<!-- #ifndef APP-NVUE -->
<view class="fui-il__indicator" :class="{'fui-il__nvue-android':nvueAndroid}"
:style="{ top: indicators[touchmoveIndex] + 'px' }" v-if="touching && touchmoveIndex!==-1">
<view class="fui-il__indicator-after"></view>
<text class="fui-il__indicator-text">{{ lists[touchmoveIndex] && lists[touchmoveIndex].letter }}</text>
</view>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<view class="fui-il__indicator" :class="{'fui-il__nvue-android':nvueAndroid}"
:style="{ top: indicators[touchmoveIndex] + 'px' }" v-if="touching && touchmoveIndex!==-1">
<view class="fui-il__indicator-after"></view>
<text class="fui-il__indicator-text">{{ lists[touchmoveIndex] && lists[touchmoveIndex].letter }}</text>
</view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view class="fui-il__indicator" :class="{'fui-il__nvue-android':nvueAndroid}"
:style="{ top: idtHeight/2 + 'px' }" v-if="touching && touchmoveIndex!==-1">
<view class="fui-il__indicator-after"></view>
<text class="fui-il__indicator-text">{{ lists[touchmoveIndex] && lists[touchmoveIndex].letter }}</text>
</view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view class="fui-il__indicator" :class="{'fui-il__nvue-android':nvueAndroid}"
:style="{ top: idtHeight/2 + 'px' }" v-if="touching && touchmoveIndex!==-1">
<view class="fui-il__indicator-after"></view>
<text class="fui-il__indicator-text">{{ lists[touchmoveIndex] && lists[touchmoveIndex].letter }}</text>
</view>
<!-- #endif -->
<!-- #endif -->
......@@ -99,7 +97,7 @@
<view class="fui-letter__item" v-for="(item, i) in lists" :key="i">
<!-- @tap="letterTap(i)" -->
<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>
......@@ -168,15 +166,18 @@
type: String,
default: '#181818'
},
// #ifdef APP-NVUE
background: {
type: String,
// #ifdef APP-NVUE
default: '#F1F4FA'
// #endif
// #ifndef APP-NVUE
},
// #endif
// #ifndef APP-NVUE
background: {
type: String,
default: ''
// #endif
},
// #endif
keyColor: {
type: String,
default: '#7F7F7F'
......@@ -187,12 +188,7 @@
},
activeBackground: {
type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: ''
// #endif
},
isSelect: {
type: Boolean,
......@@ -205,12 +201,7 @@
},
selectedColor: {
type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: ''
// #endif
},
//是否显示图片
isSrc: {
......@@ -237,6 +228,19 @@
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() {
let isNvue = false;
// #ifdef APP-NVUE
......
......@@ -305,12 +305,14 @@
.fui-number__input {
text-align: center;
font-weight: 500;
border-width: 0;
}
/* #ifdef H5 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
::-webkit-inner-spin-button,
::-webkit-outer-spin-button{
-webkit-appearance: none;
margin: 0;
}
/* #endif */
......
......@@ -34,9 +34,6 @@
default: false
}
},
data() {
return {}
},
created() {
this.childrens = [];
},
......
......@@ -64,7 +64,7 @@ export default [{
cn: '晋',
en: 'P'
}]
}, {// echo建议
}, {
id: 'f_p3',
keys: [{
cn: '蒙',
......@@ -82,7 +82,7 @@ export default [{
cn: '贵',
en: 'G'
}, {
cn: '粤',// 功能需要优化
cn: '粤',
en: 'H'
}, {
cn: '青',
......@@ -97,10 +97,10 @@ export default [{
cn: '宁',
en: ''
}]
}, {// 新特性待增加
}, {
id: 'f_p4',
keys: [{
cn: 'ABC',// echo建议
cn: 'ABC',
en: '返回'
}, {
cn: '琼',
......@@ -119,7 +119,7 @@ export default [{
en: 'B'
}, {
cn: '港',
en: 'N'// 新特性待增加
en: 'N'
}, {
cn: '澳',
en: 'M'
......
......@@ -6,7 +6,7 @@
<view v-if="toolbar" class="fui-lp__btn-wrap"
:class="[theme==='light'?'fui-lp__btnwrap-light':'fui-lp__btnwrap-dark']">
<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 class="fui-license__plate-grids">
<view class="fui-lp__grid-wrap" v-for="(item,index) in keyList" :key="item.id">
......@@ -56,18 +56,10 @@
type: String,
default: '完成'
},
// #ifdef APP-NVUE
color: {
type: String,
default: '#465CFF'
},
// #endif
// #ifndef APP-NVUE
color: {
type: String,
default: ''
},
// #endif
size: {
type: [Number, String],
default: 30
......@@ -108,6 +100,18 @@
}
// #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() {
return {
iphoneX: false,
......@@ -157,9 +161,8 @@
let iphonex = false;
let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax',
'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini',
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini', 'iphone14plus',
'iphone14pro', 'iphone14promax', 'iphone15', 'iphone15mini', 'iphone15plus',
'iphone15pro', 'iphone15promax'
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini',
'iphone14pro', 'iphone14promax'
]
const model = res.model.replace(/\s/g, "").toLowerCase()
const newModel = model.split('<')[0]
......@@ -190,7 +193,7 @@
this.$emit('complete', {})
},
changeKeyboard(type = 'en') {
this.type = type === 'en' ? 2 : 1
this.type = type === 'en' ? 2 : 1
}
}
};
......
<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>
<template>
<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">
<view v-if="topBorder" :style="{background:borderColor,left:topLeft+'rpx',right:topRight+'rpx'}"
class="fui-cell__border-top" :class="{'fui-cell__border-color':!borderColor}"></view>
<view v-if="topBorder" :style="{background:getBorderColor,left:topLeft+'rpx',right:topRight+'rpx'}"
class="fui-cell__border-top" :class="{'fui-cell__border-color':!getBorderColor}"></view>
<slot></slot>
<view v-if="bottomBorder" :style="{background:borderColor,left:bottomLeft+'rpx',right:bottomRight+'rpx'}"
class="fui-cell__border-bottom" :class="{'fui-cell__border-color':!borderColor}"></view>
<view class="fui-cell__arrow" v-if="arrow" :style="{'border-color':arrowColor}">
<view v-if="bottomBorder" :style="{background:getBorderColor,left:getBottomLeft+'rpx',right:bottomRight+'rpx'}"
class="fui-cell__border-bottom" :class="{'fui-cell__border-color':!getBorderColor}"></view>
<view class="fui-cell__arrow" v-if="arrow" :style="{'border-color':getArrowColor}">
</view>
</view>
</template>
......@@ -21,7 +21,7 @@
padding: {
type: Array,
default () {
return ['32rpx', '32rpx']
return []
}
},
//margin-top 单位rpx
......@@ -59,7 +59,7 @@
},
arrowColor: {
type: String,
default: '#B2B2B2'
default: ''
},
//是否显示上边框
topBorder: {
......@@ -72,18 +72,10 @@
default: true
},
//边框颜色,非nvue下传值则全局默认样式失效
// #ifdef APP-NVUE
borderColor: {
type: String,
default: '#EEEEEE'
},
// #endif
// #ifndef APP-NVUE
borderColor: {
type: String,
default: ''
},
// #endif
//上边框left值,单位rpx
topLeft: {
type: [Number, String],
......@@ -97,7 +89,7 @@
//下边框left值,单位rpx
bottomLeft: {
type: [Number, String],
default: 32
default: 0
},
//下边框right值,单位rpx
bottomRight: {
......@@ -114,9 +106,37 @@
default: 0
}
},
data() {
return {}
},
computed: {
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: {
handleClick() {
this.$emit('click', {
......@@ -203,6 +223,7 @@
.fui-cell__border-color {
background-color: var(--fui-color-border, #EEEEEE) !important;
}
.fui-list__cell-background {
background-color: var(--fui-bg-color, #fff);
}
......
......@@ -119,10 +119,7 @@
type: [Number, String],
default: 0
}
},
data() {
return {}
},
}
}
</script>
......
......@@ -62,10 +62,7 @@
type: Boolean,
default: false
}
},
data() {
return {}
},
}
}
</script>
......
......@@ -2,7 +2,7 @@
<view class="fui-loadmore__wrap" :class="['fui-loadmore__'+direction]" :style="{height:height+'rpx'}">
<view class="fui-loadmore__icon" ref="fui_loadmore"
: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">
</view>
<image class="fui-loadmore__icon-ani" ref="fui_loadmore" :src="src"
......@@ -60,12 +60,7 @@
//loading图标高亮部分颜色
activeColor: {
type: String,
// #ifdef APP-NVUE
default: "#465CFF"
// #endif
// #ifndef APP-NVUE
default: ""
// #endif
},
//loading 图标的宽度,单位rpx
iconWidth: {
......@@ -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() {
let isNvue = false;
// #ifdef APP-NVUE
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
<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>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论