mirror of
https://gitee.com/hhyykk/ipms-sjy.git
synced 2025-11-01 02:38:43 +08:00
使用 uview 重构实际登陆
This commit is contained in:
YunaiV
@@ -0,0 +1,61 @@
|
||||
export default {
|
||||
props: {
|
||||
// 默认的显示占位高度
|
||||
showHeight: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.readMore.showHeight
|
||||
},
|
||||
// 展开后是否显示"收起"按钮
|
||||
toggle: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.readMore.toggle
|
||||
},
|
||||
// 关闭时的提示文字
|
||||
closeText: {
|
||||
type: String,
|
||||
default: uni.$u.props.readMore.closeText
|
||||
},
|
||||
// 展开时的提示文字
|
||||
openText: {
|
||||
type: String,
|
||||
default: uni.$u.props.readMore.openText
|
||||
},
|
||||
// 提示的文字颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: uni.$u.props.readMore.color
|
||||
},
|
||||
// 提示文字的大小
|
||||
fontSize: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.readMore.fontSize
|
||||
},
|
||||
// 是否显示阴影
|
||||
// 此参数不能写在props/readMore.js中进行默认配置，因为使用了条件编译，在外部js中
|
||||
// uni无法准确识别当前是否处于nvue还是非nvue下
|
||||
shadowStyle: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
// #ifndef APP-NVUE
|
||||
backgroundImage: 'linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)',
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
// nvue上不支持设置复杂的backgroundImage属性
|
||||
backgroundImage: 'linear-gradient(to top, #fff, rgba(255, 255, 255, 0.5))',
|
||||
// #endif
|
||||
paddingTop: '100px',
|
||||
marginTop: '-100px'
|
||||
})
|
||||
},
|
||||
// 段落首行缩进的字符个数
|
||||
textIndent: {
|
||||
type: String,
|
||||
default: uni.$u.props.readMore.textIndent
|
||||
},
|
||||
// open和close事件时，将此参数返回在回调参数中
|
||||
name: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.readMore.name
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<view class="u-read-more">
|
||||
<view
|
||||
class="u-read-more__content"
|
||||
:style="{
|
||||
height: isLongContent && status === 'close' ? $u.addUnit(showHeight) : $u.addUnit(contentHeight),
|
||||
textIndent: textIndent
|
||||
}"
|
||||
>
|
||||
<view
|
||||
class="u-read-more__content__inner"
|
||||
ref="u-read-more__content__inner"
|
||||
:class="[elId]"
|
||||
>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="u-read-more__toggle"
|
||||
:style="[innerShadowStyle]"
|
||||
v-if="isLongContent"
|
||||
>
|
||||
<slot name="toggle">
|
||||
<view
|
||||
class="u-read-more__toggle__text"
|
||||
@tap="toggleReadMore"
|
||||
>
|
||||
<u--text
|
||||
:text="status === 'close' ? closeText : openText"
|
||||
:color="color"
|
||||
:size="fontSize"
|
||||
:lineHeight="fontSize"
|
||||
margin="0 5px 0 0"
|
||||
></u--text>
|
||||
<view class="u-read-more__toggle__icon">
|
||||
<u-icon
|
||||
:color="color"
|
||||
:size="fontSize + 2"
|
||||
:name="status === 'close' ? 'arrow-down' : 'arrow-up'"
|
||||
></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-NVUE
|
||||
const dom = uni.requireNativePlugin('dom')
|
||||
// #endif
|
||||
import props from './props.js';
|
||||
/**
|
||||
* readMore 阅读更多
|
||||
* @description 该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
|
||||
* @tutorial https://www.uviewui.com/components/readMore.html
|
||||
* @property {String | Number} showHeight 内容超出此高度才会显示展开全文按钮，单位px（默认 400 ）
|
||||
* @property {Boolean} toggle 展开后是否显示收起按钮（默认 false ）
|
||||
* @property {String} closeText 关闭时的提示文字（默认 '展开阅读全文' ）
|
||||
* @property {String} openText 展开时的提示文字（默认 '收起' ）
|
||||
* @property {String} color 提示文字的颜色（默认 '#2979ff' ）
|
||||
* @property {String | Number} fontSize 提示文字的大小，单位px （默认 14 ）
|
||||
* @property {Object} shadowStyle 显示阴影的样式
|
||||
* @property {String} textIndent 段落首行缩进的字符个数 （默认 '2em' ）
|
||||
* @property {String | Number} name 用于在 open 和 close 事件中当作回调参数返回
|
||||
* @event {Function} open 内容被展开时触发
|
||||
* @event {Function} close 内容被收起时触发
|
||||
* @example <u-read-more><rich-text :nodes="content"></rich-text></u-read-more>
|
||||
*/
|
||||
export default {
|
||||
name: 'u-read-more',
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
|
||||
data() {
|
||||
return {
|
||||
isLongContent: false, // 是否需要隐藏一部分内容
|
||||
status: 'close', // 当前隐藏与显示的状态，close-收起状态，open-展开状态
|
||||
elId: uni.$u.guid(), // 生成唯一class
|
||||
contentHeight: 100, // 内容高度
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 展开后无需阴影，收起时才需要阴影样式
|
||||
innerShadowStyle() {
|
||||
if (this.status === 'open') return {}
|
||||
else return this.shadowStyle
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
this.getContentHeight().then(height => {
|
||||
this.contentHeight = height
|
||||
// 判断高度，如果真实内容高度大于占位高度，则显示收起与展开的控制按钮
|
||||
if (height > uni.$u.getPx(this.showHeight)) {
|
||||
this.isLongContent = true
|
||||
this.status = 'close'
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取内容的高度
|
||||
async getContentHeight() {
|
||||
// 延时一定时间再获取节点
|
||||
await uni.$u.sleep(30)
|
||||
return new Promise(resolve => {
|
||||
// #ifndef APP-NVUE
|
||||
this.$uGetRect('.' + this.elId).then(res => {
|
||||
resolve(res.height)
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
const ref = this.$refs['u-read-more__content__inner']
|
||||
dom.getComponentRect(ref, (res) => {
|
||||
resolve(res.size.height)
|
||||
})
|
||||
// #endif
|
||||
})
|
||||
},
|
||||
// 展开或者收起
|
||||
toggleReadMore() {
|
||||
this.status = this.status === 'close' ? 'open' : 'close'
|
||||
// 如果toggle为false，隐藏"收起"部分的内容
|
||||
if (this.toggle == false) this.isLongContent = false
|
||||
// 发出打开或者收齐的事件
|
||||
this.$emit(this.status, this.name)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../libs/css/components.scss";
|
||||
|
||||
.u-read-more {
|
||||
|
||||
&__content {
|
||||
overflow: hidden;
|
||||
color: $u-content-color;
|
||||
font-size: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__toggle {
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
|
||||
&__text {
|
||||
@include flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user