提交 a8af7394 作者: 方治民

合并分支 'main' 到 'main'

Main

查看合并请求 hntq/hntq-v5!19
import fs from 'node:fs' import fs from 'node:fs'
import path from 'node:path' import path from 'node:path'
import process from 'node:process'
import dotenv from 'dotenv' import dotenv from 'dotenv'
export function isDevFn(mode: string): boolean { export function isDevFn(mode: string): boolean {
......
...@@ -11,7 +11,7 @@ import tags from '@dcloudio/uni-helper-json/dist/tags.json' ...@@ -11,7 +11,7 @@ import tags from '@dcloudio/uni-helper-json/dist/tags.json'
/** /**
* 根据 @dcloudio/uni-helper-json 生成组件 .d.ts 描述文件,对组件进行高亮展示 * 根据 @dcloudio/uni-helper-json 生成组件 .d.ts 描述文件,对组件进行高亮展示
*/ */
function generateUniComponentsTypes() { async function generateUniComponentsTypes() {
const components = Object.keys(tags).map((key) => `'${key}': UniComponent`) const components = Object.keys(tags).map((key) => `'${key}': UniComponent`)
const content = ` const content = `
// generated by @dcloudio/uni-helper-json/dist/tags.json // generated by @dcloudio/uni-helper-json/dist/tags.json
...@@ -32,7 +32,7 @@ function generateUniComponentsTypes() { ...@@ -32,7 +32,7 @@ function generateUniComponentsTypes() {
export {} export {}
` `
const formatted = prettier.format(content, { const formatted = await prettier.format(content, {
parser: 'typescript', parser: 'typescript',
// eslint-disable-next-line @typescript-eslint/no-require-imports // eslint-disable-next-line @typescript-eslint/no-require-imports
...require('../../prettier.config'), ...require('../../prettier.config'),
......
...@@ -66,23 +66,23 @@ ...@@ -66,23 +66,23 @@
} }
}, },
"dependencies": { "dependencies": {
"@dcloudio/uni-app": "3.0.0-3080720230703001", "@dcloudio/uni-app": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-app-plus": "3.0.0-3080720230703001", "@dcloudio/uni-app-plus": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-components": "3.0.0-3080720230703001", "@dcloudio/uni-components": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-h5": "3.0.0-3080720230703001", "@dcloudio/uni-h5": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-mp-alipay": "3.0.0-3080720230703001", "@dcloudio/uni-mp-alipay": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-mp-baidu": "3.0.0-3080720230703001", "@dcloudio/uni-mp-baidu": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-mp-jd": "3.0.0-3080720230703001", "@dcloudio/uni-mp-jd": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-mp-kuaishou": "3.0.0-3080720230703001", "@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-mp-lark": "3.0.0-3080720230703001", "@dcloudio/uni-mp-lark": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-mp-qq": "3.0.0-3080720230703001", "@dcloudio/uni-mp-qq": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-mp-toutiao": "3.0.0-3080720230703001", "@dcloudio/uni-mp-toutiao": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-mp-weixin": "3.0.0-3080720230703001", "@dcloudio/uni-mp-weixin": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-quickapp-webview": "3.0.0-3080720230703001", "@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-ui": "^1.4.28", "@dcloudio/uni-ui": "^1.4.28",
"@faker-js/faker": "^8.0.2", "@faker-js/faker": "^8.0.2",
"@vue/runtime-core": "~3.2.47", "@vue/runtime-core": "~3.2.47",
"@vueuse/core": "^10.2.1", "@vueuse/core": "^10.3.0",
"axios": "^1.4.0", "axios": "^1.4.0",
"crypto-js": "^4.1.1", "crypto-js": "^4.1.1",
"dayjs": "^1.11.9", "dayjs": "^1.11.9",
...@@ -95,65 +95,65 @@ ...@@ -95,65 +95,65 @@
"vue": "~3.2.47", "vue": "~3.2.47",
"vue-i18n": "^9.2.2", "vue-i18n": "^9.2.2",
"vue-request": "^2.0.3", "vue-request": "^2.0.3",
"vue-types": "^5.1.0" "vue-types": "^5.1.1"
}, },
"devDependencies": { "devDependencies": {
"@antfu/eslint-config": "^0.39.7", "@antfu/eslint-config": "^0.40.2",
"@commitlint/cli": "^17.6.6", "@commitlint/cli": "^17.7.1",
"@commitlint/config-conventional": "^17.6.6", "@commitlint/config-conventional": "^17.7.0",
"@dcloudio/types": "^3.3.3", "@dcloudio/types": "^3.3.3",
"@dcloudio/uni-automator": "3.0.0-3080720230703001", "@dcloudio/uni-automator": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-cli-shared": "3.0.0-3080720230703001", "@dcloudio/uni-cli-shared": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-helper-json": "^1.0.13", "@dcloudio/uni-helper-json": "^1.0.13",
"@dcloudio/uni-stacktracey": "3.0.0-3080720230703001", "@dcloudio/uni-stacktracey": "3.0.0-alpha-3081220230802001",
"@dcloudio/vite-plugin-uni": "3.0.0-3080720230703001", "@dcloudio/vite-plugin-uni": "3.0.0-alpha-3081220230802001",
"@iconify/json": "^2.2.86", "@iconify/json": "^2.2.101",
"@types/crypto-js": "^4.1.1", "@types/crypto-js": "^4.1.1",
"@types/lodash-es": "^4.17.7", "@types/lodash-es": "^4.17.8",
"@types/node": "^18.16.19", "@types/node": "^20.4.10",
"@types/prettier": "^2.7.3", "@types/prettier": "^2.7.3",
"@types/qs": "^6.9.7", "@types/qs": "^6.9.7",
"@types/stompjs": "^2.3.5", "@types/stompjs": "^2.3.5",
"@types/urijs": "^1.19.19", "@types/urijs": "^1.19.19",
"@typescript-eslint/eslint-plugin": "^5.61.0", "@typescript-eslint/eslint-plugin": "^6.3.0",
"@typescript-eslint/parser": "^5.61.0", "@typescript-eslint/parser": "^6.3.0",
"commitizen": "^4.3.0", "commitizen": "^4.3.0",
"conventional-changelog-cli": "^3.0.0", "conventional-changelog-cli": "^3.0.0",
"cz-conventional-changelog": "^3.3.0", "cz-conventional-changelog": "^3.3.0",
"cz-customizable": "^7.0.0", "cz-customizable": "^7.0.0",
"cz-git": "^1.6.1", "cz-git": "^1.7.1",
"czg": "^1.6.1", "czg": "^1.7.1",
"dotenv": "^16.3.1", "dotenv": "^16.3.1",
"eslint": "^8.44.0", "eslint": "^8.47.0",
"eslint-config-prettier": "^8.8.0", "eslint-config-prettier": "^9.0.0",
"eslint-plugin-prettier": "^4.2.1", "eslint-plugin-prettier": "^5.0.0",
"eslint-plugin-vue": "^9.15.1", "eslint-plugin-vue": "^9.17.0",
"husky": "^8.0.3", "husky": "^8.0.3",
"jest": "27.0.4", "jest": "27.0.4",
"jest-environment-node": "27.5.1", "jest-environment-node": "27.5.1",
"less": "^4.1.3", "less": "^4.2.0",
"lint-staged": "^13.2.3", "lint-staged": "^13.2.3",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"picocolors": "^1.0.0", "picocolors": "^1.0.0",
"pont-engine": "^1.5.11", "pont-engine": "^1.5.12",
"postcss": "^8.4.24", "postcss": "^8.4.27",
"postcss-html": "^1.5.0", "postcss-html": "^1.5.0",
"postcss-less": "^6.0.0", "postcss-less": "^6.0.0",
"prettier": "^2.8.8", "prettier": "^3.0.1",
"rimraf": "^5.0.1", "rimraf": "^5.0.1",
"sass": "^1.63.6", "sass": "^1.65.1",
"sort-package-json": "^2.5.0", "sort-package-json": "^2.5.1",
"stylelint": "^15.10.0", "stylelint": "^15.10.2",
"stylelint-config-html": "^1.1.0", "stylelint-config-html": "^1.1.0",
"stylelint-config-recommended": "^12.0.0", "stylelint-config-recommended": "^13.0.0",
"stylelint-config-standard": "^33.0.0", "stylelint-config-standard": "^34.0.0",
"stylelint-order": "^6.0.3", "stylelint-order": "^6.0.3",
"typescript": "~5.0.4", "typescript": "~5.1.6",
"unocss": "^0.53.4", "unocss": "^0.54.3",
"unocss-preset-weapp": "^0.53.5", "unocss-preset-weapp": "^0.54.0",
"unplugin-auto-import": "^0.16.6", "unplugin-auto-import": "^0.16.6",
"unplugin-vue-components": "^0.25.1", "unplugin-vue-components": "^0.25.1",
"vite": "^4.3.9", "vite": "^4.4.9",
"vue-eslint-parser": "^9.3.1" "vue-eslint-parser": "^9.3.1"
}, },
"engines": { "engines": {
......
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -82,11 +82,6 @@ export enum Status { ...@@ -82,11 +82,6 @@ export enum Status {
INTERNAL_SERVER_ERROR = 500, INTERNAL_SERVER_ERROR = 500,
/** /**
* 未知错误
*/
UNKNOWN_ERROR = 500,
/**
* API 未实现 * API 未实现
*/ */
NOT_IMPLEMENTED = 501, NOT_IMPLEMENTED = 501,
......
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
}, },
zIndex: { zIndex: {
type: [Number, String], type: [Number, String],
default: 1001 default: 996
}, },
//是否适配底部安全区 //是否适配底部安全区
safeArea: { safeArea: {
...@@ -174,8 +174,7 @@ ...@@ -174,8 +174,7 @@
_animation(type) { _animation(type) {
if (!this.$refs['fui_asm_ani'] || !this.$refs['fui_as_ani']) return; if (!this.$refs['fui_asm_ani'] || !this.$refs['fui_as_ani']) return;
let styles = { let styles = {
transform: `translateY(${type ? '0' : '100%'})`, transform: `translateY(${type ? '0' : '100%'})`
opacity: type ? 1 : 0
} }
animation.transition( animation.transition(
this.$refs['fui_asm_ani'].ref, { this.$refs['fui_asm_ani'].ref, {
...@@ -247,7 +246,6 @@ ...@@ -247,7 +246,6 @@
transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
transition-property: transform;
transform: translateY(100%); transform: translateY(100%);
/* #endif */ /* #endif */
transform-origin: center center; transform-origin: center center;
...@@ -280,12 +278,12 @@ ...@@ -280,12 +278,12 @@
.fui-actionsheet__tips { .fui-actionsheet__tips {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
width: 100%; width: 100%;
display: flex;
box-sizing: border-box; box-sizing: border-box;
/* #endif */ /* #endif */
flex: 1; flex: 1;
padding: 40rpx 60rpx; padding: 40rpx 60rpx;
text-align: center; text-align: center;
display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-weight: normal; font-weight: normal;
......
...@@ -16,9 +16,9 @@ ...@@ -16,9 +16,9 @@
<view class="fui-alert__shrink"> <view class="fui-alert__shrink">
<slot name="right"></slot> <slot name="right"></slot>
</view> </view>
<icon @tap.stop="close" type="cancel" :size="closeSize" :color="closeColor" v-if="closable" <view :class="{'fui-alert__icon-close':desc}" v-if="closable">
:class="{'fui-alert__icon-close':desc}"> <icon @tap.stop="close" type="cancel" :size="closeSize" :color="closeColor"></icon>
</icon> </view>
</view> </view>
</template> </template>
......
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
}, },
zIndex: { zIndex: {
type: Number, type: Number,
default: 999 default: 980
}, },
closable: { closable: {
type: Boolean, type: Boolean,
...@@ -67,11 +67,13 @@ ...@@ -67,11 +67,13 @@
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
if (this.show) { setTimeout(() => {
this._ani(true) if (this.show) {
} else { this._ani(true)
this._aniHidden(this.show) } else {
} this._aniHidden(this.show)
}
}, 50)
}) })
}, },
data() { data() {
...@@ -153,10 +155,13 @@ ...@@ -153,10 +155,13 @@
display: flex; display: flex;
visibility: hidden; visibility: hidden;
transition: all 0.3s; transition: all 0.3s;
opacity: 0;
/* #endif */ /* #endif */
align-items: center; align-items: center;
justify-content: center; justify-content: center;
opacity: 0; /* #ifdef APP-NVUE */
opacity: 0.001;
/* #endif */
} }
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
......
...@@ -8,6 +8,9 @@ ...@@ -8,6 +8,9 @@
</template> </template>
<script> <script>
// #ifdef APP-NVUE
const dom = weex.requireModule('dom')
// #endif
//非easycom模式取消注释引入字体组件,按实际路径进行调整 //非easycom模式取消注释引入字体组件,按实际路径进行调整
// import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue" // import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
export default { export default {
...@@ -21,8 +24,10 @@ ...@@ -21,8 +24,10 @@
type: [Number, String] type: [Number, String]
}, },
targetRef: { targetRef: {
type: String, type: [String, Object],
default: '' default () {
return {}
}
}, },
threshold: { threshold: {
type: [Number, String], type: [Number, String],
...@@ -110,7 +115,13 @@ ...@@ -110,7 +115,13 @@
/* #endif */ /* #endif */
position: fixed; position: fixed;
z-index: 888; z-index: 888;
/* #ifndef APP-NVUE */
box-shadow: 0 0 6px rgb(0 0 0 / 12%); box-shadow: 0 0 6px rgb(0 0 0 / 12%);
/* #endif */
/* #ifdef APP-NVUE */
box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
/* #endif */
justify-content: center; justify-content: center;
align-items: center; align-items: center;
/* #ifdef H5 */ /* #ifdef H5 */
......
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
</template> </template>
<script> <script>
const sys = uni.getSystemInfoSync()
export default { export default {
name: "fui-badge", name: "fui-badge",
emits: ['click'], emits: ['click'],
...@@ -113,6 +114,22 @@ ...@@ -113,6 +114,22 @@
this.getWidth() this.getWidth()
}, },
methods: { methods: {
_getTextWidth(text) {
let sum = 0;
for (let i = 0, len = text.length; i < len; i++) {
if (text.charCodeAt(i) >= 0 && text.charCodeAt(i) <= 255)
sum = sum + 1;
else
sum = sum + 2;
}
const px = uni.upx2px(text.length > 1 ? 32 : 24)
var strCode = text.charCodeAt();
let multiplier = 12;
if (strCode >= 65 && strCode <= 90) {
multiplier = 15;
}
return (sum / 2 * multiplier) + px + 'px';
},
getWidth() { getWidth() {
let max = Number(this.max) let max = Number(this.max)
let val = Number(this.value) let val = Number(this.value)
...@@ -123,7 +140,7 @@ ...@@ -123,7 +140,7 @@
value = val > max ? `${max}+` : val value = val > max ? `${max}+` : val
} }
this.showValue = value; this.showValue = value;
this.width = this.dot ? '8px' : ((String(value).length * 16 + 21) + 'rpx') this.width = this.dot ? '8px' : this._getTextWidth(String(value))
}, },
handleClick() { handleClick() {
this.$emit('click'); this.$emit('click');
...@@ -149,6 +166,7 @@ ...@@ -149,6 +166,7 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center;
z-index: 10; z-index: 10;
} }
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<!-- #endif --> <!-- #endif -->
<!-- #ifdef APP-NVUE --> <!-- #ifdef APP-NVUE -->
<view class="fui-banner__arc-inner" <view class="fui-banner__arc-inner"
:style="{background:background,height:width+'rpx',width:width+'px',paddingLeft:(width-bannerWidth)/2+'px',paddingRight:(width-bannerWidth)/2+'px',left:'-'+(width-bannerWidth)/2+'px'}"> :style="{background:background,height:width+'px',width:width+'px',paddingLeft:(width-bannerWidth)/2+'px',paddingRight:(width-bannerWidth)/2+'px',left:'-'+(width-bannerWidth)/2+'px'}">
<slot></slot> <slot></slot>
</view> </view>
<!-- #endif --> <!-- #endif -->
...@@ -89,11 +89,6 @@ ...@@ -89,11 +89,6 @@
}, },
// #endif // #endif
methods: { methods: {
getPercent(val) {
//最低值120
val = Number(val || 0)
return val < 120 ? 120 : val
},
initArcWidth() { initArcWidth() {
let ratio = Number(this.ratio || 0) let ratio = Number(this.ratio || 0)
...@@ -153,6 +148,7 @@ ...@@ -153,6 +148,7 @@
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 10000px; border-bottom-right-radius: 10000px;
border-bottom-left-radius: 10000px; border-bottom-left-radius: 10000px;
justify-content: flex-end;
/* #endif */ /* #endif */
overflow: hidden; overflow: hidden;
} }
......
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
}, },
zIndex: { zIndex: {
type: [Number, String], type: [Number, String],
default: 1001 default: 996
}, },
//点击遮罩 是否可关闭 //点击遮罩 是否可关闭
maskClosable: { maskClosable: {
...@@ -146,7 +146,7 @@ ...@@ -146,7 +146,7 @@
} }
} }
); );
//android 部分手机隐藏时动画有抖动感,调整duration去动画 //nvue android 部分手机隐藏时动画有抖动感,调整duration去动画
animation.transition( animation.transition(
this.$refs['fui_bp_ani'].ref, { this.$refs['fui_bp_ani'].ref, {
styles: { styles: {
...@@ -189,8 +189,13 @@ ...@@ -189,8 +189,13 @@
visibility: hidden; visibility: hidden;
border-bottom-width: 0; border-bottom-width: 0;
overflow: hidden; overflow: hidden;
/* #endif */
opacity: 0; opacity: 0;
/* #endif */
/* #ifdef APP-NVUE */
opacity: 0.001;
/* #endif */
} }
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
......
...@@ -95,7 +95,7 @@ ...@@ -95,7 +95,7 @@
}, },
zIndex: { zIndex: {
type: [Number, String], type: [Number, String],
default: 1001 default: 997
}, },
background: { background: {
type: String, type: String,
...@@ -491,7 +491,7 @@ ...@@ -491,7 +491,7 @@
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
transform: rotate(45deg) translateY(6.5px); transform: rotate(45deg) translateX(6.5px);
/* #endif */ /* #endif */
} }
......
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<!-- #endif --> <!-- #endif -->
</view> </view>
<swiper :indicator-dots="false" :autoplay="false" :current="defCurrent" :duration="300" :vertical="vertical" <swiper :indicator-dots="false" :autoplay="false" :current="defCurrent" :duration="300" :vertical="vertical"
@change="swiperChange" class="fui-calendar__swiper" v-if="isMultiple"> @change="swiperChange" class="fui-calendar__swiper" style="height: 648rpx;" v-if="isMultiple">
<swiper-item v-for="(item,index) in monthArr" :key="item.key"> <swiper-item v-for="(item,index) in monthArr" :key="item.key">
<view class="fui-calendar__date-wrap"> <view class="fui-calendar__date-wrap">
<view class="fui-calendar__date" :style="{width:itemWidth}" :class="['fui-calendar__dh']" <view class="fui-calendar__date" :style="{width:itemWidth}" :class="['fui-calendar__dh']"
...@@ -92,6 +92,11 @@ ...@@ -92,6 +92,11 @@
return [] return []
} }
}, },
//v2.0.0+ 最多可选天数,type=2 || type=3有效
maxDays: {
type: [Number, String],
default: -1
},
minDate: { minDate: {
type: String, type: String,
default: '2010-01-01' default: '2010-01-01'
...@@ -238,7 +243,7 @@ ...@@ -238,7 +243,7 @@
}, },
itemWidth() { itemWidth() {
// #ifdef APP-NVUE // #ifdef APP-NVUE
return (Number(this.dateWidth.replace('px', '')) - 1) / 7 + 'px' return (Number(this.dateWidth.replace('px', '').replace('%','')) - 1) / 7 + 'px'
// #endif // #endif
// #ifndef APP-NVUE // #ifndef APP-NVUE
...@@ -516,6 +521,12 @@ ...@@ -516,6 +521,12 @@
return `${arr[0]}-${this.formatNum(arr[1])}-${this.formatNum(arr[2])}` return `${arr[0]}-${this.formatNum(arr[1])}-${this.formatNum(arr[2])}`
}) })
this.values = value; this.values = value;
} else {
this.year = year;
if (this._isDisAbled(month - 1, day - 1)) {
year = this.maxArr[0]
month = this.maxArr[1]
}
} }
this.year = year; this.year = year;
this.month = month; this.month = month;
...@@ -599,6 +610,18 @@ ...@@ -599,6 +610,18 @@
} }
let ets = new Date(date.replace(/\-/g, '/')).getTime() let ets = new Date(date.replace(/\-/g, '/')).getTime()
if (start && values.length === 1 && sts <= ets) { if (start && values.length === 1 && sts <= ets) {
const dateMax = `${date} 23:59:59`
const etsMill = new Date(dateMax.replace(/\-/g, '/')).getTime()
const diff = etsMill - sts
const diffDays = Math.ceil(diff / 1000 / 60 / 60 / 24)
const maxDays = Number(this.maxDays)
if ((maxDays && maxDays > 0 && diffDays > maxDays) || maxDays === 0) {
uni.showToast({
title: `最多可选${maxDays}天,当前已超出可选范围`,
icon: 'none'
});
return;
}
values.push(date) values.push(date)
} else { } else {
values = [date] values = [date]
...@@ -608,6 +631,14 @@ ...@@ -608,6 +631,14 @@
if (idx != -1) { if (idx != -1) {
values.splice(idx, 1) values.splice(idx, 1)
} else { } else {
const maxDays = Number(this.maxDays)
if ((maxDays && maxDays > 0 && values.length >= maxDays) || maxDays === 0) {
uni.showToast({
title: `最多可选${maxDays}天`,
icon: 'none'
});
return;
}
if (type == 2) { if (type == 2) {
values.push(date) values.push(date)
} else { } else {
......
<template> <template>
<!--nvue下, Android平台阴影设置elevation值-->
<view class="fui-card__wrap" <view class="fui-card__wrap"
:class="{'fui-card__full':full,'fui-card__border':showBorder,'fui-card__border-radius':showBorder && !isNvue && !full}" :class="{'fui-card__full':full,'fui-card__border':showBorder,'fui-card__border-radius':showBorder && !isNvue && !full}"
:style="{marginTop:margin[0] || 0,marginRight:margin[1] || 0,marginBottom:margin[2] || margin[0] || 0,marginLeft:margin[3] || margin[1] || 0,background:background,borderRadius:radius,'box-shadow':shadow,borderColor:isNvue?borderColor:'transparent'}" :style="{marginTop:margin[0] || 0,marginRight:full?0: (margin[1] || 0),marginBottom:margin[2] || margin[0] || 0,marginLeft:full?0:(margin[3] || margin[1] || 0),background:background,borderRadius:full?0:radius,'box-shadow':showBorder?'none':shadow,borderColor:isNvue?borderColor:'transparent'}"
:elevation="showBorder?'0px':elevation" @tap="handleClick"> @tap="handleClick">
<view class="fui-card__header" v-if="tag || title || src" :class="{'fui-card__header-line':headerLine}" <view class="fui-card__header" v-if="tag || title || src" :class="{'fui-card__header-line':headerLine}"
:style="{'border-top-left-radius':full?0:radius,'border-top-right-radius':full?0:radius,'border-bottom-color':isNvue && headerLine?lineColor:'transparent',paddingTop:padding[0] || 0,paddingRight:padding[1]||0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0}"> :style="{'border-top-left-radius':full?0:radius,'border-top-right-radius':full?0:radius,'border-bottom-color':isNvue && headerLine?lineColor:'transparent',paddingTop:padding[0] || 0,paddingRight:padding[1]||0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0,background:headerBackground}">
<view class="fui-card__header-left"> <view class="fui-card__header-left">
<image :src="src" class="fui-card__header-thumb" mode="widthFix" v-if="src" <image :src="src" class="fui-card__header-thumb" v-if="src"
:style="{height:height+'rpx',width:width+'rpx',borderRadius:imageRadius}"></image> :style="{height:height+'rpx',width:width+'rpx',borderRadius:imageRadius}"></image>
<text class="fui-card__header-title" :style="{fontSize:size+'rpx',color:color}" <text class="fui-card__header-title" :style="{fontSize:size+'rpx',color:color}"
v-if="title">{{title}}</text> v-if="title">{{title}}</text>
...@@ -53,16 +52,11 @@ ...@@ -53,16 +52,11 @@
type: String, type: String,
default: '16rpx' default: '16rpx'
}, },
//阴影:nvue下,android无效 //阴影:nvue下
shadow: { shadow: {
type: String, type: String,
default: '0 2rpx 4rpx 0 rgba(2, 4, 38, 0.05)' default: '0 2rpx 4rpx 0 rgba(2, 4, 38, 0.05)'
}, },
//仅android且nvue下有效,box-shadow失效
elevation: {
type: String,
default: '5px'
},
//是否显示card 边框,为true时box-shadow失效 //是否显示card 边框,为true时box-shadow失效
showBorder: { showBorder: {
type: Boolean, type: Boolean,
...@@ -71,7 +65,7 @@ ...@@ -71,7 +65,7 @@
//边框颜色,仅nvue下生效 //边框颜色,仅nvue下生效
borderColor: { borderColor: {
type: String, type: String,
default: '#EEEEEE' default: 'red'
}, },
headerBackground: { headerBackground: {
type: String, type: String,
...@@ -170,18 +164,21 @@ ...@@ -170,18 +164,21 @@
<style scoped> <style scoped>
.fui-card__wrap { .fui-card__wrap {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
overflow: hidden;
flex: 1; flex: 1;
box-sizing: border-box; box-sizing: border-box;
/* #endif */ /* #endif */
overflow: hidden;
} }
/* #ifndef APP-NVUE */
.fui-card__full { .fui-card__full {
margin-left: 0 !important; margin-left: 0 !important;
margin-right: 0 !important; margin-right: 0 !important;
border-radius: 0 !important; border-radius: 0 !important;
} }
/* #endif */
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
.fui-card__full::after { .fui-card__full::after {
border-radius: 0 !important; border-radius: 0 !important;
...@@ -229,7 +226,9 @@ ...@@ -229,7 +226,9 @@
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */
flex: 1; flex: 1;
/* #endif */
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
...@@ -309,6 +308,7 @@ ...@@ -309,6 +308,7 @@
flex: 1; flex: 1;
/* #endif */ /* #endif */
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
width: 100%;
box-sizing: border-box; box-sizing: border-box;
/* #endif */ /* #endif */
} }
...@@ -318,6 +318,7 @@ ...@@ -318,6 +318,7 @@
flex: 1; flex: 1;
/* #endif */ /* #endif */
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
width: 100%;
box-sizing: border-box; box-sizing: border-box;
/* #endif */ /* #endif */
} }
......
<template> <template>
<view class="fui-cascader__wrap"> <view class="fui-cascader__wrap">
<view class="fui-cascader__header-wrap"> <view class="fui-cascader__header-wrap">
<scroll-view scroll-x scroll-with-animation :show-scrollbar="false" :scroll-into-view="scrollViewId" <scroll-view :scroll-x="true" scroll-with-animation :show-scrollbar="false" :scroll-into-view="scrollViewId"
:style="{ background: headBackground }" class="fui-cascader__scroll"> :style="{ background: headBackground }" class="fui-cascader__scroll">
<view class="fui-cascader__header" :style="{ height: headHeight+'rpx'}"> <view class="fui-cascader__header" :style="{ height: headHeight+'rpx'}">
<view class="fui-cascader__header-item" :id="`fui_cr_${idx}`" v-for="(item, idx) in selectedArr" <view class="fui-cascader__header-item" :id="`fui_cr_${idx}`" v-for="(item, idx) in selectedArr"
...@@ -435,6 +435,7 @@ ...@@ -435,6 +435,7 @@
width: 100%; width: 100%;
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
flex: 1;
flex-direction: row; flex-direction: row;
/* #endif */ /* #endif */
} }
...@@ -453,6 +454,7 @@ ...@@ -453,6 +454,7 @@
/* #endif */ /* #endif */
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-start;
} }
.fui-cascader__header-item { .fui-cascader__header-item {
......
...@@ -6,10 +6,11 @@ ...@@ -6,10 +6,11 @@
<!-- #ifdef APP-VUE || H5 --> <!-- #ifdef APP-VUE || H5 -->
<canvas :start="percentage" :change:start="parse.init" :width="w" :change:width="parse.widthChange" <canvas :start="percentage" :change:start="parse.init" :width="w" :change:width="parse.widthChange"
:sw="strokeWidth" :change:sw="parse.widthChange" :data-width="w" :data-sw="strokeWidth" :data-lc="lineCap" :sw="strokeWidth" :change:sw="parse.widthChange" :data-width="w" :data-sw="strokeWidth" :data-lc="lineCap"
:data-size="size" :data-percent="percentage" :data-color="color || primaryColor" :data-show="show" :data-ds="defaultShow" :data-size="size" :data-percent="percentage" :data-color="color || primaryColor" :data-show="show"
:data-background="background" :data-foreground="foreground || primaryColor" :data-gradient="gradient" :data-sa="sAngle" :data-ds="defaultShow" :data-background="background" :data-foreground="foreground || primaryColor"
:data-ccw="counterclockwise" :data-speed="speed" :data-am="activeMode" :data-cid="circleId" :data-gradient="gradient" :data-sa="sAngle" :data-ccw="counterclockwise" :data-speed="speed"
:canvas-id="circleId" :class="[circleId]" :style="{width: w + 'px',height: w + 'px'}"></canvas> :data-am="activeMode" :data-cid="circleId" :canvas-id="circleId" :class="[circleId]"
:style="{width: w + 'px',height: w + 'px'}"></canvas>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef MP --> <!-- #ifdef MP -->
...@@ -282,11 +283,13 @@ ...@@ -282,11 +283,13 @@
// #ifdef APP-NVUE // #ifdef APP-NVUE
mounted() { mounted() {
//以下代码写在nvue.js中 android端可能会出现canvas大小不受控制 //以下代码写在nvue.js中 android端可能会出现canvas大小不受控制
let ganvas = this.$refs[this.circleId]; setTimeout(() => {
let canvas = enable(ganvas, { let ganvas = this.$refs[this.circleId];
bridge: WeexBridge let canvas = enable(ganvas, {
}); bridge: WeexBridge
this.context = canvas.getContext('2d'); });
this.context = canvas.getContext('2d');
}, 50);
}, },
// #endif // #endif
methods: { methods: {
......
...@@ -29,10 +29,12 @@ export default { ...@@ -29,10 +29,12 @@ export default {
created() { created() {
let sys = uni.getSystemInfoSync() let sys = uni.getSystemInfoSync()
this.isAndroid = sys.platform.toLocaleLowerCase() == "android" this.isAndroid = sys.platform.toLocaleLowerCase() == "android"
this.fontSize=this.isAndroid ? Number(this.size) : Number(this.size) * sys.pixelRatio this.fontSize = this.isAndroid ? Number(this.size) : Number(this.size) * sys.pixelRatio
}, },
mounted() { mounted() {
this.init(true); setTimeout(() => {
this.init(true);
}, 50);
}, },
// #ifndef VUE3 // #ifndef VUE3
beforeDestroy() { beforeDestroy() {
...@@ -124,7 +126,8 @@ export default { ...@@ -124,7 +126,8 @@ export default {
ctx.setLineCap(this.lineCap); ctx.setLineCap(this.lineCap);
ctx.beginPath(); ctx.beginPath();
let radius = this.w / 2; let radius = this.w / 2;
ctx.arc(radius, radius, radius - Number(this.strokeWidth), Number(this.sAngle)* Math.PI, eAngle, this.counterclockwise); ctx.arc(radius, radius, radius - Number(this.strokeWidth), Number(this.sAngle) * Math.PI, eAngle, this
.counterclockwise);
ctx.stroke(); ctx.stroke();
!def && ctx.draw(); !def && ctx.draw();
} }
......
...@@ -5,7 +5,8 @@ ...@@ -5,7 +5,8 @@
<view class="fui-collapse__title"> <view class="fui-collapse__title">
<slot></slot> <slot></slot>
</view> </view>
<view v-if="arrow" :class="{'fui-collapse__arrow-active': isOpen, 'fui-collapse__item-ani': animation}" <view v-if="arrow"
:class="{'fui-collapse__arrow-close':!isOpen,'fui-collapse__arrow-active': isOpen, 'fui-collapse__item-ani': animation}"
class="fui-collapse__arrow" :style="{marginRight:arrowRight+'rpx'}"> class="fui-collapse__arrow" :style="{marginRight:arrowRight+'rpx'}">
<view class="fui-collapse__arrow-inner" :style="{borderColor:arrowColor}"></view> <view class="fui-collapse__arrow-inner" :style="{borderColor:arrowColor}"></view>
</view> </view>
...@@ -122,7 +123,9 @@ ...@@ -122,7 +123,9 @@
}, },
updated(e) { updated(e) {
this.$nextTick(() => { this.$nextTick(() => {
this.init() setTimeout(() => {
this.init()
}, 50)
}) })
}, },
created() { created() {
...@@ -145,8 +148,12 @@ ...@@ -145,8 +148,12 @@
}, },
// #endif // #endif
mounted() { mounted() {
this.isOpen = this.open; this.$nextTick(() => {
this.init() setTimeout(() => {
this.init()
this.isOpen = this.open;
}, 50)
})
}, },
methods: { methods: {
init() { init() {
...@@ -285,10 +292,8 @@ ...@@ -285,10 +292,8 @@
} }
.fui-collapse__title { .fui-collapse__title {
/* #ifndef APP-NVUE */
width: 100%;
/* #endif */
flex: 1; flex: 1;
overflow: hidden;
} }
...@@ -309,13 +314,16 @@ ...@@ -309,13 +314,16 @@
.fui-collapse__arrow { .fui-collapse__arrow {
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
transform: rotate(0deg);
position: relative; position: relative;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
flex-shrink: 0; flex-shrink: 0;
/* #endif */ /* #endif */
} }
.fui-collapse__arrow-close {
transform: rotate(0deg);
}
.fui-collapse__arrow-active { .fui-collapse__arrow-active {
transform: rotate(180deg); transform: rotate(180deg);
} }
......
<template> <template>
<view class="fui-copy__text-wrap"> <view class="fui-copy__text-wrap">
<!-- #ifndef MP-ALIPAY --> <!-- #ifndef MP-ALIPAY || APP-NVUE -->
<text ref="fui_ct__el" :selectable="false" class="fui-copy__text" @longpress.stop="handleCopy" @mousedown="handleCopyByPC" <text ref="fui_ct__el" :selectable="false" class="fui-copy__text" @longpress.stop="handleCopy"
@mousedown="handleCopyByPC"
:style="{ color: color, fontSize: size + 'rpx', fontWeight: fontWeight, background: showTooltip ? background : 'transparent' }">{{ text }}</text>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<text ref="fui_ct__el" class="fui-copy__text" @longpress.stop="handleCopy" @mousedown="handleCopyByPC"
:style="{ color: color, fontSize: size + 'rpx', fontWeight: fontWeight, background: showTooltip ? background : 'transparent' }">{{ text }}</text> :style="{ color: color, fontSize: size + 'rpx', fontWeight: fontWeight, background: showTooltip ? background : 'transparent' }">{{ text }}</text>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef MP-ALIPAY --> <!-- #ifdef MP-ALIPAY -->
<view ref="fui_ct__el" class="fui-copy__text" @longpress.stop="handleCopy" <view ref="fui_ct__el" class="fui-copy__text" @longpress.stop="handleCopy"
:style="{ color: color, fontSize: size + 'rpx', fontWeight: fontWeight, background: showTooltip ? background : 'transparent' }"> :style="{ color: color, fontSize: size + 'rpx', fontWeight: fontWeight, background: showTooltip ? background : 'transparent' }">
{{ text }}</view> {{ text }}
</view>
<!-- #endif --> <!-- #endif -->
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
<view v-if="showTooltip" class="fui-copy__tooltip-list" <view v-if="showTooltip" class="fui-copy__tooltip-list"
......
...@@ -141,6 +141,11 @@ ...@@ -141,6 +141,11 @@
this.clearTimer(); this.clearTimer();
this.time = Number(val) || 0; this.time = Number(val) || 0;
this.countDown(this.time); this.countDown(this.time);
if (this.returnTime) {
this.$emit('time', {
seconds: this.time
});
}
setTimeout(() => { setTimeout(() => {
if (this.autoStart) { if (this.autoStart) {
this.startCountdown(); this.startCountdown();
...@@ -167,6 +172,11 @@ ...@@ -167,6 +172,11 @@
this.countDown(this.time); this.countDown(this.time);
//注意:如果初始化值确实为0,可在页面自行判断结束或手动调用结束方法 //注意:如果初始化值确实为0,可在页面自行判断结束或手动调用结束方法
if (this.time > 0 && this.autoStart) { if (this.time > 0 && this.autoStart) {
if (this.returnTime) {
this.$emit('time', {
seconds: this.time
});
}
this.startCountdown(); this.startCountdown();
} }
}, },
...@@ -241,6 +251,7 @@ ...@@ -241,6 +251,7 @@
}, },
startCountdown: function() { startCountdown: function() {
this.clearTimer(); this.clearTimer();
//初始化值为0时不会执行此方法,请看mounted中判断与提示
if (this.time <= 0) { if (this.time <= 0) {
this.endCountdown(); this.endCountdown();
return; return;
...@@ -251,22 +262,27 @@ ...@@ -251,22 +262,27 @@
// #endif // #endif
this.countdown = setInterval(() => { this.countdown = setInterval(() => {
this.time--; this.time--;
if (this.time < 0) {
this.endCountdown();
return;
}
this.countDown(this.time); this.countDown(this.time);
if (this.returnTime) { if (this.returnTime) {
this.$emit('time', { this.$emit('time', {
seconds: this.time seconds: this.time
}); });
} }
if (this.time <= 0) {
this.endCountdown();
return;
}
}, 1000); }, 1000);
}, },
resetCountdown(seconds = 0) { resetCountdown(seconds = 0) {
this.time = seconds || Number(this.value); this.time = seconds || Number(this.value);
this.clearTimer(); this.clearTimer();
this.countDown(this.time); this.countDown(this.time);
if (this.returnTime) {
this.$emit('time', {
seconds: this.time
});
}
if (this.autoStart) { if (this.autoStart) {
this.startCountdown(); this.startCountdown();
} }
......
...@@ -162,7 +162,7 @@ ...@@ -162,7 +162,7 @@
// #ifdef APP-NVUE // #ifdef APP-NVUE
this.style_x += this.style_x +=
`transform:translate(${diff.x}px,0px);`; `transform:translate(${diff.x}px,0px);`;
this.style_y = `transform:translate(0px,${diff.y}px);`; this.style_y = `transform:translate(0px,${diff.y+this.navH}px);`;
// #endif // #endif
// #ifndef APP-NVUE // #ifndef APP-NVUE
......
...@@ -5,7 +5,8 @@ ...@@ -5,7 +5,8 @@
: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)}" :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"> v-for="(item,index) in dataList" :key="index">
<view class="fui-data__tag-inner" @tap.stop="handleClick(index)"> <view class="fui-data__tag-inner" @tap.stop="handleClick(index)">
<text class="fui-dt__icon" :style="{color:markColor || primaryColor,fontSize:markSize+'rpx',lineHeight:markSize+'rpx'}" <text class="fui-dt__icon"
:style="{color:markColor || primaryColor,fontSize:markSize+'rpx',lineHeight:markSize+'rpx'}"
v-if="mark && item.selected">{{icon}}</text> v-if="mark && item.selected">{{icon}}</text>
</view> </view>
<text class="fui-data__tag-text" <text class="fui-data__tag-text"
...@@ -17,7 +18,8 @@ ...@@ -17,7 +18,8 @@
<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.disable}"
:style="{width:width?width+'rpx':'auto',height:height?height+'rpx':'auto',paddingTop:padding[0] || 0,paddingRight:padding[1] || 0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0,borderRadius:radius+'rpx',marginRight:gap+'rpx',marginBottom:gap+'rpx',background:item.selected?activeBgColor:background,borderColor:item.selected?(borderColor || primaryColor):defaultBorderColor || background}" :style="{width:width?width+'rpx':'auto',height:height?height+'rpx':'auto',paddingTop:padding[0] || 0,paddingRight:padding[1] || 0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0,borderRadius:radius+'rpx',marginRight:gap+'rpx',marginBottom:gap+'rpx',background:item.selected?activeBgColor:background,borderColor:item.selected?(borderColor || primaryColor):defaultBorderColor || background}"
v-for="(item,index) in dataList" :key="index" @tap.stop="handleClick(index)"> 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'}" <text class="fui-dt__icon"
:style="{color:markColor || primaryColor,fontSize:markSize+'rpx',lineHeight:markSize+'rpx'}"
v-if="mark && item.selected">{{icon}}</text> v-if="mark && item.selected">{{icon}}</text>
<text class="fui-data__tag-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.text}}</text>
...@@ -213,12 +215,14 @@ ...@@ -213,12 +215,14 @@
const min = Number(this.min) const min = Number(this.min)
if (this.val === model.value && min > 0) return; if (this.val === model.value && min > 0) return;
let val = ''; let val = '';
let i = index let i = index;
let entity = {}
this.dataList.forEach((item, idx) => { this.dataList.forEach((item, idx) => {
if (idx === index) { if (idx === index) {
const bool = this.val === item.value && min <= 0 const bool = this.val === item.value && min <= 0
val = bool ? '' : item.value val = bool ? '' : item.value
i = bool ? -1 : index i = bool ? -1 : index
entity = bool ? {} : item
item.selected = bool ? false : true item.selected = bool ? false : true
} else { } else {
item.selected = false item.selected = false
...@@ -228,7 +232,8 @@ ...@@ -228,7 +232,8 @@
let e = { let e = {
detail: { detail: {
index: i, index: i,
value: val value: val,
item: entity
} }
} }
this.emitsChange(e) this.emitsChange(e)
...@@ -298,9 +303,11 @@ ...@@ -298,9 +303,11 @@
} }
} }
this.vals = vals this.vals = vals
const entity = this.dataList.filter(item => vals.indexOf(item.value) != -1)
let e = { let e = {
detail: { detail: {
value: vals value: vals,
item: entity
} }
} }
this.emitsChange(e) this.emitsChange(e)
......
...@@ -10,12 +10,12 @@ ...@@ -10,12 +10,12 @@
:class="{'fui-dpk__header-dark':theme==='dark','fui-date__picker-radius':radius}" :style="headerStyl"> :class="{'fui-dpk__header-dark':theme==='dark','fui-date__picker-radius':radius}" :style="headerStyl">
<text class="fui-dpk_btn-cancel" <text class="fui-dpk_btn-cancel"
:class="[theme==='dark'?'fui-dpk__cancel-color_dark':'fui-dpk__cancel-color']" :style="cancelStyl" :class="[theme==='dark'?'fui-dpk__cancel-color_dark':'fui-dpk__cancel-color']" :style="cancelStyl"
@tap.stop="btnCancel">取消</text> @tap.stop="btnCancel">{{cancelText}}</text>
<text class="fui-date__picker-title" <text class="fui-date__picker-title"
:class="[theme==='dark'?'fui-dpk__title-color_dark':'fui-dpk__title-color']" :class="[theme==='dark'?'fui-dpk__title-color_dark':'fui-dpk__title-color']"
:style="titleStyl">{{title}}</text> :style="titleStyl">{{title}}</text>
<text class="fui-dpk__btn-sure" :class="{'fui-dpk__sure-color':!confirmColor}" :style="confrimStyl" <text class="fui-dpk__btn-sure" :class="{'fui-dpk__sure-color':!confirmColor}" :style="confrimStyl"
@tap.stop="btnConfirm">确定</text> @tap.stop="btnConfirm">{{confirmText}}</text>
</view> </view>
<view class="fui-dpk__range-wrap" v-if="range"> <view class="fui-dpk__range-wrap" v-if="range">
<view class="fui-dpk__range-inner" <view class="fui-dpk__range-inner"
...@@ -383,7 +383,7 @@ ...@@ -383,7 +383,7 @@
}, },
zIndex: { zIndex: {
type: [Number, String], type: [Number, String],
default: 999 default: 996
}, },
//点击确认按钮后是否立即关闭弹框 //点击确认按钮后是否立即关闭弹框
isClose: { isClose: {
...@@ -402,13 +402,11 @@ ...@@ -402,13 +402,11 @@
}, },
// #ifdef APP-NVUE // #ifdef APP-NVUE
mounted() { mounted() {
if (!this.$refs['fui_dpkm_ani'] || !this.$refs['fui_dpk_ani']) return; this.$nextTick(() => {
this._transtion('fui_dpkm_ani', { setTimeout(() => {
transform: 'translateX(-100%)' this.hiddenNvuePicker()
}, 0) }, 50)
this._transtion('fui_dpk_ani', { })
transform: 'translateY(100%)'
}, 0)
}, },
// #endif // #endif
computed: { computed: {
...@@ -536,6 +534,7 @@ ...@@ -536,6 +534,7 @@
minutes: [], minutes: [],
seconds: [], seconds: [],
vals: [], vals: [],
nvueVals: [],
values: [], values: [],
minArr: [], minArr: [],
maxArr: [], maxArr: [],
...@@ -558,6 +557,17 @@ ...@@ -558,6 +557,17 @@
}; };
}, },
methods: { methods: {
// #ifdef APP-NVUE
hiddenNvuePicker() {
if (!this.$refs['fui_dpkm_ani'] || !this.$refs['fui_dpk_ani']) return;
this._transtion('fui_dpkm_ani', {
transform: 'translateX(-100%)'
}, 0)
this._transtion('fui_dpk_ani', {
transform: 'translateY(100%)'
}, 0)
},
// #endif
initialize() { initialize() {
this.reset(); this.reset();
this.getDefaultOptions(this.value) this.getDefaultOptions(this.value)
...@@ -593,6 +603,9 @@ ...@@ -593,6 +603,9 @@
this.isActive = 1; this.isActive = 1;
this.startDate = {} this.startDate = {}
this.endDate = {} this.endDate = {}
// #ifdef APP-NVUE
this.nvueVals = [...this.vals]
// #endif
}, },
open() { open() {
this.isShow = true; this.isShow = true;
...@@ -866,6 +879,9 @@ ...@@ -866,6 +879,9 @@
[hi, mi, si], [hi, mi, si],
[mi, si] [mi, si]
][type - 1] ][type - 1]
// #ifdef APP-NVUE
this.nvueVals = [...this.vals]
// #endif
}, 220) }, 220)
}) })
}, },
...@@ -957,6 +973,9 @@ ...@@ -957,6 +973,9 @@
} else { } else {
data = this.getResult() data = this.getResult()
} }
// #ifdef APP-NVUE
this.nvueVals = [...this.vals];
// #endif
setTimeout(() => { setTimeout(() => {
this.$emit('change', data) this.$emit('change', data)
}, 0) }, 0)
...@@ -1017,10 +1036,11 @@ ...@@ -1017,10 +1036,11 @@
}, 80) }, 80)
}, },
pickerChange(e) { pickerChange(e) {
// isInitShow 是为了避免 app端初始化时自行执行change事件 //1-年 2-年月 3-年月日 4-年月日 时 5-年月日 时分 6-时分 7-时分秒 8-分秒
if (!this.isInitShow) return;
let value = e.detail.value; let value = e.detail.value;
let type = Number(this.type) let type = Number(this.type)
const layer = [1, 2, 3, 4, 5, 2, 3, 2][type - 1]
if (!this.isInitShow || value.length != layer) return;
if (type > 1 && type < 6) { if (type > 1 && type < 6) {
if (value[0] != this.vals[0]) { if (value[0] != this.vals[0]) {
this.getMonths(value[0]) this.getMonths(value[0])
...@@ -1055,6 +1075,7 @@ ...@@ -1055,6 +1075,7 @@
// #ifdef APP-NVUE // #ifdef APP-NVUE
openPicker() { openPicker() {
setTimeout(() => { setTimeout(() => {
this.vals = [...this.nvueVals];
this._animation(true); this._animation(true);
}, 20); }, 20);
}, },
...@@ -1115,13 +1136,14 @@ ...@@ -1115,13 +1136,14 @@
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;
visibility: hidden; visibility: hidden;
opacity: 0;
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
transition-property: opacity; transition-property: opacity;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
transition-duration: .25s; transition-duration: .25s;
opacity: 0.001;
/* #endif */ /* #endif */
opacity: 0;
} }
.fui-dpk__mask-show { .fui-dpk__mask-show {
...@@ -1146,10 +1168,9 @@ ...@@ -1146,10 +1168,9 @@
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
transition-property: opacity; transition-property: transform;
transition-duration: .25s; transition-duration: .25s;
transform: translateY(100%); transform: translateY(100%);
/* opacity: 0; */
/* #endif */ /* #endif */
transform-origin: center center; transform-origin: center center;
flex-direction: column; flex-direction: column;
...@@ -1161,9 +1182,8 @@ ...@@ -1161,9 +1182,8 @@
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
visibility: visible; visibility: visible;
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
opacity: 1; transform: translateY(0);
/* #endif */ /* #endif */
} }
...@@ -1366,7 +1386,9 @@ ...@@ -1366,7 +1386,9 @@
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
width: 100%; width: 100%;
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */
flex: 1; flex: 1;
/* #endif */
height: 520rpx; height: 520rpx;
} }
......
...@@ -149,7 +149,7 @@ ...@@ -149,7 +149,7 @@
<style scoped> <style scoped>
.fui-dialog__wrap { .fui-dialog__wrap {
position: fixed; position: fixed;
z-index: 1000; z-index: 996;
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
......
...@@ -7,17 +7,17 @@ ...@@ -7,17 +7,17 @@
<view class="fui-digital__keyboard-left"> <view class="fui-digital__keyboard-left">
<view class="fui-dk__left-wrap" v-for="(item,index) in items" :key="item.id"> <view class="fui-dk__left-wrap" v-for="(item,index) in items" :key="item.id">
<view class="fui-dk__grid-left" v-for="(val,idx) in item.keys" :key="idx"> <view class="fui-dk__grid-left" v-for="(val,idx) in item.keys" :key="idx">
<text :style="{fontSize:`${index===3 && idx===0? spareSize:40}rpx`}" <text :key="theme" :style="{fontSize:`${index===3 && idx===0? spareSize:40}rpx`}"
class="fui-digital__keyboard-key" class="fui-digital__keyboard-key"
:class="{'fui-dk__key-dark':theme==='dark','fui-dk__highlight-dark':theme==='dark' && val,'fui-dk__highlight':theme==='light' && val}" :class="{'fui-dk__key-dark':theme==='dark','fui-dk__key-light':theme!=='dark','fui-dk__highlight-dark':theme==='dark','fui-dk__highlight':theme==='light' && val}"
@tap.stop="keyClick(index,idx,val)">{{val}}</text> @tap.stop="keyClick(index,idx,val)">{{val}}</text>
</view> </view>
</view> </view>
</view> </view>
<view class="fui-digital__keyboard-right"> <view class="fui-digital__keyboard-right">
<view class="fui-dk__grid-right"> <view class="fui-dk__grid-right">
<view class="fui-digital__keyboard-key fui-dk__highlight" <view :key="theme" class="fui-digital__keyboard-key"
:class="{'fui-dk__key-dark':theme==='dark','fui-dk__highlight-dark':theme==='dark'}" :class="{'fui-dk__key-dark':theme==='dark','fui-dk__key-light':theme!=='dark','fui-dk__highlight-dark':theme==='dark','fui-dk__highlight':theme!=='dark'}"
@tap.stop="backspace"> @tap.stop="backspace">
<fui-icon :name="name" :size="56" :color="theme==='dark'?'#d1d1d1':'#333'"></fui-icon> <fui-icon :name="name" :size="56" :color="theme==='dark'?'#d1d1d1':'#333'"></fui-icon>
</view> </view>
...@@ -265,7 +265,7 @@ ...@@ -265,7 +265,7 @@
transform-origin: center center; transform-origin: center center;
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
transform: translate(0, 100%); transform: translate(0, 100%);
opacity: 0; opacity: 0.01;
border-top-style: solid; border-top-style: solid;
border-top-width: 0.5px; border-top-width: 0.5px;
/* #endif */ /* #endif */
...@@ -334,7 +334,9 @@ ...@@ -334,7 +334,9 @@
width: 100%; width: 100%;
display: flex; display: flex;
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */
flex: 1; flex: 1;
/* #endif */
flex-direction: row; flex-direction: row;
padding-top: 16rpx; padding-top: 16rpx;
} }
...@@ -364,7 +366,9 @@ ...@@ -364,7 +366,9 @@
width: 100%; width: 100%;
display: flex; display: flex;
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */
flex: 1; flex: 1;
/* #endif */
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
...@@ -447,35 +451,40 @@ ...@@ -447,35 +451,40 @@
flex-shrink: 0; flex-shrink: 0;
overflow: hidden; overflow: hidden;
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */
flex: 1; flex: 1;
/* #endif */
font-size: 40rpx; font-size: 40rpx;
font-weight: 600; font-weight: 600;
height: 88rpx; height: 88rpx;
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
line-height: 88rpx; line-height: 88rpx;
/* #endif */ /* #endif */
background: #fff;
border-radius: 8rpx; border-radius: 8rpx;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
/* #ifdef H5 */ /* #ifdef H5 */
cursor: pointer; cursor: pointer;
/* #endif */ /* #endif */
color: #181818;
text-align: center; text-align: center;
} }
.fui-dk__key-light {
background-color: #fff;
color: #181818;
}
.fui-dk__key-dark { .fui-dk__key-dark {
background: #222; background-color: #222;
color: #D1D1D1; color: #D1D1D1;
} }
.fui-dk__highlight:active { .fui-dk__highlight:active {
background: rgba(0, 0, 0, .2); background-color: rgba(0, 0, 0, .2);
} }
.fui-dk__highlight-dark:active { .fui-dk__highlight-dark:active {
background: #333 !important; background-color: #333 !important;
} }
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
......
...@@ -61,7 +61,8 @@ ...@@ -61,7 +61,8 @@
return { return {
isNvue: isNvue, isNvue: isNvue,
isShow: false, isShow: false,
width: 0 width: 0,
isMounted: false
} }
}, },
// #ifdef APP-NVUE // #ifdef APP-NVUE
...@@ -79,12 +80,26 @@ ...@@ -79,12 +80,26 @@
}, },
// #endif // #endif
mounted() { mounted() {
setTimeout(() => { this.isMounted = true
this._getSize((width) => { this.$nextTick(() => {
this.width = width setTimeout(() => {
}) this._getSize((width) => {
}, 100) this.width = width
})
}, 100)
})
},
// #ifdef H5
updated() {
if(!this.isMounted && !this.width){
setTimeout(() => {
this._getSize((width) => {
this.width = width
})
}, 50)
}
}, },
// #endif
methods: { methods: {
_getSize(callback) { _getSize(callback) {
// #ifndef APP-NVUE // #ifndef APP-NVUE
......
...@@ -189,18 +189,20 @@ ...@@ -189,18 +189,20 @@
getStyles() { getStyles() {
let styles = `border-radius:${this.radius}rpx;background:${this.background};` let styles = `border-radius:${this.radius}rpx;background:${this.background};`
let right = Number(this.right || 0) let right = Number(this.right || 0)
let left = Number(this.left || 0)
if (right >= 0) { if (right >= 0) {
styles += 'right:0;' styles += 'right:0;'
} else { } else {
// #ifndef APP-NVUE // #ifndef APP-NVUE
styles += 'left:0;' styles += `left:${left}rpx;`
// #endif // #endif
} }
// #ifdef APP-NVUE // #ifdef APP-NVUE
styles += `left:${this.n_left}px;top:${this.n_top}px;height:${this.maxHeight}rpx;` left = Math.floor(uni.upx2px(left))
if (this.direction === 'up') { styles += `left:${this.n_left+left}px;top:${this.n_top}px;height:${this.maxHeight}rpx;`
styles += `transform: translate(0, -${this.maxHeight}rpx);` // if (this.direction === 'up') {
} // styles += `transform: translate(0, -${this.maxHeight}rpx);`
// }
// #endif // #endif
return styles return styles
}, },
......
...@@ -260,23 +260,23 @@ ...@@ -260,23 +260,23 @@
// #endif // #endif
mounted() { mounted() {
// #ifdef APP-NVUE
if (!this.$refs['fui_fab_ani']) return;
let styles = {
transform: 'scale(0)',
opacity: 0
}
animation.transition(
this.$refs['fui_fab_ani'].ref, {
styles,
duration: 0,
needLayout: false,
delay: 0
},
() => {}
);
// #endif
this.$nextTick(() => { this.$nextTick(() => {
// #ifdef APP-NVUE
if (!this.$refs['fui_fab_ani']) return;
let styles = {
transform: 'scale(0)',
opacity: 0
}
animation.transition(
this.$refs['fui_fab_ani'].ref, {
styles,
duration: 0,
needLayout: false,
delay: 0
},
() => {}
);
// #endif
setTimeout(() => { setTimeout(() => {
this._getSize() this._getSize()
}, 50); }, 50);
...@@ -567,7 +567,9 @@ ...@@ -567,7 +567,9 @@
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
border-radius: 100px; border-radius: 100px;
/* #endif */ /* #endif */
/* #ifndef APP-NVUE */
box-shadow: 0 10rpx 14rpx 0 rgba(0, 0, 0, 0.1); box-shadow: 0 10rpx 14rpx 0 rgba(0, 0, 0, 0.1);
/* #endif */
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transform: rotate(0deg); transform: rotate(0deg);
......
...@@ -11,8 +11,14 @@ ...@@ -11,8 +11,14 @@
</view> </view>
<fui-icon name="screen" :size="item.size || 28" :color="item.value?activeColor:color" <fui-icon name="screen" :size="item.size || 28" :color="item.value?activeColor:color"
v-if="item.type==='filter'"></fui-icon> v-if="item.type==='filter'"></fui-icon>
<!-- #ifndef APP-NVUE -->
<fui-icon v-if="item.type==='switch'" :name="item.switch===1?'classify':'list'" <fui-icon v-if="item.type==='switch'" :name="item.switch===1?'classify':'list'"
:size="item.size || (item.switch===1?46:60)" :color="item.active?activeColor:color"></fui-icon> :size="item.size || (item.switch===1?46:60)" :color="item.active?activeColor:color"></fui-icon>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<fui-icon v-if="item.type==='switch'" :name="item.switch===1?'classify':'list'" :size="item.size || 48"
:color="item.active?activeColor:color"></fui-icon>
<!-- #endif -->
<fui-icon v-if="item.type==='sort'" :name="item.sort===1?'turningup':'turningdown'" <fui-icon v-if="item.type==='sort'" :name="item.sort===1?'turningup':'turningdown'"
:color="item.value?activeColor:color" :size="item.size || 28"></fui-icon> :color="item.value?activeColor:color" :size="item.size || 28"></fui-icon>
</view> </view>
......
<template> <template>
<view class="fui-gallery__wrap" :style="{zIndex:zIndex}" :class="[show?'fui-gallery__show':'fui-gallery__hidden']" <view class="fui-gallery__wrap" :style="{zIndex:zIndex}" :class="[show?'fui-gallery__show':'fui-gallery__hidden']"
v-if="show || !isNvue" @tap.stop="hideGallery"> v-if="show || !isNvue">
<swiper class="fui-gallery__img-wrap" :indicator-dots="false" @change="change" :current="defActive" <swiper class="fui-gallery__img-wrap" :style="{height:height+'px'}" :indicator-dots="false" @change="change"
:autoplay="false" :duration="500"> :current="defActive" :autoplay="false" :duration="500">
<swiper-item class="fui-gallery__swiper-item" v-for="(item,index) in imgUrls" :key="index"> <swiper-item :style="{height:height+'px'}" v-for="(item,index) in imgUrls" :key="index">
<image mode="aspectFit" class="fui-gallery__img" :src="item.src"></image> <view class="fui-gallery__swiper-item" :style="{height:height+'px'}">
<image mode="aspectFit" class="fui-gallery__img" :style="{height:height+'px'}" :src="item.src"
@tap.stop="hideGallery"></image>
</view>
</swiper-item> </swiper-item>
</swiper> </swiper>
<view class="fui-gallery__index-wrap" :style="{top:top+'px'}"> <view class="fui-gallery__index-wrap" :style="{top:top+'px'}">
...@@ -65,6 +68,7 @@ ...@@ -65,6 +68,7 @@
}, },
mounted() { mounted() {
let sys = uni.getSystemInfoSync() let sys = uni.getSystemInfoSync()
this.height = sys.windowHeight
this.top = sys.statusBarHeight + 20 this.top = sys.statusBarHeight + 20
// #ifdef APP-NVUE || MP-TOUTIAO // #ifdef APP-NVUE || MP-TOUTIAO
this.iphoneX = this.isPhoneX(sys) this.iphoneX = this.isPhoneX(sys)
...@@ -85,7 +89,8 @@ ...@@ -85,7 +89,8 @@
defActive: 0, defActive: 0,
top: 20, top: 20,
descr: '', descr: '',
iphoneX: false iphoneX: false,
height: 800
}; };
}, },
methods: { methods: {
...@@ -156,6 +161,9 @@ ...@@ -156,6 +161,9 @@
} }
.fui-gallery__img-wrap { .fui-gallery__img-wrap {
/* #ifndef APP-NVUE */
width: 100%;
/* #endif */
flex: 1; flex: 1;
position: relative; position: relative;
font-size: 0; font-size: 0;
...@@ -163,6 +171,7 @@ ...@@ -163,6 +171,7 @@
.fui-gallery__swiper-item { .fui-gallery__swiper-item {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
width: 100%;
display: flex; display: flex;
/* #endif */ /* #endif */
align-items: center; align-items: center;
...@@ -262,6 +271,5 @@ ...@@ -262,6 +271,5 @@
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
width: 750rpx; width: 750rpx;
/* #endif */ /* #endif */
flex: 1;
} }
</style> </style>
...@@ -100,7 +100,7 @@ ...@@ -100,7 +100,7 @@
box-sizing: border-box; box-sizing: border-box;
flex-shrink: 0; flex-shrink: 0;
/* #endif */ /* #endif */
flex-direction: column;
/* #ifdef H5 */ /* #ifdef H5 */
cursor: pointer; cursor: pointer;
/* #endif */ /* #endif */
......
<template> <template>
<view class="fui-grid__wrap" :class="[isShow?'fui-grid__wrap-show':'fui-grid__wrap-hidden']"> <view class="fui-grid__wrap" :class="[isShow?'fui-grid__wrap-show':'fui-grid__wrap-hidden']">
<view :id="elemId" ref="fui_grid" class="fui-grid" :class="{ 'fui-grid__border': showBorder }" <view :id="elemId" ref="fui_grid" class="fui-grid"
:class="{ 'fui-grid__border': showBorder,'fui-grid__between':between }"
:style="{ 'border-left-color':borderColor,'border-top-color':borderColor}"> :style="{ 'border-left-color':borderColor,'border-top-color':borderColor}">
<slot></slot> <slot></slot>
<!-- #ifndef APP-VUE || H5 || MP-WEIXIN -->
<template v-if="seats.length > 0 && between">
<view v-for="(item,index) in seats" :key="index"
:style="'width:'+width+';'+(height?'height:'+height:'')"></view>
</template>
<!-- #endif -->
</view> </view>
</view> </view>
</template> </template>
...@@ -34,6 +41,17 @@ ...@@ -34,6 +41,17 @@
square: { square: {
type: Boolean, type: Boolean,
default: true default: true
},
// item 项是否两端对齐,仅在宽度无法拉满且影响美观时使用,谨慎使用 v2.0.0+
between: {
type: Boolean,
default: false
},
//当数据无法铺满时,且设置了between 布局,末尾补足占位元素个数
//最后一行数据个数+emptyElements 不可大于 columns 值
emptyElements: {
type: [Number, String],
default: 0
} }
}, },
provide() { provide() {
...@@ -47,15 +65,16 @@ ...@@ -47,15 +65,16 @@
elemId: elemId, elemId: elemId,
width: 0, width: 0,
height: 0, height: 0,
isShow: false isShow: false,
seats: []
}; };
}, },
created() { created() {
this.children = [] this.children = []
let sys = uni.getSystemInfoSync() let sys = uni.getSystemInfoSync()
this.width = (100 / this.columns) + '%' this.width = (100 / this.columns) + '%'
if(this.square){ if (this.square) {
this.height = (sys.windowWidth-1) / this.columns + 'px' this.height = parseInt((sys.windowWidth - 1) / this.columns * 10) / 10 + 'px'
} }
}, },
watch: { watch: {
...@@ -66,11 +85,15 @@ ...@@ -66,11 +85,15 @@
}, },
showBorder(val) { showBorder(val) {
this.childChange() this.childChange()
},
emptyElements(val) {
this.createEmptyEl(val)
} }
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.init() this.init()
this.createEmptyEl(this.emptyElements)
}) })
}, },
methods: { methods: {
...@@ -85,6 +108,19 @@ ...@@ -85,6 +108,19 @@
}) })
}, 50) }, 50)
}, },
createEmptyEl(val) {
// 百度小程序在页面循环数字有问题
const nums = Number(val)
let seats = []
if (nums && nums > 0) {
for (let i = 0; i < nums; i++) {
seats.push(i)
}
this.seats = seats
} else {
this.seats = []
}
},
childChange() { childChange() {
this.children.forEach((item, index) => { this.children.forEach((item, index) => {
item.showBorder = this.showBorder item.showBorder = this.showBorder
...@@ -110,8 +146,8 @@ ...@@ -110,8 +146,8 @@
.boundingClientRect() .boundingClientRect()
.exec(ret => { .exec(ret => {
//使用 parseInt 不使用 Number 避免 部分android机 换行(小数渲染有兼容性问题) ,但是可能会出现误差无法铺满 //使用 parseInt 不使用 Number 避免 部分android机 换行(小数渲染有兼容性问题) ,但是可能会出现误差无法铺满
//尽量让组件居中显示,视觉看起来左右对齐 let width = (ret[0].width - 1) / this.columns
const width = parseInt((ret[0].width - 1) / this.columns) + 'px' width = (parseInt(width * 10) / 10) + 'px'
if (this.square) if (this.square)
this.height = width; this.height = width;
if (isNoSupported) if (isNoSupported)
...@@ -124,8 +160,10 @@ ...@@ -124,8 +160,10 @@
// #endif // #endif
// #ifdef APP-NVUE // #ifdef APP-NVUE
dom.getComponentRect(this.$refs['fui_grid'], (ret) => { dom.getComponentRect(this.$refs['fui_grid'], (ret) => {
//使用 parseInt 不使用 Number 避免 部分android机 换行,但是可能会出现误差无法铺满 //使用 parseInt 不使用 Number 可避免 部分android机 换行,但是可能会出现误差无法铺满
this.width = parseInt((ret.size.width - 1) / this.columns) + 'px' // 注:以真机测试为准,如果还有换行,则只能不保留小数
let width = (ret.size.width - 1) / this.columns
this.width = parseInt(width * 10) / 10 + 'px'
if (this.square) { if (this.square) {
this.height = this.width; this.height = this.width;
} }
...@@ -145,11 +183,17 @@ ...@@ -145,11 +183,17 @@
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */
flex: 1; flex: 1;
/* #endif */
flex-direction: column; flex-direction: column;
/* 以下css可能导致数据过多nvue端直接白屏不显示 */
/* #ifndef APP-NVUE */
transition-property: opacity; transition-property: opacity;
transition-duration: .2s; transition-duration: .2s;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
/* #endif */
} }
.fui-grid__wrap-hidden { .fui-grid__wrap-hidden {
...@@ -157,7 +201,7 @@ ...@@ -157,7 +201,7 @@
} }
.fui-grid__wrap-show { .fui-grid__wrap-show {
opacity: 1; opacity: 1 !important;
} }
.fui-grid { .fui-grid {
...@@ -169,6 +213,13 @@ ...@@ -169,6 +213,13 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
/* #ifndef APP-VUE || H5 || MP-WEIXIN */
.fui-grid__between {
justify-content: space-between;
}
/* #endif */
.fui-grid__border { .fui-grid__border {
position: relative; position: relative;
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
......
...@@ -108,7 +108,8 @@ ...@@ -108,7 +108,8 @@
//滚动条滑块长度 //滚动条滑块长度
blockWidth: 0, blockWidth: 0,
blockHeight: 0, blockHeight: 0,
transform: '' transform: '',
isMounted: false
}; };
}, },
created() { created() {
...@@ -117,10 +118,20 @@ ...@@ -117,10 +118,20 @@
this.blockHeight = this.getPx(this.scrollHeight || 8) this.blockHeight = this.getPx(this.scrollHeight || 8)
}, },
mounted() { mounted() {
this.isMounted = true
this.$nextTick(() => { this.$nextTick(() => {
this.init() this.init()
}) })
}, },
// #ifdef H5
updated() {
if(!this.isMounted && !this.width){
setTimeout(() => {
this.init()
}, 0)
}
},
// #endif
watch: { watch: {
scrollWidth(val) { scrollWidth(val) {
this.bgWidth = this.getPx(val || 96) this.bgWidth = this.getPx(val || 96)
......
...@@ -2,7 +2,8 @@ ...@@ -2,7 +2,8 @@
<view class="fui-image__cropper" @touchmove.stop.prevent="stop"> <view class="fui-image__cropper" @touchmove.stop.prevent="stop">
<!-- #ifdef APP-VUE || MP-WEIXIN || H5 --> <!-- #ifdef APP-VUE || MP-WEIXIN || H5 -->
<image @touchstart="handler.touchstart" @touchmove="handler.touchmove" @touchend="handler.touchend" <image @touchstart="handler.touchstart" @touchmove="handler.touchmove" @touchend="handler.touchend"
@mousedown="handler.mousedown" class="fui-cropper__img" :class="{'fui-cropper__img-hidden':!src}" :src="src" @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'}" :style="{width: (imgWidth ? imgWidth : width) + 'px',height: imgHeight ? imgHeight + 'px' : 'auto',transitionDuration: ani ?'0.25s' : '0s'}"
mode="widthFix"> mode="widthFix">
</image> </image>
...@@ -14,7 +15,8 @@ ...@@ -14,7 +15,8 @@
</image> </image>
<!-- #endif --> <!-- #endif -->
<!-- #ifndef APP-PLUS || MP-WEIXIN || H5 --> <!-- #ifndef APP-PLUS || MP-WEIXIN || H5 -->
<image @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" class="fui-cropper__img" :class="{'fui-cropper__img-hidden':!src}" :src="src" <image @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" 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',transform:getTransform}" :style="{width: (imgWidth ? imgWidth : width) + 'px',height: imgHeight ? imgHeight + 'px' : 'auto',transitionDuration: ani ?'0.25s' : '0s',transform:getTransform}"
mode="widthFix"> mode="widthFix">
</image> </image>
...@@ -60,7 +62,7 @@ ...@@ -60,7 +62,7 @@
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
<canvas canvas-id="fui_image_cropper" id="fui_image_cropper" :disable-scroll="true" <canvas canvas-id="fui_image_cropper" id="fui_image_cropper" :disable-scroll="true"
:style="{ width: width * scaleRatio + 'px', height: height * scaleRatio + 'px' }" :style="{ width: nWidth * nScaleRatio + 'px', height: nWidth * nScaleRatio + 'px' }"
class="fui-cropper__canvas"></canvas> class="fui-cropper__canvas"></canvas>
<!-- #endif --> <!-- #endif -->
</view> </view>
...@@ -138,6 +140,15 @@ ...@@ -138,6 +140,15 @@
this.ani = false; this.ani = false;
}, 220); }, 220);
} }
},
scaleRatio(val) {
this.nScaleRatio = Number(val) || 2
},
width(val) {
this.nWidth = Number(val) || 280
},
height(val) {
this.nHeight = Number(val) || 280
} }
}, },
data() { data() {
...@@ -158,13 +169,19 @@ ...@@ -158,13 +169,19 @@
naturalWidth: 0, naturalWidth: 0,
naturalHeight: 0, naturalHeight: 0,
picturePath: '', picturePath: '',
rotateAngle: 0 rotateAngle: 0,
nScaleRatio: 2,
nWidth: 280,
nHeight: 280
}; };
}, },
created() { created() {
this.cutTimer = null; this.cutTimer = null;
this.aniTimer = null; this.aniTimer = null;
this.ctx = null; this.ctx = null;
this.nScaleRatio = Number(this.scaleRatio) || 2
this.nWidth = Number(this.width) || 280
this.nHeight = Number(this.height) || 280
}, },
mounted() { mounted() {
let sys = uni.getSystemInfoSync(); let sys = uni.getSystemInfoSync();
...@@ -172,14 +189,16 @@ ...@@ -172,14 +189,16 @@
this.windowWidth = sys.windowWidth this.windowWidth = sys.windowWidth
this.imgTop = sys.windowHeight / 2; this.imgTop = sys.windowHeight / 2;
this.imgLeft = sys.windowWidth / 2; this.imgLeft = sys.windowWidth / 2;
// #ifndef APP-NVUE
this.ctx = uni.createCanvasContext('fui_image_cropper', this);
// #endif
this.$nextTick(() => { this.$nextTick(() => {
// #ifndef APP-NVUE
this.ctx = uni.createCanvasContext('fui_image_cropper', this);
// #endif
setTimeout(() => { setTimeout(() => {
this.changeval = `1_${this.getRandom()}`; this.changeval = `1_${this.getRandom()}`;
this.initVal = true this.initVal = true
this.src && this.handleImage(this.src) setTimeout(() => {
this.src && this.handleImage(this.src)
}, 50);
}, 220); }, 220);
}) })
}, },
...@@ -208,11 +227,11 @@ ...@@ -208,11 +227,11 @@
let imgWidth = width, let imgWidth = width,
imgHeight = height; imgHeight = height;
if (imgWidth > 0 && imgHeight > 0) { if (imgWidth > 0 && imgHeight > 0) {
if (imgWidth / imgHeight > this.width / this.height) { if (imgWidth / imgHeight > this.nWidth / this.nHeight) {
imgHeight = this.height; imgHeight = this.nHeight;
imgWidth = (width / height) * imgHeight; imgWidth = (width / height) * imgHeight;
} else { } else {
imgWidth = this.width; imgWidth = this.nWidth;
imgHeight = (height / width) * imgWidth; imgHeight = (height / width) * imgWidth;
} }
} else { } else {
...@@ -474,11 +493,11 @@ ...@@ -474,11 +493,11 @@
// #ifndef APP-NVUE // #ifndef APP-NVUE
let draw = async () => { let draw = async () => {
let imgWidth = this.imgWidth * this.scale * this.scaleRatio; let imgWidth = this.imgWidth * this.scale * this.nScaleRatio;
let imgHeight = this.imgHeight * this.scale * this.scaleRatio; let imgHeight = this.imgHeight * this.scale * this.nScaleRatio;
let xpos = this.imgLeft - this.cutX; let xpos = this.imgLeft - this.cutX;
let ypos = this.imgTop - this.cutY; let ypos = this.imgTop - this.cutY;
this.ctx.translate(xpos * this.scaleRatio, ypos * this.scaleRatio); this.ctx.translate(xpos * this.nScaleRatio, ypos * this.nScaleRatio);
this.ctx.rotate((this.angle * Math.PI) / 180); this.ctx.rotate((this.angle * Math.PI) / 180);
let src = this.src; let src = this.src;
// #ifdef APP-PLUS || MP // #ifdef APP-PLUS || MP
...@@ -489,16 +508,16 @@ ...@@ -489,16 +508,16 @@
this.ctx.drawImage(src, -imgWidth / 2, -imgHeight / 2, imgWidth, imgHeight); this.ctx.drawImage(src, -imgWidth / 2, -imgHeight / 2, imgWidth, imgHeight);
this.ctx.draw(false, () => { this.ctx.draw(false, () => {
let params = { let params = {
width: this.width * this.scaleRatio, width: this.nWidth * this.nScaleRatio,
height: Math.round(this.height * this.scaleRatio), height: Math.round(this.nHeight * this.nScaleRatio),
// #ifdef MP-QQ // #ifdef MP-QQ
destWidth: this.width * this.scaleRatio * 2 , destWidth: this.nWidth * this.nScaleRatio * 2,
destHeight: Math.round(this.height) * this.scaleRatio * 2, destHeight: Math.round(this.nHeight) * this.nScaleRatio * 2,
// #endif // #endif
// #ifndef MP-QQ // #ifndef MP-QQ
destWidth: this.width * this.scaleRatio, destWidth: this.nWidth * this.nScaleRatio,
destHeight: Math.round(this.height) * this.scaleRatio, destHeight: Math.round(this.nHeight) * this.nScaleRatio,
// #endif // #endif
fileType: this.fileType, fileType: this.fileType,
quality: this.quality quality: this.quality
...@@ -511,10 +530,11 @@ ...@@ -511,10 +530,11 @@
uni.hideLoading(); uni.hideLoading();
this.ctx.rotate(((360 - this.angle % 360) * Math this.ctx.rotate(((360 - this.angle % 360) * Math
.PI) / 180); .PI) / 180);
this.ctx.translate(-xpos * this.scaleRatio, - this.ctx.translate(-xpos * this.nScaleRatio, -
ypos * this.scaleRatio); ypos * this.nScaleRatio);
this.ctx.clearRect(0, 0, this.width * this this.ctx.clearRect(0, 0, this.nWidth * this
.scaleRatio, this.height * this.scaleRatio); .nScaleRatio, this.nHeight * this
.nScaleRatio);
this.ctx.draw(); this.ctx.draw();
callback && callback(res.apFilePath) callback && callback(res.apFilePath)
} }
...@@ -570,10 +590,11 @@ ...@@ -570,10 +590,11 @@
} }
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
.fui-cropper__img-hidden{ .fui-cropper__img-hidden {
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
} }
/* #endif */ /* #endif */
.fui-cropper__mask { .fui-cropper__mask {
position: fixed; position: fixed;
......
...@@ -276,9 +276,11 @@ ...@@ -276,9 +276,11 @@
// #ifdef H5 // #ifdef H5
this.isPC = this.IsPC() this.isPC = this.IsPC()
// #endif // #endif
setTimeout(() => { this.$nextTick(() => {
this.initData() setTimeout(() => {
}, 50) this.initData()
}, 50)
})
}, },
methods: { methods: {
getIndex(y) { getIndex(y) {
......
...@@ -306,6 +306,9 @@ ...@@ -306,6 +306,9 @@
text-align: center; text-align: center;
font-weight: 500; font-weight: 500;
border-width: 0; border-width: 0;
/* #ifdef H5 */
outline: none;
/* #endif */
} }
/* #ifdef H5 */ /* #ifdef H5 */
......
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
}, },
zIndex: { zIndex: {
type: Number, type: Number,
default: 1001 default: 996
}, },
param: { param: {
type: [Number, String], type: [Number, String],
...@@ -77,8 +77,14 @@ ...@@ -77,8 +77,14 @@
getStyles() { getStyles() {
let distance = Math.abs(Number(this.distance)) let distance = Math.abs(Number(this.distance))
let styles = `bottom: -${distance}rpx;`; let styles = `bottom: -${distance}rpx;`;
// #ifdef APP-NVUE
styles = `bottom: 0rpx;`;
// #endif
if (this.position != 3) { if (this.position != 3) {
styles = `top: -${distance}rpx;`; styles = `top: -${distance}rpx;`;
// #ifdef APP-NVUE
styles = `top: 0rpx;`;
// #endif
} }
return styles return styles
} }
...@@ -210,6 +216,9 @@ ...@@ -210,6 +216,9 @@
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
/* #ifdef APP-NVUE */
padding: 40px 0;
/* #endif */
} }
.fui-landscape__icon { .fui-landscape__icon {
......
...@@ -103,6 +103,7 @@ ...@@ -103,6 +103,7 @@
}, },
// #ifndef APP-NVUE // #ifndef APP-NVUE
mounted() { mounted() {
this.isMounted = true
setTimeout(() => { setTimeout(() => {
// #ifdef H5 // #ifdef H5
if (window.self === window.top) { if (window.self === window.top) {
...@@ -119,6 +120,13 @@ ...@@ -119,6 +120,13 @@
}, 50) }, 50)
}, },
// #endif // #endif
// #ifdef H5
updated() {
if(!this.isMounted){
this.handleFade()
}
},
// #endif
// #ifndef VUE3 // #ifndef VUE3
beforeDestroy() { beforeDestroy() {
this.endObserver() this.endObserver()
......
...@@ -6,21 +6,22 @@ ...@@ -6,21 +6,22 @@
<view v-if="toolbar" class="fui-lp__btn-wrap" <view v-if="toolbar" class="fui-lp__btn-wrap"
:class="[theme==='light'?'fui-lp__btnwrap-light':'fui-lp__btnwrap-dark']"> :class="[theme==='light'?'fui-lp__btnwrap-light':'fui-lp__btnwrap-dark']">
<text class="fui-lp__button" :class="{'fui-lp__button-color':!color}" <text class="fui-lp__button" :class="{'fui-lp__button-color':!color}"
:style="{color:getColor,fontSize:size+'rpx',fontWeight:fontWeight}" @tap.stop="onComplete">{{text}}</text> :style="{color:getColor,fontSize:size+'rpx',fontWeight:fontWeight}"
@tap.stop="onComplete">{{text}}</text>
</view> </view>
<view class="fui-license__plate-grids"> <view class="fui-license__plate-grids">
<view class="fui-lp__grid-wrap" v-for="(item,index) in keyList" :key="item.id"> <view class="fui-lp__grid-wrap" v-for="(item,index) in keyList" :key="item.id">
<view class="fui-lp__grid" <view class="fui-lp__grid"
:class="{'fui-lp__grid-lg':index===3 && idx===0,'fui-lp__grid-hidden':!(type===1?val.cn:val.en)}" :class="{'fui-lp__grid-lg':index===3 && idx===0,'fui-lp__grid-hidden':!(type===1?val.cn:val.en)}"
v-for="(val,idx) in item.keys" :key="idx"> v-for="(val,idx) in item.keys" :key="idx">
<text :style="{fontSize:`${index===3 && idx===0? 28:(type===1?32:36)}rpx`}" <text :key="theme" :style="{fontSize:`${index===3 && idx===0? 28:(type===1?32:36)}rpx`}"
class="fui-license__plate-key" class="fui-license__plate-key"
:class="{'fui-lp__key-dark':theme==='dark','fui-lp__highlight-dark':theme==='dark' && val,'fui-lp__highlight':theme==='light' && val}" :class="{'fui-lp__key-dark':theme==='dark','fui-lp__key-light':theme!=='dark','fui-lp__highlight-dark':theme==='dark' && val,'fui-lp__highlight':theme==='light' && val}"
@tap.stop="keyClick(index,idx,val)">{{type===1?val.cn:val.en}}</text> @tap.stop="keyClick(index,idx,val)">{{type===1?val.cn:val.en}}</text>
</view> </view>
<view class="fui-lp__grid fui-lp__grid-lg" v-if="index===3"> <view class="fui-lp__grid fui-lp__grid-lg" v-if="index===3">
<view class="fui-license__plate-key" <view :key="theme" class="fui-license__plate-key"
:class="{'fui-lp__key-dark':theme==='dark','fui-lp__highlight-dark':theme==='dark','fui-lp__highlight':theme==='light'}" :class="{'fui-lp__key-dark':theme==='dark','fui-lp__key-light':theme!=='dark','fui-lp__highlight-dark':theme==='dark','fui-lp__highlight':theme==='light'}"
@tap.stop="backspace"> @tap.stop="backspace">
<fui-icon :name="name" :size="48" :color="theme==='dark'?'#d1d1d1':'#333'"></fui-icon> <fui-icon :name="name" :size="48" :color="theme==='dark'?'#d1d1d1':'#333'"></fui-icon>
</view> </view>
...@@ -222,7 +223,7 @@ ...@@ -222,7 +223,7 @@
transform-origin: center center; transform-origin: center center;
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
transform: translate(0, 100%); transform: translate(0, 100%);
opacity: 0; opacity: 0.01;
border-top-style: solid; border-top-style: solid;
border-top-width: 0.5px; border-top-width: 0.5px;
/* #endif */ /* #endif */
...@@ -339,29 +340,36 @@ ...@@ -339,29 +340,36 @@
flex-shrink: 0; flex-shrink: 0;
box-sizing: border-box; box-sizing: border-box;
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */
flex: 1; flex: 1;
/* #endif */
font-weight: 500; font-weight: 500;
height: 88rpx; height: 88rpx;
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
line-height: 88rpx; line-height: 88rpx;
/* #endif */ /* #endif */
background: #fff;
border-radius: 8rpx; border-radius: 8rpx;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
/* #ifdef H5 */ /* #ifdef H5 */
cursor: pointer; cursor: pointer;
/* #endif */ /* #endif */
color: #181818;
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
border-bottom-width: 0.5px; border-bottom-width: 0.5px;
border-bottom-color: rgba(0, 0, 0, .1);
border-bottom-style: solid; border-bottom-style: solid;
/* #endif */ /* #endif */
text-align: center; text-align: center;
position: relative; position: relative;
} }
.fui-lp__key-light {
background: #fff;
color: #181818;
/* #ifdef APP-NVUE */
border-bottom-color: rgba(0, 0, 0, .1);
/* #endif */
}
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
.fui-license__plate-key::after { .fui-license__plate-key::after {
content: ''; content: '';
......
<template> <template>
<view class="fui-load__ani" :class="{'fui-load__ani-fixed':isFixed}"> <view class="fui-load__ani" :class="{'fui-load__ani-fixed':isFixed}"
:style="{background:isFixed?maskColor:'transparent'}">
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
<view class="fui-load__ani-1" v-if="type==1"> <view class="fui-load__ani-1" v-if="type==1">
<view class="fui-load__ani-a" :class="{'fui-load__ani-bg':!color || color==='true'}" <view class="fui-load__ani-a" :class="{'fui-load__ani-bg':!color || color===true}"
:style="{background:color}"></view> :style="{background:color}"></view>
<view class="fui-ani__ani-b" :class="{'fui-load__ani-bg':!color || color==='true'}" <view class="fui-ani__ani-b" :class="{'fui-load__ani-bg':!color || color===true}"
:style="{background:color}"></view> :style="{background:color}"></view>
<view :class="{'fui-load__ani-bg':!color || color==='true'}" :style="{background:color}"></view> <view :class="{'fui-load__ani-bg':!color || color==='true'}" :style="{background:color}"></view>
</view> </view>
<view class="fui-load__ani-2" v-if="type==2"> <view class="fui-load__ani-2" v-if="type==2">
<view class="fui-load__ani-line fui-load__ani-c" :class="{'fui-load__ani-bg':!color || color==='true'}" <view class="fui-load__ani-line fui-load__ani-c" :class="{'fui-load__ani-bg':!color || color===true}"
:style="{background:color}"></view> :style="{background:color}"></view>
<view class="fui-load__ani-line fui-load__ani-d" :class="{'fui-load__ani-bg':!color || color==='true'}" <view class="fui-load__ani-line fui-load__ani-d" :class="{'fui-load__ani-bg':!color || color===true}"
:style="{background:color}"></view> :style="{background:color}"></view>
<view class="fui-load__ani-line fui-load__ani-e" :class="{'fui-load__ani-bg':!color || color==='true'}" <view class="fui-load__ani-line fui-load__ani-e" :class="{'fui-load__ani-bg':!color || color===true}"
:style="{background:color}"></view> :style="{background:color}"></view>
</view> </view>
<view class="fui-load__ani-3" :class="{'fui-load__ani-border':!color || color==='true'}" <view class="fui-load__ani-3" :class="{'fui-load__ani-border':!color || color===true}"
:style="{'border-left-color':color,'border-right-color':color}" v-if="type==3"> :style="{'border-left-color':color,'border-right-color':color}" v-if="type==3">
</view> </view>
<view class="fui-load__ani-4" :class="{'fui-load__ani-bcolor':!color || color==='true'}" <view class="fui-load__ani-4" :class="{'fui-load__ani-bcolor':!color || color===true}"
:style="{borderColor:color}" v-if="type==4"> :style="{borderColor:color}" v-if="type==4">
<view class="fui-load__ani-f" :class="{'fui-load__ani-bg':!color || color==='true'}" <view class="fui-load__ani-f" :class="{'fui-load__ani-bg':!color || color===true}"
:style="{background:color}"></view> :style="{background:color}"></view>
</view> </view>
<view class="fui-load__ani-5" :class="{'fui-load__ani-bg':!color || color==='true'}" :style="{background:color}" <view class="fui-load__ani-5" :class="{'fui-load__ani-bg':!color || color===true}" :style="{background:color}"
v-if="type==5"> v-if="type==5">
<view class="fui-load__ani-g" :class="{'fui-load__ani-bg':!color || color==='true'}" <view class="fui-load__ani-g" :class="{'fui-load__ani-bg':!color || color===true}"
:style="{background:color}"></view> :style="{background:color}"></view>
<view class="fui-load__ani-h" :class="{'fui-load__ani-bg':!color || color==='true'}" <view class="fui-load__ani-h" :class="{'fui-load__ani-bg':!color || color===true}"
:style="{background:color}"></view> :style="{background:color}"></view>
</view> </view>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef APP-NVUE --> <!-- #ifdef APP-NVUE -->
<loading-indicator :animating="true"></loading-indicator> <view class="fui-load__ani-1n" v-if="type==1">
<view class="fui-loadani__1" :style="{background:color}" ref="ani_11"></view>
<view class="fui-loadani__1" :style="{background:color}" ref="ani_12"></view>
<view class="fui-loadani__1" ref="ani_13" :style="{background:color}"></view>
</view>
<view class="fui-load__ani-2n" v-if="type==2">
<view class="fui-load__ani-line" ref="ani_11" :style="{background:color}"></view>
<view class="fui-load__ani-line" ref="ani_12" :style="{background:color}"></view>
<view class="fui-load__ani-line" ref="ani_13" :style="{background:color}"></view>
</view>
<view class="fui-load__ani-3n" ref="fui_loadani34"
:style="{'border-left-color':color,'border-right-color':color}" v-if="type==3">
</view>
<view class="fui-load__ani-4n" ref="fui_loadani34" v-if="type==4">
<view class="fui-load__ani-41" :style="{borderColor:color}"></view>
<view class="fui-load__ani-42" :style="{background:color}"></view>
</view>
<view class="fui-load__ani-5n" v-if="type==5">
<view class="fui-load__ani-i" ref="ani_11" :style="{background:color}"></view>
<view class="fui-load__ani-i" ref="ani_12" :style="{background:color}"></view>
<view class="fui-load__ani-i" ref="ani_13" :style="{background:color}"></view>
</view>
<!-- #endif --> <!-- #endif -->
</view> </view>
</template> </template>
<script> <script>
// #ifdef APP-NVUE
const animation = weex.requireModule('animation')
// #endif
export default { export default {
name: "fui-load-ani", name: "fui-load-ani",
props: { props: {
...@@ -53,43 +81,163 @@ ...@@ -53,43 +81,163 @@
default: 1 default: 1
}, },
//loading颜色 //loading颜色
// #ifdef APP-NVUE
color: {
type: String,
default: '#465CFF'
},
// #endif
// #ifndef APP-NVUE
color: { color: {
type: String, type: String,
default: '' default: ''
}, },
// #endif
//是否固定在屏幕中间显示 //是否固定在屏幕中间显示
isFixed: { isFixed: {
type: Boolean, type: Boolean,
default: false default: false
},
//isFixed=true时有效
maskColor: {
type: String,
default: 'transparent'
}
},
// #ifdef APP-NVUE
created() {
this.timer = null;
this.deg = 0;
this.stop = false;
},
mounted() {
clearInterval(this.timer)
this.$nextTick(() => {
if (this.type == 1 || this.type == 2 || this.type == 5) {
setTimeout(() => {
this.startAni()
}, 50)
this.timer = setInterval(() => {
this.startAni()
}, 1200)
} else if (this.type == 3 || this.type == 4) {
setTimeout(() => {
this.deg += 360;
this._animation()
}, 50)
}
})
},
// #ifndef VUE3
beforeDestroy() {
clearInterval(this.timer)
this.deg = 0;
this.stop = true;
},
// #endif
// #ifdef VUE3
beforeUnmount() {
clearInterval(this.timer)
this.deg = 0;
this.stop = true;
},
// #endif
methods: {
transition(el, options, duration, delay = 0) {
return new Promise((resolve) => {
animation.transition(el.ref, {
duration,
delay,
timingFunction: 'linear',
needLayout: false,
...options,
}, resolve)
})
},
ani(el) {
let styles = {}
let styles2 = {}
if (this.type == 5) {
styles.opacity = 0.25
styles2.opacity = 1
} else {
styles.transform = this.type == 1 ? 'scale(0)' : `translateY(0)`
styles2.transform = this.type == 1 ? 'scale(1)' : `translateY(100%)`
}
this.transition(el, {
styles
}, 500, 0).then(() => {
this.transition(el, {
styles: styles2
}, 500, 0)
})
},
startAni() {
this.ani(this.$refs['ani_11'])
setTimeout(() => {
this.ani(this.$refs['ani_12'])
}, 300)
setTimeout(() => {
this.ani(this.$refs['ani_13'])
}, 500)
},
_animation() {
if (!this.$refs['fui_loadani34'] || this.stop) return;
animation.transition(
this.$refs['fui_loadani34'].ref, {
styles: {
transform: `rotate(${this.deg}deg)`
},
duration: 800, //ms
timingFunction: 'linear',
iterationCount: 'infinite',
needLayout: false,
delay: 0 //ms
}, () => {
this.deg += 360;
this._animation()
}
);
} }
} }
// #endif
} }
</script> </script>
<style scoped> <style scoped>
.fui-load__ani { .fui-load__ani {
/* #ifdef APP-VUE */
flex: 1;
/* #endif */
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
width: 100%; width: 100%;
display: flex; display: flex;
/* #endif */ /* #endif */
/* #ifdef APP-VUE */
flex: 1;
/* #endif */
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
/* #ifndef APP-NVUE */
.fui-load__ani-fixed { .fui-load__ani-fixed {
position: fixed; position: fixed;
left: 0; left: 0;
top: 50%; right: 0;
transform: translateY(-50%); top: 0;
z-index: 1008; bottom: 0;
/* #ifndef APP-NVUE */
display: flex;
z-index: 996;
/* #endif */
justify-content: center;
align-items: center;
} }
/* #ifndef APP-NVUE */
.fui-load__ani-1{
flex-direction: row;
}
.fui-load__ani-1 view { .fui-load__ani-1 view {
width: 36rpx; width: 36rpx;
height: 36rpx; height: 36rpx;
...@@ -292,4 +440,84 @@ ...@@ -292,4 +440,84 @@
} }
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */
.fui-load__ani-1n {
flex-direction: row;
align-items: center;
}
.fui-loadani__1 {
width: 36rpx;
height: 36rpx;
border-radius: 36rpx;
}
.fui-load__ani-2n {
position: relative;
width: 56rpx;
height: 56rpx;
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
overflow: hidden;
}
.fui-load__ani-line {
width: 8rpx;
height: 56rpx;
border-top-left-radius: 8rpx;
border-top-right-radius: 8rpx;
transform: translateY(100%);
}
.fui-load__ani-3n {
width: 40rpx;
height: 40rpx;
border: 2px solid transparent;
border-radius: 24rpx;
}
.fui-load__ani-4n {
width: 68rpx;
height: 68rpx;
position: relative;
align-items: center;
justify-content: center;
border: 0;
}
.fui-load__ani-41 {
width: 52rpx;
height: 52rpx;
border: 1px solid;
border-radius: 50%;
}
.fui-load__ani-42 {
width: 16rpx;
height: 16rpx;
position: absolute;
top: 0rpx;
left: 26rpx;
border-radius: 12rpx;
opacity: .6;
}
.fui-load__ani-5n {
width: 76rpx;
height: 18rpx;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.fui-load__ani-i {
width: 16rpx;
height: 16rpx;
border-radius: 12rpx;
opacity: .25;
}
/* #endif */
</style> </style>
...@@ -95,7 +95,12 @@ ...@@ -95,7 +95,12 @@
}, },
// #ifdef APP-NVUE // #ifdef APP-NVUE
mounted() { mounted() {
this._animation() this.$nextTick(() => {
setTimeout(() => {
this.deg += 360;
this._animation()
}, 50)
})
}, },
// #endif // #endif
//nvue暂不支持vue3,所以不需要做兼容,此处以防后续兼容 //nvue暂不支持vue3,所以不需要做兼容,此处以防后续兼容
......
...@@ -124,7 +124,12 @@ ...@@ -124,7 +124,12 @@
}, },
// #ifdef APP-NVUE // #ifdef APP-NVUE
mounted() { mounted() {
this._animation() this.$nextTick(() => {
setTimeout(() => {
this.deg += 360;
this._animation()
}, 50)
})
}, },
// #endif // #endif
// #ifndef VUE3 // #ifndef VUE3
......
...@@ -153,7 +153,11 @@ ...@@ -153,7 +153,11 @@
mounted() { mounted() {
this.actionVal = this.getAction(this.action) this.actionVal = this.getAction(this.action)
// #ifdef MP // #ifdef MP
this.initMp() this.$nextTick(()=>{
setTimeout(()=> {
this.initMp()
}, 10);
})
// #endif // #endif
}, },
methods: { methods: {
......
...@@ -173,6 +173,7 @@ ...@@ -173,6 +173,7 @@
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
/* #endif */ /* #endif */
flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
opacity: 0; opacity: 0;
......
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<view class="fui-modal__btn-wrap" :style="getWidth" :class="{'fui-modal__btn-row':direction==='row'}" <view class="fui-modal__btn-wrap" :style="getWidth" :class="{'fui-modal__btn-row':direction==='row'}"
v-if="vals.length>0"> v-if="vals.length>0">
<view class="fui-modal__button" <view class="fui-modal__button"
:class="{'fui-modal__button-col':direction==='column' && index!==vals.length-1,'fui-modal__button-bg':!entity.plain && !entity.background,'fui-modal__button-border':entity.plain,'fui-modal__button-bc':entity.plain && !entity.background}" :class="{'fui-model__button-full':direction==='row','fui-modal__button-col':direction==='column' && index!==vals.length-1,'fui-modal__button-bg':!entity.plain && !entity.background,'fui-modal__button-border':entity.plain,'fui-modal__button-bc':entity.plain && !entity.background}"
:style="{borderRadius:radius+'rpx',background:entity.plain?'transparent':(entity.background || primaryColor),borderColor:entity.plain?(entity.background || primaryColor):'transparent'}" :style="{borderRadius:radius+'rpx',background:entity.plain?'transparent':(entity.background || primaryColor),borderColor:entity.plain?(entity.background || primaryColor):'transparent'}"
v-for="(entity,index) in vals" :key="index"> v-for="(entity,index) in vals" :key="index">
<text class="fui-modal__button-inner" <text class="fui-modal__button-inner"
...@@ -111,7 +111,7 @@ ...@@ -111,7 +111,7 @@
}, },
zIndex: { zIndex: {
type: Number, type: Number,
default: 1001 default: 996
} }
}, },
data() { data() {
...@@ -317,7 +317,6 @@ ...@@ -317,7 +317,6 @@
} }
.fui-modal__button { .fui-modal__button {
flex: 1;
margin-left: 20rpx; margin-left: 20rpx;
margin-right: 20rpx; margin-right: 20rpx;
margin-top: 20rpx; margin-top: 20rpx;
...@@ -330,6 +329,10 @@ ...@@ -330,6 +329,10 @@
/* #endif */ /* #endif */
} }
.fui-model__button-full {
flex: 1;
}
.fui-modal__button-col { .fui-modal__button-col {
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
......
...@@ -128,7 +128,9 @@ ...@@ -128,7 +128,9 @@
}) })
// #endif // #endif
this.$nextTick(() => { this.$nextTick(() => {
this.initAnimation() setTimeout(() => {
this.initAnimation()
}, 10)
}) })
}, },
watch: { watch: {
......
<template> <template>
<view class="fui-overflow__hidden-wrap" <view :key="visible" class="fui-overflow__hidden-wrap"
:class="{'fui-overflow__hidden':type==1,'fui-gradient__hidden':type==2 && !visible,'fui-text__nowrap':type==1 && rows==1}" :class="{'fui-overflow__hidden':type==1,'fui-gradient__hidden':type==2 && !visible,'fui-text__nowrap':type==1 && rows==1}"
:style="{width:width,height:type==1 || visible?'auto':height,paddingTop:type==2?padding[0]:'0',paddingRight:type==2?padding[1]:0,paddingBottom:type==2?(padding[2] || padding[0]):0,paddingLeft:type==2?(padding[3] || padding[1]):0,background:background,fontSize:size+'rpx',color:color,fontWeight:fontWeight,'-webkit-line-clamp':type==1?rows:'none',textOverflow:overflow,textAlign:align}" :style="{width:width,height:type==1 || visible?'auto':height,paddingTop:type==2?padding[0]:'0',paddingRight:type==2?padding[1]:0,paddingBottom:type==2?(padding[2] || padding[0]):0,paddingLeft:type==2?(padding[3] || padding[1]):0,background:background,fontSize:size+'rpx',color:color,fontWeight:fontWeight,'-webkit-line-clamp':type==1?rows:'none',textOverflow:overflow,textAlign:align}"
@tap="handleTap"> @tap="handleTap">
<!-- #ifdef APP-NVUE --> <!-- #ifdef APP-NVUE -->
<text <text :key="visible"
:style="{width:width,height:type==1 || visible?'auto':height,fontSize:size+'rpx',color:color,fontWeight:fontWeight,lines:type==1?rows:0,textOverflow:overflow,textAlign:align}" :style="{width:width,height:type==1 || visible?'auto':height,fontSize:size+'rpx',color:color,fontWeight:fontWeight,lines:type==1?rows:0,textOverflow:overflow,textAlign:align}"
v-if="text">{{text}}</text> v-if="text">{{text}}</text>
<!-- #endif --> <!-- #endif -->
......
...@@ -16,7 +16,8 @@ ...@@ -16,7 +16,8 @@
</view> </view>
<view class="fui-page__number" v-if="isPage && pageType==2"> <view class="fui-page__number" v-if="isPage && pageType==2">
<view class="fui-page__num-item" :class="{'fui-pagination__bg':!activeBgColor && currentIndex===item}" <view class="fui-page__num-item"
:class="{'fui-pagination__bg':!activeBgColor && currentIndex===item,'fui-page__num-width':item==='...' || (item!='...' && item<1000),'fui-page__num-padding':item!='...' && item>999}"
v-for="(item,index) in pageNumber" :key="index" v-for="(item,index) in pageNumber" :key="index"
:style="{background:currentIndex===item?getActiveBgColor:pageBgColor,borderRadius:radius+'rpx'}" :style="{background:currentIndex===item?getActiveBgColor:pageBgColor,borderRadius:radius+'rpx'}"
@tap.stop="handleClick(item,index)"> @tap.stop="handleClick(item,index)">
...@@ -323,9 +324,9 @@ ...@@ -323,9 +324,9 @@
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
border-width: 1px; border-width: 1px;
flex-shrink: 0;
/* #endif */ /* #endif */
border-style: solid; border-style: solid;
flex-shrink: 0;
/* #ifdef H5 */ /* #ifdef H5 */
cursor: pointer; cursor: pointer;
/* #endif */ /* #endif */
...@@ -390,8 +391,20 @@ ...@@ -390,8 +391,20 @@
/* #ifdef H5 */ /* #ifdef H5 */
cursor: pointer; cursor: pointer;
/* #endif */ /* #endif */
}
/* #ifdef APP-NVUE */
.fui-page__num-width {
width: 60rpx;
} }
.fui-page__num-padding {
padding: 0 8rpx;
}
/* #endif */
.fui-page__num-item:active { .fui-page__num-item:active {
opacity: .5; opacity: .5;
} }
......
...@@ -228,7 +228,7 @@ ...@@ -228,7 +228,7 @@
}, },
zIndex: { zIndex: {
type: [Number, String], type: [Number, String],
default: 1001 default: 996
}, },
isClose: { isClose: {
type: Boolean, type: Boolean,
...@@ -246,13 +246,11 @@ ...@@ -246,13 +246,11 @@
}, },
// #ifdef APP-NVUE // #ifdef APP-NVUE
mounted() { mounted() {
if (!this.$refs['fui_pkm_ani'] || !this.$refs['fui_pk_ani']) return; this.$nextTick(() => {
this._transtion('fui_pkm_ani', { setTimeout(() => {
transform: 'translateX(-100%)' this.hiddenNvuePicker()
}, 0) }, 50)
this._transtion('fui_pk_ani', { })
transform: 'translateY(100%)'
}, 0)
}, },
// #endif // #endif
computed: { computed: {
...@@ -351,6 +349,7 @@ ...@@ -351,6 +349,7 @@
thirdArr: [], thirdArr: [],
fourthArr: [], fourthArr: [],
vals: [], vals: [],
nvueVals: [],
// #ifndef APP-NVUE // #ifndef APP-NVUE
darkStyle: 'background-image: -webkit-linear-gradient(top, rgba(35, 35, 35, .95), rgba(35, 35, 35, .6)), -webkit-linear-gradient(bottom, rgba(35, 35, 35, .95), rgba(35, 35, 35, .6));', darkStyle: 'background-image: -webkit-linear-gradient(top, rgba(35, 35, 35, .95), rgba(35, 35, 35, .6)), -webkit-linear-gradient(bottom, rgba(35, 35, 35, .95), rgba(35, 35, 35, .6));',
indicatorStyl: 'border-color: #333;height: 44px;', indicatorStyl: 'border-color: #333;height: 44px;',
...@@ -370,6 +369,17 @@ ...@@ -370,6 +369,17 @@
}; };
}, },
methods: { methods: {
// #ifdef APP-NVUE
hiddenNvuePicker() {
if (!this.$refs['fui_pkm_ani'] || !this.$refs['fui_pk_ani']) return;
this._transtion('fui_pkm_ani', {
transform: 'translateX(-100%)'
}, 0)
this._transtion('fui_pk_ani', {
transform: 'translateY(100%)'
}, 0)
},
// #endif
initialize() { initialize() {
if (this.linkage) { if (this.linkage) {
this.getFields(this.fields) this.getFields(this.fields)
...@@ -515,12 +525,16 @@ ...@@ -515,12 +525,16 @@
} }
}, },
reset() { reset() {
this.vals = [ const vals = [
[0], [0],
[0, 0], [0, 0],
[0, 0, 0], [0, 0, 0],
[0, 0, 0, 0] [0, 0, 0, 0]
][Number(this.layer) - 1] ][Number(this.layer) - 1]
this.vals = [...vals];
// #ifdef APP-NVUE
this.nvueVals = [...vals]
// #endif
}, },
open() { open() {
this.isShow = true; this.isShow = true;
...@@ -563,7 +577,10 @@ ...@@ -563,7 +577,10 @@
this.vals = [] this.vals = []
this.$nextTick(() => { this.$nextTick(() => {
setTimeout(() => { setTimeout(() => {
this.vals = vals; this.vals = [...vals];
// #ifdef APP-NVUE
this.nvueVals = [...vals]
// #endif
}, 200) }, 200)
}) })
} else { } else {
...@@ -670,7 +687,9 @@ ...@@ -670,7 +687,9 @@
result = text.join(''); result = text.join('');
} }
} }
// #ifdef APP-NVUE
this.nvueVals = [...this.vals];
// #endif
this.$emit('change', { this.$emit('change', {
text: text, text: text,
value: value, value: value,
...@@ -711,8 +730,8 @@ ...@@ -711,8 +730,8 @@
}, 50) }, 50)
}, },
pickerChange(e) { pickerChange(e) {
if (!this.isInitShow) return;
let value = e.detail.value; let value = e.detail.value;
if (!this.isInitShow || value.length != this.layer) return;
if (this.linkage) { if (this.linkage) {
if (this.layer == 1) { if (this.layer == 1) {
this.setOneLayers(value) this.setOneLayers(value)
...@@ -734,6 +753,7 @@ ...@@ -734,6 +753,7 @@
// #ifdef APP-NVUE // #ifdef APP-NVUE
openPicker() { openPicker() {
setTimeout(() => { setTimeout(() => {
this.vals = [...this.nvueVals];
this._animation(true); this._animation(true);
}, 20); }, 20);
}, },
...@@ -747,7 +767,7 @@ ...@@ -747,7 +767,7 @@
duration: duration, duration: duration,
needLayout: false, needLayout: false,
delay: 0 delay: 0
}, () => { }, (e) => {
callback && callback() callback && callback()
}); });
}, },
...@@ -794,13 +814,14 @@ ...@@ -794,13 +814,14 @@
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;
visibility: hidden; visibility: hidden;
opacity: 0;
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
transition-property: opacity; transition-property: opacity;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
transition-duration: .25s; transition-duration: .25s;
opacity: 0.001;
/* #endif */ /* #endif */
opacity: 0;
} }
.fui-picker__mask-show { .fui-picker__mask-show {
...@@ -825,10 +846,9 @@ ...@@ -825,10 +846,9 @@
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
transition-property: opacity; transition-property: transform;
transition-duration: .25s; transition-duration: .25s;
transform: translateY(100%); transform: translateY(100%);
/* opacity: 0; */
/* #endif */ /* #endif */
transform-origin: center center; transform-origin: center center;
flex-direction: column; flex-direction: column;
...@@ -844,9 +864,8 @@ ...@@ -844,9 +864,8 @@
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
visibility: visible; visibility: visible;
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
opacity: 1; transform: translateY(0);
/* #endif */ /* #endif */
} }
...@@ -974,7 +993,9 @@ ...@@ -974,7 +993,9 @@
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
width: 100%; width: 100%;
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */
flex: 1; flex: 1;
/* #endif */
height: 520rpx; height: 520rpx;
} }
......
...@@ -59,20 +59,23 @@ ...@@ -59,20 +59,23 @@
this.h = this._toPx(this.height) this.h = this._toPx(this.height)
}, },
mounted() { mounted() {
let ganvas = this.$refs[this.canvasId]; this.$nextTick(()=>{
/*通过元素引用获取canvas对象*/ let ganvas = this.$refs[this.canvasId];
let canvasObj = enable(ganvas, { /*通过元素引用获取canvas对象*/
bridge: WeexBridge let canvasObj = enable(ganvas, {
}); bridge: WeexBridge
/*获取绘图所需的上下文,暂不支持3d*/ });
this.context = canvasObj.getContext('2d'); /*获取绘图所需的上下文,暂不支持3d*/
setTimeout(() => { this.context = canvasObj.getContext('2d');
this.$emit('ready') setTimeout(() => {
}, 50) this.$emit('ready')
}, 50)
})
}, },
methods: { methods: {
_toPx(rpx) { _toPx(rpx) {
return uni.upx2px(Number(rpx) * Number(this.pixelRatio)) // * Number(this.pixelRatio)
return uni.upx2px(Number(rpx))
}, },
_getTextWidth(context, text, fontSize) { _getTextWidth(context, text, fontSize) {
//measureText首次获取可能为空对象,.width为undefined //measureText首次获取可能为空对象,.width为undefined
...@@ -151,7 +154,6 @@ ...@@ -151,7 +154,6 @@
context.setTextAlign(textAlign); context.setTextAlign(textAlign);
let textWidth = this._getTextWidth(context, text, fontSize); let textWidth = this._getTextWidth(context, text, fontSize);
width = this._toPx(width); width = this._toPx(width);
console.log(textWidth, width)
let textArr = this._wrapText(text, fontSize, textWidth, width, context, rows) let textArr = this._wrapText(text, fontSize, textWidth, width, context, rows)
//如果文本前面有其他文本内容 //如果文本前面有其他文本内容
if (frontText) { if (frontText) {
...@@ -553,9 +555,6 @@ ...@@ -553,9 +555,6 @@
1, 1,
function(res) { function(res) {
callback && callback(res.tempFilePath) callback && callback(res.tempFilePath)
},
function() {
callback && callback(false)
} }
) )
}, time) }, time)
......
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
// #ifndef MP-WEIXIN || MP-QQ // #ifndef MP-WEIXIN || MP-QQ
const canvasId = `fui_${Math.ceil(Math.random() * 10e5).toString(36)}` const canvasId = `fui_${Math.ceil(Math.random() * 10e5).toString(36)}`
// #endif // #endif
//vue3下QQ小程序无法使用动态id //vue3下QQ小程序无法使用动态id
// #ifdef MP-QQ // #ifdef MP-QQ
const canvasId = 'canvas_poster' const canvasId = 'canvas_poster'
// #endif // #endif
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
this.h = this._toPx(this.height) this.h = this._toPx(this.height)
}, },
mounted() { mounted() {
this.$nextTick(()=>{ this.$nextTick(() => {
setTimeout(() => { setTimeout(() => {
poster.create(Number(this.pixelRatio), this.canvasId, this) poster.create(Number(this.pixelRatio), this.canvasId, this)
this.$emit('ready') this.$emit('ready')
...@@ -152,6 +152,45 @@ ...@@ -152,6 +152,45 @@
}, },
saveImage(filePath) { saveImage(filePath) {
poster.saveImage(filePath) poster.saveImage(filePath)
},
//删除已缓存文件,防止超出存储空间大小限制 【备用】
//App、微信小程序、支付宝小程序、百度小程序、抖音小程序、飞书小程序、QQ小程序、京东小程序
removeSavedFile() {
//使用前请先查看支持平台
let count = 0;
return new Promise((resolve, reject) => {
// #ifdef APP-PLUS || MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-JD || MP-QQ || MP-LARK
uni.getSavedFileList({
success(res) {
count = res.fileList.length;
if (count > 0) {
let num = 0;
let list = res.fileList || []
list.forEach(item => {
uni.removeSavedFile({
filePath: item.filePath,
complete(res) {
num++;
if (num === count) {
resolve(true)
}
}
})
})
} else {
resolve(true)
}
},
fail() {
reject(false)
}
})
// #endif
// #ifndef APP-PLUS || MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-JD || MP-QQ || MP-LARK
resolve(true)
// #endif
})
} }
} }
} }
......
...@@ -18,8 +18,18 @@ ...@@ -18,8 +18,18 @@
<text class="fui-preview__label" <text class="fui-preview__label"
:class="[!labelColor && !item[lColor]?'fui-preview__gray':'','fui-preview__label-'+labelAlign]" :class="[!labelColor && !item[lColor]?'fui-preview__gray':'','fui-preview__label-'+labelAlign]"
:style="{color:item[lColor] || labelColor,fontSize:bdSize+'rpx',width:labelWidth>0?labelWidth+'rpx':'auto',marginRight:labelRight+'rpx'}">{{item[label]}}</text> :style="{color:item[lColor] || labelColor,fontSize:bdSize+'rpx',width:labelWidth>0?labelWidth+'rpx':'auto',marginRight:labelRight+'rpx'}">{{item[label]}}</text>
<!-- #ifndef APP-NVUE -->
<text class="fui-preview__value" :class="{'fui-preview__color':!bdColor && !item[valueColor]}" <text class="fui-preview__value" :class="{'fui-preview__color':!bdColor && !item[valueColor]}"
:style="{color:item[valueColor] || bdColor,fontSize:bdSize+'rpx',textAlign:bdAlign}">{{item[value]}}</text> :style="{color:item[valueColor] || bdColor,fontSize:bdSize+'rpx',textAlign:bdAlign}"
@tap="itemClick(index)">{{item[value]}}</text>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view class="fui-preview__value-wrap">
<text class="fui-preview__value" :class="{'fui-preview__color':!bdColor && !item[valueColor]}"
:style="{color:item[valueColor] || bdColor,fontSize:bdSize+'rpx',textAlign:bdAlign}"
@tap="itemClick(index)">{{item[value]}}</text>
</view>
<!-- #endif -->
</view> </view>
</view> </view>
<slot></slot> <slot></slot>
...@@ -39,7 +49,7 @@ ...@@ -39,7 +49,7 @@
<script> <script>
export default { export default {
name: "fui-preview", name: "fui-preview",
emits: ['click'], emits: ['click', 'valueClick'],
props: { props: {
previewData: { previewData: {
type: Object, type: Object,
...@@ -236,6 +246,21 @@ ...@@ -236,6 +246,21 @@
index: idx, index: idx,
...params ...params
}) })
},
itemClick(index) {
this.$emit('valueClick', {
index,
item: this.pvd[this.list][index]
})
},
setValue(index, value) {
const idx = Number(index)
if (idx || idx === 0) {
const data = JSON.parse(JSON.stringify(this.pvd))
const item = data[this.list][idx]
item[this.value] = value;
this.pvd = data
}
} }
} }
} }
...@@ -351,10 +376,16 @@ ...@@ -351,10 +376,16 @@
/* #endif */ /* #endif */
.fui-preview__value { /* #ifdef APP-NVUE */
.fui-preview__value-wrap {
flex: 1; flex: 1;
}
/* #endif */
.fui-preview__value {
text-align: right; text-align: right;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
flex: 1;
display: block; display: block;
word-break: break-all; word-break: break-all;
word-wrap: break-word; word-wrap: break-word;
...@@ -386,7 +417,9 @@ ...@@ -386,7 +417,9 @@
.fui-preview__ft { .fui-preview__ft {
/* #ifdef APP-NVUE */
flex: 1; flex: 1;
/* #endif */
position: relative; position: relative;
height: 100rpx; height: 100rpx;
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
...@@ -423,6 +456,9 @@ ...@@ -423,6 +456,9 @@
/* #endif */ /* #endif */
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
/* #ifdef APP-NVUE */
align-items: flex-start;
/* #endif */
} }
.fui-preview__label { .fui-preview__label {
......
...@@ -35,10 +35,18 @@ ...@@ -35,10 +35,18 @@
type: [Number, String], type: [Number, String],
default: 8 default: 8
}, },
// #ifndef APP-NVUE
radius: { radius: {
type: [Number, String], type: [Number, String],
default: 8 default: 8
}, },
// #endif
// #ifdef APP-NVUE
radius: {
type: [Number, String],
default: 0
},
// #endif
showInfo: { showInfo: {
type: Boolean, type: Boolean,
default: false default: false
...@@ -80,7 +88,9 @@ ...@@ -80,7 +88,9 @@
} }
}, },
mounted() { mounted() {
this.darwProgress(); this.$nextTick(() => {
this.darwProgress();
})
}, },
computed: { computed: {
getActiveColor() { getActiveColor() {
...@@ -156,6 +166,7 @@ ...@@ -156,6 +166,7 @@
align-items: center; align-items: center;
} }
/* nvue android 端 overflow: hidden 无效,目前uni-app官方尚未修复此问题*/
.fui-progress__bar-bg { .fui-progress__bar-bg {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
width: 100%; width: 100%;
......
...@@ -154,10 +154,14 @@ ...@@ -154,10 +154,14 @@
}, },
watch: { watch: {
src(newValue, oldValue) { src(newValue, oldValue) {
this.reset() setTimeout(()=> {
this.reset()
}, 50);
}, },
cutSrc(val) { cutSrc(val) {
this.reset() setTimeout(()=> {
this.reset()
}, 50);
} }
}, },
computed: { computed: {
......
...@@ -93,7 +93,8 @@ ...@@ -93,7 +93,8 @@
intScore: 0, intScore: 0,
decimalScore: 0, decimalScore: 0,
isPC: false, isPC: false,
rated: false rated: false,
isMounted: false
}; };
}, },
created() { created() {
...@@ -102,13 +103,25 @@ ...@@ -102,13 +103,25 @@
this.drawer = this.getParent() this.drawer = this.getParent()
}, },
mounted() { mounted() {
setTimeout(() => { this.isMounted = true;
this._getSize() this.$nextTick(() => {
}, 100) setTimeout(() => {
this._getSize()
}, 100)
})
// #ifdef H5 // #ifdef H5
this.isPC = this.IsPC() this.isPC = this.IsPC()
// #endif // #endif
}, },
// #ifdef H5
updated() {
if (!this.isMounted && !this.pageX) {
setTimeout(() => {
this._getSize()
}, 50)
}
},
// #endif
methods: { methods: {
getName(index, iScore, dScore) { getName(index, iScore, dScore) {
let name = 'star' let name = 'star'
...@@ -287,6 +300,9 @@ ...@@ -287,6 +300,9 @@
parentName = parent.$options.name; parentName = parent.$options.name;
} }
return parent; return parent;
},
reset() {
this._getSize();
} }
} }
} }
......
...@@ -176,7 +176,8 @@ ...@@ -176,7 +176,8 @@
width: 30rpx; width: 30rpx;
height: 60rpx; height: 60rpx;
border-style: solid; border-style: solid;
border-width: 0; border-left-width: 0;
border-top-width: 0;
border-right-width: 8rpx; border-right-width: 8rpx;
border-bottom-width: 8rpx; border-bottom-width: 8rpx;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
...@@ -185,6 +186,9 @@ ...@@ -185,6 +186,9 @@
transform: rotate(45deg); transform: rotate(45deg);
margin-bottom: 12rpx; margin-bottom: 12rpx;
margin-left: 4rpx; margin-left: 4rpx;
/* #ifdef APP-NVUE */
border-bottom-right-radius: 8rpx;
/* #endif */
} }
.fui-result__ib-fail { .fui-result__ib-fail {
...@@ -205,10 +209,14 @@ ...@@ -205,10 +209,14 @@
.fui-result__ib-waiting { .fui-result__ib-waiting {
height: 48rpx; height: 48rpx;
width: 48rpx; width: 48rpx;
border-width: 8rpx;
border-style: solid; border-style: solid;
border-top-width: 0; border-top-width: 0;
border-right-width: 0; border-right-width: 0;
border-bottom-width: 8rpx;
border-left-width: 8rpx;
/* #ifdef APP-NVUE */
border-bottom-left-radius: 8rpx;
/* #endif */
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
box-sizing: border-box; box-sizing: border-box;
/* #endif */ /* #endif */
......
...@@ -94,7 +94,9 @@ ...@@ -94,7 +94,9 @@
/* #endif */ /* #endif */
.fui-row__box { .fui-row__box {
/* #ifdef APP-NVUE */
flex: 1; flex: 1;
/* #endif */
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
box-sizing: border-box; box-sizing: border-box;
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
...@@ -104,6 +106,7 @@ ...@@ -104,6 +106,7 @@
/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */ /* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
display: block; display: block;
/* #endif */ /* #endif */
flex-direction: row;
} }
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
...@@ -124,7 +127,7 @@ ...@@ -124,7 +127,7 @@
/* #endif */ /* #endif */
.fui-row__flex { .fui-row__flex {
/* #ifndef APP-NVUE*/ /* #ifndef APP-NVUE*/
display: flex !important; display: flex;
/* #endif */ /* #endif */
flex-direction: row; flex-direction: row;
} }
......
...@@ -34,10 +34,10 @@ ...@@ -34,10 +34,10 @@
<text class="fui-search__bar-text">{{ placeholder }}</text> <text class="fui-search__bar-text">{{ placeholder }}</text>
</view> </view>
</view> </view>
<text v-if="cancel && isSearch && !val && cancelText && cancelText!=='true'" class="fui-search__bar-btn" <text v-if="cancel && isSearch && !val && cancelText && cancelText!==true && cancelText!=='true'"
:style="{ color: cancelColor }" @tap="hideInput">{{ cancelText }}</text> class="fui-search__bar-btn" :style="{ color: cancelColor }" @tap="hideInput">{{ cancelText }}</text>
<text v-if="val && !disabled && isSearch && searchText && searchText!=='true'" class="fui-search__bar-btn" <text v-if="val && !disabled && isSearch && searchText && searchText!==true && searchText!=='true'"
:class="{'fui-sb__btn-color':!searchColor}" :style="{ color: getSearchColor }" class="fui-search__bar-btn" :class="{'fui-sb__btn-color':!searchColor}" :style="{ color: getSearchColor }"
@tap="search">{{ searchText }}</text> @tap="search">{{ searchText }}</text>
</view> </view>
</template> </template>
...@@ -147,22 +147,17 @@ ...@@ -147,22 +147,17 @@
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
// #ifdef MP-TOUTIAO
setTimeout(() => { setTimeout(() => {
this.isFocus = this.focus; this.isFocus = this.focus;
}, 300) }, 300)
// #endif
// #ifndef MP-TOUTIAO
setTimeout(() => {
this.isFocus = this.focus;
}, 120)
// #endif
}) })
}, },
watch: { watch: {
focus(val) { focus(val) {
this.$nextTick(() => { this.$nextTick(() => {
this.isFocus = val; setTimeout(() => {
this.isFocus = val;
}, 20)
}) })
}, },
// #ifdef APP-NVUE // #ifdef APP-NVUE
......
...@@ -455,17 +455,27 @@ ...@@ -455,17 +455,27 @@
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
transition: all ease-in-out .3s; transition: all ease-in-out .3s;
visibility: hidden; visibility: hidden;
/* #endif */
opacity: 0; opacity: 0;
/* #endif */
/* #ifdef APP-NVUE */
opacity: 0.001;
/* #endif */
} }
/* #ifndef APP-NVUE */
.fui-select__mask-show { .fui-select__mask-show {
/* #ifndef APP-NVUE */
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
/* #endif */
/* #ifdef APP-NVUE */
opacity: 1;
/* #endif */
} }
/* #endif */
.fui-select__wrap { .fui-select__wrap {
position: fixed; position: fixed;
left: 0; left: 0;
...@@ -482,6 +492,8 @@ ...@@ -482,6 +492,8 @@
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
flex-direction: column; flex-direction: column;
/* transition-property: transform;
transition-duration: 0.3s; */
transform: translateY(100%); transform: translateY(100%);
/* #endif */ /* #endif */
...@@ -498,14 +510,20 @@ ...@@ -498,14 +510,20 @@
/* #endif */ /* #endif */
/* #ifndef APP-NVUE */
.fui-select__wrap-show { .fui-select__wrap-show {
/* #ifndef APP-NVUE */
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
/* #endif */
/* #ifdef APP-NVUE */
/* transform: translateY(0); */
/* #endif */
} }
/* #endif */
.fui-select__scroll { .fui-select__scroll {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
......
...@@ -4,14 +4,14 @@ ...@@ -4,14 +4,14 @@
@tap.stop="maskClick"> @tap.stop="maskClick">
</view> </view>
<view class="fui-share__sheet-wrap" <view class="fui-share__sheet-wrap"
:class="{'fui-share__sheet-radius':radius,'fui-share__sheet-hidden':!show,'fui-share__sheet-show':show}" :class="{'fui-share__sheet-radius':radius,'fui-share__sheet-show':show,'fui-share__sheet-hidden':nvueHidden}"
:style="{zIndex:zIndex,background:background}" ref="fui_ss_ani"> :style="{zIndex:zIndex,background:background}" ref="fui_ss_ani">
<slot> <slot>
<text class="fui-share__sheet-title" <text class="fui-share__sheet-title"
:style="{fontSize:size+'rpx',color:color}">{{!title || title==='true' || title===true?'':title}}</text> :style="{fontSize:size+'rpx',color:color}">{{!title || title==='true' || title===true?'':title}}</text>
</slot> </slot>
<view class="fui-share__sheet-box" v-for="(item,index) in items" :key="item.id"> <view class="fui-share__sheet-box" v-for="(item,index) in items" :key="item.id">
<scroll-view :show-scrollbar="false" scroll-x class="fui-share__sheet-scroll"> <scroll-view :show-scrollbar="false" :scroll-x="true" class="fui-share__sheet-scroll">
<view class="fui-share__sheet-list" :class="{'fui-share__sheet-full':isFull}" <view class="fui-share__sheet-list" :class="{'fui-share__sheet-full':isFull}"
:style="{paddingLeft:padding+'rpx',paddingRight:padding+'rpx'}"> :style="{paddingLeft:padding+'rpx',paddingRight:padding+'rpx'}">
<view class="fui-share__sheet-item" @tap.stop="handleClick($event,index,idx)" <view class="fui-share__sheet-item" @tap.stop="handleClick($event,index,idx)"
...@@ -26,7 +26,9 @@ ...@@ -26,7 +26,9 @@
</view> </view>
<text class="fui-share__sheet-text" <text class="fui-share__sheet-text"
:style="{fontSize:(obj.textSize || 24) + 'rpx',color:obj.textColor || '#7f7f7f'}">{{obj.text}}</text> :style="{fontSize:(obj.textSize || 24) + 'rpx',color:obj.textColor || '#7f7f7f'}">{{obj.text}}</text>
<!-- #ifndef APP-NVUE -->
<button class="fui-sharesheet__btn" :open-type="obj.openType" v-if="obj.openType"></button> <button class="fui-sharesheet__btn" :open-type="obj.openType" v-if="obj.openType"></button>
<!-- #endif -->
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
...@@ -141,7 +143,8 @@ ...@@ -141,7 +143,8 @@
data() { data() {
return { return {
items: [], items: [],
iphoneX: false iphoneX: false,
nvueHidden: true
}; };
}, },
created() { created() {
...@@ -152,13 +155,16 @@ ...@@ -152,13 +155,16 @@
}, },
// #ifdef APP-NVUE // #ifdef APP-NVUE
mounted() { mounted() {
if (!this.$refs['fui_ssm_ani'] || !this.$refs['fui_ss_ani']) return; this.$nextTick(() => {
this._transtion('fui_ssm_ani', { if (!this.$refs['fui_ssm_ani'] || !this.$refs['fui_ss_ani']) {
transform: 'translateX(-100%)' setTimeout(() => {
}, 0) this.hiddenNvueLayer()
this._transtion('fui_ss_ani', { }, 50)
transform: 'translateY(100%)' } else {
}, 0) this.hiddenNvueLayer()
}
this.nvueHidden = false;
})
}, },
// #endif // #endif
computed: { computed: {
...@@ -184,6 +190,15 @@ ...@@ -184,6 +190,15 @@
} }
}, },
methods: { methods: {
hiddenNvueLayer() {
if (!this.$refs['fui_ssm_ani'] || !this.$refs['fui_ss_ani']) return;
this._transtion('fui_ssm_ani', {
transform: 'translateX(-100%)'
}, 0)
this._transtion('fui_ss_ani', {
transform: 'translateY(100%)'
}, 0)
},
initData(vals) { initData(vals) {
if (vals && vals.length > 0) { if (vals && vals.length > 0) {
if (Array.isArray(vals[0])) { if (Array.isArray(vals[0])) {
...@@ -313,13 +328,14 @@ ...@@ -313,13 +328,14 @@
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;
visibility: hidden; visibility: hidden;
opacity: 0;
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
transition-property: opacity; transition-property: opacity;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
transition-duration: .25s; transition-duration: .25s;
opacity: 0.001;
/* #endif */ /* #endif */
opacity: 0;
} }
.fui-ss__mask-show { .fui-ss__mask-show {
...@@ -345,21 +361,12 @@ ...@@ -345,21 +361,12 @@
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
/* transition-property: opacity;
transition-duration: .25s; */
transform: translateY(100%); transform: translateY(100%);
/* #endif */ /* #endif */
transform-origin: center center; transform-origin: center center;
flex-direction: column; flex-direction: column;
} }
/* #ifdef APP-NVUE */
.fui-share__sheet-hidden {
opacity: 0;
}
/* #endif */
.fui-share__sheet-radius { .fui-share__sheet-radius {
border-top-left-radius: 24rpx; border-top-left-radius: 24rpx;
border-top-right-radius: 24rpx; border-top-right-radius: 24rpx;
...@@ -368,19 +375,23 @@ ...@@ -368,19 +375,23 @@
/* #endif */ /* #endif */
} }
/* #ifdef APP-NVUE */
.fui-share__sheet-hidden {
opacity: 0.001;
}
/* #endif */
.fui-share__sheet-show { .fui-share__sheet-show {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
visibility: visible; visibility: visible;
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
opacity: 1 !important; opacity: 1;
/* #endif */ /* #endif */
} }
.fui-share__sheet-title { .fui-share__sheet-title {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
width: 100%; width: 100%;
...@@ -430,6 +441,9 @@ ...@@ -430,6 +441,9 @@
min-width: 100%; min-width: 100%;
box-sizing: border-box; box-sizing: border-box;
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */
flex: 1;
/* #endif */
justify-content: space-between; justify-content: space-between;
} }
...@@ -458,7 +472,9 @@ ...@@ -458,7 +472,9 @@
border-width: 0; border-width: 0;
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
opacity: 0; opacity: 0;
/* #ifndef APP-NVUE */
z-index: 1; z-index: 1;
/* #endif */
} }
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
...@@ -497,13 +513,16 @@ ...@@ -497,13 +513,16 @@
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
width: 100%; width: 100%;
display: flex; display: flex;
box-sizing: content-box;
/* #endif */ /* #endif */
/* #ifndef APP-NVUE || MP-TOUTIAO */ /* #ifndef APP-NVUE || MP-TOUTIAO */
padding-bottom: constant(safe-area-inset-bottom); padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */
flex: 1; flex: 1;
/* #endif */
height: 96rpx; height: 96rpx;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
...@@ -536,6 +555,8 @@ ...@@ -536,6 +555,8 @@
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
z-index: 2; z-index: 2;
font-weight: normal;
box-sizing: content-box;
/* #endif */ /* #endif */
/* #ifndef APP-NVUE || MP-TOUTIAO */ /* #ifndef APP-NVUE || MP-TOUTIAO */
...@@ -554,7 +575,6 @@ ...@@ -554,7 +575,6 @@
/* #ifdef H5 */ /* #ifdef H5 */
cursor: pointer; cursor: pointer;
/* #endif */ /* #endif */
font-weight: normal;
} }
/* #ifdef APP-NVUE || MP-TOUTIAO */ /* #ifdef APP-NVUE || MP-TOUTIAO */
......
...@@ -242,7 +242,7 @@ ...@@ -242,7 +242,7 @@
// #ifndef MP-TOUTIAO // #ifndef MP-TOUTIAO
setTimeout(() => { setTimeout(() => {
this.initFocus(this.isFocus) this.initFocus(this.isFocus)
}, 150) }, 200)
// #endif // #endif
// #ifdef MP-TOUTIAO // #ifdef MP-TOUTIAO
......
<template> <template>
<view class="fui-skeleton__wrap " :style="{background:background,height:height+'px'}"> <view class="fui-skeleton__wrap" :style="{background:background,height:height+'px'}" ref="fui_skeleton">
<view class="fui-skeleton__item" <view class="fui-skeleton__item"
:class="{'fui-skeleton__dark':theme==='dark','fui-skeleton__dark-ani':active && theme==='dark','fui-skeleton__light-ani':active && theme!=='dark'}" :class="{'fui-skeleton__dark':theme==='dark','fui-skeleton__dark-ani':active && theme==='dark','fui-skeleton__light-ani':active && theme!=='dark'}"
:style="{width: item.width+'px', height:item.height+'px', left: item.left+'px', top: item.top+'px',borderRadius:item.type==='round'?(isNvue?item.width/2+'px':'50%'):'6rpx'}" :style="{width: item.width+'px', height:item.height+'px', left: item.left+'px', top: item.top+'px',borderRadius:item.type==='round'?(isNvue?item.width/2+'px':'50%'):'6rpx'}"
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<script> <script>
// #ifdef APP-NVUE // #ifdef APP-NVUE
// const dom = uni.requireNativePlugin('dom'); const animation = uni.requireNativePlugin('animation');
// #endif // #endif
export default { export default {
name: "fui-skeleton", name: "fui-skeleton",
...@@ -59,6 +59,7 @@ ...@@ -59,6 +59,7 @@
// #endif // #endif
return { return {
isNvue: isNvue, isNvue: isNvue,
stop: false,
//round、rect //round、rect
elList: [], elList: [],
height: 0 height: 0
...@@ -84,8 +85,46 @@ ...@@ -84,8 +85,46 @@
} }
}) })
// #endif // #endif
// #ifdef APP-NVUE
this.$nextTick(() => {
setTimeout(() => {
this._animation(false)
}, 50)
})
// #endif
},
// #ifdef APP-NVUE
// #ifndef VUE3
beforeDestroy() {
this.stop = true;
}, },
// #endif
// #ifdef VUE3
beforeUnmount() {
this.stop = true;
},
// #endif
// #endif
methods: { methods: {
// #ifdef APP-NVUE
_animation(type) {
if (!this.$refs['fui_skeleton'] || this.stop || !this.active) return;
animation.transition(
this.$refs['fui_skeleton'].ref, {
styles: {
opacity: type ? 1 : 0.1
},
duration: 1000, //ms
timingFunction: 'linear',
iterationCount: 'infinite',
needLayout: false,
delay: 0 //ms
}, () => {
this._animation(!type)
}
);
},
// #endif
// #ifndef APP-NVUE // #ifndef APP-NVUE
//nvue端暂不支持动态获取节点信息 //nvue端暂不支持动态获取节点信息
async selectorQuery() { async selectorQuery() {
......
...@@ -39,16 +39,20 @@ export default { ...@@ -39,16 +39,20 @@ export default {
this.onceRight = 0 this.onceRight = 0
}, },
mounted() { mounted() {
this.handleLeft = this.getEl(this.$refs['handleLeft']) this.$nextTick(() => {
this.poleLeft = this.getEl(this.$refs['poleLeft']); setTimeout(() => {
this.handleRight = null; this.handleLeft = this.getEl(this.$refs['handleLeft'])
this.poleRight = null; this.poleLeft = this.getEl(this.$refs['poleLeft']);
this.initData(this.value) this.handleRight = null;
if (this.section) { this.poleRight = null;
this.handleRight = this.getEl(this.$refs['handleRight']) this.initData(this.value)
this.poleRight = this.getEl(this.$refs['poleRight']); if (this.section) {
this.initEndData(this.endValue) this.handleRight = this.getEl(this.$refs['handleRight'])
} this.poleRight = this.getEl(this.$refs['poleRight']);
this.initEndData(this.endValue)
}
}, 50)
})
}, },
methods: { methods: {
getEl(el) { getEl(el) {
......
...@@ -41,11 +41,11 @@ ...@@ -41,11 +41,11 @@
<view class="fui-slider__pole-right" :class="['fui-slider__pole-l']" ref="poleRight" <view class="fui-slider__pole-right" :class="['fui-slider__pole-l']" ref="poleRight"
:style="{background:getActiveColor}"></view> :style="{background:getActiveColor}"></view>
</view> </view>
<view class="fui-slider__handle" fireEventSync="true" @touchstart="touchstart" @horizontalpan="touchmove" <view class="fui-slider__handle" :fireEventSync="true" @touchstart="touchstart" @horizontalpan="touchmove"
@touchend="touchend" ref="handleLeft" @touchend="touchend" ref="handleLeft"
:style="{width:blockWidth+'px',height:blockHeight+'px',borderRadius:24+'px',background:blockColor}" :style="{width:blockWidth+'px',height:blockHeight+'px',borderRadius:24+'px',background:blockColor}"
:class="['fui-slider__handle-left',isAndroid?'fui-slider__border':'fui-slider__shadow']"></view> :class="['fui-slider__handle-left',isAndroid?'fui-slider__border':'fui-slider__shadow']"></view>
<view class="fui-slider__handle" fireEventSync="true" @touchstart="endTouchstart" <view class="fui-slider__handle" :fireEventSync="true" @touchstart="endTouchstart"
@horizontalpan="endTouchmove" @touchend="endTouchend" ref="handleRight" @horizontalpan="endTouchmove" @touchend="endTouchend" ref="handleRight"
:style="{width:blockWidth+'px',height:blockHeight+'px',borderRadius:24+'px',background:blockColor}" :style="{width:blockWidth+'px',height:blockHeight+'px',borderRadius:24+'px',background:blockColor}"
:class="['fui-slider__handle-right',isAndroid?'fui-slider__border':'fui-slider__shadow']" :class="['fui-slider__handle-right',isAndroid?'fui-slider__border':'fui-slider__shadow']"
......
...@@ -28,10 +28,12 @@ export default { ...@@ -28,10 +28,12 @@ export default {
} }
}, },
mounted() { mounted() {
this.initData(this.value) this.$nextTick(()=>{
if (this.section) { this.initData(this.value)
this.initEndData(this.endValue) if (this.section) {
} this.initEndData(this.endValue)
}
})
}, },
methods: { methods: {
initData(value) { initData(value) {
......
...@@ -31,7 +31,12 @@ ...@@ -31,7 +31,12 @@
}, },
// #ifdef APP-NVUE // #ifdef APP-NVUE
mounted() { mounted() {
this._animation() this.$nextTick(() => {
setTimeout(() => {
this.deg += 360;
this._animation()
}, 50)
})
}, },
// #endif // #endif
// #ifdef APP-NVUE // #ifdef APP-NVUE
......
...@@ -16,7 +16,8 @@ ...@@ -16,7 +16,8 @@
:class="{'fui-steps__background':index<=current && !getActiveColor,'fui-steps__border':index<=current && !getActiveColor}" :class="{'fui-steps__background':index<=current && !getActiveColor,'fui-steps__border':index<=current && !getActiveColor}"
v-if="item.text && !(isMark && index==current)" v-if="item.text && !(isMark && index==current)"
:style="{background:index<=current?getActiveColor:'#fff',borderColor:index<=current?getActiveColor:nodeColor,color:index<=current?'#fff':color}">{{item.text}}</text> :style="{background:index<=current?getActiveColor:'#fff',borderColor:index<=current?getActiveColor:nodeColor,color:index<=current?'#fff':color}">{{item.text}}</text>
<view class="fui-steps__checkbox" :class="{'fui-steps__background':!getActiveColor && !processColor}" <view class="fui-steps__checkbox"
:class="{'fui-steps__background':!getActiveColor && !processColor}"
:style="{background:processColor || getActiveColor}" v-if="isMark && index==current"> :style="{background:processColor || getActiveColor}" v-if="isMark && index==current">
<template v-if="processStatus==='fail'"> <template v-if="processStatus==='fail'">
<view class="fui-steps__ia-fail"></view> <view class="fui-steps__ia-fail"></view>
...@@ -25,7 +26,8 @@ ...@@ -25,7 +26,8 @@
<view class="fui-steps__ic-waiting" v-else-if="processStatus==='wait'"></view> <view class="fui-steps__ic-waiting" v-else-if="processStatus==='wait'"></view>
<view class="fui-steps__checkmark" v-else></view> <view class="fui-steps__checkmark" v-else></view>
</view> </view>
<view class="fui-steps__node-dot" :class="{'fui-steps__background':index<=current && !getActiveColor}" <view class="fui-steps__node-dot"
:class="{'fui-steps__background':index<=current && !getActiveColor}"
:style="{background:index<=current?getActiveColor:nodeColor}" :style="{background:index<=current?getActiveColor:nodeColor}"
v-if="!item.text && !item.src && !(isMark && index==current)"> v-if="!item.text && !item.src && !(isMark && index==current)">
</view> </view>
...@@ -153,7 +155,7 @@ ...@@ -153,7 +155,7 @@
} }
return styles return styles
}, },
getActiveColor(){ getActiveColor() {
let color = this.activeColor; let color = this.activeColor;
// #ifdef APP-NVUE // #ifdef APP-NVUE
if (!color || color === true) { if (!color || color === true) {
...@@ -465,8 +467,9 @@ ...@@ -465,8 +467,9 @@
.fui-steps__ic-waiting { .fui-steps__ic-waiting {
height: 32rpx; height: 32rpx;
width: 32rpx; width: 32rpx;
border-width: 3px;
border-style: solid; border-style: solid;
border-bottom-width: 3px;
border-left-width: 3px;
border-top-width: 0; border-top-width: 0;
border-right-width: 0; border-right-width: 0;
border-color: #fff; border-color: #fff;
......
...@@ -75,11 +75,13 @@ ...@@ -75,11 +75,13 @@
} }
}, },
mounted() { mounted() {
setTimeout(() => { this.$nextTick(()=>{
this.init(() => { setTimeout(() => {
this.updateStickyChange(); this.init(() => {
}); this.updateStickyChange();
}, 50) });
}, 50)
})
}, },
updated(e) { updated(e) {
this.$nextTick(() => { this.$nextTick(() => {
......
...@@ -9,7 +9,7 @@ export default { ...@@ -9,7 +9,7 @@ export default {
}, },
watch: { watch: {
show(newVal) { show(newVal) {
if (this.autoClose) return // if (this.autoClose) return
if (this.stop) return if (this.stop) return
this.stop = true this.stop = true
if (newVal) { if (newVal) {
...@@ -29,9 +29,11 @@ export default { ...@@ -29,9 +29,11 @@ export default {
} }
}, },
mounted() { mounted() {
this.box = this.getEl(this.$refs['fui_swipea_wrap']) this.$nextTick(()=>{
this.selector = this.getEl(this.$refs['fui_swipea_content']); this.box = this.getEl(this.$refs['fui_swipea_wrap'])
this.rightButton = this.getEl(this.$refs['fui_swipea_buttons']); this.selector = this.getEl(this.$refs['fui_swipea_content']);
this.rightButton = this.getEl(this.$refs['fui_swipea_buttons']);
})
this.init() this.init()
}, },
methods: { methods: {
......
...@@ -29,11 +29,13 @@ export default { ...@@ -29,11 +29,13 @@ export default {
} }
}, },
mounted() { mounted() {
this.group = this.getParent() this.$nextTick(()=>{
if (this.group.children !== undefined) { this.group = this.getParent()
this.group.children.push(this) if (this.group.children !== undefined) {
} this.group.children.push(this)
this.init() }
this.init()
})
}, },
methods: { methods: {
init() { init() {
......
...@@ -14,12 +14,14 @@ ...@@ -14,12 +14,14 @@
</switch> </switch>
</view> </view>
<!-- #endif --> <!-- #endif -->
<view class="fui-checkbox__self" :class="{'fui-checkbox__disabled':disabled,'fui-switch__color':!getColor && val}" <view class="fui-checkbox__self"
:style="{background:val?getColor:'#fff',border:val?`1px solid ${getColor}`:`1px solid ${borderColor}`}" v-else> :class="{'fui-checkbox__disabled':disabled,'fui-switch__color':!getColor && val}"
:style="{background:val?getColor:'#fff',border:val?`1px solid ${getColor}`:`1px solid ${borderColor}`}"
v-else>
<view class="fui-check__mark" :style="{borderBottomColor:checkMarkColor,borderRightColor:checkMarkColor}" <view class="fui-check__mark" :style="{borderBottomColor:checkMarkColor,borderRightColor:checkMarkColor}"
v-if="val"></view> v-if="val"></view>
<switch class="fui-switch__hidden" :class="{'fui-pointer__events':isLabel}" <switch class="fui-switch__hidden" :class="{'fui-pointer__events':isLabel}"
style="opacity: 0;position: absolute;" @change="change" :name="name" :type="isNvue?'switch':'checkbox'" style="opacity: 0;position: absolute;" @change="change" :name="name" type="checkbox"
:checked="val" :disabled="disabled"></switch> :checked="val" :disabled="disabled"></switch>
</view> </view>
</view> </view>
...@@ -148,6 +150,13 @@ ...@@ -148,6 +150,13 @@
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */
.fui-switch__input {
border: 1px solid transparent;
}
/* #endif */
.fui-checkbox__self { .fui-checkbox__self {
font-size: 0; font-size: 0;
width: 40rpx; width: 40rpx;
...@@ -262,7 +271,6 @@ ...@@ -262,7 +271,6 @@
top: -1px; top: -1px;
left: -1px; left: -1px;
opacity: 0; opacity: 0;
z-index: 2;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -270,6 +278,7 @@ ...@@ -270,6 +278,7 @@
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
z-index: 2;
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
......
...@@ -297,13 +297,18 @@ ...@@ -297,13 +297,18 @@
min-width: 32rpx !important; min-width: 32rpx !important;
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
z-index: 10;
/* #endif */ /* #endif */
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
/* #ifndef APP-NVUE */
right: -20rpx; right: -20rpx;
/* #endif */
/* #ifdef APP-NVUE */
right: 0;
/* #endif */
top: 0; top: 0;
z-index: 10;
text-align: center; text-align: center;
} }
...@@ -313,13 +318,15 @@ ...@@ -313,13 +318,15 @@
width: 16rpx; width: 16rpx;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
border-radius: 50%; border-radius: 50%;
right: -4rpx;
top: -4rpx;
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
border-radius: 8rpx; border-radius: 8rpx;
right: 0;
top: 0;
/* #endif */ /* #endif */
right: -4rpx;
top: -4rpx;
} }
.fui-tabbar__icon { .fui-tabbar__icon {
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
:class="{'fui-table__flex-row':!height || height==0}"> :class="{'fui-table__flex-row':!height || height==0}">
<!-- #endif --> <!-- #endif -->
<!-- #ifndef MP-BAIDU --> <!-- #ifndef MP-BAIDU -->
<scroll-view :show-scrollbar="false" scroll-x :scroll-y="height>0 && height!=0" <scroll-view :show-scrollbar="false" :scroll-x="true" :scroll-y="height>0 && height!=0"
:style="{width:width+'px',height:height>0 || height!=0?height+'rpx':'auto'}" :style="{width:width+'px',height:height>0 || height!=0?height+'rpx':'auto'}"
class="fui-table__scroll-view" :class="{'fui-table__flex-row':!height || height==0}"> class="fui-table__scroll-view" :class="{'fui-table__flex-row':!height || height==0}">
<!-- #endif --> <!-- #endif -->
......
<template> <template>
<scroll-view class="fui-tabs__scrollbox" <scroll-view class="fui-tabs__scrollbox"
:class="{'fui-tabs__fixed':isFixed && !isSticky,'fui-tabs__sticky':isSticky}" scroll-with-animation :class="{'fui-tabs__fixed':isFixed && !isSticky,'fui-tabs__sticky':isSticky}" :scroll-with-animation="true"
:scroll-x="scroll" :show-scrollbar="false" :scroll-into-view="scrollInto" :scroll-x="scroll" :show-scrollbar="false" :scroll-into-view="scrollInto"
:style="{background:background,zIndex:(isFixed || isSticky)?zIndex:1,top: isFixed || isSticky ? top + 'px' : 'auto'}"> :style="{background:background,zIndex:(isFixed || isSticky)?zIndex:1,top: isFixed || isSticky ? top + 'px' : 'auto'}">
<view class="fui-scroll__view" :class="{'fui-tabs__full':!alignLeft}"> <view class="fui-scroll__view" :class="{'fui-tabs__full':!alignLeft}">
...@@ -21,12 +21,15 @@ ...@@ -21,12 +21,15 @@
</image> </image>
<!-- #ifdef APP-NVUE --> <!-- #ifdef APP-NVUE -->
<view class="fui-tabs__text"> <view class="fui-tabs__text">
<text
:style="{fontSize:selectedSize+'rpx',fontWeight:tabIndex===index?selectedFontWeight:fontWeight,height:height+'rpx',lineHeight:height+'rpx'}"
style="opacity: 0;">{{tab.name}}</text>
<text class="fui-tabs__text-nvue" <text class="fui-tabs__text-nvue"
:class="{'fui-tabs__selected-color':!getSelectedColor && tabIndex===index,'fui-tabs__text-color':!color && tabIndex!==index}" :class="{'fui-tabs__selected-color':!getSelectedColor && tabIndex===index,'fui-tabs__text-color':!color && tabIndex!==index}"
:style="{fontSize:(tabIndex===index && isNvue? selectedSize:size)+'rpx',color:tabIndex===index?getSelectedColor:color,fontWeight:tabIndex===index?selectedFontWeight:fontWeight,height:height+'rpx',lineHeight:height+'rpx'}">{{tab.name}}</text> :style="{fontSize:(tabIndex===index && isNvue? selectedSize:size)+'rpx',color:tabIndex===index?getSelectedColor:color,fontWeight:tabIndex===index?selectedFontWeight:fontWeight,height:height+'rpx',lineHeight:height+'rpx'}">{{tab.name}}</text>
<text <text
:class="{'fui-tabs__badge-color':!getBadgeBgColor,'fui-tabs__badge-dot':isDot,'fui-tabs__badge':!isDot}" :class="{'fui-tabs__badge-color':!getBadgeBgColor,'fui-tabs__badge-dot':isDot,'fui-tabs__badge':!isDot}"
:style="{color:badgeColor,background:getBadgeBgColor}" :style="{color:badgeColor,background:getBadgeBgColor,top:getTop+'rpx'}"
v-if="tab.badge">{{isDot?'':tab.badge}}</text> v-if="tab.badge">{{isDot?'':tab.badge}}</text>
</view> </view>
...@@ -228,8 +231,14 @@ ...@@ -228,8 +231,14 @@
created() { created() {
this.initData(this.tabs) this.initData(this.tabs)
}, },
computed:{ computed: {
getSelectedColor(){ // #ifdef APP-NVUE
getTop() {
const height = Number(this.height) - Number(this.selectedSize)
return height / 2
},
// #endif
getSelectedColor() {
let color = this.selectedColor let color = this.selectedColor
// #ifdef APP-NVUE // #ifdef APP-NVUE
if (!color || color === true) { if (!color || color === true) {
...@@ -239,7 +248,7 @@ ...@@ -239,7 +248,7 @@
// #endif // #endif
return color return color
}, },
getSliderBgColor(){ getSliderBgColor() {
let color = this.sliderBackground let color = this.sliderBackground
// #ifdef APP-NVUE // #ifdef APP-NVUE
if (!color || color === true) { if (!color || color === true) {
...@@ -249,7 +258,7 @@ ...@@ -249,7 +258,7 @@
// #endif // #endif
return color return color
}, },
getBadgeBgColor(){ getBadgeBgColor() {
let color = this.badgeBackground let color = this.badgeBackground
// #ifdef APP-NVUE // #ifdef APP-NVUE
if (!color || color === true) { if (!color || color === true) {
...@@ -419,6 +428,8 @@ ...@@ -419,6 +428,8 @@
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
white-space: nowrap; white-space: nowrap;
display: block; display: block;
transition: transform 0.2s linear;
z-index: 3;
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
flex-wrap: nowrap; flex-wrap: nowrap;
...@@ -426,13 +437,16 @@ ...@@ -426,13 +437,16 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
/* #endif */ /* #endif */
transition: transform 0.2s linear;
position: relative; position: relative;
z-index: 3;
} }
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
.fui-tabs__text-nvue { .fui-tabs__text-nvue {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center; text-align: center;
} }
...@@ -445,19 +459,22 @@ ...@@ -445,19 +459,22 @@
font-size: 24rpx; font-size: 24rpx;
line-height: 36rpx; line-height: 36rpx;
border-radius: 100px; border-radius: 100px;
position: absolute;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
min-width: 36rpx !important; min-width: 36rpx !important;
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
position: absolute;
right: -32rpx; right: -32rpx;
top: -18rpx; top: -18rpx;
z-index: 10;
/* #endif */
/* #ifdef APP-NVUE */
right: 0;
/* #endif */ /* #endif */
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transform: scale(0.9); transform: scale(0.9);
z-index: 10;
} }
.fui-tabs__badge-dot { .fui-tabs__badge-dot {
...@@ -466,15 +483,17 @@ ...@@ -466,15 +483,17 @@
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
border-radius: 100px; border-radius: 100px;
/* #endif */ /* #endif */
position: absolute;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: inline-block; display: inline-block;
position: absolute;
right: -6px; right: -6px;
top: -3px; top: -3px;
border-radius: 50%; border-radius: 50%;
/* #endif */
z-index: 10; z-index: 10;
/* #endif */
/* #ifdef APP-NVUE */
right: 0;
/* #endif */
} }
.fui-tabs__line-wrap { .fui-tabs__line-wrap {
......
<template> <template>
<view class="fui-tag__wrap" <view class="fui-tag__wrap"
:class="[highlight?'fui-tag__opacity':'',originLeft?'fui-tag__origin-left':'',originRight?'fui-tag__origin-right':'',!background?`fui-tag__${type}-${theme}`:'']" :class="[highlight?'fui-tag__opacity':'',originLeft?'fui-tag__origin-left':'',originRight?'fui-tag__origin-right':'',!background?`fui-tag__${type}-${theme}`:'',(background && !borderColor) || !isBorder?'fui-tag__no-border':'']"
:style="{backgroundColor:getBackground,fontSize:size+'rpx',lineHeight:size+'rpx',color:color,borderColor:getBorderColor,zoom:isNvue?1:scaleRatio,transform: `scale(${isNvue?scaleRatio:1})`,borderRadius:radius+'rpx',paddingTop:padding[0] || 0,paddingRight:padding[1]|| 0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0,marginTop:marginTop+'rpx',marginRight:marginRight+'rpx',marginBottom:marginBottom+'rpx',marginLeft:marginLeft+'rpx'}" :style="{backgroundColor:getBackground,fontSize:size+'rpx',lineHeight:size+'rpx',color:color,borderColor:getBorderColor,transform: `scale(${scaleRatio})`,borderRadius:radius+'rpx',paddingTop:padding[0] || 0,paddingRight:padding[1]|| 0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0,marginTop:marginTop+'rpx',marginRight:marginRight+'rpx',marginBottom:marginBottom+'rpx',marginLeft:marginLeft+'rpx'}"
@tap="handleClick"> @tap="handleClick">
<text v-if="text" class="fui-tag__text" :class="[!background?`fui-tag_${type}-${theme}`:'']" <text v-if="text" class="fui-tag__text" :class="[!background?`fui-tag_${type}-${theme}`:'']"
:style="{fontSize:size+'rpx',lineHeight:size+'rpx',color:getColor}">{{text}}</text> :style="{fontSize:size+'rpx',lineHeight:size+'rpx',color:getColor}">{{text}}</text>
...@@ -41,6 +41,11 @@ ...@@ -41,6 +41,11 @@
type: String, type: String,
default: '' default: ''
}, },
//v2.0.0+
isBorder: {
type: Boolean,
default: true
},
borderColor: { borderColor: {
type: String, type: String,
default: '' default: ''
...@@ -107,13 +112,8 @@ ...@@ -107,13 +112,8 @@
} }
}, },
data() { data() {
let isNvue = false
// #ifdef APP-NVUE
isNvue = true
// #endif
const app = uni && uni.$fui && uni.$fui.color; const app = uni && uni.$fui && uni.$fui.color;
return { return {
isNvue: isNvue,
// #ifdef APP-NVUE // #ifdef APP-NVUE
dark: { dark: {
primary: (app && app.primary) || '#465CFF', primary: (app && app.primary) || '#465CFF',
...@@ -208,6 +208,10 @@ ...@@ -208,6 +208,10 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.fui-tag__no-border {
border-width: 0;
}
.fui-tag__text { .fui-tag__text {
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
lines: 1; lines: 1;
......
...@@ -11,10 +11,12 @@ ...@@ -11,10 +11,12 @@
:userSelect="userSelect" :decode="decode">{{getText(text, textType, format)}}</text> :userSelect="userSelect" :decode="decode">{{getText(text, textType, format)}}</text>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef APP-NVUE --> <!-- #ifdef APP-NVUE -->
<text class="fui-text__content" <view class="fui-text__nvue">
:style="{color:getColor,fontSize:getSize,lineHeight:lineHeight?getSize:'auto',textAlign:align,textDecoration:decoration,fontWeight:fontWeight}" <text class="fui-text__content"
:class="[color?'':'fui-text__'+type,unShrink?'fui-text__unshrink':'']" :userSelect="userSelect" :style="{color:getColor,fontSize:getSize,lineHeight:lineHeight?getSize:'auto',textAlign:align,textDecoration:decoration,fontWeight:fontWeight}"
:decode="decode">{{getText(text, textType, format)}}</text> :class="[color?'':'fui-text__'+type,unShrink?'fui-text__unshrink':'']" :userSelect="userSelect"
:decode="decode">{{getText(text, textType, format)}}</text>
</view>
<!-- #endif --> <!-- #endif -->
<slot name="right"></slot> <slot name="right"></slot>
</view> </view>
...@@ -236,6 +238,12 @@ ...@@ -236,6 +238,12 @@
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */
.fui-text__nvue{
flex: 1;
}
/* #endif */
.fui-text__center { .fui-text__center {
justify-content: center; justify-content: center;
} }
......
...@@ -4,15 +4,16 @@ ...@@ -4,15 +4,16 @@
:style="{paddingTop:padding[0] || 0,paddingRight:padding[1] || 0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0,background:backgroundColor,borderRadius:radius+'rpx',borderColor:borderColor,marginTop:marginTop+'rpx'}" :style="{paddingTop:padding[0] || 0,paddingRight:padding[1] || 0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0,background:backgroundColor,borderRadius:radius+'rpx',borderColor:borderColor,marginTop:marginTop+'rpx'}"
@tap="fieldClick"> @tap="fieldClick">
<view v-if="borderTop && !textareaBorder" <view v-if="borderTop && !textareaBorder"
:style="{background:borderColor,left:topLeft+'rpx',right:topRight+'rpx'}" class="fui-textarea__border-top" :class="{'fui-textarea__background':!borderColor}"> :style="{background:borderColor,left:topLeft+'rpx',right:topRight+'rpx'}" class="fui-textarea__border-top"
:class="{'fui-textarea__background':!borderColor}">
</view> </view>
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
<view class="fui-textarea__border" :class="{'fui-textarea__bordercolor':!borderColor}" :style="{borderRadius:getRadius,borderColor:borderColor}" <view class="fui-textarea__border" :class="{'fui-textarea__bordercolor':!borderColor}"
v-if="textareaBorder"></view> :style="{borderRadius:getRadius,borderColor:borderColor}" v-if="textareaBorder"></view>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef APP-NVUE --> <!-- #ifdef APP-NVUE -->
<view class="fui-textarea__required" v-if="required && !flexStart"> <view class="fui-textarea__required" v-if="required && !flexStart">
<text :style="{color:getRequiredColor,paddingTop:'2rpx'}">*</text> <text class="fui-form__asterisk-text" :style="{color:getRequiredColor,paddingTop:'2rpx'}">*</text>
</view> </view>
<text class="fui-textarea__required" :style="{color:getRequiredColor,top:requiredTop}" <text class="fui-textarea__required" :style="{color:getRequiredColor,top:requiredTop}"
v-if="required && flexStart">*</text> v-if="required && flexStart">*</text>
...@@ -26,7 +27,7 @@ ...@@ -26,7 +27,7 @@
</view> </view>
<slot name="left"></slot> <slot name="left"></slot>
<view class="fui-textarea__flex-1"> <view class="fui-textarea__flex-1">
<textarea class="fui-textarea__self" :class="{'fui-text__right':textRight}" <textarea ref="fuiTextarea" class="fui-textarea__self" :class="{'fui-text__right':textRight}"
:style="{height:height,minHeight:minHeight,fontSize:size+'rpx',color:color}" :style="{height:height,minHeight:minHeight,fontSize:size+'rpx',color:color}"
placeholder-class="fui-textarea-placeholder" :name="name" :value="val" :placeholder="placeholder" placeholder-class="fui-textarea-placeholder" :name="name" :value="val" :placeholder="placeholder"
:placeholderStyle="placeholderStyl" :disabled="disabled" :cursor-spacing="cursorSpacing" :placeholderStyle="placeholderStyl" :disabled="disabled" :cursor-spacing="cursorSpacing"
...@@ -318,9 +319,25 @@ ...@@ -318,9 +319,25 @@
watch: { watch: {
focus(val) { focus(val) {
this.$nextTick(() => { this.$nextTick(() => {
this.focused = val setTimeout(() => {
this.focused = val
}, 20)
}) })
}, },
// #ifdef APP-NVUE
focused(val) {
if (!this.$refs.fuiTextarea) return;
this.$nextTick(() => {
setTimeout(() => {
if (val) {
this.$refs.fuiTextarea.focus()
} else {
this.$refs.fuiTextarea.blur()
}
}, 50)
})
},
// #endif
placeholderStyle() { placeholderStyle() {
this.fieldPlaceholderStyle() this.fieldPlaceholderStyle()
}, },
...@@ -352,7 +369,9 @@ ...@@ -352,7 +369,9 @@
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.focused = this.focus setTimeout(() => {
this.focused = this.focus
}, 300)
}) })
}, },
methods: { methods: {
...@@ -480,12 +499,21 @@ ...@@ -480,12 +499,21 @@
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
flex: 1; flex: 1;
height: 100wx; top: 28rpx;
bottom: 28rpx;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
/* #endif */ /* #endif */
} }
/* #ifdef APP-NVUE */
.fui-form__asterisk-text {
font-size: 32rpx;
height: 32rpx;
}
/* #endif */
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
.fui-required__flex-start { .fui-required__flex-start {
transform: translateY(0); transform: translateY(0);
...@@ -571,12 +599,13 @@ ...@@ -571,12 +599,13 @@
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; user-select: none;
} }
.fui-textarea__bordercolor{
border-color:var(--fui-color-border, #EEEEEE) !important; .fui-textarea__bordercolor {
border-color: var(--fui-color-border, #EEEEEE) !important;
} }
.fui-textarea__background{ .fui-textarea__background {
background: var(--fui-color-border, #EEEEEE) !important; background: var(--fui-color-border, #EEEEEE) !important;
} }
/* #endif */ /* #endif */
......
...@@ -27,15 +27,19 @@ ...@@ -27,15 +27,19 @@
type: [Number, String], type: [Number, String],
default: 48 default: 48
}, },
// #ifdef APP-NVUE
lineWidth: { lineWidth: {
type: [Number, String], type: [Number, String],
// #ifdef APP-NVUE
default: 0.5 default: 0.5
// #endif },
// #ifndef APP-NVUE // #endif
// #ifndef APP-NVUE
lineWidth: {
type: [Number, String],
default: 1 default: 1
// #endif
} }
// #endif
}, },
provide() { provide() {
return { return {
......
...@@ -183,11 +183,16 @@ ...@@ -183,11 +183,16 @@
/* #endif */ /* #endif */
.fui-toast__icon-box { .fui-toast__icon-box {
padding-bottom: 20rpx; padding-bottom: 20rpx;
/* #ifndef APP-NVUE */
box-sizing: content-box;
flex-shrink: 0;
/* #endif */
} }
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
.fui-toast__icon { .fui-toast__icon {
display: block; display: block;
flex-shrink: 0;
} }
/* #endif */ /* #endif */
......
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
}, },
zIndex: { zIndex: {
type: [Number, String], type: [Number, String],
default: 1001 default: 996
}, },
//点击遮罩 是否可关闭 //点击遮罩 是否可关闭
maskClosable: { maskClosable: {
...@@ -137,7 +137,7 @@ ...@@ -137,7 +137,7 @@
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
z-index: 1001; z-index: 996;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
......
...@@ -20,11 +20,13 @@ ...@@ -20,11 +20,13 @@
mounted() { mounted() {
if (this.vtabs && this.vtabs.linkage) { if (this.vtabs && this.vtabs.linkage) {
this.vtabs.children.push(this) this.vtabs.children.push(this)
setTimeout(() => { this.$nextTick(()=>{
this.calcHeight((height) => { setTimeout(() => {
this.vtabs.getCalcHeight(height, Number(this.tabIndex)) this.calcHeight((height) => {
}) this.vtabs.getCalcHeight(height, Number(this.tabIndex))
}, 300) })
}, 300)
})
} }
}, },
// #ifndef VUE3 // #ifndef VUE3
......
/**
* 隐藏式退出应用 Hook
* @param max 最大点击次数
* @returns 退出函数
*/
export function useConcealedExit(max = 10) {
const maxTapCount = max
const count = ref(0)
let loop: NodeJS.Timer
// 隐藏退出功能计数
function exit() {
// #ifdef APP-PLUS
count.value++
// #endif
}
// 退出或过期时清理计数
function reset() {
count.value = 0
if (loop) {
clearTimeout(loop)
loop = null
}
}
// #ifdef APP-PLUS
watch(
() => count.value,
() => {
if (count.value >= maxTapCount - 3) {
Message.toast(`再点击 ${maxTapCount - count.value} 次将退出应用`)
// 达到最大点击次数时退出
if (count.value >= maxTapCount) {
reset()
plus.runtime.quit()
}
}
if (!loop && count.value > 0) {
// 15 秒内未点击则清空计数
loop = setTimeout(reset, 15 * 1000)
}
},
)
// #endif
return {
exit,
reset,
}
}
...@@ -2,7 +2,9 @@ ...@@ -2,7 +2,9 @@
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { checkUpgrade } from '@/utils/upgrade' import { checkUpgrade } from '@/utils/upgrade'
import { useRuntime } from '@/hooks/app/useRuntime' import { useRuntime } from '@/hooks/app/useRuntime'
import { useConcealedExit } from '@/hooks/app/useConcealedExit'
const { exit } = useConcealedExit()
const { app } = useRuntime() const { app } = useRuntime()
const year = ref(dayjs().year()) const year = ref(dayjs().year())
const title = ref('Hello World') const title = ref('Hello World')
...@@ -68,13 +70,13 @@ ...@@ -68,13 +70,13 @@
<fui-divider /> <fui-divider />
<uni-icons type="hand-up" size="30" :class="[animate]" @click="handUp" /> <uni-icons type="hand-up" size="30" :class="[animate]" @tap="handUp" />
</view> </view>
<fui-footer isFixed> <fui-footer isFixed>
<template #text> <template #text>
<view v-if="version" @click="checkUpgrade(true)">V{{ version }}</view> <view v-if="version" @tap="checkUpgrade(true)">V{{ version }}</view>
<view class="mt-1">壹润科技 版权所有</view> <view class="mt-1">壹润科技 版权所有</view>
<view class="mt-1">Copyright © 2021-{{ year }} Yiring. All Ringhts Reserved</view> <view class="mt-1" @tap="exit">Copyright © 2021-{{ year }} Yiring. All Ringhts Reserved</view>
</template> </template>
</fui-footer> </fui-footer>
</view> </view>
......
import process from 'node:process'
import { loadEnv } from 'vite' import { loadEnv } from 'vite'
import type { ConfigEnv, UserConfig } from 'vite' import type { ConfigEnv, UserConfig } from 'vite'
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论