Skip to content

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

feat: firstui 更新到 v1.9.0

上级 28af3870
正在显示 包含 300 行增加 和 95 行删除
src/components/firstui/fui-actionsheet/fui-actionsheet.vue
......@@ -214,7 +214,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]
......@@ -305,11 +306,12 @@
.fui-actionsheet__btn {
/* #ifndef APP-NVUE */
width: 100%;
box-sizing: content-box;
/* #endif */
flex: 1;
height: 100rpx;
/* #ifdef APP-NVUE */
line-height: 100rpx;
flex: 1;
/* #endif */
/* #ifndef APP-NVUE */
display: flex;
......
src/components/firstui/fui-autograph/fui-autograph.vue
......@@ -7,13 +7,19 @@
</gcanvas>
<!-- #endif -->
<!-- #ifndef APP-NVUE || MP-TOUTIAO-->
<!-- #ifndef APP-NVUE || MP-TOUTIAO || MP-QQ-->
<canvas :disable-scroll="!completed" :canvas-id="canvasId" :id="canvasId" @touchstart="onTouchstart"
@touchmove="onTouchmove" @touchend="onTouchend" @touchcancel="onTouchCancel"
:style="{width:w+'px',height:h+'px'}" @mousedown="mousedown" @mousemove="mousemove" @mouseup="mouseup"
@mouseleave="mouseleave"></canvas>
<!-- #endif -->
<!-- #ifdef MP-QQ -->
<canvas :disable-scroll="!completed" canvas-id="canvas_autograph" @touchstart="onTouchstart"
@touchmove="onTouchmove" @touchend="onTouchend" @touchcancel="onTouchCancel"
:style="{width:w+'px',height:h+'px'}" ></canvas>
<!-- #endif -->
<!-- #ifdef MP-TOUTIAO -->
<canvas :disable-scroll="!completed" :canvas-id="canvasId" :id="canvasId" @touchstart="onTouchstart"
@touchmove.stop.prevent="onTouchmove" @touchend="onTouchend" @touchcancel="onTouchCancel"
......@@ -76,16 +82,19 @@
}
},
data() {
// #ifndef MP-WEIXIN
// #ifndef MP-WEIXIN || MP-QQ
const canvasId = `fui_ag_${Math.ceil(Math.random() * 10e5).toString(36)}`
// #endif
// #ifdef MP-QQ
const canvasId = 'canvas_autograph'
// #endif
return {
// #ifdef APP-NVUE
isAndroid: true,
nTop: 0,
nLeft: 0,
// #endif
canvasId:canvasId,
canvasId: canvasId,
w: 300,
h: 200,
completed: false,
......
src/components/firstui/fui-avatar/fui-avatar.vue
......@@ -165,6 +165,8 @@
/* #ifndef APP-NVUE */
display: inline-flex;
overflow: hidden;
flex-shrink: 0;
z-index: 3;
/* #endif */
flex-direction: row;
align-items: center;
......
src/components/firstui/fui-barcode/fui-barcode.vue
......@@ -5,10 +5,15 @@
</gcanvas>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<!-- #ifndef APP-NVUE || MP-QQ -->
<canvas :canvas-id="canvasId" :id="canvasId" :style="{width:w+'px',height:h+'px'}" @longtap="longtap"
@touchstart="touchstart" @touchend="touchend"></canvas>
<!-- #endif -->
<!-- #ifdef MP-QQ -->
<canvas canvas-id="canvas_barcode" :style="{width:w+'px',height:h+'px'}" @longtap="longtap"
@touchstart="touchstart" @touchend="touchend"></canvas>
<!-- #endif -->
</template>
<script>
......@@ -33,6 +38,10 @@
// #ifdef MP-WEIXIN
const canvasId = `fui_bc_${Math.ceil(Math.random() * 10e5).toString(36)}`
// #endif
// #ifdef MP-QQ
const canvasId = 'canvas_barcode'
// #endif
export default {
name: "fui-barcode",
emits: ['ready', 'longclick', 'touchStart', 'touchEnd'],
......@@ -51,7 +60,7 @@
}
},
data() {
// #ifndef MP-WEIXIN
// #ifndef MP-WEIXIN || MP-QQ
const canvasId = `fui_bc_${Math.ceil(Math.random() * 10e5).toString(36)}`
// #endif
return {
......
src/components/firstui/fui-barcode/gcanvas/context-2d/FillStylePattern.js
class FillStylePattern {
constructor(img, pattern) {// 新特性待增加
this._style = pattern;// todo: 待修改
this._img = img;// 新特性待增加
}// todo: 待修改
constructor(img, pattern) {
this._style = pattern;
this._img = img;
}
}
// todo: 待修改
export default FillStylePattern;
src/components/firstui/fui-button/fui-button.vue
......@@ -316,6 +316,7 @@
position: relative;
/* #ifndef APP-NVUE */
background: transparent !important;
flex-direction: row;
/* #endif */
}
......
src/components/firstui/fui-checkbox/fui-checkbox.vue
......@@ -210,6 +210,7 @@
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
pointer-events: none;
/* #endif */
/* #ifdef APP-NVUE */
width: 100wx;
......
src/components/firstui/fui-date-picker/fui-date-picker.vue
......@@ -269,7 +269,7 @@
},
minDate: {
type: String,
default: '2010-01-01'
default: '2020-01-01'
},
maxDate: {
type: String,
......@@ -957,7 +957,6 @@
}, 80)
},
pickerChange(e) {
if (!this.show) return;
let value = e.detail.value;
let type = Number(this.type)
if (type > 1 && type < 6) {
......
src/components/firstui/fui-filter-bar/fui-filter-bar.vue
......@@ -36,6 +36,10 @@
return []
}
},
coexist: {
type: Boolean,
default: false
},
height: {
type: [Number, String],
default: 88
......@@ -97,12 +101,22 @@
let type = item.type;
if (type === 'dropdown') {
this.$set(item, 'active', !item.active);
item.value && this.handleData(index);
item.value && !this.coexist && this.handleData(index);
} else if (type === 'text') {
if (item.active) return;
this.$set(item, 'active', true);
this.$set(item, 'value', item.text);
this.handleData(index);
if (!this.coexist) {
if (item.active) return;
this.$set(item, 'active', true);
this.$set(item, 'value', item.text);
this.handleData(index);
} else {
if (item.active) {
this.$set(item, 'active', false);
this.$set(item, 'value', '');
} else {
this.$set(item, 'active', true);
this.$set(item, 'value', item.text);
}
}
} else if (type === 'switch') {
this.$set(item, 'switch', item.switch === 2 ? 1 : 2);
this.$set(item, 'active', false);
......@@ -114,7 +128,7 @@
this.$set(item, 'sort', 1);
}
this.$set(item, 'value', item.sort === 1 ? 'asc' : 'desc');
this.handleData(index);
!this.coexist && this.handleData(index);
}
setTimeout(() => {
this.$emit('change', {
......
src/components/firstui/fui-form-item/fui-form-item.vue
......@@ -8,9 +8,11 @@
</view>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<view class="fui-form__asterisk" v-if="asterisk" :style="{color:asteriskColor || akColor || '#FF2B2B'}">*</view>
<view class="fui-form__asterisk" v-if="asterisk"
:style="{color:asteriskColor || akColor || '#FF2B2B',left:getAkPosi}">*</view>
<!-- #endif -->
<text :style="{width:getLabelWidth,fontSize:getLabelSize,color:labelColor || lColor || '#333',paddingRight:getLabelRight}"
<text class="fui-form__item-sizing"
:style="{width:getLabelWidth,fontSize:getLabelSize,color:labelColor || lColor || '#333',paddingRight:getLabelRight,textAlign:getLabelAlign}"
v-if="label">{{label}}</text>
<view class="fui-form__item-content">
<slot></slot>
......@@ -70,6 +72,11 @@
type: [Number, String],
default: 0
},
//label 对齐方式：left，right
labelAlign: {
type: String,
default: ''
},
//是否显示必填的红色星号
asterisk: {
type: Boolean,
......@@ -79,6 +86,11 @@
type: String,
default: ''
},
//left,right
asteriskPosition: {
type: String,
default: ''
},
background: {
type: String,
default: '#fff'
......@@ -135,6 +147,19 @@
getLabelRight() {
const labelRight = (uni.$fui && uni.$fui.fuiFormItem && uni.$fui.fuiFormItem.labelRight) || 16
return `${this.labelRight || labelRight}rpx`
},
getLabelAlign() {
const labelAlign = (uni.$fui && uni.$fui.fuiFormItem && uni.$fui.fuiFormItem.labelAlign) || 'left'
return this.labelAlign || this.lAlign || labelAlign
},
getAkPosi() {
const akPosi = (uni.$fui && uni.$fui.fuiFormItem && uni.$fui.fuiFormItem.asteriskPosition) || 'left'
const position = this.asteriskPosition || this.akPosi || akPosi
const lWidth = this.getLabelWidth.replace('rpx', '')
const lRight = this.getLabelRight.replace('rpx', '')
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'
}
},
data() {
......@@ -142,7 +167,9 @@
lSize: 0,
lColor: '',
lWidth: 0,
akColor: ''
lAlign: '',
akColor: '',
akPosi: ''
}
},
created() {
......@@ -155,7 +182,9 @@
this.lSize = this.form.labelSize;
this.lColor = this.form.labelColor;
this.lWidth = this.form.labelWidth;
this.lAlign = this.form.labelAlign;
this.akColor = this.form.asteriskColor;
this.akPosi = this.form.asteriskPosition;
}
},
handleClick() {
......@@ -215,6 +244,13 @@
/* #endif */
}
/* #ifndef APP-NVUE */
.fui-form__item-sizing {
box-sizing: border-box;
}
/* #endif */
.fui-form__item-content {
flex: 1;
}
......
src/components/firstui/fui-form/fui-form.vue
......@@ -3,7 +3,7 @@
: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:ridus+'rpx'}"
: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
class="fui-form__text" :style="{fontSize:size+'rpx',color:color}">{{errorMsg}}</text></view>
<view class="fui-form__mask" v-if="disabled"></view>
......@@ -71,7 +71,7 @@
default: '#fff'
},
//错误提示框圆角值
ridus: {
radius: {
type: [Number, String],
default: 16
},
......@@ -94,10 +94,20 @@
type: [Number, String],
default: 0
},
//label 对齐方式：left，right
labelAlign:{
type: String,
default: 'left'
},
// form-item 必填项星号颜色
asteriskColor: {
type: String,
default: '#FF2B2B'
},
//left,right
asteriskPosition:{
type: String,
default: ''
}
},
provide() {
......
src/components/firstui/fui-index-list/fui-index-list.vue
......@@ -6,60 +6,93 @@
<slot></slot>
</cell>
<!-- #ifdef VUE2 -->
<template v-for="(list, idx) in lists">
<header :ref="'fui_il_letter_' + idx">
<view class="fui-index__list-letter" :class="{'fui-il__key-bg':!background}"
:style="{background:background}">
<text class="fui-il__letter-text" :style="{color:color}">{{list.descr || list.letter}}</text>
</view>
</header>
<cell :key="list.key">
<!-- #endif -->
<!-- #ifdef VUE3 -->
<template v-for="(list, idx) in lists" :key="list.key">
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<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">
<header :ref="'fui_il_letter_' + idx">
<view class="fui-index__list-letter" :class="{'fui-il__key-bg':!background}"
:style="{background:background}">
<text class="fui-il__letter-text"
:style="{color:color}">{{list.descr || list.letter}}</text>
</view>
</header>
<!-- #ifdef VUE2 -->
<cell :key="list.key">
<!-- #endif -->
<!-- #ifdef VUE3 -->
<cell>
<!-- #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"
:style="{color:color}">{{list.descr || list.letter}}</text>
</view>
<!-- #endif -->
<!-- 解构插槽 item项样式内容自定义 -->
<view v-if="custom">
<view v-for="(model,index) in list.data" :key="index" @tap="onTap(idx,index)">
<slot name="item" :model="model" :idx="idx" :index="index"
:last="list.data.length-1===index" :isSelect="isSelect" :isSrc="isSrc"
:subRight="subRight"></slot>
</view>
</view>
<view v-else>
<f-index-list-item @itemClick="onClick" :model="model" :idx="idx" :index="index"
:last="list.data.length-1===index" :isSelect="isSelect" :borderColor="borderColor"
:selectedColor="selectedColor" :isSrc="isSrc" :subRight="subRight"
v-for="(model,index) in list.data" :key="index">
</f-index-list-item>
</view>
<!-- #ifndef APP-NVUE -->
</view>
<slot name="footer"></slot>
</scroll-view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<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"
:style="{color:color}">{{list.descr || list.letter}}</text>
</view>
<!-- #endif -->
<!-- 解构插槽 item项样式内容自定义 -->
<view v-if="custom">
<view v-for="(model,index) in list.data" :key="index" @tap="onTap(idx,index)">
<slot name="item" :model="model" :idx="idx" :index="index"
:last="list.data.length-1===index" :isSelect="isSelect" :isSrc="isSrc"
:subRight="subRight"></slot>
</view>
</view>
<view v-else>
<f-index-list-item @itemClick="onClick" :model="model" :idx="idx" :index="index"
:last="list.data.length-1===index" :isSelect="isSelect"
:borderColor="borderColor" :selectedColor="selectedColor" :isSrc="isSrc"
:subRight="subRight" v-for="(model,index) in list.data" :key="index">
</f-index-list-item>
</view>
<!-- #ifndef APP-NVUE -->
</view>
<slot name="footer"></slot>
</scroll-view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
</cell>
</template>
<cell>
<slot name="footer"></slot>
</cell>
</template>
<cell>
<slot name="footer"></slot>
</cell>
</list>
<!-- #endif -->
<!-- #ifndef VUE3 -->
<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 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 -->
<!-- #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 -->
<view class="fui-index__letter" :style="styles" @touchstart="touchStart" @touchmove.stop.prevent="touchMove"
@touchend="touchEnd" @mousedown.stop="mousedown" @mousemove.stop.prevent="mousemove"
@mouseleave.stop="mouseleave" v-if="!isNvue || styles">
......@@ -282,7 +315,13 @@
}
this.idtHeight = height;
this.styles = `height:${height}rpx;`;
//nvue vue3 rpx 失效
// #ifdef APP-NVUE
// #ifdef VUE3
this.idtHeight = uni.upx2px(height)
this.styles = `height:${this.idtHeight}px;`;
// #endif
// #endif
this.lists = lists;
// #ifndef APP-NVUE
uni.createSelectorQuery()
......@@ -310,8 +349,15 @@
},
setStyles() {
this.indicators = []
this.styles =
`height:${this.idtHeight}rpx;top:${this.winHeight / 2}px;-webkit-transform: translateY(-${this.idtHeight/2}rpx);transform: translateY(-${this.idtHeight/2}rpx)`
// #ifdef APP-NVUE
// #ifdef VUE3
this.styles =
`height:${this.idtHeight}px;top:${this.winHeight / 2}px;-webkit-transform: translateY(-${this.idtHeight/2}px);transform: translateY(-${this.idtHeight/2}px)`
// #endif
// #endif
let start = this.winHeight / 2 - uni.upx2px(this.idtHeight) / 2
this.start = start;
this.lists.forEach((item, index) => {
......
src/components/firstui/fui-picker/fui-picker.vue
......@@ -145,7 +145,7 @@
default: false
},
value: {
type: [Array, String],
type: [Array, String, Number],
default () {
return []
}
......@@ -536,10 +536,10 @@
vals.push(this.fourthArr.indexOf(values[i]))
}
}
this.$nextTick(()=>{
setTimeout(()=>{
this.$nextTick(() => {
setTimeout(() => {
this.vals = vals;
},20)
}, 20)
})
} else {
this.reset()
......
src/components/firstui/fui-poster-weex/gcanvas/env/image.js
......@@ -9,8 +9,8 @@ class GImage {
constructor() {
this._id = incId++;
this._width = 0;
this._height = 0;// echo建议
this._src = undefined;// 功能需要优化
this._height = 0;
this._src = undefined;
this._onload = noop;
this._onerror = noop;
this.complete = false;
......@@ -41,10 +41,10 @@ class GImage {
v = 'http:' + v;
}
this._src = v;// 新特性待增加
// 功能需要优化
this._src = v;
GImage.GBridge.perloadImage([this._src, this._id], (data) => {
if (typeof data === 'string') {// echo建议
if (typeof data === 'string') {
data = JSON.parse(data);
}
if (data.error) {
......
src/components/firstui/fui-poster/fui-poster.vue
<template>
<!-- #ifndef MP-QQ -->
<canvas :style="{ width: w + 'px', height: h + 'px' }" :canvas-id="canvasId" :id="canvasId"
class="fui-poster__canvas"></canvas>
<!-- #endif -->
<!-- #ifdef MP-QQ -->
<canvas :style="{ width: w + 'px', height: h + 'px' }" canvas-id="canvas_poster"
class="fui-poster__canvas"></canvas>
<!-- #endif -->
</template>
<script>
//注意：h5、app-vue 中单个尺寸过大的 canvas 在 iOS/Safari 无法绘制（具体限制尺寸未公布）
import poster from './index.js';
// #ifdef MP-WEIXIN
const canvasId = `fui_${Math.ceil(Math.random() * 10e5).toString(36)}`
// #endif
//注意：h5、app-vue 中单个尺寸过大的 canvas 在 iOS/Safari 无法绘制（具体限制尺寸未公布）
import poster from './index.js';
export default {
name: "fui-poster",
emits: ['ready'],
......@@ -36,9 +43,13 @@
},
data() {
//如果小程序端无法识别，则使用固定值
// #ifndef MP-WEIXIN
// #ifndef MP-WEIXIN || MP-QQ
const canvasId = `fui_${Math.ceil(Math.random() * 10e5).toString(36)}`
// #endif
//vue3下QQ小程序无法使用动态id
// #ifdef MP-QQ
const canvasId = 'canvas_poster'
// #endif
return {
canvasId,
w: 375,
......
src/components/firstui/fui-poster/index.js
/*!
* 生成海报
* poster - v1.0.0 (2021/7/19, 16:52:14 PM)
* poster - v1.8.0 (2023/02/02, 16:52:14 PM)
*
*
* 官网地址：https://firstui.cn/
* 文档地址：https://doc.firstui.cn/
......
src/components/firstui/fui-qrcode/fui-qrcode.vue
......@@ -5,10 +5,15 @@
</gcanvas>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<!-- #ifndef APP-NVUE || MP-QQ -->
<canvas :canvas-id="canvasId" :id="canvasId" :style="{width:w+'px',height:h+'px'}" @longtap="longtap"
@touchstart="touchstart" @touchend="touchend"></canvas>
<!-- #endif -->
<!-- #ifdef MP-QQ -->
<canvas canvas-id="canvas_qrcode" :style="{width:w+'px',height:h+'px'}" @longtap="longtap" @touchstart="touchstart"
@touchend="touchend"></canvas>
<!-- #endif -->
</template>
<script>
......@@ -45,6 +50,10 @@
// #ifdef MP-WEIXIN
const canvasId = `fui_qr_${Math.ceil(Math.random() * 10e5).toString(36)}`
// #endif
// #ifdef MP-QQ
const canvasId = 'canvas_qrcode'
// #endif
export default {
name: "fui-qrcode",
emits: ['ready', 'longclick', 'touchStart', 'touchEnd'],
......@@ -71,7 +80,7 @@
}
},
data() {
// #ifndef MP-WEIXIN
// #ifndef MP-WEIXIN || MP-QQ
const canvasId = `fui_qr_${Math.ceil(Math.random() * 10e5).toString(36)}`
// #endif
return {
......
src/components/firstui/fui-radio/fui-radio.vue
......@@ -207,6 +207,7 @@
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
pointer-events: none;
/* #endif */
/* #ifdef APP-NVUE */
width: 100wx;
......
src/components/firstui/fui-row/fui-row.vue
......@@ -131,9 +131,11 @@
align-items: flex-end;
}
/* #ifndef APP-NVUE */
.fui-row__before {
display: table
}
/* #endif */
.fui-row__end {
justify-content: flex-end;
......
src/components/firstui/fui-single-input/fui-single-input.vue
......@@ -17,9 +17,16 @@
</view>
</view>
</view>
<input :value="val" :password="password" :type="type" class="fui-sinput__hidden"
<!-- #ifdef APP-NVUE -->
<input ref="inputRef" :value="val" :password="password" :type="type" class="fui-sinput__hidden"
:class="{'fui-sinput__alizero':aliZero}" @input="onInput" @blur="onBlur" :maxlength="length"
v-if="native" :disabled="disabled" @confirm="onConfirm" @focus="onTap" />
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<input ref="inputRef" :value="val" :password="password" :type="type" class="fui-sinput__hidden"
:class="{'fui-sinput__alizero':aliZero}" @input="onInput" @blur="onBlur" :focus="focus" :maxlength="length"
v-if="native" :disabled="disabled" @confirm="onConfirm" @focus="onTap" />
<!-- #endif -->
</view>
</template>
......@@ -195,6 +202,13 @@
this._animation(ref)
}
},
focus(val){
if(val){
this.$refs.inputRef.focus()
}else{
this.$refs.inputRef.blur()
}
},
// #endif
isFocus(val) {
this.initFocus(val)
......
src/components/firstui/fui-tabs/fui-tabs.vue
......@@ -9,10 +9,12 @@
<view class="fui-tabs__text-wrap"
:class="{'fui-tabs__wrap-disabled':tab.disabled,'fui-tabs__item-column':direction==='column' && tab.icon}"
:style="{height:height+'rpx'}">
<view class="fui-tabs__ac-line"
:class="{'fui-tabs__line-short':short,'fui-tabs__slider-color':!sliderBackground}"
:style="{height:sliderHeight+'rpx',background:sliderBackground,borderRadius:sliderRadius==-1?sliderHeight+'rpx':sliderRadius+'rpx',bottom:bottom +'rpx',left:`-${padding}rpx`,right:`-${padding}rpx`,transform: `scale(${tabIndex===index?(isNvue?1:scale):(isNvue?0.00001:0)})`}"
v-if="isSlider">
<view class="fui-tabs__line-wrap" :class="{'fui-tabs__line-center':center}"
:style="{bottom:bottom +'rpx',left:`-${padding}rpx`,right:`-${padding}rpx`}" v-if="isSlider">
<view class="fui-tabs__ac-line"
:class="{'fui-tabs__line-short':short,'fui-tabs__full':!short,'fui-tabs__slider-color':!sliderBackground}"
:style="{height:sliderHeight+'rpx',background:sliderBackground,borderRadius:sliderRadius==-1?sliderHeight+'rpx':sliderRadius+'rpx',transform: `scale(${tabIndex===index?(isNvue?1:scale):(isNvue?0.00001:0)})`}">
</view>
</view>
<image class="fui-tabs__icon" :class="{'fui-tabs__icon-column':direction==='column'}"
:src="tabIndex===index && tab.selectedIcon?tab.selectedIcon:tab.icon" v-if="tab.icon">
......@@ -196,6 +198,11 @@
type: Boolean,
default: true
},
//滑块是否居中显示
center: {
type: Boolean,
default: false
},
//是否固定
isFixed: {
type: Boolean,
......@@ -235,7 +242,7 @@
}
},
watch: {
tabs(vals){
tabs(vals) {
this.initData(vals)
},
current(newVal, oldVal) {
......@@ -462,10 +469,22 @@
z-index: 10;
}
.fui-tabs__ac-line {
.fui-tabs__line-wrap {
position: absolute;
border-radius: 2px;
z-index: 2;
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
.fui-tabs__line-center {
justify-content: center;
}
.fui-tabs__ac-line {
transition: transform 0.2s linear;
}
......@@ -473,6 +492,10 @@
width: 45rpx !important;
}
.fui-tabs__line-center {
left: 0;
}
/* #ifndef APP-NVUE */
.fui-tabs__selected-color {
color: var(--fui-color-primary, #465CFF) !important;
......
src/components/firstui/fui-textarea/fui-textarea.vue
<template>
<view :class="{'fui-textarea__border':textareaBorder}" :style="{marginTop:marginTop+'rpx',borderColor:borderColor}"
@tap="fieldClick">
<view :class="{'fui-textarea__border':textareaBorder && !isRadius}"
:style="{marginTop:marginTop+'rpx',borderColor:borderColor}" @tap="fieldClick">
<view class="fui-textarea__wrap" :class="{'fui-textarea__flex-start':flexStart}"
:style="{paddingTop:padding[0] || 0,paddingRight:padding[1] || 0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0,backgroundColor:backgroundColor}">
<view v-if="borderTop && !textareaBorder"
:style="{paddingTop:padding[0] || 0,paddingRight:padding[1] || 0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0,backgroundColor:backgroundColor,borderRadius:radius+'rpx'}">
<view v-if="borderTop && !textareaBorder && !isRadius"
:style="{background:borderColor,left:topLeft+'rpx',right:topRight+'rpx'}"
class="fui-textarea__border-top">
</view>
......@@ -39,7 +39,7 @@
</view>
</view>
<slot></slot>
<view v-if="borderBottom && !textareaBorder"
<view v-if="borderBottom && !textareaBorder && !isRadius"
:style="{background:borderColor,left:bottomLeft+'rpx',right:bottomRight+'rpx'}"
class="fui-textarea__border-bottom"></view>
</view>
......@@ -240,6 +240,10 @@
type: String,
default: '#eaeef1'
},
radius: {
type: [String, Number],
default: 0
},
// 是否自动去除两端的空格
trim: {
type: Boolean,
......@@ -287,7 +291,8 @@
placeholderStyl: '',
count: 0,
focused: false,
val: ''
val: '',
isRadius: false
};
},
watch: {
......@@ -308,6 +313,13 @@
value(newVal) {
this.val = this.getVal(newVal)
this.count = this.getCount(String(this.val).length)
},
radius(val) {
if (this.radius && this.radius !== true && Number(this.radius) > 0) {
this.isRadius = true
} else {
this.isRadius = false
}
}
},
created() {
......@@ -326,6 +338,9 @@
this.fieldPlaceholderStyle()
},
mounted() {
if (this.radius && this.radius !== true && Number(this.radius) > 0) {
this.isRadius = true
}
this.$nextTick(() => {
this.focused = this.focus
})
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论