提交 b3950100 编写于 作者: DCloud_JSON's avatar DCloud_JSON

兼容vue3...待续未完成

上级 f9ef3751
......@@ -44,20 +44,4 @@
<style>
/*每个页面公共css */
/* #ifndef APP-NVUE */
view,
scroll-view,
text,
image,
switch,
navigator,
icons {
display: flex;
box-sizing: border-box;
flex-direction: column;
}
scroll-view {
-webkit-overflow-scrolling: touch;
}
/* #endif */
</style>
view,
scroll-view,
text,
image,
switch,
navigator,
icons {
display: flex !important;
box-sizing: border-box;
flex-direction: column;
}
scroll-view {
-webkit-overflow-scrolling: touch;
}
......@@ -342,7 +342,8 @@
}
</script>
<style scoped>
<style lang="scss" scoped>
@import '@/common/all-flex.css';
.quick-login-box {
flex-direction: row;
width: 750rpx;
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<!--preload-links-->
<!--app-context-->
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/main.js"></script>
</body>
</html>
import Vue from 'vue'
import App from './App'
import store from './store/index.js';
import openApp from './common/openApp.js';
import store from './store'
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
openApp();
Vue.prototype.$store = store
App.mpType = 'app'
const app = new Vue({
...App,
store
store,
...App
})
app.$mount()
// #endif
// #ifdef VUE3
import { createApp } from 'vue'
const app = createApp(App,{})
app.use(store)
app.mount('#app')
// #endif
\ No newline at end of file
{
"name": "uni-starter",
"appid": "请点击重新获取",
"description": "云端一体应用快速开发模版",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
"app-plus": {
"privacy": {
"prompt": "template",
"template": {
"title": "服务协议和隐私政策",
"message": "  请你务必审慎阅读、充分理解“服务协议”和“隐私政策”各条款,包括但不限于:为了更好的向你提供服务,我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能。<br/>  你可阅读<a href=\"https://ask.dcloud.net.cn/protocol.html\">《服务协议》</a>和<a href=\"https://ask.dcloud.net.cn/protocol.html\">《隐私政策》</a>了解详细信息。如果你同意,请点击下面按钮开始接受我们的服务。",
"buttonAccept": "同意",
"buttonRefuse": "暂不同意"
}
},
"compatible": {
"ignoreVersion": true
},
"usingComponents": true,
"nvueStyleCompiler": "uni-app",
"compilerVersion": 3,
"splashscreen": {
"alwaysShowBeforeRender": true,
"waiting": true,
"autoclose": true,
"delay": 0
},
"modules": {
"Fingerprint": {
},
"Share": {
},
"OAuth": {
},
"FaceID": {
},
"Push": {
}
},
"distribute": {
"android": {
"permissions": [
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.USE_FINGERPRINT\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
],
"abiFilters": [
"armeabi-v7a",
"arm64-v8a",
"x86"
]
},
"ios": {
"capabilities": {
"entitlements": {
"com.apple.developer.associated-domains": [
"applinks:static-76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e.bspapp.com"
]
}
}
},
"sdkConfigs": {
"oauth": {
"apple": {
},
"weixin": {
"appid": "wxffdd8fa6ec4ef2a0",
"appsecret": "",
"UniversalLinks": "https://static-76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e.bspapp.com/uni-universallinks/__UNI__03B096E"
},
"univerify": {
}
"name" : "uni-starter",
"appid" : "__UNI__03B096E",
"description" : "云端一体应用快速开发模版",
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
"app-plus" : {
"privacy" : {
"prompt" : "template",
"template" : {
"title" : "服务协议和隐私政策",
"message" : "  请你务必审慎阅读、充分理解“服务协议”和“隐私政策”各条款,包括但不限于:为了更好的向你提供服务,我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能。<br/>  你可阅读<a href=\"https://ask.dcloud.net.cn/protocol.html\">《服务协议》</a>和<a href=\"https://ask.dcloud.net.cn/protocol.html\">《隐私政策》</a>了解详细信息。如果你同意,请点击下面按钮开始接受我们的服务。",
"buttonAccept" : "同意",
"buttonRefuse" : "暂不同意"
}
},
"compatible" : {
"ignoreVersion" : true
},
"ad": {
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
"share": {
"weixin": {
"appid": "wxffdd8fa6ec4ef2a0",
"UniversalLinks": "https://static-76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e.bspapp.com/uni-universallinks/__UNI__03B096E"
}
"modules" : {
"Fingerprint" : {},
"Share" : {},
"OAuth" : {},
"FaceID" : {},
"Push" : {}
},
"geolocation": {
"distribute" : {
"android" : {
"permissions" : [
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.USE_FINGERPRINT\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
],
"abiFilters" : [ "armeabi-v7a", "arm64-v8a", "x86" ]
},
"ios" : {
"capabilities" : {
"entitlements" : {
"com.apple.developer.associated-domains" : [ "applinks:static-76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e.bspapp.com" ]
}
}
},
"sdkConfigs" : {
"oauth" : {
"apple" : {},
"weixin" : {
"appid" : "wxffdd8fa6ec4ef2a0",
"appsecret" : "",
"UniversalLinks" : "https://static-76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e.bspapp.com/uni-universallinks/__UNI__03B096E"
},
"univerify" : {}
},
"ad" : {},
"share" : {
"weixin" : {
"appid" : "wxffdd8fa6ec4ef2a0",
"UniversalLinks" : "https://static-76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e.bspapp.com/uni-universallinks/__UNI__03B096E"
}
},
"geolocation" : {},
"push" : {
"unipush" : {}
},
"payment" : {}
}
},
"push": {
"unipush": {
}
"nvueLaunchMode" : ""
},
"quickapp" : {},
"mp-weixin" : {
"appid" : "wx81dbb061d2258234",
"setting" : {
"urlCheck" : false,
"es6" : false
},
"payment": {
}
}
"usingComponents" : true,
"betterScopedSlots" : true
},
"mp-alipay" : {
"usingComponents" : true
},
"mp-baidu" : {
"usingComponents" : true
},
"mp-toutiao" : {
"usingComponents" : true
},
"uniStatistics" : {
"enable" : false
},
"nvueLaunchMode": ""
},
"quickapp": {
},
"mp-weixin": {
"appid": "",
"setting": {
"urlCheck": false,
"es6": false
"h5" : {
"template" : ""
},
"usingComponents": true,
"betterScopedSlots": true
},
"mp-alipay": {
"usingComponents": true
},
"mp-baidu": {
"usingComponents": true
},
"mp-toutiao": {
"usingComponents": true
},
"uniStatistics": {
"enable": false
},
"h5": {
"template": ""
},
"_spaceID": "76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e"
}
\ No newline at end of file
"_spaceID" : "76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e",
"vueVersion" : "3"
}
......@@ -203,14 +203,14 @@
background-color: #fff;
}
/* #ifndef APP-NVUE */
/* #ifndef APP-NVUE || VUE3*/
/deep/
/* #endif */
.uni-searchbar__box {
border-width: 0;
}
/* #ifndef APP-NVUE */
/* #ifndef APP-NVUE || VUE3 */
/deep/
/* #endif */
.uni-input-placeholder {
......
......@@ -46,7 +46,7 @@
</template>
<script>
import uniShare from 'uni_modules/uni-share/js_sdk/uni-share.js';
import uniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js';
const db = uniCloud.database();
const readNewsLog = db.collection('read-news-log')
......
......@@ -4,8 +4,11 @@
<statusBar></statusBar>
<!-- #endif -->
<!-- 搜索功能 -->
<uni-search-bar @click="searchClick" class="uni-search-box" v-model="keyword" ref="searchBar" radius="100"
cancelButton="none" disabled />
<view @click.capture="searchClick">
<uni-search-bar class="uni-search-box" v-model="keyword" ref="searchBar" radius="100"
cancelButton="none" />
</view>
<unicloud-db ref='udb' v-slot:default="{data,pagination,hasMore, loading, error, options}" @error="onqueryerror"
:where="where" collection="opendb-news-articles,uni-id-users" :page-size="10"
field="avatar,title,last_modify_date,user_id.username">
......@@ -18,18 +21,20 @@
<template v-slot:header>
<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
</template>
<!-- 通过body插槽定义布局 -->
<view slot="body" class="main">
<text class="title">{{ item.title }}</text>
<view class="info">
<text class="author">{{item.user_id[0].username}}</text>
<uni-dateformat class="last_modify_date" :date="item.last_modify_date" format="yyyy-MM-dd"
:threshold="[60000, 2592000000]" />
</view>
</view>
<!-- 通过body插槽定义布局 -->
<template v-slot:body>
<view class="main">
<text class="title">{{item.title}}</text>
<view class="info">
<text class="author">{{item.user_id[0].username}}</text>
<uni-dateformat class="last_modify_date" :date="item.last_modify_date" format="yyyy-MM-dd"
:threshold="[60000, 2592000000]" />
</view>
</view>
</template>
</uni-list-item>
<uni-list-item>
<template slot="body">
<template v-slot:body>
<uni-load-state @networkResume="refresh" :state="{data,pagination,hasMore, loading, error}">
</uni-load-state>
</template>
......@@ -77,18 +82,11 @@
cdbRef = this.$refs.udb
},
async onShow() {
console.log(999,getApp().globalData.searchText);
this.keyword = getApp().globalData.searchText
getApp().globalData.searchText = ''
if (this.keyword) {
// #ifdef APP-PLUS
if (!currentWebview) {
let pages = getCurrentPages();
currentWebview = pages[pages.length - 1].$getAppWebview();
}
// 设置 searchInput的 text
currentWebview.setTitleNViewSearchInputText(this.keyword)
// #endif
}
//这里仅演示如何,在onShow生命周期获取设备位置,并在设备或者应用没有权限时自动引导。设置完毕自动重新获取。
......@@ -124,6 +122,9 @@
uni.stopPullDownRefresh()
})
console.log('refresh');
},
onqueryerror(e){
console.log(e);
}
},
onPullDownRefresh() {
......
......@@ -64,10 +64,7 @@
<!-- 搜索联想 -->
<view class="search-associative" :style="{marginTop:statusBarHeight}" v-if="associativeShow">
<uni-list>
<template v-for="(item,index) in associativeList">
<uni-list-item :key="item._id" :ellipsis="1" :title="item.title" @click="associativeClick(item)" show-extra-icon
clickable :extra-icon="{size:18,color:iconColor,type:'search'}" />
</template>
<uni-list-item v-for="(item,index) in associativeList" :key="item._id" :ellipsis="1" :title="item.title" @click="associativeClick(item)" show-extra-icon clickable :extra-icon="{size:18,color:iconColor,type:'search'}" />
</uni-list>
</view>
</view>
......@@ -152,10 +149,11 @@
this.db = uniCloud.database();
this.searchLogDb = this.db.collection(this.searchLogDbName);
this.mallGoodsDb = this.db.collection(this.mallGoodsDbName);
// #ifndef H5
uni.onKeyboardHeightChange((res) => {
this.keyBoardPopup = res.height !== 0;
})
// #endif
this.searchText = getApp().globalData.searchText;
},
......@@ -378,7 +376,7 @@
}
/* #ifdef APP-PLUS */
/* #ifndef APP-NVUE */
/* #ifndef APP-NVUE || VUE3*/
/deep/
/* #endif */
.uni-searchbar {
......@@ -387,14 +385,14 @@
/* #endif */
/* #ifndef APP-NVUE */
/* #ifndef APP-NVUE || VUE3*/
/deep/
/* #endif */
.uni-searchbar__box {
border-width: 0;
}
/* #ifndef APP-NVUE */
/* #ifndef APP-NVUE || VUE3 */
/deep/
/* #endif */
.uni-input-placeholder {
......
......@@ -19,7 +19,7 @@
</view>
</template>
<script>
import uniShare from 'uni_modules/uni-share/js_sdk/uni-share.js';
import uniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js';
export default {
onLoad() {
// #ifdef APP-PLUS
......@@ -115,6 +115,7 @@ import uniShare from 'uni_modules/uni-share/js_sdk/uni-share.js';
}
</script>
<style lang="scss" scoped>
@import '@/common/all-flex.css';
.about {
width: 750upx;
flex-direction: column;
......
.content{
padding:0 50rpx;
width: 750rpx;
flex: 1;
}
.input-box{
padding:0 15px;
margin-bottom: 10px;
background-color: #F8F8F8;
border-radius: 6px;
font-size: 28rpx;
}
.get-code{
margin: 0;
margin-top:15px;
background-color: #007aff;
color: #FFFFFF;
}
.input-box,.get-code{
height: 45px;
line-height: 45px;
}
.title{
text-align: center;
padding-bottom: 5px;
}
.tip{
color: #666666;
font-size: 26rpx;
margin: 6px 0;
}
.easyinput{
background-color: #F8F8F8;
border-radius: 6rpx;
}
.send-btn{
width: 100%;
margin-top:15px;
border-radius: 6rpx;
}
.link{
color: #04498c;
}
\ No newline at end of file
@import '@/common/all-flex.css';
.content {
padding: 0 50rpx;
width: 750rpx;
flex: 1;
}
.input-box {
padding: 0 15px;
margin-bottom: 10px;
background-color: #F8F8F8;
border-radius: 6px;
font-size: 28rpx;
}
.get-code {
margin: 0;
margin-top: 15px;
background-color: #007aff;
color: #FFFFFF;
}
.input-box,
.get-code {
height: 45px;
line-height: 45px;
}
.title {
text-align: center;
padding-bottom: 5px;
}
.tip {
color: #666666;
font-size: 26rpx;
margin: 6px 0;
}
.easyinput {
background-color: #F8F8F8;
border-radius: 6rpx;
}
.send-btn {
width: 100%;
margin-top: 15px;
border-radius: 6rpx;
}
.link {
color: #04498c;
}
......@@ -2,20 +2,20 @@
<view class="content">
<!-- 顶部文字 -->
<text class="title">登录后即可展示自己</text>
<!-- 登录框 -->
<view v-if="['apple','weixin'].includes(type)" class="quickLogin">
<image @click="quickLogin" :src="imgSrc" mode="widthFix" class="quickLoginBtn"></image>
<uni-agreements @setAgree="agree = $event"></uni-agreements>
</view>
<template v-else>
<input type="number" class="input-box" :inputBorder="false" v-model="phone" maxlength="11"
placeholder="请输入手机号" />
<uni-agreements @setAgree="agree = $event"></uni-agreements>
<button class="get-code" :disabled="!isPhone" :type="isPhone?'primary':'default'"
@click="sendShortMsg">获取短信验证码</button>
<text class="tip">未注册的手机号验证通过后将自动注册</text>
<!-- 登录框 -->
<view v-if="['apple','weixin'].includes(type)" class="quickLogin">
<image @click="quickLogin" :src="imgSrc" mode="widthFix" class="quickLoginBtn"></image>
<uni-agreements @setAgree="agree = $event"></uni-agreements>
</view>
<template v-else>
<input type="number" class="input-box" :inputBorder="false" v-model="phone" maxlength="11"
placeholder="请输入手机号" />
<uni-agreements @setAgree="agree = $event"></uni-agreements>
<button class="get-code" :disabled="!isPhone" :type="isPhone?'primary':'default'"
@click="sendShortMsg">获取短信验证码</button>
<text class="tip">未注册的手机号验证通过后将自动注册</text>
</template>
<!-- 快捷登录按钮弹窗 -->
<uni-quick-login :agree="agree" ref="uniQuickLogin"></uni-quick-login>
</view>
......@@ -25,26 +25,26 @@
let currentWebview; //是否一键登录优先
export default {
data() {
return {
type:"",
return {
type: "",
phone: "",
agree: false
}
},
computed: {
loginConfig() {
return getApp().globalData.config.router.login
computed: {
loginConfig() {
return getApp().globalData.config.router.login
},
isPhone() {
return /^1\d{10}$/.test(this.phone);
},
imgSrc(){
return '/static/login-index/'+this.type+'.png'
},
imgSrc() {
return '/static/login-index/' + this.type + '.png'
}
},
onLoad(e) {
this.type = e.type
onLoad(e) {
this.type = e.type
//是否优先启动一键登录。即:页面一加载就启动一键登录
//#ifdef APP-PLUS
if (this.type == "univerify") {
......@@ -58,7 +58,7 @@
},
onReady() {
//#ifdef APP-PLUS
if (this.type == "univerify") {
if (this.type == "univerify") {
this.type == loginConfig[1]
// console.log('开始一键登录');
setTimeout(() => {
......@@ -78,9 +78,9 @@
}
//#endif
},
methods: {
quickLogin(){
this.$refs.uniQuickLogin.login_before(this.type)
methods: {
quickLogin() {
this.$refs.uniQuickLogin.login_before(this.type)
},
sendShortMsg() {
if (!this.agree) {
......@@ -108,16 +108,18 @@
}
</script>
<style lang="scss">
@import url("../common/login-page.css");
.quickLogin{
width: 650rpx;
height: 350px;
align-items: center;
justify-content: center;
}
.quickLoginBtn{
margin:20px 0;
width: 450rpx;
<style lang="scss" scoped>
@import '@/common/all-flex.css';
@import url("../common/login-page.css");
.quickLogin {
width: 650rpx;
height: 350px;
align-items: center;
justify-content: center;
}
.quickLoginBtn {
margin: 20px 0;
width: 450rpx;
}
</style>
\ No newline at end of file
</style>
......@@ -2,11 +2,11 @@
<view class="content">
<!-- 顶部文字 -->
<text class="title">用户名密码登录</text>
<input class="input-box" :inputBorder="false" v-model="username" placeholder="请输入手机号/用户名"></input>
<input type="password" class="input-box" :inputBorder="false" v-model="password" placeholder="请输入密码"></input>
<input class="input-box" :inputBorder="false" v-model="username" placeholder="请输入手机号/用户名"/>
<input type="password" class="input-box" :inputBorder="false" v-model="password" placeholder="请输入密码"/>
<view class="captcha-box" v-if="captchaBase64">
<image class="captcha-img" @click="createCaptcha" :src="captchaBase64" mode="widthFix"></image>
<input type="text" class="input-box captcha" :inputBorder="false" v-model="captcha" placeholder="请输入验证码"></input>
<input type="text" class="input-box captcha" :inputBorder="false" v-model="captcha" placeholder="请输入验证码"/>
</view>
<uni-agreements @setAgree="agree = $event"></uni-agreements>
<button class="send-btn" :disabled="!canLogin" :type="canLogin?'primary':'default'"
......
......@@ -5,12 +5,14 @@
field="title,_id" :page-size="10">
<uni-list>
<uni-list-item v-for="(item, index) in data" :key="index" :clickable="true"
@click="handleItemClick(item)">
<view slot="body">
<text>{{item.title}}</text>
<uni-dateformat class="article-date" :date="readNewsLog[index].last_time" format="yyyy-MM-dd hh:mm"
:threshold="[0, 0]" />
</view>
@click="handleItemClick(item)">
<template v-slot:body>
<view class="item">
<text>{{item.title}}</text>
<uni-dateformat class="article-date" :date="readNewsLog[index].last_time" format="yyyy-MM-dd hh:mm"
:threshold="[0, 0]" />
</view>
</template>
</uni-list-item>
</uni-list>
<uni-load-state @networkResume="refreshData" :state="{data,pagination,hasMore, loading, error}"></uni-load-state>
......@@ -62,7 +64,11 @@
}
</script>
<style>
<style>
.item{
display: flex;
flex-direction: column;
}
.article-date {
color: #C8C7CC;
}
......
......@@ -109,7 +109,7 @@ function setting(){
}
}
module.exports = {
export default {
isOn: isTurnedOnPush,
iosSetting: settingInIos,
on: turnOnPush,
......
......@@ -278,13 +278,14 @@
.mt10 {
margin-top: 10px;
}
/* #ifndef APP-NVUE || VUE3 */
.content /deep/ .uni-list {
background-color: #F9F9F9;
}
}
.content /deep/ .uni-list-item--disabled,.list-item {
height: 50px;
margin-bottom: 1px;
}
/* #endif */
.content /deep/ .uni-list-item--disabled,.list-item {
height: 50px;
margin-bottom: 1px;
}
</style>
\ No newline at end of file
<template>
<view class="center">
<uni-sign-in ref="signIn"></uni-sign-in>
<view class="center">
<uni-sign-in ref="signIn"></uni-sign-in>
<view class="userInfo" @click.capture="toUserInfo">
<uni-file-picker v-if="userInfo.avatar_file" v-model="userInfo.avatar_file"
fileMediatype="image" :del-icon="false" return-type="object" :image-styles="listStyles" disablePreview
disabled />
<uni-file-picker v-if="userInfo.avatar_file" v-model="userInfo.avatar_file"
fileMediatype="image" :del-icon="false" return-type="object" :image-styles="listStyles" disablePreview
disabled />
<image v-else class="logo-img" src="/static/uni-center/defaultAvatarUrl.png"></image>
<view class="logo-title">
<text class="uer-name">{{userInfo.nickname||userInfo.username||userInfo.mobile||'未登录'}}</text>
......@@ -36,7 +36,7 @@
} from 'vuex';
import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update';
import callCheckVersion from '@/uni_modules/uni-upgrade-center-app/utils/call-check-version';
import uniShare from 'uni_modules/uni-share/js_sdk/uni-share.js';
import uniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js';
const db = uniCloud.database();
export default {
......@@ -60,11 +60,11 @@
}
],
ucenterList: [
[
{
"title": '签到有奖',
"event": 'signIn',
"icon": "compose"
[
{
"title": '签到有奖',
"event": 'signIn',
"icon": "compose"
},
// #ifdef APP-PLUS
{
......@@ -83,13 +83,13 @@
"to": '',
"event": 'getScore',
"icon": "paperplane"
}
// #ifdef APP-PLUS
,{
"title": '分销推荐',
"event": 'share',
"icon": "redo"
}
}
// #ifdef APP-PLUS
,{
"title": '分销推荐',
"event": 'share',
"icon": "redo"
}
// #endif
],
[{
......@@ -106,16 +106,16 @@
"to": '/pages/ucenter/about/about',
"icon": "info"
}]
],
listStyles: {
"height": "150rpx", // 边框高度
"width": "150rpx", // 边框宽度
"border": { // 如果为 Boolean 值,可以控制边框显示与否
"color": "#eee", // 边框颜色
"width": "1px", // 边框宽度
"style": "solid", // 边框样式
"radius": "100%" // 边框圆角,支持百分比
}
],
listStyles: {
"height": "150rpx", // 边框高度
"width": "150rpx", // 边框宽度
"border": { // 如果为 Boolean 值,可以控制边框显示与否
"color": "#eee", // 边框颜色
"width": "1px", // 边框宽度
"style": "solid", // 边框样式
"radius": "100%" // 边框圆角,支持百分比
}
}
}
},
......@@ -154,9 +154,9 @@
uni.navigateTo({
url: "/pages/ucenter/settings/settings"
})
},
signIn(){ //签到
this.$refs.signIn.open()
},
signIn(){ //签到
this.$refs.signIn.open()
},
/**
* 个人中心项目列表点击事件
......@@ -220,8 +220,8 @@
uni.showLoading({
mask: true
})
db.collection("uni-id-scores").where('"user_id" == $env.uid').field('score,balance').get().then((res) => {
uni.hideLoading()
db.collection("uni-id-scores").where('"user_id" == $env.uid').field('score,balance').get().then((res) => {
uni.hideLoading()
console.log(res);
const data = res.result.data[0];
let msg = '';
......@@ -238,7 +238,7 @@
data: {
action: 'getUserInviteCode'
}
})
})
console.log(result);
let myInviteCode = result.myInviteCode || result.userInfo.my_invite_code
console.log(myInviteCode);
......@@ -247,69 +247,70 @@
logo,
company,
slogan
} = this.appConfig.about
// #ifdef APP-PLUS
uniShare({
content: { //公共的分享类型(type)、链接(herf)、标题(title)、summary(描述)、imageUrl(缩略图)
type: 0,
href: this.appConfig.h5.url +
`/#/pages/ucenter/invite/invite?code=uniInvitationCode:${myInviteCode}`,
title: appName,
summary: slogan,
imageUrl: logo + '?x-oss-process=image/resize,m_fill,h_100,w_100' //压缩图片解决,在ios端分享图过大导致的图片失效问题
},
menus: [{
"img": "/static/app-plus/sharemenu/wechatfriend.png",
"text": "微信好友",
"share": {
"provider": "weixin",
"scene": "WXSceneSession"
}
},
{
"img": "/static/app-plus/sharemenu/wechatmoments.png",
"text": "微信朋友圈",
"share": {
"provider": "weixin",
"scene": "WXSenceTimeline"
}
},
{
"img": "/static/app-plus/sharemenu/weibo.png",
"text": "微博",
"share": {
"provider": "sinaweibo"
}
},
{
"img": "/static/app-plus/sharemenu/qq.png",
"text": "QQ",
"share": {
"provider": "qq"
}
},
{
"img": "/static/app-plus/sharemenu/copyurl.png",
"text": "复制",
"share": "copyurl"
},
{
"img": "/static/app-plus/sharemenu/more.png",
"text": "更多",
"share": "shareSystem"
}
],
cancelText: "取消分享",
}, e => { //callback
console.log(e);
})
} = this.appConfig.about
// #ifdef APP-PLUS
uniShare({
content: { //公共的分享类型(type)、链接(herf)、标题(title)、summary(描述)、imageUrl(缩略图)
type: 0,
href: this.appConfig.h5.url +
`/#/pages/ucenter/invite/invite?code=uniInvitationCode:${myInviteCode}`,
title: appName,
summary: slogan,
imageUrl: logo + '?x-oss-process=image/resize,m_fill,h_100,w_100' //压缩图片解决,在ios端分享图过大导致的图片失效问题
},
menus: [{
"img": "/static/app-plus/sharemenu/wechatfriend.png",
"text": "微信好友",
"share": {
"provider": "weixin",
"scene": "WXSceneSession"
}
},
{
"img": "/static/app-plus/sharemenu/wechatmoments.png",
"text": "微信朋友圈",
"share": {
"provider": "weixin",
"scene": "WXSenceTimeline"
}
},
{
"img": "/static/app-plus/sharemenu/weibo.png",
"text": "微博",
"share": {
"provider": "sinaweibo"
}
},
{
"img": "/static/app-plus/sharemenu/qq.png",
"text": "QQ",
"share": {
"provider": "qq"
}
},
{
"img": "/static/app-plus/sharemenu/copyurl.png",
"text": "复制",
"share": "copyurl"
},
{
"img": "/static/app-plus/sharemenu/more.png",
"text": "更多",
"share": "shareSystem"
}
],
cancelText: "取消分享",
}, e => { //callback
console.log(e);
})
// #endif
}
}
}
</script>
<style>
<style lang="scss" scoped>
@import '@/common/all-flex.css';
/* #ifndef APP-PLUS-NVUE */
page {
background-color: #f8f8f8;
......@@ -375,7 +376,7 @@
color: #817f82;
}
.uni-grid .item /deep/ .uni-grid-item__box {
.uni-grid .item ::v-deep .uni-grid-item__box {
justify-content: center;
align-items: center;
}
......@@ -383,14 +384,14 @@
/*修改边线粗细示例*/
/* #ifndef APP-NVUE */
.center-list /deep/ .uni-list--border:after {
.center-list ::v-deep .uni-list--border:after {
-webkit-transform: scaleY(0.2);
transform: scaleY(0.2);
margin-left: 80rpx;
}
.center-list /deep/ .uni-list--border-top,
.center-list /deep/ .uni-list--border-bottom {
.center-list ::v-deep .uni-list--border-top,
.center-list ::v-deep .uni-list--border-bottom {
display: none;
}
......@@ -417,4 +418,4 @@
/* #endif */
background-color: #DD524D;
}
</style>
</style>
......@@ -81,11 +81,11 @@
padding: 50rpx;
padding-top: 10px;
}
/* #ifndef APP-NVUE || VUE3 */
.box /deep/ .uni-easyinput__content {
height: 50px;
}
/* #endif */
.input-box {
width: 100%;
margin-top: 16px;
......
......@@ -30,11 +30,11 @@
</view>
<view v-if="isShowPhotoBtn" @tap="uploadImage">
<slot name="photo" v-if="$slots.photo" />
<image v-else :src="require('./images/photo.svg')" />
<image v-else src="@/static/limeClipper/photo.svg" />
</view>
<view v-if="isShowRotateBtn" @tap="rotate">
<slot name="rotate" v-if="$slots.rotate" />
<image v-else :src="require('./images/rotate.svg')" data-type="inverse" />
<image v-else src="@/static/limeClipper/rotate.svg" data-type="inverse" />
</view>
<view v-if="isShowConfirmBtn" @tap="confirm">
<slot name="confirm" v-if="$slots.confirm" />
......@@ -47,7 +47,7 @@
</template>
<script>
import { pathToBase64, determineDirection, calcImageOffset, calcImageScale, calcImageSize, calcPythagoreanTheorem, clipTouchMoveOfCalculate, imageTouchMoveOfCalcOffset } from './utils';
import { determineDirection, calcImageOffset, calcImageScale, calcImageSize, calcPythagoreanTheorem, clipTouchMoveOfCalculate, imageTouchMoveOfCalcOffset } from './utils';
const cache = {}
export default {
// version: '0.6.3',
......
<template>
<view>
<uni-list>
<uni-list-item class="item">
<view slot="body" class="item">
<text>头像</text>
<uni-file-picker @click.native="uploadAvatarImg" @delete="removeAvatar" v-model="avatar_file"
fileMediatype="image" return-type="object" :image-styles="listStyles"
disabled />
</view>
<uni-list-item class="item">
<template v-slot:body>
<view class="item">
<text>头像</text>
<uni-file-picker @click.native="uploadAvatarImg" @delete="removeAvatar" v-model="avatar_file"
fileMediatype="image" return-type="object" :image-styles="listStyles" disabled />
</view>
</template>
</uni-list-item>
<uni-list-item class="item" @click="setNickname('')" title="昵称" :rightText="userInfo.nickname||'未设置'" link>
</uni-list-item>
......@@ -56,8 +57,8 @@
userInfo: 'user/info',
login: 'user/hasLogin'
}),
avatar_file(){
if(this.userInfo.avatar_file&&this.userInfo.avatar_file.url){
avatar_file() {
if (this.userInfo.avatar_file && this.userInfo.avatar_file.url) {
return this.userInfo.avatar_file
}
}
......@@ -156,7 +157,7 @@
this.$refs.dialog.open()
}
},
removeAvatar(){
removeAvatar() {
this.setAvatarFile({
"extname": "jpg",
"fileType": "image",
......@@ -165,7 +166,7 @@
"url": ""
})
},
setAvatarFile(avatar_file){
setAvatarFile(avatar_file) {
uni.showLoading({
title: '设置中',
mask: true
......@@ -175,12 +176,12 @@
avatar_file
}).then((res) => {
console.log(res);
if(avatar_file){
if (avatar_file) {
uni.showToast({
icon: 'none',
title: '设置成功'
})
}else{
} else {
uni.showToast({
icon: 'none',
title: '删除成功'
......@@ -207,19 +208,20 @@
resize: true
};
uni.chooseImage({
count: 1,crop,
count: 1,
crop,
success: async (res) => {
console.log(res);
let tempFile = res.tempFiles[0],
avatar_file = {
// #ifdef H5
extname:tempFile.name.split('.')[tempFile.name.split('.').length-1],
// #endif
// #ifndef H5
extname:tempFile.path.split('.')[tempFile.path.split('.').length-1]
// #endif
},
filePath = res.tempFilePaths[0]
avatar_file = {
// #ifdef H5
extname: tempFile.name.split('.')[tempFile.name.split('.').length - 1],
// #endif
// #ifndef H5
extname: tempFile.path.split('.')[tempFile.path.split('.').length - 1]
// #endif
},
filePath = res.tempFilePaths[0]
// #ifndef APP-PLUS
//非app端用前端组件剪裁头像,app端用内置的原生裁剪
filePath = await new Promise((callback) => {
......@@ -228,7 +230,7 @@
`&options=${JSON.stringify(crop)}`,
animationType: "fade-in",
events: {
success: url=> {
success: url => {
callback(url)
}
}
......@@ -236,21 +238,26 @@
})
// #endif
console.log(this.userInfo);
let cloudPath = this.userInfo._id+''+Date.now()
let cloudPath = this.userInfo._id + '' + Date.now()
avatar_file.name = cloudPath
uni.showLoading({
title: '正在上传',
mask: true
});
let {fileID} = await uniCloud.uploadFile({
filePath,cloudPath,
fileType:"image"
let {
fileID
} = await uniCloud.uploadFile({
filePath,
cloudPath,
fileType: "image"
});
// console.log(result)
avatar_file.url = fileID
console.log({avatar_file});
console.log({
avatar_file
});
uni.hideLoading()
this.setAvatarFile(avatar_file)
}
})
......@@ -258,7 +265,8 @@
}
}
</script>
<style>
<style lang="scss" scoped>
@import '@/common/all-flex.css';
.item {
width: 750rpx;
flex-direction: row;
......@@ -279,4 +287,4 @@
height: 130rpx;
line-height: 130rpx;
}
</style>
</style>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
<style type="text/css">
.st0{fill:#606060;}
.st1{fill:none;stroke:#FFFFFF;stroke-width:2.4306;stroke-miterlimit:10;}
.st2{fill:#FFFFFF;}
</style>
<g>
<path class="st2" d="M11.6,11c0.4,0.4,0.6,0.9,0.6,1.5c0,0.6-0.2,1.1-0.6,1.4c-0.4,0.4-0.9,0.6-1.5,0.6c-0.6,0-1.1-0.2-1.5-0.6
c-0.4-0.4-0.6-0.9-0.6-1.4s0.2-1.1,0.6-1.5c0.4-0.4,0.9-0.6,1.5-0.6C10.8,10.4,11.2,10.6,11.6,11z M24.6,18.4V6.7H5.4v12l1.8-1.8
c0.3-0.3,0.6-0.4,1-0.4c0.4,0,0.7,0.1,1,0.4l1.8,1.8l5.8-7c0.3-0.3,0.6-0.5,1.1-0.5c0.4,0,0.8,0.2,1.1,0.5
C18.8,11.6,24.6,18.4,24.6,18.4z M25.6,5.7C25.9,6,26,6.3,26,6.7v16.1c0,0.4-0.1,0.7-0.4,1c-0.3,0.3-0.6,0.4-1,0.4H5.4
c-0.4,0-0.7-0.1-1-0.4c-0.3-0.3-0.4-0.6-0.4-1V6.7c0-0.4,0.1-0.7,0.4-1c0.3-0.3,0.6-0.4,1-0.4h19.3C25,5.3,25.3,5.4,25.6,5.7z"/>
<path class="st1" d="M24.3,21.5H5.7c-0.2,0-0.3-0.2-0.3-0.3V7c0-0.2,0.2-0.3,0.3-0.3h18.6c0.2,0,0.3,0.2,0.3,0.3v14.2
C24.6,21.3,24.5,21.5,24.3,21.5z"/>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="30px" height="30px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#FFFFFF;stroke-width:2.4306;stroke-miterlimit:10;}
.st1{fill:#FFFFFF;}
</style>
<g>
<path class="st0" d="M17.1,24.2h-12c-0.2,0-0.3-0.2-0.3-0.3v-9.3c0-0.2,0.2-0.3,0.3-0.3h12c0.2,0,0.3,0.2,0.3,0.3v9.3
C17.5,24.1,17.3,24.2,17.1,24.2z"/>
<path class="st0" d="M16.6,5.4c4.8,0,8.7,3.9,8.7,8.7"/>
<polyline class="st0" points="19.3,10.1 14.9,5.6 19.3,1.2 "/>
</g>
</svg>
import Vue from 'vue'
import Vuex from 'vuex'
const modulesFiles = require.context('./modules', false, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
modules[moduleName]['namespaced'] = true;
return modules
}, {})
Vue.use(Vuex)
const store = new Vuex.Store({
modules,
strict: true
})
import user from '@/store/modules/user.js'
// #ifndef VUE3
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
user
},
strict: true
})
// #endif
// #ifdef VUE3
import {createStore} from 'vuex'
const store = createStore({
modules: {
user
}
})
// #endif
export default store
\ No newline at end of file
......@@ -40,6 +40,7 @@ let state = {
}
export default {
namespaced: true,
state,
getters,
mutations,
......
//这是应用的配置页面,App.vue挂载到getApp().globalData.config
module.exports = {
export default {
"h5": {
"url": "https://uni-starter.dcloud.net.cn", // 前端网页托管的域名
// 在h5端全局悬浮引导用户下载app的功能 更多自定义要求在/common/openApp.js中修改
......
{
"bsonType": "object",
"permission":{
"update":"doc.uid==auth.uid"
"update":"doc._id == auth.uid"
},
"required": [],
"properties": {
......
## 1.0.6(2021-02-04)
- 调整为uni_modules目录规范
## 1.1.3(2021-06-24)
- 优化 示例项目
## 1.1.1(2021-05-12)
- 新增 组件示例地址
## 1.1.0(2021-05-12)
- 新增 uni-badge 的 absolute 属性,支持定位
- 新增 uni-badge 的 offset 属性,支持定位偏移
- 新增 uni-badge 的 is-dot 属性,支持仅显示有一个小点
- 新增 uni-badge 的 max-num 属性,支持自定义封顶的数字值,超过 99 显示99+
- 优化 uni-badge 属性 custom-style, 支持以对象形式自定义样式
## 1.0.7(2021-05-07)
- 修复 uni-badge 在 App 端,数字小于10时不是圆形的bug
- 修复 uni-badge 在父元素不是 flex 布局时,宽度缩小的bug
- 新增 uni-badge 属性 custom-style, 支持自定义样式
## 1.0.6(2021-02-04)
- 调整为uni_modules目录规范
<template>
<text v-if="text" :class="inverted ? 'uni-badge--' + type + ' uni-badge--' + size + ' uni-badge--' + type + '-inverted' : 'uni-badge--' + type + ' uni-badge--' + size"
:style="badgeStyle" class="uni-badge" @click="onClick()">{{ text }}</text>
<view class="uni-badge--x">
<slot />
<text v-if="text" :class="classNames" :style="[badgeWidth, positionStyle, customStyle, dotStyle]"
class="uni-badge"
@click="onClick()">{{displayValue}}</text>
</view>
</template>
<script>
......@@ -33,6 +37,24 @@
type: Boolean,
default: false
},
isDot: {
type: Boolean,
default: false
},
maxNum: {
type: Number,
default: 99
},
absolute: {
type: String,
default: ''
},
offset: {
type: Array,
default () {
return [0, 0]
}
},
text: {
type: [String, Number],
default: ''
......@@ -40,25 +62,86 @@
size: {
type: String,
default: 'normal'
},
customStyle: {
type: Object,
default () {
return {}
}
}
},
data() {
return {
badgeStyle: ''
};
return {};
},
watch: {
text() {
this.setStyle()
computed: {
width() {
return String(this.text).length * 8 + 12
},
classNames() {
const {
inverted,
type,
size,
absolute
} = this
return [
inverted ? 'uni-badge--' + type + '-inverted' : '',
'uni-badge--' + type,
'uni-badge--' + size,
absolute ? 'uni-badge--absolute' : ''
]
},
positionStyle() {
if (!this.absolute) return {}
let w = this.width / 2,
h = 10
if (this.isDot) {
w = 5
h = 5
}
const x = `${- w + this.offset[0]}px`
const y = `${- h + this.offset[1]}px`
const whiteList = {
rightTop: {
right: x,
top: y
},
rightBottom: {
right: x,
bottom: y
},
leftBottom: {
left: x,
bottom: y
},
leftTop: {
left: x,
top: y
}
}
const match = whiteList[this.absolute]
return match ? match : whiteList['rightTop']
},
badgeWidth() {
return {
width: `${this.width}px`
}
},
dotStyle() {
if (!this.isDot) return {}
return {
width: '10px',
height: '10px',
borderRadius: '10px'
}
},
displayValue() {
const { isDot, text, maxNum } = this
return isDot ? '' : (Number(text) > maxNum ? `${maxNum}+` : text)
}
},
mounted() {
this.setStyle()
},
methods: {
setStyle() {
this.badgeStyle = `width: ${String(this.text).length * 8 + 12}px`
},
onClick() {
this.$emit('click');
}
......@@ -71,11 +154,25 @@
$bage-small: scale(0.8);
$bage-height: 20px;
.uni-badge--x {
/* #ifdef APP-NVUE */
align-self: flex-start;
/* #endif */
/* #ifndef APP-NVUE */
display: inline-block;
/* #endif */
position: relative;
}
.uni-badge--absolute {
position: absolute;
}
.uni-badge {
/* #ifndef APP-PLUS */
display: flex;
box-sizing: border-box;
/* #ifndef APP-NVUE */
display: flex;
overflow: hidden;
box-sizing: border-box;
/* #endif */
justify-content: center;
flex-direction: row;
......@@ -88,9 +185,8 @@
text-align: center;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
font-size: $bage-size;
padding: 0px 6px;
/* #ifdef H5 */
cursor: pointer;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
......
{
"id": "uni-badge",
"displayName": "Badge 数字角标",
"version": "1.0.6",
"description": "数字角标(徽章)组件,在元素周围展示消息提醒,一般用于列表、九宫格、按钮等地方。",
"keywords": [
"",
"badge",
"uni-ui",
"数字角标",
"徽章"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "u",
"app-nvue": "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"
},
"小程序": {
"微信": "u",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
{
"id": "uni-badge",
"displayName": "uni-badge 数字角标",
"version": "1.1.3",
"description": "数字角标(徽章)组件,在元素周围展示消息提醒,一般用于列表、九宫格、按钮等地方。",
"keywords": [
"",
"badge",
"uni-ui",
"uniui",
"数字角标",
"徽章"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"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"
},
"快应用": {
"华为": "y",
"联盟": "y"
}
}
}
}
}
\ No newline at end of file
## Badge 数字角标
> **组件名:uni-badge**
> 代码块: `uBadge`
......@@ -17,9 +18,13 @@
``template`` 中使用组件
```html
<uni-badge size="small" :text="100" absolute="rightBottom" type="primary">
<button type="default">右上</button>
</uni-badge>
<uni-badge text="1"></uni-badge>
<uni-badge text="2" type="purple" @click="bindClick"></uni-badge>
<uni-badge text="3" type="primary" :inverted="true"></uni-badge>
```
......@@ -27,12 +32,17 @@
### Badge Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|text |String |- |角标内容 |
|type |String |default|颜色类型,可选值:default(灰色)、primary(蓝色)、success(绿色)、warning(黄色)、error(红色)|
|size |String |normal|Badge 大小,可取值:normal、small|
|inverted |Boolean |false |是否无需背景颜色,为 true 时,背景颜色将变为文字的字体颜色 |
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|text |String |- |角标内容 |
|type |String |default|颜色类型,可选值:default(灰色)、primary(蓝色)、success(绿色)、warning(黄色)、error(红色)|
|size |String |normal |Badge 大小,可取值:normal、small |
|is-dot |Boolean|false |不展示数字,只有一个小点 |
|max-num |String/Numbuer|99 |展示封顶的数字值,超过 99 显示99+ |
|custom-style |Object | {} |自定义 Badge 样式, 样式对象语法 |
|inverted |Boolean|false |是否无需背景颜色,为 true 时,背景颜色将变为文字的字体颜色 |
|absolute |String| rightTop|开启绝对定位, 角标将定位到其包裹的标签的四个角上,可选值: rightTop(右上角)、rightBottom(右下角)、leftBottom(左下角) 、leftTop(左上角) |
|offset |Array[number]| [0, 0]|距定位角中心点的偏移量,[-10, -10] 表示向 absolute 指定的方向偏移 10px,[10, 10] 表示向 absolute 指定的反方向偏移 10px,只有存在 absolute 属性时有效,与absolute 的值一一对应(例如:值为rightTop, 对应 offset 为 [right, Top])|
### Badge Events
......@@ -41,3 +51,8 @@
|@click |点击 Badge 触发事件| - |
## 组件示例
点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge](https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge)
\ No newline at end of file
## 1.1.6(2021-02-04)
- 调整为uni_modules目录规范
## 1.2.0(2021-07-13)
- 组件兼容 vue3,如何创建vue3项目详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.8(2021-07-01)
- 优化 图文卡片无图片加载时,提供占位图标
- 新增 header 插槽,自定义卡片头部( 图文卡片 mode="style" 时,不支持)
- 修复 thumbnail 不存在仍然占位的 bug
## 1.1.7(2021-05-12)
- 新增 组件示例地址
## 1.1.6(2021-02-04)
- 调整为uni_modules目录规范
<template>
<view class="uni-card uni-border" :class="{ 'uni-card--full': isFull === true || isFull === 'true', 'uni-card--shadow': isShadow === true || isShadow === 'true'}">
<!-- 基础 -->
<view v-if="mode === 'basic' && title" class="uni-card__header uni-border-bottom" @click.stop="onClick">
<view v-if="thumbnail" class="uni-card__header-extra-img-view">
<image :src="thumbnail" class="uni-card__header-extra-img" />
<template>
<view class="uni-card uni-border"
:class="{ 'uni-card--full': isFull === true || isFull === 'true', 'uni-card--shadow': isShadow === true || isShadow === 'true'}">
<!-- 基础 -->
<view v-if="mode === 'basic' && title" @click.stop="onClick" class="uni-card__head-padding">
<view class="uni-card__header uni-border-bottom">
<slot name="header">
<view v-if="thumbnail" class="uni-card__header-extra-img-view">
<image :src="thumbnail" class="uni-card__header-extra-img" />
</view>
<text class="uni-card__header-title-text">{{ title }}</text>
<text v-if="extra" class="uni-card__header-extra-text">{{ extra }}</text>
</slot>
</view>
</view>
<!-- 标题 -->
<view v-if="mode === 'title'" @click.stop="onClick" class="uni-card__head-padding">
<view class="uni-card__title uni-border-bottom">
<slot name="header">
<view class="uni-card__title-box">
<view v-if="thumbnail" class="uni-card__title-header">
<image class="uni-card__title-header-image" :src="thumbnail" mode="scaleToFill" />
</view>
<view class="uni-card__title-content">
<text class="uni-card__title-content-title uni-ellipsis">{{ title }}</text>
<text class="uni-card__title-content-extra uni-ellipsis">{{ subTitle }}</text>
</view>
</view>
<view v-if="extra">
<text class="uni-card__header-extra-text">{{ extra }}</text>
</view>
</slot>
</view>
</view>
<!-- 图文 -->
<view v-if="mode === 'style'" class="uni-card__thumbnailimage" @click.stop="onClick">
<view class="uni-card__thumbnailimage-box">
<image v-if="thumbnail" class="uni-card__thumbnailimage-image" :src="thumbnail" mode="aspectFill" />
<uni-icons v-if="!thumbnail" type="image" size="30" color="#999" />
</view>
<text class="uni-card__header-title-text">{{ title }}</text>
<text v-if="extra" class="uni-card__header-extra-text">{{ extra }}</text>
</view>
<!-- 标题 -->
<view v-if="mode === 'title'" class="uni-card__title uni-border-bottom" @click.stop="onClick">
<view class="uni-card__title-box">
<view class="uni-card__title-header">
<image class="uni-card__title-header-image" :src="thumbnail" mode="scaleToFill" />
</view>
<view class="uni-card__title-content">
<text class="uni-card__title-content-title uni-ellipsis">{{ title }}</text>
<text class="uni-card__title-content-extra uni-ellipsis">{{ subTitle }}</text>
</view>
</view>
<view v-if="extra">
<text class="uni-card__header-extra-text">{{ extra }}</text>
</view>
</view>
<!-- 图文 -->
<view v-if="mode === 'style'" class="uni-card__thumbnailimage" @click.stop="onClick">
<view class="uni-card__thumbnailimage-box">
<image class="uni-card__thumbnailimage-image" :src="thumbnail" mode="aspectFill" />
</view>
<view v-if="title" class="uni-card__thumbnailimage-title"><text class="uni-card__thumbnailimage-title-text">{{ title }}</text></view>
</view>
<!-- 内容 -->
<view class="uni-card__content uni-card__content--pd" @click.stop="onClick">
<view v-if="mode === 'style' && extra" class=""><text class="uni-card__content-extra">{{ extra }}</text></view>
<slot />
</view>
<!-- 底部 -->
<view v-if="note" class="uni-card__footer uni-border-top">
<slot name="footer">
<text class="uni-card__footer-text">{{ note }}</text>
</slot>
</view>
</view>
</template>
<script>
/**
* Card 卡片
* @description 卡片视图组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=22
* @property {String} title 标题文字
* @property {String} subTitle 副标题(仅仅mode=title下生效)
* @property {String} extra 标题额外信息
* @property {String} note 标题左侧缩略图
* @property {String} thumbnail 底部信息
* @property {String} mode = [basic|style|title] 卡片模式
* @value basic 基础卡片
* @value style 图文卡片
* @value title 标题卡片
* @property {Boolean} isFull = [true | false] 卡片内容是否通栏,为 true 时将去除padding值
* @property {Boolean} isShadow = [true | false] 卡片内容是否开启阴影
* @event {Function} click 点击 Card 触发事件
* @example <uni-card title="标题文字" thumbnail="xxx.jpg" extra="额外信息" note="Tips">内容主体,可自定义内容及样式</uni-card>
*/
export default {
name: 'UniCard',
props: {
title: {
type: String,
default: ''
},
subTitle: {
type: String,
default: ''
},
extra: {
type: String,
default: ''
},
note: {
type: String,
default: ''
},
thumbnail: {
type: String,
default: ''
},
mode: {
type: String,
default: 'basic'
},
isFull: {
// 内容区域是否通栏
type: Boolean,
default: false
},
isShadow: {
// 是否开启阴影
type: [Boolean, String],
default: false
}
},
methods: {
onClick() {
this.$emit('click')
}
}
}
</script>
<style lang="scss" scoped>
.uni-card {
/* #ifndef APP-NVUE */
display: flex;
flex: 1;
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
/* #endif */
margin: $uni-spacing-col-lg $uni-spacing-row-lg;
background-color: $uni-bg-color;
<view v-if="title" class="uni-card__thumbnailimage-title">
<text class="uni-card__thumbnailimage-title-text">{{ title }}</text>
</view>
</view>
<!-- 内容 -->
<view class="uni-card__content uni-card__content--pd" @click.stop="onClick">
<view v-if="mode === 'style' && extra" class=""><text class="uni-card__content-extra">{{ extra }}</text>
</view>
<slot />
</view>
<!-- 底部 -->
<view v-if="note" class="uni-card__footer uni-border-top">
<slot name="footer">
<text class="uni-card__footer-text">{{ note }}</text>
</slot>
</view>
</view>
</template>
<script>
/**
* Card 卡片
* @description 卡片视图组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=22
* @property {String} title 标题文字
* @property {String} subTitle 副标题(仅仅mode=title下生效)
* @property {String} extra 标题额外信息
* @property {String} note 底部信息
* @property {String} thumbnail 标题左侧缩略图
* @property {String} mode = [basic|style|title] 卡片模式
* @value basic 基础卡片
* @value style 图文卡片
* @value title 标题卡片
* @property {Boolean} isFull = [true | false] 卡片内容是否通栏,为 true 时将去除padding值
* @property {Boolean} isShadow = [true | false] 卡片内容是否开启阴影
* @event {Function} click 点击 Card 触发事件
* @example <uni-card title="标题文字" thumbnail="xxx.jpg" extra="额外信息" note="Tips">内容主体,可自定义内容及样式</uni-card>
*/
export default {
name: 'UniCard',
props: {
title: {
type: String,
default: ''
},
subTitle: {
type: String,
default: ''
},
extra: {
type: String,
default: ''
},
note: {
type: String,
default: ''
},
thumbnail: {
type: String,
default: ''
},
mode: {
type: String,
default: 'basic'
},
isFull: {
// 内容区域是否通栏
type: Boolean,
default: false
},
isShadow: {
// 是否开启阴影
type: [Boolean, String],
default: false
}
},
methods: {
onClick() {
this.$emit('click')
}
}
}
</script>
<style lang="scss" scoped>
.uni-card {
/* #ifndef APP-NVUE */
display: flex;
flex: 1;
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
/* #endif */
margin: $uni-spacing-col-lg $uni-spacing-row-lg;
background-color: $uni-bg-color;
position: relative;
flex-direction: column;
border-radius: 5px;
overflow: hidden;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-border {
position: relative;
/* #ifdef APP-NVUE */
border-color: $uni-border-color;
border-style: solid;
border-width: 0.5px;
/* #endif */
z-index: 1;
}
/* #ifndef APP-NVUE */
.uni-border:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
border: 1px solid $uni-border-color;
border-radius: 10px;
box-sizing: border-box;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: left top;
z-index: -1;
}
/* #endif */
.uni-border-bottom {
position: relative;
/* #ifdef APP-NVUE */
border-bottom-color: $uni-border-color;
border-bottom-style: solid;
border-bottom-width: 0.5px;
/* #endif */
z-index: 1;
}
/* #ifndef APP-NVUE */
.uni-border-bottom:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
border-bottom: 1px solid $uni-border-color;
box-sizing: border-box;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: left top;
z-index: -1;
}
/* #endif */
.uni-border-top {
position: relative;
/* #ifdef APP-NVUE */
border-top-color: $uni-border-color;
border-top-style: solid;
border-top-width: 0.5px;
/* #endif */
z-index: 1;
}
/* #ifndef APP-NVUE */
.uni-border-top:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
border-top: 1px solid $uni-border-color;
box-sizing: border-box;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: left top;
z-index: -1;
}
/* #endif */
.uni-card__thumbnailimage {
position: relative;
flex-direction: column;
border-radius: 5px;
overflow: hidden;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-border {
position: relative;
/* #ifdef APP-NVUE */
border-color: $uni-border-color;
border-style: solid;
border-width: 0.5px;
/* #endif */
z-index: 1;
}
/* #ifndef APP-NVUE */
.uni-border:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
border: 1px solid $uni-border-color;
border-radius: 10px;
box-sizing: border-box;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: left top;
z-index: -1;
}
/* #endif */
.uni-border-bottom {
position: relative;
/* #ifdef APP-NVUE */
border-bottom-color: $uni-border-color;
border-bottom-style: solid;
border-bottom-width: 0.5px;
/* #endif */
z-index: 1;
}
/* #ifndef APP-NVUE */
.uni-border-bottom:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
border-bottom: 1px solid $uni-border-color;
box-sizing: border-box;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: left top;
z-index: -1;
}
/* #endif */
.uni-border-top {
position: relative;
/* #ifdef APP-NVUE */
border-top-color: $uni-border-color;
border-top-style: solid;
border-top-width: 0.5px;
/* #ifndef APP-NVUE */
// display: flex;
/* #endif */
z-index: 1;
}
/* #ifndef APP-NVUE */
.uni-border-top:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
border-top: 1px solid $uni-border-color;
box-sizing: border-box;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: left top;
z-index: -1;
}
/* #endif */
.uni-card__thumbnailimage {
position: relative;
flex-direction: column;
flex-direction: column;
justify-content: center;
height: 150px;
overflow: hidden;
}
.uni-card__thumbnailimage-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
overflow: hidden;
}
.uni-card__thumbnailimage-image {
background-color: #F1F1F1;
overflow: hidden;
}
.uni-card__thumbnailimage-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
}
.uni-card__thumbnailimage-title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 150px;
flex-direction: row;
padding: $uni-spacing-col-base $uni-spacing-col-lg;
background-color: $uni-bg-color-mask;
}
.uni-card__thumbnailimage-title-text {
flex: 1;
font-size: $uni-font-size-base;
color: #fff;
}
.uni-card__title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
padding: 10px;
}
.uni-card__title-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
align-items: center;
overflow: hidden;
}
.uni-card__title-header {
width: 40px;
height: 40px;
justify-content: center;
align-items: center;
overflow: hidden;
}
.uni-card__thumbnailimage-image {
flex: 1;
}
.uni-card__thumbnailimage-title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
position: absolute;
bottom: 0;
left: 0;
right: 0;
flex-direction: row;
padding: $uni-spacing-col-base $uni-spacing-col-lg;
background-color: $uni-bg-color-mask;
}
.uni-card__thumbnailimage-title-text {
flex: 1;
font-size: $uni-font-size-base;
color: #fff;
}
.uni-card__title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
padding: 10px;
}
.uni-card__title-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
align-items: center;
overflow: hidden;
}
.uni-card__title-header {
width: 40px;
height: 40px;
overflow: hidden;
border-radius: 5px;
}
.uni-card__title-header-image {
width: 40px;
height: 40px;
}
.uni-card__title-content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
flex: 1;
padding-left: 10px;
padding-right: 10px;
}
.uni-card__title-header-image {
width: 40px;
height: 40px;
overflow: hidden;
}
.uni-card__title-content-title {
font-size: $uni-font-size-base;
line-height: 22px;
}
.uni-card__title-content-extra {
font-size: $uni-font-size-sm;
line-height: 27px;
color: $uni-text-color-grey;
}
.uni-card__header {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
position: relative;
flex-direction: row;
padding: $uni-spacing-col-lg;
align-items: center;
}
.uni-card__header-title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
margin-right: $uni-spacing-col-base;
justify-content: flex-start;
align-items: center;
}
.uni-card__header-title-text {
font-size: $uni-font-size-lg;
flex: 1;
color: #333;
}
.uni-card__header-extra-img {
height: $uni-img-size-sm;
width: $uni-img-size-sm;
margin-right: $uni-spacing-col-base;
}
.uni-card__header-extra-text {
flex: 1;
margin-left: $uni-spacing-col-base;
font-size: $uni-font-size-sm;
text-align: right;
color: $uni-text-color-grey;
}
.uni-card__content {
color: $uni-text-color;
}
.uni-card__content--pd {
padding: $uni-spacing-col-lg;
}
.uni-card__content-extra {
font-size: $uni-font-size-base;
padding-bottom: 10px;
color: $uni-text-color-grey;
}
.uni-card__footer {
justify-content: space-between;
padding: $uni-spacing-col-lg;
}
.uni-card__footer-text {
color: $uni-text-color-grey;
font-size: $uni-font-size-sm;
}
.uni-card--shadow {
position: relative;
/* #ifndef APP-NVUE */
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
/* #endif */
}
.uni-card--full {
margin: 0;
border-radius: 0;
}
/* #ifndef APP-NVUE */
.uni-card--full:after {
border-radius: 0;
}
/* #endif */
.uni-ellipsis {
/* #ifndef APP-NVUE */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/* #endif */
/* #ifdef APP-NVUE */
lines: 1;
/* #endif */
}
}
.uni-card__title-content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
flex: 1;
height: 40px;
overflow: hidden;
}
.uni-card__title-content-title {
font-size: $uni-font-size-base;
line-height: 22px;
}
.uni-card__title-content-extra {
font-size: $uni-font-size-sm;
line-height: 27px;
color: $uni-text-color-grey;
}
.uni-card__header {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
position: relative;
flex-direction: row;
padding: $uni-spacing-col-lg;
align-items: center;
}
.uni-card__header-title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
margin-right: $uni-spacing-col-base;
justify-content: flex-start;
align-items: center;
}
.uni-card__header-title-text {
font-size: $uni-font-size-lg;
flex: 1;
color: #333;
}
.uni-card__header-extra-img {
height: $uni-img-size-sm;
width: $uni-img-size-sm;
margin-right: $uni-spacing-col-base;
}
.uni-card__header-extra-text {
flex: 1;
margin-left: $uni-spacing-col-base;
font-size: $uni-font-size-sm;
text-align: right;
color: $uni-text-color-grey;
}
.uni-card__content {
color: $uni-text-color;
}
.uni-card__content--pd {
padding: $uni-spacing-col-lg;
}
.uni-card__content-extra {
font-size: $uni-font-size-base;
padding-bottom: 10px;
color: $uni-text-color-grey;
}
.uni-card__footer {
justify-content: space-between;
padding: $uni-spacing-col-lg;
}
.uni-card__footer-text {
color: $uni-text-color-grey;
font-size: $uni-font-size-sm;
}
.uni-card--shadow {
position: relative;
/* #ifndef APP-NVUE */
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
/* #endif */
}
.uni-card--full {
margin: 0;
border-radius: 0;
}
/* #ifndef APP-NVUE */
.uni-card--full:after {
border-radius: 0;
}
/* #endif */
.uni-ellipsis {
/* #ifndef APP-NVUE */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/* #endif */
/* #ifdef APP-NVUE */
lines: 1;
/* #endif */
}
.uni-card__head-padding {
// mar: 12px;
}
</style>
{
"id": "uni-card",
"displayName": "Card 卡片",
"version": "1.1.6",
"description": "Card 组件,提供常见的卡片样式。",
"keywords": [
"card",
"uni-ui",
"卡片"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"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"
}
}
}
}
}
\ No newline at end of file
{
"id": "uni-card",
"displayName": "uni-card 卡片",
"version": "1.2.0",
"description": "Card 组件,提供常见的卡片样式。",
"keywords": [
"uni-ui",
"uniui",
"card",
"",
"卡片"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [
"uni-icons"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"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"
}
}
}
}
}
## Card 卡片
> **组件名:uni-card**
> 代码块: `uCard`
......@@ -12,6 +13,7 @@
如需通过`npm`方式使用`uni-ui`组件,另见文档:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
> **注意事项**
> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
> - 因为平台兼容问题 , 目前 APP-NVUE 安卓平台下不支持阴影
......@@ -94,4 +96,9 @@
|插槽称名 |说明 |
|:-: |:-: |
|footer |卡片底部插槽 |
\ No newline at end of file
|header |卡片头部插槽( 图文卡片 mode="style" 时,不支持)|
|footer |卡片底部插槽 |
## 组件示例
点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/card/card](https://hellouniapp.dcloud.net.cn/pages/extUI/card/card)
\ No newline at end of file
## 1.1.6(2021-02-05)
- 优化 组件引用关系,通过uni_modules引用组件
## 1.1.5(2021-02-05)
## 1.2.2(2021-07-21)
- 修复 由1.2.0版本引起的 change 事件返回 undefined 的Bug
## 1.2.1(2021-07-21)
- 优化 组件示例
## 1.2.0(2021-07-21)
- 新增 组件折叠动画
- 新增 value\v-model 属性 ,动态修改面板折叠状态
- 新增 title 插槽 ,可定义面板标题
- 新增 border 属性 ,显示隐藏面板内容分隔线
- 新增 title-border 属性 ,显示隐藏面板标题分隔线
- 修复 resize 方法失效的Bug
- 修复 change 事件返回参数不正确的Bug
- 优化 H5、App 平台自动更具内容更新高度,无需调用 reszie() 方法
## 1.1.7(2021-05-12)
- 新增 组件示例地址
## 1.1.6(2021-02-05)
- 优化 组件引用关系,通过uni_modules引用组件
## 1.1.5(2021-02-05)
- 调整为uni_modules目录规范
\ No newline at end of file
<template>
<view :class="{ 'uni-collapse-cell--disabled': disabled,'uni-collapse-cell--notdisabled': !disabled, 'uni-collapse-cell--open': isOpen,'uni-collapse-cell--hide':!isOpen }"
class="uni-collapse-cell">
<view :class="{ 'uni-collapse-cell--disabled': disabled}" class="uni-collapse-cell__title" @click="onClick">
<image v-if="thumb" :src="thumb" class="uni-collapse-cell__title-img" />
<text class="uni-collapse-cell__title-text">{{ title }}</text>
<!-- #ifdef MP-ALIPAY -->
<view :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
class="uni-collapse-cell__title-arrow">
<uni-icons color="#bbb" size="20" type="arrowdown" />
</view>
<!-- #endif -->
<!-- #ifndef MP-ALIPAY -->
<uni-icons :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
class="uni-collapse-cell__title-arrow" color="#bbb" size="20" type="arrowdown" />
<!-- #endif -->
</view>
<view :class="{'uni-collapse-cell__content--hide':!isOpen}" class="uni-collapse-cell__content">
<view :class="{ 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__wrapper" :style="{'transform':isOpen?'translateY(0)':'translateY(-50%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-50%)'}">
<slot />
</view>
</view>
</view>
</template>
<script>
/**
* CollapseItem 折叠面板子组件
* @description 折叠面板子组件
* @property {String} title 标题文字
* @property {String} thumb 标题左侧缩略图
* @property {Boolean} disabled = [true|false] 是否展开面板
* @property {Boolean} showAnimation = [true|false] 开启动画
*/
export default {
name: 'UniCollapseItem',
props: {
title: {
// 列表标题
type: String,
default: ''
},
name: {
// 唯一标识符
type: [Number, String],
default: 0
},
disabled: {
// 是否禁用
type: Boolean,
default: false
},
showAnimation: {
// 是否显示动画
type: Boolean,
default: false
},
open: {
// 是否展开
type: Boolean,
default: false
},
thumb: {
// 缩略图
type: String,
default: ''
}
},
data() {
return {
isOpen: false
}
},
watch: {
open(val) {
this.isOpen = val
}
},
inject: ['collapse'],
created() {
this.isOpen = this.open
this.nameSync = this.name ? this.name : this.collapse.childrens.length
this.collapse.childrens.push(this)
if (String(this.collapse.accordion) === 'true') {
if (this.isOpen) {
let lastEl = this.collapse.childrens[this.collapse.childrens.length - 2]
if (lastEl) {
this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false
}
}
}
},
methods: {
onClick() {
if (this.disabled) {
return
}
if (String(this.collapse.accordion) === 'true') {
this.collapse.childrens.forEach(vm => {
if (vm === this) {
return
}
vm.isOpen = false
})
}
this.isOpen = !this.isOpen
this.collapse.onChange && this.collapse.onChange()
this.$forceUpdate()
}
}
}
</script>
<style lang="scss" scoped>
.uni-collapse-cell {
flex-direction: column;
border-color: $uni-border-color;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.uni-collapse-cell--hover {
background-color: $uni-bg-color-hover;
}
.uni-collapse-cell--open {
background-color: $uni-bg-color-hover;
}
.uni-collapse-cell--disabled {
background-color: $uni-bg-color-hover;
/* #ifdef H5 */
cursor: not-allowed !important;
/* #endif */
// opacity: 0.3;
}
.uni-collapse-cell--hide {
height: 48px;
}
.uni-collapse-cell--animation {
// transition: transform 0.3s ease;
transition-property: transform;
transition-duration: 0.3s;
transition-timing-function: ease;
}
.uni-collapse-cell__title {
padding: 12px 12px;
position: relative;
/* #ifndef APP-NVUE */
display: flex;
width: 100%;
box-sizing: border-box;
/* #endif */
height: 48px;
line-height: 24px;
flex-direction: row;
justify-content: space-between;
align-items: center;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-collapse-cell__title:active {
background-color: $uni-bg-color-hover;
}
.uni-collapse-cell__title-img {
height: $uni-img-size-base;
width: $uni-img-size-base;
margin-right: 10px;
}
.uni-collapse-cell__title-arrow {
width: 20px;
height: 20px;
transform: rotate(0deg);
transform-origin: center center;
}
.uni-collapse-cell__title-arrow-active {
transform: rotate(180deg);
}
.uni-collapse-cell__title-text {
flex: 1;
font-size: $uni-font-size-base;
/* #ifndef APP-NVUE */
white-space: nowrap;
color: inherit;
/* #endif */
/* #ifdef APP-NVUE */
lines: 1;
/* #endif */
overflow: hidden;
text-overflow: ellipsis;
}
.uni-collapse-cell__content {
overflow: hidden;
}
.uni-collapse-cell__wrapper {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
}
.uni-collapse-cell__content--hide {
height: 0px;
line-height: 0px;
}
<template>
<view class="uni-collapse-item">
<!-- onClick(!isOpen) -->
<view @click="onClick(!isOpen)" class="uni-collapse-item__title"
:class="{'is-open':isOpen &&titleBorder === 'auto' ,'uni-collapse-item-border':titleBorder !== 'none'}">
<view class="uni-collapse-item__title-wrap">
<slot name="title">
<view class="uni-collapse-item__title-box" :class="{'is-disabled':disabled}">
<image v-if="thumb" :src="thumb" class="uni-collapse-item__title-img" />
<text class="uni-collapse-item__title-text">{{ title }}</text>
</view>
</slot>
</view>
<view
:class="{ 'uni-collapse-item__title-arrow-active': isOpen, 'uni-collapse-item--animation': showAnimation === true }"
class="uni-collapse-item__title-arrow">
<uni-icons :color="disabled?'#ddd':'#bbb'" size="14" type="arrowdown" />
</view>
</view>
<view class="uni-collapse-item__wrap" :class="{'is--transition':showAnimation}"
:style="{height: (isOpen?height:0) +'px'}">
<view :id="elId" ref="collapse--hook" class="uni-collapse-item__wrap-content"
:class="{open:isheight,'uni-collapse-item--border':border&&isOpen}">
<slot></slot>
</view>
</view>
</view>
</template>
<script>
// #ifdef APP-NVUE
const dom = weex.requireModule('dom')
// #endif
/**
* CollapseItem 折叠面板子组件
* @description 折叠面板子组件
* @property {String} title 标题文字
* @property {String} thumb 标题左侧缩略图
* @property {String} name 唯一标志符
* @property {Boolean} disabled = [true|false] 是否展开面板
* @property {Boolean} showAnimation = [true|false] 开启动画
*/
export default {
name: 'uniCollapseItem',
props: {
// 列表标题
title: {
type: String,
default: ''
},
name: {
type: [Number, String],
default: ''
},
// 是否禁用
disabled: {
type: Boolean,
default: false
},
// #ifdef APP-PLUS
// 是否显示动画,app 端默认不开启动画,卡顿严重
showAnimation: {
type: Boolean,
default: false
},
// #endif
// #ifndef APP-PLUS
// 是否显示动画
showAnimation: {
type: Boolean,
default: true
},
// #endif
// 是否展开
open: {
type: Boolean,
default: false
},
// 缩略图
thumb: {
type: String,
default: ''
},
// 标题分隔线显示类型
titleBorder: {
type: String,
default: 'auto'
},
// 是否显示分隔线
border: {
type: Boolean,
default: true
}
},
data() {
// TODO 随机生生元素ID,解决百度小程序获取同一个元素位置信息的bug
const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
return {
isOpen: false,
isheight: null,
height: 0,
elId,
nameSync: 0
}
},
watch: {
open(val) {
this.isOpen = val
this.onClick(val,'init')
}
},
updated(e) {
this.$nextTick(()=> {
this.init(true)
})
},
created(){
this.collapse = this.getCollapse()
this.oldHeight = 0
},
// TODO vue2
destroyed() {
if (this.__isUnmounted) return
this.uninstall()
},
// TODO vue3
unmounted() {
this.__isUnmounted = true
this.uninstall()
},
mounted() {
if (!this.collapse) return
if (this.name !== '') {
this.nameSync = this.name
} else {
this.nameSync = this.collapse.childrens.length + ''
}
if (this.collapse.names.indexOf(this.nameSync) === -1) {
this.collapse.names.push(this.nameSync)
} else {
console.warn(`name 值 ${this.nameSync} 重复`);
}
if (this.collapse.childrens.indexOf(this) === -1) {
this.collapse.childrens.push(this)
}
this.init()
},
methods: {
init(type) {
// #ifndef APP-NVUE
this.getCollapseHeight(type)
// #endif
// #ifdef APP-NVUE
this.getNvueHwight(type)
// #endif
},
uninstall() {
if (this.collapse) {
this.collapse.childrens.forEach((item, index) => {
if (item === this) {
this.collapse.childrens.splice(index, 1)
}
})
this.collapse.names.forEach((item, index) => {
if (item === this.nameSync) {
this.collapse.names.splice(index, 1)
}
})
}
},
onClick(isOpen,type) {
if (this.disabled) return
this.isOpen = isOpen
if (this.isOpen && this.collapse) {
this.collapse.setAccordion(this)
}
if(type !== 'init'){
this.collapse.onChange(isOpen,this)
}
},
getCollapseHeight(type, index = 0) {
const views = uni.createSelectorQuery().in(this)
views
.select(`#${this.elId}`)
.fields({
size: true
}, data => {
// TODO 百度中可能获取不到节点信息 ,需要循环获取
if (index >= 10) return
if (!data) {
index++
this.getCollapseHeight(false, index)
return
}
// #ifdef APP-NVUE
this.height = data.height + 1
// #endif
// #ifndef APP-NVUE
this.height = data.height
// #endif
this.isheight = true
if (type) return
this.onClick(this.open,'init')
})
.exec()
},
getNvueHwight(type) {
const result = dom.getComponentRect(this.$refs['collapse--hook'], option => {
if (option && option.result && option.size) {
// #ifdef APP-NVUE
this.height = option.size.height + 1
// #endif
// #ifndef APP-NVUE
this.height = option.size.height
// #endif
this.isheight = true
if (type) return
this.onClick(this.open,'init')
}
})
},
/**
* 获取父元素实例
*/
getCollapse(name = 'uniCollapse') {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== name) {
parent = parent.$parent;
if (!parent) return false;
parentName = parent.$options.name;
}
return parent;
}
}
}
</script>
<style lang="scss" scoped>
.uni-collapse-item {
/* #ifndef APP-NVUE */
box-sizing: border-box;
/* #endif */
&__title {
/* #ifndef APP-NVUE */
display: flex;
width: 100%;
box-sizing: border-box;
/* #endif */
flex-direction: row;
align-items: center;
transition: border-bottom-color .3s;
// transition-property: border-bottom-color;
// transition-duration: 5s;
&-wrap {
width: 100%;
flex: 1;
}
&-box {
padding: 0 15px;
/* #ifndef APP-NVUE */
display: flex;
width: 100%;
box-sizing: border-box;
/* #endif */
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 48px;
line-height: 48px;
background-color: #fff;
color: #303133;
font-size: 13px;
font-weight: 500;
/* #ifdef H5 */
cursor: pointer;
outline: none;
/* #endif */
&.is-disabled {
.uni-collapse-item__title-text {
color: $uni-text-color-disable;
}
}
}
&.uni-collapse-item-border {
border-bottom: 1px solid #ebeef5;
}
&.is-open {
border-bottom-color: transparent;
}
&-img {
height: $uni-img-size-base;
width: $uni-img-size-base;
margin-right: 10px;
}
&-text {
flex: 1;
font-size: $uni-font-size-base;
/* #ifndef APP-NVUE */
white-space: nowrap;
color: inherit;
/* #endif */
/* #ifdef APP-NVUE */
lines: 1;
/* #endif */
overflow: hidden;
text-overflow: ellipsis;
}
&-arrow {
/* #ifndef APP-NVUE */
display: flex;
box-sizing: border-box;
/* #endif */
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin-right: 10px;
transform: rotate(0deg);
&-active {
transform: rotate(180deg);
}
}
}
&__wrap {
/* #ifndef APP-NVUE */
will-change: height;
box-sizing: border-box;
/* #endif */
background-color: #fff;
overflow: hidden;
position: relative;
height: 0;
&.is--transition {
// transition: all 0.3s;
transition-property: height, border-bottom-width;
transition-duration: 0.3s;
/* #ifndef APP-NVUE */
will-change: height;
/* #endif */
}
&-content {
position: absolute;
font-size: 13px;
color: #303133;
// transition: height 0.3s;
border-bottom-color: transparent;
border-bottom-style: solid;
border-bottom-width: 0;
&.uni-collapse-item--border {
border-bottom-width: 1px;
border-bottom-color: red;
border-bottom-color: #ebeef5;
}
&.open {
position: relative;
}
}
}
&--animation {
transition-property: transform;
transition-duration: 0.3s;
transition-timing-function: ease;
}
}
</style>
<template>
<view class="uni-collapse">
<slot />
</view>
</template>
<script>
/**
* Collapse 折叠面板
* @description 展示可以折叠 / 展开的内容区域
* @tutorial https://ext.dcloud.net.cn/plugin?id=23
* @property {Boolean} accordion = [true|false] 是否开启手风琴效果是否开启手风琴效果
* @event {Function} change 切换面板时触发,activeNames(Array):展开状态的uniCollapseItem的 name 值
*/
export default {
name: 'UniCollapse',
props: {
accordion: {
// 是否开启手风琴效果
type: [Boolean, String],
default: false
}
},
data() {
return {}
},
provide() {
return {
collapse: this
}
},
created() {
this.childrens = []
},
methods: {
onChange() {
let activeItem = []
this.childrens.forEach((vm, index) => {
if (vm.isOpen) {
activeItem.push(vm.nameSync)
}
})
this.$emit('change', activeItem)
}
}
}
</script>
<style lang="scss" scoped>
.uni-collapse {
/* #ifndef APP-NVUE */
width: 100%;
display: flex;
/* #endif */
/* #ifdef APP-NVUE */
flex: 1;
/* #endif */
flex-direction: column;
background-color: $uni-bg-color;
}
<template>
<view class="uni-collapse">
<slot />
</view>
</template>
<script>
/**
* Collapse 折叠面板
* @description 展示可以折叠 / 展开的内容区域
* @tutorial https://ext.dcloud.net.cn/plugin?id=23
* @property {String|Array} value 当前激活面板改变时触发(如果是手风琴模式,参数类型为string,否则为array)
* @property {Boolean} accordion = [true|false] 是否开启手风琴效果是否开启手风琴效果
* @event {Function} change 切换面板时触发,如果是手风琴模式,返回类型为string,否则为array
*/
export default {
name: 'uniCollapse',
props: {
value: {
type: [String, Array],
default: ''
},
modelValue: {
type: [String, Array],
default: ''
},
accordion: {
// 是否开启手风琴效果
type: [Boolean, String],
default: false
},
},
data() {
return {}
},
computed: {
// TODO 兼容 vue2 和 vue3
dataValue() {
let value = (typeof this.value === 'string' && this.value === '') ||
(Array.isArray(this.value) && this.value.length === 0)
let modelValue = (typeof this.modelValue === 'string' && this.modelValue === '') ||
(Array.isArray(this.modelValue) && this.modelValue.length === 0)
if (value) {
return this.modelValue
}
if (modelValue) {
return this.value
}
return this.value
}
},
watch: {
dataValue(val) {
this.setOpen(val)
}
},
created() {
this.childrens = []
this.names = []
},
mounted() {
this.setOpen(this.dataValue)
},
methods: {
setOpen(val) {
let str = typeof val === 'string'
let arr = Array.isArray(val)
this.childrens.forEach((vm, index) => {
if (str) {
if (val === vm.nameSync) {
if (!this.accordion) {
console.warn('accordion 属性为 false ,v-model 类型应该为 array')
return
}
vm.isOpen = true
}
}
if (arr) {
val.forEach(v => {
if (v === vm.nameSync) {
if (this.accordion) {
console.warn('accordion 属性为 true ,v-model 类型应该为 string')
return
}
vm.isOpen = true
}
})
}
})
this.emit(val)
},
setAccordion(self) {
if (!this.accordion) return
this.childrens.forEach((vm, index) => {
if (self !== vm) {
vm.isOpen = false
}
})
},
resize() {
this.childrens.forEach((vm, index) => {
// #ifndef APP-NVUE
vm.getCollapseHeight()
// #endif
// #ifdef APP-NVUE
vm.getNvueHwight()
// #endif
})
},
onChange(isOpen, self) {
let activeItem = []
if (this.accordion) {
activeItem = isOpen ? self.nameSync : ''
} else {
this.childrens.forEach((vm, index) => {
if (vm.isOpen) {
activeItem.push(vm.nameSync)
}
})
}
this.$emit('change', activeItem)
this.emit(activeItem)
},
emit(val){
this.$emit('input', val)
this.$emit('update:modelValue', val)
}
}
}
</script>
<style lang="scss" scoped>
.uni-collapse {
/* #ifndef APP-NVUE */
width: 100%;
display: flex;
/* #endif */
/* #ifdef APP-NVUE */
flex: 1;
/* #endif */
flex-direction: column;
background-color: $uni-bg-color;
}
</style>
{
"id": "uni-collapse",
"displayName": "Collapse 折叠面板",
"version": "1.1.6",
"description": " collapse uni-ui 折叠面板 手风琴",
"keywords": [
"Collapse",
"组件,可以折叠",
"/",
"展开的内容区域。"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [
"uni-icons"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"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"
}
}
}
}
{
"id": "uni-collapse",
"displayName": "uni-collapse 折叠面板",
"version": "1.2.2",
"description": "Collapse 组件,可以折叠 / 展开的内容区域。",
"keywords": [
"uni-ui",
"折叠",
"折叠面板",
"手风琴"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [
"uni-icons"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"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"
}
}
}
}
}
\ No newline at end of file
## Collapse 折叠面板
> **组件名:uni-collapse**
> 代码块: `uCollapse`
> 关联组件:`uni-collapse-item`、`uni-icons`。
展示可以折叠 / 展开的内容区域。
折叠面板用来折叠/显示过长的内容或者是列表。通常是在多内容分类项使用,折叠不重要的内容,显示重要内容。点击可以展开折叠部分。
> **注意事项**
> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ,请自行手动安装
> - `App` 端默认关闭组件动画 ,因为 `height` 动画开销比较大,会导致页面卡顿,请酌情使用动画
> - 如在使用组件过程从发现卡顿严重,请尝试停用组件动画,问题原因如上
> - 在小程序端组件内容发生变化,需要手动调用 resize() 方法,手动更新几点信息,避免出现内容错位
> - 如需自定义组件默认边框颜色等,请使用插槽自定义内容并合理使用 `border ` 和 `title-border` 属性
> - 折叠面板仅支持嵌套使用,请勿单独使用
> - 组件支持 nvue ,需要在 `manifest.json > app-plus` 节点下配置 `"nvueStyleCompiler" : "uni-app"`
> - 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
### 安装方式
......@@ -13,95 +26,250 @@
如需通过`npm`方式使用`uni-ui`组件,另见文档:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
``template`` 中引用组件
使用 `title` 属性指定面板显示内容
使用 `open` 属性默认打开当前面板
使用 `disabled` 属性禁用面板
```html
<uni-collapse>
<uni-collapse-item title="默认开启" :open="true">
<text>折叠内容</text>
</uni-collapse-item>
<uni-collapse-item title="折叠内容">
<text>折叠内容</text>
</uni-collapse-item>
<uni-collapse-item title="禁用状态" disabled>
<text>折叠内容</text>
</uni-collapse-item>
</uni-collapse>
```
### 手风琴效果
使用 `accordion` 属性,可以仅打开一个面板并关闭其他已经打开的面板,效果类似手风琴
设置 `accordion` 属性时,`open` 属性则生效在最后一个组件
```html
<uni-collapse accordion>
<uni-collapse-item title="手风琴效果">
<text>折叠内容</text>
</uni-collapse-item>
<uni-collapse-item title="手风琴效果">
<text>折叠内容</text>
</uni-collapse-item>
<uni-collapse-item title="禁用状态" disabled>
<text>折叠内容</text>
</uni-collapse-item>
</uni-collapse>
```
### 动态设置折叠面板打开状态
使用 `v-model` 属性,动态设置面板的显示状态
使用 `name` 属性设置每个面板的唯一标识,如不设置使用默认索引,从字符串 `"0"` 开始记数
**注意**
- 如果 `accordion` 属性为 `true``v-model` 类型为 `String`
- 如果 `accordion` 属性为 `false``v-model` 类型为 `Array`
- 请注意 `v-model` 属性与 `open` 属性请勿一起使用 ,建议只使用 `v-model`
```html
<uni-collapse v-model="value">
<uni-collapse-item name="key1" title="默认开启">
<text>折叠内容</text>
</uni-collapse-item>
<uni-collapse-item name="key2" title="默认开启">
<text>折叠内容</text>
</uni-collapse-item>
<uni-collapse-item name="key3" title="默认不开启">
<text>折叠内容</text>
</uni-collapse-item>
</uni-collapse>
```
```javascript
export default {
data(){
return {
value:['key1','key2'],
// 如果设置了 accordion 属性,则使用 string 类型
// value:'key1'
}
}
}
```
### 使用动画
使用 `show-animation` 属性开启或关闭面板折叠动画,默认动画开启
**注意**
- `App` 端默认关闭组件动画 ,因为 height 动画开销比较大,会导致页面卡顿,请酌情使用动画,如出现明显卡顿,尝试关闭动画
```html
<!-- 一般用法 -->
<uni-collapse @change="change">
<uni-collapse-item title="标题文字">
<uni-list>
<uni-list-item title="标题文字" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"></uni-list-item>
<uni-list-item title="标题文字" note="描述信息" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"></uni-list-item>
<uni-list-item title="标题文字" note="描述信息" show-extra-icon="true" :extra-icon="{color: '#4cd964',size: '22',type: 'spinner'}"></uni-list-item>
</uni-list>
</uni-collapse-item>
<uni-collapse-item title="默认开启" open="true">
<view style="padding: 30rpx;"> 折叠内容主体,可自定义内容及样式 </view>
</uni-collapse-item>
<uni-collapse-item title="禁用状态" disabled="true">
<view style="padding: 30rpx;"> 禁用状态 </view>
</uni-collapse-item>
<uni-collapse>
<uni-collapse-item :show-animation="true" title="开启动画">
<text>折叠内容</text>
</uni-collapse-item>
<uni-collapse-item :show-animation="true" title="开启动画">
<text>折叠内容</text>
</uni-collapse-item>
<uni-collapse-item :show-animation="false" title="不开启动画">
<text>折叠内容</text>
</uni-collapse-item>
</uni-collapse>
```
### 配置图片
使用 `thumb` 配置图片地址, 可在面板左侧显示一个图片
如需显示更多内容,如图标等,请见下方自定义插槽的说明
<!-- 手风琴效果 -->
<uni-collapse accordion="true">
<uni-collapse-item title="标题文字">
<view style="padding: 30rpx;">
手风琴效果
</view>
</uni-collapse-item>
<uni-collapse-item title="标题文字">
<view style="padding: 30rpx;">
手风琴效果
</view>
</uni-collapse-item>
<uni-collapse-item title="标题文字">
<view style="padding: 30rpx;">
手风琴效果
</view>
</uni-collapse-item>
```html
<uni-collapse>
<uni-collapse-item title="标题文字"
thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png">
<view class="content">
<text class="text">折叠内容主体,可自定义内容及样式</text>
</view>
</uni-collapse-item>
</uni-collapse>
```
<!-- 带图标 -->
### 自定义插槽
如果需要自定义面板显示,可以使用 `title` 插槽达成完全自定义。下面是一个使用 `uni-list` 的列表示例,需要引入 `uni-list` 组件
```html
<uni-collapse>
<uni-collapse-item title="标题文字" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png">
<view style="padding: 30rpx;">
折叠内容主体,可自定义内容及样式
</view>
</uni-collapse-item>
<uni-collapse-item title="标题文字" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png">
<view style="padding: 30rpx;">
折叠内容主体,可自定义内容及样式
</view>
</uni-collapse-item>
<!-- 因为list默认带一条分隔线,所以使用 titleBorder="none" 取消面板的分隔线 -->
<uni-collapse-item title-border="none" :border="false">
<template v-slot:title>
<uni-list>
<uni-list-item title="标题使用自定义标题插槽" :show-extra-icon="true" :extra-icon="extraIcon">
</uni-list-item>
</uni-list>
</template>
<view class="content">
<text class="text">折叠内容主体,可自定义内容及样式</text>
</view>
</uni-collapse-item>
</uni-collapse>
```
**注意**
- 在折叠面板组件中使用list时,在 App-Nvue 下请勿单独使用 uni-list-item,会导致组件无法正常显示,其他平台不做限制
- 在默认插槽里使用 uni-list 组件与上方示例一样,直接写在默认插槽里即可
## API
### Collapse Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|accordion |Boolean|false |是否开启手风琴效果 |
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|value/v-model|String/Array|-|当前激活面板改变时触发(如果是手风琴模式,参数类型为string,否则为array)|
|accordion|Boolean|false|是否开启手风琴效果 |
### Collapse Event
|事件称名 |说明 |返回值 |
|:-: |:-: :-: |
|@change |切换面板时触发 |activeNames(Array):展开状态的uniCollapseItem的name值|
|事件称名|说明|返回值|
|:-:|:-:|:-:|
|@change|切换面板时触发 |切换面板时触发,如果是手风琴模式,返回类型为string,否则为array|
### Collapse Methods
|方法名称 |说明 |
|:-: |:-: |
|resize |更新当前列表高度,只有 `animation:true` 下生效|
|方法名称|说明|
|:-:|:-:|
|resize |更新当前列表高度|
> **提示**
> - resize 方法解决动态添加数据,带动画的折叠面板高度不更新的问题
> - 需要在数据渲染完毕之后使用 `resize` 方法。推荐在 `this.nextTick()` 中使用
> - 需要在数据渲染完毕之后使用 `resize` 方法。推荐在 `this.$nextTick()` 中使用
> - 当前只有小程序端需要调用此方法,H5\App 端已经做了处理,不需要手动更新高度
> ```html
> <view>
> <uni-collapse ref="collapse" v-model="value">
> <uni-collapse-item title="默认开启" >
> <view class="content">
> <text class="text">{{content}}</text>
> </view>
> </uni-collapse-item>
> <uni-collapse-item title="折叠内容">
> <view class="content">
> <text class="text">折叠内容主体,这是一段比较长内容。默认折叠主要内容,只显示当前项标题。点击标题展开,才能看到这段文字。再次点击标题,折叠内容。</text>
> </view>
> </uni-collapse-item>
> </uni-collapse>
> <button class="button" type="primary" @click="add">动态修改内容</button>
> </view>
> ```
> ```javascript
> export default {
> data() {
> return {
> value:['0'],
> content: '折叠内容主体,可自定义内容及样式,点击按钮修改内容使高度发生变化。',
> }
> },
> methods: {
> add() {
> if (this.content.length > 35) {
> this.content = '折叠内容主体,可自定义内容及样式,点击按钮修改内容使高度发生变化。'
> } else {
> this.content = '折叠内容主体,这是一段比较长内容。通过点击按钮修改后内容后,使组件高度发生变化,在次点击按钮恢复之前的内容和高度。'
> }
> // TODO 小程序中不支持自动更新 ,需要手动resize 更新组件高度
> // #ifdef MP
> this.$nextTick(() => {
> this.$refs.collapse.resize()
> })
> // #endif
> }
> }
> }
> ```
### CollapseItem Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|title |String |- |标题文字 |
|thumb |String |- |标题左侧缩略图 |
|disabled |Boolean|false |是否禁用 |
|open |Boolean|false |是否展开面板 |
|showAnimation |Boolean |false |开启动画 |
\ No newline at end of file
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|title|String|-|标题文字|
|thumb|String|-|标题左侧缩略图|
|disabled|Boolean|false|是否禁用|
|open|Boolean|false|是否展开面板|
|show-animation|Boolean|false|开启动画|
|border|Boolean|true|折叠面板内容分隔线|
|title-border|String|auto|折叠面板标题分隔线可选值见下方 **TitleBorder Params**|
#### TitleBorder Params
|参数名|说明|
|:-:|:-:|
|auto|分隔线自动显示|
|none|不显示分隔线|
|show|一直显示分隔线|
### Collapse Slots
| 插槽名 | 说明 |
| :-: | :-: |
| default |默认插槽|
| title |面板标题插槽,如使用此插槽禁用样式效果将失效|
## 组件示例
点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/collapse/collapse](https://hellouniapp.dcloud.net.cn/pages/extUI/collapse/collapse)
\ No newline at end of file
## 0.0.4(2021-02-05)
- 优化 组件引用关系,通过uni_modules引用组件
## 0.0.3(2021-02-04)
- 调整为uni_modules目录规范
## 0.0.6(2021-05-12)
- 新增 组件示例地址
## 0.0.5(2021-04-21)
- 优化 添加依赖 uni-icons, 导入后自动下载依赖
## 0.0.4(2021-02-05)
- 优化 组件引用关系,通过uni_modules引用组件
## 0.0.3(2021-02-04)
- 调整为uni_modules目录规范
<template>
<view class="uni-combox">
<view v-if="label" class="uni-combox__label" :style="labelStyle">
<text>{{label}}</text>
</view>
<view class="uni-combox__input-box">
<input class="uni-combox__input" type="text" :placeholder="placeholder" v-model="inputVal" @input="onInput"
@focus="onFocus" @blur="onBlur" />
<uni-icons class="uni-combox__input-arrow" type="arrowdown" size="14" @click="toggleSelector"></uni-icons>
<view class="uni-combox__selector" v-if="showSelector">
<scroll-view scroll-y="true" class="uni-combox__selector-scroll">
<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
<text>{{emptyTips}}</text>
</view>
<view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index" @click="onSelectorClick(index)">
<text>{{item}}</text>
</view>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
/**
* Combox 组合输入框
* @description 组合输入框一般用于既可以输入也可以选择的场景
* @tutorial https://ext.dcloud.net.cn/plugin?id=1261
* @property {String} label 左侧文字
* @property {String} labelWidth 左侧内容宽度
* @property {String} placeholder 输入框占位符
* @property {Array} candidates 候选项列表
* @property {String} emptyTips 筛选结果为空时显示的文字
* @property {String} value 组合框的值
*/
export default {
name: 'uniCombox',
props: {
label: {
type: String,
default: ''
},
labelWidth: {
type: String,
default: 'auto'
},
placeholder: {
type: String,
default: ''
},
candidates: {
type: Array,
default () {
return []
}
},
emptyTips: {
type: String,
default: '无匹配项'
},
value: {
type: [String, Number],
default: ''
}
},
data() {
return {
showSelector: false,
inputVal: ''
}
},
computed: {
labelStyle() {
if (this.labelWidth === 'auto') {
return {}
}
return {
width: this.labelWidth
}
},
filterCandidates() {
return this.candidates.filter((item) => {
return item.toString().indexOf(this.inputVal) > -1
})
},
filterCandidatesLength() {
return this.filterCandidates.length
}
},
watch: {
value: {
handler(newVal) {
this.inputVal = newVal
},
immediate: true
}
},
methods: {
toggleSelector() {
this.showSelector = !this.showSelector
},
onFocus() {
this.showSelector = true
},
onBlur() {
setTimeout(() => {
this.showSelector = false
}, 153)
},
onSelectorClick(index) {
this.inputVal = this.filterCandidates[index]
this.showSelector = false
this.$emit('input', this.inputVal)
},
onInput() {
setTimeout(() => {
this.$emit('input', this.inputVal)
})
}
}
}
</script>
<style lang="scss" scoped>
.uni-combox {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
height: 40px;
flex-direction: row;
align-items: center;
// border-bottom: solid 1px #DDDDDD;
}
.uni-combox__label {
font-size: 16px;
line-height: 22px;
padding-right: 10px;
color: #999999;
}
.uni-combox__input-box {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
align-items: center;
}
.uni-combox__input {
flex: 1;
font-size: 16px;
height: 22px;
line-height: 22px;
}
.uni-combox__input-arrow {
padding: 10px;
}
.uni-combox__selector {
/* #ifndef APP-NVUE */
box-sizing: border-box;
/* #endif */
position: absolute;
top: 42px;
left: 0;
width: 100%;
background-color: #FFFFFF;
border-radius: 6px;
box-shadow: #DDDDDD 4px 4px 8px, #DDDDDD -4px -4px 8px;
z-index: 2;
}
.uni-combox__selector-scroll {
/* #ifndef APP-NVUE */
max-height: 200px;
box-sizing: border-box;
/* #endif */
}
.uni-combox__selector::before {
/* #ifndef APP-NVUE */
content: '';
/* #endif */
position: absolute;
width: 0;
height: 0;
border-bottom: solid 6px #FFFFFF;
border-right: solid 6px transparent;
border-left: solid 6px transparent;
left: 50%;
top: -6px;
margin-left: -6px;
}
.uni-combox__selector-empty,
.uni-combox__selector-item {
/* #ifndef APP-NVUE */
display: flex;
cursor: pointer;
/* #endif */
line-height: 36px;
font-size: 14px;
text-align: center;
border-bottom: solid 1px #DDDDDD;
margin: 0px 10px;
}
.uni-combox__selector-empty:last-child,
.uni-combox__selector-item:last-child {
/* #ifndef APP-NVUE */
border-bottom: none;
/* #endif */
}
</style>
<template>
<view class="uni-combox">
<view v-if="label" class="uni-combox__label" :style="labelStyle">
<text>{{label}}</text>
</view>
<view class="uni-combox__input-box">
<input class="uni-combox__input" type="text" :placeholder="placeholder" v-model="inputVal" @input="onInput"
@focus="onFocus" @blur="onBlur" />
<uni-icons class="uni-combox__input-arrow" type="arrowdown" size="14" @click="toggleSelector"></uni-icons>
<view class="uni-combox__selector" v-if="showSelector">
<scroll-view scroll-y="true" class="uni-combox__selector-scroll">
<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
<text>{{emptyTips}}</text>
</view>
<view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index" @click="onSelectorClick(index)">
<text>{{item}}</text>
</view>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
/**
* Combox 组合输入框
* @description 组合输入框一般用于既可以输入也可以选择的场景
* @tutorial https://ext.dcloud.net.cn/plugin?id=1261
* @property {String} label 左侧文字
* @property {String} labelWidth 左侧内容宽度
* @property {String} placeholder 输入框占位符
* @property {Array} candidates 候选项列表
* @property {String} emptyTips 筛选结果为空时显示的文字
* @property {String} value 组合框的值
*/
export default {
name: 'uniCombox',
props: {
label: {
type: String,
default: ''
},
labelWidth: {
type: String,
default: 'auto'
},
placeholder: {
type: String,
default: ''
},
candidates: {
type: Array,
default () {
return []
}
},
emptyTips: {
type: String,
default: '无匹配项'
},
value: {
type: [String, Number],
default: ''
}
},
data() {
return {
showSelector: false,
inputVal: ''
}
},
computed: {
labelStyle() {
if (this.labelWidth === 'auto') {
return {}
}
return {
width: this.labelWidth
}
},
filterCandidates() {
return this.candidates.filter((item) => {
return item.toString().indexOf(this.inputVal) > -1
})
},
filterCandidatesLength() {
return this.filterCandidates.length
}
},
watch: {
value: {
handler(newVal) {
this.inputVal = newVal
},
immediate: true
}
},
methods: {
toggleSelector() {
this.showSelector = !this.showSelector
},
onFocus() {
this.showSelector = true
},
onBlur() {
setTimeout(() => {
this.showSelector = false
}, 153)
},
onSelectorClick(index) {
this.inputVal = this.filterCandidates[index]
this.showSelector = false
this.$emit('input', this.inputVal)
},
onInput() {
setTimeout(() => {
this.$emit('input', this.inputVal)
})
}
}
}
</script>
<style lang="scss" scoped>
.uni-combox {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
height: 40px;
flex-direction: row;
align-items: center;
// border-bottom: solid 1px #DDDDDD;
}
.uni-combox__label {
font-size: 16px;
line-height: 22px;
padding-right: 10px;
color: #999999;
}
.uni-combox__input-box {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
align-items: center;
}
.uni-combox__input {
flex: 1;
font-size: 16px;
height: 22px;
line-height: 22px;
}
.uni-combox__input-arrow {
padding: 10px;
}
.uni-combox__selector {
/* #ifndef APP-NVUE */
box-sizing: border-box;
/* #endif */
position: absolute;
top: 42px;
left: 0;
width: 100%;
background-color: #FFFFFF;
border-radius: 6px;
box-shadow: #DDDDDD 4px 4px 8px, #DDDDDD -4px -4px 8px;
z-index: 2;
}
.uni-combox__selector-scroll {
/* #ifndef APP-NVUE */
max-height: 200px;
box-sizing: border-box;
/* #endif */
}
.uni-combox__selector::before {
/* #ifndef APP-NVUE */
content: '';
/* #endif */
position: absolute;
width: 0;
height: 0;
border-bottom: solid 6px #FFFFFF;
border-right: solid 6px transparent;
border-left: solid 6px transparent;
left: 50%;
top: -6px;
margin-left: -6px;
}
.uni-combox__selector-empty,
.uni-combox__selector-item {
/* #ifndef APP-NVUE */
display: flex;
cursor: pointer;
/* #endif */
line-height: 36px;
font-size: 14px;
text-align: center;
border-bottom: solid 1px #DDDDDD;
margin: 0px 10px;
}
.uni-combox__selector-empty:last-child,
.uni-combox__selector-item:last-child {
/* #ifndef APP-NVUE */
border-bottom: none;
/* #endif */
}
</style>
{
"id": "uni-combox",
"displayName": "Combox 组合框",
"version": "0.0.4",
"description": "可以选择也可以输入的表单项 ",
"keywords": [
"combox",
"组合框",
"可下拉输入框",
"select"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "n"
},
"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"
}
}
}
}
{
"id": "uni-combox",
"displayName": "uni-combox 组合框",
"version": "0.0.6",
"description": "可以选择也可以输入的表单项 ",
"keywords": [
"uni-ui",
"uniui",
"combox",
"组合框",
"select"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [
"uni-icons"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "n"
},
"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"
}
}
}
}
}
\ No newline at end of file
## Combox 组合框
> **组件名:uni-combox**
> 代码块: `uCombox`
......@@ -44,3 +45,8 @@
## 组件示例
点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/combox/combox](https://hellouniapp.dcloud.net.cn/pages/extUI/combox/combox)
\ No newline at end of file
{
"passwordSecret": "passwordSecret-demo",
"tokenSecret": "tokenSecret-demo",
"tokenExpiresIn": 7200,
"tokenExpiresThreshold": 600,
"passwordErrorLimit": 6,
"bindTokenToDevice": false,
"passwordErrorRetryTime": 3600,
"autoSetInviteCode": false,
"forceInviteCode": false,
"app-plus": {
"tokenExpiresIn": 2592000,
"oauth": {
"weixin": {
"appid": "填写来源微信开放平台https://open.weixin.qq.com/创建的应用的appid",
"appsecret": "填写来源微信开放平台https://open.weixin.qq.com/创建的应用的appsecret"
},
"apple": {
"bundleId": "苹果开发者后台获取的bundleId"
}
}
},
"mp-weixin": {
"oauth": {
"weixin": {
"appid": "微信小程序登录所用的appid、appsecret需要在对应的小程序管理控制台获取",
"appsecret": "微信小程序后台获取的appsecret"
}
}
},
"mp-alipay": {
"oauth": {
"alipay": {
"appid": "支付宝小程序登录用到的appid、privateKey请参考支付宝小程序的文档进行设置或者获取,https://opendocs.alipay.com/open/291/105971#LDsXr",
"privateKey": "支付宝小程序登录用到的appid、privateKey请参考支付宝小程序的文档进行设置或者获取,https://opendocs.alipay.com/open/291/105971#LDsXr"
}
}
},
"service": {
"sms": {
"name": "应用名称,对应短信模版的name",
"codeExpiresIn": 300,
"smsKey": "短信密钥key,开通短信服务处可以看到",
"smsSecret": "短信密钥secret,开通短信服务处可以看到"
},
"univerify": {
"appid": "当前应用的appid,使用云函数URL化,此项必须配置",
"apiKey": "apiKey 和 apiSecret 在开发者中心获取,开发者中心:https://dev.dcloud.net.cn/uniLogin/index?type=0,文档:https://ask.dcloud.net.cn/article/37965",
"apiSecret": ""
}
}
}
\ No newline at end of file
{
"passwordSecret": "passwordSecret-demo",
"tokenSecret": "tokenSecret-demo",
"tokenExpiresIn": 7200,
"tokenExpiresThreshold": 600,
"passwordErrorLimit": 6,
"bindTokenToDevice": false,
"passwordErrorRetryTime": 3600,
"autoSetInviteCode": false,
"forceInviteCode": false,
"app-plus": {
"tokenExpiresIn": 2592000,
"oauth": {
"weixin": {
"appid": "wxffdd8fa6ec4ef2a0",
"appsecret": "6c9119430d7be0a147bcbbb73ef33acf"
},
"apple": {
"bundleId": "苹果开发者后台获取的bundleId"
}
}
},
"mp-weixin": {
"oauth": {
"weixin": {
"appid": "wx81dbb061d2258234",
"appsecret": "51977820eb14cd71377d4048a1b4754e"
}
}
},
"mp-alipay": {
"oauth": {
"alipay": {
"appid": "支付宝小程序登录用到的appid、privateKey请参考支付宝小程序的文档进行设置或者获取,https://opendocs.alipay.com/open/291/105971#LDsXr",
"privateKey": "支付宝小程序登录用到的appid、privateKey请参考支付宝小程序的文档进行设置或者获取,https://opendocs.alipay.com/open/291/105971#LDsXr"
}
}
},
"service": {
"sms": {
"name": "应用名称,对应短信模版的name",
"codeExpiresIn": 300,
"smsKey": "短信密钥key,开通短信服务处可以看到",
"smsSecret": "短信密钥secret,开通短信服务处可以看到"
},
"univerify": {
"appid": "__UNI__03B096E",
"apiKey": "3fc28519d90d74173bcecf2daf4ffcc4",
"apiSecret": "dd793e5bc4b372ce932f35bbb4c5d61b"
}
}
}
## 1.0.5(2021-06-18)
- 修复 uni-countdown 重复赋值跳两秒的 bug
## 1.0.4(2021-05-12)
- 新增 组件示例地址
## 1.0.3(2021-05-08)
- 修复 uni-countdown 不能控制倒计时的 bug
## 1.0.2(2021-02-04)
- 调整为uni_modules目录规范
{
"id": "uni-countdown",
"displayName": "Countdown 倒计时",
"version": "1.0.2",
"displayName": "uni-countdown 倒计时",
"version": "1.0.5",
"description": "CountDown 倒计时组件",
"keywords": [
"countdown",
"uni-ui",
"uniui",
"countdown",
"倒计时"
],
"repository": "https://github.com/dcloudio/uni-ui",
......
## CountDown 倒计时
> **组件名:uni-countdown**
> 代码块: `uCountDown`
......@@ -42,9 +43,15 @@
|second |Number |0 |秒 |
|showDay |Boolean|true |是否显示天数 |
|showColon |Boolean|true |是否以冒号为分隔符 |
|start |Boolean|true |是否初始化组件后就开始倒计时|
### Countdown Events
|事件称名 |说明 |返回值 |
|:-: |:-: |:-: |
|@timeup|倒计时时间到触发事件 |- |
## 组件示例
点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/countdown/countdown](https://hellouniapp.dcloud.net.cn/pages/extUI/countdown/countdown)
\ No newline at end of file
## 0.1.4(2021-04-09)
- 修复 nvue 下无法选中的问题
## 0.1.3(2021-03-22)
- 新增 disabled属性
## 0.1.2(2021-02-24)
- 优化 默认颜色显示
## 0.1.1(2021-02-24)
- 新增 支持nvue
## 0.1.0(2021-02-18)
- “暂无数据”显示居中
## 0.2.0(2021-07-13)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 0.1.11(2021-07-06)
- 优化 删除无用日志
## 0.1.10(2021-07-05)
- 修复 由 0.1.9 引起的非 nvue 端图标不显示的问题
## 0.1.9(2021-07-05)
- 修复 nvue 黑框样式问题
## 0.1.8(2021-06-28)
- 修复 selectedTextColor 属性不生效的Bug
## 0.1.7(2021-06-02)
- 新增 map 属性,可以方便映射text/value属性
## 0.1.6(2021-05-26)
- 修复 不关联服务空间的情况下组件报错的Bug
## 0.1.5(2021-05-12)
- 新增 组件示例地址
## 0.1.4(2021-04-09)
- 修复 nvue 下无法选中的问题
## 0.1.3(2021-03-22)
- 新增 disabled属性
## 0.1.2(2021-02-24)
- 优化 默认颜色显示
## 0.1.1(2021-02-24)
- 新增 支持nvue
## 0.1.0(2021-02-18)
- “暂无数据”显示居中
......@@ -263,6 +263,7 @@ export default {
|selectedColor|String |- |#007aff|选中颜色|
|selectedTextColor|String |- |#333 |选中文本颜色,如不填写则自动显示|
|emptyText |String |- |暂无数据 |没有数据时显示的文字 ,本地数据无效|
|map |Object |- |{text:'text',value:'value'} |字段映射,将text/value映射到数据中的其他字段|
#### Localdata Options
......@@ -288,6 +289,11 @@ export default {
| 事件名 | 事件说明 | 返回参数|
| :-: | :-: | :-: |
| @chage| 选中状态改变时触发事件 | - |
| @change| 选中状态改变时触发事件 | - |
## 组件示例
点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/data-checkbox/data-checkbox](https://hellouniapp.dcloud.net.cn/pages/extUI/data-checkbox/data-checkbox)
\ No newline at end of file
## 0.3.1(2021-04-15)
- 修复 本地数据概率无法回显时问题
## 0.3.0(2021-04-07)
- 新增 支持云端非树形表结构数据
- 修复 根节点 parent_field 字段等于null时选择界面错乱问题
## 0.2.0(2021-03-15)
- 修复 nodeclick、popupopened、popupclosed事件无法触发的问题
## 0.1.9(2021-03-09)
- 修复 微信小程序某些情况下无法选择的问题
## 0.1.8(2021-02-05)
- 优化 部分样式在nvue上的兼容表现
## 0.1.7(2021-02-05)
- 调整为uni_modules目录规范
## 0.4.0(2021-07-13)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 0.3.5(2021-06-04)
- 修复 无法加载云端数据的问题
## 0.3.4(2021-05-28)
- 修复 v-model无效问题
- 修复 loaddata 为空数据组时加载时间过长问题
- 修复 上个版本引出的本地数据无法选择带有children的2级节点
## 0.3.3(2021-05-12)
- 新增 组件示例地址
## 0.3.2(2021-04-22)
- 修复 非树形数据有 where 属性查询报错的问题
## 0.3.1(2021-04-15)
- 修复 本地数据概率无法回显时问题
## 0.3.0(2021-04-07)
- 新增 支持云端非树形表结构数据
- 修复 根节点 parent_field 字段等于null时选择界面错乱问题
## 0.2.0(2021-03-15)
- 修复 nodeclick、popupopened、popupclosed事件无法触发的问题
## 0.1.9(2021-03-09)
- 修复 微信小程序某些情况下无法选择的问题
## 0.1.8(2021-02-05)
- 优化 部分样式在nvue上的兼容表现
## 0.1.7(2021-02-05)
- 调整为uni_modules目录规范
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册