thzxcx/FirstUI-vue
1
0
Fork 0
Code Pull Requests Packages Releases Activity

chore: 修改preview ；增加tag插槽 ；修改标题样式

Browse Source
This commit is contained in:
Hefeng
2023-08-23 19:22:49 +08:00
parent 368ad96929
commit 3b2f5c50c4
1 changed files with 549 additions and 510 deletions
Download Patch File Download Diff File Expand all files Collapse all files

263
components/firstui/fui-preview/fui-preview.vue
View File

@ -1,213 +1,153 @@
<!-- 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6 14 072 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。 --> <!-- 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6 14 072 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。 -->
<template>
<view class="fui-preview__wrap" :class="{'fui-preview__unlined':!isBorder,'fui-preview__background':!background}"
:style="{'border-top-color':borderColor,'border-bottom-color':borderColor,marginTop:marginTop+'rpx',marginBottom:marginBottom+'rpx',background:background}">
<view class="fui-preview__hd" :style="{paddingLeft:padding+'rpx',paddingRight:padding+'rpx'}"
v-if="pvd[label] || pvd[value]">
<view class="fui-preview__item">
<text class="fui-preview__label" :class="{'fui-preview__gray':!labelColor}"
:style="{color:labelColor,fontSize:hdLabelSize+'rpx',width:hdLabelWidth>0?hdLabelWidth+'rpx':'auto',marginRight:labelRight+'rpx'}">{{pvd[label] || ''}}</text>
<text class="fui-preview__value-hd" :class="{'fui-preview__color':!hdValColor}"
:style="{color:hdValColor,fontSize:hdValSize+'rpx',textAlign:bdAlign}">{{pvd[value] || ''}}</text>
</view>
<view :style="{background:borderColor,left:hdLeft+'rpx',right:hdRight+'rpx'}" class="fui-preview__border"
:class="{'fui-preview__border-color':!borderColor}"></view>
</view>
<view class="fui-preview__bd" v-if="pvd[list] && pvd[list].length>0"
:style="{paddingLeft:padding+'rpx',paddingRight:padding+'rpx'}">
<view class="fui-preview__item" v-for="(item,index) in pvd[list]" :key="index">
<text class="fui-preview__label"
: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>
<!-- #ifndef APP-NVUE -->
<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>
<!-- #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>
<slot></slot>
<view class="fui-preview__ft" :style="{'border-top-color':borderColor}"
v-if="pvd[buttons] && pvd[buttons].length>0">
<view :style="{'border-right-color':idx!==pvd[buttons].length-1?borderColor : 'transparent'}"
:class="[highlight?'fui-preview__hover-weex':'',idx!==pvd[buttons].length-1?'fui-preview__btn-def':'fui-preview__btn']"
:hover-class="highlight?'fui-preview_hover':''" :hover-stay-time="150" v-for="(btn,idx) in pvd[buttons]"
:key="idx" @tap="handleClick(idx)">
<text :style="{fontSize:btnSize+'rpx',color:btn[color] || '#465CFF'}"
:class="{'fui-preview__link':!btn[color]}">{{btn[text]}}</text>
</view>
</view>
</view>
</template>
<script> <script>
export default { export default {
name: "fui-preview", name: 'FuiPreview',
emits: ['click', 'valueClick'],
props: { props: {
previewData: { previewData: {
type: Object, type: Object,
default() { default() {
return {} return {}
} },
}, },
fields: { fields: {
type: Object, type: Object,
default() { default() {
return {} return {}
} },
}, },
// #ifdef APP-NVUE // #ifdef APP-NVUE
background: { background: {
type: String, type: String,
default: '#fff' default: '#fff',
}, },
// #endif // #endif
// #ifndef APP-NVUE // #ifndef APP-NVUE
background: { background: {
type: String, type: String,
default: '' default: '',
}, },
// #endif // #endif
marginTop: { marginTop: {
type: [Number, String], type: [Number, String],
default: 0 default: 0,
}, },
marginBottom: { marginBottom: {
type: [Number, String], type: [Number, String],
default: 0 default: 0,
}, },
// 左右间距 // 左右间距
padding: { padding: {
type: [Number, String], type: [Number, String],
default: 32 default: 32,
}, },
labelWidth: { labelWidth: {
type: [Number, String], type: [Number, String],
default: 0 default: 0,
}, },
// left / right / justify // left / right / justify
labelAlign: { labelAlign: {
type: String, type: String,
default: 'left' default: 'left',
}, },
// #ifdef APP-NVUE // #ifdef APP-NVUE
labelColor: { labelColor: {
type: String, type: String,
default: '#7F7F7F' default: '#7F7F7F',
}, },
// #endif // #endif
// #ifndef APP-NVUE // #ifndef APP-NVUE
labelColor: { labelColor: {
type: String, type: String,
default: '' default: '',
}, },
// #endif // #endif
// V1.9.9+ // V1.9.9+
labelRight: { labelRight: {
type: [Number, String], type: [Number, String],
default: 32 default: 32,
}, },
// V1.9.9+ // V1.9.9+
hdLabelWidth: { hdLabelWidth: {
type: [Number, String], type: [Number, String],
default: 0 default: 0,
}, },
hdLabelSize: { hdLabelSize: {
type: [Number, String], type: [Number, String],
default: 32 default: 32,
}, },
hdValSize: { hdValSize: {
type: [Number, String], type: [Number, String],
default: 36 default: 36,
}, },
// #ifdef APP-NVUE // #ifdef APP-NVUE
hdValColor: { hdValColor: {
type: String, type: String,
default: '#181818' default: '#181818',
}, },
// #endif // #endif
// #ifndef APP-NVUE // #ifndef APP-NVUE
hdValColor: { hdValColor: {
type: String, type: String,
default: '' default: '',
}, },
// #endif // #endif
bdSize: { bdSize: {
type: [Number, String], type: [Number, String],
default: 28 default: 28,
}, },
// #ifdef APP-NVUE // #ifdef APP-NVUE
bdColor: { bdColor: {
type: String, type: String,
default: '#181818' default: '#181818',
}, },
// #endif // #endif
// #ifndef APP-NVUE // #ifndef APP-NVUE
bdColor: { bdColor: {
type: String, type: String,
default: '' default: '',
}, },
// #endif // #endif
// V1.9.9+ 内容对齐方式：left、right // V1.9.9+ 内容对齐方式：left、right
bdAlign: { bdAlign: {
type: String, type: String,
default: 'right' default: 'right',
}, },
btnSize: { btnSize: {
type: [Number, String], type: [Number, String],
default: 32 default: 32,
}, },
// 按钮是否有点击效果 // 按钮是否有点击效果
highlight: { highlight: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
hdLeft: { hdLeft: {
type: [Number, String], type: [Number, String],
default: 32 default: 32,
}, },
hdRight: { hdRight: {
type: [Number, String], type: [Number, String],
default: 0 default: 0,
}, },
// #ifdef APP-NVUE // #ifdef APP-NVUE
borderColor: { borderColor: {
type: String, type: String,
default: '#eee' default: '#eee',
}, },
// #endif // #endif
// #ifndef APP-NVUE // #ifndef APP-NVUE
borderColor: { borderColor: {
type: String, type: String,
default: '' default: '',
}, },
// #endif // #endif
// 是否需要preview外层上下线条 // 是否需要preview外层上下线条
isBorder: { isBorder: {
type: Boolean, type: Boolean,
default: true default: true,
}
}, },
watch: {
previewData(val) {
this.initData(val)
},
//未做深度监听
fields(val) {
this.handleFileds()
}
},
created() {
this.initData(this.previewData)
}, },
emits: ['click', 'valueClick'],
data() { data() {
return { return {
pvd: {}, pvd: {},
@ -218,40 +158,52 @@
valueColor: 'valueColor', valueColor: 'valueColor',
buttons: 'buttons', buttons: 'buttons',
text: 'text', text: 'text',
color: 'color' color: 'color',
}; }
},
watch: {
previewData(val) {
this.initData(val)
},
// 未做深度监听
fields(val) {
this.handleFileds()
},
},
created() {
this.initData(this.previewData)
}, },
methods: { methods: {
handleFileds() { handleFileds() {
if (this.fields && typeof this.fields === 'object') { if (this.fields && typeof this.fields === 'object') {
this.label = this.fields.label || 'label'; this.label = this.fields.label || 'label'
this.value = this.fields.value || 'value'; this.value = this.fields.value || 'value'
this.list = this.fields.list || 'list'; this.list = this.fields.list || 'list'
this.lColor = this.fields.labelColor || 'labelColor'; this.lColor = this.fields.labelColor || 'labelColor'
this.valueColor = this.fields.valueColor || 'valueColor'; this.valueColor = this.fields.valueColor || 'valueColor'
this.buttons = this.fields.buttons || 'buttons'; this.buttons = this.fields.buttons || 'buttons'
this.text = this.fields.text || 'text'; this.text = this.fields.text || 'text'
this.color = this.fields.color || 'color'; this.color = this.fields.color || 'color'
} }
}, },
initData(val) { initData(val) {
this.handleFileds() this.handleFileds()
val = val || {}; val = val || {}
val[this.list] = val[this.list] || []; val[this.list] = val[this.list] || []
val[this.buttons] = val[this.buttons] || []; val[this.buttons] = val[this.buttons] || []
this.pvd = val; this.pvd = val
}, },
handleClick(idx) { handleClick(idx) {
let params = this.pvd[this.buttons][idx] || {} const params = this.pvd[this.buttons][idx] || {}
this.$emit('click', { this.$emit('click', {
index: idx, index: idx,
...params ...params,
}) })
}, },
itemClick(index) { itemClick(index) {
this.$emit('valueClick', { this.$emit('valueClick', {
index, index,
item: this.pvd[this.list][index] item: this.pvd[this.list][index],
}) })
}, },
setValue(index, value) { setValue(index, value) {
@ -259,14 +211,102 @@
if (idx || idx === 0) { if (idx || idx === 0) {
const data = JSON.parse(JSON.stringify(this.pvd)) const data = JSON.parse(JSON.stringify(this.pvd))
const item = data[this.list][idx] const item = data[this.list][idx]
item[this.value] = value; item[this.value] = value
this.pvd = data this.pvd = data
} }
} },
} },
} }
</script> </script>
<template>
<view
class="fui-preview__wrap" :class="{ 'fui-preview__unlined': !isBorder, 'fui-preview__background': !background }"
:style="{ 'border-top-color': borderColor, 'border-bottom-color': borderColor, 'marginTop': `${marginTop}rpx`, 'marginBottom': `${marginBottom}rpx`, 'background': background }"
>
<view
v-if="pvd[label] || pvd[value]" class="fui-preview__hd"
:style="{ paddingLeft: `${padding}rpx`, paddingRight: `${padding}rpx` }"
>
<view class="fui-preview__item">
<text
class="fui-preview__label" style="color: #333;font-weight:600"
:style="{ color: labelColor, fontSize: `${hdLabelSize}rpx`, width: hdLabelWidth > 0 ? `${hdLabelWidth}rpx` : 'auto', marginRight: `${labelRight}rpx` }"
>
{{ pvd[label] || '' }}
</text>
<text
class="fui-preview__value-hd" :class="{ 'fui-preview__color': !hdValColor }"
:style="{ color: hdValColor, fontSize: `${hdValSize}rpx`, textAlign: bdAlign }"
>
{{ pvd[value] || '' }}
</text>
</view>
<view
:style="{ background: borderColor, left: `${hdLeft}rpx`, right: `${hdRight}rpx` }" class="fui-preview__border"
:class="{ 'fui-preview__border-color': !borderColor }"
/>
</view>
<view :style="{ paddingLeft: `${padding}rpx`, paddingRight: `${padding}rpx` }">
<slot name="tag" />
</view>
<view
v-if="pvd[list] && pvd[list].length > 0" class="fui-preview__bd"
:style="{ paddingLeft: `${padding}rpx`, paddingRight: `${padding}rpx` }"
>
<view v-for="(item, index) in pvd[list]" :key="index" class="fui-preview__item">
<text
class="fui-preview__label"
: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>
<!-- #ifndef APP-NVUE -->
<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>
<!-- #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>
<slot />
<view
v-if="pvd[buttons] && pvd[buttons].length > 0" class="fui-preview__ft"
:style="{ 'border-top-color': borderColor }"
>
<view
v-for="(btn, idx) in pvd[buttons]" :key="idx"
:style="{ 'border-right-color': idx !== pvd[buttons].length - 1 ? borderColor : 'transparent' }"
:class="[highlight ? 'fui-preview__hover-weex' : '', idx !== pvd[buttons].length - 1 ? 'fui-preview__btn-def' : 'fui-preview__btn']"
:hover-class="highlight ? 'fui-preview_hover' : ''" :hover-stay-time="150" @tap="handleClick(idx)"
>
<text
:style="{ fontSize: `${btnSize}rpx`, color: btn[color] || '#465CFF' }"
:class="{ 'fui-preview__link': !btn[color] }"
>
{{ btn[text] }}
</text>
</view>
</view>
</view>
</template>
<style scoped> <style scoped>
.fui-preview__wrap { .fui-preview__wrap {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
@ -346,7 +386,7 @@
.fui-preview__hd { .fui-preview__hd {
position: relative; position: relative;
padding-top: 32rpx; padding-top: 32rpx;
padding-bottom: 32rpx; padding-bottom: 8rpx;
text-align: right; text-align: right;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
box-sizing: border-box; box-sizing: border-box;
@ -416,7 +456,6 @@
/* #endif */ /* #endif */
} }
.fui-preview__ft { .fui-preview__ft {
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
flex: 1; flex: 1;