提交 030f062c 作者: 方治民

合并分支 '3.x' 到 'main'

3.x

查看合并请求 !71
......@@ -103,17 +103,17 @@
"@antfu/eslint-config": "^0.43.1",
"@commitlint/cli": "^19.5.0",
"@commitlint/config-conventional": "^19.5.0",
"@dcloudio/types": "^3.4.12",
"@dcloudio/types": "^3.4.14",
"@dcloudio/uni-automator": "3.0.0-4020920240930001",
"@dcloudio/uni-cli-shared": "3.0.0-4020920240930001",
"@dcloudio/uni-helper-json": "^1.0.13",
"@dcloudio/uni-stacktracey": "3.0.0-4020920240930001",
"@dcloudio/uni-uts-v1": "3.0.0-4020920240930001",
"@dcloudio/vite-plugin-uni": "3.0.0-4020920240930001",
"@iconify/json": "^2.2.261",
"@iconify/json": "^2.2.262",
"@types/crypto-js": "^4.2.2",
"@types/lodash-es": "^4.17.12",
"@types/node": "^20.16.12",
"@types/node": "^20.16.13",
"@types/qs": "^6.9.16",
"@types/stompjs": "^2.3.9",
"@types/urijs": "^1.19.25",
......@@ -129,7 +129,7 @@
"eslint": "^8.57.1",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-vue": "^9.29.0",
"eslint-plugin-vue": "^9.29.1",
"husky": "^8.0.3",
"jest": "27.0.4",
"jest-environment-node": "27.5.1",
......@@ -143,7 +143,7 @@
"postcss-less": "^6.0.0",
"prettier": "^3.3.3",
"rimraf": "^6.0.1",
"sass": "^1.80.2",
"sass": "^1.80.3",
"sort-package-json": "^2.10.1",
"stylelint": "^16.10.0",
"stylelint-config-html": "^1.1.0",
......
......@@ -171,3 +171,11 @@ page {
.fui-flex__1 {
flex: 1;
}
.fui-full {
width: 750rpx;
}
.fui-relative {
position: relative;
}
......@@ -10,11 +10,11 @@
:style="{fontSize:size+'rpx',color:color}" v-if="tips">{{tips}}</text>
<view :class="{'fui-actionsheet__operate-box':isCancel}">
<text class="fui-actionsheet__btn"
:style="{color:theme==='dark'?(item.darkColor || '#D1D1D1'):(item.color || '#181818'),fontSize:itemSize+'rpx'}"
:style="{color:theme==='dark'?(item.darkColor || itemDarkColor):(item.color || itemColor),fontSize:(item.size || itemSize)+'rpx'}"
:class="{'fui-actionsheet__btn-last':!isCancel && index==vals.length-1,'fui-as__safe-weex':!isCancel && index==vals.length-1 && iphoneX && safeArea,'fui-actionsheet__radius':radius && !tips && index===0,'fui-as__divider-light':(index!==0 || tips) && theme==='light','fui-as__divider-dark':(index!==0 || tips) && theme==='dark' ,'fui-as__btn-light':theme==='light','fui-as__btn-dark':theme==='dark'}"
v-for="(item,index) in vals" :key="index" @tap="handleClickItem(index)">{{item.text}}</text>
v-for="(item,index) in vals" :key="index" @tap="handleClickItem(index)">{{item[textKey]}}</text>
</view>
<text :style="{color:theme==='dark'?'#D1D1D1':'#181818',fontSize:itemSize+'rpx'}"
<text :style="{color:theme==='dark'?itemDarkColor:itemColor,fontSize:(cancelSize || itemSize)+'rpx'}"
class="fui-actionsheet__btn fui-actionsheet__cancel"
:class="{'fui-as__safe-weex':iphoneX && safeArea,'fui-as__btn-light':theme==='light','fui-as__btn-dark':theme==='dark'}"
v-if="isCancel" @tap="handleClickCancel">取消</text>
......@@ -42,11 +42,25 @@
return []
}
},
textKey: {
type: String,
default: 'text'
},
//菜单按钮字体大小 rpx
itemSize: {
type: [Number, String],
default: 32
},
//v2.4.0+
itemColor: {
type: String,
default: '#181818'
},
//v2.4.0+
itemDarkColor: {
type: String,
default: '#D1D1D1'
},
//提示信息
tips: {
type: String,
......@@ -72,6 +86,11 @@
type: Boolean,
default: true
},
//v2.4.0+
cancelSize: {
type: [Number, String],
default: 32
},
//light/dark
theme: {
type: String,
......@@ -138,7 +157,7 @@
if (typeof vals[0] !== 'object') {
vals = vals.map(item => {
return {
text: item
[this.textKey]: item
}
})
}
......@@ -210,12 +229,13 @@
//34px
const res = uni.getSystemInfoSync();
let iphonex = false;
let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax',
'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini',
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini',
'iphone14pro', 'iphone14promax', 'iphone15', 'iphone15mini',
'iphone15pro', 'iphone15promax'
]
let models = ['iphonex', 'iphonexr', 'iphonexsmax']
for (let i = 11; i < 20; i++) {
models.push(`iphone${i}`)
models.push(`iphone${i}mini`)
models.push(`iphone${i}pro`)
models.push(`iphone${i}promax`)
}
const model = res.model.replace(/\s/g, "").toLowerCase()
const newModel = model.split('<')[0]
if (models.includes(model) || models.includes(newModel) || (res.safeAreaInsets && res.safeAreaInsets
......
......@@ -171,6 +171,7 @@
flex-direction: row;
align-items: center;
justify-content: center;
vertical-align: middle;
}
.fui-avatar__img {
......
<template>
<view class="fui-background__image-wrap"
:style="{position:absolute?'absolute':'fixed',background:background,zIndex:zIndex}">
<image :src="src" class="fui-background__image" :mode="aspectFill?'aspectFill':'scaleToFill'" v-if="src!=''">
</image>
<slot></slot>
</view>
</template>
<script>
export default {
name: "fui-background-image",
props: {
src: {
type: String,
default: ''
},
background: {
type: String,
default: 'transparent'
},
zIndex: {
type: [Number, String],
default: -1
},
aspectFill: {
type: Boolean,
default: true
},
absolute: {
type: Boolean,
default: false
}
}
}
</script>
<style>
.fui-background__image-wrap {
/* #ifndef APP-NVUE */
width: 100%;
height: 100%;
/* #endif */
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.fui-background__image {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
/* #ifndef APP-NVUE */
width: 100%;
height: 100%;
display: block;
/* #endif */
}
</style>
......@@ -89,7 +89,13 @@ EAN13 = (function() {
if (this.ctx) {
context = this.ctx;
this.clear(context);
// #ifndef MP-WEIXIN
context.setFillStyle(this.settings.color);
// #endif
// #ifdef MP-WEIXIN
context.fillStyle = this.settings.color;
// #endif
left = this.settings.number && this.settings.prefix ? this.settings.width * layout.prefix_offset : 0;
lines = code.split("");
context.fillRect(left, 0, item_width, border_height);
......@@ -121,7 +127,12 @@ EAN13 = (function() {
left = left + item_width * 2;
context.fillRect(left, 0, item_width, border_height);
if (this.settings.number) {
// #ifndef MP-WEIXIN
context.setFontSize(layout.font_size * height + "px monospace");
// #endif
// #ifdef MP-WEIXIN
context.font = layout.font_size * height + "px monospace"
// #endif
prefix = this.number.substr(0, 1);
if (this.settings.prefix) {
context.fillText(prefix, 0, border_height * layout.font_y);
......@@ -143,11 +154,19 @@ EAN13 = (function() {
for (x = _i = 0, _ref = item_width * 2; _ref > 0 ? _i <= width : _i >= width; x = _i += _ref) {
context.beginPath();
context.rect(x, height * 0.4, item_width, height * 0.1);
// #ifndef MP-WEIXIN
context.setFillStyle('red');
// #endif
// #ifdef MP-WEIXIN
context.fillStyle = 'red';
// #endif
context.fill();
}
}
// #ifndef MP-WEIXIN
context.draw()
// #endif
return this.settings.onSuccess.call();
} else {
return this.settings.onError.call();
......
......@@ -5,19 +5,30 @@
</gcanvas>
<!-- #endif -->
<!-- #ifndef APP-NVUE || MP-QQ -->
<canvas :canvas-id="canvasId" :id="canvasId" :style="{width:w+'px',height:h+'px'}" @longtap="longtap"
@touchstart="touchstart" @touchend="touchend" v-if="canvasId"></canvas>
<!-- #endif -->
<!-- #ifdef MP-QQ -->
<canvas canvas-id="canvas_barcode" :style="{width:w+'px',height:h+'px'}" @longtap="longtap" @touchstart="touchstart"
@touchend="touchend"></canvas>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<canvas type="2d" :canvas-id="canvasId" :id="canvasId" :style="{width:w+'px',height:h+'px'}" @longtap="longtap"
@touchstart="touchstart" @touchend="touchend" v-if="canvasId"></canvas>
<!-- #endif -->
<!-- #ifndef APP-NVUE || MP-QQ || MP-WEIXIN -->
<canvas :canvas-id="canvasId" :id="canvasId" :style="{width:w+'px',height:h+'px'}" @longtap="longtap"
@touchstart="touchstart" @touchend="touchend" v-if="canvasId"></canvas>
<!-- #endif -->
</template>
<script>
import barcode from './barcode.js'
import {
code128
} from './barcode-code128.js';
// #ifdef APP-NVUE
import {
......@@ -57,6 +68,11 @@
value: {
type: [Number, String],
default: ''
},
//条形码类型:1-EAN-13 2-Code 128
type: {
type: [Number, String],
default: 1
}
},
data() {
......@@ -79,8 +95,8 @@
}
},
created() {
this.w = uni.upx2px(this.width || 480)
this.h = uni.upx2px(this.height || 200)
this.w = Math.round(uni.upx2px(this.width || 480))
this.h = Math.round(uni.upx2px(this.height || 200))
this.ctx = null;
},
mounted() {
......@@ -103,7 +119,31 @@
},
// #endif
methods: {
draw(options = {}) {
// #ifdef MP-WEIXIN
getContext(callback) {
const query = uni.createSelectorQuery().in(this)
query.select(`#${this.canvasId}`)
.fields({
node: true,
size: true
})
.exec((res) => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
this.ctx = ctx;
callback && callback()
})
},
// #endif
drawBarcode(options) {
// #ifdef MP-WEIXIN
this.ctx.clearRect(0, 0, this.w, this.h);
// #endif
if (!this.ctx) {
// #ifdef APP-NVUE
let ganvas = this.$refs[this.canvasId];
......@@ -115,15 +155,35 @@
this.ctx = canvasObj.getContext('2d');
// #endif
// #ifndef APP-NVUE
// #ifndef APP-NVUE || MP-WEIXIN
this.ctx = uni.createCanvasContext(this.canvasId, this)
// #endif
}
if (this.type == 1) {
const opts = Object.assign({}, this.defalutOptions, options)
new barcode(String(this.value), Object.assign({
width: this.w,
height: this.h
}, opts), this.ctx)
} else {
code128(this.ctx, String(this.value), this.w, this.h)
}
},
draw(options = {}) {
// #ifdef MP-WEIXIN
if (!this.ctx) {
this.getContext(() => {
this.drawBarcode(options)
})
} else {
this.drawBarcode(options)
}
// #endif
// #ifndef MP-WEIXIN
this.drawBarcode(options)
// #endif
},
longtap() {
this.$emit('longclick', {})
......
......@@ -6,13 +6,13 @@ class FillStyleLinearGradient {
this._stop_count = 0;
this._stops = [0, 0, 0, 0, 0];
}
// 新特性待增加
addColorStop = function (pos, color) {// 2021-5-6变更
addColorStop = function (pos, color) {
if (this._stop_count < 5 && 0.0 <= pos && pos <= 1.0) {
this._stops[this._stop_count] = { _pos: pos, _color: color };
this._stop_count++;// echo建议
}// todo: 待修改
this._stop_count++;
}
}
}
// 2021-5-6变更
export default FillStyleLinearGradient;
......@@ -146,11 +146,13 @@
isPhoneX(res) {
if (!this.safeArea) return false;
let iphonex = false;
let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax',
'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini',
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini',
'iphone14pro', 'iphone14promax', 'iphone15'
]
let models = ['iphonex', 'iphonexr', 'iphonexsmax']
for (let i = 11; i < 20; i++) {
models.push(`iphone${i}`)
models.push(`iphone${i}mini`)
models.push(`iphone${i}pro`)
models.push(`iphone${i}promax`)
}
const model = res.model.replace(/\s/g, "").toLowerCase()
const newModel = model.split('<')[0]
if (models.includes(model) || models.includes(newModel) || (res.safeAreaInsets && res.safeAreaInsets
......
<template>
<view class="fui-bottom__popup-wrap" :class="{'fui-bottom__popwrap-show':show}"
:style="{ zIndex: zIndex,background:maskBackground}" @tap.stop="handleClose" @touchmove.stop.prevent="stop"
v-if="isShow || !isNvue" ref="fui_bp_mk_ani">
:style="{ zIndex: zIndex,background:maskBackground}" @tap.stop="handleClose" v-if="isShow || !isNvue"
ref="fui_bp_mk_ani">
<!-- @touchmove.stop.prevent="stop" -->
<!-- #ifdef APP-NVUE -->
<view class="fui-bottom__popup-border" :style="{height:radius+'rpx',background: background}" v-if="radius">
</view>
......@@ -102,11 +103,13 @@
//34px
const res = uni.getSystemInfoSync();
let iphonex = false;
let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax',
'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini',
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini',
'iphone14pro', 'iphone14promax'
]
let models = ['iphonex', 'iphonexr', 'iphonexsmax']
for (let i = 11; i < 20; i++) {
models.push(`iphone${i}`)
models.push(`iphone${i}mini`)
models.push(`iphone${i}pro`)
models.push(`iphone${i}promax`)
}
const model = res.model.replace(/\s/g, "").toLowerCase()
const newModel = model.split('<')[0]
if (models.includes(model) || models.includes(newModel) || (res.safeAreaInsets && res.safeAreaInsets
......
......@@ -22,9 +22,16 @@
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">
:hoverStopPropagation="hoverStopPropagation" :lang="lang" :sessionFrom="sessionFrom"
:sendMessageTitle="sendMessageTitle" :sendMessagePath="sendMessagePath" :sendMessageImg="sendMessageImg"
:showMessageCard="showMessageCard" :groupId="groupId" :guildId="guildId" :publicId="publicId"
:dataImId="dataImId" :dataImType="dataImType" :dataGoodsId="dataGoodsId" :dataOrderId="dataOrderId"
:dataBizLine="dataBizLine" :phoneNumberNoQuotaToast="phoneNumberNoQuotaToast" @getuserinfo="bindgetuserinfo"
@getphonenumber="bindgetphonenumber" @contact="bindcontact" @error="binderror"
@opensetting="bindopensetting" @chooseavatar="bindchooseavatar" @launchapp="bindlaunchapp"
@agreeprivacyauthorization="agreeprivacyauthorization" @addgroupapp="addgroupapp"
@chooseaddress="chooseaddress" @chooseinvoicetitle="chooseinvoicetitle" @subscribe="bindsubscribe"
@login="bindlogin" @im="bindim" :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" :style="{fontSize: getSize,lineHeight:getSize,color:getColor}">{{text}}</text>
......@@ -42,11 +49,20 @@
<script>
export default {
name: 'fui-button',
emits: ['click', 'getuserinfo', 'contact', 'getphonenumber', 'error', 'opensetting','chooseavatar','launchapp'],
emits: ['click', 'getuserinfo', 'contact', 'getphonenumber', 'error', 'opensetting', 'chooseavatar', 'launchapp',
'agreeprivacyauthorization', 'addgroupapp', 'chooseaddress', 'chooseinvoicetitle', 'subscribe', 'login',
'im'
],
// #ifdef MP-WEIXIN
behaviors: ['wx://form-field-button'],
// #endif
// #ifdef MP-BAIDU || MP-QQ
// #ifdef MP-BAIDU
behaviors: ['swan://form-field'],
// #endif
// #ifdef MP-QQ
behaviors: ['qq://form-field'],
// #endif
// #ifdef H5
behaviors: ['uni://form-field'],
// #endif
props: {
......@@ -162,6 +178,71 @@
type: String,
default: ''
},
//v2.3.0+
hoverStopPropagation: {
type: Boolean,
default: false
},
lang: {
type: String,
default: 'en'
},
sessionFrom: {
type: String,
default: ''
},
sendMessageTitle: {
type: String,
default: ''
},
sendMessagePath: {
type: String,
default: ''
},
sendMessageImg: {
type: String,
default: ''
},
showMessageCard: {
type: Boolean,
default: false
},
phoneNumberNoQuotaToast: {
type: Boolean,
default: true
},
groupId: {
type: String,
default: ''
},
guildId: {
type: String,
default: ''
},
publicId: {
type: String,
default: ''
},
dataImId: {
type: String,
default: ''
},
dataImType: {
type: String,
default: ''
},
dataGoodsId: {
type: String,
default: ''
},
dataOrderId: {
type: String,
default: ''
},
dataBizLine: {
type: String,
default: ''
},
index: {
type: [Number, String],
default: 0
......@@ -354,6 +435,28 @@
detail = {}
} = {}) {
this.$emit('launchapp', detail);
},
//v2.3.0+
agreeprivacyauthorization(e) {
this.$emit('agreeprivacyauthorization', e);
},
addgroupapp(e) {
this.$emit('addgroupapp', e);
},
chooseaddress(e) {
this.$emit('chooseaddress', e);
},
chooseinvoicetitle(e) {
this.$emit('chooseinvoicetitle', e);
},
bindsubscribe(e) {
this.$emit('subscribe', e);
},
bindlogin(e) {
this.$emit('login', e);
},
bindim(e) {
this.$emit('im', e);
}
}
};
......
......@@ -540,11 +540,11 @@
value = [value[0], value[1]]
}
def = this.initDate(value[len - 1]) || [-1, -1, -1]
}
if (def[0] !== -1) {
year = def[0]
month = def[1]
}
}
value = value.map(item => {
let arr = this.initDate(item)
return `${arr[0]}-${this.formatNum(arr[1])}-${this.formatNum(arr[2])}`
......@@ -604,8 +604,13 @@
if (this.checkYear(year)) {
this.year = year;
if (this.isMultiple) {
this.defCurrent = this.month - 1;
this.$nextTick(() => {
setTimeout(() => {
this.month = 1;
this.defCurrent = 0;
}, 10)
})
}
this.setTitle();
this.monthArr = this.getMonthsArr(year)
......
......@@ -65,7 +65,7 @@
//边框颜色,仅nvue下生效
borderColor: {
type: String,
default: 'red'
default: '#EEEEEE'
},
headerBackground: {
type: String,
......
......@@ -7,8 +7,8 @@
<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 && !getActiveColor}"
:style="{ color: idx === current ? getActiveColor : color, fontSize: size + 'rpx',fontWeight:idx === current?'bold':'normal' }">{{ item.text }}</text>
:class="{'fui-cascader__hi-width':item[textKey].length>6,'fui-cascader__color':idx === current && !getActiveColor}"
:style="{ color: idx === current ? getActiveColor : color, fontSize: size + 'rpx',fontWeight:idx === current?'bold':'normal' }">{{ item[textKey] }}</text>
<view class="fui-cascader__header-line" :class="{'fui-cascader__bg':!getActiveColor}"
:style="{ background: getActiveColor }" v-if="idx === current && showLine"></view>
</view>
......@@ -35,11 +35,11 @@
: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"
<image :src="sub[srcKey]" v-if="sub[srcKey]" class="fui-cascader__img"
:style="{ width: imgWidth+'rpx', height: imgHeight+'rpx', borderRadius: radius+'rpx' }">
</image>
<text class="fui-cascader__text"
:style="{ color: item.index === subi ? textActiveColor : textColor, fontSize: textSize + 'rpx',fontWeight:item.index === subi?'bold':'normal' }">{{ sub.text }}</text>
:style="{ color: item.index === subi ? textActiveColor : textColor, fontSize: textSize + 'rpx',fontWeight:item.index === subi?'bold':'normal' }">{{ sub[textKey] }}</text>
</view>
<view class="fui-cascader__seat"></view>
</scroll-view>
......@@ -62,6 +62,22 @@
return []
}
},
textKey: {
type: String,
default: 'text'
},
valueKey: {
type: String,
default: 'value'
},
childrenKey: {
type: String,
default: 'children'
},
srcKey: {
type: String,
default: 'src'
},
value: {
type: Array,
default () {
......@@ -178,6 +194,9 @@
},
value(vals) {
this.setDefaultOptions(vals)
},
selectedArr(val) {
console.log(val)
}
},
created() {
......@@ -218,9 +237,9 @@
let value = [];
let src = [];
result.map(item => {
text.push(item.text);
value.push(item.value)
src.push(item.src)
text.push(item[this.textKey]);
value.push(item[this.valueKey])
src.push(item[this.srcKey])
delete item['data'];
delete item['index'];
delete item['scrollViewId'];
......@@ -228,18 +247,18 @@
});
this.$emit('complete', {
result: result,
value: value,
text: text,
src: src
[this.valueKey]: value,
[this.textKey]: text,
[this.srcKey]: src
});
setTimeout(() => {
this.scrollViewId = `fui_cr_${layer}`;
}, 50)
} else {
let item = [{
text: this.text,
value: '',
src: '',
[this.textKey]: this.text,
[this.valueKey]: this.text,
[this.srcKey]: '',
index: -1,
scrollViewId: 'fui_c__0',
data
......@@ -265,7 +284,7 @@
},
getDefaultIndex(arr, val) {
if (!arr || arr.length === 0 || val === undefined) return -1;
let key = this.defaultKey || 'value';
let key = this.defaultKey || this.valueKey;
let index = -1;
for (let i = 0, len = arr.length; i < len; i++) {
if (arr[i][key] == val) {
......@@ -277,7 +296,7 @@
},
removeChildren(data) {
let list = data.map(item => {
delete item['children'];
delete item[this.childrenKey];
return item;
});
return list;
......@@ -291,13 +310,13 @@
} else {
let subi = selectedArr[0].index;
subi = subi === undefined || subi == -1 ? index : subi;
if (arr[subi] && arr[subi].children) {
list = arr[subi].children
if (arr[subi] && arr[subi][this.childrenKey]) {
list = arr[subi][this.childrenKey]
}
if (layer > 0) {
for (let i = 1; i < layer + 1; i++) {
let val = layer === i ? index : selectedArr[i].index;
list = val === -1 ? [] : (list[val].children || []);
list = val === -1 ? [] : (list[val][this.childrenKey] || []);
if (list.length === 0) break;
}
}
......@@ -317,9 +336,9 @@
let subi = this.getDefaultIndex(item, vals[index])
let obj = item[subi] || {}
selectedArr.push({
text: obj.text || this.text,
value: obj.value || '',
src: obj.src || '',
[this.textKey]: obj[this.textKey] || this.text,
[this.valueKey]: obj[this.valueKey] || '',
[this.srcKey]: obj[this.srcKey] || '',
index: subi,
scrollViewId: `fui_c_${subi}`,
data: item
......@@ -341,9 +360,9 @@
obj = list[subi]
}
selectedArr.push({
text: obj.text || this.text,
value: obj.value || '',
src: obj.src || '',
[this.textKey]: obj[this.textKey] || this.text,
[this.valueKey]: obj[this.valueKey] || '',
[this.srcKey]: obj[this.srcKey] || '',
index: subi,
scrollViewId: `fui_c_${subi}`,
data: list
......@@ -406,9 +425,9 @@
let item = this.selectedArr[index];
if (item.index == subi) return;
item.index = subi;
item.text = sub.text;
item.value = sub.value;
item.src = sub.src || '';
item[this.textKey] = sub[this.textKey];
item[this.valueKey] = sub[this.valueKey];
item[this.srcKey] = sub[this.srcKey] || '';
this.$emit('change', {
layer: index,
index: subi,
......
<template>
<view>
</view>
</template>
<script>
export default {
name:"fui-charts-column",
data() {
return {
};
}
}
</script>
<style>
</style>
<template>
<view>
</view>
</template>
<script>
export default {
name:"fui-charts-line",
data() {
return {
};
}
}
</script>
<style>
</style>
<template>
<view class="fui-charts__pie-wrap">
<view class="fui-charts__pie-box" :style="{width:diam+'rpx',height:diam+'rpx',backgroundColor:backgroundColor}">
<view class="fui-charts__pie-inner"
:style="{width:(radius*2)+'px',height:(radius*2)+'px',background:item.angle>180?item.color:'transparent',zIndex:item.angle>180?10:'auto',clip:item.transformAngle>180?`rect(0, ${radius}px, ${radius*2}px, 0)`:'auto'}"
v-for="(item,index) in dataset" :key="index" @tap.stop="itemClick(index)">
<view class="fui-charts__pie-sector"
:style="{width:radius+'px',height:diam+'rpx',marginLeft:diam/2+'rpx','-webkit-transform': `rotate(${item.transformAngle}deg)`,'transform': `rotate(${item.transformAngle}deg)`,backgroundColor:item.color}">
</view>
</view>
<view class="fui-charts__pie-circle" v-if="ring"
:style="{width:cDiam+'px',height:cDiam+'px',background:background}">
</view>
</view>
</view>
</template>
<script>
export default {
name: "fui-charts-pie",
props: {
//半径,单位rpx
radius: {
type: [Number, String],
default: 200
},
//是否显示为环状
ring: {
type: Boolean,
default: false
},
//中心圆半径,仅ring为true时生效,单位rpx
centerRadius: {
type: [Number, String],
default: 120
},
//中心圆背景色,颜色应与背景色一致,仅ring为true时生效
background: {
type: String,
default: '#FFFFFF'
}
},
data() {
return {
pRadius: 100,
cDiam: 60,
dataset: null
};
},
computed: {
getRadius() {
return `${this.radius}_${this.centerRadius}`
}
},
watch: {
getRadius(val) {
this.setRadius()
}
},
created() {
this.setRadius()
},
methods: {
rpx2px(value) {
let px = uni.upx2px(Number(value))
px = px % 2 === 0 ? px : px + 1
return px;
},
setRadius() {
this.pRadius = this.rpx2px(this.radius)
this.cDiam = this.rpx2px(this.centerRadius) * 2
//重新绘制
if (this.dataset) {
}
}
},
}
</script>
<style scoped>
.fui-charts__pie-wrap {}
</style>
......@@ -19,7 +19,13 @@
// #ifdef MP-WEIXIN
behaviors: ['wx://form-field-group'],
// #endif
// #ifdef MP-BAIDU || MP-QQ || H5
// #ifdef MP-BAIDU
behaviors: ['swan://form-field'],
// #endif
// #ifdef MP-QQ
behaviors: ['qq://form-field'],
// #endif
// #ifdef H5
behaviors: ['uni://form-field'],
// #endif
props: {
......@@ -35,12 +41,14 @@
}
},
// #endif
// #ifdef VUE2
value: {
type: Array,
default () {
return []
}
}
// #endif
},
data() {
return {
......@@ -53,9 +61,11 @@
this.modelChange(vals)
},
// #endif
// #ifdef VUE2
value(vals) {
this.modelChange(vals)
}
// #endif
},
created() {
this.childrens = []
......@@ -71,7 +81,7 @@
// #endif
},
changeValue(checked, target) {
let vals = []
const vals = []
this.childrens.forEach(item => {
if (item.val) {
vals.push(item.value);
......
......@@ -6,7 +6,7 @@
<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="getColor"
:disabled="disabled" :value="value" :checked="val">
:disabled="disabled" :value="getValue" :checked="val">
</checkbox>
</view>
</template>
......@@ -15,14 +15,10 @@
export default {
name: "fui-checkbox",
emits: ['change'],
// #ifdef MP-WEIXIN
options: {
virtualHost: true
},
// #endif
props: {
//注意:返回值仍为string类型
value: {
type: String,
type: [String, Number],
default: ''
},
checked: {
......@@ -70,6 +66,16 @@
default: 1
}
},
// #ifndef VUE3
beforeDestroy() {
this.unInstall()
},
// #endif
// #ifdef VUE3
beforeUnmount() {
this.unInstall()
},
// #endif
created() {
this.val = this.checked;
this.group = this.getParent()
......@@ -109,6 +115,9 @@
}
// #endif
return color;
},
getValue() {
return String(this.value)
}
},
data() {
......@@ -122,6 +131,15 @@
};
},
methods: {
unInstall() {
if (this.group) {
this.group.childrens.forEach((item, index) => {
if (item === this) {
this.group.childrens.splice(index, 1)
}
})
}
},
getBackgroundColor(val, isCheckMark) {
let color = val ? this.getColor : '#fff'
if (isCheckMark) {
......
......@@ -18,7 +18,11 @@
<canvas class="fui-circle__canvas" :canvas-id="circleId" :id="circleId"
:style="{width: w*4 +'px',height:w*4 +'px'}"></canvas>
<!-- #endif -->
<!-- #ifndef MP-ALIPAY -->
<!-- #ifdef MP-WEIXIN -->
<canvas type="2d" class="fui-circle__canvas" :canvas-id="circleId" :id="circleId"
:style="{width: w +'px',height:w +'px'}" v-if="circleId"></canvas>
<!-- #endif -->
<!-- #ifndef MP-ALIPAY || MP-WEIXIN-->
<!-- 此处加v-if是因为vue3下编译到头条/抖音等小程序动态id失效,需等uni-app官方调整 -->
<canvas class="fui-circle__canvas" :canvas-id="circleId" :id="circleId" :style="{width: w +'px',height:w +'px'}"
v-if="circleId"></canvas>
......@@ -164,6 +168,7 @@
// #endif
//注意:app-nvue端canvas性能不如app-vue
import mpjs from './mpjs.js'
import mpwx from './mpwx.js'
import render from './render.js'
import nvue from './nvue.js'
// #ifdef MP-WEIXIN
......@@ -171,7 +176,7 @@
// #endif
export default {
name: "fui-circle",
mixins: [mpjs, render, nvue],
mixins: [mpjs, mpwx, render, nvue],
emits: ['change', 'end'],
props: {
//进度百分比 0~100
......
// #ifdef MP
// #ifdef MP-WEIXIN
export default {}
// #endif
// #ifndef MP-WEIXIN
export default {
data() {
return {
......@@ -44,8 +49,14 @@ export default {
// #ifdef MP-ALIPAY
sw = sw * 4
// #endif
// #ifndef MP-KUAISHOU
ctx.setLineWidth(sw);
ctx.setStrokeStyle(this.background);
// #endif
// #ifdef MP-KUAISHOU
ctx.lineWidth = sw;
ctx.strokeStyle = this.background;
// #endif
let eAngle = Math.PI * 2 + Number(this.sAngle) * Math.PI;
this.drawArc(ctx, eAngle, true);
},
......@@ -61,16 +72,25 @@ export default {
// #ifdef MP-ALIPAY
sw = sw * 4
// #endif
ctx.setLineWidth(sw);
// #ifdef MP-KUAISHOU
ctx.lineWidth = sw;
// #endif
let gradient = this.foreground || this.primaryColor;
// #ifndef MP-KUAISHOU
ctx.setLineWidth(sw);
if (this.gradient) {
gradient = ctx.createLinearGradient(0, 0, Number(this.w), 0);
gradient.addColorStop(0, this.gradient);
gradient.addColorStop(1, this.foreground || this.primaryColor);
}
// #endif
ctx.setStrokeStyle(gradient);
// #endif
// #ifdef MP-KUAISHOU
ctx.strokeStyle = gradient;
// #endif
let percentage = Number(this.percent)
if (percentage > 0) {
start += Number(this.speed);
......@@ -81,10 +101,18 @@ export default {
// #ifdef MP-ALIPAY
si = si * 4
// #endif
// #ifndef MP-KUAISHOU
ctx.setFontSize(si);
ctx.setFillStyle(this.color || this.primaryColor);
ctx.setTextAlign('center');
ctx.setTextBaseline('middle');
// #endif
// #ifdef MP-KUAISHOU
ctx.fillStyle = this.color || this.primaryColor;
ctx.font = si + "px Arial";
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
// #endif
let percent = `${this.counterclockwise ? 100 - start : start}%`;
let radius = this.w / 2
// #ifdef MP-ALIPAY
......@@ -119,7 +147,13 @@ export default {
},
//创建弧线
drawArc(ctx, eAngle, def) {
// #ifndef MP-KUAISHOU
ctx.setLineCap(this.lineCap);
// #endif
// #ifdef MP-KUAISHOU
ctx.lineCap = this.lineCap;
// #endif
ctx.beginPath();
let radius = this.w / 2;
let sw = Number(this.strokeWidth);
......@@ -133,6 +167,7 @@ export default {
}
}
}
// #endif
// #endif
......
// #ifdef MP-WEIXIN
export default {
data() {
return {
start: 0,
isReady: false
}
},
created() {
this.context = null;
this.canvas = null;
},
watch: {
percent(val) {
setTimeout(() => {
this.isReady && this.initDraw()
}, 20)
},
w(val) {
setTimeout(() => {
this.isReady && this.initDraw()
}, 20)
},
strokeWidth(val) {
setTimeout(() => {
this.isReady && this.initDraw()
}, 20)
}
},
mounted() {
this.$nextTick(() => {
setTimeout(() => {
this.init();
}, 50)
})
},
methods: {
//初始化绘制
init() {
uni.createSelectorQuery().in(this)
.select(`#${this.circleId}`)
.fields({
node: true,
size: true,
})
.exec(this.initDraw.bind(this))
},
initDraw(res) {
this.isReady = true;
let start = this.activeMode === 'backwards' ? 0 : this.start;
start = start > this.percent ? 0 : start;
if (res) {
const width = res[0].width
const height = res[0].height
const canvas = res[0].node
const ctx = canvas.getContext('2d')
const dpr = uni.getSystemInfoSync().pixelRatio
canvas.width = width * dpr
canvas.height = height * dpr
ctx.scale(dpr, dpr)
this.context = ctx;
this.canvas = canvas
this.drawCircle(start, ctx, canvas);
} else {
this.drawCircle(start, this.context, this.canvas);
}
},
drawDefaultCircle(ctx, canvas) {
//终止弧度
let eAngle = Math.PI * 2 + Number(this.sAngle) * Math.PI;
this.drawArc(ctx, eAngle, this.background);
},
drawpercent(ctx, percent) {
ctx.save();
ctx.beginPath();
ctx.fillStyle = this.color || this.primaryColor;
ctx.font = this.size + "px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
let radius = this.w / 2;
percent = this.counterclockwise ? 100 - percent : percent;
percent = percent.toFixed(0) + "%"
ctx.fillText(percent, radius, radius);
ctx.stroke();
ctx.restore();
},
drawCircle(start, ctx, canvas) {
if (!ctx || !canvas) return;
let that = this
let percent = that.percent;
let requestId = null
let renderLoop = () => {
drawFrame((res) => {
if (res) {
requestId = canvas.requestAnimationFrame(renderLoop)
} else {
canvas.cancelAnimationFrame(requestId)
requestId = null;
renderLoop = null;
}
})
}
requestId = canvas.requestAnimationFrame(renderLoop)
function drawFrame(callback) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (that.defaultShow) {
that.drawDefaultCircle(ctx, canvas)
}
if (that.show) {
that.drawpercent(ctx, start);
}
let isEnd = (percent == 0 || (that.counterclockwise && start == 100));
if (!isEnd) {
let eAngle = ((2 * Math.PI) / 100) * start + Number(that.sAngle) * Math.PI;
let gradient = that.foreground || that.primaryColor;
if (that.gradient) {
gradient = ctx.createLinearGradient(0, 0, Number(that.w), 0);
gradient.addColorStop(0, that.gradient);
gradient.addColorStop(1, (that.foreground || that.primaryColor));
}
that.drawArc(ctx, eAngle, gradient);
}
that.$emit('change', {
percent: start
});
if (start >= percent) {
that.start = start
that.$emit('end', {
canvasId: that.circleId,
percent: percent
});
canvas.cancelAnimationFrame(requestId)
callback && callback(false)
return;
}
let num = start + that.speed
start = num > percent ? percent : num;
callback && callback(true)
}
},
drawArc(ctx, eAngle, strokeStyle) {
ctx.save();
ctx.beginPath();
let sw = Number(this.strokeWidth);
ctx.lineCap = this.lineCap;
ctx.lineWidth = sw;
ctx.strokeStyle = strokeStyle;
let radius = this.w / 2;
ctx.arc(radius, radius, radius - sw, Number(this.sAngle) * Math.PI, eAngle, this
.counterclockwise);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
}
}
// #endif
// #ifndef MP-WEIXIN
export default {}
// #endif
......@@ -145,7 +145,7 @@
updateNvueWidth(width) {
// 用于在nvue端,span,offset,pull,push的计算
this.parentWidth = width;
['span', 'offset', 'pull', 'push'].forEach(size => {
['span', 'offset', 'pullRight', 'pushLeft'].forEach(size => {
const curSize = this[size];
if ((curSize || curSize === 0) && curSize !== -1) {
let RPX = 1 / 24 * curSize * width
......@@ -157,10 +157,10 @@
case 'offset':
this.marginLeft = RPX
break;
case 'pull':
case 'pullRight':
this.right = RPX
break;
case 'push':
case 'pushLeft':
this.left = RPX
break;
}
......
<template>
<view class="fui-collapse__item">
<view class="fui-collapse__item" :style="{marginTop:marginTop+'rpx',marginBottom:marginBottom+'rpx'}">
<view @tap.stop="onClick(!isOpen)" class="fui-collapse-item__title" :class="{'fui-collapse__disabled':disabled}"
:style="{background:background}">
<view class="fui-collapse__title">
......@@ -90,7 +90,16 @@
contentBg: {
type: String,
default: '#fff'
},
marginTop: {
type: [Number, String],
default: 0
},
marginBottom: {
type: [Number, String],
default: 0
}
},
data() {
const elId = `fui_${Math.ceil(Math.random() * 10e5).toString(36)}`
......
<template>
<view class="fui-collapse__wrap">
<view class="fui-collapse__wrap" :style="{background:background}">
<slot></slot>
</view>
</template>
......@@ -12,6 +12,10 @@
accordion: {
type: Boolean,
default: false
},
background: {
type: String,
default: 'transparent'
}
},
created() {
......@@ -44,6 +48,5 @@
flex: 1;
/* #endif */
flex-direction: column;
background: #fff;
}
</style>
/*
===========================================
当前组件库版本号为:V2.1.0
当前组件库版本号为:V2.3.0
如果与文档最新版本不一致,请更新至最新版本使用!
===========================================
*/
......@@ -8,7 +8,7 @@
/*
组件属性全局配置文件。优先级:全局配置文件props < 直接设置组件props
目前支持配置的组件:fui-button、fui-icon、fui-text、fui-input、fui-form-item、fui-list-cell
fui-section、fui-white-space、fui-wing-blank
fui-section、fui-white-space、fui-wing-blank、fui-number
*/
// 主色(V1.9.8+),仅Nvue端以及无法使用css变量控制颜色的组件使用【保持与fui-theme中一致】
......@@ -86,13 +86,18 @@ const fuiConfig = {
//仅Nvue有效,black 默认颜色,V1.9.8+
color: ''
},
//v2.3.0+
fuiNumber: {
size: 32,
unit: 'rpx'
},
fuiInput: {
labelSize: 32,
size: 32
},
fuiFormItem: {
labelSize: 32,
labelWidth: 170,
labelWidth: 164,
labelRight: 30,
labelWeight: 400,
labelAlign: 'left',
......
......@@ -5,19 +5,19 @@
v-if="isDays">{{ d }}</text>
<text class="fui-count__down-colon"
:style="{ lineHeight: colonSize + 'rpx', fontSize: colonSize + 'rpx', color: colonColor }"
v-if="isDays">{{ isColon ? ':' : '天' }}</text>
v-if="isDays">{{ isColon ? ':' : unitEn?'d':'天' }}</text>
<text class="fui-count__down-item"
:style="{ background: background, borderColor: borderColor, width: getWidth(h, width) + 'rpx', height: height + 'rpx',fontSize: size + 'rpx', color: color }"
v-if="isHours">{{ h }}</text>
<text class="fui-count__down-colon"
:style="{ lineHeight: colonSize + 'rpx', fontSize: colonSize + 'rpx', color: colonColor }"
v-if="isHours">{{ isColon ? ':' : '时' }}</text>
v-if="isHours">{{ isColon ? ':' : unitEn?'h':'时' }}</text>
<text class="fui-count__down-item"
:style="{ background: background, borderColor: borderColor, width: getWidth(i, width) + 'rpx', height: height + 'rpx',fontSize: size + 'rpx', color: color }"
v-if="isMinutes">{{ i }}</text>
<text class="fui-count__down-colon"
:style="{ lineHeight: colonSize + 'rpx', fontSize: colonSize + 'rpx', color: colonColor }"
v-if="isMinutes">{{ isColon ? ':' : '分' }}</text>
v-if="isMinutes">{{ isColon ? ':' : unitEn?'m':'分' }}</text>
<text class="fui-count__down-item"
:style="{ background: background, borderColor: borderColor, width: getWidth(s, width) + 'rpx', height: height + 'rpx',fontSize: size + 'rpx', color: color }"
v-if="isSeconds">{{ s }}</text>
......
/*!
* common v1.0.0 (https://doc.firstui.cn)
* Copyright 2024 FirstUI.
* Licensed under the Apache license
*/
/* ipx 底部安全区域 */
.fs-safe__area{
/* #ifdef APP-NVUE || MP-TOUTIAO */
padding-bottom: 34px;
/* #endif */
/* #ifndef APP-NVUE || MP-TOUTIAO */
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
/* #endif */
}
/* hover */
.fs-hover,
.fs-text__hover{
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.fs-hover:active{
background: $fv-bg-color-hover;
}
.fs-text__hover:active{
opacity: .5;
}
.fs-full{
/* #ifndef APP-NVUE */
width: 100%;
/* #endif */
/* #ifdef APP-NVUE */
width: 750rpx;
/* #endif */
}
.fs-disabled{
opacity: $fv-opacity-disabled;
/* #ifdef H5 */
cursor: not-allowed;
/* #endif */
}
/* thin 细边线 0.5px*/
.fs-cell__thin{
position: relative;
/* #ifdef APP-NVUE */
border-bottom: 0.5px solid $fv-color-border;
/* #endif */
}
/* #ifndef APP-NVUE */
.fs-cell__thin::after{
content: ' ';
position: absolute;
border-bottom: 1px solid $fv-color-border;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
bottom: 0;
left: 32rpx;
right: 0;
z-index: 1;
pointer-events: none;
}
/* #endif */
\ No newline at end of file
/*!
* firstui style v1.0.0 (https://doc.firstui.cn)
* Copyright 2024 FirstUI.
* Licensed under the Apache license
*/
@import './variables/index.scss';
/* common */
@import './base/common.scss';
/* color */
@import './widget/color.scss';
/* font-size */
@import './widget/size.scss';
/* font-weight */
@import './widget/weight.scss';
/* align */
@import './widget/align.scss';
/* margin */
@import './widget/margin.scss';
/* padding */
@import './widget/padding.scss';
/* border */
@import './widget/border.scss';
/* border-radius */
@import './widget/radius.scss';
/* position */
@import './widget/position.scss';
/* flexbox */
@import './widget/flexbox.scss';
/* hide */
@import './widget/hide.scss';
\ No newline at end of file
/* fui-variables */
/* 行为相关颜色 */
$fv-color-primary: #465CFF !default;
$fv-color-success: #09BE4F !default;
$fv-color-warning: #FFB703 !default;
$fv-color-danger: #FF2B2B !default;
$fv-color-purple: #6831FF !default;
/* 文字基本颜色、其他辅助色 */
/* 用于重量级文字信息、标题 */
$fv-color-title: #181818 !default;
/* 用于普通级段落信息、引导词 */
$fv-color-section: #333333 !default;
/* 用于次要标题内容 */
$fv-color-subtitle: #7F7F7F !default;
/* 用于底部标签、描述、次要文字信息 */
$fv-color-label: #B2B2B2 !default;
/* 用于辅助、次要信息、禁用文字等。如:待输入状态描述文字,已点击按钮文字 */
$fv-color-minor: #CCCCCC !default;
$fv-color-white: #FFFFFF !default;
/* 链接颜色 */
$fv-color-link: #465CFF !default;
/* 背景颜色 */
$fv-bg-color: #ffffff !default;
/* 页面背景底色 */
$fv-bg-color-grey: #F1F4FA !default;
/* 内容模块底色 */
$fv-bg-color-content: #F8F8F8 !default;
/* 点击背景色 */
$fv-bg-color-hover: rgba(0, 0, 0, 0.2) !default;
/* 遮罩颜色 */
$fv-bg-color-mask: rgba(0, 0, 0, 0.6) !default;
/* 边框颜色 */
$fv-color-border: #EEEEEE !default;
/* 阴影颜色 */
$fv-color-shadow: rgba(2, 4, 38, 0.05) !default;
/*禁用态的透明度 */
$fv-opacity-disabled: 0.5 !default;
/* icon尺寸 */
$fv-icon-size: 64rpx !default;
/* Border Radius */
$fv-border-radius-sm: 16rpx !default;
$fv-border-radius-base: 24rpx !default;
$fv-border-radius-lg: 48rpx !default;
/* 水平间距 */
$fv-spacing-row-sm: 16rpx !default;
$fv-spacing-row-base: 24rpx !default;
$fv-spacing-row-lg: 32rpx !default;
/* 垂直间距 */
$fv-spacing-col-sm: 8rpx !default;
$fv-spacing-col-base: 16rpx !default;
$fv-spacing-col-lg: 24rpx !default;
/* 边框宽度 */
$fv-border-width:1px !default;
\ No newline at end of file
/*!
* text-align v1.0.0 (https://doc.firstui.cn)
* Copyright 2024 FirstUI.
* Licensed under the Apache license
*/
.fs-align__left{
text-align: left;
}
.fs-align__center{
text-align: center;
}
.fs-align__right{
text-align: right;
}
/* #ifndef APP-NVUE */
.fs-align__justify{
text-align: justify;
}
.fs-align__start{
text-align: start;
}
.fs-align__end{
text-align: end;
}
/* #endif */
\ No newline at end of file
/*!
* border v1.0.0 (https://doc.firstui.cn)
* Copyright 2024 FirstUI.
* Licensed under the Apache license
*/
.fs-border {
border-style: solid;
border-width: $fv-border-width;
}
.fs-border__none { border-width: 0 }
.fs-border__top {
border-top-style: solid;
border-top-width: $fv-border-width;
}
.fs-border__right {
border-right-style: solid;
border-right-width: $fv-border-width;
}
.fs-border__bottom {
border-bottom-style: solid;
border-bottom-width: $fv-border-width;
}
.fs-border__left {
border-left-style: solid;
border-left-width: $fv-border-width;
}
\ No newline at end of file
/*!
* color v1.0.0 (https://doc.firstui.cn)
* Copyright 2024 FirstUI.
* Licensed under the Apache license
*/
/* color */
.fs-color__primary {
color: $fv-color-primary;
}
.fs-color__success {
color: $fv-color-success;
}
.fs-color__warning {
color: $fv-color-warning;
}
.fs-color__danger {
color: $fv-color-danger;
}
.fs-color__purple {
color: $fv-color-purple;
}
/* 用于重量级文字信息、标题 */
.fs-color__title {
color: $fv-color-title;
}
/* 用于普通级段落信息、引导词 */
.fs-color__section{
color: $fv-color-section;
}
/* 用于次要标题内容 */
.fs-color__subtitle{
color: $fv-color-subtitle
}
/* 用于底部标签、描述、次要文字信息 */
.fs-color__label{
color: $fv-color-label;
}
/* 用于辅助、次要信息、禁用文字等。如:待输入状态描述文字,已点击按钮文字 */
.fs-color__minor{
color: $fv-color-minor;
}
.fs-color__white{
color: $fv-color-white;
}
/* 链接颜色 */
.fs-color__link{
color: $fv-color-link;
}
/* bgckground-color */
.fs-bg__primary {
background: $fv-color-primary;
}
.fs-bg__success {
background: $fv-color-success;
}
.fs-bg__warning {
background: $fv-color-warning;
}
.fs-bg__danger {
background: $fv-color-danger;
}
.fs-bg__purple {
background: $fv-color-purple;
}
.fs-bg__white{
background: $fv-color-white;
}
/* 页面背景底色 */
.fs-bg__page{
background:$fv-bg-color-grey;
}
/* 内容模块底色 */
.fs-bg__content{
background:$fv-bg-color-content;
}
/* 点击背景颜色 */
.fs-bg__hover{
background:$fv-bg-color-hover;
}
/* 遮罩背景颜色 */
.fs-bg__mask{
background:$fv-bg-color-mask;
}
\ No newline at end of file
/*!
* flexbox v1.0.0 (https://doc.firstui.cn)
* Copyright 2024 FirstUI.
* Licensed under the Apache license
*/
.fs-flex,
.fs-flex__row {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
.fs-flex__column {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
}
.fs-flex__wrap { flex-wrap: wrap }
.fs-items__start { align-items: flex-start }
.fs-items__end { align-items: flex-end }
.fs-items__center { align-items: center }
/* #ifndef APP-NVUE */
.fs-items__baseline { align-items: baseline }
/* #endif */
.fs-items__stretch { align-items: stretch }
/* #ifndef APP-NVUE */
.fs-self__start { align-self: flex-start }
.fs-self__end { align-self: flex-end }
.fs-self__center { align-self: center }
.fs-self__baseline { align-self: baseline }
.fs-self__stretch { align-self: stretch }
/* #endif */
.fs-justify__start { justify-content: flex-start }
.fs-justify__end { justify-content: flex-end }
.fs-justify__center { justify-content: center }
.fs-justify__between { justify-content: space-between }
.fs-justify__around { justify-content: space-around }
/* #ifndef APP-NVUE */
.fs-justify__evenly { justify-content: space-evenly }
/* #endif */
/* #ifndef APP-NVUE */
.fs-content__start { align-content: flex-start }
.fs-content__end { align-content: flex-end }
.fs-content__center { align-content: center }
.fs-content__between { align-content: space-between }
.fs-content__around { align-content: space-around }
.fs-content__stretch { align-content: stretch }
/* #endif */
/* #ifndef APP-NVUE */
.fs-order__0 { order: 0 }
.fs-order__1 { order: 1 }
.fs-order__2 { order: 2 }
.fs-order__3 { order: 3 }
.fs-order__last { order: 99999 }
/* #endif */
.fs-flex__center{
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
}
.fs-flex__between {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.fs-align__center {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
align-items: center;
flex-direction: row;
}
.fs-flex__reverse {
flex-direction: row-reverse;
}
.fs-flex__1,
.fs-flex1{
flex: 1;
}
\ No newline at end of file
/*!
* hide v1.0.0 (https://doc.firstui.cn)
* Copyright 2024 FirstUI.
* Licensed under the Apache license
*/
.fs-hide{
position: absolute;
left: -6666px;
top: -6666px;
opacity: 0;
/* #ifndef APP-NVUE */
visibility: hidden;
z-index: -1;
/* #endif */
overflow: hidden;
}
/* #ifndef APP-NVUE */
.fs-display__none {
display: none !important
}
/* #endif */
.fs-ellipsis{
/* #ifndef APP-NVUE */
white-space: nowrap;
/* #endif */
overflow: hidden;
text-overflow: ellipsis;
/* #ifdef APP-NVUE */
lines:1;
/* #endif */
}
.fs-ellipsis__2{
/* #ifndef APP-NVUE */
word-break: break-all;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
/* #endif */
overflow: hidden;
text-overflow: ellipsis;
/* #ifdef APP-NVUE */
lines:2;
/* #endif */
}
\ No newline at end of file
/*!
* margin v1.0.0 (https://doc.firstui.cn)
* Copyright 2024 FirstUI.
* Licensed under the Apache license
*/
$fv-margin:0,2,4,8,10,12,16,20,24,28,30,32,36,40,44,48,52,56,60,64,68,72,76,80,84,88,92,96;
@each $m in $fv-margin{
.fs-m#{$m} { margin: #{$m}rpx;}
.fs-mt#{$m} { margin-top: #{$m}rpx;}
.fs-mr#{$m} { margin-right: #{$m}rpx; }
.fs-mb#{$m} { margin-bottom: #{$m}rpx; }
.fs-ml#{$m} { margin-left: #{$m}rpx; }
.fs-mx#{$m} { margin-left: #{$m}rpx; margin-right: #{$m}rpx; }
.fs-my#{$m} { margin-top:#{$m}rpx; margin-bottom: #{$m}rpx; }
}
/* #ifndef APP-NVUE */
.fs-ml__auto { margin-left: auto; }
.fs-mr__auto { margin-right: auto; }
/* #endif */
\ No newline at end of file
/*!
* padding v1.0.0 (https://doc.firstui.cn)
* Copyright 2024 FirstUI.
* Licensed under the Apache license
*/
$fv-padding:0,2,4,8,10,12,16,20,24,28,30,32,36,40,44,48,52,56,60,64,68,72,76,80,84,88,92,96,120,160,200;
@each $p in $fv-padding{
.fs-p#{$p} { padding: #{$p}rpx;}
.fs-pt#{$p} { padding-top: #{$p}rpx;}
.fs-pr#{$p} { padding-right: #{$p}rpx; }
.fs-pb#{$p} { padding-bottom: #{$p}rpx; }
.fs-pl#{$p} { padding-left: #{$p}rpx; }
.fs-px#{$p} { padding-left: #{$p}rpx; padding-right: #{$p}rpx; }
.fs-py#{$p} { padding-top:#{$p}rpx; padding-bottom: #{$p}rpx; }
}
/*!
* position v1.0.0 (https://doc.firstui.cn)
* Copyright 2024 FirstUI.
* Licensed under the Apache license
*/
.fs-relative { position: relative }
.fs-absolute { position: absolute }
.fs-fixed { position: fixed }
.fs-sticky { position: sticky }
.fs-top0 { top: 0 }
.fs-right0 { right: 0 }
.fs-bottom0 { bottom: 0 }
.fs-left0 { left: 0 }
/* z-index */
@for $i from 1 through 9 {
.fs-z#{$i} { z-index: #{$i} }
}
\ No newline at end of file
/*!
* border-radius v1.0.0 (https://doc.firstui.cn)
* Copyright 2024 FirstUI.
* Licensed under the Apache license
*/
$fv_radius:4,8,12,16,24,30,48,200;
@each $r in $fv_radius{
.fs-radius__#{$r} {
border-radius: #{$r}rpx;
overflow: hidden;
}
}
.fs-radius__sm{
border-radius: $fv-border-radius-sm;
overflow: hidden;
}
.fs-radius__base,
.fs-radius__md{
border-radius: $fv-border-radius-base;
overflow: hidden;
}
.fs-radius__lg{
border-radius: $fv-border-radius-lg;
overflow: hidden;
}
.fs-radius__circle{
/* #ifndef APP-NVUE */
border-radius: 50%;
/* #endif */
/* #ifdef APP-NVUE */
border-radius: 200px;
/* #endif */
overflow: hidden;
}
\ No newline at end of file
/*!
* font-size v1.0.0 (https://doc.firstui.cn)
* Copyright 2024 FirstUI.
* Licensed under the Apache license
*/
/* 常用字体大小 单位rpx*/
.fs-size__h1 {
font-size: 44rpx;
font-weight: 500;
}
.fs-size__h2 {
font-size: 36rpx;
font-weight: 500;
}
.fs-size__h3 {
font-size: 32rpx;
font-weight: 400;
}
.fs-size__h4{
font-size: 28rpx;
font-weight: 400;
}
.fs-size__h5,
.fs-size__h6 {
font-size: 24rpx;
font-weight: 400;
}
/* 自定义字体大小 24~64 单位rpx*/
@for $i from 24 through 64 {
.fs-size__#{$i}{
font-size: #{$i}rpx;
}
}
\ No newline at end of file
/*!
* font-weight v1.0.0 (https://doc.firstui.cn)
* Copyright 2024 FirstUI.
* Licensed under the Apache license
*/
.fs-weight__400,
.fs-weight__normal{
font-weight: 400;
}
.fs-weight__500{
font-weight: 500;
}
.fs-weight__600{
font-weight: 600;
}
.fs-bold,
.fs-weight__bold,
.fs-weight__700,
.fs-weight__800,
.fs-weight__900{
font-weight: bold;
}
\ No newline at end of file
......@@ -2,7 +2,7 @@
<view class="fui-data__tag-wrap" :class="[nowrap?'fui-data__tag-nowrap':'fui-data__tag-flexwrap']"
:style="{marginBottom:'-'+gap+'rpx'}">
<!-- #ifndef APP-NVUE -->
<view class="fui-data__tag-item" :class="{'fui-data__tag-disable':item.disable}"
<view class="fui-data__tag-item" :class="{'fui-data__tag-disable':item[disableKey]}"
: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)">
......@@ -11,19 +11,19 @@
v-if="mark && item.selected">{{icon}}</text>
</view>
<text class="fui-data__tag-text"
:style="{fontSize:size+'rpx',color:item.selected?(activeColor || primaryColor):color}">{{item.text}}</text>
:style="{fontSize:size+'rpx',color:item.selected?(activeColor || primaryColor):color}">{{item[textKey]}}</text>
</view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view class="fui-data__tag-item" :class="{'fui-data__tag-disable':item.disable}"
<view class="fui-data__tag-item" :class="{'fui-data__tag-disable':item[disableKey]}"
: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 || 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 || primaryColor):color}">{{item.text}}</text>
:style="{fontSize:size+'rpx',lineHeight:size+'rpx',color:item.selected?(activeColor || primaryColor):color}">{{item[textKey]}}</text>
</view>
<!-- #endif -->
</view>
......@@ -47,6 +47,22 @@
return []
}
},
textKey: {
type: String,
default: 'text'
},
valueKey: {
type: String,
default: 'value'
},
isAllKey: {
type: String,
default: 'isAll'
},
disableKey: {
type: String,
default: 'disable'
},
// #ifdef VUE3
modelValue: {
type: [Array, String, Number],
......@@ -187,16 +203,16 @@
if (typeof vals[0] !== 'object') {
vals = vals.map((item, index) => {
return {
text: item,
value: item,
[this.textKey]: item,
[this.valueKey]: item,
selected: false
}
})
} else {
vals.map((item, index) => {
item.selected = false
if (item.value === undefined) {
item.value = item.text
item.selected = item.selected || false;
if (item[this.valueKey] === undefined) {
item[this.valueKey] = item[this.textKey]
}
})
}
......@@ -219,14 +235,14 @@
},
radioChange(index, model) {
const min = Number(this.min)
if (this.val === model.value && min > 0) return;
if (this.val === model[this.valueKey] && min > 0) return;
let val = '';
let i = index;
let entity = {}
this.dataList.forEach((item, idx) => {
if (idx === index) {
const bool = this.val === item.value && min <= 0
val = bool ? '' : item.value
const bool = this.val === item[this.valueKey] && min <= 0
val = bool ? '' : item[this.valueKey]
i = bool ? -1 : index
entity = bool ? {} : item
item.selected = bool ? false : true
......@@ -254,18 +270,18 @@
const min = Number(this.multipleMin)
const max = Number(this.max)
let vals = this.vals
let i = vals.indexOf(model.value)
let i = vals.indexOf(model[this.valueKey])
if (vals.length <= min && i !== -1) {
this.toast(`至少选择${min}个选项`)
return
}
const isAllIndex = this.dataList.findIndex(item => item.isAll)
const isAllIndex = this.dataList.findIndex(item => item[this.isAllKey])
let item = this.dataList[index]
if (isAllIndex !== -1) {
if (model.isAll) {
if (model[this.isAllKey]) {
item.selected = i !== -1 ? false : true
if (item.selected) {
vals = [model.value]
vals = [model[this.valueKey]]
} else {
vals.splice(i, 1)
}
......@@ -280,7 +296,7 @@
return
}
let entity = this.dataList[isAllIndex]
const allI = vals.indexOf(entity.value)
const allI = vals.indexOf(entity[this.valueKey])
if (allI !== -1) {
entity.selected = false;
vals.splice(allI, 1)
......@@ -289,7 +305,7 @@
if (index === idx) {
item.selected = i !== -1 ? false : true
if (item.selected) {
vals.push(item.value)
vals.push(item[this.valueKey])
} else {
vals.splice(i, 1)
}
......@@ -303,13 +319,13 @@
}
item.selected = i !== -1 ? false : true
if (item.selected) {
vals.push(item.value)
vals.push(item[this.valueKey])
} else {
vals.splice(i, 1)
}
}
this.vals = vals
const entity = this.dataList.filter(item => vals.indexOf(item.value) != -1)
const entity = this.dataList.filter(item => vals.indexOf(item[this.valueKey]) != -1)
let e = {
detail: {
value: vals,
......@@ -321,7 +337,7 @@
modelChange(vals) {
if (this.multiple) {
this.dataList.forEach(item => {
if (vals.includes(item.value)) {
if (vals.includes(item[this.valueKey])) {
item.selected = true;
} else {
item.selected = false
......@@ -331,7 +347,7 @@
} else {
this.dataList.forEach(item => {
if (vals == item.value) {
if (vals == item[this.valueKey]) {
item.selected = true;
} else {
item.selected = false
......@@ -342,7 +358,7 @@
},
handleClick(index) {
let item = this.dataList[index]
if (item.disable) return;
if (item[this.disableKey]) return;
if (this.multiple) {
this.checkboxChange(index, item)
} else {
......
<template>
<view @tap="maskClose" :style="{background:maskBackground}" class="fui-dialog__wrap"
:class="{'fui-wrap__show':show}" @touchmove.stop.prevent="stop" v-if="visible || !isNvue" ref="fui_dialog_ani">
:class="{'fui-wrap__show':show}" v-if="visible || !isNvue" ref="fui_dialog_ani">
<!-- @touchmove.stop.prevent="stop" -->
<view class="fui-dialog__inner" :style="{background:background,borderRadius:radius+'rpx'}" @tap.stop="stop">
<text class="fui-dialog__title" :style="{color:color}" v-if="title">{{title}}</text>
<view class="fui-dialog__body" :class="{'fui-dialog__mtop':!title}">
......@@ -31,7 +32,7 @@
},
title: {
type: String,
default: '温馨提示'
default: '提示'
},
color: {
type: String,
......
......@@ -205,11 +205,13 @@
//34px
const res = uni.getSystemInfoSync();
let iphonex = false;
let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax',
'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini',
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini',
'iphone14pro', 'iphone14promax'
]
let models = ['iphonex', 'iphonexr', 'iphonexsmax']
for (let i = 11; i < 20; i++) {
models.push(`iphone${i}`)
models.push(`iphone${i}mini`)
models.push(`iphone${i}pro`)
models.push(`iphone${i}promax`)
}
const model = res.model.replace(/\s/g, "").toLowerCase()
const newModel = model.split('<')[0]
if (models.includes(model) || models.includes(newModel) || (res.safeAreaInsets && res.safeAreaInsets
......
......@@ -94,7 +94,7 @@
},
methods: {
initHeight(val) {
let height = Math.floor(uni.upx2px(val || 0))
let height = Math.floor(uni.upx2px(Number(val) || 0))
height = height % 2 === 0 ? height : height + 1
this.rollHeight = height
},
......@@ -146,6 +146,9 @@
.fui-digital__roller {
overflow: hidden;
/* #ifndef APP-NVUE */
transform: translateZ(0);
/* #endif */
}
.fui-digital__roller-column {
......
<template>
<view class="fui-divider__wrap" :style="{ height: height + 'rpx' }">
<view class="fui-divider__line" :style="{ width: width, background: dividerColor,top:getTop}">
<view class="fui-divider__wrap" :style="{width:width, height: height + 'rpx' }">
<view class="fui-divider__line" :style="{ background: dividerColor}">
</view>
<view class="fui-divider__text-box" :style="{backgroundColor: backgroundColor}">
<view class="fui-divider__text-box">
<slot></slot>
<text class="fui-divider__text"
:style="{fontWeight: fontWeight,color: color, fontSize: size + 'rpx',lineHeight: size + 'rpx'}"
v-if="text">{{text}}</text>
</view>
<view class="fui-divider__line" :style="{ background: dividerColor}">
</view>
</view>
</view>
</template>
......@@ -47,16 +51,6 @@
fontWeight: {
type: [Number, String],
default: 400
},
//背景颜色,和当前页面背景色保持一致
backgroundColor: {
type: String,
default: '#F1F4FA'
}
},
computed: {
getTop() {
return Number(this.height) / 2 + 'rpx'
}
}
};
......@@ -69,7 +63,6 @@
display: flex;
box-sizing: border-box;
/* #endif */
position: relative;
text-align: center;
flex-direction: row;
justify-content: center;
......@@ -78,27 +71,26 @@
}
.fui-divider__line {
position: absolute;
/* #ifdef APP-NVUE */
height: 0.5px;
/* #endif */
/* #ifndef APP-NVUE */
height: 1px;
top: 50%;
left: 50%;
-webkit-transform: scaleY(0.5) translate3d(-50%, -50%, 0);
transform: scaleY(0.5) translate3d(-50%, -50%, 0);
-webkit-transform: scaleY(0.5) translateZ(0);
transform: scaleY(0.5) translateZ(0);
/* #endif */
flex: 1;
}
.fui-divider__text-box {
position: relative;
text-align: center;
padding: 0 6rpx;
padding: 0 8rpx;
z-index: 1;
/* #ifndef APP-NVUE */
display: flex;
flex-shrink: 0;
/* #endif */
flex-direction: row;
align-items: center;
......@@ -106,6 +98,6 @@
}
.fui-divider__text {
padding: 0 12rpx;
padding: 0 10rpx;
}
</style>
......@@ -18,7 +18,7 @@
<text class="fui-drag__item-text" :style="{color:color,fontSize:size+'rpx'}"
v-if="text!='' && text!==true && type==2">{{text}}</text>
</view>
<fui-icon v-if="type==2" name="menu" :size="48" :color="slideColor"></fui-icon>
<fui-icon v-if="type==2 && isMenu" name="menu" :size="48" :color="slideColor"></fui-icon>
</view>
</view>
</template>
......@@ -58,6 +58,10 @@
default () {
return {}
}
},
isMenu: {
type: Boolean,
default: true
}
},
data() {
......
......@@ -12,15 +12,15 @@
:change:list="handler.listChange" :param="param" :change:param="handler.paramChange">
<view class="fui-drag-item__wrap" :style="{width:cellWidth+'px',height:cellHeight+'px'}"
v-for="(item, index) in list" :key="item.id" :data-index="index" @longpress="handler.longPress"
:data-param="param" :data-isdrag="isDrag && dragging?1:0" @touchstart="handler.touchStart"
:data-param="param" :data-isdrag="isDrag && dragging?1:0" :data-app="isApp" @touchstart="handler.touchStart"
@touchmove="handler.touchMove" @touchend="handler.touchEnd" @mousedown="handler.mousedown"
@tap="itemClick(index)">
<template v-if="custom">
<slot :model="item.entity" :width="cellWidth" :height="cellHeight" :index="index"></slot>
</template>
<template v-else>
<f-drag-item @delete="deleteItem" :src="(item.entity && item.entity.src) || 'true'"
:text="item.entity && item.entity.text" :width="cellWidth" :height="cellHeight"
<f-drag-item @delete="deleteItem" :src="(item.entity && item.entity[srcKey]) || 'true'"
:text="item.entity && item.entity[textKey]" :width="cellWidth" :height="cellHeight" :isMenu="isMenu"
:styles="styles" :index="index">
</f-drag-item>
</template>
......@@ -29,15 +29,14 @@
<!-- #ifdef APP-NVUE -->
<view fireEventSync="true" class="fui-drag-item__wrap" v-for="(item, index) in list" :key="item.id"
:style="{width:cellWidth+'px',height:cellHeight+'px'}" @touchstart="touchstart"
@touchmove="touchmove" @touchend="touchend" @longpress="longPress" :data-index="index"
:ref="'f_drag_'+index">
:style="{width:cellWidth+'px',height:cellHeight+'px'}" @touchstart="touchstart" @touchmove="touchmove"
@touchend="touchend" @longpress="longPress" :data-index="index" :ref="'f_drag_'+index">
<template v-if="custom">
<slot :model="item.entity" :width="cellWidth" :height="cellHeight" :index="index"></slot>
</template>
<template v-else>
<f-drag-item @delete="deleteItem" :src="item.entity && item.entity.src"
:text="item.entity && item.entity.text" :width="cellWidth" :height="cellHeight"
<f-drag-item @delete="deleteItem" :src="item.entity && item.entity[srcKey]"
:text="item.entity && item.entity[textKey]" :width="cellWidth" :height="cellHeight" :isMenu="isMenu"
:styles="styles" :index="index">
</f-drag-item>
</template>
......@@ -49,15 +48,15 @@
:class="{'fui-drag__cur':current===index,'fui-drag__trans':current!==index}"
v-for="(item, index) in list" :key="item.id"
:style="{width:cellWidth+'px',height:cellHeight+'px',transform: `translate3d(${index === current ? transX : item.transX}, ${index === current ? transY: item.transY}, 0px)`}"
@touchstart="touchstart" @touchmove.stop.prevent="touchmove" @touchend="touchend"
@longpress="longPress" :data-index="index">
@touchstart="touchstart" @touchmove.stop.prevent="touchmove" @touchend="touchend" @longpress="longPress"
:data-index="index">
<template v-if="custom">
<slot :model="item.entity" :width="cellWidth" :height="cellHeight" :index="index"></slot>
</template>
<template v-else>
<f-drag-item @delete="deleteItem" :src="(item.entity && item.entity.src) || ''"
:text="item.entity && item.entity.text" :width="cellWidth" :height="cellHeight"
:styles="styles" :index="index">
<f-drag-item @delete="deleteItem" :src="(item.entity && item.entity[srcKey]) || ''"
:text="item.entity && item.entity[textKey]" :width="cellWidth" :height="cellHeight" :styles="styles"
:isMenu="isMenu" :index="index">
</f-drag-item>
</template>
</view>
......@@ -67,6 +66,7 @@
<!-- #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');
......@@ -88,6 +88,14 @@
return [];
}
},
textKey: {
type: String,
default: 'text'
},
srcKey: {
type: String,
default: 'src'
},
width: {
type: [Number, String],
default: 0
......@@ -113,6 +121,10 @@
return {}
}
},
isMenu: {
type: Boolean,
default: true
},
// 页面滚动高度
scrollTop: {
type: Number,
......@@ -150,7 +162,12 @@
},
data() {
const elId = `fui_${Math.ceil(Math.random() * 10e5).toString(36)}`
let isApp = 0;
// #ifdef APP
isApp = 1;
// #endif
return {
isApp,
elId,
// #ifdef APP-VUE || MP-WEIXIN || H5
param: {},
......
......@@ -87,6 +87,8 @@ function longPress(e, ownerInstance) {
st.isDrag = +dataset.isdrag == 1 ? true : false
if (!st.isDrag) return;
st.app = +dataset.app == 1 ? true : false;
if (!st.param || st.param == 'undefined') {
st.param = JSON.parse(dataset.param)
}
......@@ -101,11 +103,9 @@ function longPress(e, ownerInstance) {
st.cur = +dataset.index;
if (st.dragging) return;
// #ifdef MP-WEIXIN
ownerInstance.callMethod("drag", {
wxdrag: true
});
// #endif
st.transX = param.columns === 1 ? 0 : touch.pageX - (param.cellWidth / 2 + param.wrapLeft);
st.transY = touch.pageY - (param.cellHeight / 2 + param.wrapTop);
st.sId = touch.identifier;
......@@ -133,21 +133,19 @@ function touchStart(e, ownerInstance) {
}
var dataset = ins.getDataset()
st.isDrag = +dataset.isdrag == 1 ? true : false
// #ifdef MP-WEIXIN
ownerInstance.callMethod("drag", {
wxdrag: false
});
// #endif
}
function touchMove(e, ownerInstance, event) {
function touchMove(e, ownerInstance, events) {
var st = {}
var touch = null
var ins = null
if (isH5 && isPC()) {
touch = e;
st = event.instance.getState()
ins = event.instance;
st = events.instance.getState()
ins = events.instance;
} else {
touch = e.changedTouches[0] || e.touches[0]
st = e.instance.getState()
......@@ -156,6 +154,9 @@ function touchMove(e, ownerInstance, event) {
if (e.preventDefault && st.dragging) {
e.preventDefault()
}
if (st.app && st.dragging && event && event.preventDefault) {
event.preventDefault()
}
var param = st.param;
if (!st.dragging || !st.isDrag) return;
......@@ -225,11 +226,9 @@ function touchEnd(e, ownerInstance, event) {
st.prevIns = ins
st.preStartKey = -1;
st.dragging = false;
// #ifdef MP-WEIXIN
ownerInstance.callMethod("drag", {
wxdrag: false
});
// #endif
st.cur = -1;
st.transX = 0;
st.transY = 0;
......@@ -285,5 +284,5 @@ module.exports = {
paramChange: paramChange,
listChange: listChange,
mousedown: mousedown,
stopTouchMove:stopTouchMove
stopTouchMove: stopTouchMove
}
<template>
<view class="fui-drawer__popup-wrap" :class="{'fui-drawer__wrap-show':show}"
:style="{ zIndex: zIndex,background:maskBackground,alignItems:direction==='left'?'flex-start':'flex-end' }"
@tap.stop="handleClose" @touchmove.stop.prevent="stop" v-if="isShow || !isNvue" ref="fui_dwr_mk_ani">
@tap.stop="handleClose" v-if="isShow || !isNvue" ref="fui_dwr_mk_ani">
<!-- @touchmove.stop.prevent="stop" -->
<view ref="fui_dwr_ani" class="fui-drawer__popup" :class="['fui-drawer_'+direction,show?'fui-drawer__show':'']"
:style="{background: background,borderTopLeftRadius:(direction==='right'? radius:0)+'rpx',borderBottomLeftRadius:(direction==='right'? radius:0)+'rpx',borderTopRightRadius:(direction==='left'? radius:0)+'rpx',borderBottomRightRadius:(direction==='left'? radius:0)+'rpx'}"
@tap.stop="stop($event,true)">
......@@ -91,7 +92,7 @@
},
// #ifdef H5
updated() {
if(!this.isMounted && !this.width){
if (!this.isMounted && !this.width) {
setTimeout(() => {
this._getSize((width) => {
this.width = width
......
......@@ -2,36 +2,39 @@
<view class="fui-dropdown__list-wrap" :class="{'fui-dropdown__list-show':isShow}"
:style="{background:maskBackground,zIndex:zIndex}" v-if="isShow || !isNvue" ref="fui_ddl_ani" @tap="close(1)">
<view class="fui-dropdown__list" :style="{borderRadius:radius+'rpx',background:background}">
<scroll-view :show-scrollbar="false" class="fui-ddl__scroll" scroll-y :style="getStyles">
<scroll-view :show-scrollbar="false" class="fui-ddl__scroll" :scroll-y="true" :style="getStyles">
<!-- #ifdef APP-NVUE -->
<view>
<!-- #endif -->
<slot></slot>
<view class="fui-dropdown__list-item"
:style="{background:background,paddingTop:padding[0] || 0,paddingRight:padding[1] || 0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0,borderBottomColor:lineColor}"
: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 ?getChkColor:'transparent',borderColor:model.checked && !isCheckMark ?getChkColor:borderColor}"
:class="{'fui-is__checkmark':isCheckMark,'fui-ddl__checkbox-color':(!checkboxColor || checkboxColor===true) && model[checkedKey] && !isCheckMark}"
:style="{background:model[checkedKey] && !isCheckMark ?getChkColor:'transparent',borderColor:model[checkedKey] && !isCheckMark ?getChkColor:borderColor}"
v-if="isCheckbox">
<view class="fui-ddl__checkmark"
:style="{borderBottomColor:checkmarkColor,borderRightColor:checkmarkColor}"
v-if="model.checked"></view>
v-if="model[checkedKey]"></view>
</view>
<view class="fui-ddl__flex">
<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>
:style="{width:iconWidth+'rpx',height:iconWidth+'rpx'}" v-if="model[srcKey]">
<image :src="model[srcKey]" :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)}"
:style="{fontSize:size+'rpx',color:selectedColor && model.checked?selectedColor:color}">{{model.text}}</text>
:class="{'fui-ddl__text-pl':!isReverse && (isCheckbox || model[srcKey]),'fui-ddl__text-pr':isReverse && (isCheckbox || model[srcKey])}"
:style="{fontSize:size+'rpx',color:selectedColor && model[checkedKey]?selectedColor:color}">{{model[textKey]}}</text>
</view>
</view>
<!-- #ifdef APP-NVUE -->
</view>
<!-- #endif -->
</scroll-view>
</view>
</view>
......@@ -51,6 +54,18 @@
return []
}
},
textKey: {
type: String,
default: 'text'
},
srcKey: {
type: String,
default: 'src'
},
checkedKey: {
type: String,
default: 'checked'
},
height: {
type: [Number, String],
default: 0
......@@ -206,16 +221,18 @@
if (typeof vals[0] !== 'object') {
vals = vals.map(item => {
return {
text: item,
checked: false
[this.textKey]: item,
[this.checkedKey]: false
}
})
} else {
vals.map(item => {
item.checked = item.checked || false
item[this.checkedKey] = item[this.checkedKey] || false
})
}
this.itemList = vals;
} else {
this.itemList = []
}
},
itemClick(e, index) {
......@@ -226,9 +243,9 @@
let vals = [...this.itemList]
vals.forEach((item, idx) => {
if (index === idx) {
item.checked = true
item[this.checkedKey] = true
} else {
item.checked = false
item[this.checkedKey] = false
}
})
this.itemList = vals;
......
......@@ -9,27 +9,29 @@
<scroll-view :show-scrollbar="false" class="fui-ddm__scroll" scroll-y
:style="{height:isNvue?maxHeight+'rpx':'auto', maxHeight:maxHeight+'rpx',minWidth:minWidth+'rpx'}">
<view>
<slot name="item"></slot>
<view class="fui-dropdown__menu-item"
:style="{background:background,padding:padding,borderBottomColor:splitLine && isNvue?lineColor:'transparent'}"
: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 ?getChkColor:'transparent',borderColor:model.checked && !isCheckMark ?getChkColor:borderColor}"
:class="{'fui-is__checkmark':isCheckMark,'fui-ddm__checkbox-color':(!checkboxColor || checkboxColor===true) && model[checkedKey] && !isCheckMark}"
:style="{background:model[checkedKey] && !isCheckMark ?getChkColor:'transparent',borderColor:model[checkedKey] && !isCheckMark ?getChkColor:borderColor}"
v-if="isCheckbox">
<view class="fui-ddm__checkmark"
:style="{borderBottomColor:checkmarkColor,borderRightColor:checkmarkColor}"
v-if="model.checked"></view>
v-if="model[checkedKey]"></view>
</view>
<view class="fui-ddm__flex">
<view class="fui-ddm__icon-box"
:class="{'fui-ddm__icon-ml':!isReverse && isCheckbox,'fui-ddm__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>
:style="{width:iconWidth+'rpx',height:iconWidth+'rpx'}" v-if="model[srcKey]">
<image :src="model[srcKey]" :style="{width:iconWidth+'rpx',height:iconWidth+'rpx'}">
</image>
</view>
<text class="fui-ddm__item-text"
:class="{'fui-ddm__text-pl':!isReverse && (isCheckbox || model.src),'fui-ddm__text-pr':isReverse && (isCheckbox || model.src)}"
:style="{fontSize:size+'rpx',color:selectedColor && model.checked?selectedColor:color}">{{model.text}}</text>
:class="{'fui-ddm__text-pl':!isReverse && (isCheckbox || model[srcKey]),'fui-ddm__text-pr':isReverse && (isCheckbox || model[srcKey])}"
:style="{fontSize:size+'rpx',color:selectedColor && model[checkedKey]?selectedColor:color}">{{model[textKey]}}</text>
</view>
</view>
</view>
......@@ -53,6 +55,18 @@
return []
}
},
textKey: {
type: String,
default: 'text'
},
srcKey: {
type: String,
default: 'src'
},
checkedKey: {
type: String,
default: 'checked'
},
maxHeight: {
type: [Number, String],
default: 400
......@@ -280,16 +294,18 @@
if (typeof vals[0] !== 'object') {
vals = vals.map(item => {
return {
text: item,
checked: false
[this.textKey]: item,
[this.checkedKey]: false
}
})
} else {
vals.map(item => {
item.checked = item.checked || false
item[this.checkedKey] = item[this.checkedKey] || false
})
}
this.itemList = vals;
} else {
this.itemList = []
}
},
itemClick(index) {
......@@ -297,9 +313,9 @@
let vals = [...this.itemList]
vals.forEach((item, idx) => {
if (index === idx) {
item.checked = true
item[this.checkedKey] = true
} else {
item.checked = false
item[this.checkedKey] = false
}
})
this.itemList = vals;
......
......@@ -5,7 +5,7 @@
<!-- #ifdef APP-VUE || MP-WEIXIN || H5-->
<view class="fui-fab__btn-wrap" :data-disabled="isDrag?0:1" :data-width="maxWidth" :data-height="maxHeight"
:data-left="eLeft" :data-top="eTop" :prop="resetNum" :change:prop="handler.fabreset"
:data-left="eLeft" :data-top="eTop" :data-app="isApp" :prop="resetNum" :change:prop="handler.fabreset"
@touchstart="handler.touchstart" @touchmove="handler.touchmove" @mousedown="handler.mousedown"
:class="[position==='left'?'fui-fab__wrap-left':'fui-fab__wrap-right']" :style="getStyles">
<view class="fui-fab__btn-list"
......@@ -14,19 +14,26 @@
<view class="fui-fab__button-box"
:class="[position==='left'?'fui-fab__button-left':'fui-fab__button-right']"
v-for="(btn,idx) in fabs" :key="idx" @tap.stop="handleClick($event,idx)">
<text class="fui-fab__btn-text" v-if="btn.text"
:style="{fontSize:(btn.size || 32)+'rpx',color:btn.color || '#fff',textAlign:position==='left'?'left':'right'}">{{btn.text}}</text>
<text class="fui-fab__btn-text" v-if="btn[textKey]"
:style="{fontSize:(btn.size || 32)+'rpx',color:btn.color || '#fff',textAlign:position==='left'?'left':'right'}">{{btn[textKey]}}</text>
<view class="fui-fab__button" :class="{'fui-fab__btn-color':!getBgColor && !btn.background }"
:style="{width:width+'rpx',height:width+'rpx',background:btn.background || getBgColor}">
<fui-icon :name="btn.name" v-if="btn.name" :color="btn.abbrColor || '#fff'"
<fui-icon :name="btn[nameKey]" v-if="btn[nameKey]" :color="btn.abbrColor || '#fff'"
:size="btn.abbrSize || 64"></fui-icon>
<image :src="btn.src"
<image :src="btn[srcKey]"
:style="{width:(btn.width || 56)+'rpx',height:(btn.height || 56)+'rpx',borderRadius:(btn.radius || 0)+'rpx'}"
v-if="!btn.name && btn.src" mode="widthFix"></image>
v-if="!btn[nameKey] && btn[srcKey]" mode="widthFix"></image>
<text class="fui-fab__btn-abbr"
:style="{fontSize:(btn.abbrSize || 36)+'rpx',lineHeight:(btn.abbrSize || 36)+'rpx',color:btn.abbrColor || '#fff'}"
v-if="!btn.name && !btn.src && btn.abbr">{{btn.abbr}}</text>
v-if="!btn[nameKey] && !btn[srcKey] && btn.abbr">{{btn.abbr}}</text>
</view>
<!-- #ifndef H5 -->
<button class="fui-fab__opentype-btn" :open-type="btn.openType" :app-parameter="btn.appParameter"
:lang="btn.lang" :sessionFrom="btn.sessionFrom" :sendMessageTitle="btn.sendMessageTitle"
:sendMessagePath="btn.sendMessagePath" :sendMessageImg="btn.sendMessageImg"
:showMessageCard="btn.showMessageCard" @contact="bindcontact" @opensetting="bindopensetting"
@launchapp="bindlaunchapp" v-if="btn.openType"></button>
<!-- #endif -->
</view>
</view>
<view class="fui-fab__btn-main" :class="{'fui-fab__btn-color':!getBgColor}"
......@@ -37,6 +44,12 @@
<fui-icon name="plus" :color="color" :size="80"></fui-icon>
</slot>
</view>
<!-- #ifndef H5 -->
<button class="fui-fab__opentype-btn" :open-type="openType" :app-parameter="appParameter" :lang="lang"
:sessionFrom="sessionFrom" :sendMessageTitle="sendMessageTitle" :sendMessagePath="sendMessagePath"
:sendMessageImg="sendMessageImg" :showMessageCard="showMessageCard" @contact="bindcontact"
@opensetting="bindopensetting" @launchapp="bindlaunchapp" v-if="openType"></button>
<!-- #endif -->
</view>
</view>
<!-- #endif -->
......@@ -51,18 +64,18 @@
<view class="fui-fab__button-box"
:class="[position==='left'?'fui-fab__button-left':'fui-fab__button-right']"
v-for="(btn,idx) in fabs" :key="idx" @tap.stop="handleClick($event,idx)">
<text class="fui-fab__btn-text" v-if="btn.text"
:style="{fontSize:(btn.size || 32)+'rpx',color:btn.color || '#fff',textAlign:position==='left'?'left':'right'}">{{btn.text}}</text>
<text class="fui-fab__btn-text" v-if="btn[textKey]"
:style="{fontSize:(btn.size || 32)+'rpx',color:btn.color || '#fff',textAlign:position==='left'?'left':'right'}">{{btn[textKey]}}</text>
<view class="fui-fab__button" :class="{'fui-fab__btn-color':!getBgColor && !btn.background }"
:style="{width:width+'rpx',height:width+'rpx',background:btn.background || getBgColor}">
<fui-icon :name="btn.name" v-if="btn.name" :color="btn.abbrColor || '#fff'"
<fui-icon :name="btn[nameKey]" v-if="btn[nameKey]" :color="btn.abbrColor || '#fff'"
:size="btn.abbrSize || 64"></fui-icon>
<image :src="btn.src"
<image :src="btn[srcKey]"
:style="{width:(btn.width || 56)+'rpx',height:(btn.height || 56)+'rpx',borderRadius:(btn.radius || 0)+'rpx'}"
v-if="!btn.name && btn.src" mode="widthFix"></image>
v-if="!btn[nameKey] && btn[srcKey]" mode="widthFix"></image>
<text class="fui-fab__btn-abbr"
:style="{fontSize:(btn.abbrSize || 36)+'rpx',lineHeight:(btn.abbrSize || 36)+'rpx',color:btn.abbrColor || '#fff'}"
v-if="!btn.name && !btn.src && btn.abbr">{{btn.abbr}}</text>
v-if="!btn[nameKey] && !btn[srcKey] && btn.abbr">{{btn.abbr}}</text>
</view>
</view>
</view>
......@@ -87,18 +100,18 @@
<view class="fui-fab__button-box"
:class="[position==='left'?'fui-fab__button-left':'fui-fab__button-right']"
v-for="(btn,idx) in fabs" :key="idx" @tap.stop="handleClick($event,idx)">
<text class="fui-fab__btn-text" v-if="btn.text"
:style="{fontSize:(btn.size || 32)+'rpx',color:btn.color || '#fff',textAlign:position==='left'?'left':'right'}">{{btn.text}}</text>
<text class="fui-fab__btn-text" v-if="btn[textKey]"
:style="{fontSize:(btn.size || 32)+'rpx',color:btn.color || '#fff',textAlign:position==='left'?'left':'right'}">{{btn[textKey]}}</text>
<view class="fui-fab__button" :class="{'fui-fab__btn-color':!getBgColor && !btn.background }"
:style="{width:width+'rpx',height:width+'rpx',background:btn.background || getBgColor}">
<fui-icon :name="btn.name" v-if="btn.name" :color="btn.abbrColor || '#fff'"
<fui-icon :name="btn[nameKey]" v-if="btn[nameKey]" :color="btn.abbrColor || '#fff'"
:size="btn.abbrSize || 64"></fui-icon>
<image :src="btn.src"
<image :src="btn[srcKey]"
:style="{width:(btn.width || 56)+'rpx',height:(btn.height || 56)+'rpx',borderRadius:(btn.radius || 0)+'rpx'}"
v-if="!btn.name && btn.src" mode="widthFix"></image>
v-if="!btn[nameKey] && btn[srcKey]" mode="widthFix"></image>
<text class="fui-fab__btn-abbr"
:style="{fontSize:(btn.abbrSize || 36)+'rpx',lineHeight:(btn.abbrSize || 36)+'rpx',color:btn.abbrColor || '#fff'}"
v-if="!btn.name && !btn.src && btn.abbr">{{btn.abbr}}</text>
v-if="!btn[nameKey] && !btn[srcKey] && btn.abbr">{{btn.abbr}}</text>
</view>
</view>
</view>
......@@ -131,7 +144,7 @@
export default {
name: "fui-fab",
mixins: [mpjs, bindingx],
emits: ['click', 'change'],
emits: ['click', 'change', 'opensetting', 'launchapp', 'contact'],
// components:{
// fuiIcon
// },
......@@ -142,6 +155,18 @@
return []
}
},
nameKey: {
type: String,
default: 'name'
},
srcKey: {
type: String,
default: 'src'
},
textKey: {
type: String,
default: 'text'
},
position: {
type: String,
default: 'right'
......@@ -186,6 +211,39 @@
isDrag: {
type: Boolean,
default: false
},
//v2.3.0+
openType: {
type: String,
default: ''
},
appParameter: {
type: String,
default: ''
},
lang: {
type: String,
default: 'en'
},
sessionFrom: {
type: String,
default: ''
},
sendMessageTitle: {
type: String,
default: ''
},
sendMessagePath: {
type: String,
default: ''
},
sendMessageImg: {
type: String,
default: ''
},
showMessageCard: {
type: Boolean,
default: false
}
},
computed: {
......@@ -233,7 +291,12 @@
}
},
data() {
let isApp = 0;
// #ifdef APP
isApp = 1;
// #endif
return {
isApp,
isShow: false,
isHidden: true,
timer: null,
......@@ -419,6 +482,21 @@
this._animation(this.isShow)
// #endif
},
bindopensetting({
detail = {}
} = {}) {
this.$emit('opensetting', detail);
},
bindlaunchapp({
detail = {}
} = {}) {
this.$emit('launchapp', detail);
},
bindcontact({
detail = {}
} = {}) {
this.$emit('contact', detail);
}
}
}
......@@ -519,6 +597,7 @@
/* #ifdef H5 */
cursor: pointer;
/* #endif */
position: relative;
}
.fui-fab__button-left {
......@@ -578,6 +657,7 @@
/* #ifdef H5 */
cursor: pointer;
/* #endif */
position: relative;
}
.fui-fab__btn-inner {
......@@ -603,4 +683,25 @@
}
/* #endif */
.fui-fab__opentype-btn {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-width: 0;
background-color: rgba(0, 0, 0, 0);
opacity: 0;
/* #ifndef APP-NVUE */
z-index: 1;
/* #endif */
}
/* #ifndef APP-NVUE */
.fui-fab__opentype-btn::after {
border-width: 0;
}
/* #endif */
</style>
......@@ -3,7 +3,8 @@ var movable = {
height: 100,
disabled: false,
left: 0,
top: 0
top: 0,
app: false
}
function isPC() {
......@@ -29,6 +30,7 @@ function setInitValue(dataset) {
movable.left = +dataset.left
//H5获取bool值为undefined
movable.disabled = (+dataset.disabled) == 1 ? true : false
movable.app = (+dataset.app) == 1 ? true : false
}
function touchstart(e, ins) {
......@@ -52,18 +54,20 @@ function styleChange(left, top, ins) {
})
}
function touchmove(e, ins, event) {
function touchmove(e, ins, events) {
if (movable.disabled) return;
if (e.preventDefault) {
// 阻止页面滚动
e.preventDefault()
}
if (movable.app && event && event.preventDefault && event.cancelable) {
event.preventDefault()
}
var state = {}
var touch = {}
if (isH5 && isPC()) {
touch = e;
if (event && event.instance) {
state = event.instance.getState()
if (events && events.instance) {
state = events.instance.getState()
}
} else {
touch = e.touches[0] || e.changedTouches[0]
......
<template>
<view class="fui-footer" :class="[isFixed?'fui-footer__fixed-bottom':'']" :style='{background:background}'>
<view class="fui-footer" :class="[isFixed?'fui-footer__fixed-bottom':'']"
:style="{background:background,bottom:bottom+'rpx'}">
<view class="fui-footer__link" v-if="navigate.length>0">
<navigator v-for="(item,index) in navigate" :key="index" class="fui-link__item"
: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}"
<navigator v-for="(item,index) in navigate" :key="index" class="fui-link__item" 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__color':!item.color,'fui-link__text-border':index===navigate.length-1}"
: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'}">
<view class="fui-footer__text"
:class="{'fui-as__safe-weex':iphoneX && safeArea,'fui-footer__safearea':safeArea}" :style="{color:color,fontSize:size+'rpx'}">
<slot name="text"></slot>
<text v-if="!$slots.text">{{text}}</text>
</view>
......@@ -57,6 +59,10 @@
type: Boolean,
default: false
},
bottom: {
type: [Number, String],
default: 0
},
//是否适配底部安全区
safeArea: {
type: Boolean,
......@@ -86,11 +92,13 @@
//34px
const res = uni.getSystemInfoSync();
let iphonex = false;
let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax',
'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini',
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini',
'iphone14pro', 'iphone14promax', 'iphone15'
]
let models = ['iphonex', 'iphonexr', 'iphonexsmax']
for (let i = 11; i < 20; i++) {
models.push(`iphone${i}`)
models.push(`iphone${i}mini`)
models.push(`iphone${i}pro`)
models.push(`iphone${i}promax`)
}
const model = res.model.replace(/\s/g, "").toLowerCase()
const newModel = model.split('<')[0]
if (models.includes(model) || models.includes(newModel) || (res.safeAreaInsets && res.safeAreaInsets
......@@ -122,14 +130,13 @@
.fui-footer__fixed-bottom {
position: fixed;
z-index: 99;
bottom: 0;
left: 0;
right: 0;
/* #ifndef APP-NVUE */
/* left: constant(safe-area-inset-left);
left: constant(safe-area-inset-left);
left: env(safe-area-inset-left);
right: constant(safe-area-inset-right);
right: env(safe-area-inset-right) */
right: env(safe-area-inset-right)
/* #endif */
}
......@@ -206,13 +213,17 @@
line-height: 1;
text-align: center;
padding-top: 8rpx;
font-weight: 400;
}
/* #ifndef APP-NVUE || MP-TOUTIAO */
.fui-footer__safearea {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
/* #endif */
font-weight: 400;
}
/* #endif */
/* #ifdef APP-NVUE || MP-TOUTIAO */
.fui-as__safe-weex {
padding-bottom: 34px;
......
......@@ -9,7 +9,18 @@
export default {
emits: ['input', 'update:modelValue'],
name: "fui-form-field",
// #ifdef MP-WEIXIN
behaviors: ['wx://form-field'],
// #endif
// #ifdef MP-BAIDU
behaviors: ['swan://form-field'],
// #endif
// #ifdef MP-QQ
behaviors: ['qq://form-field'],
// #endif
// #ifdef H5
behaviors: ['uni://form-field'],
// #endif
props: {
//是否为隐藏域
hidden: {
......
......@@ -265,6 +265,7 @@
watch: {
prop: {
handler(val) {
setTimeout(() => {
const key = `form.model.${val || 'fui_unknown'}`
if (val && val !== true && this.form && key != this.watchKey) {
this.watchKey = key
......@@ -286,6 +287,7 @@
}
})
}
}, 50)
},
immediate: true
}
......
......@@ -19,9 +19,10 @@ const form = {
const msgArr = item.msg || [];
const ruleLen = rule.length;
const validatorLen = validator.length;
let itemVal = formData[key];
itemVal = (itemVal === null || itemVal === undefined ? '' : itemVal).toString();
if (!key || (ruleLen === 0 && validatorLen === 0) || (!~rule.indexOf("required") &&
formData[key].toString()
.length === 0)) {
itemVal.length === 0)) {
continue;
}
if (ruleLen) {
......@@ -159,7 +160,7 @@ const form = {
return (value === null || value === '' || value === undefined) ? true : false;
},
_isMobile: function(value) {
return /^(?:13\d|14\d|15\d|16\d|17\d|18\d|19\d)\d{5}(\d{3}|\*{3})$/.test(value);
return /^(?:13\d|14\d|15\d|16\d|17\d|18\d|19\d)\d{5}(\d{3}|\*{3})$/.test(String(value));
},
_isEmail: function(value) {
return /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(value);
......@@ -182,7 +183,7 @@ const form = {
_isIdCard: function(value) {
let idCard = value;
if (idCard.length == 15) {
return this.__isValidityBrithBy15IdCard;
return this.__isValidityBrithBy15IdCard(value);
} else if (idCard.length == 18) {
let arrIdCard = idCard.split("");
if (this.__isValidityBrithBy18IdCard(idCard) && this.__isTrueValidateCodeBy18IdCard(arrIdCard)) {
......@@ -230,7 +231,7 @@ const form = {
let day = idCard15.substring(10, 12);
let temp_date = new Date(year, parseFloat(month) - 1, parseFloat(day));
if (temp_date.getYear() != parseFloat(year) || temp_date.getMonth() != parseFloat(month) - 1 ||
if (temp_date.getFullYear() != parseFloat(year) || temp_date.getMonth() != parseFloat(month) - 1 ||
temp_date.getDate() !=
parseFloat(day)) {
return false;
......@@ -240,11 +241,11 @@ const form = {
},
_isAmount: function(value) {
//是否为金额,只允许保留两位小数
return /^([0-9]*[.]?[0-9])[0-9]{0,1}$/.test(value);
return /^([0-9]*[.]?[0-9])[0-9]{0,1}$/.test(String(value));
},
_isNumber: function(value) {
//是否全为数字
return /^[0-9]+$/.test(value);
return /^[0-9]+$/.test(String(value));
},
//是否全部为中文
_isChinese: function(value) {
......
......@@ -5,7 +5,7 @@
:current="defActive" :autoplay="false" :duration="500">
<swiper-item :style="{height:height+'px'}" v-for="(item,index) in imgUrls" :key="index">
<view class="fui-gallery__swiper-item" :style="{height:height+'px'}">
<image mode="aspectFit" class="fui-gallery__img" :style="{height:height+'px'}" :src="item.src"
<image mode="aspectFit" class="fui-gallery__img" :style="{height:height+'px'}" :src="item[srcKey]"
@tap.stop="hideGallery"></image>
</view>
</swiper-item>
......@@ -30,6 +30,14 @@
return []
}
},
srcKey: {
type: String,
default: 'src'
},
descrKey: {
type: String,
default: 'descr'
},
show: {
type: Boolean,
default: false
......@@ -99,7 +107,7 @@
if (typeof vals[0] === 'string') {
vals = vals.map(item => {
return {
src: item
[this.srcKey]: item
}
})
}
......@@ -121,7 +129,7 @@
getDescr(index) {
let item = this.imgUrls[index]
if (item) {
this.descr = item.descr || ''
this.descr = item[this.descrKey] || ''
}
},
// #ifdef APP-NVUE || MP-TOUTIAO
......
......@@ -2,7 +2,7 @@
<view class="fui-horizontal__scroll" :style="{marginTop:marginTop+'rpx',marginBottom:marginBottom+'rpx'}"
ref="fui_horizontal__scroll">
<!-- #ifdef APP-VUE || MP-WEIXIN || H5-->
<scroll-view :show-scrollbar="false" scroll-x :upper-threshold="0" :lower-threshold="0" :data-width="width" :data-bgwidth="bgWidth"
<scroll-view :show-scrollbar="false" :scroll-x="true" :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">
......@@ -22,7 +22,7 @@
<!-- #endif -->
<!-- #ifndef APP-PLUS || MP-WEIXIN || H5-->
<scroll-view :show-scrollbar="false" scroll-x :upper-threshold="0" :lower-threshold="0" class="fui-hor__scroll-view"
<scroll-view :show-scrollbar="false" :scroll-x="true" :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>
......
<template>
<view class="fui-image__cropper" @touchmove.stop.prevent="stop">
<view class="fui-image__cropper" :style="{zIndex:zIndex,background:background}" @touchmove.stop.prevent="stop">
<!-- #ifdef APP-VUE || MP-WEIXIN || H5 -->
<image @touchstart="handler.touchstart" @touchmove="handler.touchmove" @touchend="handler.touchend"
<image :data-app="isApp" @touchstart="handler.touchstart" @touchmove="handler.touchmove" @touchend="handler.touchend"
@mousedown="handler.mousedown" class="fui-cropper__img"
:class="{'fui-cropper__img-hidden':!src || !initVal}" :src="src"
:style="{width: (imgWidth ? imgWidth : width) + 'px',height: imgHeight ? imgHeight + 'px' : 'auto',transitionDuration: ani ?'0.25s' : '0s'}"
......@@ -29,40 +29,34 @@
<view class="fui-cropper__right" :style="{width:(windowWidth-canvasWidth)/2+'px',height:height+'px'}">
</view>
<view class="fui-cropper__bottom" :style="{height:(windowHeight-canvasHeight)/2+'px'}"></view>
<view class="fui-cropper__border"
:style="{width:width+'px',height:height+'px', borderRadius: round ? canvasWidth/2+'px' : '0',borderColor:borderColor}">
</view>
<view class="fui-cropper__real-el"
:style="{width: (imgWidth ? imgWidth : width) + 'px',height: imgHeight ? imgHeight + 'px' : 'auto'}"
@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" ref="fui_cropper_real"></view>
</view>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<view class="fui-cropper__mask"
:style="{ width: width + 'px', height: height + 'px', borderRadius: round ? '50%' : '0' }">
<!-- #endif -->
<!-- #ifdef APP-VUE || MP-WEIXIN || H5-->
<view class="fui-cropper__border" :change:prop="handler.valsChange" :prop="changeval"
:data-width="width" :data-height="height" :data-windowHeight="windowHeight"
:data-windowWidth="windowWidth" :data-imgWidth="imgWidth" :data-imgHeight="imgHeight"
:data-imgTop="imgTop" :data-angle="angle"
:style="{ borderRadius: round ? '50%' : '0',borderColor:borderColor}"></view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view class="fui-cropper__border"
:style="{width:width+'px',height:height+'px', borderRadius: round ? canvasWidth/2+'px' : '0',borderColor:borderColor}">
</view>
<view class="fui-cropper__border" :change:prop="handler.valsChange" :prop="changeval" :data-width="width"
:data-height="height" :data-windowheight="windowHeight" :data-windowwidth="windowWidth"
:data-imgwidth="imgWidth" :data-imgheight="imgHeight" :data-imgtop="imgTop" :data-imgLeft="imgLeft"
:data-angle="angle" :style="{ borderRadius: round ? '50%' : '0',borderColor:borderColor}"></view>
<!-- #endif -->
<!-- #ifndef APP-PLUS || MP-WEIXIN || H5 -->
<view class="fui-cropper__border" :style="{ borderRadius: round ? '50%' : '0',borderColor:borderColor}">
</view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view class="fui-cropper__real-el"
:style="{width: (imgWidth ? imgWidth : width) + 'px',height: imgHeight ? imgHeight + 'px' : 'auto'}"
@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" ref="fui_cropper_real"></view>
<!-- #endif -->
</view>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<canvas canvas-id="fui_image_cropper" id="fui_image_cropper" :disable-scroll="true"
:style="{ width: nWidth * nScaleRatio + 'px', height: nWidth * nScaleRatio + 'px' }"
:style="{ width: nWidth * nScaleRatio + 'px', height: nHeight * nScaleRatio + 'px' }"
class="fui-cropper__canvas"></canvas>
<!-- #endif -->
</view>
......@@ -127,6 +121,18 @@
network: {
type: Boolean,
default: false
},
background: {
type: String,
default: 'rgba(0,0,0,.6)'
},
zIndex: {
type: [Number, String],
default: 10
},
isNav: {
type: Boolean,
default: false
}
},
watch: {
......@@ -146,13 +152,20 @@
},
width(val) {
this.nWidth = Number(val) || 280
this.changeReset()
},
height(val) {
this.nHeight = Number(val) || 280
this.changeReset()
}
},
data() {
let isApp = 0;
// #ifdef APP
isApp = 1;
// #endif
return {
isApp,
windowHeight: 600,
windowWidth: 400,
cutX: 0,
......@@ -185,9 +198,16 @@
},
mounted() {
let sys = uni.getSystemInfoSync();
this.windowHeight = sys.windowHeight
let windowHeight = sys.windowHeight;
this.windowWidth = sys.windowWidth
this.imgTop = sys.windowHeight / 2;
// #ifdef H5
if (this.isNav) {
//使用了自带导航栏
windowHeight += 44;
}
// #endif
this.windowHeight = windowHeight;
this.imgTop = windowHeight / 2;
this.imgLeft = sys.windowWidth / 2;
this.$nextTick(() => {
// #ifndef APP-NVUE
......@@ -219,10 +239,27 @@
this.scale = 1;
this.angle = 0;
let sys = uni.getSystemInfoSync();
this.imgTop = sys.windowHeight / 2;
let windowHeight = sys.windowHeight;
// #ifdef H5
if (this.isNav) {
windowHeight += 44;
}
// #endif
this.imgTop = windowHeight / 2;
this.imgLeft = sys.windowWidth / 2;
this.changeval = `4_${this.getRandom()}`;
},
changeReset() {
this.reset()
this.$nextTick(() => {
setTimeout(() => {
this.changeval = `1_${this.getRandom()}`;
setTimeout(() => {
this.src && this.handleImage(this.src)
}, 50);
}, 50);
})
},
calcSize(width, height) {
let imgWidth = width,
imgHeight = height;
......@@ -292,11 +329,11 @@
this.naturalHeight = height;
let orientation = res.orientation;
if (orientation && orientation != 'up') {
//此处需要测试,可能导致裁剪出错
// #ifdef APP-NVUE
//宽高传值颠倒
width = orientation == 'down' ? res.width : res.height;
height = orientation == 'down' ? res.height : res.width;
//此处需要测试,可能导致裁剪出错
// #ifdef APP-NVUE
this.compressImage(src, width, height, orientation);
// #endif
} else {
......@@ -568,7 +605,6 @@
<style scoped>
.fui-image__cropper {
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
......@@ -580,6 +616,7 @@
.fui-cropper__img,
.fui-cropper__real-el {
/* #ifndef APP-NVUE */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
/* #endif */
position: absolute;
......
......@@ -11,8 +11,8 @@ function isPC() {
}
return flag;
}
var isH5 = false
if (typeof window === 'object') isH5 = true
var isH5 = false;
if (typeof window === 'object') isH5 = true;
var cropper = {
cutX: 0,
cutY: 0,
......@@ -32,7 +32,8 @@ var cropper = {
imgLeft: 0,
windowHeight: 0,
windowWidth: 0,
init: true
init: true,
app: false
}
function touchstart(e, ins) {
......@@ -42,6 +43,8 @@ function touchstart(e, ins) {
} else {
touch = e.touches || e.changedTouches
}
var dataset = e.instance.getDataset()
cropper.app = (+dataset.app) == 1 ? true : false;
cropper.flagEndTouch = false;
if (touch.length == 1) {
cropper.touchRelative[0] = {
......@@ -91,6 +94,9 @@ function touchmove(e, ins) {
if (e.preventDefault) {
e.preventDefault()
}
if (cropper.app && event && event.preventDefault && event.cancelable) {
event.preventDefault()
}
var touch = null
if (isH5 && isPC()) {
touch = [e];
......
......@@ -28,7 +28,7 @@
<!-- #endif -->
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<scroll-view class="fui-index__list-sv" scroll-y :scroll-into-view="scrollViewId"
<scroll-view class="fui-index__list-sv" :scroll-y="true" :scroll-into-view="scrollViewId"
@scrolltolower="scrolltolower">
<slot></slot>
<view :id="'fui_il_letter_'+idx" v-for="(list, idx) in lists" :key="list.key">
......
......@@ -6,7 +6,7 @@
</view>
<slot></slot>
</view>
<input :type="type" v-model="inputValue" :disabled="disabled" @blur="blur" class="fui-number__input"
<input :type="type" :value="inputValue" :disabled="disabled" @blur="blur" class="fui-number__input"
:style="{ color: color, fontSize: size + 'rpx', backgroundColor: backgroundColor, height: height + 'rpx', minHeight: height + 'rpx', width: width + 'rpx',borderRadius:radius+'rpx',marginLeft:margin+'rpx',marginRight:margin+'rpx' }" />
<view class="fui-number__plus" :style="{minWidth:signWidth+'rpx',minHeight:signWidth+'rpx'}"
:class="[disabled || inputValue >= max ? 'fui-number__disabled' : '']" @tap="plus">
......@@ -38,6 +38,11 @@
default: 1
},
// #endif
//初始化以及页面改变value值时是否触发change等事件
valueEmit: {
type: Boolean,
default: true
},
//number、text(主要用与输入负号)
type: {
type: String,
......@@ -124,6 +129,7 @@
}
},
created() {
this.isEmit = this.valueEmit;
// #ifndef VUE3
this.inputValue = this.getValue(this.value);
// #endif
......@@ -145,17 +151,20 @@
return {
inputValue: 0,
oldValue: 0,
isNvue: isNvue
isNvue: isNvue,
isEmit: true
};
},
watch: {
// #ifndef VUE3
value(val) {
this.isEmit = this.valueEmit;
this.inputValue = this.getValue(val);
},
// #endif
// #ifdef VUE3
modelValue(val) {
this.isEmit = this.valueEmit;
this.inputValue = this.getValue(val);
},
// #endif
......@@ -163,6 +172,7 @@
if (!isNaN(Number(newVal)) && Number(newVal) !== Number(oldVal)) {
const val = this.getValue(+newVal)
this.oldValue = val
if (this.isEmit) {
this.$emit("change", {
value: val,
index: this.index,
......@@ -175,6 +185,9 @@
this.$emit("update:modelValue", +val);
// #endif
}
this.isEmit = true;
}
}
},
methods: {
......@@ -226,6 +239,7 @@
},
blur: function(e) {
let value = e.detail.value;
this.inputValue = value;
if (value && !isNaN(Number(value))) {
if (~value.indexOf('.') && Number.isInteger(this.step) && Number.isInteger(Number(value))) {
value = value.split('.')[0];
......@@ -236,9 +250,9 @@
}
setTimeout(() => {
e.detail.value = value
this.inputValue = String(value);
this.$emit('blur', e)
this.inputValue = value;
}, this.type === 'text' ? 100 : 0)
}, 100)
}
}
};
......@@ -313,10 +327,11 @@
/* #ifdef H5 */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button{
::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* #endif */
.fui-number__disabled {
......
......@@ -73,8 +73,13 @@
//加group是为了避免在表单中使用时给组件加value属性
behaviors: ['wx://form-field-group'],
// #endif
// #ifdef MP-BAIDU || MP-QQ || H5
//如果在这些平台不需要也能识别,则删除
// #ifdef MP-BAIDU
behaviors: ['swan://form-field'],
// #endif
// #ifdef MP-QQ
behaviors: ['qq://form-field'],
// #endif
// #ifdef H5
behaviors: ['uni://form-field'],
// #endif
// #ifdef MP-WEIXIN
......@@ -428,7 +433,7 @@
if ((this.modelModifiers.number || this.number || this.type === 'digit' || this.type === 'number') && !
isNaN(currentVal) && Number.isSafeInteger(currentVal)) {
let eVal = this.type === 'digit' ? value : currentVal
if (typeof currentVal === 'number') {
if (typeof eVal === 'number') {
const min = Number(this.min)
const max = Number(this.max)
if (typeof min === 'number' && currentVal < min) {
......
......@@ -3,7 +3,7 @@
:class="{'fui-landscape__fixed':!absolute,'fui-landscape__absolute':absolute,'fui-landscape__show':isShow}"
:style="{background:maskBackground,zIndex:zIndex}" v-if="isShow || !isNvue" @tap.stop="closeWin"
ref="fui_landscape_ani">
<view class="fui-landscape__inner">
<view class="fui-landscape__inner" :style="{marginTop:top+'rpx'}">
<slot></slot>
<view class="fui-landscape__icon"
:class="{'fui-landscape__icon-rt':position==2,'fui-landscape__icon-def':position==3}" :style="getStyles"
......@@ -56,6 +56,10 @@
type: Boolean,
default: false
},
top: {
type: [Number, String],
default: 0
},
maskClosable: {
type: Boolean,
default: false
......
......@@ -102,8 +102,9 @@
this.visible = this.local ? true : (this.placeholder ? true : false);
this.observer = null;
},
// #ifndef APP-NVUE
mounted() {
this.$nextTick(() => {
// #ifndef APP-NVUE
this.isMounted = true
setTimeout(() => {
// #ifdef H5
......@@ -119,11 +120,18 @@
this.startObserver()
// #endif
}, 50)
},
// #endif
// #ifdef APP-NVUE
setTimeout(() => {
!this.show && this.handleAppear()
}, 2500)
// #endif
})
},
// #ifdef H5
updated() {
if(!this.isMounted){
if (!this.isMounted) {
this.handleFade()
}
},
......
......@@ -160,11 +160,13 @@
//34px
const res = uni.getSystemInfoSync();
let iphonex = false;
let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax',
'iphone12', 'iphone12mini', 'iphone12pro', 'iphone12promax', 'iphone13', 'iphone13mini',
'iphone13pro', 'iphone13promax', 'iphone14', 'iphone14mini',
'iphone14pro', 'iphone14promax'
]
let models = ['iphonex', 'iphonexr', 'iphonexsmax']
for (let i = 11; i < 20; i++) {
models.push(`iphone${i}`)
models.push(`iphone${i}mini`)
models.push(`iphone${i}pro`)
models.push(`iphone${i}promax`)
}
const model = res.model.replace(/\s/g, "").toLowerCase()
const newModel = model.split('<')[0]
if (models.includes(model) || models.includes(newModel) || (res.safeAreaInsets && res.safeAreaInsets
......
<template>
<view class="fui-modal__wrap" :style="{background:maskBackground,zIndex:zIndex}"
:class="{'fui-modal__fadein':isShow}" @tap="closeModal" @touchmove.stop.prevent="stop" v-if="isShow || !isNvue"
ref="fui_modal_ani">
:class="{'fui-modal__fadein':isShow}" @tap="closeModal" v-if="isShow || !isNvue" ref="fui_modal_ani">
<!-- @touchmove.stop.prevent="stop" -->
<view class="fui-modal__inner"
:style="{width:width+'rpx',background:background,borderRadius:boxRadius+'rpx',paddingTop:padding+'rpx',paddingBottom:padding+'rpx'}"
:style="{width:width+'rpx',background:background,borderRadius:boxRadius+'rpx',paddingTop:padding+'rpx',paddingBottom:padding+'rpx',marginTop:top+'rpx'}"
@tap.stop="stop">
<text class="fui-modal__title" :style="{fontSize:size+'rpx',color:color}"
v-if="title && title!==true">{{title}}</text>
......@@ -88,6 +88,10 @@
type: [Number, String],
default: 640
},
top: {
type: [Number, String],
default: 0
},
background: {
type: String,
default: '#FFFFFF'
......@@ -343,10 +347,6 @@
/* #endif */
/* #ifndef APP-NVUE */
border-width: 1rpx;
transform: translateZ(0);
/* #endif */
/* #ifdef H5 */
border-width: 1px;
/* #endif */
border-style: solid;
......
......@@ -2,7 +2,7 @@
<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"
:data-width="maxWidth" :data-height="maxHeight" :data-left="eLeft" :data-top="eTop" :data-app="isApp"
@touchstart="handler.touchstart" @touchmove="handler.touchmove" @mousedown="handler.mousedown"
:style="getStyles">
<slot></slot>
......@@ -11,7 +11,7 @@
<!-- #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"
:data-width="maxWidth" :data-height="maxHeight" :data-left="eLeft" :data-top="eTop" :data-app="isApp"
@touchstart="handler.touchstart" :catchtouchmove="handler.touchmove" :style="getStyles">
<slot></slot>
</view>
......@@ -76,7 +76,12 @@
}
},
data() {
let isApp = 0;
// #ifdef APP
isApp = 1;
// #endif
return {
isApp,
maxWidth: 0,
maxHeight: 0,
eLeft: 0,
......
......@@ -3,7 +3,8 @@ var movable = {
height: 100,
direction: '',
left: 0,
top: 0
top: 0,
app: false
}
function isPC() {
......@@ -28,6 +29,7 @@ function setInitValue(dataset, isChange) {
movable.top = +dataset.top
movable.left = +dataset.left
movable.direction = dataset.direction
movable.app = (+dataset.app) == 1 ? true : false;
}
function touchstart(e, ins) {
......@@ -77,18 +79,20 @@ function getTop(pageY, state) {
return top
}
function touchmove(e, ins, event) {
function touchmove(e, ins, events) {
if (movable.direction == 'none') return;
if (e.preventDefault) {
// 阻止页面滚动
e.preventDefault()
}
if (movable.app && event && event.preventDefault) {
event.preventDefault()
}
var state = {}
var touch = {}
if (isH5 && isPC()) {
touch = e;
if (event && event.instance) {
state = event.instance.getState()
if (events && events.instance) {
state = events.instance.getState()
}
} else {
touch = e.touches[0] || e.changedTouches[0]
......
......@@ -40,39 +40,50 @@
default: ''
},
//标题字体大小,单位px
// #ifdef H5
size: {
type: [Number, String],
// #ifdef H5
default: 16
},
// #endif
// #ifndef H5
size: {
type: [Number, String],
default: 17
// #endif
},
// #endif
//标题颜色
// #ifdef APP-NVUE
color: {
type: String,
// #ifdef APP-NVUE
default: '#181818'
},
// #endif
// #ifndef APP-NVUE
color: {
type: String,
default: ''
// #endif
},
// #endif
fontWeight: {
type: [Number, String],
default: 500
},
//背景颜色
// #ifdef APP-NVUE
background: {
type: String,
// #ifdef APP-NVUE
default: '#fff'
},
// #endif
// #ifndef APP-NVUE
background: {
type: String,
default: ''
// #endif
},
// #endif
//是否需要底部分割线
splitLine: {
type: Boolean,
......
......@@ -6,11 +6,11 @@
<slot></slot>
</view>
<view class="fui-notice__wrap" :class="{'fui-notice__wrap-scroll':scrollable}"
:style="{height:scrollable&& !isNvue?size+'rpx':'auto'}" ref="fui_notice_box">
:style="{height:scrollable&& !isNvue?getHeight:'auto'}" ref="fui_notice_box">
<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: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}"
:style="{color:getColor,fontSize:size+'rpx',lineHeight:scrollable && !isNvue?getHeight:'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>
......@@ -90,6 +90,9 @@
}
// #endif
return color;
},
getHeight() {
return `${Math.min(Number(this.height),Number(this.size)*2)}rpx`
}
},
data() {
......
<template>
<text class="fui-digitalnumbers"
:class="{'fui-number__highlight':!disabled && highlight,'fui-number__color':!color || color===true}"
:style="{color:getColor, fontSize: getSize, fontWeight: fontWeight,lineHeight:lineHeight?getSize:'auto',textDecoration:decoration}"
@click="handleClick">{{text}}</text>
</template>
<script>
// #ifdef APP-NVUE
var domModule = weex.requireModule('dom');
import fuinumbers from './numbers.ttf'
domModule.addRule('fontFace', {
'fontFamily': 'DigitalNumbers',
'src': "url('" + fuinumbers + "')"
});
// #endif
export default {
emits: ['click'],
name: "fui-number",
// #ifdef MP-WEIXIN
options: {
virtualHost: true,
addGlobalClass: true
},
// #endif
props: {
//数字值
text: {
type: [Number, String],
default: ''
},
size: {
type: [Number, String],
default: 0
},
//rpx | px
unit: {
type: String,
default: ''
},
color: {
type: String,
default: '#333'
},
//字重
fontWeight: {
type: [Number, String],
default: 'normal'
},
//是否禁用点击
disabled: {
type: Boolean,
default: false
},
//是否有点击效果
highlight: {
type: Boolean,
default: false
},
//none、 underline、line-through
decoration: {
type: String,
default: 'none'
},
//是否将行高设置与字体大小一致
lineHeight: {
type: Boolean,
default: false
},
params: {
type: [Number, String],
default: 0
}
},
computed: {
getSize() {
const size = (uni.$fui && uni.$fui.fuiNumber && uni.$fui.fuiNumber.size) || 32
const unit = (uni.$fui && uni.$fui.fuiNumber && uni.$fui.fuiNumber.unit) || 'rpx'
return (this.size || size) + (this.unit || unit)
},
getColor() {
let color = this.color;
// #ifdef APP-NVUE
if (!color && color !== true) {
color = '#333333'
}
// #endif
return color;
}
},
methods: {
handleClick() {
if (this.disabled) return;
this.$emit('click', {
text: this.text,
params: this.params
});
}
}
}
</script>
<style scoped>
/* #ifndef APP-NVUE */
/* 头条小程序组件内不能引入字体,需要在父级页面引入字体文件*/
@font-face {
font-family: DigitalNumbers;
src: url("./numbers.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
.fui-number__color {
color: var(--fui-color-section, #333333) !important;
}
/* #endif */
.fui-digitalnumbers {
font-family: DigitalNumbers;
text-decoration: none;
}
.fui-number__highlight {
/* #ifdef H5 */
cursor: pointer;
/* #endif */
opacity: 1;
}
.fui-number__highlight:active {
opacity: .5;
}
</style>
......@@ -21,7 +21,7 @@
v-for="(item,index) in pageNumber" :key="index"
:style="{background:currentIndex===item?getActiveBgColor:pageBgColor,borderRadius:radius+'rpx'}"
@tap.stop="handleClick(item,index)">
<text class="fui-page__num-text" :class="{'fui-pagination__color':!color && currentIndex!==item}"
<text class="fui-page__num-text" :class="{'fui-pagination__color':!pageColor && currentIndex!==item}"
:style="{color:currentIndex===item?activeColor:pageColor}">{{item}}</text>
</view>
</view>
......
......@@ -11,10 +11,11 @@
class="fui-panel__border" :class="{'fui-panel__border-color':!borderColor}"></view>
</view>
<view class="fui-panel__mediabox" :style="{paddingLeft:padding+'rpx',paddingRight:padding+'rpx'}"
:class="{'fui-mediabox__center':!flexStart,'fui-panel__hover-weex':highlight}" v-for="(item,index) in listData"
:key="index" :hover-class="highlight?'fui-panel__hover':''" :hover-stay-time="150"
@tap="handleClick(index)">
<view class="fui-panel__mb-hd" v-if="item[src]" :style="{width:width+'rpx',height:height+'rpx'}">
:class="{'fui-mediabox__center':!flexStart,'fui-panel__hover-weex':highlight,'fui-panel__mediabox-row':!rowReverse,'fui-panel__row-reverse':rowReverse}"
v-for="(item,index) in listData" :key="index" :hover-class="highlight?'fui-panel__hover':''"
:hover-stay-time="150" @tap="handleClick(index)">
<view class="fui-panel__mb-hd" :class="[rowReverse?'fui-panel__mb-hdright':'fui-panel__mb-hdleft']"
v-if="item[src]" :style="{width:width+'rpx',height:height+'rpx'}">
<image class="fui-panel__mb-thumb" :src="item[src]" mode="widthFix"
:style="{width:width+'rpx',height:height+'rpx',borderRadius:radius+'rpx'}" />
</view>
......@@ -62,15 +63,18 @@
return {}
}
},
// #ifdef APP-NVUE
background: {
type: String,
// #ifdef APP-NVUE
default: '#fff'
},
// #endif
// #ifndef APP-NVUE
background: {
type: String,
default: ''
// #endif
},
// #endif
//是否有点击效果
highlight: {
type: Boolean,
......@@ -80,6 +84,10 @@
type: Boolean,
default: false
},
rowReverse: {
type: Boolean,
default: false
},
marginTop: {
type: [Number, String],
default: 0
......@@ -113,15 +121,18 @@
type: [Number, String],
default: 32
},
// #ifdef APP-NVUE
headColor: {
type: String,
// #ifdef APP-NVUE
default: '#181818'
},
// #endif
// #ifndef APP-NVUE
headColor: {
type: String,
default: ''
// #endif
},
// #endif
bdBorder: {
type: Boolean,
default: true
......@@ -152,15 +163,18 @@
type: [Number, String],
default: 32
},
// #ifdef APP-NVUE
color: {
type: String,
// #ifdef APP-NVUE
default: '#181818'
},
// #endif
// #ifndef APP-NVUE
color: {
type: String,
default: ''
// #endif
},
// #endif
fontWeight: {
type: [Number, String],
default: 'normal'
......@@ -169,41 +183,51 @@
type: [Number, String],
default: 28
},
// #ifdef APP-NVUE
descColor: {
type: String,
// #ifdef APP-NVUE
default: '#7F7F7F'
},
// #endif
// #ifndef APP-NVUE
descColor: {
type: String,
default: ''
// #endif
},
// #endif
infoSize: {
type: [Number, String],
default: 24
},
// #ifdef APP-NVUE
infoColor: {
type: String,
// #ifdef APP-NVUE
default: '#b2b2b2'
},
// #endif
// #ifndef APP-NVUE
infoColor: {
type: String,
default: ''
// #endif
},
//是否需要panel外层上下线条
isBorder: {
type: Boolean,
default: true
},
// #endif
// #ifdef APP-NVUE
borderColor: {
type: String,
// #ifdef APP-NVUE
default: '#eee'
},
// #endif
// #ifndef APP-NVUE
borderColor: {
type: String,
default: ''
},
// #endif
//是否需要panel外层上下线条
isBorder: {
type: Boolean,
default: true
}
},
......@@ -228,7 +252,7 @@
deep: true
},
//未做深度监听
fields(val){
fields(val) {
this.handleFileds()
}
},
......@@ -308,13 +332,14 @@
transform: scaleY(.5)
}
.fui-panel__wrap:after{
.fui-panel__wrap:after {
content: " ";
position: absolute;
left: 0;
right: 0;
height: 1px;
}
.fui-panel__wrap::before {
content: " ";
position: absolute;
......@@ -332,10 +357,11 @@
transform: scaleY(.5)
}
.fui-panel__unlined::before{
.fui-panel__unlined::before {
border-top-width: 0 !important;
border-bottom-width: 0 !important;
}
.fui-panel__unlined::after {
border-top-width: 0 !important;
border-bottom-width: 0 !important;
......@@ -389,15 +415,22 @@
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
}
.fui-panel__mediabox-row {
flex-direction: row;
}
.fui-panel__row-reverse {
flex-direction: row-reverse;
}
.fui-mediabox__center {
align-items: center;
}
.fui-panel__mb-hd {
margin-right: 32rpx;
overflow: hidden;
/* #ifndef APP-NVUE */
display: flex;
......@@ -406,6 +439,15 @@
justify-content: center;
}
.fui-panel__mb-hdleft {
margin-right: 32rpx;
}
.fui-panel__mb-hdright {
margin-left: 32rpx;
}
.fui-panel__mb-thumb {
/* #ifndef APP-NVUE */
display: block;
......
<template>
<view class="fui-parse__group">
<slot></slot>
</view>
</template>
<script>
export default {
name: "fui-parse-group",
emits: ['atap', 'preview'],
provide() {
return {
parsegroup: this
}
},
props: {
imgPreview: {
type: Boolean,
default: true
},
thBgcolor: {
type: Boolean,
default: true
}
},
data() {
const pageNodeKey = `fui_parse_${Math.ceil(Math.random() * 10e5).toString(36)}`
return {
pageNodeKey
}
},
methods: {
onATap(href) {
this.$emit('atap', href)
},
previewImage(src, imageUrls) {
this.$emit('preview', {
src,
imageUrls
})
}
},
}
</script>
<style scoped>
.fui-parse__group {
width: 100%;
}
</style>
<template>
<view class="hljs">
<rich-text :nodes="code" space="nbsp"></rich-text>
</view>
</template>
<script>
import hljs from './high-light/index.js'
// 支持的解析语言列表
const LANGUAGE_LIST = [
'javascript',
'css',
'xml',
'sql',
'typescript',
'markdown',
'c++',
'c',
];
export default {
name: "firstui-audio",
props: {
codeText: {
type: String,
default: ''
},
language: {
type: String,
default: 'javascript'
}
},
data() {
return {
code: ''
};
},
created() {
this.parseCode(this.codeText, this.language)
},
methods: {
parseCode(input, language) {
const lang = LANGUAGE_LIST.includes(language) ? language : 'javascript'
const {
value
} = hljs.highlight(lang, input)
const highlighted = value.replace('&amp;', '&').trim()
let codeResult = `<code class="${lang}">${highlighted}</code>`
codeResult = codeResult.replace(/\n/g, "<br/>").replace('\<code\>', '')
this.code = codeResult;
}
}
}
</script>
<style>
/*
Style with support for rainbow parens
*/
.hljs {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
overflow-x: auto;
padding: 0.5em;
background: #282c34;
color: #d1d9e1;
}
.hljs-comment,
.hljs-quote {
color: #969896;
font-style: italic;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-type,
.hljs-addition {
color: #cc99cc;
}
.hljs-number,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #f99157;
}
.hljs-string,
.hljs-doctag,
.hljs-regexp {
color: #8abeb7;
}
.hljs-title,
.hljs-name,
.hljs-section,
.hljs-built_in {
color: #b5bd68;
}
.hljs-variable,
.hljs-template-variable,
.hljs-selector-id,
.hljs-class .hljs-title {
color: #ffcc66;
}
.hljs-section,
.hljs-name,
.hljs-strong {
font-weight: bold;
}
.hljs-symbol,
.hljs-bullet,
.hljs-subst,
.hljs-meta,
.hljs-link {
color: #f99157;
}
.hljs-deletion {
color: #dc322f;
}
.hljs-formula {
background: #eee8d5;
}
.hljs-attr,
.hljs-attribute {
color: #81a2be;
}
.hljs-emphasis {
font-style: italic;
}
/* #ifdef VUE3 */
:deep(.hljs-comment),
:deep(.hljs-quote){
color: #969896;
font-style: italic;
}
:deep(.hljs-keyword),
:deep(.hljs-selector-tag),
:deep(.hljs-literal),
:deep(.hljs-type),
:deep(.hljs-addition) {
color: #cc99cc;
}
:deep(.hljs-number),
:deep(.hljs-selector-attr),
:deep(.hljs-selector-pseudo) {
color: #f99157;
}
:deep(.hljs-string),
:deep(.hljs-doctag),
:deep(.hljs-regexp) {
color: #8abeb7;
}
:deep(.hljs-title),
:deep(.hljs-name),
:deep(.hljs-section),
:deep(.hljs-built_in) {
color: #b5bd68;
}
:deep(.hljs-variable),
:deep(.hljs-template-variable),
:deep(.hljs-selector-id),
:deep(.hljs-class .hljs-title) {
color: #ffcc66;
}
:deep(.hljs-section),
:deep(.hljs-name),
:deep(.hljs-strong) {
font-weight: bold;
}
:deep(.hljs-symbol),
:deep(.hljs-bullet),
:deep(.hljs-subst),
:deep(.hljs-meta),
:deep(.hljs-link) {
color: #f99157;
}
:deep(.hljs-deletion) {
color: #dc322f;
}
:deep(.hljs-formula) {
background: #eee8d5;
}
:deep(.hljs-attr),
:deep(.hljs-attribute) {
color: #81a2be;
}
:deep(.hljs-emphasis) {
font-style: italic;
}
/* #endif */
</style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论