Commit 8eb09a2e authored by tangfh's avatar tangfh

封装 f-avatar-edit 插件(头像选择),上传插件市场

parent e6d4011d
......@@ -3,6 +3,8 @@
<f-status-view v-if="statusViewUI.isShowStatusView" :status="statusViewUI.status" :style="statusViewStyle"
@tap="onStatusViewClick"></f-status-view>
<f-avatar-edit :avatar="avatar" @onAvatarSelected="onAvatarSelected" @click="onAvatarClick" @onSelectBtnClick="onSelectAvatarBtnClick"></f-avatar-edit>
<f-view-bottom-fixed>
<f-button-01 style="flex: 0 0 50%;" clazz="style-02" text="存为模板" backgroundColor="#222222"></f-button-01>
<f-button-01 style="flex: 0 0 50%;" clazz="style-03" text="提交"></f-button-01>
......@@ -75,6 +77,7 @@
data() {
return {
title: 'fashion-ui',
avatar: "/static/logo.png",
statusViewStyle: {
width: "",
height: "",
......@@ -142,6 +145,15 @@
this.cMultiText01Ui02Init()
},
methods: {
onAvatarSelected(res) {
this.avatar = res[0]
},
onAvatarClick(res) {
},
onSelectAvatarBtnClick(res) {
},
onImageChoose(res) {
},
......
## 1.0.0(2024-06-04)
1.0.0
<template>
<view class="flex-row v-avatar" style="padding-right: 10rpx" :style="[style]" @click="onClick">
<f-image-01 :avatar="avatar" :style="avatarStyle"></f-image-01>
<image class="image-avatar-right" src="/static/f/com-camera-small.png" mode="aspectFill"
@click.stop="onSelectBtnClick"></image>
</view>
</template>
<script>
export default {
name: "f-avatar-edit",
props: {
avatar: {
type: String,
default: ""
},
style: {
type: Object,
default: {}
},
avatarStyle: {
type: Object,
default: {}
}
},
methods: {
onClick() {
this.$emit("click")
},
onSelectBtnClick() {
let _this = this;
this.$emit("onSelectBtnClick")
uni.chooseImage({
success(res) {
console.log('res: ', res);
_this.$emit("onAvatarSelected", res.tempFilePaths)
}
})
},
}
}
</script>
<style lang="scss">
.v-avatar {
position: relative;
width: 160rpx;
height: 160rpx;
margin-left: auto;
margin-right: auto;
.image-avatar {
flex-shrink: 0;
width: 100%;
height: 100%;
border-radius: 160rpx;
background-color: $c-bg-color-avatar;
}
.image-avatar-right {
width: 48rpx;
height: 48rpx;
bottom: 0rpx;
right: 14rpx;
flex-shrink: 0;
position: absolute;
}
}
</style>
\ No newline at end of file
{
"id": "f-avatar-edit",
"displayName": "f-avatar-edit",
"version": "1.0.0",
"description": "f-avatar-edit",
"keywords": [
"f-avatar-edit"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y",
"alipay": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "u"
},
"App": {
"app-vue": "u",
"app-nvue": "u",
"app-uvue": "u"
},
"H5-mobile": {
"Safari": "u",
"Android Browser": "u",
"微信浏览器(Android)": "u",
"QQ浏览器(Android)": "u"
},
"H5-pc": {
"Chrome": "u",
"IE": "u",
"Edge": "u",
"Firefox": "u",
"Safari": "u"
},
"小程序": {
"微信": "y",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
\ No newline at end of file
# f-avatar-edit
\ No newline at end of file
<template>
<image class="f-image-01" :src="src" :style="[style]" mode="aspectFill" @click="onAvatarClick" @error="onLoadError">
<image class="f-image-01" :src="src" :style="[style]" mode="aspectFill" @error="onLoadError">
</image>
</template>
......@@ -33,9 +33,6 @@
},
created() {},
methods: {
onAvatarClick() {
this.$emit("onAvatarClick")
},
onLoadError(res) {
console.log("onLoadError", res);
this.src = AVATAR_DEFAULT
......@@ -46,12 +43,11 @@
<style lang="scss">
.f-image-01 {
width: 112rpx;
height: 112rpx;
border-radius: 112rpx;
margin-right: 16rpx;
width: 160rpx;
height: 160rpx;
border-radius: 160rpx;
background-repeat: no-repeat;
background-size: 112rpx 112rpx;
background-size: 160rpx 160rpx;
background-color: $c-bg-color-avatar;
z-index: 666;
flex-shrink: 0;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment