Skip to content

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

feat: 更新 firstui v1.9.5

上级 f6b06fcc
正在显示 包含 1056 行增加 和 332 行删除
src/components/firstui/fui-actionsheet/fui-actionsheet.vue
......@@ -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()
......
src/components/firstui/fui-alert/fui-alert.vue
......@@ -122,9 +122,6 @@
default: false
}
},
data() {
return {}
},
methods: {
getColor(type) {
const color = "#465CFF"
......
src/components/firstui/fui-autograph/fui-autograph.vue
......@@ -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() {
......
src/components/firstui/fui-autograph/gcanvas/index.js
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;
};
src/components/firstui/fui-barcode/fui-barcode.vue
......@@ -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)
......
src/components/firstui/fui-bottom-navbar/fui-bottom-navbar.vue
......@@ -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]
......
src/components/firstui/fui-bottom-popup/fui-bottom-popup.vue
......@@ -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]
......
src/components/firstui/fui-button/fui-button.vue
<template>
<view class="fui-button__wrap" :class="[!width || width==='100%' || width===true?'fui-button__flex-1':'',disabled && !disabledBackground ? 'fui-button__opacity' : '']"
<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}"
@touchstart="handleStart" @touchend="handleClick" @touchcancel="handleEnd">
<button class="fui-button" :class="[
......@@ -20,9 +21,10 @@
borderRadius: getRadius,
fontSize: getSize,
color: getColor
}" :loading="loading" :form-type="formType" :open-type="openType" @getuserinfo="bindgetuserinfo"
}" :loading="loading" :form-type="formType" :open-type="openType" :app-parameter="appParameter" @getuserinfo="bindgetuserinfo"
@getphonenumber="bindgetphonenumber" @contact="bindcontact" @error="binderror"
@opensetting="bindopensetting" :disabled="disabled" :scope="scope" @tap.stop="handleTap">
@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"
......@@ -151,6 +153,10 @@
type: String,
default: ''
},
appParameter: {
type: String,
default: ''
},
index: {
type: [Number, String],
default: 0
......@@ -306,6 +312,16 @@
detail = {}
} = {}) {
this.$emit('opensetting', detail);
},
bindchooseavatar({
detail = {}
} = {}) {
this.$emit('chooseavatar', detail);
},
bindlaunchapp({
detail = {}
} = {}) {
this.$emit('launchapp', detail);
}
}
};
......
src/components/firstui/fui-calendar/fui-calendar.vue
......@@ -30,31 +30,17 @@
<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,31 +48,17 @@
<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">
......
src/components/firstui/fui-checkbox-group/fui-checkbox-group.vue
......@@ -5,7 +5,7 @@
</checkbox-group>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ -->
<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU || MP-JD || MP-360 || MP-LARK -->
<fui-form-field :name="name" :value="vals">
<slot></slot>
</fui-form-field>
......
src/components/firstui/fui-circle/fui-circle.vue
......@@ -7,9 +7,9 @@
<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-background="background" :data-foreground="foreground" :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'
},
......@@ -220,6 +227,11 @@
type: String,
default: '#465CFF'
},
//进度条渐变颜色，结合foreground使用
gradient: {
type: String,
default: ''
},
//起始弧度，单位弧度 实际 Math.PI * sAngle
sAngle: {
type: Number,
......
src/components/firstui/fui-circle/mpjs.js
......@@ -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;
// #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);
}
// #endif
ctx.setStrokeStyle(gradient);
let percentage = Number(this.percent)
if (percentage > 0) {
start += Number(this.speed);
......@@ -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();
}
......
src/components/firstui/fui-circle/nvue.js
......@@ -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;
// 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);
......@@ -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();
}
......
src/components/firstui/fui-clipboard/index.js
......@@ -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
})
......
src/components/firstui/fui-collapse/fui-collapse.vue
......@@ -14,9 +14,6 @@
default: false
}
},
data() {
return {}
},
created() {
this.children = []
},
......
src/components/firstui/fui-config/index.js 0 → 100644
/*
组件属性全局配置文件。优先级：全局配置文件props < 直接设置组件props
目前支持配置的组件：fui-button、fui-icon、fui-text、fui-input、fui-form-item
*/
const fuiConfig = {
//组件名称，小驼峰命名
//如fui-button写成fuiButton
fuiButton: {
//组件属性值
height: '96rpx',
size: 32,
radius: '16rpx'
},
fuiIcon: {
size: 64,
unit: 'rpx'
},
fuiText: {
size: 32,
unit: 'rpx'
},
fuiInput: {
labelSize: 32,
size: 32
},
fuiFormItem: {
labelSize: 32,
labelWidth: 160,
labelRight: 30,
labelAlign: 'left',
asteriskPosition: 'left'
}
}
export default fuiConfig
src/components/firstui/fui-data-tag/fui-data-tag.vue
......@@ -2,7 +2,7 @@
<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:(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'}"
......@@ -15,7 +15,7 @@
<!-- #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: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'}"
v-if="mark && item.selected">{{icon}}</text>
......@@ -119,6 +119,11 @@
type: String,
default: '#fff'
},
//默认边框颜色
defaultBorderColor:{
type: String,
default: ''
},
borderColor: {
type: String,
default: '#465CFF'
......@@ -350,7 +355,7 @@
.fui-data__tag-wrap {
/* #ifndef APP-NVUE */
width: 100%;
max-width: 100%;
display: flex;
/* #endif */
flex-direction: row;
......
src/components/firstui/fui-date-picker/fui-date-picker.vue
......@@ -2,8 +2,9 @@
<view class="fui-date__picker-wrap" @touchend="stop">
<view class="fui-date__picker-mask" @touchmove.stop.prevent="stop" :class="{'fui-dpk__mask-show':isShow}"
:style="maskStyl" ref="fui_dpkm_ani" @tap.stop="maskClick"></view>
<view class="fui-date__picker-content"
:class="{'fui-dpk__content-dark':theme==='dark','fui-dpk__content-show':isShow,'fui-date__picker-radius':radius}"
<!-- fix：此处key值可解决Nvue端动态切换背景不生效的问题 -->
<view :key="theme" class="fui-date__picker-content"
:class="{'fui-dpk__content-dark':theme==='dark','fui-dpk__content-light':theme!=='dark','fui-dpk__content-show':isShow,'fui-date__picker-radius':radius}"
:style="{zIndex:zIndex}" ref="fui_dpk_ani">
<view class="fui-date__picker-header"
:class="{'fui-dpk__header-dark':theme==='dark','fui-date__picker-radius':radius}" :style="headerStyl">
......@@ -17,7 +18,8 @@
@tap.stop="btnConfirm">确定</text>
</view>
<view class="fui-dpk__range-wrap" v-if="range">
<view class="fui-dpk__range-inner" :class="{'fui-dpk__range-dark':theme==='dark'}">
<view class="fui-dpk__range-inner"
:class="[theme==='dark'?'fui-dpk__range-dark':'fui-dpk__range-light']">
<text class="fui-dpk__range-text" :class="{'fui-dpk__range-active':isActive==1}" :style="startStyl"
@tap.stop="rangeChange($event,1)">{{startDate.result || start}}</text>
<text class="fui-dpk__range-text" :class="{'fui-dpk__range-active':isActive==2}" :style="endStyl"
......@@ -201,10 +203,12 @@
<!-- #endif -->
<!-- #ifndef MP-ALIPAY -->
<picker-view :mask-style="theme==='dark'?darkStyle:''"
<picker-view :mask-top-style="theme==='dark'?darkStyle:''"
:mask-bottom-style="theme==='dark'?darkBottomStyle:''" :mask-style="theme==='dark'?darkStyle:''"
:indicator-style="theme==='dark'?indicatorStyl:'height: 44px;border-top-width:0.5px;border-bottom-width:0.5px;'"
:indicator-class="theme==='dark'?'fui-date__picker-indicator':''" class="fui-date__picker-view"
:style="{height:height+'rpx'}" :value="vals" @change="pickerChange">
:style="{height:height+'rpx'}" :key="theme+type" :value="vals" immediate-change
@change="pickerChange">
<picker-view-column v-if="type==1 || type==2 || type==3 || type==4 || type==5">
<text :style="contentStyl" v-for="(item,index) in years" :key="index"
class="fui-date__picker-text"
......@@ -269,7 +273,7 @@
},
minDate: {
type: String,
default: '2020-01-01'
default: '2010-01-01'
},
maxDate: {
type: String,
......@@ -381,6 +385,11 @@
type: [Number, String],
default: 999
},
//点击确认按钮后是否立即关闭弹框
isClose: {
type: Boolean,
default: true
},
//自定义参数
param: {
type: [Number, String],
......@@ -483,7 +492,7 @@
if (newVal) {
this.openPicker();
} else {
this.close();
this.closePicker();
}
},
immediate: true
......@@ -508,10 +517,12 @@
// #ifndef APP-NVUE
darkStyle: 'background-image: -webkit-linear-gradient(top, rgba(35, 35, 35, .95), rgba(35, 35, 35, .6)), -webkit-linear-gradient(bottom, rgba(35, 35, 35, .95), rgba(35, 35, 35, .6));',
indicatorStyl: 'border-color: #333;height: 44px;',
darkBottomStyle: '',
// #endif
// #ifdef APP-NVUE
darkStyle: '',
indicatorStyl: 'height: 44px;border-top-width:0.5px;border-bottom-width:0.5px',
darkStyle: 'background: linear-gradient(to bottom, rgba(35, 35, 35, .95), rgba(35, 35, 35, .6));',
darkBottomStyle: 'background: linear-gradient(to top, rgba(35, 35, 35, .95), rgba(35, 35, 35, .6));',
indicatorStyl: 'border-color: #333;height: 44px;border-top-width:0.5px;border-bottom-width:0.5px',
// #endif
isEnd: true,
isShow: false,
......@@ -560,6 +571,9 @@
open() {
this.isShow = true;
},
close() {
this.isShow = false;
},
compareDate(start, end) {
let type = Number(this.type)
if (type == 8) {
......@@ -727,7 +741,8 @@
let max = 12;
if (year == this.minArr[0]) {
min = this.minArr[1]
} else if (year == this.maxArr[0]) {
}
if (year == this.maxArr[0]) {
max = this.maxArr[1]
}
max = max < min ? min : max
......@@ -740,7 +755,8 @@
let max = new Date(year, month, 0).getDate();
if (year == this.minArr[0] && month == this.minArr[1]) {
min = this.minArr[2]
} else if (year == this.maxArr[0] && month == this.maxArr[1]) {
}
if (year == this.maxArr[0] && month == this.maxArr[1]) {
max = this.maxArr[2]
}
max = !max || max < min ? min : max
......@@ -952,7 +968,9 @@
}
}
setTimeout(() => {
this.isShow = false;
if (this.isClose) {
this.isShow = false;
}
this.waitForTrigger()
}, 80)
},
......@@ -996,7 +1014,7 @@
this._animation(true);
}, 20);
},
close() {
closePicker() {
this._animation(false);
},
_transtion(ref, styles, duration, callback) {
......@@ -1087,19 +1105,12 @@
transition-property: opacity;
transition-duration: .25s;
transform: translateY(100%);
opacity: 0;
/* opacity: 0; */
/* #endif */
transform-origin: center center;
flex-direction: column;
background: #fff;
}
/* #ifndef APP-NVUE */
.fui-dpk__content-dark {
background: #222;
}
/* #endif */
.fui-dpk__content-show {
/* #ifndef APP-NVUE */
......@@ -1112,6 +1123,15 @@
/* #endif */
}
.fui-dpk__content-light {
background-color: #fff;
}
.fui-dpk__content-dark {
background-color: #222;
opacity: 1;
}
.fui-date__picker-radius {
border-top-left-radius: 24rpx;
border-top-right-radius: 24rpx;
......@@ -1184,12 +1204,15 @@
align-items: center;
justify-content: center;
width: 560rpx;
background: #EEEEEE;
border-radius: 16rpx;
overflow: hidden;
padding: 2px;
}
.fui-dpk__range-light {
background: #fff;
}
.fui-dpk__range-dark {
background: #333;
}
......@@ -1336,13 +1359,7 @@
.fui-dpk__color-dark {
/* #ifndef APP-NVUE */
color: #D1D1D1;
/* #endif */
/* #ifdef APP-NVUE */
color: #333;
/* #endif */
}
......
src/components/firstui/fui-divider/fui-divider.vue
......@@ -54,9 +54,6 @@
default: '#F1F4FA'
}
},
data() {
return {}
},
computed: {
getTop() {
return Number(this.height) / 2 + 'rpx'
......
src/components/firstui/fui-drag/fui-drag.vue
......@@ -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"
......
src/components/firstui/fui-empty/fui-empty.vue
......@@ -67,10 +67,7 @@
type: [Number, String],
default: 0
}
},
data() {
return {}
},
}
}
</script>
......
src/components/firstui/fui-form-field/fui-form-field.vue
......@@ -17,10 +17,7 @@
type: Boolean,
default: false
}
},
data() {
return {}
},
}
}
</script>
......
src/components/firstui/fui-gallery/fui-gallery.vue
......@@ -122,9 +122,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]
......
src/components/firstui/fui-grid/fui-grid.vue
......@@ -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
......
src/components/firstui/fui-input-number/fui-input-number.vue
......@@ -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 */
......
src/components/firstui/fui-label/fui-label.vue
......@@ -34,9 +34,6 @@
default: false
}
},
data() {
return {}
},
created() {
this.childrens = [];
},
......
src/components/firstui/fui-license-plate/fui-license-plate.js
......@@ -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'
......
src/components/firstui/fui-license-plate/fui-license-plate.vue
......@@ -157,9 +157,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]
......
src/components/firstui/fui-link/fui-link.vue 0 → 100644
<template>
<a v-if="isShowA" class="fui-link__text" :href="href"
:class="{'fui-link__underline':underline,'fui-link__defcolor':!color,'fui-link__active':highlight}"
:style="{color,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,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,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: '链接已复制'
},
// #ifdef APP-NVUE
color: {
type: String,
default: '#465CFF'
},
// #endif
// #ifndef APP-NVUE
color: {
type: String,
default: ''
},
// #endif
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;
}
},
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-primary, #465CFF) !important;
}
/* #endif */
.fui-link__active:active{
opacity: .5;
}
</style>
src/components/firstui/fui-list-cell/fui-list-cell.vue
......@@ -114,9 +114,6 @@
default: 0
}
},
data() {
return {}
},
methods: {
handleClick() {
this.$emit('click', {
......
src/components/firstui/fui-list/fui-list.vue
......@@ -119,10 +119,7 @@
type: [Number, String],
default: 0
}
},
data() {
return {}
},
}
}
</script>
......
src/components/firstui/fui-load-ani/fui-load-ani.vue
......@@ -62,10 +62,7 @@
type: Boolean,
default: false
}
},
data() {
return {}
},
}
}
</script>
......
src/components/firstui/fui-lottie/fui-lottie-app.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/components/firstui/fui-lottie/fui-lottie-mp.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/components/firstui/fui-lottie/fui-lottie.vue 0 → 100644
<template>
<view class="fui-lottie__wrap">
<!-- #ifdef APP-VUE || H5 -->
<view ref="lottieRef" id="lottieRef" :prop="options" :change:prop="handler.changeProp" :action="actionVal"
:change:action="handler.changeAction" :style="{width:width+'rpx',height:height+'rpx'}"></view>
<!-- #endif -->
<!-- #ifdef MP -->
<canvas :style="{width:lottieW+'px',height:lottieH+'px'}" :class="canvasId" type="2d"></canvas>
<!-- #endif -->
</view>
</template>
<!-- #ifdef APP-VUE || H5 -->
<script module="handler" lang="renderjs">
import lottie from './fui-lottie-app.js'
export default {
data() {
return {
ani: null,
prevAction: '',
isInit: false
}
},
methods: {
changeProp(vals, old) {
let appVue3 = false
// #ifdef APP-VUE
// #ifdef VUE3
appVue3 = true;
// #endif
// #endif
if (!this.isInit && !appVue3) return;
this.init(vals || old)
},
changeAction(newVal, oldVal) {
const action = newVal || oldVal
if (action === this.prevAction) return;
this.prevAction = action;
try {
this.ani && this.ani[action]()
} catch (e) {
//TODO handle the exception
}
},
init(vals) {
if (!vals || (!vals.path && !vals.animationData)) return;
this.ani && this.ani.destroy();
this.$nextTick(() => {
this.ani = lottie.loadAnimation({
// #ifndef H5
container: document.getElementById('lottieRef'),
// #endif
// #ifdef H5
container: this.$refs.lottieRef.$el,
// #endif
renderer: 'svg',
loop: vals.loop === undefined ? true : vals.loop,
autoplay: vals.autoplay === undefined ? true : vals.autoplay,
path: vals.path,
// 只能加载本地json，优先级高于path
animationData: vals.animationData
});
})
}
},
mounted() {
this.init(this.options)
setTimeout(() => {
this.isInit = true;
}, 200)
}
}
</script>
<!-- #endif -->
<script>
// #ifdef MP
import lottieMp from './fui-lottie-mp.js'
// #endif
export default {
name: "fui-lottie",
props: {
width: {
type: [Number, String],
default: 600
},
height: {
type: [Number, String],
default: 400
},
options: {
type: Object,
default () {
return {
path: '',
animationData: '',
autoplay: true,
loop: true
}
}
},
//动画操作，可取值 play、pause、stop、destroy
action: {
type: String,
default: 'play'
}
},
watch: {
// #ifdef MP
actionVal() {
this.changeMpAction()
},
options() {
if (!this.mpInitFlag) return;
this.initMp();
},
// #endif
action(val) {
this.actionVal = this.getAction(this.action)
}
},
data() {
const canvasId = `fui_lt_${Math.ceil(Math.random() * 10e5).toString(36)}`
return {
canvasId,
// #ifdef MP
lottieW: 300,
lottieH: 200,
// #endif
//可取值 play、pause、stop、destroy
actionVal: ''
};
},
// #ifdef VUE2
beforeDestroy() {
this.actionVal = 'destroy'
},
// #endif
// #ifdef VUE3
beforeUnmount() {
this.actionVal = 'destroy'
},
// #endif
// #ifdef MP
created() {
this.aniMp = null
this.mpInitFlag = false
this.lottieW = uni.upx2px(Number(this.width))
this.lottieH = uni.upx2px(Number(this.height))
},
// #endif
mounted() {
this.actionVal = this.getAction(this.action)
// #ifdef MP
this.initMp()
// #endif
},
methods: {
// #ifdef MP
changeMpAction() {
try {
this.aniMp && this.aniMp[this.actionVal]()
} catch (e) {
//TODO handle the exception
}
},
initMp() {
const options = {
...this.options
}
if (!options.path && !options.animationData) return;
this.aniMp && this.aniMp.destroy();
this.$nextTick(() => {
const query = uni.createSelectorQuery()
// #ifndef MP-ALIPAY
.in(this)
// #endif
// #ifndef MP-QQ
query.selectAll(`.${this.canvasId}`).node(res => {
const canvas = res[0].node;
const context = canvas.getContext('2d');
const dpr = uni.getSystemInfoSync().pixelRatio;
canvas.width = this.lottieW * dpr;
canvas.height = this.lottieH * dpr;
context.scale(dpr, dpr);
lottieMp.setup(canvas)
this.aniMp = lottieMp.loadAnimation({
loop: options.loop === undefined ? true : options.loop,
autoplay: options.autoplay === undefined ? true : options.autoplay,
//只支持网络地址
path: options.path,
animationData: options.animationData,
rendererSettings: {
context,
},
})
this.mpInitFlag = true
}).exec()
// #endif
});
},
// #endif
getAction(action) {
const actions = ['play', 'pause', 'stop', 'destroy']
let val = 'play'
if (~actions.indexOf(action)) {
val = action
}
return val
}
}
}
</script>
<style scoped>
/* #ifndef APP-NVUE */
.fui-lottie__wrap {
display: inline-flex;
}
/* #endif */
</style>
src/components/firstui/fui-overflow-hidden/fui-overflow-hidden.vue
......@@ -84,9 +84,6 @@
default: 0
}
},
data() {
return {}
},
computed: {
getGradientBgColor() {
// #ifdef APP-NVUE
......
src/components/firstui/fui-pagination/fui-pagination.vue
......@@ -2,21 +2,35 @@
<view class="fui-pagination__wrap">
<view class="fui-pagination__btn"
:class="{'fui-pagination__disabled':currentIndex === 1,'fui-pagination__btn-ac':currentIndex !== 1 && highlight,'fui-pagination__color':!color}"
:style="{width:width+'rpx',height:height+'rpx',borderColor:borderColor,background:background,borderRadius:(radius==-1?height:radius)+'rpx'}"
:style="{width:width+'rpx',height:height+'rpx',borderColor:borderColor,background:background,borderRadius:radius+'rpx'}"
@click="clickPrev">
<text :class="{'fui-pagination__color':!color}" :style="{color:color,fontSize:size+'rpx'}" v-if="!custom">{{prevText}}</text>
<text :class="{'fui-pagination__color':!color}" :style="{color:color,fontSize:size+'rpx'}"
v-if="!custom">{{prevText}}</text>
<slot name="prev"></slot>
</view>
<view class="fui-pagination__num" v-if="isPage">
<view class="fui-pagination__num" v-if="isPage && pageType==1">
<text :class="{'fui-pagination__active-color':!currentColor}"
:style="{color:currentColor,fontSize:pageFontSize+'rpx'}">{{currentIndex}}</text>
<text :class="{'fui-pagination__color':!pageColor}" :style="{color:pageColor,fontSize:pageFontSize+'rpx'}">/{{maxPage || 0}}</text>
<text :class="{'fui-pagination__color':!pageColor}"
:style="{color:pageColor,fontSize:pageFontSize+'rpx'}">/{{maxPage || 0}}</text>
</view>
<view class="fui-page__number" v-if="isPage && pageType==2">
<view class="fui-page__num-item" :class="{'fui-pagination__bg':!activeBgColor && currentIndex===item}"
v-for="(item,index) in pageNumber" :key="index"
:style="{background:currentIndex===item?activeBgColor:pageBgColor,borderRadius:radius+'rpx'}"
@tap.stop="handleClick(item,index)">
<text class="fui-page__num-text" :class="{'fui-pagination__color':!color && currentIndex!==item}"
:style="{color:currentIndex===item?activeColor:pageColor}">{{item}}</text>
</view>
</view>
<view class="fui-pagination__btn"
:class="{'fui-pagination__disabled':currentIndex === maxPage,'fui-pagination__btn-ac':currentIndex !== maxPage && highlight,'fui-pagination__color':!color}"
:style="{width:width+'rpx',height:height+'rpx',borderColor:borderColor,background:background,borderRadius:(radius==-1?height:radius)+'rpx'}"
:style="{width:width+'rpx',height:height+'rpx',borderColor:borderColor,background:background,borderRadius:radius+'rpx'}"
@click="clickNext">
<text :class="{'fui-pagination__color':!color}" :style="{color:color,fontSize:size+'rpx'}" v-if="!custom">{{nextText}}</text>
<text :class="{'fui-pagination__color':!color }" :style="{color:color,fontSize:size+'rpx'}"
v-if="!custom">{{nextText}}</text>
<slot name="next"></slot>
</view>
</view>
......@@ -37,11 +51,11 @@
},
width: {
type: [Number, String],
default: 160
default: 128
},
height: {
type: [Number, String],
default: 64
default: 60
},
borderColor: {
type: String,
......@@ -66,7 +80,7 @@
},
radius: {
type: [Number, String],
default: -1
default: 12
},
//是否有点击效果
highlight: {
......@@ -113,6 +127,28 @@
type: Boolean,
default: true
},
//页码展示类型 1-简约型 2-展开型
pageType: {
type: [Number, String],
default: 1
},
pageBgColor: {
type: String,
default: 'rgba(0,0,0,0)'
},
activeBgColor: {
type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: ''
// #endif
},
activeColor: {
type: String,
default: '#fff'
},
//数据总量
total: {
type: [Number, String],
......@@ -138,17 +174,76 @@
watch: {
current(val) {
this.currentIndex = +val
},
total(val) {
if (this.pageType == 2) {
this.getPageNumber()
}
},
pageSize(val) {
if (this.pageType == 2) {
this.getPageNumber()
}
}
},
created() {
this.currentIndex = +this.current
if (this.pageType == 2) {
this.getPageNumber()
}
},
data() {
return {
currentIndex: 1
currentIndex: 1,
pageNumber: [],
pagerCount: 0
};
},
methods: {
toArray(start, end) {
return Array.from(new Array(end + 1).keys()).slice(start);
},
getPageNumber() {
const num = this.currentIndex
const total = this.total
const pageSize = this.pageSize
// TODO 最大展示页数，移动端宽度有限，暂时固定
let pagerCount = this.pagerCount
if (!pagerCount) {
pagerCount = 6
const width = Number(this.width)
if (!isNaN(width) && width <= 60) {
pagerCount = 8;
}
this.pagerCount = pagerCount;
}
let showPagerArr = this.toArray(1, pagerCount)
let pagerNum = Math.ceil(total / pageSize)
if (pagerNum <= 1) {
showPagerArr = [1]
} else if (pagerNum <= pagerCount) {
showPagerArr = this.toArray(1, pagerNum)
} else {
showPagerArr[pagerCount - 1] = pagerNum;
if (num < pagerCount - 1) {
showPagerArr[pagerCount - 2] = '...'
} else if (num >= pagerNum - (pagerCount - 3)) {
showPagerArr[1] = '...';
showPagerArr.forEach((item, index) => {
if (index > 1) {
showPagerArr[index] = pagerNum - (pagerCount - 3) + (index - 2)
}
})
} else {
showPagerArr[1] = '...';
for (let i = 0; i < pagerCount - 3; i++) {
showPagerArr[i + 2] = num + i
}
showPagerArr[pagerCount - 2] = '...'
}
}
this.pageNumber = showPagerArr
},
clickPrev() {
if (Number(this.currentIndex) === 1) return;
this.currentIndex -= 1
......@@ -159,7 +254,23 @@
this.currentIndex += 1
this.change('next')
},
handleClick(item, index) {
let pageNo = Number(item)
const idx = this.pagerCount === 6 ? 4 : 6;
if (isNaN(pageNo)) {
if (index === 1) {
pageNo = this.pageNumber[index + 1] - (this.pagerCount - 4)
} else if (index === idx) {
pageNo = this.pageNumber[index - 1] + 1
}
} else {
if (Number(this.currentIndex) === pageNo) return;
}
this.currentIndex = pageNo;
this.change('pageNumber')
},
change(e) {
this.getPageNumber()
this.$emit('change', {
type: e,
current: this.currentIndex
......@@ -198,7 +309,7 @@
/* #endif */
/* #ifndef APP-NVUE */
border-width: 1rpx;
border-width: 1px;
/* #endif */
border-style: solid;
flex-shrink: 0;
......@@ -225,7 +336,12 @@
.fui-pagination__active-color {
color: var(--fui-color-primary, #465CFF) !important;
}
.fui-pagination__color{
.fui-pagination__bg {
background: var(--fui-color-primary, #465CFF) !important;
}
.fui-pagination__color {
color: var(--fui-color-section, #333) !important;
}
......@@ -237,4 +353,37 @@
cursor: not-allowed;
/* #endif */
}
.fui-page__number {
/* #ifndef APP-NVUE */
display: flex;
box-sizing: border-box;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.fui-page__num-item {
/* #ifndef APP-NVUE */
min-width: 60rpx;
display: flex;
transform: translateZ(0);
/* #endif */
height: 60rpx;
align-items: center;
justify-content: center;
margin: 0 4rpx;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.fui-page__num-item:active {
opacity: .5;
}
.fui-page__num-text {
font-size: 24rpx;
}
</style>
src/components/firstui/fui-picker/fui-picker.vue
......@@ -2,7 +2,7 @@
<view class="fui-picker__wrap" @touchend="stop">
<view class="fui-picker__mask" @touchmove.stop.prevent="stop" :class="{'fui-picker__mask-show':isShow}"
:style="maskStyl" ref="fui_pkm_ani" @tap.stop="maskClick"></view>
<view class="fui-picker__content"
<view :key="theme" class="fui-picker__content"
:class="{'fui-picker__content-dark':theme==='dark','fui-picker__content-show':isShow,'fui-picker__radius':radius}"
:style="{zIndex:zIndex}" ref="fui_pk_ani">
<view class="fui-picker__header"
......@@ -92,10 +92,12 @@
<!-- #endif -->
<!-- #ifndef MP-ALIPAY -->
<picker-view :mask-style="theme==='dark'?darkStyle:''"
<picker-view :mask-top-style="theme==='dark'?darkStyle:''"
:mask-bottom-style="theme==='dark'?darkBottomStyle:''" :mask-style="theme==='dark'?darkStyle:''"
:indicator-style="theme==='dark'?indicatorStyl:'height: 44px;border-top-width:0.5px;border-bottom-width:0.5px;'"
:indicator-class="theme==='dark'?'fui-picker__indicator':''" class="fui-picker__view"
:style="{height:height+'rpx'}" :value="vals" @change="pickerChange">
:style="{height:height+'rpx'}" :key="theme+layer" :value="vals" immediate-change
@change="pickerChange">
<picker-view-column>
<text :style="contentStyl" class="fui-picker__text"
:class="{'fui-picker__color-dark':theme==='dark'}" v-for="(item,index) in firstArr"
......@@ -106,7 +108,7 @@
:class="{'fui-picker__color-dark':theme==='dark'}" v-for="(item,index) in secondArr"
:key="index">{{item}}</text>
</picker-view-column>
<picker-view-column v-if="layer==3 || layer==4">
<picker-view-column v-if="layer==3 || layer==4">
<text :style="contentStyl" class="fui-picker__text"
:class="{'fui-picker__color-dark':theme==='dark'}" v-for="(item,index) in thirdArr"
:key="index">{{item}}</text>
......@@ -228,6 +230,10 @@
type: [Number, String],
default: 1001
},
isClose: {
type: Boolean,
default: true
},
//自定义参数
param: {
type: [Number, String],
......@@ -294,19 +300,20 @@
}
},
watch: {
layer(val) {
this.reset();
},
value(val) {
if (val) {
this.setDefaultOptions()
}
},
options(val) {
this.reset();
setTimeout(() => {
this.initialize()
}, 50)
},
fields(val) {
this.reset();
setTimeout(() => {
this.initialize()
}, 50)
......@@ -317,7 +324,7 @@
if (newVal) {
this.openPicker();
} else {
this.close();
this.closePicker();
}
},
immediate: true
......@@ -333,14 +340,16 @@
secondArr: [],
thirdArr: [],
fourthArr: [],
vals: [0],
vals: [],
// #ifndef APP-NVUE
darkStyle: 'background-image: -webkit-linear-gradient(top, rgba(35, 35, 35, .95), rgba(35, 35, 35, .6)), -webkit-linear-gradient(bottom, rgba(35, 35, 35, .95), rgba(35, 35, 35, .6));',
indicatorStyl: 'border-color: #333;height: 44px;',
darkBottomStyle: '',
// #endif
// #ifdef APP-NVUE
darkStyle: '',
indicatorStyl: 'height: 44px;border-top-width:0.5px;border-bottom-width:0.5px',
darkStyle: 'background: linear-gradient(to bottom, rgba(35, 35, 35, .95), rgba(35, 35, 35, .6));',
darkBottomStyle: 'background: linear-gradient(to top, rgba(35, 35, 35, .95), rgba(35, 35, 35, .6));',
indicatorStyl: 'border-color: #333;height: 44px;border-top-width:0.5px;border-bottom-width:0.5px',
// #endif
tKey: 'text',
vKey: 'value',
......@@ -505,10 +514,14 @@
open() {
this.isShow = true;
},
//手动关闭弹框
close() {
this.isShow = false;
},
setDefaultOptions() {
let values = this.value;
if (this.layer == 1 && !Array.isArray(values)) {
values = [values]
values = values ? [values] : []
}
let vals = [];
let txtArr = this.firstArr;
......@@ -536,13 +549,19 @@
vals.push(this.fourthArr.indexOf(values[i]))
}
}
this.vals = []
this.$nextTick(() => {
setTimeout(() => {
this.vals = vals;
}, 20)
}, 50)
})
} else {
this.reset()
this.vals = []
this.$nextTick(() => {
setTimeout(() => {
this.reset()
}, 50)
})
}
},
setOneLayers(value) {
......@@ -674,12 +693,13 @@
e.stopPropagation();
// #endif
setTimeout(() => {
this.isShow = false;
if (this.isClose) {
this.isShow = false;
}
this.waitForTrigger()
}, 50)
},
pickerChange(e) {
if (!this.isShow) return;
let value = e.detail.value;
if (this.linkage) {
if (this.layer == 1) {
......@@ -705,7 +725,7 @@
this._animation(true);
}, 20);
},
close() {
closePicker() {
this._animation(false);
},
_transtion(ref, styles, duration, callback) {
......@@ -796,20 +816,17 @@
transition-property: opacity;
transition-duration: .25s;
transform: translateY(100%);
opacity: 0;
/* opacity: 0; */
/* #endif */
transform-origin: center center;
flex-direction: column;
background: #fff;
}
/* #ifndef APP-NVUE */
.fui-picker__content-dark {
background: #222;
}
/* #endif */
.fui-picker__content-show {
/* #ifndef APP-NVUE */
transform: translate3d(0, 0, 0);
......@@ -978,13 +995,7 @@
.fui-picker__color-dark {
/* #ifndef APP-NVUE */
color: #D1D1D1;
/* #endif */
/* #ifdef APP-NVUE */
color: #333;
/* #endif */
}
......
src/components/firstui/fui-poster/fui-poster.vue
<template>
<!-- #ifndef MP-QQ -->
<canvas :style="{ width: w + 'px', height: h + 'px' }" :canvas-id="canvasId" :id="canvasId"
class="fui-poster__canvas"></canvas>
class="fui-poster__canvas" v-if="canvasId"></canvas>
<!-- #endif -->
<!-- #ifdef MP-QQ -->
......@@ -69,10 +69,12 @@
this.h = this._toPx(this.height)
},
mounted() {
poster.create(Number(this.pixelRatio), this.canvasId, this)
setTimeout(() => {
this.$emit('ready')
}, 50)
this.$nextTick(()=>{
setTimeout(() => {
poster.create(Number(this.pixelRatio), this.canvasId, this)
this.$emit('ready')
}, 50)
})
},
methods: {
_toPx(rpx) {
......
src/components/firstui/fui-poster/index.js
......@@ -239,6 +239,7 @@ const poster = {
context.save();
context.setGlobalAlpha(opacity);
if (gradientColor) {
// #ifndef MP-KUAISHOU
let grd = null;
if (gradientType == 1) {
//从上到下
......@@ -251,6 +252,11 @@ const poster = {
grd.addColorStop(1, gradientColor)
// Fill with gradient
context.setFillStyle(grd);
// #endif
// #ifdef MP-KUAISHOU
context.setFillStyle(backgroundColor);
// #endif
} else {
context.setFillStyle(backgroundColor);
}
......
src/components/firstui/fui-puzzle-verify/fui-puzzle-verify.vue
......@@ -397,9 +397,20 @@
background: var(--fui-color-primary, #465CFF) !important;
}
.fui-sc__reset-ani {
/* #endif */
/* #ifndef APP-NVUE */
.fui-sc__reset-ani {
transition: transform 0.2s;
}
/* #endif */
/* fix：Vue3下动画问题，app端直接移除class效果未消失，导致卡顿 */
/* #ifdef VUE3 */
.fui-pv__un-ani {
transition: transform 0s;
}
/* #endif */
</style>
src/components/firstui/fui-puzzle-verify/index.wxs
......@@ -7,7 +7,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;
......@@ -36,11 +36,15 @@ function styleChange(left, ins) {
if (!slider || !slot) return;
if (left == 0) {
slider.removeClass('fui-pv__un-ani')
slot.removeClass('fui-pv__un-ani')
slider.addClass('fui-sc__reset-ani')
slot.addClass('fui-sc__reset-ani')
} else {
slider.removeClass('fui-sc__reset-ani')
slot.removeClass('fui-sc__reset-ani')
slider.addClass('fui-pv__un-ani')
slot.addClass('fui-pv__un-ani')
}
slider.setStyle({
transform: 'translate3d(' + left + 'px,0,0)'
......
src/components/firstui/fui-qrcode/fui-qr/lib/QRCode.js
......@@ -36,7 +36,7 @@ proto.getModuleCount = function() {
proto.make = function() {
// Calculate automatically typeNumber if provided is < 1
if (this.typeNumber < 1 ){
var typeNumber = 1;
var typeNumber = 1;// 功能需要优化
for (typeNumber = 1; typeNumber < 40; typeNumber++) {
var rsBlocks = RSBlock.getRSBlocks(typeNumber, this.errorCorrectLevel);
......@@ -83,7 +83,7 @@ proto.makeImpl = function(test, maskPattern) {
if (this.typeNumber >= 7) {
this.setupTypeNumber(test);
}
}// 功能需要优化
if (this.dataCache == null) {
this.dataCache = QRCode.createData(this.typeNumber, this.errorCorrectLevel, this.dataList);
......@@ -231,7 +231,7 @@ proto.setupTypeInfo = function(test, maskPattern) {
var data = (this.errorCorrectLevel << 3) | maskPattern;
var bits = util.getBCHTypeInfo(data);
// vertical
// vertical// 新特性待增加
for (var i = 0; i < 15; i++) {
var mod = (!test && ( (bits >> i) & 1) == 1);
......@@ -365,7 +365,7 @@ QRCode.createData = function(typeNumber, errorCorrectLevel, dataList) {
break;
}
buffer.put(QRCode.PAD1, 8);
}
}// 功能需要优化
return QRCode.createBytes(buffer, rsBlocks);
};
......@@ -414,7 +414,7 @@ QRCode.createBytes = function(buffer, rsBlocks) {
var data = new Array(totalCodeCount);
var index = 0;
// 功能需要优化
for (var i = 0; i < maxDcCount; i++) {
for (var r = 0; r < rsBlocks.length; r++) {
if (i < dcdata[r].length) {
......
src/components/firstui/fui-qrcode/fui-qrcode.vue
......@@ -7,7 +7,7 @@
<!-- #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 -->
......@@ -113,12 +113,14 @@
this.ctx = null;
},
mounted() {
setTimeout(() => {
this.draw()
this.$emit('ready', {
canvasId: this.canvasId
})
}, 50)
this.$nextTick(() => {
setTimeout(() => {
this.draw()
this.$emit('ready', {
canvasId: this.canvasId
})
}, 50)
})
},
// #ifndef VUE3
beforeDestroy() {
......
src/components/firstui/fui-radio-group/fui-radio-group.vue
......@@ -5,7 +5,7 @@
</radio-group>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ -->
<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU || MP-JD || MP-360 || MP-LARK -->
<fui-form-field :name="name" :value="val">
<slot></slot>
</fui-form-field>
......
src/components/firstui/fui-rotate-verify/fui-rotate-verify.vue
......@@ -343,11 +343,24 @@
/* #endif */
}
/* #endif */
/* #ifndef APP-NVUE */
.fui-rv__rest-ani {
transition: transform 0.2s;
}
/* #endif */
/* fix：vue3下动画问题，app端直接移除class效果未消失，导致卡顿 */
/* #ifdef VUE3 */
.fui-rv__un-ani {
transition: transform 0s;
}
/* #endif */
.fui-rv__result {
position: absolute;
z-index: 2;
......
src/components/firstui/fui-rotate-verify/index.wxs
......@@ -6,7 +6,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;
......@@ -40,11 +40,15 @@ function styleChange(left, deg, ins) {
var image = ins.selectComponent('.fui-rv__image')
if (!image || !block) return;
if (left == 0 && deg == 0) {
block.removeClass('fui-rv__un-ani')
image.removeClass('fui-rv__un-ani')
block.addClass('fui-rv__rest-ani')
image.addClass('fui-rv__rest-ani')
} else {
block.removeClass('fui-rv__rest-ani')
image.removeClass('fui-rv__rest-ani')
block.addClass('fui-rv__un-ani')
image.addClass('fui-rv__un-ani')
}
block.setStyle({
transform: 'translate3d(' + left + 'px,0,0)'
......
src/components/firstui/fui-safe-area/fui-safe-area.vue
......@@ -30,8 +30,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()
......
src/components/firstui/fui-search-bar/fui-search-bar.vue
......@@ -9,7 +9,7 @@
<view class="fui-sbi__circle"></view>
<view class="fui-sbi__line"></view>
</view>
<input class="fui-search__bar-input" :class="{'fui-sb__input-color':!color}"
<input ref="searchBarRef" class="fui-search__bar-input" :class="{'fui-sb__input-color':!color}"
:style="{color:color,height: height+'rpx'}" placeholder-class="fui-search__bar-pl"
:placeholder="placeholder" :value="val" :focus="isFocus" :disabled="disabled" confirm-type="search"
@blur="inputBlur" @focus="inputFocus" @input="inputChange" @confirm="search" />
......@@ -168,6 +168,18 @@
this.isFocus = val;
})
},
// #ifdef APP-NVUE
isFocus(val) {
if (!this.$refs.searchBarRef) return;
this.$nextTick(()=>{
setTimeout(() => {
if (val) {
this.$refs.searchBarRef.focus()
}
}, 50)
})
},
// #endif
value(val) {
this.val = val;
}
......@@ -177,6 +189,7 @@
isSearch: false,
isFocus: false,
val: ''
};
},
methods: {
......@@ -213,7 +226,6 @@
}
this.$emit('click', {});
},
hideInput() {
this.isSearch = false;
this.isFocus = false;
......@@ -230,6 +242,12 @@
value: this.val
}
});
},
reset() {
this.isSearch = false;
this.isFocus = false;
this.val = '';
uni.hideKeyboard()
}
}
};
......@@ -388,13 +406,7 @@
justify-content: center;
flex-direction: column;
transform: rotate(-45deg);
/* #ifdef APP-NVUE */
transform-origin: 8rpx 8rpx;
/* #endif */
/* #ifndef APP-NVUE */
transform-origin: 56% center;
/* #endif */
}
.fui-sbi__circle {
......
src/components/firstui/fui-select/fui-select.vue
......@@ -18,11 +18,13 @@
</slot>
<scroll-view scroll-y class="fui-select__scroll" :show-scrollbar="false" :style="{height:height+'rpx'}">
<view class="fui-select__list">
<fui-list-cell v-for="(model,index) in itemList" :key="index" :highlight="highlight"
:padding="padding" :bottomBorder="splitLine && itemList.length-1!==index"
:borderColor="lineColor" :background="background" :bottomLeft="bottomLeft"
:arrow="type==='list'" :arrowColor="arrowColor" @click="itemClick(index)">
<view class="fui-select__item" :class="{'fui-select__reverse':isReverse && type==='select'}">
<fui-list-cell v-for="(model,index) in itemList" :key="index"
:highlight="highlight && !model.disabled" :padding="padding"
:bottomBorder="splitLine && itemList.length-1!==index" :borderColor="lineColor"
:background="background" :bottomLeft="bottomLeft" :arrow="type==='list'"
:arrowColor="arrowColor" @click="itemClick(index)">
<view class="fui-select__item"
:class="{'fui-select__reverse':isReverse && type==='select','fui-sitem__disable':model.disabled}">
<view class="fui-select__checkbox"
:class="{'fui-select__is-checkmark ':isCheckMark,'fui-select__checkbox-color':(!checkboxColor || checkboxColor=='true') && model.checked && !isCheckMark}"
:style="{background:model.checked && !isCheckMark ?checkboxColor:'transparent',borderColor:model.checked && !isCheckMark ?checkboxColor:borderColor}"
......@@ -290,8 +292,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()
......@@ -356,7 +358,8 @@
vals = vals.map(item => {
return {
text: item,
checked: false
checked: false,
disabled: false
}
})
} else {
......@@ -373,6 +376,7 @@
itemClick(index) {
let vals = [...this.itemList]
let item = vals[index]
if (item && item.disabled) return;
if (this.type === 'select') {
if (this.multiple) {
item.checked = !item.checked;
......@@ -519,6 +523,13 @@
/* #endif */
}
.fui-sitem__disable {
opacity: .5;
/* #ifdef H5 */
cursor: not-allowed;
/* #endif */
}
.fui-select__flex {
/* #ifndef APP-NVUE */
width: 100%;
......
src/components/firstui/fui-share-sheet/fui-share-sheet.vue
......@@ -253,9 +253,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]
......
src/components/firstui/fui-single-input/fui-single-input.vue
......@@ -19,8 +19,8 @@
</view>
<!-- #ifdef APP-NVUE -->
<input ref="inputRef" :value="val" :password="password" :type="type" class="fui-sinput__hidden"
:class="{'fui-sinput__alizero':aliZero}" @input="onInput" @blur="onBlur" :maxlength="length"
v-if="native" :disabled="disabled" @confirm="onConfirm" @focus="onTap" />
:class="{'fui-sinput__alizero':aliZero}" @input="onInput" @blur="onBlur" :maxlength="length" v-if="native"
:disabled="disabled" @confirm="onConfirm" @focus="onTap" />
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<input ref="inputRef" :value="val" :password="password" :type="type" class="fui-sinput__hidden"
......@@ -202,10 +202,11 @@
this._animation(ref)
}
},
focus(val){
if(val){
focus(val) {
if (!this.$refs.inputRef) return;
if (val) {
this.$refs.inputRef.focus()
}else{
} else {
this.$refs.inputRef.blur()
}
},
......@@ -217,7 +218,7 @@
created() {
this.inputArr = this.getArr(Number(this.length))
let val = this.value.replace(/\s+/g, "")
this.getVals(val,true)
this.getVals(val, true)
},
mounted() {
// #ifndef MP-TOUTIAO
......
src/components/firstui/fui-slide-verify/fui-slide-verify.vue
......@@ -365,4 +365,12 @@
}
/* #endif */
/* fix：vue3下动画问题，app端直接移除class效果未消失，导致卡顿 */
/* #ifdef VUE3 */
.fui-sv__un-ani {
transition: transform 0s;
}
/* #endif */
</style>
src/components/firstui/fui-slide-verify/index.wxs
......@@ -8,7 +8,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;
......@@ -45,11 +45,16 @@ function styleChange(left, ins) {
var foreground = ins.selectComponent('.fui-sv__foreground')
if (!slider || !foreground) return;
if (left == 0) {
slider.removeClass('fui-sv__un-ani')
foreground.removeClass('fui-sv__un-ani')
slider.addClass('fui-sv__reset-ani')
foreground.addClass('fui-sv__reset-ani')
} else {
slider.removeClass('fui-sv__reset-ani')
foreground.removeClass('fui-sv__reset-ani')
slider.addClass('fui-sv__un-ani')
foreground.addClass('fui-sv__un-ani')
}
slider.setStyle({
transform: 'translate3d(' + left + 'px,0,0)'
......
src/components/firstui/fui-slider-captcha/fui-slider-captcha.vue
......@@ -5,7 +5,7 @@
<!-- #ifndef APP-NVUE -->
<!--如果隐藏导致不工作，则使用v-if控制-->
<canvas class="fui-sc__canvas" :canvas-id="canvasId" :id="canvasId"
:style="{ width: w + 'px', height:h + 'px' }"></canvas>
:style="{ width: w + 'px', height:h + 'px' }" v-if="canvasId"></canvas>
<!-- #endif -->
<view class="fui-slider__captcha" :style="{background:background}" @tap.stop="stop">
<text class="fui-sc__title"
......@@ -249,13 +249,17 @@
})
},
mounted() {
if (this.type == 1) {
this.src && this.handleImage()
} else {
if (this.location.x !== undefined && this.src) {
this.handleImage()
}
}
this.$nextTick(() => {
setTimeout(() => {
if (this.type == 1) {
this.src && this.handleImage()
} else {
if (this.location.x !== undefined && this.src) {
this.handleImage()
}
}
}, 50);
})
},
methods: {
getPx(value) {
......@@ -696,9 +700,20 @@
background: var(--fui-color-primary, #465CFF) !important;
}
.fui-sc__reset-ani {
/* #endif */
/* #ifndef APP-NVUE */
.fui-sc__reset-ani {
transition: transform 0.2s;
}
/* #endif */
/* fix：vue3下动画问题，app端直接移除class效果未消失，导致卡顿 */
/* #ifdef VUE3 */
.fui-sc__un-ani {
transition: transform 0s;
}
/* #endif */
</style>
src/components/firstui/fui-slider-captcha/index.wxs
......@@ -10,7 +10,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;
......@@ -39,11 +39,15 @@ function styleChange(left, ins) {
if (!slider || !slot) return;
if (left == 0) {
slider.removeClass('fui-sc__un-ani')
slot.removeClass('fui-sc__un-ani')
slider.addClass('fui-sc__reset-ani')
slot.addClass('fui-sc__reset-ani')
} else {
slider.removeClass('fui-sc__reset-ani')
slot.removeClass('fui-sc__reset-ani')
slider.addClass('fui-sc__un-ani')
slot.addClass('fui-sc__un-ani')
}
slider.setStyle({
transform: 'translate3d(' + left + 'px,0,0)'
......
src/components/firstui/fui-slider/index.wxs
......@@ -16,7 +16,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;
......
src/components/firstui/fui-swipe-action/bindingx.js
......@@ -60,7 +60,7 @@ export default {
if (this.stop) return
this.stop = true
if (this.autoClose) {
this.group.closeAuto(this)
this.group && this.group.closeAuto(this)
}
const rightWidth = this.button.right.width || 0
......
src/components/firstui/fui-swipe-action/fui-swipe-action.vue
......@@ -113,9 +113,6 @@
default: 0
}
},
data() {
return {}
},
// #ifndef VUE3
beforeDestroy() {
if (this.__beforeUnmount) return
......
src/components/firstui/fui-swipe-action/index.wxs
......@@ -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;
......
src/components/firstui/fui-swipe-action/mpjs.js
......@@ -46,7 +46,7 @@ export default {
},
closeSwipe(e) {
if (!this.autoClose) return
this.group.closeAuto(this)
this.group && this.group.closeAuto(this)
},
//解决 ios 13 点击区域错位的问题
appTouchStart(e) {
......
src/components/firstui/fui-swipe-action/mpwxs.js
......@@ -36,7 +36,7 @@ export default {
methods: {
closeSwipe(e) {
if (!this.autoClose) return
this.group.closeAuto(this)
this.group && this.group.closeAuto(this)
},
change(e) {
this.$emit('change', {
......
src/components/firstui/fui-tabbar/fui-tabbar.vue
......@@ -167,9 +167,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]
......
src/components/firstui/fui-text/fui-text.vue
......@@ -6,8 +6,8 @@
<slot></slot>
<text class="fui-text__content"
:style="{color:getColor,fontSize:getSize,lineHeight:lineHeight?getSize:'auto',textAlign:align,textDecoration:decoration,fontWeight:fontWeight}"
:class="[color?'':'fui-text__'+type]" :selectable="selectable" :userSelect="userSelect"
:decode="decode">{{getText(text, textType, format)}}</text>
:class="[color?'':'fui-text__'+type,unShrink?'fui-text__unshrink':'']" :selectable="selectable"
:userSelect="userSelect" :decode="decode">{{getText(text, textType, format)}}</text>
<slot name="right"></slot>
</view>
</template>
......@@ -105,14 +105,15 @@
type: Boolean,
default: false
},
unShrink: {
type: Boolean,
default: false
},
param: {
type: [Number, String],
default: ''
}
},
data() {
return {}
},
computed: {
getSize() {
const size = (uni.$fui && uni.$fui.fuiText && uni.$fui.fuiText.size) || 32
......@@ -215,6 +216,10 @@
display: flex;
}
.fui-text__unshrink {
flex-shrink: 0;
}
/* #endif */
......
src/components/firstui/fui-textarea/fui-textarea.vue
......@@ -571,6 +571,9 @@
}
.fui-textarea__counter {
/* #ifndef APP-NVUE */
width: 100%;
/* #endif */
padding-top: 8rpx;
text-align: right;
/* #ifdef APP-NVUE */
......
src/components/firstui/fui-timeaxis/fui-timeaxis.vue
......@@ -37,9 +37,6 @@
// #endif
}
},
data() {
return {}
},
provide() {
return {
timeaxis: this
......
src/components/firstui/fui-upload-video/fui-upload-video.vue
......@@ -23,10 +23,12 @@
v-if="progress[index]<100 && progress[index]>0"></progress>
</view>
</view>
<view class="fui-uploadv__item" :style="{width:width+'rpx',height:height+'rpx',background:background}"
<view class="fui-uploadv__item"
:class="[borderColor && borderColor!==true?'fui-upload__border':'fui-upload__noborder']"
:style="{width:width+'rpx',height:height+'rpx',background:background,borderRadius:radius+'rpx',borderColor:borderColor,borderStyle:borderSytle}"
v-if="showAdd" @tap.stop="chooseVideo">
<slot>
<fui-icon name="plus" :size="88" :color="addColor"></fui-icon>
<fui-icon name="plus" :size="addSize" :color="addColor"></fui-icon>
</slot>
</view>
</view>
......@@ -69,10 +71,27 @@
type: String,
default: '#333'
},
addSize: {
type: [Number, String],
default: 88
},
background: {
type: String,
default: '#eee'
},
radius: {
type: [Number, String],
default: 0
},
borderColor: {
type: String,
default: ''
},
//solid、dashed、dotted
borderSytle: {
type: String,
default: 'solid'
},
isView: {
type: Boolean,
default: false
......@@ -422,9 +441,20 @@
cursor: pointer;
/* #endif */
position: relative;
/* #ifndef APP-NVUE */
box-sizing: border-box;
/* #endif */
}
.fui-upload__noborder {
border-width: 0;
}
.fui-upload__border {
border-width: 1px;
}
.fui-upload__video{
.fui-upload__video {
width: 640rpx;
height: 320rpx;
}
......
src/components/firstui/fui-upload/fui-upload.vue
<template>
<view class="fui-upload__wrap">
<view class="fui-upload__item" :style="{width:width+'rpx',height:height+'rpx'}" v-for="(item,index) in urls"
:key="index">
<image class="fui-upload__img" :style="{width:width+'rpx',height:height+'rpx'}" :src="item"
mode="aspectFill" @tap.stop="previewImage(index)"></image>
<view class="fui-upload__item" :style="{width:width+'rpx',height:height+'rpx',borderRadius:radius+'rpx'}"
v-for="(item,index) in urls" :key="index">
<image class="fui-upload__img" :style="{width:width+'rpx',height:height+'rpx',borderRadius:radius+'rpx'}"
:src="item" mode="aspectFill" @tap.stop="previewImage(index)"></image>
<view class="fui-upload__mask" v-if="status[index]!=='success' && status[index]!=='preupload' ">
<fui-icon name="warning-fill" color="#fff" :size="48" v-if="status[index]==='error'"></fui-icon>
<text class="fui-reupload__btn" @tap.stop="reUpload(index)" v-if="status[index]==='error'">重新上传</text>
......@@ -19,10 +19,12 @@
<fui-icon name="close" color="#fff" :size="32"></fui-icon>
</view>
</view>
<view class="fui-upload__item" :style="{width:width+'rpx',height:height+'rpx',background:background}"
<view class="fui-upload__item"
:class="[borderColor && borderColor!==true?'fui-upload__border':'fui-upload__noborder']"
:style="{width:width+'rpx',height:height+'rpx',background:background,borderRadius:radius+'rpx',borderColor:borderColor,borderStyle:borderSytle}"
v-if="showAdd" @tap.stop="chooseImage">
<slot>
<fui-icon name="plus" :size="88" :color="addColor"></fui-icon>
<fui-icon name="plus" :size="addSize" :color="addColor"></fui-icon>
</slot>
</view>
</view>
......@@ -64,10 +66,27 @@
type: String,
default: '#333'
},
addSize: {
type: [Number, String],
default: 88
},
background: {
type: String,
default: '#eee'
},
radius: {
type: [Number, String],
default: 0
},
borderColor: {
type: String,
default: ''
},
//solid、dashed、dotted
borderSytle: {
type: String,
default: 'solid'
},
isDel: {
type: Boolean,
default: true
......@@ -412,6 +431,18 @@
cursor: pointer;
/* #endif */
position: relative;
/* #ifndef APP-NVUE */
box-sizing: border-box;
/* #endif */
}
.fui-upload__noborder {
border-width: 0;
}
.fui-upload__border {
border-width: 1px;
}
.fui-upload__del {
......
src/components/firstui/fui-vtabs-content/fui-vtabs-content.vue
......@@ -17,9 +17,6 @@
default: 0
}
},
data() {
return {}
},
mounted() {
if (this.vtabs && this.vtabs.linkage) {
this.vtabs.children.push(this)
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论