Commit cc88ef5b authored by liubinyu's avatar liubinyu

个人中心

parent 2ffee13a
...@@ -46,6 +46,22 @@ ...@@ -46,6 +46,22 @@
background-image: url(@/static/bg2.png); background-image: url(@/static/bg2.png);
} }
.page.bg3 {
background-image: url(@/static/bg3.png);
}
.g-btn {
width: 600rpx;
height: 80rpx;
background: linear-gradient(299deg, #9805FF 0%, #0336F5 100%);
border-radius: 12rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 26rpx;
color: #FFFFFF;
}
@font-face { @font-face {
font-family: 'NotoSerif'; font-family: 'NotoSerif';
src: url(@/static/font/NotoSerif.ttf); src: url(@/static/font/NotoSerif.ttf);
......
{
"version" : "1",
"prompt" : "template",
"title" : "服务协议和隐私政策",
"message" : "  请你务必审慎阅读、充分理解“服务协议”和“隐私政策”各条款,包括但不限于:为了更好的向你提供服务,我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能。<br/>  你可阅读<a href=\"http://www.digiflow.hk/fwxy\">《服务协议》</a>和<a href=\"http://www.digiflow.hk/yszc\">《隐私政策》</a>了解详细信息。如果你同意,请点击下面按钮开始接受我们的服务。",
"buttonAccept" : "同意并接受",
"buttonRefuse" : "暂不同意",
"hrefLoader" : "system",
"backToExit" : "true",
"second" : {
"title" : "确认提示",
"message" : "  进入应用前,你需先同意<a href=\"http://www.digiflow.hk/fwxy\">《服务协议》</a>和<a href=\"http://www.digiflow.hk/yszc\">《隐私政策》</a>,否则将退出应用。",
"buttonAccept" : "同意并继续",
"buttonRefuse" : "退出应用"
},
"disagreeMode" : {
"support" : false,
"loadNativePlugins" : false,
"visitorEntry" : false,
"showAlways" : true
},
"styles" : {
"backgroundColor" : "#fff",
"borderRadius" : "5px",
"title" : {
"color" : "#000"
},
"buttonAccept" : {
"color" : "#fff"
},
"buttonRefuse" : {
"color" : "#ccc"
},
"buttonVisitor" : {
"color" : "#fff"
}
}
}
...@@ -25,6 +25,16 @@ export function autoRegister(data) { ...@@ -25,6 +25,16 @@ export function autoRegister(data) {
return http.request({ url: `/system/user/autoRegister`, method: 'POST', data }) return http.request({ url: `/system/user/autoRegister`, method: 'POST', data })
} }
// edit
export function userEdit(data) {
return http.request({ url: `/system/user`, method: 'PUT', data })
}
// logAccess
export function logAccess(data) {
return http.request({ url: `/system/accessLog/logAccess`, method: 'POST', data })
}
/** /**
* @todo 把请求对象,转为url参数 * @todo 把请求对象,转为url参数
* @param {Object} obj 请求对象 * @param {Object} obj 请求对象
......
...@@ -25,13 +25,30 @@ ...@@ -25,13 +25,30 @@
"XiaoXi": "小汐", "XiaoXi": "小汐",
"The astrological": "正在为你转动星盘", "The astrological": "正在为你转动星盘",
"Enter your question": "输入你的问题", "Enter your question": "输入你的问题",
"Parsing Failed": "解析失败,请输入正确的提问格式",
"Blank Msg": "不能发送空白消息",
"User": "用户", "User": "用户",
"Home": "首页", "Home": "首页",
"Astrologer": "占星", "Astrologer": "占星",
"Profile": "个人中心", "Profile": "个人中心",
"Language Settings": "语言设置", "Nickname": "昵称",
"Sex": "性别",
"Birthday": "出生时间",
"Birth Place": "出生地点",
"Language": "语言",
"Constellation Selection": "星座选择", "Constellation Selection": "星座选择",
"Cancel": "取消",
"Confirm": "确认",
"Male": "男",
"Female": "女",
"En": "英文", "En": "英文",
"Cn": "简体中文", "Cn": "简体中文",
"Tc": "繁体中文" "Tc": "繁体中文",
"Change": "更改",
"Please Enter": "请输入",
"Nickname Tips": "请输入昵称,最多20个字符",
"Save": "保存",
"No Empty": "不能为空",
"Save Success": "保存成功",
"Fail Upload": "上传失败"
} }
\ No newline at end of file
...@@ -25,13 +25,30 @@ ...@@ -25,13 +25,30 @@
"XiaoXi": "XiaoXi", "XiaoXi": "XiaoXi",
"The astrological": "The astrological chart is rotating for you", "The astrological": "The astrological chart is rotating for you",
"Enter your question": "Enter your question", "Enter your question": "Enter your question",
"Parsing Failed": "Parsing failed. Please enter the correct question format",
"Blank Msg": "Blank messages cannot be sent",
"User": "User", "User": "User",
"Home": "Home", "Home": "Home",
"Astrologer": "Astrologer", "Astrologer": "Astrologer",
"Profile": "Profile", "Profile": "Profile",
"Language Settings": "Language Settings", "Nickname": "Nickname",
"Sex": "Sex",
"Birthday": "Birthday",
"Birth Place": "Birth Place",
"Language": "Language",
"Constellation Selection": "Constellation Selection", "Constellation Selection": "Constellation Selection",
"Cancel": "Cancel",
"Confirm": "Confirm",
"Male": "Male",
"Female": "Female",
"En": "English", "En": "English",
"Cn": "Simplified Chinese", "Cn": "Simplified Chinese",
"Tc": "Chinese Traditional" "Tc": "Chinese Traditional",
"Change": "Change",
"Please Enter": "Please Enter",
"Nickname Tips": "Please enter a nickname, with a maximum of 20 characters",
"Save": "Save",
"No Empty": "can not be empty",
"Save Success": "save successfully",
"Fail Upload": "fail to upload"
} }
\ No newline at end of file
...@@ -25,13 +25,30 @@ ...@@ -25,13 +25,30 @@
"XiaoXi": "小汐", "XiaoXi": "小汐",
"The astrological": "正在為你轉動星盤", "The astrological": "正在為你轉動星盤",
"Enter your question": "輸入你的問題", "Enter your question": "輸入你的問題",
"Parsing Failed": "解析失敗,請輸入正確的提問格式",
"Blank Msg": "不能發送空白消息",
"User": "用戶", "User": "用戶",
"Home": "首頁", "Home": "首頁",
"Astrologer": "占星", "Astrologer": "占星",
"Profile": "個人中心", "Profile": "個人中心",
"Language Settings": "語言設置", "Nickname": "昵稱",
"Sex": "性别",
"Birthday": "出生時間",
"Birth Place": "出生地點",
"Language": "語言",
"Constellation Selection": "星座選擇", "Constellation Selection": "星座選擇",
"Cancel": "取消",
"Confirm": "確認",
"Male": "男",
"Female": "女",
"En": "英文", "En": "英文",
"Cn": "簡體中文", "Cn": "簡體中文",
"Tc": "繁體中文" "Tc": "繁體中文",
"Change": "更改",
"Please Enter": "請輸入",
"Nickname Tips": "請輸入昵稱,最多20個字符",
"Save": "保存",
"No Empty": "不能為空",
"Save Success": "保存成功",
"Fail Upload": "上傳失敗"
} }
\ No newline at end of file
...@@ -5,7 +5,7 @@ import Vue from 'vue' ...@@ -5,7 +5,7 @@ import Vue from 'vue'
import './uni.promisify.adaptor' import './uni.promisify.adaptor'
Vue.config.productionTip = false Vue.config.productionTip = false
import store from '@/store'; import store from '@/store'
Vue.prototype.$store = store Vue.prototype.$store = store
import i18n from './i18n' import i18n from './i18n'
...@@ -13,6 +13,9 @@ import i18n from './i18n' ...@@ -13,6 +13,9 @@ import i18n from './i18n'
import $g from '@/utils/const' import $g from '@/utils/const'
Vue.prototype.$g = $g Vue.prototype.$g = $g
import * as $util from '@/utils'
Vue.prototype.$util = $util
import * as $api from '@/api' import * as $api from '@/api'
Vue.prototype.$api = $api Vue.prototype.$api = $api
......
{ {
"name" : "ai-astro-app", "name" : "星旺",
"appid" : "__UNI__EC0BF56", "appid" : "__UNI__EC0BF56",
"description" : "", "description" : "",
"versionName" : "1.0.0", "versionName" : "1.0.0",
...@@ -12,12 +12,14 @@ ...@@ -12,12 +12,14 @@
"compilerVersion" : 3, "compilerVersion" : 3,
"splashscreen" : { "splashscreen" : {
"alwaysShowBeforeRender" : true, "alwaysShowBeforeRender" : true,
"waiting" : true, "waiting" : false,
"autoclose" : true, "autoclose" : true,
"delay" : 0 "delay" : 0
}, },
/* 模块配置 */ /* 模块配置 */
"modules" : {}, "modules" : {
"Camera" : {}
},
/* 应用发布信息 */ /* 应用发布信息 */
"distribute" : { "distribute" : {
/* android打包配置 */ /* android打包配置 */
...@@ -37,13 +39,59 @@ ...@@ -37,13 +39,59 @@
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>", "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>", "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>", "<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>" "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>",
] "<uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/>"
],
"targetSdkVersion" : 30,
"abiFilters" : [ "armeabi-v7a", "arm64-v8a" ]
}, },
/* ios打包配置 */ /* ios打包配置 */
"ios" : {}, "ios" : {
"idfa" : false
},
/* SDK配置 */ /* SDK配置 */
"sdkConfigs" : {} "sdkConfigs" : {},
"splashscreen" : {
"androidStyle" : "common",
"android" : {
"hdpi" : "",
"xhdpi" : "",
"xxhdpi" : ""
},
"useOriginalMsgbox" : true
},
"icons" : {
"android" : {
"hdpi" : "unpackage/res/icons/72x72.png",
"xhdpi" : "unpackage/res/icons/96x96.png",
"xxhdpi" : "unpackage/res/icons/144x144.png",
"xxxhdpi" : "unpackage/res/icons/192x192.png"
},
"ios" : {
"appstore" : "unpackage/res/icons/1024x1024.png",
"ipad" : {
"app" : "unpackage/res/icons/76x76.png",
"app@2x" : "unpackage/res/icons/152x152.png",
"notification" : "unpackage/res/icons/20x20.png",
"notification@2x" : "unpackage/res/icons/40x40.png",
"proapp@2x" : "unpackage/res/icons/167x167.png",
"settings" : "unpackage/res/icons/29x29.png",
"settings@2x" : "unpackage/res/icons/58x58.png",
"spotlight" : "unpackage/res/icons/40x40.png",
"spotlight@2x" : "unpackage/res/icons/80x80.png"
},
"iphone" : {
"app@2x" : "unpackage/res/icons/120x120.png",
"app@3x" : "unpackage/res/icons/180x180.png",
"notification@2x" : "unpackage/res/icons/40x40.png",
"notification@3x" : "unpackage/res/icons/60x60.png",
"settings@2x" : "unpackage/res/icons/58x58.png",
"settings@3x" : "unpackage/res/icons/87x87.png",
"spotlight@2x" : "unpackage/res/icons/80x80.png",
"spotlight@3x" : "unpackage/res/icons/120x120.png"
}
}
}
} }
}, },
/* 快应用特有相关 */ /* 快应用特有相关 */
......
...@@ -27,6 +27,13 @@ ...@@ -27,6 +27,13 @@
"navigationStyle": "custom", "navigationStyle": "custom",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
},
{
"path": "pages/user/setNickname",
"style": {
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
} }
], ],
"globalStyle": { "globalStyle": {
......
...@@ -75,15 +75,8 @@ ...@@ -75,15 +75,8 @@
userName: this.x_sys.deviceId, userName: this.x_sys.deviceId,
}) })
// 如果解析成功,则重新获取生日信息 // 如果解析成功,则重新获取生日信息
if (res?.data) { if (res?.data) this.$util.getUserInfo()
const res = await this.$api.getUserName({ userName: this.x_sys.deviceId }) const msg = res?.data?.[0]?.message?.content || this.$t('Parsing Failed')
if (res?.data) {
this.vuex('x_user', res.data)
const xz = this.$g.ConstellationList.find(i => i.constellation === res.data.constellation)
xz && this.vuex('x_xz', xz)
}
}
const msg = res?.data?.[0]?.message?.content || '解析失败,请输入正确的提问格式'
this.addMsg(msg) this.addMsg(msg)
}, },
// 是否显示头像,每个用户连续的记录,只显示第一个的头像 // 是否显示头像,每个用户连续的记录,只显示第一个的头像
...@@ -93,7 +86,7 @@ ...@@ -93,7 +86,7 @@
}, },
async confirm() { async confirm() {
const txt = this.inputText.trim() const txt = this.inputText.trim()
if (!txt) return uni.showToast({ title: '不能发送空白消息', icon: 'none' }) if (!txt) return uni.showToast({ title: this.$t('Blank Msg'), icon: 'none' })
this.inputText = '' this.inputText = ''
this.addMsg(txt, true) this.addMsg(txt, true)
// 延迟是为了先显示上一条消息 // 延迟是为了先显示上一条消息
......
...@@ -40,8 +40,6 @@ ...@@ -40,8 +40,6 @@
</template> </template>
<script> <script>
import { dateFormat } from '@/utils'
export default { export default {
data() { data() {
return { return {
...@@ -61,11 +59,9 @@ ...@@ -61,11 +59,9 @@
} }
}, },
async onLoad() { async onLoad() {
const res = await this.$api.getUserName({ userName: this.x_sys.deviceId }) const res = await this.$util.getUserInfo()
if (res?.data) { if (res) {
this.vuex('x_user', res.data) this.userLog()
const xz = this.$g.ConstellationList.find(i => i.constellation === res.data.constellation)
xz && this.vuex('x_xz', xz)
} else { } else {
uni.reLaunch({ uni.reLaunch({
url: '/pages/index/index' url: '/pages/index/index'
...@@ -73,6 +69,10 @@ ...@@ -73,6 +69,10 @@
} }
}, },
methods: { methods: {
// 用户访问记录
userLog() {
this.$api.logAccess({ userId: this.x_user.userId })
},
// 开启 // 开启
start() { start() {
if (!this.isBack) return; if (!this.isBack) return;
......
...@@ -31,13 +31,20 @@ ...@@ -31,13 +31,20 @@
this.xz = xz this.xz = xz
}, },
async go() { async go() {
const res = await this.$api.autoRegister({ const constellation = this.xz.constellation
constellation: this.xz.constellation, let res
userName: this.x_sys.deviceId, // 如果已经有用户,则是从个人中心过来的
latitude: this.x_location.latitude, if (this.x_user) {
longitude: this.x_location.longitude, res = await this.$api.userEdit(Object.assign({}, this.x_user, { constellation }))
}) } else {
if (res?.data) { res = await this.$api.autoRegister({
constellation,
userName: this.x_sys.deviceId,
latitude: this.x_location.latitude,
longitude: this.x_location.longitude,
})
}
if (res) {
uni.reLaunch({ uni.reLaunch({
url: '/pages/home/home' url: '/pages/home/home'
}) })
......
<template>
<view class="page bg3" :style="{ paddingTop: `${x_sys.statusBarHeight + 44}px` }">
<uv-navbar :title="`${$t('Change')}${$t('Nickname')}`" bgColor="transparent" leftIconColor="#FFFFFF"
titleStyle="color: #FFFFFF;" @leftClick="back"></uv-navbar>
<view class="body">
<input v-model="inputText" class="input" :placeholder="$t('Please Enter')" :maxlength="20" />
<view class="tips">{{ $t('Nickname Tips') }}</view>
</view>
<view class="g-btn" @click="save">{{ $t('Save') }}</view>
</view>
</template>
<script>
export default {
data() {
return {
inputText: '',
}
},
onLoad() {
this.inputText = this.x_user.nickName || ''
},
methods: {
async save() {
const txt = this.inputText.trim()
if (!txt) return uni.showToast({ title: `${this.$t('Nickname')}${this.$t('No Empty')}`, icon: 'none' })
const res = await this.$api.userEdit(Object.assign({}, this.x_user, { nickName: txt }))
if (!res) return
this.$util.getUserInfo()
uni.showToast({ title: this.$t('Save Success') })
setTimeout(() => {
this.back()
}, 1000)
},
back() {
uni.navigateBack()
}
}
}
</script>
<style lang="scss" scoped>
.page {
.body {
padding: 0 36rpx;
.input {
color: #FFFFFF;
border-bottom: 1rpx solid #666;
margin-bottom: 16rpx;
}
.tips {
font-size: 28rpx;
color: #EEEEEE;
}
}
.g-btn {
position: fixed;
left: 0;
right: 0;
bottom: 300rpx;
margin: 0 auto;
}
}
</style>
\ No newline at end of file
<template> <template>
<view class="page"> <view class="page">
<view class="avatar">
<image v-if="x_user.avatar" class="img" :src="x_user.avatar" @click="setAvatar"></image>
<image v-else class="img" src="@/static/avatar-user.png" @click="setAvatar"></image>
<image v-if="x_user.sex === '男'" class="sex" src="@/static/male.png"></image>
<image v-if="x_user.sex === '女'" class="sex" src="@/static/female.png"></image>
</view>
<view class="nickname" @click="go('/pages/user/setNickname')">{{x_user.nickName || '未设置' }}</view>
<view class="xz" @click="go('/pages/index/index')">
<image class="img" :src="xzImg"></image>
<view class="info">
<view class="name">{{ $t(x_xz.key) }}</view>
<view class="date">{{ x_xz.date[0] }}~{{ x_xz.date[1] }}</view>
</view>
<uv-icon size="40rpx" color="#FFFFFF" name="arrow-right" />
</view>
<view class="list"> <view class="list">
<view class="item"> <view class="item">
<view class="txt">{{ $t('Language Settings') }}</view> <view class="left">
<picker mode="selector" :range="locales" :value="localeIndex" @change="changeLang"> <image class="icon" src="@/static/country.png"></image>
<view class="txt">{{ $t('Sex') }}</view>
</view>
<view class="right" @click="openSex">
<view class="txt">{{ sexList[0][sexIndex[0]] }}</view>
<uv-icon class="icon" size="30rpx" color="#FFFFFF" name="arrow-right" />
</view>
</view>
<view class="item">
<view class="left">
<image class="icon" src="@/static/birth.png"></image>
<view class="txt">{{ $t('Birthday') }}</view>
</view>
<view class="right">
<view class="txt" @click="openBirth">{{ x_user.birthday }}</view>
<uv-icon class="icon" size="30rpx" color="#FFFFFF" name="arrow-right" />
</view>
</view>
<view class="item">
<view class="left">
<image class="icon" src="@/static/city.png"></image>
<view class="txt">{{ $t('Birth Place') }}</view>
</view>
<view class="right">
<view class="txt">{{ x_user.city }}</view>
<uv-icon class="icon" size="30rpx" color="#FFFFFF" name="arrow-right" />
</view>
</view>
<view class="item">
<view class="left">
<image class="icon" src="@/static/lang.png"></image>
<view class="txt">{{ $t('Language') }}</view>
</view>
<view class="right" @click="openLang">
<view class="txt">{{ $t(lang) }}</view> <view class="txt">{{ $t(lang) }}</view>
</picker> <uv-icon class="icon" size="30rpx" color="#FFFFFF" name="arrow-right" />
</view>
</view> </view>
<!-- <view class="item">
<view class="txt">{{ $t('Constellation Selection') }}</view>
<image class="icon" src="@/static/icon-right.svg" @click="go('/pages/index/index')"></image>
</view> -->
</view> </view>
<tabbar /> <tabbar />
<uv-picker ref="sex" :columns="sexList" :defaultIndex="sexIndex" :cancelText="$t('Cancel')"
:confirmText="$t('Confirm')" @confirm="changeSex" />
<uv-datetime-picker ref="birth" :value="x_user.birthday" mode="datetime" :cancelText="$t('Cancel')"
:confirmText="$t('Confirm')" :minDate="Number(new Date('1920-01-01'))" :maxDate="Number(new Date())"
@confirm="changeBirth" />
<uv-picker ref="locale" :columns="locales" :defaultIndex="localeIndex" :cancelText="$t('Cancel')"
:confirmText="$t('Confirm')" @confirm="changeLang" />
</view> </view>
</template> </template>
...@@ -20,68 +73,217 @@ ...@@ -20,68 +73,217 @@
export default { export default {
data() { data() {
return { return {
locales: [], // 语言列表 sexList: [],
localeIndex: 0, // 当前语言索引 sexIndex: [],
locales: [],
localeIndex: [],
xzImg: '',
} }
}, },
computed: { computed: {
lang() { lang() {
return this.$i18n.locale return this.$i18n.locale
},
},
watch: {
x_user: {
handler(val) {
if (!val) return
this.getSex()
this.xzImg = require(`@/static/xz/${this.x_xz.key}.png`)
},
immediate: true,
} }
}, },
onLoad() { onLoad() {
this.getLocales() this.getLocales()
}, },
methods: { methods: {
getSex() {
this.sexList = [Object.keys(this.$g.sexMap).map((i, index) => {
if (this.$g.sexMap[i] === this.x_user.sex) this.sexIndex = [index];
return this.$t(i)
})]
},
openSex() {
this.$refs.sex.open()
},
changeSex(e) {
if (e.indexs[0] === this.sexIndex[0]) return
const val = Object.values(this.$g.sexMap)[e.indexs[0]]
this.save(Object.assign({}, this.x_user, { sex: val }))
},
openBirth() {
this.$refs.birth.open()
},
changeBirth(e) {
const val = this.$util.dateFormat(e.value, 'YYYY-MM-DD HH:mm')
this.save(Object.assign({}, this.x_user, { birthday: val }))
},
// 获取语言列表 // 获取语言列表
getLocales() { getLocales() {
this.locales = Object.keys(this.$g.languageMap).map((i, index) => { this.locales = [Object.keys(this.$g.languageMap).map((i, index) => {
if (i === this.lang) this.localeIndex = index; if (i === this.lang) this.localeIndex = [index];
return this.$t(i) return this.$t(i)
}) })]
},
openLang() {
this.$refs.locale.open()
}, },
// 更改语言 // 更改语言
changeLang(e) { changeLang(e) {
const val = Object.keys(this.$g.languageMap)[e.detail.value] if (e.indexs[0] === this.localeIndex[0]) return
const val = Object.keys(this.$g.languageMap)[e.indexs[0]]
this.$i18n.locale = val this.$i18n.locale = val
uni.setStorageSync('locale', val) uni.setStorageSync('locale', val)
// 重置所有页面 // 重置所有页面
uni.reLaunch({ url: '/pages/user/user' }) uni.reLaunch({ url: '/pages/user/user' })
}, },
// 保存用户
async save(user) {
const res = await this.$api.userEdit(user)
if (!res) return
this.$util.getUserInfo()
},
// 页面跳转 // 页面跳转
go(url) { go(url) {
uni.navigateTo({ url }) uni.navigateTo({ url })
}, },
// 设置头像
setAvatar() {
uni.chooseImage({
count: 1,
success: (res) => {
uni.uploadFile({
url: `${this.$g.baseUrl}/oss/storageMinio/createFile`,
filePath: res.tempFilePaths[0],
name: 'file',
success: (res) => {
res = JSON.parse(res.data)
if (res.code == 200) {
const val = res.data.fileUrl
this.save(Object.assign({}, this.x_user, { avatar: val }))
} else {
uni.showToast({ title: this.$t('Fail Upload'), icon: 'none' })
}
}
});
}
})
},
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page { .page {
padding-top: 500rpx; padding-top: 200rpx;
.avatar {
position: relative;
width: 205rpx;
height: 205rpx;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.28);
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
.img {
width: 190rpx;
height: 190rpx;
border-radius: 50%;
}
.sex {
width: 36rpx;
height: 36rpx;
position: absolute;
right: 30rpx;
bottom: 0;
}
}
.nickname {
font-size: 38rpx;
color: #FFFFFF;
text-align: center;
margin: 40rpx 0 80rpx;
}
.xz {
width: 696rpx;
height: 136rpx;
margin: 0 auto;
background-image: url(@/static/card-bg.png);
background-size: 100% 100%;
display: flex;
align-items: center;
padding: 32rpx 36rpx;
color: #FFFFFF;
margin-bottom: 44rpx;
.img {
width: 62rpx;
height: 62rpx;
margin-right: 30rpx;
}
.info {
width: 500rpx;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.name {
font-weight: bold;
font-size: 32rpx;
}
.date {
font-size: 24rpx;
}
}
}
.list { .list {
width: 600rpx; width: 696rpx;
background-color: #fff; background-color: #0B103D;
border-radius: 20rpx; border-radius: 22rpx;
margin: 0 auto; margin: 0 auto;
padding: 10rpx 40rpx; padding: 10rpx 36rpx;
.item { .item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-bottom: 1rpx solid #ccc; border-bottom: 1rpx solid rgba(255, 255, 255, 0.23);
padding: 20rpx 0; padding: 30rpx 0;
.txt { .left {
font-size: 30rpx; font-size: 26rpx;
color: #333; color: rgba(255, 255, 255, 0.85);
display: flex;
align-items: center;
.icon {
width: 28rpx;
height: 28rpx;
margin-right: 18rpx;
}
} }
.icon { .right {
width: 40rpx; font-size: 26rpx;
height: 40rpx; color: #FFFFFF;
display: flex;
align-items: center;
.icon {
margin-left: 22rpx;
}
} }
} }
......
This diff is collapsed.
## 1.0.2(2023-07-02)
uv-action-sheet 由于弹出层uv-popup的修改,打开和关闭方法更改,详情参考文档:https://www.uvui.cn/components/actionSheet.html
## 1.0.1(2023-05-16)
1. 优化组件依赖,修改后无需全局引入,组件导入即可使用
2. 优化部分功能
## 1.0.0(2023-05-10)
uv-action-sheet 底部操作菜单
export default {
props: {
// 标题,有值则显示,同时会显示关闭按钮
title: {
type: String,
default: ''
},
// 选项上方的描述信息
description: {
type: String,
default: ''
},
// 数据
actions: {
type: Array,
default: () => []
},
// 取消按钮的文字,不为空时显示按钮
cancelText: {
type: String,
default: ''
},
// 点击某个菜单项时是否关闭弹窗
closeOnClickAction: {
type: Boolean,
default: true
},
// 处理底部安全区(默认true)
safeAreaInsetBottom: {
type: Boolean,
default: true
},
// 小程序的打开方式
openType: {
type: String,
default: ''
},
// 点击遮罩是否允许关闭 (默认true)
closeOnClickOverlay: {
type: Boolean,
default: true
},
// 圆角值
round: {
type: [Boolean, String, Number],
default: 0
},
...uni.$uv?.props?.actionSheet
}
}
\ No newline at end of file
{
"id": "uv-action-sheet",
"displayName": "uv-action-sheet 底部操作菜单 全面兼容小程序、nvue、vue2、vue3等多端",
"version": "1.0.2",
"description": "该组件用于从底部弹出一个操作菜单,供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheet API,配置更加灵活,所有平台都表现一致。",
"keywords": [
"action-sheet",
"uvui",
"uv-ui",
"操作菜单",
"菜单选择"
],
"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": [
"uv-ui-tools",
"uv-popup",
"uv-icon",
"uv-line",
"uv-loading-icon",
"uv-gap"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
\ No newline at end of file
## ActionSheet 操作菜单
> **组件名:uv-action-sheet**
本组件用于从底部弹出一个操作菜单,供用户选择并返回结果。
本组件功能类似于uni的uni.showActionSheet API,配置更加灵活,所有平台都表现一致。
### <a href="https://www.uvui.cn/components/actionSheet.html" target="_blank">查看文档</a>
### [完整示例项目下载 | 关注更多组件](https://ext.dcloud.net.cn/plugin?name=uv-ui)
#### 如使用过程中有任何问题,或者您对uv-ui有一些好的建议,欢迎加入 uv-ui 交流群:<a href="https://ext.dcloud.net.cn/plugin?id=12287" target="_blank">uv-ui</a>、<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
## 1.0.4(2023-12-06)
1. 阻止事件冒泡处理
## 1.0.3(2023-10-23)
1. 修复报错的BUG
## 1.0.2(2023-10-23)
1. 修复设置singleSize、multipleSize、space等值带单位,存在不显示的BUG
## 1.0.1(2023-09-13)
1. 添加依赖
## 1.0.0(2023-08-30)
1. 新增uv-album相册组件
<template>
<view class="uv-album">
<view
class="uv-album__row"
ref="uv-album__row"
v-for="(arr, index) in showUrls"
:forComputedUse="albumWidth"
:key="index"
>
<view
class="uv-album__row__wrapper"
v-for="(item, index1) in arr"
:key="index1"
:style="[imageStyle(index + 1, index1 + 1)]"
@tap.stop="previewFullImage ? onPreviewTap(getSrc(item)) : ''"
>
<image
:src="getSrc(item)"
:mode="
urls.length === 1
? imageHeight > 0
? singleMode
: 'widthFix'
: multipleMode
"
:style="[
{
width: imageWidth,
height: imageHeight
}
]"
></image>
<view
v-if="
showMore &&
urls.length > rowCount * showUrls.length &&
index === showUrls.length - 1 &&
index1 === showUrls[showUrls.length - 1].length - 1
"
class="uv-album__row__wrapper__text"
>
<uv-text
:text="`+${urls.length - maxCount}`"
color="#fff"
:size="$uv.getPx(multipleSize) * 0.3"
align="center"
customStyle="justify-content: center"
></uv-text>
</view>
</view>
</view>
</view>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
// #ifdef APP-NVUE
// 由于weex为阿里的KPI业绩考核的产物,所以不支持百分比单位,这里需要通过dom查询组件的宽度
const dom = uni.requireNativePlugin('dom')
// #endif
/**
* Album 相册
* @description 本组件提供一个类似相册的功能,让开发者开发起来更加得心应手。减少重复的模板代码
* @tutorial https://www.uvui.cn/components/album.html
* @property {Array} urls 图片地址列表 Array<String>|Array<Object>形式
* @property {String} keyName 指定从数组的对象元素中读取哪个属性作为图片地址
* @property {String | Number} singleSize 单图时,图片长边的长度 (默认 180 )
* @property {String | Number} multipleSize 多图时,图片边长 (默认 70 )
* @property {String | Number} space 多图时,图片水平和垂直之间的间隔 (默认 6 )
* @property {String} singleMode 单图时,图片缩放裁剪的模式 (默认 'scaleToFill' )
* @property {String} multipleMode 多图时,图片缩放裁剪的模式 (默认 'aspectFill' )
* @property {String | Number} maxCount 取消按钮的提示文字 (默认 9 )
* @property {Boolean} previewFullImage 是否可以预览图片 (默认 true )
* @property {String | Number} rowCount 每行展示图片数量,如设置,singleSize和multipleSize将会无效 (默认 3 )
* @property {Boolean} showMore 超出maxCount时是否显示查看更多的提示 (默认 true )
*
* @event {Function} albumWidth 某些特殊的情况下,需要让文字与相册的宽度相等,这里事件的形式对外发送 (回调参数 width )
* @example <uv-album :urls="urls2" @albumWidth="width => albumWidth = width" multipleSize="68" ></uv-album>
*/
export default {
name: 'uv-album',
mixins: [mpMixin, mixin],
emits: ['albumWidth'],
props: {
// 图片地址,Array<String>|Array<Object>形式
urls: {
type: Array,
default: () => []
},
// 指定从数组的对象元素中读取哪个属性作为图片地址
keyName: {
type: String,
default: ''
},
// 单图时,图片长边的长度
singleSize: {
type: [String, Number],
default: 180
},
// 多图时,图片边长
multipleSize: {
type: [String, Number],
default: 70
},
// 多图时,图片水平和垂直之间的间隔
space: {
type: [String, Number],
default: 6
},
// 单图时,图片缩放裁剪的模式
singleMode: {
type: String,
default: 'scaleToFill'
},
// 多图时,图片缩放裁剪的模式
multipleMode: {
type: String,
default: 'aspectFill'
},
// 最多展示的图片数量,超出时最后一个位置将会显示剩余图片数量
maxCount: {
type: [String, Number],
default: 9
},
// 是否可以预览图片
previewFullImage: {
type: Boolean,
default: true
},
// 每行展示图片数量,如设置,singleSize和multipleSize将会无效
rowCount: {
type: [String, Number],
default: 3
},
// 超出maxCount时是否显示查看更多的提示
showMore: {
type: Boolean,
default: true
},
...uni.$uv?.props?.album
},
data() {
return {
// 单图的宽度
singleWidth: 0,
// 单图的高度
singleHeight: 0,
// 单图时,如果无法获取图片的尺寸信息,让图片宽度默认为容器的一定百分比
singlePercent: 0.6
}
},
watch: {
urls: {
immediate: true,
handler(newVal) {
if (newVal.length === 1) {
this.getImageRect()
}
}
}
},
computed: {
imageStyle() {
return (index1, index2) => {
const { space, rowCount, multipleSize, urls } = this;
const rowLen = this.showUrls.length;
const allLen = this.urls.length;
const style = {
marginRight: this.$uv.addUnit(space),
marginBottom: this.$uv.addUnit(space)
}
// 如果为最后一行,则每个图片都无需下边框
if (index1 === rowLen) style.marginBottom = 0
// 每行的最右边一张和总长度的最后一张无需右边框
if (
index2 === rowCount ||
(index1 === rowLen &&
index2 === this.showUrls[index1 - 1].length)
)
style.marginRight = 0
return style
}
},
// 将数组划分为二维数组
showUrls() {
const arr = []
this.urls.map((item, index) => {
// 限制最大展示数量
if (index + 1 <= this.maxCount) {
// 计算该元素为第几个素组内
const itemIndex = Math.floor(index / this.rowCount)
// 判断对应的索引是否存在
if (!arr[itemIndex]) {
arr[itemIndex] = []
}
arr[itemIndex].push(item)
}
})
return arr
},
imageWidth() {
return this.$uv.addUnit(
this.urls.length === 1 ? this.singleWidth : this.multipleSize
)
},
imageHeight() {
return this.$uv.addUnit(
this.urls.length === 1 ? this.singleHeight : this.multipleSize
)
},
// 此变量无实际用途,仅仅是为了利用computed特性,让其在urls长度等变化时,重新计算图片的宽度
// 因为用户在某些特殊的情况下,需要让文字与相册的宽度相等,所以这里事件的形式对外发送
albumWidth() {
let width = 0
if (this.urls.length === 1) {
width = this.singleWidth
} else {
width =
this.showUrls[0].length * this.$uv.getPx(this.multipleSize) +
this.$uv.getPx(this.space) * (this.showUrls[0].length - 1)
}
this.$emit('albumWidth', width)
return width
}
},
methods: {
// 预览图片
onPreviewTap(url) {
const urls = this.urls.map((item) => {
return this.getSrc(item)
})
uni.previewImage({
current: url,
urls
})
},
// 获取图片的路径
getSrc(item) {
return this.$uv.test.object(item) ?
(this.keyName && item[this.keyName]) || item.src :
item
},
// 单图时,获取图片的尺寸
// 在小程序中,需要将网络图片的的域名添加到小程序的download域名才可能获取尺寸
// 在没有添加的情况下,让单图宽度默认为盒子的一定宽度(singlePercent)
getImageRect() {
const src = this.getSrc(this.urls[0])
uni.getImageInfo({
src,
success: (res) => {
// 判断图片横向还是竖向展示方式
const isHorizotal = res.width >= res.height
this.singleWidth = isHorizotal ?
this.singleSize :
(res.width / res.height) * this.$uv.getPx(this.singleSize)
this.singleHeight = !isHorizotal ?
this.singleSize :
(res.height / res.width) * this.singleWidth
},
fail: () => {
this.getComponentWidth()
}
})
},
// 获取组件的宽度
async getComponentWidth() {
// 延时一定时间,以获取dom尺寸
await this.$uv.sleep(30)
// #ifndef APP-NVUE
this.$uGetRect('.uv-album__row').then((size) => {
this.singleWidth = size.width * this.singlePercent
})
// #endif
// #ifdef APP-NVUE
// 这里ref="uv-album__row"所在的标签为通过for循环出来,导致this.$refs['uv-album__row']是一个数组
const ref = this.$refs['uv-album__row'][0]
ref &&
dom.getComponentRect(ref, (res) => {
this.singleWidth = res.size.width * this.singlePercent
})
// #endif
}
}
}
</script>
<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
.uv-album {
@include flex(column);
&__row {
@include flex(row);
flex-wrap: wrap;
&__wrapper {
position: relative;
&__text {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.3);
@include flex(row);
justify-content: center;
align-items: center;
}
}
}
}
</style>
\ No newline at end of file
{
"id": "uv-album",
"displayName": "uv-album 相册 全面兼容vue3+2、app、h5、小程序等多端",
"version": "1.0.4",
"description": "本组件提供一个类似相册的功能,让开发者开发起来更加得心应手,功能齐全,灵活配置可以,开箱即用。减少重复的模板代码",
"keywords": [
"album",
"uv-ui",
"uvui",
"相册",
"图片"
],
"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": [
"uv-ui-tools",
"uv-text"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
\ No newline at end of file
# Album 相册
> **组件名:uv-album**
本组件提供一个类似相册的功能,让开发者开发起来更加得心应手。
功能齐全,灵活配置可以,开箱即用。减少重复的模板代码。
# <a href="https://www.uvui.cn/components/album.html" target="_blank">查看文档</a>
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>(请不要 下载插件ZIP)</small>
### [更多插件,请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
![image](https://mp-a667b617-c5f1-4a2d-9a54-683a67cff588.cdn.bspapp.com/uv-ui/banner.png)
</a>
#### 如使用过程中有任何问题反馈,或者您对uv-ui有一些好的建议,欢迎加入uv-ui官方交流群:<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
\ No newline at end of file
## 1.0.2(2023-06-01)
1. 修复点击触发两次实践的BUG
## 1.0.1(2023-05-16)
1. 优化组件依赖,修改后无需全局引入,组件导入即可使用
2. 优化部分功能
## 1.0.0(2023-05-10)
uv-alert 警告提示组件
export default {
props: {
// 显示文字
title: {
type: String,
default: ''
},
// 主题,success/warning/info/error
type: {
type: String,
default: 'warning'
},
// 辅助性文字
description: {
type: String,
default: ''
},
// 是否可关闭
closable: {
type: Boolean,
default: false
},
// 是否显示图标
showIcon: {
type: Boolean,
default: false
},
// 浅或深色调,light-浅色,dark-深色
effect: {
type: String,
default: 'light'
},
// 文字是否居中
center: {
type: Boolean,
default: false
},
// 字体大小
fontSize: {
type: [String, Number],
default: 14
},
...uni.$uv?.props?.alert
}
}
\ No newline at end of file
<template>
<uv-transition
mode="fade"
:show="show"
>
<view
class="uv-alert"
:class="[`uv-alert--${type}--${effect}`]"
@tap.stop="clickHandler"
:style="[$uv.addStyle(customStyle)]"
>
<view
class="uv-alert__icon"
v-if="showIcon"
>
<uv-icon
:name="iconName"
size="18"
:color="iconColor"
></uv-icon>
</view>
<view
class="uv-alert__content"
:style="[{
paddingRight: closable ? '20px' : 0
}]"
>
<text
class="uv-alert__content__title"
v-if="title"
:style="[{
fontSize: $uv.addUnit(fontSize),
textAlign: center ? 'center' : 'left'
}]"
:class="[effect === 'dark' ? 'uv-alert__text--dark' : `uv-alert__text--${type}--light`]"
>{{ title }}</text>
<text
class="uv-alert__content__desc"
v-if="description"
:style="[{
fontSize: $uv.addUnit(fontSize),
textAlign: center ? 'center' : 'left'
}]"
:class="[effect === 'dark' ? 'uv-alert__text--dark' : `uv-alert__text--${type}--light`]"
>{{ description }}</text>
</view>
<view
class="uv-alert__close"
v-if="closable"
@tap.stop="closeHandler"
>
<uv-icon
name="close"
:color="iconColor"
size="15"
></uv-icon>
</view>
</view>
</uv-transition>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';
/**
* Alert 警告提示
* @description 警告提示,展现需要关注的信息。
* @tutorial https://www.uvui.cn/components/alertTips.html
*
* @property {String} title 显示的文字
* @property {String} type 使用预设的颜色 (默认 'warning' )
* @property {String} description 辅助性文字,颜色比title浅一点,字号也小一点,可选
* @property {Boolean} closable 关闭按钮(默认为叉号icon图标) (默认 false )
* @property {Boolean} showIcon 是否显示左边的辅助图标 ( 默认 false )
* @property {String} effect 多图时,图片缩放裁剪的模式 (默认 'light' )
* @property {Boolean} center 文字是否居中 (默认 false )
* @property {String | Number} fontSize 字体大小 (默认 14 )
* @property {Object} customStyle 定义需要用到的外部样式
* @event {Function} click 点击组件时触发
* @example <uv-alert :title="title" type = "warning" :closable="closable" :description = "description"></uv-alert>
*/
export default {
name: 'uv-alert',
mixins: [mpMixin, mixin, props],
emits: ['click'],
data() {
return {
show: true
}
},
computed: {
iconColor() {
return this.effect === 'light' ? this.type : '#fff'
},
// 不同主题对应不同的图标
iconName() {
switch (this.type) {
case 'success':
return 'checkmark-circle-fill';
break;
case 'error':
return 'close-circle-fill';
break;
case 'warning':
return 'error-circle-fill';
break;
case 'info':
return 'info-circle-fill';
break;
case 'primary':
return 'more-circle-fill';
break;
default:
return 'error-circle-fill';
}
}
},
methods: {
// 点击内容
clickHandler() {
this.$emit('click')
},
// 点击关闭按钮
closeHandler() {
this.show = false
}
}
}
</script>
<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
.uv-alert {
position: relative;
background-color: $uv-primary;
padding: 8px 10px;
@include flex(row);
align-items: center;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
&--primary--dark {
background-color: $uv-primary;
}
&--primary--light {
background-color: #ecf5ff;
}
&--error--dark {
background-color: $uv-error;
}
&--error--light {
background-color: #FEF0F0;
}
&--success--dark {
background-color: $uv-success;
}
&--success--light {
background-color: #f5fff0;
}
&--warning--dark {
background-color: $uv-warning;
}
&--warning--light {
background-color: #FDF6EC;
}
&--info--dark {
background-color: $uv-info;
}
&--info--light {
background-color: #f4f4f5;
}
&__icon {
margin-right: 5px;
}
&__content {
@include flex(column);
flex: 1;
&__title {
color: $uv-main-color;
font-size: 14px;
font-weight: bold;
color: #fff;
margin-bottom: 2px;
}
&__desc {
color: $uv-main-color;
font-size: 14px;
flex-wrap: wrap;
color: #fff;
}
}
&__title--dark,
&__desc--dark {
color: #FFFFFF;
}
&__text--primary--light,
&__text--primary--light {
color: $uv-primary;
}
&__text--success--light,
&__text--success--light {
color: $uv-success;
}
&__text--warning--light,
&__text--warning--light {
color: $uv-warning;
}
&__text--error--light,
&__text--error--light {
color: $uv-error;
}
&__text--info--light,
&__text--info--light {
color: $uv-info;
}
&__close {
position: absolute;
top: 11px;
right: 10px;
}
}
</style>
{
"id": "uv-alert",
"displayName": "uv-alert 警告提示 全面兼容小程序、nvue、vue2、vue3等多端",
"version": "1.0.2",
"description": "uv-alert 警告提示,展现需要关注的信息。灵活配置,功能齐全,兼容全端",
"keywords": [
"alert",
"uvui",
"uv-ui",
"警告提示"
],
"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": [
"uv-ui-tools",
"uv-transition",
"uv-icon"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
\ No newline at end of file
## Alert 警告提示
> **组件名:uv-alert**
警告提示,展现需要关注的信息。
当某个页面需要向用户显示警告的信息时。
非浮层的静态展现形式,始终展现,不会自动消失,用户可以点击关闭。
### <a href="https://www.uvui.cn/components/alert.html" target="_blank">查看文档</a>
### [完整示例项目下载 | 关注更多组件](https://ext.dcloud.net.cn/plugin?name=uv-ui)
#### 如使用过程中有任何问题,或者您对uv-ui有一些好的建议,欢迎加入 uv-ui 交流群:<a href="https://ext.dcloud.net.cn/plugin?id=12287" target="_blank">uv-ui</a>、<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
## 1.0.5(2023-12-06)
1. 优化
## 1.0.4(2023-12-06)
1. 优化
## 1.0.3(2023-12-06)
1. 阻止事件冒泡处理,单个头像模式
## 1.0.2(2023-12-06)
1. 阻止事件冒泡处理
## 1.0.1(2023-05-16)
1. 优化组件依赖,修改后无需全局引入,组件导入即可使用
2. 优化部分功能
## 1.0.0(2023-05-10)
uv-avatar 头像组件
export default {
props: {
// 头像图片组
urls: {
type: Array,
default: () => []
},
// 最多展示的头像数量
maxCount: {
type: [String, Number],
default: 5
},
// 头像形状
shape: {
type: String,
default: 'circle'
},
// 图片裁剪模式
mode: {
type: String,
default: 'scaleToFill'
},
// 超出maxCount时是否显示查看更多的提示
showMore: {
type: Boolean,
default: true
},
// 头像大小
size: {
type: [String, Number],
default: 40
},
// 指定从数组的对象元素中读取哪个属性作为图片地址
keyName: {
type: String,
default: ''
},
// 头像之间的遮挡比例
gap: {
type: [String, Number],
validator(value) {
return value >= 0 && value <= 1
},
default: 0.5
},
// 需额外显示的值
extraValue: {
type: [Number, String],
default: 0
},
...uni.$uv?.props?.avatarGroup
}
}
\ No newline at end of file
<template>
<view class="uv-avatar-group">
<view
class="uv-avatar-group__item"
v-for="(item, index) in showUrl"
:key="index"
:style="{
marginLeft: index === 0 ? 0 : $uv.addUnit(-size * gap)
}"
>
<uv-avatar
:size="size"
:shape="shape"
:mode="mode"
:src="$uv.test.object(item) ? keyName && item[keyName] || item.url : item"
></uv-avatar>
<view
class="uv-avatar-group__item__show-more"
v-if="showMore && index === showUrl.length - 1 && (urls.length > maxCount || extraValue > 0)"
@tap="clickHandler"
>
<uv-text
color="#ffffff"
:size="size * 0.4"
:text="`+${extraValue || urls.length - showUrl.length}`"
align="center"
customStyle="justify-content: center"
></uv-text>
</view>
</view>
</view>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';
/**
* AvatarGroup 头像组
* @description 本组件一般用于展示头像的地方,如个人中心,或者评论列表页的用户头像展示等场所。
* @tutorial https://www.uvui.cn/components/avatar.html
*
* @property {Array} urls 头像图片组 (默认 [] )
* @property {String | Number} maxCount 最多展示的头像数量 ( 默认 5 )
* @property {String} shape 头像形状( 'circle' (默认) | 'square' )
* @property {String} mode 图片裁剪模式(默认 'scaleToFill' )
* @property {Boolean} showMore 超出maxCount时是否显示查看更多的提示 (默认 true )
* @property {String | Number} size 头像大小 (默认 40 )
* @property {String} keyName 指定从数组的对象元素中读取哪个属性作为图片地址
* @property {String | Number} gap 头像之间的遮挡比例(0.4代表遮挡40%) (默认 0.5 )
* @property {String | Number} extraValue 需额外显示的值
* @event {Function} showMore 头像组更多点击
* @example <uv-avatar-group:urls="urls" size="35" gap="0.4" ></uv-avatar-group:urls=>
*/
export default {
name: 'uv-avatar-group',
mixins: [mpMixin, mixin, props],
data() {
return {
}
},
computed: {
showUrl() {
return this.urls.slice(0, this.maxCount)
}
},
methods: {
clickHandler() {
this.$emit('showMore')
}
},
}
</script>
<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
.uv-avatar-group {
@include flex;
&__item {
margin-left: -10px;
position: relative;
&--no-indent {
// 如果你想质疑作者不会使用:first-child,说明你太年轻,因为nvue不支持
margin-left: 0;
}
&__show-more {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.3);
@include flex;
align-items: center;
justify-content: center;
border-radius: 100px;
}
}
}
</style>
import { range } from '@/uni_modules/uv-ui-tools/libs/function/test.js'
export default {
props: {
// 头像图片路径(不能为相对路径)
src: {
type: String,
default: ''
},
// 头像形状,circle-圆形,square-方形
shape: {
type: String,
default: 'circle'
},
// 头像尺寸
size: {
type: [String, Number],
default: 40
},
// 裁剪模式
mode: {
type: String,
default: 'scaleToFill'
},
// 显示的文字
text: {
type: String,
default: ''
},
// 背景色
bgColor: {
type: String,
default: '#c0c4cc'
},
// 文字颜色
color: {
type: String,
default: '#fff'
},
// 文字大小
fontSize: {
type: [String, Number],
default: 18
},
// 显示的图标
icon: {
type: String,
default: ''
},
// 显示小程序头像,只对百度,微信,QQ小程序有效
mpAvatar: {
type: Boolean,
default: false
},
// 是否使用随机背景色
randomBgColor: {
type: Boolean,
default: false
},
// 加载失败的默认头像(组件有内置默认图片)
defaultUrl: {
type: String,
default: ''
},
// 如果配置了randomBgColor为true,且配置了此值,则从默认的背景色数组中取出对应索引的颜色值,取值0-19之间
colorIndex: {
type: [String, Number],
// 校验参数规则,索引在0-19之间
validator(n) {
return range(n, [0, 19]) || n === ''
},
default: ''
},
// 组件标识符
name: {
type: String,
default: ''
},
...uni.$uv?.props?.avatar
}
}
\ No newline at end of file
<template>
<view
class="uv-avatar"
:class="[`uv-avatar--${shape}`]"
:style="[{
backgroundColor: (text || icon) ? (randomBgColor ? colors[colorIndex !== '' ? colorIndex : $uv.random(0, 19)] : bgColor) : 'transparent',
width: $uv.addUnit(size),
height: $uv.addUnit(size),
}, $uv.addStyle(customStyle)]"
@tap="clickHandler"
>
<slot>
<!-- #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU -->
<open-data
v-if="mpAvatar && allowMp"
type="userAvatarUrl"
:style="[{
width: $uv.addUnit(size),
height: $uv.addUnit(size)
}]"
/>
<!-- #endif -->
<!-- #ifndef MP-WEIXIN && MP-QQ && MP-BAIDU -->
<template v-if="mpAvatar && allowMp"></template>
<!-- #endif -->
<uv-icon
v-else-if="icon"
:name="icon"
:size="fontSize"
:color="color"
></uv-icon>
<uv-text
v-else-if="text"
:text="text"
:size="fontSize"
:color="color"
align="center"
customStyle="justify-content: center"
></uv-text>
<image
class="uv-avatar__image"
v-else
:class="[`uv-avatar__image--${shape}`]"
:src="avatarUrl || defaultUrl"
:mode="mode"
@error="errorHandler"
:style="[{
width: $uv.addUnit(size),
height: $uv.addUnit(size)
}]"
></image>
</slot>
</view>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';
const base64Avatar =
"data:image/jpg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjREMEQwRkY0RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjREMEQwRkY1RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEQwRDBGRjJGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEQwRDBGRjNGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCADIAMgDAREAAhEBAxEB/8QAcQABAQEAAwEBAAAAAAAAAAAAAAUEAQMGAgcBAQAAAAAAAAAAAAAAAAAAAAAQAAIBAwICBgkDBQAAAAAAAAABAhEDBCEFMVFBYXGREiKBscHRMkJSEyOh4XLxYjNDFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A/fAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHbHFyZ/Dam+yLA+Z2L0Pjtyj2poD4AAAAAAAAAAAAAAAAAAAAAAAAKWFs9y6lcvvwQeqj8z9wFaziY1n/HbUX9XF97A7QAGXI23EvJ1goyfzR0YEfN269jeZ+a03pNe0DIAAAAAAAAAAAAAAAAAAAACvtO3RcVkXlWutuL9YFYAAAAAOJRjKLjJVi9GmB5/csH/mu1h/in8PU+QGMAAAAAAAAAAAAAAAAAAaMDG/6MmMH8C80+xAelSSVFolwQAAAAAAAHVlWI37ErUulaPk+hgeYnCUJuElSUXRrrQHAAAAAAAAAAAAAAAAABa2Oz4bM7r4zdF2ICmAAAAAAAAAg7zZ8GX41wuJP0rRgYAAAAAAAAAAAAAAAAAD0m2R8ODaXU33tsDSAAAAAAAAAlb9HyWZcnJd9PcBHAAAAAAAAAAAAAAAAAPS7e64Vn+KA0AAAAAAAAAJm+v8Ftf3ewCKAAAAAAAAAAAAAAAAAX9muqeGo9NttP06+0DcAAAAAAAAAjb7dTu2ra+VOT9P8AQCWAAAAAAAAAAAAAAAAAUNmyPt5Ltv4bui/kuAF0AAAAAAADiUlGLlJ0SVW+oDzOXfd/Ind6JPRdS0QHSAAAAAAAAAAAAAAAAAE2nVaNcGB6Lbs6OTao9LsF51z60BrAAAAAABJ3jOVHjW3r/sa9QEgAAAAAAAAAAAAAAAAAAAPu1duWriuW34ZR4MC9hbnZyEoy8l36XwfYBsAAADaSq9EuLAlZ+7xSdrGdW9Hc5dgEdtt1erfFgAAAAAAAAAAAAAAAAADVjbblX6NR8MH80tEBRs7HYivyzlN8lovaBPzduvY0m6eK10TXtAyAarO55lpJK54orolr+4GqO/Xaea1FvqbXvA+Z77kNeW3GPbV+4DJfzcm/pcm3H6Vou5AdAFLC2ed2Pjv1txa8sV8T6wOL+yZEKu1JXFy4MDBOE4ScZxcZLinoB8gAAAAAAAAAAAB242LeyJ+C3GvN9C7QLmJtePYpKS+5c+p8F2IDYAANJqj1T4oCfk7Nj3G5Wn9qXJax7gJ93Z82D8sVNc4v30A6Xg5i42Z+iLfqARwcyT0sz9MWvWBps7LlTf5Grce9/oBTxdtxseklHxT+uWr9AGoAB138ezfj4bsFJdD6V2MCPm7RdtJzs1uW1xXzL3gTgAAAAAAAAADRhYc8q74I6RWs5ckB6GxYtWLat21SK731sDsAAAAAAAAAAAAAAAASt021NO/YjrxuQXT1oCOAAAAAAABzGLlJRSq26JAelwsWONYjbXxcZvmwO8AAAAAAAAAAAAAAAAAAef3TEWPkVivx3NY9T6UBiAAAAAABo2+VmGXblddIJ8eivRUD0oAAAAAAAAAAAAAAAAAAAYt4tKeFKVNYNSXfRgefAAAAAAAAr7VuSSWPedKaW5v1MCsAAAAAAAAAAAAAAAAAAIe6bj96Ts2n+JPzSXzP3ATgAAAAAAAAFbbt1UUrOQ9FpC4/UwK6aaqtU+DAAAAAAAAAAAAAAA4lKMIuUmoxWrb4ARNx3R3q2rLpa4Sl0y/YCcAAAAAAAAAAANmFud7G8r89r6X0dgFvGzLGRGtuWvTF6NAdwAAAAAAAAAAAy5W442PVN+K59EePp5ARMvOv5MvO6QXCC4AZwAAAAAAAAAAAAAcxlKLUotprg1owN+PvORborq+7Hnwl3gUbO74VzRydt8pKn68ANcJwmqwkpLmnUDkAAAAfNy9atqtyagut0AxXt5xIV8Fbj6lRd7Am5G65V6qUvtwfyx94GMAAAAAAAAAAAAAAAAAAAOU2nVOj5gdsc3LiqRvTpyqwOxbnnrhdfpSfrQB7pnv/AGvuS9gHXPMy5/Fem1yq0v0A6W29XqwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAf//Z";
/**
* Avatar 头像
* @description 本组件一般用于展示头像的地方,如个人中心,或者评论列表页的用户头像展示等场所。
* @tutorial https://www.uvui.cn/components/avatar.html
*
* @property {String} src 头像路径,如加载失败,将会显示默认头像(不能为相对路径)
* @property {String} shape 头像形状 ( circle (默认) | square)
* @property {String | Number} size 头像尺寸,可以为指定字符串(large, default, mini),或者数值 (默认 40 )
* @property {String} mode 头像图片的裁剪类型,与uni的image组件的mode参数一致,如效果达不到需求,可尝试传widthFix值 (默认 'scaleToFill' )
* @property {String} text 用文字替代图片,级别优先于src
* @property {String} bgColor 背景颜色,一般显示文字时用 (默认 '#c0c4cc' )
* @property {String} color 文字颜色 (默认 '#ffffff' )
* @property {String | Number} fontSize 文字大小 (默认 18 )
* @property {String} icon 显示的图标
* @property {Boolean} mpAvatar 显示小程序头像,只对百度,微信,QQ小程序有效 (默认 false )
* @property {Boolean} randomBgColor 是否使用随机背景色 (默认 false )
* @property {String} defaultUrl 加载失败的默认头像(组件有内置默认图片)
* @property {String | Number} colorIndex 如果配置了randomBgColor为true,且配置了此值,则从默认的背景色数组中取出对应索引的颜色值,取值0-19之间
* @property {String} name 组件标识符 (默认 'level' )
* @property {Object} customStyle 定义需要用到的外部样式
*
* @event {Function} click 点击组件时触发 index: 用户传递的标识符
* @example <uv-avatar :src="src" mode="square"></uv-avatar>
*/
export default {
name: 'uv-avatar',
emits: ['click'],
mixins: [mpMixin, mixin, props],
data() {
return {
// 如果配置randomBgColor参数为true,在图标或者文字的模式下,会随机从中取出一个颜色值当做背景色
colors: ['#ffb34b', '#f2bba9', '#f7a196', '#f18080', '#88a867', '#bfbf39', '#89c152', '#94d554', '#f19ec2',
'#afaae4', '#e1b0df', '#c38cc1', '#72dcdc', '#9acdcb', '#77b1cc', '#448aca', '#86cefa', '#98d1ee',
'#73d1f1',
'#80a7dc'
],
avatarUrl: this.src,
allowMp: false
}
},
watch: {
// 监听头像src的变化,赋值给内部的avatarUrl变量,因为图片加载失败时,需要修改图片的src为默认值
// 而组件内部不能直接修改props的值,所以需要一个中间变量
src: {
immediate: true,
handler(newVal) {
this.avatarUrl = newVal
// 如果没有传src,则主动触发error事件,用于显示默认的头像,否则src为''空字符等的时候,会无内容展示
if(!newVal) {
this.errorHandler()
}
}
}
},
computed: {
imageStyle() {
const style = {}
return style
}
},
created() {
this.init()
},
methods: {
init() {
// 目前只有这几个小程序平台具有open-data标签
// 其他平台可以通过uni.getUserInfo类似接口获取信息,但是需要弹窗授权(首次),不合符组件逻辑
// 故目前自动获取小程序头像只支持这几个平台
// #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU
this.allowMp = true
// #endif
},
// 判断传入的name属性,是否图片路径,只要带有"/"均认为是图片形式
isImg() {
return this.src.indexOf('/') !== -1
},
// 图片加载时失败时触发
errorHandler() {
this.avatarUrl = this.defaultUrl || base64Avatar
},
clickHandler() {
this.$emit('click', this.name)
}
}
}
</script>
<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
.uv-avatar {
@include flex;
align-items: center;
justify-content: center;
&--circle {
border-radius: 100px;
}
&--square {
border-radius: 4px;
}
&__image {
&--circle {
border-radius: 100px;
}
&--square {
border-radius: 4px;
}
}
}
</style>
{
"id": "uv-avatar",
"displayName": "uv-avatar 头像 全面兼容小程序、nvue、vue2、vue3等多端",
"version": "1.0.5",
"description": "uv-avatar 本组件一般用于展示头像的地方,如个人中心,或者评论列表页的用户头像展示等场所。",
"keywords": [
"uv-avatar",
"uvui",
"uv-ui",
"avatar",
"头像"
],
"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": [
"uv-ui-tools",
"uv-icon",
"uv-text"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
\ No newline at end of file
## Avatar 头像
> **组件名:uv-avatar**
本组件一般用于展示头像的地方,如个人中心,或者评论列表页的用户头像展示等场所。
### <a href="https://www.uvui.cn/components/avatar.html" target="_blank">查看文档</a>
### [完整示例项目下载 | 关注更多组件](https://ext.dcloud.net.cn/plugin?name=uv-ui)
#### 如使用过程中有任何问题,或者您对uv-ui有一些好的建议,欢迎加入 uv-ui 交流群:<a href="https://ext.dcloud.net.cn/plugin?id=12287" target="_blank">uv-ui</a>、<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
## 1.0.2(2023-07-03)
1. 优化插槽自定义内容部分
2. 增加backToTop方法说明
## 1.0.1(2023-05-16)
1. 优化组件依赖,修改后无需全局引入,组件导入即可使用
2. 优化部分功能
## 1.0.0(2023-05-10)
uv-back-top 返回顶部
export default {
props: {
// 返回顶部的形状,circle-圆形,square-方形
mode: {
type: String,
default: 'circle'
},
// 自定义图标
icon: {
type: String,
default: 'arrow-upward'
},
// 提示文字
text: {
type: String,
default: ''
},
// 返回顶部滚动时间
duration: {
type: [String, Number],
default: 100
},
// 滚动距离
scrollTop: {
type: [String, Number],
default: 0
},
// 距离顶部多少距离显示,单位px
top: {
type: [String, Number],
default: 400
},
// 返回顶部按钮到底部的距离,单位px
bottom: {
type: [String, Number],
default: 100
},
// 返回顶部按钮到右边的距离,单位px
right: {
type: [String, Number],
default: 20
},
// 层级
zIndex: {
type: [String, Number],
default: 9
},
// 图标的样式,对象形式
iconStyle: {
type: Object,
default: () => ({
color: '#909399',
fontSize: '19px'
})
},
...uni.$uv?.props?.backtop
}
}
\ No newline at end of file
<template>
<uv-transition mode="fade" :customStyle="backTopStyle" :show="show">
<slot>
<view class="uv-back-top" :style="[contentStyle]" @click="backToTop">
<uv-icon :name="icon" :custom-style="iconStyle"></uv-icon>
<text v-if="text" class="uv-back-top__text">{{text}}</text>
</view>
</slot>
</uv-transition>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';
// #ifdef APP-NVUE
const dom = weex.requireModule('dom')
// #endif
/**
* backTop 返回顶部
* @description 本组件一个用于长页面,滑动一定距离后,出现返回顶部按钮,方便快速返回顶部的场景。
* @tutorial https://www.uvui.cn/components/backTop.html
* @property {String} mode 返回顶部的形状,circle-圆形,square-方形 (默认 'circle' )
* @property {String} icon 自定义图标 (默认 'arrow-upward' ) 见官方文档示例
* @property {String} text 提示文字
* @property {String | Number} duration 返回顶部滚动时间 (默认 100)
* @property {String | Number} scrollTop 滚动距离 (默认 0 )
* @property {String | Number} top 距离顶部多少距离显示,单位px (默认 400 )
* @property {String | Number} bottom 返回顶部按钮到底部的距离,单位px (默认 100 )
* @property {String | Number} right 返回顶部按钮到右边的距离,单位px (默认 20 )
* @property {String | Number} zIndex 层级 (默认 9 )
* @property {Object<Object>} iconStyle 图标的样式,对象形式 (默认 {color: '#909399',fontSize: '19px'})
* @property {Object} customStyle 定义需要用到的外部样式
*
* @example <uv-back-top :scrollTop="scrollTop"></uv-back-top>
*/
export default {
name: 'uv-back-top',
emits: ['click'],
mixins: [mpMixin, mixin, props],
computed: {
backTopStyle() {
// 动画组件样式
const style = {
bottom: this.$uv.addUnit(this.bottom),
right: this.$uv.addUnit(this.right),
width: '40px',
height: '40px',
position: 'fixed',
zIndex: 10,
}
return style
},
show() {
return this.$uv.getPx(this.scrollTop) > this.$uv.getPx(this.top)
},
contentStyle() {
const style = {}
let radius = 0
// 是否圆形
if (this.mode === 'circle') {
radius = '100px'
} else {
radius = '4px'
}
// 为了兼容安卓nvue,只能这么分开写
style.borderTopLeftRadius = radius
style.borderTopRightRadius = radius
style.borderBottomLeftRadius = radius
style.borderBottomRightRadius = radius
return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
}
},
methods: {
backToTop() {
// #ifdef APP-NVUE
if (!this.$parent.$refs['uv-back-top']) {
this.$uv.error(`nvue页面需要给页面最外层元素设置"ref='uv-back-top'`)
}
dom.scrollToElement(this.$parent.$refs['uv-back-top'], {
offset: 0
})
// #endif
// #ifndef APP-NVUE
uni.pageScrollTo({
scrollTop: 0,
duration: this.duration
});
// #endif
this.$emit('click')
}
}
}
</script>
<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
$uv-back-top-flex: 1 !default;
$uv-back-top-height: 100% !default;
$uv-back-top-background-color: #E1E1E1 !default;
$uv-back-top-tips-font-size: 12px !default;
.uv-back-top {
@include flex;
flex-direction: column;
align-items: center;
flex: $uv-back-top-flex;
height: $uv-back-top-height;
justify-content: center;
background-color: $uv-back-top-background-color;
&__tips {
font-size: $uv-back-top-tips-font-size;
transform: scale(0.8);
}
}
</style>
\ No newline at end of file
{
"id": "uv-back-top",
"displayName": "uv-back-top 返回顶部 全面兼容小程序、nvue、vue2、vue3等多端",
"version": "1.0.2",
"description": "返回顶部 组件一个用于长页面,滑动一定距离后,出现返回顶部按钮,方便快速返回顶部的场景。",
"keywords": [
"uv-back-top",
"uvui",
"uv-ui",
"avatar",
"返回顶部"
],
"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": [
"uv-ui-tools",
"uv-icon",
"uv-transition"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
\ No newline at end of file
## BackTop 返回顶部
> **组件名:uv-back-top**
该组件一个用于长页面,滑动一定距离后,出现返回顶部按钮,方便快速返回顶部的场景。
### <a href="https://www.uvui.cn/components/backTop.html" target="_blank">查看文档</a>
### [完整示例项目下载 | 关注更多组件](https://ext.dcloud.net.cn/plugin?name=uv-ui)
#### 如使用过程中有任何问题,或者您对uv-ui有一些好的建议,欢迎加入 uv-ui 交流群:<a href="https://ext.dcloud.net.cn/plugin?id=12287" target="_blank">uv-ui</a>、<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
## 1.0.2(2023-06-04)
1. 修复type等属性为null的时候不显示徽标的BUG
## 1.0.1(2023-05-16)
1. 优化组件依赖,修改后无需全局引入,组件导入即可使用
2. 优化部分功能
## 1.0.0(2023-05-10)
uv-badge 徽标数,数字角标
export default {
props: {
// 是否显示圆点
isDot: {
type: Boolean,
default: false
},
// 显示的内容
value: {
type: [Number, String],
default: ''
},
// 是否显示
show: {
type: Boolean,
default: true
},
// 最大值,超过最大值会显示 '{max}+'
max: {
type: [Number, String],
default: 999
},
// 主题类型,error|warning|success|primary
type: {
type: [String,undefined,null],
default: 'error'
},
// 当数值为 0 时,是否展示 Badge
showZero: {
type: Boolean,
default: false
},
// 背景颜色,优先级比type高,如设置,type参数会失效
bgColor: {
type: [String, null],
default: null
},
// 字体颜色
color: {
type: [String, null],
default: null
},
// 徽标形状,circle-四角均为圆角,horn-左下角为直角
shape: {
type: [String,undefined,null],
default: 'circle'
},
// 设置数字的显示方式,overflow|ellipsis|limit
// overflow会根据max字段判断,超出显示`${max}+`
// ellipsis会根据max判断,超出显示`${max}...`
// limit会依据1000作为判断条件,超出1000,显示`${value/1000}K`,比如2.2k、3.34w,最多保留2位小数
numberType: {
type: [String,undefined,null],
default: 'overflow'
},
// 设置badge的位置偏移,格式为 [x, y],也即设置的为top和right的值,absolute为true时有效
offset: {
type: Array,
default: () => []
},
// 是否反转背景和字体颜色
inverted: {
type: Boolean,
default: false
},
// 是否绝对定位
absolute: {
type: Boolean,
default: false
},
...uni.$uv?.props?.badge
}
}
\ No newline at end of file
<template>
<text
v-if="show && ((Number(value) === 0 ? showZero : true) || isDot)"
:class="[isDot ? 'uv-badge--dot' : 'uv-badge--not-dot', inverted && 'uv-badge--inverted', shape === 'horn' && 'uv-badge--horn', `uv-badge--${propsType}${inverted ? '--inverted' : ''}`]"
:style="[$uv.addStyle(customStyle), badgeStyle]"
class="uv-badge"
>{{ isDot ? '' :showValue }}</text>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';
/**
* badge 徽标数
* @description 该组件一般用于图标右上角显示未读的消息数量,提示用户点击,有圆点和圆包含文字两种形式。
* @tutorial https://www.uvui.cn/components/badge.html
*
* @property {Boolean} isDot 是否显示圆点 (默认 false )
* @property {String | Number} value 显示的内容
* @property {Boolean} show 是否显示 (默认 true )
* @property {String | Number} max 最大值,超过最大值会显示 '{max}+' (默认999)
* @property {String} type 主题类型,error|warning|success|primary (默认 'error' )
* @property {Boolean} showZero 当数值为 0 时,是否展示 Badge (默认 false )
* @property {String} bgColor 背景颜色,优先级比type高,如设置,type参数会失效
* @property {String} color 字体颜色 (默认 '#ffffff' )
* @property {String} shape 徽标形状,circle-四角均为圆角,horn-左下角为直角 (默认 'circle' )
* @property {String} numberType 设置数字的显示方式,overflow|ellipsis|limit (默认 'overflow' )
* @property {Array}} offset 设置badge的位置偏移,格式为 [x, y],也即设置的为top和right的值,absolute为true时有效
* @property {Boolean} inverted 是否反转背景和字体颜色(默认 false )
* @property {Boolean} absolute 是否绝对定位(默认 false )
* @property {Object} customStyle 定义需要用到的外部样式
* @example <uv-badge :type="type" :count="count"></uv-badge>
*/
export default {
name: 'uv-badge',
mixins: [mpMixin, mixin, props],
computed: {
// 是否将badge中心与父组件右上角重合
boxStyle() {
let style = {};
return style;
},
// 整个组件的样式
badgeStyle() {
const style = {}
if(this.color) {
style.color = this.color
}
if (this.bgColor && !this.inverted) {
style.backgroundColor = this.bgColor
}
if (this.absolute) {
style.position = 'absolute'
// 如果有设置offset参数
if(this.offset.length) {
// top和right分为为offset的第一个和第二个值,如果没有第二个值,则right等于top
const top = this.offset[0]
const right = this.offset[1] || top
style.top = this.$uv.addUnit(top)
style.right = this.$uv.addUnit(right)
}
}
return style
},
showValue() {
switch (this.numberType) {
case "overflow":
return Number(this.value) > Number(this.max) ? this.max + "+" : this.value
break;
case "ellipsis":
return Number(this.value) > Number(this.max) ? "..." : this.value
break;
case "limit":
return Number(this.value) > 999 ? Number(this.value) >= 9999 ?
Math.floor(this.value / 1e4 * 100) / 100 + "w" : Math.floor(this.value /
1e3 * 100) / 100 + "k" : this.value
break;
default:
return Number(this.value)
}
},
propsType(){
return this.type || 'error'
}
}
}
</script>
<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
$uv-badge-primary: $uv-primary !default;
$uv-badge-error: $uv-error !default;
$uv-badge-success: $uv-success !default;
$uv-badge-info: $uv-info !default;
$uv-badge-warning: $uv-warning !default;
$uv-badge-dot-radius: 100px !default;
$uv-badge-dot-size: 8px !default;
$uv-badge-dot-right: 4px !default;
$uv-badge-dot-top: 0 !default;
$uv-badge-text-font-size: 11px !default;
$uv-badge-text-right: 10px !default;
$uv-badge-text-padding: 2px 5px !default;
$uv-badge-text-align: center !default;
$uv-badge-text-color: #FFFFFF !default;
.uv-badge {
border-top-right-radius: $uv-badge-dot-radius;
border-top-left-radius: $uv-badge-dot-radius;
border-bottom-left-radius: $uv-badge-dot-radius;
border-bottom-right-radius: $uv-badge-dot-radius;
@include flex;
line-height: $uv-badge-text-font-size;
text-align: $uv-badge-text-align;
font-size: $uv-badge-text-font-size;
color: $uv-badge-text-color;
&--dot {
height: $uv-badge-dot-size;
width: $uv-badge-dot-size;
}
&--inverted {
font-size: 13px;
}
&--not-dot {
padding: $uv-badge-text-padding;
}
&--horn {
border-bottom-left-radius: 0;
}
&--primary {
background-color: $uv-badge-primary;
}
&--primary--inverted {
color: $uv-badge-primary;
}
&--error {
background-color: $uv-badge-error;
}
&--error--inverted {
color: $uv-badge-error;
}
&--success {
background-color: $uv-badge-success;
}
&--success--inverted {
color: $uv-badge-success;
}
&--info {
background-color: $uv-badge-info;
}
&--info--inverted {
color: $uv-badge-info;
}
&--warning {
background-color: $uv-badge-warning;
}
&--warning--inverted {
color: $uv-badge-warning;
}
}
</style>
{
"id": "uv-badge",
"displayName": "uv-badge 徽标数,数字角标 全面兼容小程序、nvue、vue2、vue3等多端",
"version": "1.0.2",
"description": "徽标数一般用于图标右上角显示未读的消息数量,提示用户点击,有圆点和圆包含文字两种形式。",
"keywords": [
"uv-badge",
"uvui",
"uv-ui",
"徽标数",
"数字角标"
],
"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": [
"uv-ui-tools"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
\ No newline at end of file
## Badge 徽标数
> **组件名:uv-badge**
该组件一般用于图标右上角显示未读的消息数量,提示用户点击,有圆点和圆包含文字两种形式。
### <a href="https://www.uvui.cn/components/badge.html" target="_blank">查看文档</a>
### [完整示例项目下载 | 关注更多组件](https://ext.dcloud.net.cn/plugin?name=uv-ui)
#### 如使用过程中有任何问题,或者您对uv-ui有一些好的建议,欢迎加入 uv-ui 交流群:<a href="https://ext.dcloud.net.cn/plugin?id=12287" target="_blank">uv-ui</a>、<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
## 1.0.15(2023-12-20)
1. 优化
## 1.0.14(2023-12-06)
1. 优化
## 1.0.13(2023-12-06)
1. 阻止事件冒泡处理
## 1.0.12(2023-10-19)
1. 增加后置插槽
## 1.0.11(2023-09-21)
1. 修复通过customStyle修改按钮宽度,组件中最外层节点不改变的问题
## 1.0.10(2023-09-15)
1. 按钮支持open-type="agreePrivacyAuthorization"
## 1.0.9(2023-09-11)
1. 增加参数iconSize,用于控制图标的大小
## 1.0.8(2023-09-10)
1. 修复多个按钮在一行宽度不正常的BUG
## 1.0.7(2023-09-07)
1. 修复warning颜色对应错误的BUG
## 1.0.6(2023-07-25)
1. 增加customTextStyle属性,方便自定义文字样式
## 1.0.5(2023-07-20)
1. 解决微信小程序动态设置hover-class点击态不消失的BUG
## 1.0.4(2023-06-29)
1. 修改上次更新出现nvue报错异常
## 1.0.3(2023-06-28)
修复:设置open-type="chooseAvatar"等值不生效的BUG
## 1.0.2(2023-06-01)
1. 修复按钮点击触发两次的BUG
## 1.0.1(2023-05-16)
1. 优化组件依赖,修改后无需全局引入,组件导入即可使用
2. 优化部分功能
## 1.0.0(2023-05-10)
uv-button 按钮
$uv-button-active-opacity:0.75 !default;
$uv-button-loading-text-margin-left:4px !default;
$uv-button-text-color: #FFFFFF !default;
$uv-button-text-plain-error-color:$uv-error !default;
$uv-button-text-plain-warning-color:$uv-warning !default;
$uv-button-text-plain-success-color:$uv-success !default;
$uv-button-text-plain-info-color:$uv-info !default;
$uv-button-text-plain-primary-color:$uv-primary !default;
.uv-button {
&--active {
opacity: $uv-button-active-opacity;
}
&--active--plain {
background-color: rgb(217, 217, 217);
}
&__loading-text {
margin-left:$uv-button-loading-text-margin-left;
}
&__text,
&__loading-text {
color:$uv-button-text-color;
}
&__text--plain--error {
color:$uv-button-text-plain-error-color;
}
&__text--plain--warning {
color:$uv-button-text-plain-warning-color;
}
&__text--plain--success{
color:$uv-button-text-plain-success-color;
}
&__text--plain--info {
color:$uv-button-text-plain-info-color;
}
&__text--plain--primary {
color:$uv-button-text-plain-primary-color;
}
}
\ No newline at end of file
export default {
props: {
// 是否细边框
hairline: {
type: Boolean,
default: true
},
// 按钮的预置样式,info,primary,error,warning,success
type: {
type: String,
default: 'info'
},
// 按钮尺寸,large,normal,small,mini
size: {
type: String,
default: 'normal'
},
// 按钮形状,circle(两边为半圆),square(带圆角)
shape: {
type: String,
default: 'square'
},
// 按钮是否镂空
plain: {
type: Boolean,
default: false
},
// 是否禁止状态
disabled: {
type: Boolean,
default: false
},
// 是否加载中
loading: {
type: Boolean,
default: false
},
// 加载中提示文字
loadingText: {
type: [String, Number],
default: ''
},
// 加载状态图标类型
loadingMode: {
type: String,
default: 'spinner'
},
// 加载图标大小
loadingSize: {
type: [String, Number],
default: 14
},
// 开放能力,具体请看uniapp稳定关于button组件部分说明
// https://uniapp.dcloud.io/component/button
openType: {
type: String,
default: ''
},
// 用于 <form> 组件,点击分别会触发 <form> 组件的 submit/reset 事件
// 取值为submit(提交表单),reset(重置表单)
formType: {
type: String,
default: ''
},
// 打开 APP 时,向 APP 传递的参数,open-type=launchApp时有效
// 只微信小程序、QQ小程序有效
appParameter: {
type: String,
default: ''
},
// 指定是否阻止本节点的祖先节点出现点击态,微信小程序有效
hoverStopPropagation: {
type: Boolean,
default: true
},
// 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文。只微信小程序有效
lang: {
type: String,
default: 'en'
},
// 会话来源,open-type="contact"时有效。只微信小程序有效
sessionFrom: {
type: String,
default: ''
},
// 会话内消息卡片标题,open-type="contact"时有效
// 默认当前标题,只微信小程序有效
sendMessageTitle: {
type: String,
default: ''
},
// 会话内消息卡片点击跳转小程序路径,open-type="contact"时有效
// 默认当前分享路径,只微信小程序有效
sendMessagePath: {
type: String,
default: ''
},
// 会话内消息卡片图片,open-type="contact"时有效
// 默认当前页面截图,只微信小程序有效
sendMessageImg: {
type: String,
default: ''
},
// 是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,
// 用户点击后可以快速发送小程序消息,open-type="contact"时有效
showMessageCard: {
type: Boolean,
default: true
},
// 额外传参参数,用于小程序的data-xxx属性,通过target.dataset.name获取
dataName: {
type: String,
default: ''
},
// 节流,一定时间内只能触发一次
throttleTime: {
type: [String, Number],
default: 0
},
// 按住后多久出现点击态,单位毫秒
hoverStartTime: {
type: [String, Number],
default: 0
},
// 手指松开后点击态保留时间,单位毫秒
hoverStayTime: {
type: [String, Number],
default: 200
},
// 按钮文字,之所以通过props传入,是因为slot传入的话
// nvue中无法控制文字的样式
text: {
type: [String, Number],
default: ''
},
// 按钮图标
icon: {
type: String,
default: ''
},
// 按钮图标大小
iconSize: {
type: [String, Number],
default: ''
},
// 按钮图标颜色
iconColor: {
type: String,
default: '#000000'
},
// 按钮颜色,支持传入linear-gradient渐变色
color: {
type: String,
default: ''
},
// 自定义按钮文本样式
customTextStyle: {
type: [Object,String],
default: ''
},
...uni.$uv?.props?.button
}
}
This diff is collapsed.
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
// nvue下hover-class无效
$uv-button-before-top:50% !default;
$uv-button-before-left:50% !default;
$uv-button-before-width:100% !default;
$uv-button-before-height:100% !default;
$uv-button-before-transform:translate(-50%, -50%) !default;
$uv-button-before-opacity:0 !default;
$uv-button-before-background-color:#000 !default;
$uv-button-before-border-color:#000 !default;
$uv-button-active-before-opacity:.15 !default;
$uv-button-icon-margin-left:4px !default;
$uv-button-plain-uv-button-info-color:$uv-info;
$uv-button-plain-uv-button-success-color:$uv-success;
$uv-button-plain-uv-button-error-color:$uv-error;
$uv-button-plain-uv-button-warning-color:$uv-warning;
.uv-button-wrapper {
position: relative;
&--dis {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 9;
}
}
.uv-button {
width: 100%;
&__text {
white-space: nowrap;
line-height: 1;
}
&:before {
position: absolute;
top:$uv-button-before-top;
left:$uv-button-before-left;
width:$uv-button-before-width;
height:$uv-button-before-height;
border: inherit;
border-radius: inherit;
transform:$uv-button-before-transform;
opacity:$uv-button-before-opacity;
content: " ";
background-color:$uv-button-before-background-color;
border-color:$uv-button-before-border-color;
}
&--active {
&:before {
opacity: .15
}
}
&__icon+&__text:not(:empty),
&__loading-text {
margin-left:$uv-button-icon-margin-left;
}
&--plain {
&.uv-button--primary {
color: $uv-primary;
}
}
&--plain {
&.uv-button--info {
color:$uv-button-plain-uv-button-info-color;
}
}
&--plain {
&.uv-button--success {
color:$uv-button-plain-uv-button-success-color;
}
}
&--plain {
&.uv-button--error {
color:$uv-button-plain-uv-button-error-color;
}
}
&--plain {
&.uv-button--warning {
color:$uv-button-plain-uv-button-warning-color;
}
}
}
{
"id": "uv-button",
"displayName": "uv-button 按钮 全面兼容vue3+2、app、h5、小程序等多端",
"version": "1.0.15",
"description": "按钮组件内部实现以uni-app的button组件为基础,进行二次封装,灵活配置,功能齐全,兼容全端。",
"keywords": [
"uv-button",
"uvui",
"uv-ui",
"button",
"按钮"
],
"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": [
"uv-ui-tools",
"uv-loading-icon",
"uv-icon"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
\ No newline at end of file
## Button 按钮
> **组件名:uv-button**
该组件内部实现以`uni-app``button`组件为基础,进行二次封装,灵活配置,功能齐全,兼容全端。灵活配置,内置状态设置,开箱即用。
# <a href="https://www.uvui.cn/components/button.html" target="_blank">查看文档</a>
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>(请不要 下载插件ZIP)</small>
### [更多插件,请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
![image](https://mp-a667b617-c5f1-4a2d-9a54-683a67cff588.cdn.bspapp.com/uv-ui/banner.png)
</a>
#### 如使用过程中有任何问题反馈,或者您对uv-ui有一些好的建议,欢迎加入uv-ui官方交流群:<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
\ No newline at end of file
## 1.0.6(2023-11-03)
1. **该版本不再维护**,推荐使用新版本[https://ext.dcloud.net.cn/plugin?name=uv-calendars](https://ext.dcloud.net.cn/plugin?name=uv-calendars)
## 1.0.5(2023-07-02)
uv-calendar 由于弹出层uv-popup的修改,打开和关闭方法更改,详情参考文档:https://www.uvui.cn/components/calendar.html
## 1.0.4(2023-06-15)
1. formatter格式化中增加topInfo参数
## 1.0.3(2023-06-08)
1. 增加点击日期change回调
2. 优化
## 1.0.2(2023-06-05)
1. 修改多个时间选择的时候存在反选的BUG
## 1.0.1(2023-05-16)
1. 优化组件依赖,修改后无需全局引入,组件导入即可使用
2. 优化部分功能
## 1.0.0(2023-05-10)
uv-calendar 日历
This diff is collapsed.
<template>
<view class="uv-calendar-header uv-border-bottom">
<text
class="uv-calendar-header__title"
v-if="showTitle"
>{{ title }}</text>
<text
class="uv-calendar-header__subtitle"
v-if="showSubtitle"
>{{ subtitle }}</text>
<view class="uv-calendar-header__weekdays">
<text class="uv-calendar-header__weekdays__weekday"></text>
<text class="uv-calendar-header__weekdays__weekday"></text>
<text class="uv-calendar-header__weekdays__weekday"></text>
<text class="uv-calendar-header__weekdays__weekday"></text>
<text class="uv-calendar-header__weekdays__weekday"></text>
<text class="uv-calendar-header__weekdays__weekday"></text>
<text class="uv-calendar-header__weekdays__weekday"></text>
</view>
</view>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
export default {
name: 'uv-calendar-header',
mixins: [mpMixin, mixin],
props: {
// 标题
title: {
type: String,
default: ''
},
// 副标题
subtitle: {
type: [String,null],
default: ''
},
// 是否显示标题
showTitle: {
type: Boolean,
default: true
},
// 是否显示副标题
showSubtitle: {
type: Boolean,
default: true
},
},
data() {
return {
}
},
methods: {
name() {
}
},
}
</script>
<style lang="scss" scoped>
$show-border: 1;
$show-border-bottom: 1;
@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
.uv-calendar-header {
padding-bottom: 4px;
&__title {
font-size: 16px;
color: $uv-main-color;
text-align: center;
height: 42px;
line-height: 42px;
font-weight: bold;
}
&__subtitle {
font-size: 14px;
color: $uv-main-color;
height: 40px;
text-align: center;
line-height: 40px;
font-weight: bold;
}
&__weekdays {
@include flex;
justify-content: space-between;
&__weekday {
font-size: 13px;
color: $uv-main-color;
line-height: 30px;
flex: 1;
text-align: center;
}
}
}
</style>
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
{
"id": "uv-calendar",
"displayName": "uv-calendar 日历 全面兼容vue3+2、app、h5、小程序等多端",
"version": "1.0.6",
"description": "日历组件用于单个选择日期,范围选择日期等,日历被包裹在底部弹起的容器中,灵活配置,功能齐全,兼容全端。强烈推荐使用最新版日历组件,在下方跳入。",
"keywords": [
"uv-calendar",
"uvui",
"uv-ui",
"calendar",
"日历"
],
"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": [
"uv-ui-tools",
"uv-button",
"uv-popup"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
\ No newline at end of file
## Calendar 日历
> **组件名:uv-calendar**
此组件用于单个选择日期,范围选择日期等,日历被包裹在底部弹起的容器中。灵活配置,功能齐全,兼容全端。
## 温馨提示:该组件不再更新,强烈推荐使用最新版日历组件:[https://www.uvui.cn/components/calendars.html](https://www.uvui.cn/components/calendars.html)。基于 `uv-ui` 插件市场首款多功能日历组件,不仅可以查看、选择日期,还可以选择任意范围内的日期、打点操作、自定义主题颜色、自定义文案、农历显示等。追求的就是完美。
# <a href="https://www.uvui.cn/components/calendar.html" target="_blank">查看文档</a>
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>(请不要 下载插件ZIP)</small>
### [更多插件,请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
![image](https://mp-a667b617-c5f1-4a2d-9a54-683a67cff588.cdn.bspapp.com/uv-ui/banner.png)
</a>
#### 如使用过程中有任何问题反馈,或者您对uv-ui有一些好的建议,欢迎加入uv-ui官方交流群:<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
{
"uv-calender.ok": "ok",
"uv-calender.cancel": "cancel",
"uv-calender.today": "today",
"uv-calender.MON": "MON",
"uv-calender.TUE": "TUE",
"uv-calender.WED": "WED",
"uv-calender.THU": "THU",
"uv-calender.FRI": "FRI",
"uv-calender.SAT": "SAT",
"uv-calender.SUN": "SUN"
}
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
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