Skip to content

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

feat: Upgrade firstui v1.9.8

上级 d0175e1f
正在显示 包含 2355 行增加 和 633 行删除
src/components/firstui/fui-alert/fui-alert.vue
......@@ -124,11 +124,12 @@
},
methods: {
getColor(type) {
const color = "#465CFF"
const app = uni && uni.$fui && uni.$fui.color
const color = (app && app.primary) || "#465CFF"
const colors = {
'success': '#09BE4F',
'warn': '#FFB703',
'clear': '#FF2B2B'
'success': (app && app.success) || '#09BE4F',
'warn': (app && app.warning) || '#FFB703',
'clear': (app && app.danger) || '#FF2B2B'
}
return colors[type] ? colors[type] : color;
},
......
src/components/firstui/fui-badge/fui-badge.vue
<template>
<text
:class="[dot?'fui-badge__dot':'fui-badge__wrap',background?'':('fui-badge__bg-'+type),absolute?'fui-badge__absolute':'',scaleRatio!=1 && isNvue?'fui-badge__trans-origin':'',!background && type==='white'?'fui-badge__text-color':'']"
:style="{top:absolute?top:'auto',right:absolute?right:'auto',zoom:scaleRatio,transform:isNvue?`scale(${scaleRatio})`:'scale(1)',marginTop:marginTop+'rpx',marginLeft:marginLeft+'rpx',marginRight:marginRight+'rpx',width:width,color:color,background:background}"
:style="{top:absolute?top:'auto',right:absolute?right:'auto',zoom:scaleRatio,transform:isNvue?`scale(${scaleRatio})`:'scale(1)',marginTop:marginTop+'rpx',marginLeft:marginLeft+'rpx',marginRight:marginRight+'rpx',width:width,color:color,background:getBgColor}"
@tap="handleClick" v-if="showValue || dot">{{dot?'':showValue}}</text>
</template>
......@@ -83,6 +83,27 @@
showValue: ''
};
},
computed: {
getBgColor() {
let color = this.background
// #ifdef APP-NVUE
if (!color && this.type) {
//primary，success，warning，danger，purple，white
const app = uni && uni.$fui && uni.$fui.color
const colors = {
primary: (app && app.primary) || '#465CFF',
success: (app && app.success) || '#09BE4F',
warning: (app && app.warning) || '#FFB703',
danger: (app && app.danger) || '#FF2B2B',
purple: (app && app.purple) || '#6831FF',
white: '#FFFFFF'
}
color = colors[this.type] || colors.primary
}
// #endif
return color
}
},
watch: {
value(val) {
this.getWidth()
......@@ -180,30 +201,6 @@
/* #endif */
/* #ifdef APP-NVUE */
.fui-badge__bg-primary {
background-color: #465CFF !important;
}
.fui-badge__bg-success {
background-color: #09BE4F !important;
}
.fui-badge__bg-warning {
background-color: #FFB703 !important;
}
.fui-badge__bg-danger {
background-color: #FF2B2B !important;
}
.fui-badge__bg-purple {
background-color: #6831FF !important;
}
.fui-badge__bg-white {
background-color: #FFFFFF !important;
}
.fui-badge__text-color {
color: #FF2B2B !important;
}
......
src/components/firstui/fui-bubble-box/fui-bubble-box.vue
......@@ -79,7 +79,7 @@
},
right: {
type: [Number, String],
default: 8
default: 0
},
top: {
type: [Number, String],
......
src/components/firstui/fui-button/fui-button.vue
<template>
<view class="fui-button__wrap"
:class="[!width || width==='100%' || width===true?'fui-button__flex-1':'',disabled && !disabledBackground ? 'fui-button__opacity' : '']"
:style="{width: width,height: getHeight,marginTop:margin[0] || 0, marginRight:margin[1]||0,marginBottom:margin[2] || margin[0]||0,marginLeft:margin[3] || margin[1]||0,borderRadius: getRadius,background:getBackground}"
:class="[!getWidth || getWidth==='100%' || getWidth===true?'fui-button__flex-1':'',disabled && !disabledBackground ? 'fui-button__opacity' : '']"
:style="{width: getWidth,height: getHeight,marginTop:margin[0] || 0, marginRight:margin[1]||0,marginBottom:margin[2] || margin[0]||0,marginLeft:margin[3] || margin[1]||0,borderRadius: getRadius,background:getBackground}"
@touchstart="handleStart" @touchend="handleClick" @touchcancel="handleEnd">
<button class="fui-button" :class="[
bold ? 'fui-text__bold' : '',
time && (plain || type==='link') ? 'fui-button__opacity' : '',
!background && !disabledBackground && !plain?('fui-button__'+type):'',
!width || width==='100%' || width===true?'fui-button__flex-1':'',
!getWidth || getWidth==='100%' || getWidth===true?'fui-button__flex-1':'',
time && !plain && type!=='link' ? 'fui-button__active' : '',
pc && !disabled?(plain || type==='link'?'fui-button__opacity-pc':'fui-button__active-pc'):'',
]" :style="{
width: width,
width: getWidth,
height: getHeight,
lineHeight: getHeight,
background: disabled ? (disabledBackground || getTypeColor) : (plain ? 'transparent' : getBackground),
......@@ -21,10 +21,10 @@
borderRadius: getRadius,
fontSize: getSize,
color: getColor
}" :loading="loading" :form-type="formType" :open-type="openType" :app-parameter="appParameter" @getuserinfo="bindgetuserinfo"
@getphonenumber="bindgetphonenumber" @contact="bindcontact" @error="binderror"
@opensetting="bindopensetting" @chooseavatar="bindchooseavatar" @launchapp="bindlaunchapp"
:disabled="disabled" :scope="scope" @tap.stop="handleTap">
}" :loading="loading" :form-type="formType" :open-type="openType" :app-parameter="appParameter"
@getuserinfo="bindgetuserinfo" @getphonenumber="bindgetphonenumber" @contact="bindcontact"
@error="binderror" @opensetting="bindopensetting" @chooseavatar="bindchooseavatar"
@launchapp="bindlaunchapp" :disabled="disabled" :scope="scope" @tap.stop="handleTap">
<text class="fui-button__text"
:class="{'fui-btn__gray-color':!background && !disabledBackground && !plain && type==='gray' && color==='#fff','fui-text__bold':bold}"
v-if="text"
......@@ -44,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
......@@ -96,6 +97,11 @@
type: String,
default: ''
},
//按钮大小，优先级高于width和height，medium、small、mini
btnSize: {
type: String,
default: ''
},
//宽度
width: {
type: String,
......@@ -167,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'
......@@ -196,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() {
......
src/components/firstui/fui-calendar/fui-calendar.vue
......@@ -62,9 +62,8 @@
</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>
......@@ -168,11 +167,11 @@
//选中日期背景色
activeBackground: {
type: String,
default: '#465CFF'
default: ''
},
rangeColor: {
type: String,
default: '#465CFF'
default: ''
},
rangeBackground: {
type: String,
......@@ -204,7 +203,7 @@
},
btnBackground: {
type: String,
default: '#465CFF'
default: ''
},
btnColor: {
type: String,
......@@ -244,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: {
......@@ -366,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)) {
......@@ -384,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
......
src/components/firstui/fui-cascader/fui-cascader.vue
......@@ -7,10 +7,10 @@
<view class="fui-cascader__header-item" :id="`fui_cr_${idx}`" v-for="(item, idx) in selectedArr"
:key="idx" @tap.stop="swichTabs(idx)">
<text class="fui-cascader__header-text"
:class="{'fui-cascader__hi-width':item.text.length>6,'fui-cascader__color':idx === current && !activeColor}"
:style="{ color: idx === current ? activeColor : color, fontSize: size + 'rpx',fontWeight:idx === current?'bold':'normal' }">{{ item.text }}</text>
<view class="fui-cascader__header-line" :class="{'fui-cascader__bg':!activeColor}"
:style="{ background: activeColor }" v-if="idx === current && showLine"></view>
:class="{'fui-cascader__hi-width':item.text.length>6,'fui-cascader__color':idx === current && !getActiveColor}"
:style="{ color: idx === current ? getActiveColor : color, fontSize: size + 'rpx',fontWeight:idx === current?'bold':'normal' }">{{ item.text }}</text>
<view class="fui-cascader__header-line" :class="{'fui-cascader__bg':!getActiveColor}"
:style="{ background: getActiveColor }" v-if="idx === current && showLine"></view>
</view>
</view>
</scroll-view>
......@@ -32,8 +32,8 @@
<view class="fui-cascader__cell" :id="`fui_c_${subi}`" v-for="(sub, subi) in item.data"
:key="subi" @tap.stop="change(index, subi, sub)">
<view class="fui-cascader__checkmark"
:class="{'fui-cascader__icon-border':!activeColor}"
:style="{borderBottomColor:checkMarkColor || activeColor,borderRightColor:checkMarkColor || activeColor}"
:class="{'fui-cascader__icon-border':!getActiveColor}"
:style="{borderBottomColor:checkMarkColor || getActiveColor,borderRightColor:checkMarkColor || getActiveColor}"
v-if="item.index === subi"></view>
<image :src="sub.src" v-if="sub.src" class="fui-cascader__img"
:style="{ width: imgWidth+'rpx', height: imgHeight+'rpx', borderRadius: radius+'rpx' }">
......@@ -105,18 +105,10 @@
default: '#181818'
},
//选中颜色
// #ifdef APP-NVUE
activeColor: {
type: String,
default: '#465CFF'
},
// #endif
// #ifndef APP-NVUE
activeColor: {
type: String,
default: ''
},
// #endif
showLine: {
type: Boolean,
default: true
......@@ -159,6 +151,18 @@
default: '#181818'
}
},
computed: {
getActiveColor() {
let color = this.activeColor;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color;
}
},
data() {
return {
current: 0,
......
src/components/firstui/fui-checkbox-group/fui-checkbox-group.vue
<template>
<!-- #ifdef APP-PLUS || H5 || MP-ALIPAY || MP-TOUTIAO -->
<!-- #ifdef APP-PLUS || H5 || MP-ALIPAY || MP-TOUTIAO|| MP-KUAISHOU || MP-JD || MP-360 || MP-LARK -->
<checkbox-group :name="name">
<slot></slot>
</checkbox-group>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU || MP-JD || MP-360 || MP-LARK -->
<fui-form-field :name="name" :value="vals">
<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ -->
<fui-form-field :name="name" v-model="vals">
<slot></slot>
</fui-form-field>
<!-- #endif -->
......@@ -16,10 +16,11 @@
export default {
name: "fui-checkbox-group",
emits: ['change', 'input', 'update:modelValue'],
// #ifndef VUE3
// #ifdef MP-WEIXIN
behaviors: ['wx://form-field-group'],
// #endif
// #ifdef MP-BAIDU || MP-QQ || H5
behaviors: ['uni://form-field'],
// #endif
props: {
name: {
......
src/components/firstui/fui-checkbox/fui-checkbox.vue
<template>
<view class="fui-checkbox__input"
:class="{'fui-checkbox__disabled':disabled,'fui-checkbox__color':!color && val && !isCheckMark}"
:class="{'fui-checkbox__disabled':disabled,'fui-checkbox__color':!getColor && val && !isCheckMark}"
:style="{backgroundColor:getBackgroundColor(val,isCheckMark),borderColor:getBorderColor(val,isCheckMark),zoom:isNvue?1:scaleRatio,transform:`scale(${isNvue?scaleRatio:1})`,borderRadius:borderRadius}"
@tap.stop="checkboxChange">
<view class="fui-check__mark" :style="{borderBottomColor:checkMarkColor,borderRightColor:checkMarkColor}"
v-if="val"></view>
<checkbox class="fui-checkbox__hidden" style="opacity: 0;position: absolute;" :color="color" :disabled="disabled" :value="value" :checked="val">
<checkbox class="fui-checkbox__hidden" style="opacity: 0;position: absolute;" :color="getColor"
:disabled="disabled" :value="value" :checked="val">
</checkbox>
</view>
</template>
......@@ -35,27 +36,25 @@
//checkbox选中背景颜色
color: {
type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: ''
// #endif
},
//checkbox未选中时边框颜色
borderColor: {
type: String,
default: '#ccc'
},
// #ifdef APP-NVUE
borderRadius: {
type: String,
default: '40px'
},
// #endif
// #ifndef APP-NVUE
borderRadius: {
type: String,
// #ifdef APP-NVUE
default: '40rpx'
// #endif
// #ifndef APP-NVUE
default: '50%'
// #endif
},
// #endif
//是否只展示对号，无边框背景
isCheckMark: {
type: Boolean,
......@@ -100,6 +99,18 @@
}
}
},
computed: {
getColor() {
let color = this.color;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color;
}
},
data() {
let isNvue = false;
// #ifdef APP-NVUE
......@@ -112,14 +123,14 @@
},
methods: {
getBackgroundColor(val, isCheckMark) {
let color = val ? this.color : '#fff'
let color = val ? this.getColor : '#fff'
if (isCheckMark) {
color = 'transparent'
}
return color;
},
getBorderColor(val, isCheckMark) {
let color = val ? this.color : this.borderColor;
let color = val ? this.getColor : this.borderColor;
if (isCheckMark) {
color = 'transparent'
}
......
src/components/firstui/fui-circle/fui-circle.vue
......@@ -6,8 +6,8 @@
<!-- #ifdef APP-VUE || H5 -->
<canvas :start="percentage" :change:start="parse.init" :width="w" :change:width="parse.widthChange"
:sw="strokeWidth" :change:sw="parse.widthChange" :data-width="w" :data-sw="strokeWidth" :data-lc="lineCap"
:data-size="size" :data-percent="percentage" :data-color="color" :data-show="show" :data-ds="defaultShow"
:data-background="background" :data-foreground="foreground" :data-gradient="gradient" :data-sa="sAngle"
:data-size="size" :data-percent="percentage" :data-color="color || primaryColor" :data-show="show" :data-ds="defaultShow"
:data-background="background" :data-foreground="foreground || primaryColor" :data-gradient="gradient" :data-sa="sAngle"
:data-ccw="counterclockwise" :data-speed="speed" :data-am="activeMode" :data-cid="circleId"
:canvas-id="circleId" :class="[circleId]" :style="{width: w + 'px',height: w + 'px'}"></canvas>
<!-- #endif -->
......@@ -205,7 +205,7 @@
//圆环进度字体颜色
color: {
type: String,
default: '#465CFF'
default: ''
},
//是否显示进度文字
show: {
......@@ -225,7 +225,7 @@
//默认前景颜色
foreground: {
type: String,
default: '#465CFF'
default: ''
},
//进度条渐变颜色，结合foreground使用
gradient: {
......@@ -258,6 +258,12 @@
this.initWidth(val)
}
},
computed: {
primaryColor() {
const app = uni && uni.$fui && uni.$fui.color;
return (app && app.primary) || '#465CFF';
}
},
data() {
// #ifndef MP-WEIXIN
const circleId = `fui_cc_${Math.ceil(Math.random() * 10e5).toString(36)}`
......
src/components/firstui/fui-circle/mpjs.js
......@@ -62,12 +62,12 @@ export default {
sw = sw * 4
// #endif
ctx.setLineWidth(sw);
let gradient = 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);
gradient.addColorStop(1, this.foreground || this.primaryColor);
}
// #endif
ctx.setStrokeStyle(gradient);
......@@ -82,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}%`;
......
src/components/firstui/fui-circle/nvue.js
......@@ -78,7 +78,7 @@ export default {
this.defaultShow && this.drawDefaultCircle(ctx)
ctx.setLineWidth(Number(this.strokeWidth));
ctx.beginPath()
let gradient = this.foreground;
let gradient = this.foreground || this.primaryColor;
// if (this.gradient) {
// gradient = ctx.createLinearGradient(0, 0, this.w, 0);
// gradient.addColorStop(0, this.gradient);
......@@ -92,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}%`;
......
src/components/firstui/fui-collapse-item/fui-collapse-item.vue
......@@ -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') {
......
src/components/firstui/fui-config/index.js 0 → 100644
/*
组件属性全局配置文件。优先级：全局配置文件props < 直接设置组件props
目前支持配置的组件：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, icon = 'none') {
text && uni.showToast({
title: text,
icon: icon,
duration: 2000
})
},
modal: function(title, content, callback, showCancel, confirmColor, confirmText) {
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, isMain) {
if (isMain) {
uni.switchTab({
url: url
})
} else {
uni.navigateTo({
url: url
});
}
}
}
const fuiConfig = {
//组件名称，小驼峰命名
//如fui-button写成fuiButton
fuiButton: {
//组件属性值
height: '96rpx',
size: 32,
radius: '16rpx'
},
fuiIcon: {
size: 64,
unit: 'rpx',
//V1.9.8+
color: ''
},
fuiText: {
size: 32,
unit: 'rpx',
//仅Nvue有效，black 默认颜色，V1.9.8+
color: ''
},
fuiInput: {
labelSize: 32,
size: 32
},
fuiFormItem: {
labelSize: 32,
labelWidth: 160,
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
src/components/firstui/fui-countdown-verify/fui-countdown-verify.vue
<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: '',
......
src/components/firstui/fui-data-tag/fui-data-tag.vue
......@@ -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:(defaultBorderColor || 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:defaultBorderColor || 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,
......@@ -120,13 +120,13 @@
default: '#fff'
},
//默认边框颜色
defaultBorderColor:{
defaultBorderColor: {
type: String,
default: ''
},
borderColor: {
type: String,
default: '#465CFF'
default: ''
},
//设为true时，圆角值不建议设过大
mark: {
......@@ -139,7 +139,7 @@
},
markColor: {
type: String,
default: '#465CFF'
default: ''
}
},
watch: {
......@@ -158,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',
......
src/components/firstui/fui-date-picker/fui-date-picker.vue
......@@ -14,7 +14,7 @@
<text class="fui-date__picker-title"
:class="[theme==='dark'?'fui-dpk__title-color_dark':'fui-dpk__title-color']"
:style="titleStyl">{{title}}</text>
<text class="fui-dpk__btn-sure fui-dpk__sure-color" :style="confrimStyl"
<text class="fui-dpk__btn-sure" :class="{'fui-dpk__sure-color':!confirmColor}" :style="confrimStyl"
@tap.stop="btnConfirm">确定</text>
</view>
<view class="fui-dpk__range-wrap" v-if="range">
......@@ -421,8 +421,15 @@
},
confrimStyl() {
let styles = `font-size:${this.btnSize}rpx;`
if (this.confirmColor) {
styles += `color:${this.confirmColor};`
let color = this.confirmColor;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
if (color) {
styles += `color:${color};`
}
return styles
},
......@@ -459,15 +466,29 @@
},
startStyl() {
let style = ''
if (this.isActive == 1 && this.rangeBackground) {
style = `background:${this.rangeBackground};`
let color = this.rangeBackground;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
if (this.isActive == 1 && color) {
style = `background:${color};`
}
return style
},
endStyl() {
let style = ''
if (this.isActive == 2 && this.rangeBackground) {
style = `background:${this.rangeBackground};`
let color = this.rangeBackground;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
if (this.isActive == 2 && color) {
style = `background:${color};`
}
return style
}
......@@ -486,18 +507,24 @@
secondRange(val) {
this.getSeconds()
},
// #ifdef APP-NVUE
isShow: {
handler(newVal) {
if (newVal) {
// #ifndef APP-NVUE
this.isInitShow = true
// #endif
// #ifdef APP-NVUE
this.openPicker();
// #endif
} else {
// #ifdef APP-NVUE
this.closePicker();
// #endif
}
},
immediate: true
},
// #endif
show(val) {
this.isShow = val;
}
......@@ -528,7 +555,8 @@
isShow: false,
isActive: 1,
startDate: {},
endDate: {}
endDate: {},
isInitShow: false
};
},
methods: {
......@@ -826,7 +854,7 @@
[hi, mi, si],
[mi, si]
][type - 1]
}, 50)
}, 200)
})
},
getResult() {
......@@ -949,17 +977,19 @@
//判断选择结果
let start = this.startDate.result;
let end = this.endDate.result;
if (!start || !end) {
let msg = !start ? this.start : this.end
if (!start && !end) {
this.startDate = this.getResult()
this.isActive = 2
uni.showToast({
title: `请选择${msg}`,
title: `请选择${this.end}`,
icon: 'none'
})
if (start && !end) {
this.isActive = 2
}
return;
} else if (!this.compareDate(start, end)) {
return
} else if (start && !end) {
this.endDate = this.getResult()
end = this.endDate.result;
}
if (!this.compareDate(start, end)) {
uni.showToast({
title: `${this.end}不能小于${this.start}`,
icon: 'none'
......@@ -975,6 +1005,7 @@
}, 80)
},
pickerChange(e) {
if (!this.isInitShow) return;
let value = e.detail.value;
let type = Number(this.type)
if (type > 1 && type < 6) {
......@@ -995,7 +1026,7 @@
} else {
this.endDate = this.getResult()
}
}, 35)
}, 50)
}
this.isEnd = true;
},
......@@ -1242,10 +1273,6 @@
.fui-dpk__range-active {
color: #fff;
/* #ifdef APP-NVUE */
background: #465CFF;
/* #endif */
/* #ifndef APP-NVUE */
background: var(--fui-color-primary, #465CFF);
/* #endif */
......@@ -1316,16 +1343,12 @@
color: #D1D1D1;
}
/* #ifndef APP-NVUE */
.fui-dpk__sure-color {
/* #ifndef APP-NVUE */
color: var(--fui-color-primary, #465CFF) !important;
/* #endif */
/* #ifdef APP-NVUE */
color: #465CFF;
/* #endif */
}
/* #endif */
.fui-date__picker-view {
/* #ifndef APP-NVUE */
width: 100%;
......
src/components/firstui/fui-dialog/fui-dialog.vue
......@@ -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
}]
}
},
......
src/components/firstui/fui-digital-keyboard/fui-digital-keyboard.vue
......@@ -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,
......
src/components/firstui/fui-digital-roller/fui-digital-roller.vue
......@@ -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: {
......
src/components/firstui/fui-drag/f-drag-item.vue
......@@ -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 */
}
......
src/components/firstui/fui-drag/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-drawer/fui-drawer.vue
......@@ -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', {});
......
src/components/firstui/fui-dropdown-list/fui-dropdown-list.vue
......@@ -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() {
......
src/components/firstui/fui-dropdown-menu/fui-dropdown-menu.vue
......@@ -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() {
......
src/components/firstui/fui-empty/fui-empty.vue
......@@ -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
......
src/components/firstui/fui-fab/bindingx.js 0 → 100644
// #ifdef APP-NVUE
const animation = uni.requireNativePlugin('animation');
export default {
data() {
return {
startX: 0,
startY: 0,
lastLeft: 0,
lastTop: 0,
isMove: false
}
},
created() {
this.refFab = null;
this.loop = null
},
mounted() {
this.$nextTick(() => {
setTimeout(() => {
this.refFab = this.getEl(this.$refs['fui_fab_move_ref'])
}, 50)
})
},
methods: {
getEl(el) {
return el.ref || el[0].ref;
},
_aniMove(x, y) {
if (!this.refFab || !this.isDrag) return
animation.transition(this.refFab, {
styles: {
transform: `translate(${x}px,${y}px)`
},
duration: 0,
timingFunction: 'linear',
needLayout: false,
delay: 0
}, () => {
if (Math.abs(x) > 0.1 || Math.abs(y) > 0.1) {
this.isMove = true;
}
});
},
touchstart(e) {
if (!this.isDrag) return;
var touch = e.touches || e.changedTouches
this.startX = touch[0].screenX
this.startY = touch[0].screenY
},
touchmove(e) {
if (!this.isDrag) return;
var touch = e.touches || e.changedTouches
let pageX = touch[0].screenX,
pageY = touch[0].screenY;
var left = pageX - this.startX + this.lastLeft;
left = left < -this.eLeft ? -this.eLeft : left;
left = left > this.maxWidth ? this.maxWidth : left;
this.startX = pageX
var top = pageY - this.startY + this.lastTop;
top = top < -this.eTop ? -this.eTop : top;
top = top > this.maxHeight ? this.maxHeight : top;
this.startY = pageY
this.lastLeft = left
this.lastTop = top
this._aniMove(left, top)
},
touchend(e) {
clearTimeout(this.loop)
this.loop = setTimeout(() => {
this.isMove = false
}, 50)
}
}
}
// #endif
// #ifndef APP-NVUE
export default {}
// #endif
src/components/firstui/fui-fab/index.wxs 0 → 100644
var movable = {
width: 100,
height: 100,
disabled: false,
left: 0,
top: 0
}
function isPC() {
if (typeof navigator !== 'object') return false;
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
var flag = true;
for (var v = 0; v< Agents.length - 1; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
var isH5 = false
if (typeof window === 'object') isH5 = true
function setInitValue(dataset, isChange) {
movable.width = +dataset.width
movable.height = +dataset.height
movable.top = +dataset.top
movable.left = +dataset.left
//H5获取bool值为undefined
movable.disabled = (+dataset.disabled) == 1 ? true : false
}
function touchstart(e, ins) {
if (movable.disabled) return;
var state = e.instance.getState()
var touch = e.touches[0] || e.changedTouches[0];
if (isH5 && isPC()) {
touch = e;
}
var dataset = e.instance.getDataset()
state.startX = touch.clientX
state.startY = touch.clientY
setInitValue(dataset)
}
function styleChange(left, top, ins) {
if (!ins) return;
var mview = ins.selectComponent('.fui-fab__btn-wrap');
if (!mview) return;
mview.setStyle({
transform: 'translate3d(' + left + 'px,' + top + 'px,0)'
})
}
function touchmove(e, ins, event) {
if (movable.disabled) return;
if (e.preventDefault) {
// 阻止页面滚动
e.preventDefault()
}
var state = {}
var touch = {}
if (isH5 && isPC()) {
touch = e;
state = event.instance.getState()
} else {
touch = e.touches[0] || e.changedTouches[0]
state = e.instance.getState()
}
var pageX = touch.clientX;
var pageY = touch.clientY;
var left = pageX - state.startX + (state.lastLeft || 0);
left = left < -movable.left ? -movable.left : left;
left = left > movable.width ? movable.width : left;
state.startX = pageX
var top = pageY - state.startY + (state.lastTop || 0);
top = top < -movable.top ? -movable.top : top;
top = top > movable.height ? movable.height : top;
state.startY = pageY
state.lastLeft = left
state.lastTop = top
styleChange(left, top, ins)
}
var _movable = false;
function mousedown(e, ins) {
if (!isH5 || !isPC()) return
touchstart(e, ins)
_movable = true
window.onmousemove = function(event) {
if (!isH5 || !isPC() || !_movable) return
touchmove(event, ins, e)
}
window.onmouseup = function(event) {
if (!isH5 || !isPC() || !_movable) return
_movable = false
}
}
module.exports = {
touchstart: touchstart,
touchmove: touchmove,
mousedown: mousedown
}
src/components/firstui/fui-fab/mpjs.js 0 → 100644
// #ifndef APP-PLUS || MP-WEIXIN || H5
export default {
data() {
return {
startX: 0,
startY: 0,
lastLeft: 0,
lastTop: 0,
transform: ''
}
},
methods: {
touchstart(e) {
if (!this.isDrag) return;
const touch = e.touches || e.changedTouches
this.startX = touch[0].clientX
this.startY = touch[0].clientY
},
touchmove(e) {
if (!this.isDrag) return;
const touch = e.touches || e.changedTouches
let pageX = touch[0].clientX,
pageY = touch[0].clientY;
var left = pageX - this.startX + this.lastLeft;
left = left < -this.eLeft ? -this.eLeft : left;
left = left > this.maxWidth ? this.maxWidth : left;
this.startX = pageX
var top = pageY - this.startY + this.lastTop;
top = top < -this.eTop ? -this.eTop : top;
top = top > this.maxHeight ? this.maxHeight : top;
this.startY = pageY
this.lastLeft = left
this.lastTop = top
this.transform = `translate3d(${left}px,${top}px,0)`
}
}
}
// #endif
// #ifdef APP-PLUS|| MP-WEIXIN || H5
export default {}
// #endif
src/components/firstui/fui-footer/fui-footer.vue
......@@ -5,7 +5,7 @@
: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;
}
......
src/components/firstui/fui-form-field/fui-form-field.vue
......@@ -7,15 +7,22 @@
<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: ''
}
}
}
......
src/components/firstui/fui-form-item/fui-form-item.vue
......@@ -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;
......
src/components/firstui/fui-form/fui-form.vue
......@@ -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: '',
......
src/components/firstui/fui-gallery/fui-gallery.vue
......@@ -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) {
......@@ -123,7 +126,8 @@
let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax',
'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini',
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini',
'iphone14pro', 'iphone14promax'
'iphone14pro', 'iphone14promax', 'iphone15', 'iphone15mini',
'iphone15pro', 'iphone15promax'
]
const model = res.model.replace(/\s/g, "").toLowerCase()
const newModel = model.split('<')[0]
......
src/components/firstui/fui-horizontal-scroll/bindingx.js 0 → 100644
// #ifdef APP-NVUE
const BindingX = uni.requireNativePlugin('bindingx');
export default {
methods: {
getEl(el) {
return this.$refs[el].ref;
},
nvueScrollHandler(e) {
const anchor = this.getEl('fui_scroller_view')
const element = this.getEl('fui_hor_indicator')
const scrollLeft = e.contentOffset.x
const contentWidth = e.contentSize.width
if (this.scroll && element) {
const barAllMoveWidth = this.bgWidth - this.blockWidth
const platform = uni.getSystemInfoSync().platform
const actionNum = platform.toLowerCase() === 'ios' ? 2 : 1
const expression = `(x / ${actionNum}) / ${contentWidth - this.width} * ${barAllMoveWidth}`
BindingX.bind({
anchor,
eventType: 'scroll',
props: [{
element,
property: 'transform.translateX',
expression
}]
})
}
if (scrollLeft + this.width === contentWidth) {
this.scrollEvent('right')
} else if (scrollLeft === 0) {
this.scrollEvent('left')
}
}
}
}
// #endif
// #ifndef APP-NVUE
export default {}
// #endif
src/components/firstui/fui-horizontal-scroll/fui-horizontal-scroll.vue 0 → 100644
<template>
<view class="fui-horizontal__scroll" :style="{marginTop:marginTop+'rpx',marginBottom:marginBottom+'rpx'}"
ref="fui_horizontal__scroll">
<!-- #ifdef APP-VUE || MP-WEIXIN || H5-->
<scroll-view scroll-x :upper-threshold="0" :lower-threshold="0" :data-width="width" :data-bgwidth="bgWidth"
:data-blockwidth="blockWidth" @scroll="handler.scroll" @scrolltoupper="handler.scrolltoupper"
@scrolltolower="handler.scrolltolower" class="fui-hor__scroll-view">
<view class="fui-hor__scroll-wrap">
<slot></slot>
</view>
</scroll-view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<scroller class="fui-hor__scroll-view" ref="fui_scroller_view" scroll-direction="horizontal"
:show-scrollbar="false" :offset-accuracy="2" @scroll="nvueScrollHandler">
<view class="fui-hor__scroll-wrap">
<slot></slot>
</view>
</scroller>
<!-- #endif -->
<!-- #ifndef APP-PLUS || MP-WEIXIN || H5-->
<scroll-view scroll-x :upper-threshold="0" :lower-threshold="0" class="fui-hor__scroll-view"
@scroll="scrollHandler" @scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower">
<view class="fui-hor__scroll-wrap">
<slot></slot>
</view>
</scroll-view>
<!-- #endif -->
<view class="fui-hor__scrollbar-wrap" :style="{marginTop:scrollGap+'rpx'}" v-if="scroll">
<view class="fui-hor__scrollbar" :class="{'fui-hor__scroll-radius':scrollCap==='round'}"
:style="{height:blockHeight+'px',width:bgWidth+'px',background:background}">
<view class="fui-hor__scroll-indicator"
:class="{'fui-hor__scroll-radius':scrollCap==='round','fui-hor__scroll-bg':!scrollBarColor}"
:style="getStyles" ref="fui_hor_indicator"></view>
</view>
</view>
</view>
</template>
<!-- #ifdef APP-VUE || MP-WEIXIN || H5-->
<script src="./index.wxs" module="handler" lang="wxs"></script>
<!-- #endif -->
<script>
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin('dom');
// #endif
import bindingx from './bindingx.js'
import mpjs from './mpjs.js'
export default {
name: "fui-horizontal-scroll",
mixins: [mpjs, bindingx],
emits: ['scrolltoupper', 'scrolltolower'],
props: {
marginTop: {
type: [String, Number],
default: 0
},
marginBottom: {
type: [String, Number],
default: 0
},
// 是否显示滚动条
scroll: {
type: Boolean,
default: true
},
// 滚动条区域宽度/长度
scrollWidth: {
type: [String, Number],
default: 96
},
// 滚动条的宽度
scrollBarWidth: {
type: [String, Number],
default: 32
},
// 滚动区域/滚动条高度
scrollHeight: {
type: [String, Number],
default: 8
},
//滚动条两端样式，可选值为 square、round
scrollCap: {
type: String,
default: 'round'
},
scrollBarColor: {
type: String,
default: ''
},
background: {
type: String,
default: '#EEEEEE'
},
//自定义滚动条距离上方内容间距
scrollGap: {
type: [String, Number],
default: 24
}
},
data() {
return {
width: 0,
//滚动条背景长度
bgWidth: 0,
//滚动条滑块长度
blockWidth: 0,
blockHeight: 0,
transform: ''
};
},
created() {
this.bgWidth = this.getPx(this.scrollWidth || 96)
this.blockWidth = this.getPx(this.scrollBarWidth || 32)
this.blockHeight = this.getPx(this.scrollHeight || 8)
},
mounted() {
this.$nextTick(() => {
this.init()
})
},
watch: {
scrollWidth(val) {
this.bgWidth = this.getPx(val || 96)
},
scrollBarWidth(val) {
this.blockWidth = this.getPx(this.scrollBarWidth || 32)
},
scrollHeight(val) {
this.blockHeight = this.getPx(this.scrollHeight || 8)
}
},
computed: {
getStyles() {
let style = `height:${this.blockHeight}px;width:${this.blockWidth}px;`
let color = this.scrollBarColor;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
if (color && color !== true) {
style += `background:${color};`
}
// #ifndef APP-PLUS || MP-WEIXIN
style += `transform:${this.transform}`
// #endif
return style
}
},
methods: {
//如果初始化有误，可调用此方法重新初始化
init() {
setTimeout(() => {
this._getSize()
}, 80);
},
getPx(rpx) {
let px = Math.floor(uni.upx2px(Number(rpx)));
px = px % 2 === 0 ? px : px + 1
return px;
},
scrollEvent(edge) {
const event = edge === 'left' ? 'scrolltoupper' : 'scrolltolower'
this.$emit(event)
},
_getSize() {
// #ifndef APP-NVUE
uni.createSelectorQuery()
// #ifndef MP-ALIPAY
.in(this)
// #endif
.select('.fui-horizontal__scroll')
.boundingClientRect()
.exec(ret => {
if (ret) {
this.width = ret[0].width || 0
}
})
// #endif
// #ifdef APP-NVUE
dom.getComponentRect(this.$refs['fui_horizontal__scroll'], (ret) => {
const size = ret.size
if (size) {
this.width = size.width
}
})
// #endif
}
}
}
</script>
<style scoped>
/* #ifndef APP-NVUE */
::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
color: transparent !important;
display: none;
}
/* #endif */
.fui-horizontal__scroll,
.fui-hor__scroll-view,
.fui-hor__scroll-wrap {
/* #ifndef APP-NVUE */
display: flex;
flex-shrink: 0;
/* #endif */
flex-direction: row;
}
.fui-horizontal__scroll {
flex-direction: column;
align-items: stretch;
/* #ifndef APP-NVUE */
align-content: flex-start;
/* #endif */
}
.fui-hor__scrollbar-wrap {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
}
.fui-hor__scrollbar {
position: relative;
overflow: hidden;
/* #ifndef APP-NVUE */
transform: translateZ(0);
/* #endif */
}
.fui-hor__scroll-radius {
border-radius: 100px;
}
.fui-hor__scroll-indicator {
position: absolute;
left: 0;
top: 0;
}
/* #ifndef APP-NVUE */
.fui-hor__scroll-bg {
background-color: var(--fui-color-primary, #465CFF) !important;
}
/* #endif */
</style>
src/components/firstui/fui-horizontal-scroll/index.wxs 0 → 100644
function scroll(event, ownerInstance) {
var detail = event.detail
var scrollWidth = detail.scrollWidth
var scrollLeft = detail.scrollLeft
var dataset = event.currentTarget.dataset
var width = dataset.width || 0
var scrollBarWidth = dataset.bgwidth || 0
var blockWidth = dataset.blockwidth || 0
var x = scrollLeft / (scrollWidth - width) * (scrollBarWidth - blockWidth)
setBarStyle(ownerInstance, x)
}
function scrolltolower(event, ownerInstance) {
ownerInstance.callMethod('scrollEvent', 'right')
var dataset = event.currentTarget.dataset
var scrollBarWidth = dataset.bgwidth || 0
var blockWidth = dataset.blockwidth || 0
setBarStyle(ownerInstance, scrollBarWidth - blockWidth)
}
function scrolltoupper(event, ownerInstance) {
ownerInstance.callMethod('scrollEvent', 'left')
setBarStyle(ownerInstance, 0)
}
function setBarStyle(ownerInstance, x) {
var block = ownerInstance.selectComponent('.fui-hor__scroll-indicator')
block && block.setStyle({
transform: 'translate3d(' + x + 'px,0,0)'
})
}
module.exports = {
scroll: scroll,
scrolltolower: scrolltolower,
scrolltoupper: scrolltoupper
}
src/components/firstui/fui-horizontal-scroll/mpjs.js 0 → 100644
// #ifndef APP-PLUS || MP-WEIXIN || H5
export default {
methods: {
scrollHandler(event) {
const detail = event.detail
const scrollWidth = detail.scrollWidth
const scrollLeft = detail.scrollLeft
const width = this.width
const scrollBarWidth = this.bgWidth
const blockWidth = this.blockWidth
const x = scrollLeft / (scrollWidth - width) * (scrollBarWidth - blockWidth)
this.transform = `translate3d(${x}px,0,0)`
},
scrolltoupper(event) {
this.scrollEvent('left')
this.transform = 'translate3d(0,0,0)'
},
scrolltolower(event) {
this.scrollEvent('right')
const x = this.bgWidth - this.blockWidth
this.transform = `translate3d(${x}px,0,0)`
}
}
}
// #endif
// #ifdef APP-PLUS|| MP-WEIXIN || H5
export default {}
// #endif
src/components/firstui/fui-icon/fui-icon.vue
<template>
<!-- #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() {
......
src/components/firstui/fui-image-cropper/index.wxs
......@@ -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;
......
src/components/firstui/fui-index-list/f-index-list-item.vue
......@@ -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,
......@@ -39,12 +35,7 @@
},
selectedColor: {
type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: ''
// #endif
},
//checkbox未选中时边框颜色
borderColor: {
......@@ -74,9 +65,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", {
......
src/components/firstui/fui-index-list/fui-index-list.vue
......@@ -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
......
src/components/firstui/fui-license-plate/fui-license-plate.vue
......@@ -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,
......@@ -189,7 +193,7 @@
this.$emit('complete', {})
},
changeKeyboard(type = 'en') {
this.type = type === 'en' ? 2 : 1
this.type = type === 'en' ? 2 : 1
}
}
};
......
src/components/firstui/fui-link/fui-link.vue
<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">
: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,fontSize:size+'rpx',fontWeight:fontWeight}" @tap="openURL">
: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,fontSize:size+'rpx',fontWeight:fontWeight}" @tap="openURL">{{text || href}}</text>
:style="{color:getColor,fontSize:size+'rpx',fontWeight:fontWeight}" @tap="openURL">{{text || href}}</text>
<!-- #endif -->
</template>
......@@ -45,18 +45,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: 28
......@@ -80,6 +72,16 @@
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: {
......@@ -135,7 +137,7 @@
/* #ifndef APP-NVUE */
.fui-link__defcolor {
color: var(--fui-color-primary, #465CFF) !important;
color: var(--fui-color-link, #465CFF) !important;
}
/* #endif */
......
src/components/firstui/fui-list-cell/fui-list-cell.vue
<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,6 +106,37 @@
default: 0
}
},
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', {
......@@ -200,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);
}
......
src/components/firstui/fui-loadmore/fui-loadmore.vue
......@@ -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
......
src/components/firstui/fui-modal/fui-modal.vue
......@@ -14,11 +14,12 @@
v-if="vals.length>0">
<view class="fui-modal__button"
:class="{'fui-modal__button-col':direction==='column' && index!==vals.length-1,'fui-modal__button-bg':!entity.plain && !entity.background,'fui-modal__button-border':entity.plain,'fui-modal__button-bc':entity.plain && !entity.background}"
:style="{borderRadius:radius+'rpx',background:entity.plain?'transparent':(entity.background || '#465CFF'),borderColor:entity.plain?(entity.background || '#465CFF'):'transparent'}"
:style="{borderRadius:radius+'rpx',background:entity.plain?'transparent':(entity.background || primaryColor),borderColor:entity.plain?(entity.background || primaryColor):'transparent'}"
v-for="(entity,index) in vals" :key="index">
<text class="fui-modal__button-inner"
:class="{'fui-modal__button-color': !entity.color && entity.plain}"
:style="{color:entity.color || (entity.plain?'#465CFF':'#fff'),borderRadius:radius+'rpx'}" @tap.stop="handleClick($event,index)">{{entity.text}}</text>
:style="{color:entity.color || (entity.plain?primaryColor:'#fff'),borderRadius:radius+'rpx'}"
@tap.stop="handleClick($event,index)">{{entity.text}}</text>
</view>
</view>
</view>
......@@ -127,6 +128,10 @@
computed: {
getWidth() {
return "width:" + (Number(this.width) - 60) + 'rpx'
},
primaryColor() {
const app = uni && uni.$fui && uni.$fui.color;
return (app && app.primary) || '#465CFF';
}
},
watch: {
......
src/components/firstui/fui-movable-view/bindingx.js 0 → 100644
// #ifdef APP-NVUE
const animation = uni.requireNativePlugin('animation');
export default {
data() {
return {
startX: 0,
startY: 0,
lastLeft: 0,
lastTop: 0
}
},
created() {
this.refFab = null;
this.loop = null
},
mounted() {
this.$nextTick(() => {
setTimeout(() => {
this.refFab = this.getEl(this.$refs['fui-movable__view'])
}, 50)
})
},
methods: {
getEl(el) {
return el.ref || el[0].ref;
},
_aniMove(x, y) {
if (!this.refFab || this.direction === 'none') return
animation.transition(this.refFab, {
styles: {
transform: `translate(${x}px,${y}px)`
},
duration: 0,
timingFunction: 'linear',
needLayout: false,
delay: 0
}, () => {
this.change({
left: x,
top: y
})
});
},
touchstart(e) {
if (this.direction === 'none') return;
var touch = e.touches || e.changedTouches
if (this.direction === 'all') {
this.startX = touch[0].screenX
this.startY = touch[0].screenY
} else if (this.direction === 'vertical') {
this.startY = touch[0].screenY
} else {
this.startX = touch[0].screenX
}
},
getLeft(pageX) {
var left = pageX - this.startX + this.lastLeft;
left = left < -this.eLeft ? -this.eLeft : left;
left = left > this.maxWidth ? this.maxWidth : left;
return left
},
getTop(pageY) {
var top = pageY - this.startY + this.lastTop;
top = top < -this.eTop ? -this.eTop : top;
top = top > this.maxHeight ? this.maxHeight : top;
return top
},
touchmove(e) {
if (this.direction === 'none') return;
var touch = e.touches || e.changedTouches
let pageX = touch[0].screenX,
pageY = touch[0].screenY;
let left = 0,
top = 0;
if (this.direction === 'all') {
left = this.getLeft(pageX)
this.startX = pageX
top = this.getTop(pageY)
this.startY = pageY
} else if (this.direction === 'vertical') {
top = this.getTop(pageY)
this.startY = pageY
} else {
left = this.getLeft(pageX)
this.startX = pageX
}
this.lastLeft = left
this.lastTop = top
this._aniMove(left, top)
}
}
}
// #endif
// #ifndef APP-NVUE
export default {}
// #endif
src/components/firstui/fui-movable-view/fui-movable-view.vue 0 → 100644
<template>
<view>
<!-- #ifdef APP-VUE || H5 -->
<view class="fui-movable__view" :class="{'fui-movable__cursor':direction!=='none'}" :data-direction="direction"
:data-width="maxWidth" :data-height="maxHeight" :data-left="eLeft" :data-top="eTop"
@touchstart="handler.touchstart" @touchmove="handler.touchmove" @mousedown="handler.mousedown"
:style="getStyles">
<slot></slot>
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="fui-movable__view" :class="{'fui-movable__cursor':direction!=='none'}" :data-direction="direction"
:data-width="maxWidth" :data-height="maxHeight" :data-left="eLeft" :data-top="eTop"
@touchstart="handler.touchstart" :catchtouchmove="handler.touchmove" :style="getStyles">
<slot></slot>
</view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view class="fui-movable__view" @touchstart="touchstart" @touchmove.stop.prevent="touchmove"
ref="fui-movable__view" :style="getStyles">
<slot></slot>
</view>
<!-- #endif -->
<!-- #ifndef APP-PLUS || MP-WEIXIN || H5 -->
<view class="fui-movable__view" @touchstart="touchstart" @touchmove.stop.prevent="touchmove" :style="getStyles">
<slot></slot>
</view>
<!-- #endif -->
</view>
</template>
<!-- #ifdef APP-VUE || MP-WEIXIN || H5-->
<script src="./index.wxs" module="handler" lang="wxs"></script>
<!-- #endif -->
<script>
// #ifdef APP-NVUE
const animation = uni.requireNativePlugin('animation');
const dom = uni.requireNativePlugin('dom');
// #endif
import mpjs from './mpjs.js'
import bindingx from './bindingx.js'
export default {
name: "fui-movable-view",
emits: ['change'],
mixins: [mpjs, bindingx],
props: {
//left值,设置大于-1的值则right失效
left: {
type: [Number, String],
default: -1
},
right: {
type: [Number, String],
default: 80
},
//top值,设置大于-1的值则bottom失效
top: {
type: [Number, String],
default: -1
},
bottom: {
type: [Number, String],
default: 120
},
zIndex: {
type: [Number, String],
default: 10
},
//移动方向，属性值有all、vertical、horizontal、none
direction: {
type: String,
default: 'all'
}
},
data() {
return {
maxWidth: 0,
maxHeight: 0,
eLeft: 0,
eTop: 0,
};
},
watch: {
position(val) {
this.$nextTick(() => {
setTimeout(() => {
this._getSize()
}, 50);
})
}
},
mounted() {
this.$nextTick(() => {
setTimeout(() => {
this._getSize()
}, 50);
})
},
computed: {
position() {
return `${this.left}_${this.right}_${this.top}_${this.bottom}`
},
getStyles() {
let styles = `z-index:${this.zIndex};`
if (this.left != -1) {
styles += `left:${this.left}rpx;`
} else {
styles += `right:${this.right}rpx;`
}
if (this.top != -1) {
styles += `top:${this.top}rpx;`
} else {
styles += `bottom:${this.bottom}rpx;`
}
// #ifndef APP-PLUS || MP-WEIXIN || H5
if (this.direction !== 'none') {
styles += `transform:${this.transform};`
}
// #endif
return styles;
}
},
methods: {
_getSize() {
const sys = uni.getSystemInfoSync()
// #ifndef APP-NVUE
uni.createSelectorQuery()
// #ifndef MP-ALIPAY
.in(this)
// #endif
.select('.fui-movable__view')
.boundingClientRect()
.exec(ret => {
if (ret) {
this.maxWidth = sys.windowWidth - ret[0].width - ret[0].left;
this.maxHeight = sys.windowHeight - ret[0].height - ret[0].top;
this.eLeft = ret[0].left || 0;
this.eTop = ret[0].top || 0;
this.change({
left: 0,
top: 0
})
}
})
// #endif
// #ifdef APP-NVUE
dom.getComponentRect(this.$refs['fui-movable__view'], (ret) => {
const size = ret.size
if (size) {
this.maxWidth = sys.windowWidth - size.width - size.left;
this.maxHeight = sys.windowHeight - size.height - size.top;
this.eLeft = size.left || 0;
this.eTop = size.top || 0;
this.change({
left: 0,
top: 0
})
}
})
// #endif
},
reset() {
setTimeout(() => {
this._getSize()
}, 50);
},
change(e) {
this.$emit('change', {
x: e.left + this.eLeft,
y: e.top + this.eTop
})
}
}
}
</script>
<style scoped>
.fui-movable__view {
position: fixed;
}
/* #ifdef H5 */
.fui-movable__cursor {
cursor: grab;
}
/* #endif */
</style>
src/components/firstui/fui-movable-view/index.wxs 0 → 100644
var movable = {
width: 100,
height: 100,
direction: '',
left: 0,
top: 0
}
function isPC() {
if (typeof navigator !== 'object') return false;
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
var flag = true;
for (var v = 0; v< Agents.length - 1; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
var isH5 = false
if (typeof window === 'object') isH5 = true
function setInitValue(dataset, isChange) {
movable.width = +dataset.width
movable.height = +dataset.height
movable.top = +dataset.top
movable.left = +dataset.left
movable.direction = dataset.direction
}
function touchstart(e, ins) {
if (movable.direction == 'none') return;
var state = e.instance.getState()
var touch = e.touches[0] || e.changedTouches[0];
if (isH5 && isPC()) {
touch = e;
}
var dataset = e.instance.getDataset()
if (movable.direction == 'all') {
state.startX = touch.clientX
state.startY = touch.clientY
} else if (movable.direction == 'vertical') {
state.startY = touch.clientY
} else {
state.startX = touch.clientX
}
setInitValue(dataset)
}
function styleChange(left, top, ins) {
if (!ins) return;
var mview = ins.selectComponent('.fui-movable__view');
if (!mview) return;
mview.setStyle({
transform: 'translate3d(' + left + 'px,' + top + 'px,0)'
})
ins.callMethod('change', {
left: left,
top: top
})
}
function getLeft(pageX, state) {
var left = pageX - state.startX + (state.lastLeft || 0);
left = left < -movable.left ? -movable.left : left;
left = left > movable.width ? movable.width : left;
return left
}
function getTop(pageY, state) {
var top = pageY - state.startY + (state.lastTop || 0);
top = top < -movable.top ? -movable.top : top;
top = top > movable.height ? movable.height : top;
return top
}
function touchmove(e, ins, event) {
if (movable.direction == 'none') return;
if (e.preventDefault) {
// 阻止页面滚动
e.preventDefault()
}
var state = {}
var touch = {}
if (isH5 && isPC()) {
touch = e;
state = event.instance.getState()
} else {
touch = e.touches[0] || e.changedTouches[0]
state = e.instance.getState()
}
var pageX = touch.clientX;
var pageY = touch.clientY;
var left = 0,
top = 0;
if (movable.direction == 'all') {
left = getLeft(pageX, state)
state.startX = pageX
top = getTop(pageY, state)
state.startY = pageY
} else if (movable.direction == 'vertical') {
top = getTop(pageY, state)
state.startY = pageY
} else {
left = getLeft(pageX, state)
state.startX = pageX
}
state.lastLeft = left
state.lastTop = top
styleChange(left, top, ins)
}
var _movable = false;
function mousedown(e, ins) {
if (!isH5 || !isPC()) return
touchstart(e, ins)
_movable = true
window.onmousemove = function(event) {
if (!isH5 || !isPC() || !_movable) return
touchmove(event, ins, e)
}
window.onmouseup = function(event) {
if (!isH5 || !isPC() || !_movable) return
_movable = false
}
}
module.exports = {
touchstart: touchstart,
touchmove: touchmove,
mousedown: mousedown
}
src/components/firstui/fui-movable-view/mpjs.js 0 → 100644
// #ifndef APP-PLUS || MP-WEIXIN || H5
export default {
data() {
return {
startX: 0,
startY: 0,
lastLeft: 0,
lastTop: 0,
transform: ''
}
},
methods: {
touchstart(e) {
if (this.direction === 'none') return;
const touch = e.touches || e.changedTouches
if (this.direction === 'all') {
this.startX = touch[0].clientX
this.startY = touch[0].clientY
} else if (this.direction === 'vertical') {
this.startY = touch[0].clientY
} else {
this.startX = touch[0].clientX
}
},
getLeft(pageX) {
var left = pageX - this.startX + this.lastLeft;
left = left < -this.eLeft ? -this.eLeft : left;
left = left > this.maxWidth ? this.maxWidth : left;
return left
},
getTop(pageY, state) {
var top = pageY - this.startY + this.lastTop;
top = top < -this.eTop ? -this.eTop : top;
top = top > this.maxHeight ? this.maxHeight : top;
return top
},
touchmove(e) {
if (this.direction == 'none') return;
const touch = e.touches || e.changedTouches
let pageX = touch[0].clientX,
pageY = touch[0].clientY;
let left = 0,
top = 0;
if (this.direction === 'all') {
left = this.getLeft(pageX)
this.startX = pageX
top = this.getTop(pageY)
this.startY = pageY
} else if (this.direction === 'vertical') {
top = this.getTop(pageY)
this.startY = pageY
} else {
left = this.getLeft(pageX)
this.startX = pageX
}
this.lastLeft = left
this.lastTop = top
this.transform = `translate3d(${left}px,${top}px,0)`
this.change({
left,
top
})
}
}
}
// #endif
// #ifdef APP-PLUS|| MP-WEIXIN || H5
export default {}
// #endif
src/components/firstui/fui-notice-bar/fui-notice-bar.vue
......@@ -10,7 +10,7 @@
<view :id="elId_box"
:class="{'fui-notice__content':scrollable,'fui-notice__content-single':!scrollable && single}">
<text ref="animationEle" class="fui-notice__text" :id="elId"
:style="{color:color,fontSize:size+'rpx',lineHeight:scrollable && !isNvue?size+'rpx':'normal',fontWeight:bold?'bold':'normal',width:wrapWidth+'px', 'animationDuration': animationDuration,'-webkit-animationDuration': animationDuration,animationPlayState: webviewHide?'paused':animationPlayState,'-webkit-animationPlayState':webviewHide?'paused':animationPlayState, animationDelay: animationDelay, '-webkit-animationDelay':animationDelay}"
:style="{color:getColor,fontSize:size+'rpx',lineHeight:scrollable && !isNvue?size+'rpx':'normal',fontWeight:bold?'bold':'normal',width:wrapWidth+'px', 'animationDuration': animationDuration,'-webkit-animationDuration': animationDuration,animationPlayState: webviewHide?'paused':animationPlayState,'-webkit-animationPlayState':webviewHide?'paused':animationPlayState, animationDelay: animationDelay, '-webkit-animationDelay':animationDelay}"
:class="{'fui-notice__single':!scrollable && single,'fui-notice__scrollable':scrollable,'fui-notice__text-color':!color && !isNvue}">{{content}}</text>
</view>
</view>
......@@ -43,12 +43,7 @@
},
color: {
type: String,
// #ifdef APP-NVUE
default: '#FF2B2B'
// #endif
// #ifndef APP-NVUE
default: ''
// #endif
},
bold: {
type: Boolean,
......@@ -85,6 +80,18 @@
default: 0
}
},
computed: {
getColor() {
let color = this.color;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.danger) || '#FF2B2B';
}
// #endif
return color;
}
},
data() {
const elId = `fui_${Math.ceil(Math.random() * 10e5).toString(36)}`
const elId_box = `fui_${Math.ceil(Math.random() * 10e5).toString(36)}`
......
src/components/firstui/fui-pagination/fui-pagination.vue
......@@ -10,7 +10,7 @@
</view>
<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>
:style="{color:getCurrentColor,fontSize:pageFontSize+'rpx'}">{{currentIndex}}</text>
<text :class="{'fui-pagination__color':!pageColor}"
:style="{color:pageColor,fontSize:pageFontSize+'rpx'}">/{{maxPage || 0}}</text>
</view>
......@@ -18,7 +18,7 @@
<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'}"
:style="{background:currentIndex===item?getActiveBgColor:pageBgColor,borderRadius:radius+'rpx'}"
@tap.stop="handleClick(item,index)">
<text class="fui-page__num-text" :class="{'fui-pagination__color':!color && currentIndex!==item}"
:style="{color:currentIndex===item?activeColor:pageColor}">{{item}}</text>
......@@ -100,23 +100,21 @@
//当前页码字体颜色
currentColor: {
type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: ''
// #endif
},
//页码字体颜色
// #ifdef APP-NVUE
pageColor: {
type: String,
default: '#333',
},
// #endif
// #ifndef APP-NVUE
pageColor: {
type: String,
// #ifdef APP-NVUE
default: '#333'
// #endif
// #ifndef APP-NVUE
default: ''
// #endif
},
// #endif
//页码字体大小
pageFontSize: {
type: [Number, String],
......@@ -138,12 +136,7 @@
},
activeBgColor: {
type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: ''
// #endif
},
activeColor: {
type: String,
......@@ -169,6 +162,26 @@
maxPage = Math.ceil(total / pageSize)
}
return maxPage
},
getCurrentColor() {
let color = this.currentColor;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color;
},
getActiveBgColor() {
let color = this.activeBgColor;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color;
}
},
watch: {
......
src/components/firstui/fui-picker/fui-picker.vue
......@@ -265,8 +265,15 @@
},
confrimStyl() {
let styles = `font-size:${this.btnSize}rpx;`
if (this.confirmColor) {
styles += `color:${this.confirmColor};`
let color = this.confirmColor;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
if (color) {
styles += `color:${color};`
}
return styles
},
......@@ -318,18 +325,25 @@
this.initialize()
}, 50)
},
// #ifdef APP-NVUE
isShow: {
handler(newVal) {
if (newVal) {
// #ifdef APP-NVUE
this.openPicker();
// #endif
// #ifndef APP-NVUE
this.isInitShow = true;
// #endif
} else {
// #ifdef APP-NVUE
this.closePicker();
// #endif
}
},
immediate: true
},
// #endif
show(val) {
this.isShow = val;
}
......@@ -355,7 +369,8 @@
vKey: 'value',
cKey: 'children',
isEnd: true,
isShow: false
isShow: false,
isInitShow: false
};
},
methods: {
......@@ -553,14 +568,14 @@
this.$nextTick(() => {
setTimeout(() => {
this.vals = vals;
}, 50)
}, 150)
})
} else {
this.vals = []
this.$nextTick(() => {
setTimeout(() => {
this.reset()
}, 50)
}, 150)
})
}
},
......@@ -700,6 +715,7 @@
}, 50)
},
pickerChange(e) {
if (!this.isInitShow) return;
let value = e.detail.value;
if (this.linkage) {
if (this.layer == 1) {
......@@ -952,16 +968,12 @@
color: #D1D1D1;
}
/* #ifndef APP-NVUE */
.fui-pk__sure-color {
/* #ifndef APP-NVUE */
color: var(--fui-color-primary, #465CFF) !important;
/* #endif */
/* #ifdef APP-NVUE */
color: #465CFF;
/* #endif */
}
/* #endif */
.fui-picker__view {
/* #ifndef APP-NVUE */
width: 100%;
......
src/components/firstui/fui-progress/fui-progress.vue
......@@ -4,12 +4,12 @@
:style="{ height: height + 'rpx', borderRadius: radius+'rpx', background: background }">
<!-- #ifndef APP-NVUE -->
<view class="fui-progress__bar" :class="{'fui-progress__active-color':!activeColor}"
:style="{background: activeColor ,transform:`translate3d(-${translateX},0,0)`,transitionDuration:`${time}s`}">
:style="{background: getActiveColor ,transform:`translate3d(-${translateX},0,0)`,transitionDuration:`${time}s`}">
</view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view ref="fui_pg_ani" class="fui-progress__bar" :style="{background: activeColor}"></view>
<view ref="fui_pg_ani" class="fui-progress__bar" :style="{background: getActiveColor}"></view>
<!-- #endif -->
</view>
<text class="fui-progress__percent"
......@@ -66,12 +66,7 @@
//已选进度条颜色,可渐变
activeColor: {
type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: ''
// #endif
},
//进度增加1%所需毫秒数
duration: {
......@@ -87,6 +82,18 @@
mounted() {
this.darwProgress();
},
computed: {
getActiveColor() {
let color = this.activeColor;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color;
}
},
data() {
return {
percentage: 0,
......
src/components/firstui/fui-puzzle-verify/fui-puzzle-verify.vue
......@@ -41,8 +41,8 @@
</view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view ref="sliderRef" class="fui-sc__slider" :class="{'fui-sc__slider-bg':!sliderBgColor}"
:style="{width:(sliderH * 2)+'px',height:sliderH+'px',borderRadius:sliderH+'px',background:sliderBgColor}"
<view ref="sliderRef" class="fui-sc__slider"
:style="{width:(sliderH * 2)+'px',height:sliderH+'px',borderRadius:sliderH+'px',background:getSliderBgColor}"
@touchstart="touchstart" @horizontalpan="touchmove" @touchend="touchend">
<fui-icon name="slide" :size="56" :color="slideColor"></fui-icon>
</view>
......@@ -131,18 +131,10 @@
type: String,
default: '#B2B2B2'
},
// #ifdef APP-NVUE
sliderBgColor: {
type: String,
default: '#465CFF'
},
// #endif
// #ifndef APP-NVUE
sliderBgColor: {
type: String,
default: ''
},
// #endif
slideColor: {
type: String,
default: '#FFFFFF'
......@@ -168,6 +160,18 @@
this.reset()
}
},
computed: {
getSliderBgColor() {
let color = this.sliderBgColor
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color
}
},
data() {
let sys = uni.getSystemInfoSync()
let isNvue = false
......@@ -400,7 +404,7 @@
/* #endif */
/* #ifndef APP-NVUE */
.fui-sc__reset-ani {
.fui-sc__reset-ani {
transition: transform 0.2s;
}
......@@ -412,5 +416,6 @@
.fui-pv__un-ani {
transition: transform 0s;
}
/* #endif */
</style>
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-radio-group/fui-radio-group.vue
<template>
<!-- #ifdef APP-PLUS || H5 || MP-ALIPAY || MP-TOUTIAO -->
<!-- #ifdef APP-PLUS || H5 || MP-ALIPAY || MP-TOUTIAO|| MP-KUAISHOU || MP-JD || MP-360 || MP-LARK -->
<radio-group :name="name">
<slot></slot>
</radio-group>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU || MP-JD || MP-360 || MP-LARK -->
<fui-form-field :name="name" :value="val">
<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ -->
<fui-form-field :name="name" v-model="val">
<slot></slot>
</fui-form-field>
<!-- #endif -->
......@@ -16,10 +16,11 @@
export default {
name: "fui-radio-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: {
......@@ -79,7 +80,7 @@
}
this.radioChange(e)
},
modelChange(val){
modelChange(val) {
this.childrens.forEach(item => {
if (item.value === val) {
item.val = true;
......
src/components/firstui/fui-radio/fui-radio.vue
<template>
<view class="fui-radio__input"
:class="{'fui-radio__disabled':disabled,'fui-radio__color':!color && val && !isCheckMark}"
:class="{'fui-radio__disabled':disabled,'fui-radio__color':!getColor && val && !isCheckMark}"
:style="{backgroundColor:getBackgroundColor(val,isCheckMark),borderColor:getBorderColor(val,isCheckMark),zoom:isNvue?1:scaleRatio,transform:`scale(${isNvue?scaleRatio:1})`,borderRadius:borderRadius}"
@tap.stop="radioChange">
<view class="fui-check__mark" :style="{borderBottomColor:checkMarkColor,borderRightColor:checkMarkColor}"
v-if="val"></view>
<radio class="fui-radio__hidden" style="opacity: 0;position: absolute;" :color="color" :disabled="disabled" :value="value" :checked="val"></radio>
<radio class="fui-radio__hidden" style="opacity: 0;position: absolute;" :color="getColor" :disabled="disabled" :value="value" :checked="val"></radio>
</view>
</template>
......@@ -32,12 +32,7 @@
//radio选中背景颜色
color: {
type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: ''
// #endif
},
//radio未选中时边框颜色
borderColor: {
......@@ -97,6 +92,18 @@
}
}
},
computed: {
getColor() {
let color = this.color;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color;
}
},
data() {
let isNvue = false;
// #ifdef APP-NVUE
......@@ -109,14 +116,14 @@
},
methods: {
getBackgroundColor(val, isCheckMark) {
let color = val ? this.color : '#fff'
let color = val ? this.getColor : '#fff'
if (isCheckMark) {
color = 'transparent'
}
return color;
},
getBorderColor(val, isCheckMark) {
let color = val ? this.color : this.borderColor;
let color = val ? this.getColor : this.borderColor;
if (isCheckMark) {
color = 'transparent'
}
......
src/components/firstui/fui-rate/fui-rate.vue
......@@ -4,7 +4,7 @@
v-for="(item,index) in stars" :key="index" @touchstart.stop="touchstart" @touchmove.stop="touchmove"
@mousedown.stop="mousedown" @mousemove.stop="mousemove" @mouseup="mouseup">
<fui-icon :disabled="disabled" :name="getName(index,intScore,decimalScore)" :size="size"
:color="index < intScore || (index == intScore && decimalScore > 0) ? activeColor : color"></fui-icon>
:color="index < intScore || (index == intScore && decimalScore > 0) ? getActiveColor : color"></fui-icon>
</view>
</view>
</template>
......@@ -36,7 +36,7 @@
},
activeColor: {
type: String,
default: "#FFB703"
default: ""
},
disabled: {
type: Boolean,
......@@ -75,10 +75,21 @@
this.initRateScore(newValue)
}
},
computed: {
getActiveColor() {
let color = this.activeColor;
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.warning) || '#FFB703';
}
return color;
}
},
data() {
return {
stars: [],
pageX: 0,
parentWidth: 0,
intScore: 0,
decimalScore: 0,
isPC: false,
......@@ -88,6 +99,7 @@
created() {
this.initData(this.max)
this.initRateScore(this.score)
this.drawer = this.getParent()
},
mounted() {
setTimeout(() => {
......@@ -141,6 +153,32 @@
return flag;
},
// #endif
_setWidth(width) {
const sys = uni.getSystemInfoSync()
if (this.pageX < 0) {
this.parentWidth = width
} else if (this.pageX > sys.windowWidth) {
this.parentWidth = -width
}
},
setParentWidth(width) {
setTimeout(() => {
this._setWidth(width)
}, 100)
},
initParentWidth() {
if (this.drawer) {
const sys = uni.getSystemInfoSync()
let pWidth = this.drawer.width
if (!pWidth) {
this.drawer._getSize((width) => {
this._setWidth(width)
})
} else {
this._setWidth(pWidth)
}
}
},
_getSize() {
// #ifndef APP-NVUE
uni.createSelectorQuery()
......@@ -152,6 +190,7 @@
.exec(ret => {
if (ret) {
this.pageX = ret[0].left || 0
this.initParentWidth()
}
})
// #endif
......@@ -160,12 +199,13 @@
const size = ret.size
if (size) {
this.pageX = size.left
this.initParentWidth()
}
})
// #endif
},
_getRateScore(clientX) {
const distance = clientX - this.pageX;
const distance = clientX - (this.pageX + this.parentWidth);
let score = 0;
if (distance > 0) {
let width = uni.upx2px((Number(this.size) + Number(this.spacing)));
......@@ -237,6 +277,16 @@
if (!this.isPC || this.disabled || !this.touchable) return
this.rated = false
// #endif
},
getParent(name = 'fui-drawer') {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== name) {
parent = parent.$parent;
if (!parent) return false;
parentName = parent.$options.name;
}
return parent;
}
}
}
......
src/components/firstui/fui-result/fui-result.vue
......@@ -2,7 +2,7 @@
<view class="fui-result__wrap" :style="{paddingTop:paddingTop+'rpx'}" v-if="ibColor">
<view class="fui-result__icon-box">
<view class="fui-result__icon"
:style="{background:background,zoom:isNvue?1:scaleRatio,transform:`scale(${isNvue?scaleRatio:1})`}"
:style="{background:background || getTypeColor,zoom:isNvue?1:scaleRatio,transform:`scale(${isNvue?scaleRatio:1})`}"
:class="[background?'':`fui-result__bg-${type}`]" v-if="show">
<view :class="['fui-result__ib-'+type]" :style="ibColor"></view>
<view :class="['fui-result__ia-'+type]" :style="{background:iconColor}"
......@@ -100,6 +100,21 @@
style = `background:${this.iconColor}`;
}
return style;
},
getTypeColor() {
let color = '';
// #ifdef APP-NVUE
const app = uni && uni.$fui && uni.$fui.color
let colors = {
waiting: (app && app.primary) || '#465CFF',
success: (app && app.success) || '#09BE4F',
warning: (app && app.warning) || '#FFB703',
fail: (app && app.danger) || '#FF2B2B'
}
color = colors[this.type || 'waiting']
// #endif
return color
}
}
}
......@@ -138,42 +153,23 @@
overflow: hidden;
}
/* #ifndef APP-NVUE */
.fui-result__bg-success {
/* #ifdef APP-NVUE */
background-color: #09BE4F !important;
/* #endif */
/* #ifndef APP-NVUE */
background-color: var(--fui-color-success, #09BE4F) !important;
/* #endif */
}
.fui-result__bg-warning {
/* #ifdef APP-NVUE */
background-color: #FFB703 !important;
/* #endif */
/* #ifndef APP-NVUE */
background-color: var(--fui-color-warning, #FFB703) !important;
/* #endif */
}
.fui-result__bg-fail {
/* #ifdef APP-NVUE */
background-color: #FF2B2B !important;
/* #endif */
/* #ifndef APP-NVUE */
background-color: var(--fui-color-danger, #FF2B2B) !important;
/* #endif */
}
.fui-result__bg-waiting {
/* #ifdef APP-NVUE */
background-color: #465CFF !important;
/* #endif */
/* #ifndef APP-NVUE */
background-color: var(--fui-color-primary, #465CFF) !important;
/* #endif */
}
/* #endif */
.fui-result__ib-success {
......
src/components/firstui/fui-rotate-verify/fui-rotate-verify.vue
......@@ -24,7 +24,7 @@
<!-- #endif -->
<view class="fui-rv__result" v-if="showRes || isPass"
:style="{ width: imgW + 'px', height:imgW + 'px',borderRadius:isNvue?(imgW+'px'):'50%' }">
<fui-icon :name="isPass?'check':'close'" :size="96" :color="isPass?passColor:failColor"></fui-icon>
<fui-icon :name="isPass?'check':'close'" :size="96" :color="getColor"></fui-icon>
</view>
</view>
<!-- #ifdef APP-VUE || MP-WEIXIN || H5 -->
......@@ -140,11 +140,11 @@
},
passColor: {
type: String,
default: '#09BE4F'
default: ''
},
failColor: {
type: String,
default: '#FF2B2B'
default: ''
},
zIndex: {
type: [Number, String],
......@@ -168,6 +168,14 @@
this.sliderWidth = this.getPx((Number(val) - 64))
}
},
computed: {
getColor() {
const app = uni && uni.$fui && uni.$fui.color;
let passColor = this.passColor || (app && app.success) || '#09BE4F'
let failColor = this.failColor || (app && app.danger) || '#FF2B2B'
return this.isPass ? passColor : failColor
}
},
data() {
let isNvue = false
// #ifdef APP-NVUE
......
src/components/firstui/fui-search-bar/fui-search-bar.vue
<template>
<view class="fui-search__bar-wrap" :class="{'fui-searchbar__wrap-bg':!background}"
:style="{ background: background, paddingTop: paddingTb+'rpx',paddingBottom:paddingTb+'rpx',paddingLeft:paddingLr+'rpx',paddingRight:paddingLr+'rpx' }">
<slot></slot>
<view class="fui-search__bar-form" :style="{height: height+'rpx'}">
<view class="fui-search__bar-box"
:class="{'fui-searchbar__focus-invalid':!isFocus && !isSearch && showLabel && !disabled}"
:style="{ height: height+'rpx', borderRadius: radius+'rpx', background: inputBackground }"
v-if="showInput">
<view class="fui-search__bar-icon">
......@@ -35,7 +37,7 @@
<text v-if="cancel && isSearch && !val && cancelText && cancelText!=='true'" class="fui-search__bar-btn"
:style="{ color: cancelColor }" @tap="hideInput">{{ cancelText }}</text>
<text v-if="val && !disabled && isSearch && searchText && searchText!=='true'" class="fui-search__bar-btn"
:class="{'fui-sb__btn-color':!searchColor}" :style="{ color: searchColor }"
:class="{'fui-sb__btn-color':!searchColor}" :style="{ color: getSearchColor }"
@tap="search">{{ searchText }}</text>
</view>
</template>
......@@ -124,12 +126,7 @@
},
searchColor: {
type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: ''
// #endif
},
//是否显示搜索输入框
showInput: {
......@@ -171,7 +168,7 @@
// #ifdef APP-NVUE
isFocus(val) {
if (!this.$refs.searchBarRef) return;
this.$nextTick(()=>{
this.$nextTick(() => {
setTimeout(() => {
if (val) {
this.$refs.searchBarRef.focus()
......@@ -182,6 +179,21 @@
// #endif
value(val) {
this.val = val;
if (this.focus || this.val.length > 0) {
this.isSearch = true;
}
}
},
computed: {
getSearchColor() {
let color = this.searchColor
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color
}
},
data() {
......@@ -207,6 +219,10 @@
inputFocus(e) {
if (!this.showLabel) {
this.isSearch = true
} else {
// #ifdef H5 || MP-ALIPAY
this.onShowInput()
// #endif
}
this.$emit('focus', e);
},
......@@ -220,9 +236,11 @@
onShowInput() {
if (!this.disabled && this.showInput) {
this.isSearch = true;
setTimeout(() => {
this.isFocus = true;
}, 20)
this.$nextTick(() => {
setTimeout(() => {
this.isFocus = true;
}, 50)
})
}
this.$emit('click', {});
},
......@@ -294,8 +312,20 @@
flex-direction: row;
z-index: 1;
align-items: center;
/* #ifdef H5 || MP-ALIPAY */
opacity: 1;
/* #endif */
}
/* #ifdef H5 || MP-ALIPAY */
.fui-searchbar__focus-invalid {
position: relative;
opacity: 0;
z-index: 3;
}
/* #endif */
.fui-search__bar-input {
padding: 0 16rpx;
border: 0;
......
src/components/firstui/fui-segmented-control/fui-segmented-control.vue
......@@ -2,11 +2,11 @@
<view class="fui-segmented__control" :class="{'fui-segmented__disabled':disabled}"
:style="{marginTop:marginTop+'rpx',marginBottom:marginBottom+'rpx'}">
<view class="fui-segmented__item" v-for="(item,index) in vals" :key="index"
:style="{borderTopLeftRadius:index===0?radius+'rpx':'0',borderBottomLeftRadius:index===0?radius+'rpx':'0',borderTopRightRadius:index===values.length - 1?radius+'rpx':'0',borderBottomRightRadius:index===values.length - 1?radius+'rpx':'0',borderColor:type==='button'?color:'transparent',background:currentIndex===index && type==='button'?color:'transparent',height:height+'rpx'}"
:style="{borderTopLeftRadius:index===0?radius+'rpx':'0',borderBottomLeftRadius:index===0?radius+'rpx':'0',borderTopRightRadius:index===values.length - 1?radius+'rpx':'0',borderBottomRightRadius:index===values.length - 1?radius+'rpx':'0',borderColor:type==='button'?getColor:'transparent',background:currentIndex===index && type==='button'?getColor:'transparent',height:height+'rpx'}"
:class="{'fui-segmented__first':index===0 && type==='button','fui-seg__item-bg':currentIndex===index && !color && type==='button','fui-seg__item-border':!color && type==='button','fui-segmented__item-border':type==='button'}"
@click="handleClick(index)">
<text
:style="{fontSize:size+'rpx',color:currentIndex===index?activeColor:color,fontWeight:bold && currentIndex===index ?600:400}"
:style="{fontSize:size+'rpx',color:currentIndex===index?activeColor:getColor,fontWeight:bold && currentIndex===index ?600:400}"
:class="{'fui-segmented__disabled':item.disabled,'fui-seg__text-color':!color && currentIndex!==index}">{{item.name}}</text>
<view class="fui-segmented__item-line" v-if="currentIndex===index && type==='text'"
:style="{background:activeColor}"></view>
......@@ -36,13 +36,7 @@
},
color: {
type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: ''
// #endif
},
activeColor: {
type: String,
......@@ -77,6 +71,18 @@
default: 0
}
},
computed:{
getColor(){
let color = this.color
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color
}
},
data() {
return {
currentIndex: 0,
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论