提交 e57d3b9c 编写于 作者: Y yurj26

refactor: support uvue and vue

上级 76cf1a30
/* #ifndef APP-PLUS-NVUE */
/* page {
min-height: 100%;
height: auto;
} */
/* #endif */
/* 解决头条小程序字体图标不显示问题,因为头条运行时自动插入了span标签,且有全局字体 */
/* #ifdef MP-TOUTIAO */
/* text :not(view) {
font-family: uniicons;
} */
/* #endif */
.uni-icon {
/* font-family: uniicons;
font-weight: normal; */
width: 14px;
height: 14px;
}
.uni-container {
padding: 0 15px 15px;
background-color: #f8f8f8;
}
.uni-header-logo {
/* #ifdef H5 */
display: flex;
/* #endif */
padding: 15px 15px;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 10rpx;
}
.uni-header-image {
width: 80px;
height: 80px;
}
.uni-hello-text {
margin-bottom: 20px;
color: #7A7E83;
}
.hello-text {
color: #7A7E83;
font-size: 14px;
line-height: 20px;
}
.hello-link {
color: #7A7E83;
font-size: 14px;
line-height: 20px;
}
.uni-panel {
margin-bottom: 12px;
}
.text-disabled {
color: #a0a0a0;
}
.uni-panel-h {
display: flex;
background-color: #ffffff;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
padding: 12px;
}
/*
.uni-panel-h:active {
background-color: #f8f8f8;
}
*/
.uni-panel-h-on {
background-color: #f0f0f0;
}
.uni-panel-text {
color: #000000;
font-size: 14px;
font-weight: normal;
}
.uni-panel-icon {
margin-left: 15px;
color: #999999;
font-size: 14px;
font-weight: normal;
transform: rotate(0deg);
transition-duration: 0s;
transition-property: transform;
}
.uni-panel-icon-on {
transform: rotate(180deg);
}
.uni-navigate-item {
display: flex;
flex-direction: row;
align-items: center;
background-color: #FFFFFF;
border-top-style: solid;
border-top-color: #f0f0f0;
border-top-width: 1px;
padding: 12px;
justify-content: space-between;
/* #ifdef H5 */
/* cursor: pointer; */
/* #endif */
}
.uni-navigate-item-active {
background-color: #f8f8f8;
}
.uni-navigate-text {
color: #000000;
font-size: 14px;
font-weight: normal;
}
.uni-navigate-icon {
margin-left: 15px;
color: #999999;
font-size: 14px;
font-weight: normal;
}
\ No newline at end of file
@font-face {
font-family: uniicons;
font-weight: normal;
font-style: normal;
src: url('~@/static/uni.ttf') format('truetype');
}
/* #ifdef H5 */
.fix-left-window {
padding-left: var(--window-left);
}
.pc-hide {
display: none !important;
}
/* #endif */
/*通用 */
/* view{
font-size:28rpx;
line-height:1.8;
} */
progress, checkbox-group{
width: 100%;
}
form {
width: 100%;
}
.uni-flex {
display: flex;
flex-direction: row;
}
.uni-flex-item {
flex: 1;
}
.uni-row {
flex-direction: row;
}
.uni-column {
flex-direction: column;
}
.uni-link{
color:#576B95;
font-size:26rpx;
}
.uni-center{
text-align:center;
}
.uni-inline-item{
display: flex;
flex-direction: row;
align-items:center;
}
.uni-inline-item text{
margin-right: 20rpx;
}
.uni-inline-item text:last-child{
margin-right: 0rpx;
margin-left: 20rpx;
}
/* page */
.common-page-head{
padding:35rpx;
text-align: center;
}
.common-page-head-title {
display: inline-block;
padding: 0 40rpx;
font-size: 30rpx;
height: 88rpx;
line-height: 88rpx;
color: #BEBEBE;
box-sizing: border-box;
border-bottom: 2rpx solid #D8D8D8;
}
.uni-padding-wrap{
/* width:690rpx; */
padding:0 30rpx;
}
.uni-word {
text-align: center;
padding:200rpx 100rpx;
}
.uni-title {
font-size:30rpx;
font-weight:500;
padding:20rpx 0;
line-height:1.5;
}
.uni-text{
font-size:28rpx;
}
.uni-title text{
font-size:24rpx;
color:#888;
}
.uni-text-gray{
color: #ccc;
}
.uni-text-small {
font-size:24rpx;
}
.uni-common-mb{
margin-bottom:30rpx;
}
.uni-common-pb{
padding-bottom:30rpx;
}
.uni-common-pl{
padding-left:30rpx;
}
.uni-common-mt{
margin-top:30rpx;
}
/* 背景色 */
.uni-bg-red{
background:#F76260; color:#FFF;
}
.uni-bg-green{
background:#09BB07; color:#FFF;
}
.uni-bg-blue{
background:#007AFF; color:#FFF;
}
/* 标题 */
.uni-h1 {font-size: 80rpx; font-weight:700;}
.uni-h2 {font-size: 60rpx; font-weight:700;}
.uni-h3 {font-size: 48rpx; font-weight:700;}
.uni-h4 {font-size: 36rpx; font-weight:700;}
.uni-h5 {font-size: 28rpx; color: #8f8f94;}
.uni-h6 {font-size: 24rpx; color: #8f8f94;}
.uni-bold{font-weight:bold;}
/* 文本溢出隐藏 */
.uni-ellipsis {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
/* 竖向百分百按钮 */
.uni-btn-v{
padding:10rpx 0;
}
.uni-btn-v button{margin:20rpx 0;}
/* 表单 */
.uni-form-item{
display:flex;
width:100%;
padding:10rpx 0;
}
.uni-form-item .title{
padding:10rpx 25rpx;
}
.uni-label {
width: 210rpx;
word-wrap: break-word;
word-break: break-all;
text-indent:20rpx;
}
.uni-input {
height: 50rpx;
padding: 15rpx 25rpx;
line-height:50rpx;
font-size:28rpx;
background:#FFF;
flex: 1;
}
radio-group, checkbox-group{
width:100%;
}
radio-group label, checkbox-group label{
padding-right:20rpx;
}
.uni-form-item .with-fun{
display:flex;
flex-wrap:nowrap;
background:#FFFFFF;
}
.uni-form-item .with-fun .uni-icon{
width:40px;
height:80rpx;
line-height:80rpx;
flex-shrink:0;
}
/* loadmore */
.uni-loadmore{
height:80rpx;
line-height:80rpx;
text-align:center;
padding-bottom:30rpx;
}
/*数字角标*/
/* .uni-badge,
.uni-badge-default {
font-family: 'Helvetica Neue', Helvetica, sans-serif;
font-size: 12px;
line-height: 1;
display: inline-block;
padding: 3px 6px;
color: #333;
border-radius: 100px;
background-color: rgba(0, 0, 0, .15);
} */
.uni-badge.uni-badge-inverted {
padding: 0 5px 0 0;
color: #929292;
background-color: transparent
}
.uni-badge-primary {
color: #fff;
background-color: #007aff
}
.uni-badge-blue.uni-badge-inverted,
.uni-badge-primary.uni-badge-inverted {
color: #007aff;
background-color: transparent
}
.uni-badge-green,
.uni-badge-success {
color: #fff;
background-color: #4cd964;
}
.uni-badge-green.uni-badge-inverted,
.uni-badge-success.uni-badge-inverted {
color: #4cd964;
background-color: transparent
}
.uni-badge-warning,
.uni-badge-yellow {
color: #fff;
background-color: #f0ad4e
}
.uni-badge-warning.uni-badge-inverted,
.uni-badge-yellow.uni-badge-inverted {
color: #f0ad4e;
background-color: transparent
}
.uni-badge-danger,
.uni-badge-red {
color: #fff;
background-color: #dd524d
}
.uni-badge-danger.uni-badge-inverted,
.uni-badge-red.uni-badge-inverted {
color: #dd524d;
background-color: transparent
}
.uni-badge-purple,
.uni-badge-royal {
color: #fff;
background-color: #8a6de9
}
.uni-badge-purple.uni-badge-inverted,
.uni-badge-royal.uni-badge-inverted {
color: #8a6de9;
background-color: transparent
}
/*折叠面板 */
.uni-collapse-content {
height: 0;
width: 100%;
overflow: hidden;
}
.uni-collapse-content.uni-active {
height: auto;
}
/*卡片视图 */
.uni-card {
background: #fff;
border-radius: 8rpx;
margin:20rpx 0;
position: relative;
/* box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, .3); */
}
.uni-card-content {
font-size: 30rpx;
}
.uni-card-content.image-view{
width: 100%;
margin: 0;
}
.uni-card-content-inner {
position: relative;
padding: 30rpx;
}
.uni-card-footer,
.uni-card-header {
position: relative;
display: flex;
min-height: 50rpx;
padding: 20rpx 30rpx;
justify-content: space-between;
align-items: center;
}
.uni-card-header {
font-size: 36rpx;
}
.uni-card-footer {
color: #6d6d72;
}
.uni-card-footer:before,
.uni-card-header:after {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 2rpx;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.uni-card-header:after {
top: auto;
bottom: 0;
}
.uni-card-media {
justify-content: flex-start;
}
.uni-card-media-logo {
height: 84rpx;
width: 84rpx;
margin-right: 20rpx;
}
.uni-card-media-body {
height: 84rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
.uni-card-media-text-top {
line-height: 36rpx;
font-size: 34rpx;
}
.uni-card-media-text-bottom {
line-height: 30rpx;
font-size: 28rpx;
color: #8f8f94;
}
.uni-card-link {
color: #007AFF;
}
/* 列表 */
.uni-list {
background-color: #FFFFFF;
position: relative;
width: 100%;
display: flex;
flex-direction: column;
}
.uni-list:after {
position: absolute;
z-index: 10;
right: 0;
bottom: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
/* .uni-list::before {
position: absolute;
z-index: 10;
right: 0;
top: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
} */
.uni-list-cell {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.uni-list-cell-hover {
background-color: #eee;
}
.uni-list-cell-pd {
padding: 22rpx 30rpx;
}
.uni-list-cell-left {
white-space: nowrap;
font-size:28rpx;
padding: 0 30rpx;
}
.uni-list-cell-db,
.uni-list-cell-right {
flex: 1;
}
.uni-list-cell::after {
position: absolute;
z-index: 3;
right: 0;
bottom: 0;
left: 30rpx;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.uni-list .uni-list-cell:last-child::after {
height: 0rpx;
}
.uni-list-cell-last.uni-list-cell::after {
height: 0rpx;
}
.uni-list-cell-divider {
position: relative;
display: flex;
color: #999;
background-color: #f7f7f7;
padding:15rpx 20rpx;
}
.uni-list-cell-divider::before {
position: absolute;
right: 0;
top: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.uni-list-cell-divider::after {
position: absolute;
right: 0;
bottom: 0;
left: 0rpx;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.uni-list-cell-navigate {
font-size:30rpx;
padding: 22rpx 30rpx;
line-height: 48rpx;
position: relative;
display: flex;
box-sizing: border-box;
width: 100%;
flex: 1;
justify-content: space-between;
align-items: center;
}
.uni-list-cell-navigate {
padding-right: 36rpx;
}
.uni-navigate-badge {
padding-right: 50rpx;
}
.uni-list-cell-navigate.uni-navigate-right:after {
font-family: uniicons;
content: '\e583';
position: absolute;
right: 24rpx;
top: 50%;
color: #bbb;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.uni-list-cell-navigate.uni-navigate-bottom:after {
font-family: uniicons;
content: '\e581';
position: absolute;
right: 24rpx;
top: 50%;
color: #bbb;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.uni-list-cell-navigate.uni-navigate-bottom.uni-active::after {
font-family: uniicons;
content: '\e580';
position: absolute;
right: 24rpx;
top: 50%;
color: #bbb;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.uni-collapse.uni-list-cell {
flex-direction: column;
}
.uni-list-cell-navigate.uni-active {
background: #eee;
}
.uni-list.uni-collapse {
box-sizing: border-box;
height: 0;
overflow: hidden;
}
.uni-collapse .uni-list-cell {
padding-left: 20rpx;
}
.uni-collapse .uni-list-cell::after {
left: 52rpx;
}
.uni-list.uni-active {
height: auto;
}
/* 三行列表 */
.uni-triplex-row {
display: flex;
flex: 1;
width: 100%;
box-sizing: border-box;
flex-direction: row;
padding: 22rpx 30rpx;
}
.uni-triplex-right,
.uni-triplex-left {
display: flex;
flex-direction: column;
}
.uni-triplex-left {
width: 84%;
}
.uni-triplex-left .uni-title{
padding:8rpx 0;
}
.uni-triplex-left .uni-text, .uni-triplex-left .uni-text-small{color:#999999;}
.uni-triplex-right {
width: 16%;
text-align: right;
}
/* 图文列表 */
.uni-media-list {
padding: 22rpx 30rpx;
box-sizing: border-box;
display: flex;
width: 100%;
flex-direction: row;
}
.uni-navigate-right.uni-media-list {
padding-right: 74rpx;
}
.uni-pull-right {
flex-direction: row-reverse;
}
.uni-pull-right>.uni-media-list-logo {
margin-right: 0rpx;
margin-left: 20rpx;
}
.uni-media-list-logo {
height: 84rpx;
width: 84rpx;
margin-right: 20rpx;
}
.uni-media-list-logo image {
height: 100%;
width: 100%;
}
.uni-media-list-body {
height: 84rpx;
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
overflow: hidden;
}
.uni-media-list-text-top {
width: 100%;
line-height: 36rpx;
font-size: 30rpx;
}
.uni-media-list-text-bottom {
width: 100%;
line-height: 30rpx;
font-size: 26rpx;
color: #8f8f94;
}
/* 九宫格 */
.uni-grid-9 {
background: #f2f2f2;
width: 750rpx;
display: flex;
flex-direction: row;
flex-wrap: wrap;
border-top: 2rpx solid #eee;
}
.uni-grid-9-item {
width: 250rpx;
height: 200rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-bottom: 2rpx solid;
border-right: 2rpx solid;
border-color: #eee;
box-sizing: border-box;
}
.no-border-right {
border-right: none;
}
.uni-grid-9-image {
width: 100rpx;
height: 100rpx;
}
.uni-grid-9-text {
width: 250rpx;
line-height: 4rpx;
height: 40rpx;
text-align: center;
font-size: 30rpx;
}
.uni-grid-9-item-hover {
background: rgba(0, 0, 0, 0.1);
}
/* 上传 */
.uni-uploader {
flex: 1;
flex-direction: column;
}
.uni-uploader-head {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.uni-uploader-info {
color: #B2B2B2;
}
.uni-uploader-body {
margin-top: 16rpx;
}
.uni-uploader__files {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.uni-uploader__file {
margin: 10rpx;
width: 210rpx;
height: 210rpx;
}
.uni-uploader__img {
display: block;
width: 210rpx;
height: 210rpx;
}
.uni-uploader__input-box {
position: relative;
margin:10rpx;
width: 208rpx;
height: 208rpx;
border: 2rpx solid #D9D9D9;
}
.uni-uploader__input-box:before,
.uni-uploader__input-box:after {
content: " ";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #D9D9D9;
}
.uni-uploader__input-box:before {
width: 4rpx;
height: 79rpx;
}
.uni-uploader__input-box:after {
width: 79rpx;
height: 4rpx;
}
.uni-uploader__input-box:active {
border-color: #999999;
}
.uni-uploader__input-box:active:before,
.uni-uploader__input-box:active:after {
background-color: #999999;
}
.uni-uploader__input {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
/*问题反馈*/
.feedback-title {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20rpx;
color: #8f8f94;
font-size: 28rpx;
}
.feedback-star-view.feedback-title {
justify-content: flex-start;
margin: 0;
}
.feedback-quick {
position: relative;
padding-right: 40rpx;
}
.feedback-quick:after {
font-family: uniicons;
font-size: 40rpx;
content: '\e581';
position: absolute;
right: 0;
top: 50%;
color: #bbb;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.feedback-body {
background: #fff;
}
.feedback-textare {
height: 200rpx;
font-size: 34rpx;
line-height: 50rpx;
width: 100%;
box-sizing: border-box;
padding: 20rpx 30rpx 0;
}
.feedback-input {
font-size: 34rpx;
height: 50rpx;
min-height: 50rpx;
padding: 15rpx 20rpx;
line-height: 50rpx;
}
.feedback-uploader {
padding: 22rpx 20rpx;
}
.feedback-star {
font-family: uniicons;
font-size: 40rpx;
margin-left: 6rpx;
}
.feedback-star-view {
margin-left: 20rpx;
}
.feedback-star:after {
content: '\e408';
}
.feedback-star.active {
color: #FFB400;
}
.feedback-star.active:after {
content: '\e438';
}
.feedback-submit {
background: #007AFF;
color: #FFFFFF;
margin: 20rpx;
}
/* input group */
.uni-input-group {
position: relative;
padding: 0;
border: 0;
background-color: #fff;
}
.uni-input-group:before {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 2rpx;
content: '';
transform: scaleY(.5);
background-color: #c8c7cc;
}
.uni-input-group:after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 2rpx;
content: '';
transform: scaleY(.5);
background-color: #c8c7cc;
}
.uni-input-row {
position: relative;
display: flex;
flex-direction: row;
font-size:28rpx;
padding: 22rpx 30rpx;
justify-content: space-between;
}
.uni-input-group .uni-input-row:after {
position: absolute;
right: 0;
bottom: 0;
left: 30rpx;
height: 2rpx;
content: '';
transform: scaleY(.5);
background-color: #c8c7cc;
}
.uni-input-row label {
line-height: 70rpx;
}
/* textarea */
.uni-textarea{
width:100%;
background:#FFF;
}
.uni-textarea textarea{
width:96%;
padding:18rpx 2%;
line-height:1.6;
font-size:28rpx;
height:150rpx;
}
/* tab bar */
.uni-tab-bar {
display: flex;
flex: 1;
flex-direction: column;
overflow: hidden;
height: 100%;
}
.uni-tab-bar .list {
width: 750rpx;
height: 100%;
}
.uni-swiper-tab {
width: 100%;
white-space: nowrap;
line-height: 100rpx;
height: 100rpx;
border-bottom: 1px solid #c8c7cc;
}
.swiper-tab-list {
font-size: 30rpx;
width: 150rpx;
display: inline-block;
text-align: center;
color: #555;
}
.uni-tab-bar .active {
color: #007AFF;
}
.uni-tab-bar .swiper-box {
flex: 1;
width: 100%;
height: calc(100% - 100rpx);
}
.uni-tab-bar-loading{
padding:20rpx 0;
}
/* comment */
.uni-comment{padding:5rpx 0; display: flex; flex-grow:1; flex-direction: column;}
.uni-comment-list{flex-wrap:nowrap; padding:10rpx 0; margin:10rpx 0; width:100%; display: flex;}
.uni-comment-face{width:70rpx; height:70rpx; border-radius:100%; margin-right:20rpx; flex-shrink:0; overflow:hidden;}
.uni-comment-face image{width:100%; border-radius:100%;}
.uni-comment-body{width:100%;}
.uni-comment-top{line-height:1.5em; justify-content:space-between;}
.uni-comment-top text{color:#0A98D5; font-size:24rpx;}
.uni-comment-date{line-height:38rpx; flex-direction:row; justify-content:space-between; display:flex !important; flex-grow:1;}
.uni-comment-date view{color:#666666; font-size:24rpx; line-height:38rpx;}
.uni-comment-content{line-height:1.6em; font-size:28rpx; padding:8rpx 0;}
.uni-comment-replay-btn{background:#FFF; font-size:24rpx; line-height:28rpx; padding:5rpx 20rpx; border-radius:30rpx; color:#333 !important; margin:0 10rpx;}
/* swiper msg */
.uni-swiper-msg{width:100%; padding:12rpx 0; flex-wrap:nowrap; display:flex;}
.uni-swiper-msg-icon{width:50rpx; margin-right:20rpx;}
.uni-swiper-msg-icon image{width:100%; flex-shrink:0;}
.uni-swiper-msg swiper{width:100%; height:50rpx;}
.uni-swiper-msg swiper-item{line-height:50rpx;}
/* product */
.uni-product-list {
display: flex;
width: 100%;
flex-wrap: wrap;
flex-direction: row;
}
.uni-product {
padding: 20rpx;
display: flex;
flex-direction: column;
}
.image-view {
height: 330rpx;
width: 330rpx;
margin:12rpx 0;
}
.uni-product-image {
height: 330rpx;
width: 330rpx;
}
.uni-product-title {
width: 300rpx;
word-break: break-all;
display: -webkit-box;
overflow: hidden;
line-height:1.5;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.uni-product-price {
margin-top:10rpx;
font-size: 28rpx;
line-height:1.5;
position: relative;
}
.uni-product-price-original {
color: #e80080;
}
.uni-product-price-favour {
color: #888888;
text-decoration: line-through;
margin-left: 10rpx;
}
.uni-product-tip {
position: absolute;
right: 10rpx;
background-color: #ff3333;
color: #ffffff;
padding: 0 10rpx;
border-radius: 5rpx;
}
/* timeline */
.uni-timeline {
margin: 35rpx 0;
display: flex;
flex-direction: column;
position: relative;
}
.uni-timeline-item {
display: flex;
flex-direction: row;
position: relative;
padding-bottom: 20rpx;
box-sizing: border-box;
overflow: hidden;
}
.uni-timeline-item .uni-timeline-item-keynode {
width: 160rpx;
flex-shrink: 0;
box-sizing: border-box;
padding-right: 20rpx;
text-align: right;
line-height: 65rpx;
}
.uni-timeline-item .uni-timeline-item-divider {
flex-shrink: 0;
position: relative;
width: 30rpx;
height: 30rpx;
top: 15rpx;
border-radius: 50%;
background-color: #bbb;
}
.uni-timeline-item-divider::before,
.uni-timeline-item-divider::after {
position: absolute;
left: 15rpx;
width: 1rpx;
height: 100vh;
content: '';
background: inherit;
}
.uni-timeline-item-divider::before {
bottom: 100%;
}
.uni-timeline-item-divider::after {
top: 100%;
}
.uni-timeline-last-item .uni-timeline-item-divider:after {
display: none;
}
.uni-timeline-first-item .uni-timeline-item-divider:before {
display: none;
}
.uni-timeline-item .uni-timeline-item-content {
padding-left: 20rpx;
}
.uni-timeline-last-item .bottom-border::after{
display: none;
}
.uni-timeline-item-content .datetime{
color: #CCCCCC;
}
/* 自定义节点颜色 */
.uni-timeline-last-item .uni-timeline-item-divider{
background-color: #1AAD19;
}
/* uni-icon */
.uni-icon {
font-family: uniicons;
font-size: 24px;
font-weight: normal;
font-style: normal;
line-height: 1;
display: inline-block;
text-decoration: none;
-webkit-font-smoothing: antialiased;
}
.uni-icon.uni-active {
color: #007aff;
}
.uni-icon-contact:before {
content: '\e100';
}
.uni-icon-person:before {
content: '\e101';
}
.uni-icon-personadd:before {
content: '\e102';
}
.uni-icon-contact-filled:before {
content: '\e130';
}
.uni-icon-person-filled:before {
content: '\e131';
}
.uni-icon-personadd-filled:before {
content: '\e132';
}
.uni-icon-phone:before {
content: '\e200';
}
.uni-icon-email:before {
content: '\e201';
}
.uni-icon-chatbubble:before {
content: '\e202';
}
.uni-icon-chatboxes:before {
content: '\e203';
}
.uni-icon-phone-filled:before {
content: '\e230';
}
.uni-icon-email-filled:before {
content: '\e231';
}
.uni-icon-chatbubble-filled:before {
content: '\e232';
}
.uni-icon-chatboxes-filled:before {
content: '\e233';
}
.uni-icon-weibo:before {
content: '\e260';
}
.uni-icon-weixin:before {
content: '\e261';
}
.uni-icon-pengyouquan:before {
content: '\e262';
}
.uni-icon-chat:before {
content: '\e263';
}
.uni-icon-qq:before {
content: '\e264';
}
.uni-icon-videocam:before {
content: '\e300';
}
.uni-icon-camera:before {
content: '\e301';
}
.uni-icon-mic:before {
content: '\e302';
}
.uni-icon-location:before {
content: '\e303';
}
.uni-icon-mic-filled:before,
.uni-icon-speech:before {
content: '\e332';
}
.uni-icon-location-filled:before {
content: '\e333';
}
.uni-icon-micoff:before {
content: '\e360';
}
.uni-icon-image:before {
content: '\e363';
}
.uni-icon-map:before {
content: '\e364';
}
.uni-icon-compose:before {
content: '\e400';
}
.uni-icon-trash:before {
content: '\e401';
}
.uni-icon-upload:before {
content: '\e402';
}
.uni-icon-download:before {
content: '\e403';
}
.uni-icon-close:before {
content: '\e404';
}
.uni-icon-redo:before {
content: '\e405';
}
.uni-icon-undo:before {
content: '\e406';
}
.uni-icon-refresh:before {
content: '\e407';
}
.uni-icon-star:before {
content: '\e408';
}
.uni-icon-plus:before {
content: '\e409';
}
.uni-icon-minus:before {
content: '\e410';
}
.uni-icon-circle:before,
.uni-icon-checkbox:before {
content: '\e411';
}
.uni-icon-close-filled:before,
.uni-icon-clear:before {
content: '\e434';
}
.uni-icon-refresh-filled:before {
content: '\e437';
}
.uni-icon-star-filled:before {
content: '\e438';
}
.uni-icon-plus-filled:before {
content: '\e439';
}
.uni-icon-minus-filled:before {
content: '\e440';
}
.uni-icon-circle-filled:before {
content: '\e441';
}
.uni-icon-checkbox-filled:before {
content: '\e442';
}
.uni-icon-closeempty:before {
content: '\e460';
}
.uni-icon-refreshempty:before {
content: '\e461';
}
.uni-icon-reload:before {
content: '\e462';
}
.uni-icon-starhalf:before {
content: '\e463';
}
.uni-icon-spinner:before {
content: '\e464';
}
.uni-icon-spinner-cycle:before {
content: '\e465';
}
.uni-icon-search:before {
content: '\e466';
}
.uni-icon-plusempty:before {
content: '\e468';
}
.uni-icon-forward:before {
content: '\e470';
}
.uni-icon-back:before,
.uni-icon-left-nav:before {
content: '\e471';
}
.uni-icon-checkmarkempty:before {
content: '\e472';
}
.uni-icon-home:before {
content: '\e500';
}
.uni-icon-navigate:before {
content: '\e501';
}
.uni-icon-gear:before {
content: '\e502';
}
.uni-icon-paperplane:before {
content: '\e503';
}
.uni-icon-info:before {
content: '\e504';
}
.uni-icon-help:before {
content: '\e505';
}
.uni-icon-locked:before {
content: '\e506';
}
.uni-icon-more:before {
content: '\e507';
}
.uni-icon-flag:before {
content: '\e508';
}
.uni-icon-home-filled:before {
content: '\e530';
}
.uni-icon-gear-filled:before {
content: '\e532';
}
.uni-icon-info-filled:before {
content: '\e534';
}
.uni-icon-help-filled:before {
content: '\e535';
}
.uni-icon-more-filled:before {
content: '\e537';
}
.uni-icon-settings:before {
content: '\e560';
}
.uni-icon-list:before {
content: '\e562';
}
.uni-icon-bars:before {
content: '\e563';
}
.uni-icon-loop:before {
content: '\e565';
}
.uni-icon-paperclip:before {
content: '\e567';
}
.uni-icon-eye:before {
content: '\e568';
}
.uni-icon-arrowup:before {
content: '\e580';
}
.uni-icon-arrowdown:before {
content: '\e581';
}
.uni-icon-arrowleft:before {
content: '\e582';
}
.uni-icon-arrowright:before {
content: '\e583';
}
.uni-icon-arrowthinup:before {
content: '\e584';
}
.uni-icon-arrowthindown:before {
content: '\e585';
}
.uni-icon-arrowthinleft:before {
content: '\e586';
}
.uni-icon-arrowthinright:before {
content: '\e587';
}
.uni-icon-pulldown:before {
content: '\e588';
}
.uni-icon-scan:before {
content: "\e612";
}
/* 分界线 */
.uni-divider{
height: 110rpx;
display: flex;
align-items:center;
justify-content: center;
position: relative;
}
.uni-divider__content{
font-size: 28rpx;
color: #999;
padding: 0 20rpx;
position: relative;
z-index: 101;
background: #F4F5F6;
}
.uni-divider__line{
background-color: #CCCCCC;
height: 1px;
width: 100%;
position: absolute;
z-index: 100;
top: 50%;
left: 0;
transform: translateY(50%);
}
.left-win-active text{
color: #007AFF !important;
}
.uni-padding-wrap {
padding: 0 30rpx;
}
.uni-title {
padding: 20rpx 0;
}
.uni-title-text {
font-size: 30rpx;
font-weight: bold;
}
.uni-subtitle-text {
margin-top: 10rpx;
font-size: 24rpx;
color: #888;
font-weight: bold;
}
.uni-common-mb {
margin-bottom: 30rpx;
}
.uni-common-pb {
padding-bottom: 30rpx;
}
.uni-common-pl {
padding-left: 30rpx;
}
.uni-common-mt {
margin-top: 30rpx;
}
.uni-hello-text {
color: #7A7E83;
line-height: 22px;
}
.uni-list {
background-color: #FFFFFF;
position: relative;
display: flex;
flex-direction: column;
border-bottom: 1px solid #c8c7cc;
}
.uni-list-cell {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.uni-list-cell-line {
border-bottom: 1px solid #c8c7cc;
}
.uni-list-cell-hover {
background-color: #eee;
}
.uni-list-cell-pd {
padding: 22rpx 30rpx 22rpx 0;
}
.uni-list-cell-left {
padding: 0 30rpx 0 20rpx;
}
.uni-list-cell-db,
.uni-list-cell-right {
flex: 1;
}
.uni-label {
width: 210rpx;
font-size: 28rpx;
/* word-wrap: break-word;
word-break: break-all;
text-indent:20rpx; */
}
.uni-input {
height: 50rpx;
padding: 15rpx 25rpx;
line-height: 50rpx;
font-size: 28rpx;
background: #FFF;
flex: 1;
box-sizing: content-box;
}
.uni-flex {
/* #ifdef H5 */
display: flex;
/* #endif */
flex-direction: row;
}
.uni-flex-item {
flex: 1;
}
.uni-row {
flex-direction: row;
}
.uni-column {
flex-direction: column;
}
/* 背景色 */
.uni-bg-red {
background: #F76260;
color: #FFF;
}
.uni-bg-green {
background: #09BB07;
color: #FFF;
}
.uni-bg-blue {
background: #007AFF;
color: #FFF;
}
.uni-btn-v {
padding: 10rpx 0;
}
.uni-btn {
margin-top: 20rpx;
}
.uni-link {
color: #576B95;
font-size: 26rpx;
}
.uni-center {
flex-direction: row;
justify-content: center;
}
/* textarea */
.uni-textarea-box {
background: #ffffff;
}
.uni-textarea {
padding: 18rpx;
line-height: 1.6;
font-size: 28rpx;
}
\ No newline at end of file
<template name="page-head">
<view class="common-page-head">
<view class="common-page-head-title">{{title}}</view>
</view>
</template>
<script>
export default {
name: "page-head",
props: {
title: {
type: String,
default: ""
}
}
}
</script>
<template name="page-head">
<view class="common-page-head">
<view class="common-page-head-title-box">
<text class="common-page-head-title">{{title}}</text>
</view>
</view>
</template>
<script>
export default {
name: "page-head",
props: {
title: {
type: String,
default: ""
}
}
}
</script>
<style>
.common-page-head {
display: flex;
padding: 35rpx;
flex-direction: row;
justify-content: center;
}
.common-page-head-title-box {
padding: 0 40rpx;
height: 88rpx;
border-bottom: 2rpx solid #D8D8D8;
}
.common-page-head-title {
line-height: 88rpx;
font-size: 30rpx;
color: #BEBEBE;
}
</style>
\ No newline at end of file
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif
\ No newline at end of file
}
\ No newline at end of file
......@@ -158,14 +158,14 @@
}
},
{
"path": "pages/test/index",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
{
"path" : "pages/SyntaxCase/basicTest",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
],
......
......@@ -8,15 +8,15 @@
<button @tap="changeAction(1)">测试action play</button>
<button @tap="changeAction(2)">测试action pause</button>
<button @tap="changeAction(3)">测试action stop</button>
<uts-animation-view ref="animView" :path="animUrl" :autoplay="autoplay" :loop="loop" :action="action"
<!-- <uts-animation-view ref="animView" :path="animUrl" :autoplay="autoplay" :loop="loop" :action="action"
:hidden="hidden" @bindended="testAnimEnd" @click="lottieClickTest" @longpress="lottieLongpressTest"
:style="{width:widthNum+'rpx',height:heightNum+'px',background:yanse}">
</uts-animation-view>
</uts-animation-view> -->
</div>
</template>
<script>
<script lang="ts">
export default {
data() {
......@@ -49,7 +49,7 @@
changeServerUrl: function() {
this.animUrl = "https://b.bdstatic.com/miniapp/images/lottie_example_one.json"
},
changeAction: function(type) {
changeAction: function(type: number) {
if (type == 1) {
this.action = "play"
} else if (type == 2) {
......@@ -61,21 +61,18 @@
changeLoop: function() {
this.loop = !this.loop
},
testAnimEnd: function(res) {
testAnimEnd: function() {
console.log("testAnimEnd");
console.log(res);
},
changeRepeat: function(res) {
this.$refs["animView"].updateRepeatConfig("RESTART");
changeRepeat: function() {
// this.$refs["animView"].updateRepeatConfig("RESTART");
},
lottieClickTest: function(res) {
lottieClickTest: function() {
console.log("lottieClickTest");
console.log(res);
},
lottieLongpressTest: function(res) {
lottieLongpressTest: function() {
console.log("lottieClickTest");
console.log(res);
},
}
}
......
<template>
<view>
<page-head :title="title"></page-head>
<uni-list>
<uni-list-item @tap="gotoTencentLocation" title="腾讯定位sdk集成示例" class="itemButton" :clickable="true" link/>
<uni-list-item @tap="gotoToast" title="Toast示例" class="itemButton" :clickable="true" link/>
<uni-list-item @tap="gotoLottie" title="Lottie动画示例" class="itemButton" :clickable="true" link/>
</uni-list>
</view>
</template>
<script>
import {
checkHasIntegration
} from "@/uni_modules/uts-tencentgeolocation";
import {
checkHasLottieIntegration
} from "@/uni_modules/uts-animation-view";
export default {
data() {
return {
title: 'SDK集成示例',
}
},
methods: {
gotoToast:function(e){
uni.navigateTo({
url:'/pages/SDKIntegration/Toast/Toast'
})
},
gotoLottie:function(e){
if(checkHasLottieIntegration()){
uni.navigateTo({
url:'/pages/SDKIntegration/Lottie/index'
})
}else{
uni.showToast({
icon:'none',
title:'需要在自定义基座中运行'
})
}
},
gotoTencentLocation:function(e){
let ret = checkHasIntegration();
if(!ret){
uni.showToast({
icon:'none',
title:'需要在自定义基座中运行'
})
}else{
uni.navigateTo({
url:'/pages/SDKIntegration/TencentLocation/TencentLocation'
})
}
},
gotoTencentMap:function(e){
uni.navigateTo({
url:'/pages/SDKIntegration/TencentMap/TencentMap'
})
}
}
}
</script>
<style>
</style>
<template>
<view class="uni-container">
<page-head :title="title"></page-head>
<view class="uni-panel" v-for="(item, index) in list" :key="index">
<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="goDetailPage(item)"
hover-class="uni-navigate-item-active">
<text class="uni-panel-text">{{item.name}}</text>
<image :src="arrowRightIcon" class="uni-icon"></image>
</view>
</view>
</view>
</template>
<script lang="ts">
// import {
// checkHasIntegration
// } from "@/uni_modules/uts-tencentgeolocation";
// import {
// checkHasLottieIntegration
// } from "@/uni_modules/uts-animation-view";
type ListItem = {
name : string,
open : boolean,
function ?: string,
url ?: string
}
export default {
data() {
return {
title: 'SDK集成示例',
list: [{
name: "腾讯定位sdk集成示例",
function: "gotoTencentLocation"
},
{
name: "Toast示例",
url: "SDKIntegration/Toast/Toast"
},
{
name: "Lottie动画示例",
function: "gotoLottie"
}
] as ListItem[],
arrowRightIcon: '/static/icons/arrow-right.png',
}
},
methods: {
goDetailPage(e : ListItem) {
if (e.function != null) {
const funName = e.function
switch (funName) {
case 'gotoTencentLocation':
this.gotoTencentLocation()
break
case 'gotoLottie':
this.gotoLottie()
break
}
return
}
uni.navigateTo({
url: `/pages/${e.url!}`
})
},
gotoLottie: function () {
// if (checkHasLottieIntegration()) {
// uni.navigateTo({
// url: '/pages/SDKIntegration/Lottie/index'
// })
// } else {
// uni.showToast({
// icon: 'none',
// title: '需要在自定义基座中运行'
// })
// }
},
gotoTencentLocation: function () {
// let ret = checkHasIntegration();
// if (!ret) {
// uni.showToast({
// icon: 'none',
// title: '需要在自定义基座中运行'
// })
// } else {
// uni.navigateTo({
// url: '/pages/SDKIntegration/TencentLocation/TencentLocation'
// })
// }
},
gotoTencentMap: function () {
uni.navigateTo({
url: '/pages/SDKIntegration/TencentMap/TencentMap'
})
}
}
}
</script>
<style>
@import '@/common/uni-uvue.css';
</style>
\ No newline at end of file
<template>
<view>
<page-head :title="title"></page-head>
<uni-list>
<uni-list-item @tap="gotoTencentLocation" title="腾讯定位sdk集成示例" class="itemButton" :clickable="true" link/>
<uni-list-item @tap="gotoToast" title="Toast示例" class="itemButton" :clickable="true" link/>
<uni-list-item @tap="gotoLottie" title="Lottie动画示例" class="itemButton" :clickable="true" link/>
</uni-list>
</view>
</template>
<script>
import {
checkHasIntegration
} from "@/uni_modules/uts-tencentgeolocation";
import {
checkHasLottieIntegration
} from "@/uni_modules/uts-animation-view";
export default {
data() {
return {
title: 'SDK集成示例',
}
},
methods: {
gotoToast:function(e){
uni.navigateTo({
url:'/pages/SDKIntegration/Toast/Toast'
})
},
gotoLottie:function(e){
if(checkHasLottieIntegration()){
uni.navigateTo({
url:'/pages/SDKIntegration/Lottie/index'
})
}else{
uni.showToast({
icon:'none',
title:'需要在自定义基座中运行'
})
}
},
gotoTencentLocation:function(e){
let ret = checkHasIntegration();
if(!ret){
uni.showToast({
icon:'none',
title:'需要在自定义基座中运行'
})
}else{
uni.navigateTo({
url:'/pages/SDKIntegration/TencentLocation/TencentLocation'
})
}
},
gotoTencentMap:function(e){
uni.navigateTo({
url:'/pages/SDKIntegration/TencentMap/TencentMap'
})
}
}
}
</script>
<style>
</style>
<template>
<view class="uni-container">
<page-head :title="title"></page-head>
<view class="uni-panel" v-for="(item, index) in list" :key="index">
<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="goDetailPage(item)" hover-class="uni-navigate-item-active">
<text class="uni-panel-text">{{item.name}}</text>
<image :src="arrowRightIcon" class="uni-icon"></image>
</view>
</view>
</view>
</template>
<script>
import {
checkHasIntegration
} from "@/uni_modules/uts-tencentgeolocation";
import {
checkHasLottieIntegration
} from "@/uni_modules/uts-animation-view";
export default {
data() {
return {
title: 'SDK集成示例',
list: [{
name: "腾讯定位sdk集成示例",
function: "gotoTencentLocation"
},
{
name: "Toast示例",
url: "SDKIntegration/Toast/Toast"
},
{
name: "Lottie动画示例",
function: "gotoLottie"
}
],
arrowRightIcon: '/static/icons/arrow-right.png',
}
},
methods: {
goDetailPage(e) {
if (e.function) {
this[e.function]()
return
}
uni.navigateTo({
url: `/pages/${e.url}`
})
},
gotoLottie: function(e) {
if (checkHasLottieIntegration()) {
uni.navigateTo({
url: '/pages/SDKIntegration/Lottie/index'
})
} else {
uni.showToast({
icon: 'none',
title: '需要在自定义基座中运行'
})
}
},
gotoTencentLocation: function(e) {
let ret = checkHasIntegration();
if (!ret) {
uni.showToast({
icon: 'none',
title: '需要在自定义基座中运行'
})
} else {
uni.navigateTo({
url: '/pages/SDKIntegration/TencentLocation/TencentLocation'
})
}
},
gotoTencentMap: function(e) {
uni.navigateTo({
url: '/pages/SDKIntegration/TencentMap/TencentMap'
})
}
}
}
</script>
<style>
@import '@/common/uni-uvue.css';
.uni-container {
min-height: 100%;
}
</style>
\ No newline at end of file
......@@ -22,13 +22,13 @@
</template>
<script>
import {
checkHasIntegration,
requestPremission,
getLocation,
watchPosition,
clearWatch
} from "@/uni_modules/uts-tencentgeolocation";
// import {
// checkHasIntegration,
// requestPremission,
// getLocation,
// watchPosition,
// clearWatch
// } from "../../../uni_modules/uts-tencentgeolocation";
export default {
data() {
......@@ -38,58 +38,58 @@
},
methods: {
checkLocationPermission: function(e) {
requestPremission();
checkLocationPermission: function() {
// requestPremission();
},
testGetlocation: function(e) {
testGetlocation: function() {
let startRet = getLocation({
geocode: true,
success: function(response) {
console.log(response);
var addressDesc = response.name + '-' + response.address
uni.showToast({
title: '执行结果:' + addressDesc,
icon: 'none'
});
},
fail: function(msg) {
uni.showToast({
title: msg,
icon: "none"
})
}
})
// let startRet = getLocation({
// geocode: true,
// success: function(response) {
// console.log(response);
// var addressDesc = response.name + '-' + response.address
// uni.showToast({
// title: '执行结果:' + addressDesc,
// icon: 'none'
// });
// },
// fail: function(msg) {
// uni.showToast({
// title: msg,
// icon: "none"
// })
// }
// })
if (!startRet) {
uni.showToast({
title: '定位启动失败,请检查配置',
icon: 'none'
});
}
// if (!startRet) {
// uni.showToast({
// title: '定位启动失败,请检查配置',
// icon: 'none'
// });
// }
},
testWatchPosition() {
watchPosition({
geocode: true,
success: function(response) {
console.log(response);
var addressDesc = response.name + '-' + response.address
uni.showToast({
title: '执行结果:' + addressDesc,
icon: 'none'
});
},
fail: function(msg) {
uni.showToast({
title: msg,
icon: "none"
})
}
})
// watchPosition({
// geocode: true,
// success: function(response) {
// console.log(response);
// var addressDesc = response.name + '-' + response.address
// uni.showToast({
// title: '执行结果:' + addressDesc,
// icon: 'none'
// });
// },
// fail: function(msg) {
// uni.showToast({
// title: msg,
// icon: "none"
// })
// }
// })
},
testClearWatch() {
clearWatch()
// clearWatch()
}
}
}
......
<template>
<view>
<button @click="testUtsSync">点击测试uts同步方法</button>
<view>测试return:
{{ format(testUtsSyncResult) }}
</view>
<button @click="testUtsSyncWithCallback">
点击测试uts带callback的同步方法
</button>
<view>测试return:{{ format(testUtsSyncWithCallbackResult.return) }}</view>
<view>测试success:{{ format(testUtsSyncWithCallbackResult.success) }}</view>
<view>测试complete:{{ format(testUtsSyncWithCallbackResult.complete) }}</view>
<button @click="testUtsAsync">点击测试uts异步方法</button>
<view>测试return:{{ format(testUtsAsyncResult.return) }}</view>
<view>测试success:{{ format(testUtsAsyncResult.success) }}</view>
<view>测试complete:{{ format(testUtsAsyncResult.complete) }}</view>
<button @click="testUtsClassConstructor">点击测试uts class构造函数</button>
<view>测试callback:{{ format(testUtsClassConstructorResult.callback) }}</view>
<button @click="testUtsClassStaticProp">点击测试uts class静态属性</button>
<view>测试value:{{ format(testUtsClassStaticPropResult) }}</view>
<button @click="testUtsClassStaticSyncWithCallback">
点击测试uts class静态方法
</button>
<view>测试return:{{ format(testUtsClassStaticSyncWithCallbackResult.return) }}</view>
<view>测试success:{{ format(testUtsClassStaticSyncWithCallbackResult.success) }}</view>
<view>测试complete:{{ format(testUtsClassStaticSyncWithCallbackResult.complete) }}</view>
<button @click="testUtsClassStaticAsync">点击测试uts class静态异步方法</button>
<view>测试return:{{ format(testUtsClassStaticAsyncResult.return) }}</view>
<view>测试success:{{ format(testUtsClassStaticAsyncResult.success) }}</view>
<view>测试complete:{{ format(testUtsClassStaticAsyncResult.complete) }}</view>
<button @click="testUtsClassProp">点击测试uts class实例属性</button>
<view>测试value:{{ format(testUtsClassPropResult) }}</view>
<button @click="testUtsClassSyncWithCallback">
点击测试uts class实例方法
</button>
<view>测试return:{{ format(testUtsClassSyncWithCallbackResult.return) }}</view>
<view>测试success:{{ format(testUtsClassSyncWithCallbackResult.success) }}</view>
<view>测试complete:{{ format(testUtsClassSyncWithCallbackResult.complete) }}</view>
<button @click="testUtsClassAsync">点击测试uts class实例异步方法</button>
<view>测试return:{{ format(testUtsClassAsyncResult.return) }}</view>
<view>测试success:{{ format(testUtsClassAsyncResult.success) }}</view>
<view>测试complete:{{ format(testUtsClassAsyncResult.complete) }}</view>
<button @click="testUtsClassInstance">点击测试uts方法返回类实例</button>
<view>测试prop:{{ format(testUtsClassInstanceResult.prop) }}</view>
<view>测试return:{{ format(testUtsClassInstanceResult.return) }}</view>
<view>测试success:{{ format(testUtsClassInstanceResult.success) }}</view>
<view>测试complete:{{ format(testUtsClassInstanceResult.complete) }}</view>
<view>测试callback:{{ format(testUtsClassInstanceResult.callback) }}</view>
<button @click="testAll">点击测试所有</button>
</view>
</template>
<script>
import {
MAX,
testSync,
testSyncWithCallback,
testAsync,
Test,
request,
} from "../../uni_modules/uts-syntaxcase";
let test
let id = 0
export default {
data() {
return {
testUtsSyncResult: null,
testUtsSyncWithCallbackResult: {
return: null,
success: null,
fail: null,
complete: null,
},
testUtsAsyncResult: {
return: null,
success: null,
fail: null,
complete: null,
},
testUtsClassConstructorResult: {
callback: null
},
testUtsClassStaticPropResult: null,
testUtsClassStaticSyncWithCallbackResult: {
return: null,
success: null,
fail: null,
complete: null,
},
testUtsClassStaticAsyncResult: {
return: null,
success: null,
fail: null,
complete: null,
},
testUtsClassPropResult: null,
testUtsClassSyncWithCallbackResult: {
return: null,
success: null,
fail: null,
complete: null,
},
testUtsClassAsyncResult: {
return: null,
success: null,
fail: null,
complete: null,
},
testUtsClassInstanceResult: {
prop: null,
return: null,
success: null,
fail: null,
complete: null,
callback: null
}
}
},
methods: {
format(v) {
return v == null ? "--" : v ? "通过" : "未通过";
},
testAll() {
this.testUtsSync();
this.testUtsSyncWithCallback();
this.testUtsAsync();
this.testUtsClassConstructor();
this.testUtsClassStaticProp();
this.testUtsClassStaticSyncWithCallback();
this.testUtsClassStaticAsync();
this.testUtsClassProp();
this.testUtsClassSyncWithCallback();
this.testUtsClassAsync();
this.testUtsClassInstance();
},
testUtsSync() {
this.testUtsSyncResult = false;
<template>
<view>
<button @click="testUtsSync">点击测试uts同步方法</button>
<view>测试return:
{{ format(testUtsSyncResult) }}
</view>
<button @click="testUtsSyncWithCallback">
点击测试uts带callback的同步方法
</button>
<view>测试return:{{ format(testUtsSyncWithCallbackResult.return) }}</view>
<view>测试success:{{ format(testUtsSyncWithCallbackResult.success) }}</view>
<view>测试complete:{{ format(testUtsSyncWithCallbackResult.complete) }}</view>
<!-- <button @click="testUtsAsync">点击测试uts异步方法</button>
<view>测试return:{{ format(testUtsAsyncResult.return) }}</view>
<view>测试success:{{ format(testUtsAsyncResult.success) }}</view>
<view>测试complete:{{ format(testUtsAsyncResult.complete) }}</view> -->
<button @click="testUtsClassConstructor">点击测试uts class构造函数</button>
<view>测试callback:{{ format(testUtsClassConstructorResult.callback) }}</view>
<button @click="testUtsClassStaticProp">点击测试uts class静态属性</button>
<view>测试value:{{ format(testUtsClassStaticPropResult) }}</view>
<button @click="testUtsClassStaticSyncWithCallback">
点击测试uts class静态方法
</button>
<view>测试return:{{ format(testUtsClassStaticSyncWithCallbackResult.return) }}</view>
<view>测试success:{{ format(testUtsClassStaticSyncWithCallbackResult.success) }}</view>
<view>测试complete:{{ format(testUtsClassStaticSyncWithCallbackResult.complete) }}</view>
<!-- <button @click="testUtsClassStaticAsync">点击测试uts class静态异步方法</button>
<view>测试return:{{ format(testUtsClassStaticAsyncResult.return) }}</view>
<view>测试success:{{ format(testUtsClassStaticAsyncResult.success) }}</view>
<view>测试complete:{{ format(testUtsClassStaticAsyncResult.complete) }}</view> -->
<button @click="testUtsClassProp">点击测试uts class实例属性</button>
<view>测试value:{{ format(testUtsClassPropResult) }}</view>
<button @click="testUtsClassSyncWithCallback">
点击测试uts class实例方法
</button>
<view>测试return:{{ format(testUtsClassSyncWithCallbackResult.return) }}</view>
<view>测试success:{{ format(testUtsClassSyncWithCallbackResult.success) }}</view>
<view>测试complete:{{ format(testUtsClassSyncWithCallbackResult.complete) }}</view>
<!-- <button @click="testUtsClassAsync">点击测试uts class实例异步方法</button>
<view>测试return:{{ format(testUtsClassAsyncResult.return) }}</view>
<view>测试success:{{ format(testUtsClassAsyncResult.success) }}</view>
<view>测试complete:{{ format(testUtsClassAsyncResult.complete) }}</view> -->
<button @click="testUtsClassInstance">点击测试uts方法返回类实例</button>
<view>测试prop:{{ format(testUtsClassInstanceResult.prop) }}</view>
<view>测试return:{{ format(testUtsClassInstanceResult.return) }}</view>
<view>测试success:{{ format(testUtsClassInstanceResult.success) }}</view>
<view>测试complete:{{ format(testUtsClassInstanceResult.complete) }}</view>
<view>测试callback:{{ format(testUtsClassInstanceResult.callback) }}</view>
<button @click="testAll">点击测试所有</button>
</view>
</template>
<script lang="ts">
import {
MAX,
testSync,
testSyncWithCallback,
testAsync,
Test,
request,
AsyncOptions,
TestOptions,
SyncOptions
} from "../../uni_modules/uts-syntaxcase";
const TRUE = 'true'
const FALSE = 'false'
const NULL = 'null'
let test: Test | null = null
let id = 0
type TestResult = {
return ?: string,
success ?: string,
fail ?: string,
complete ?: string,
callback?: string,
prop?: string,
}
export default {
data() {
return {
// 'null' | 'true' | 'false'
testUtsSyncResult: 'null',
testUtsSyncWithCallbackResult: {
return: 'null',
success: 'null',
fail: 'null',
complete: 'null',
} as TestResult,
testUtsAsyncResult: {
return: 'null',
success: 'null',
fail: 'null',
complete: 'null',
} as TestResult,
testUtsClassConstructorResult: {
callback: 'null'
} as TestResult,
testUtsClassStaticPropResult: 'null',
testUtsClassStaticSyncWithCallbackResult: {
return: 'null',
success: 'null',
fail: 'null',
complete: 'null',
} as TestResult,
testUtsClassStaticAsyncResult: {
return: 'null',
success: 'null',
fail: 'null',
complete: 'null',
} as TestResult,
testUtsClassPropResult: 'null',
testUtsClassSyncWithCallbackResult: {
return: 'null',
success: 'null',
fail: 'null',
complete: 'null',
} as TestResult,
testUtsClassAsyncResult: {
return: 'null',
success: 'null',
fail: 'null',
complete: 'null',
} as TestResult,
testUtsClassInstanceResult: {
prop: 'null',
return: 'null',
success: 'null',
fail: 'null',
complete: 'null',
callback: 'null'
} as TestResult
}
},
methods: {
format(v: string | null) : string {
return v === "null" || v == null ? "--" : v === 'true' ? "通过" : "未通过";
},
testAll() {
this.testUtsSync();
this.testUtsSyncWithCallback();
// this.testUtsAsync();
this.testUtsClassConstructor();
this.testUtsClassStaticProp();
this.testUtsClassStaticSyncWithCallback();
// this.testUtsClassStaticAsync();
this.testUtsClassProp();
this.testUtsClassSyncWithCallback();
// this.testUtsClassAsync();
this.testUtsClassInstance();
},
testUtsSync() {
this.testUtsSyncResult = FALSE;
try {
if (testSync("dcloud").msg === "hello dcloud") {
this.testUtsSyncResult = true;
}
} catch (e) {
console.error("testUtsSync", e);
}
},
testUtsSyncWithCallback() {
try {
this.testUtsSyncWithCallbackResult.return = false;
this.testUtsSyncWithCallbackResult.success = false;
// testUtsSyncWithCallbackResult.fail = false;
this.testUtsSyncWithCallbackResult.complete = false;
if (
testSyncWithCallback({
type: "success",
success: (res) => {
console.log("testSyncWithCallback.success.callback", res);
this.testUtsSyncWithCallbackResult.success = true;
},
fail: (res) => {
console.log("testSyncWithCallback.fail.callback", res);
// testUtsSyncWithCallbackResult.fail = true;
},
complete: (res) => {
console.log("testSyncWithCallback.complete.callback", res);
this.testUtsSyncWithCallbackResult.complete = true;
},
}).name === "testSyncWithCallback"
) {
this.testUtsSyncWithCallbackResult.return = true;
}
} catch (e) {}
},
async testUtsAsync() {
this.testUtsAsyncResult.return = false;
this.testUtsAsyncResult.success = false;
// testUtsAsyncResult.fail = false;
this.testUtsAsyncResult.complete = false;
try {
const res = await testAsync({
type: "success",
success: (res) => {
console.log("testAsync.success.callback", res);
this.testUtsAsyncResult.success = true;
},
fail: (res) => {
console.log("testAsync.fail.callback", res);
},
complete: (res) => {
console.log("testAsync.complete.callback", res);
this.testUtsAsyncResult.complete = true;
},
});
if (res.name === "testAsync") {
this.testUtsAsyncResult.return = true;
}
} catch (e) {}
},
testUtsClassConstructor() {
this.testUtsClassConstructorResult.callback = false
id++
test = new Test(id, {
name: 'name' + id,
callback: (res) => {
console.log(res)
this.testUtsClassConstructorResult.callback = true
}
})
},
testUtsClassStaticProp() {
this.testUtsClassStaticPropResult = false
if (Test.type === 'Test') {
this.testUtsClassStaticPropResult = true
}
},
testUtsClassStaticSyncWithCallback() {
try {
this.testUtsClassStaticSyncWithCallbackResult.return = false;
this.testUtsClassStaticSyncWithCallbackResult.success = false;
// testUtsClassStaticSyncWithCallbackResult.fail = false;
this.testUtsClassStaticSyncWithCallbackResult.complete = false;
if (
Test.testClassStaticSyncWithCallback({
type: "success",
success: (res) => {
console.log("testStaticSyncWithCallback.success.callback", res);
this.testUtsClassStaticSyncWithCallbackResult.success = true;
},
fail: (res) => {
console.log("testStaticSyncWithCallback.fail.callback", res);
// testUtsClassStaticSyncWithCallbackResult.fail = true;
},
complete: (res) => {
console.log("testStaticSyncWithCallback.complete.callback", res);
this.testUtsClassStaticSyncWithCallbackResult.complete = true;
},
}).name === "testSyncWithCallback"
) {
this.testUtsClassStaticSyncWithCallbackResult.return = true;
}
} catch (e) {}
},
async testUtsClassStaticAsync() {
this.testUtsClassStaticAsyncResult.return = false;
this.testUtsClassStaticAsyncResult.success = false;
// testUtsClassStaticAsyncResult.fail = false;
this.testUtsClassStaticAsyncResult.complete = false;
try {
const res = await Test.testClassStaticAsync({
type: "success",
success: (res) => {
console.log("testAsync.success.callback", res);
this.testUtsClassStaticAsyncResult.success = true;
},
fail: (res) => {
console.log("testAsync.fail.callback", res);
},
complete: (res) => {
console.log("testAsync.complete.callback", res);
this.testUtsClassStaticAsyncResult.complete = true;
},
});
if (res.name === "testAsync") {
this.testUtsClassStaticAsyncResult.return = true;
}
} catch (e) {}
},
testUtsClassProp() {
if (!test) {
this.testUtsClassConstructor()
}
this.testUtsClassPropResult = false
if (test.id > 0) {
this.testUtsClassPropResult = true
}
},
testUtsClassSyncWithCallback() {
if (!test) {
this.testUtsClassConstructor()
}
try {
this.testUtsClassSyncWithCallbackResult.return = false;
this.testUtsClassSyncWithCallbackResult.success = false;
// testUtsClassSyncWithCallbackResult.fail = false;
this.testUtsClassSyncWithCallbackResult.complete = false;
if (
test.testClassSyncWithCallback({
type: "success",
success: (res) => {
console.log("testSyncWithCallback.success.callback", res);
this.testUtsClassSyncWithCallbackResult.success = true;
},
fail: (res) => {
console.log("testSyncWithCallback.fail.callback", res);
// testUtsClassSyncWithCallbackResult.fail = true;
},
complete: (res) => {
console.log("testSyncWithCallback.complete.callback", res);
this.testUtsClassSyncWithCallbackResult.complete = true;
},
}).name === "testSyncWithCallback"
) {
this.testUtsClassSyncWithCallbackResult.return = true;
}
} catch (e) {}
},
async testUtsClassAsync() {
if (!test) {
this.testUtsClassConstructor()
}
this.testUtsClassAsyncResult.return = false;
this.testUtsClassAsyncResult.success = false;
// testUtsClassAsyncResult.fail = false;
this.testUtsClassAsyncResult.complete = false;
try {
const res = await test.testClassAsync({
type: "success",
success: (res) => {
console.log("testAsync.success.callback", res);
this.testUtsClassAsyncResult.success = true;
},
fail: (res) => {
console.log("testAsync.fail.callback", res);
},
complete: (res) => {
console.log("testAsync.complete.callback", res);
this.testUtsClassAsyncResult.complete = true;
},
});
console.log('res', res)
if (res.name === "testAsync") {
this.testUtsClassAsyncResult.return = true;
}
} catch (e) {
console.error(e)
}
},
testUtsClassInstance() {
this.testUtsClassInstanceResult.prop = false;
this.testUtsClassInstanceResult.return = false;
this.testUtsClassInstanceResult.success = false;
// testUtsClassAsyncResult.fail = false;
this.testUtsClassInstanceResult.complete = false;
this.testUtsClassInstanceResult.callback = false;
const url = 'https://dcloud.io/'
const task = request(url)
if (task.url === url && task.abort().url === url) {
this.testUtsClassInstanceResult.prop = true;
}
task.onCallback((res) => {
if (res === 'onCallback') {
this.testUtsClassInstanceResult.callback = true;
}
})
const res = task.sync({
success: (res) => {
console.log("task.sync.success.callback", res);
this.testUtsClassInstanceResult.success = true;
},
fail: (res) => {
console.log("task.sync.fail.callback", res);
},
complete: (res) => {
console.log("task.sync.complete.callback", res);
this.testUtsClassInstanceResult.complete = true;
},
})
if (res === 'sync') {
this.testUtsClassInstanceResult.return = true;
}
}
}
}
console.log('testSync("dcloud").msg', testSync("dcloud").msg)
if (testSync("dcloud").msg == "hello dcloud") {
this.testUtsSyncResult = TRUE;
}
} catch (e) {
console.error("testUtsSync", e);
}
},
testUtsSyncWithCallback() {
try {
this.testUtsSyncWithCallbackResult.return = FALSE;
this.testUtsSyncWithCallbackResult.success = FALSE;
// testUtsSyncWithCallbackResult.fail = FALSE;
this.testUtsSyncWithCallbackResult.complete = FALSE;
if (
testSyncWithCallback({
type: "success",
success: (res) => {
console.log("testSyncWithCallback.success.callback", res);
this.testUtsSyncWithCallbackResult.success = TRUE;
},
fail: (res) => {
console.log("testSyncWithCallback.fail.callback", res);
// testUtsSyncWithCallbackResult.fail = TRUE;
},
complete: (res) => {
console.log("testSyncWithCallback.complete.callback", res);
this.testUtsSyncWithCallbackResult.complete = TRUE;
},
} as AsyncOptions).name === "testSyncWithCallback"
) {
this.testUtsSyncWithCallbackResult.return = TRUE;
}
} catch (e) { }
},
// TODO uvue 暂不支持 async await
// async testUtsAsync() {
// this.testUtsAsyncResult.return = FALSE;
// this.testUtsAsyncResult.success = FALSE;
// // testUtsAsyncResult.fail = FALSE;
// this.testUtsAsyncResult.complete = FALSE;
// try {
// const res = await testAsync({
// type: "success",
// success: (res) => {
// console.log("testAsync.success.callback", res);
// this.testUtsAsyncResult.success = TRUE;
// },
// fail: (res) => {
// console.log("testAsync.fail.callback", res);
// },
// complete: (res) => {
// console.log("testAsync.complete.callback", res);
// this.testUtsAsyncResult.complete = TRUE;
// },
// } as AsyncOptions);
// if (res.name === "testAsync") {
// this.testUtsAsyncResult.return = TRUE;
// }
// } catch (e) {}
// },
testUtsClassConstructor() {
this.testUtsClassConstructorResult.callback = FALSE
id++
test = new Test(id, {
name: 'name' + id,
callback: (res) => {
console.log(res)
this.testUtsClassConstructorResult.callback = TRUE
}
} as TestOptions)
},
testUtsClassStaticProp() {
this.testUtsClassStaticPropResult = FALSE
if (Test.type === 'Test') {
this.testUtsClassStaticPropResult = TRUE
}
},
testUtsClassStaticSyncWithCallback() {
try {
this.testUtsClassStaticSyncWithCallbackResult.return = FALSE;
this.testUtsClassStaticSyncWithCallbackResult.success = FALSE;
// testUtsClassStaticSyncWithCallbackResult.fail = FALSE;
this.testUtsClassStaticSyncWithCallbackResult.complete = FALSE;
if (
Test.testClassStaticSyncWithCallback({
type: "success",
success: (res) => {
console.log("testStaticSyncWithCallback.success.callback", res);
this.testUtsClassStaticSyncWithCallbackResult.success = TRUE;
},
fail: (res) => {
console.log("testStaticSyncWithCallback.fail.callback", res);
// testUtsClassStaticSyncWithCallbackResult.fail = TRUE;
},
complete: (res) => {
console.log("testStaticSyncWithCallback.complete.callback", res);
this.testUtsClassStaticSyncWithCallbackResult.complete = TRUE;
},
} as AsyncOptions).name === "testSyncWithCallback"
) {
this.testUtsClassStaticSyncWithCallbackResult.return = TRUE;
}
} catch (e) { }
},
// async testUtsClassStaticAsync() {
// this.testUtsClassStaticAsyncResult.return = FALSE;
// this.testUtsClassStaticAsyncResult.success = FALSE;
// // testUtsClassStaticAsyncResult.fail = FALSE;
// this.testUtsClassStaticAsyncResult.complete = FALSE;
// try {
// const res = await Test.testClassStaticAsync({
// type: "success",
// success: (res) => {
// console.log("testAsync.success.callback", res);
// this.testUtsClassStaticAsyncResult.success = TRUE;
// },
// fail: (res) => {
// console.log("testAsync.fail.callback", res);
// },
// complete: (res) => {
// console.log("testAsync.complete.callback", res);
// this.testUtsClassStaticAsyncResult.complete = TRUE;
// },
// });
// if (res.name === "testAsync") {
// this.testUtsClassStaticAsyncResult.return = TRUE;
// }
// } catch (e) {}
// },
testUtsClassProp() {
if (test != null) {
this.testUtsClassConstructor()
}
this.testUtsClassPropResult = FALSE
if (test!.id > 0) {
this.testUtsClassPropResult = TRUE
}
},
testUtsClassSyncWithCallback() {
if (test != null) {
this.testUtsClassConstructor()
}
try {
this.testUtsClassSyncWithCallbackResult.return = FALSE;
this.testUtsClassSyncWithCallbackResult.success = FALSE;
// testUtsClassSyncWithCallbackResult.fail = FALSE;
this.testUtsClassSyncWithCallbackResult.complete = FALSE;
if (
test!.testClassSyncWithCallback({
type: "success",
success: (res) => {
console.log("testSyncWithCallback.success.callback", res);
this.testUtsClassSyncWithCallbackResult.success = TRUE;
},
fail: (res) => {
console.log("testSyncWithCallback.fail.callback", res);
// testUtsClassSyncWithCallbackResult.fail = TRUE;
},
complete: (res) => {
console.log("testSyncWithCallback.complete.callback", res);
this.testUtsClassSyncWithCallbackResult.complete = TRUE;
},
} as AsyncOptions).name === "testSyncWithCallback"
) {
this.testUtsClassSyncWithCallbackResult.return = TRUE;
}
} catch (e) { }
},
// async testUtsClassAsync() {
// if (test != null) {
// this.testUtsClassConstructor()
// }
// this.testUtsClassAsyncResult.return = FALSE;
// this.testUtsClassAsyncResult.success = FALSE;
// // testUtsClassAsyncResult.fail = FALSE;
// this.testUtsClassAsyncResult.complete = FALSE;
// try {
// const res = await test.testClassAsync({
// type: "success",
// success: (res) => {
// console.log("testAsync.success.callback", res);
// this.testUtsClassAsyncResult.success = TRUE;
// },
// fail: (res) => {
// console.log("testAsync.fail.callback", res);
// },
// complete: (res) => {
// console.log("testAsync.complete.callback", res);
// this.testUtsClassAsyncResult.complete = TRUE;
// },
// });
// console.log('res', res)
// if (res.name === "testAsync") {
// this.testUtsClassAsyncResult.return = TRUE;
// }
// } catch (e) {
// console.error(e)
// }
// },
testUtsClassInstance() {
this.testUtsClassInstanceResult.prop = FALSE;
this.testUtsClassInstanceResult.return = FALSE;
this.testUtsClassInstanceResult.success = FALSE;
// testUtsClassAsyncResult.fail = FALSE;
this.testUtsClassInstanceResult.complete = FALSE;
this.testUtsClassInstanceResult.callback = FALSE;
const url = 'https://dcloud.io/'
const task = request(url)
if (task != null) {
if (task.url === url && task.abort().url === url) {
this.testUtsClassInstanceResult.prop = TRUE;
}
task.onCallback((res) => {
if (res === 'onCallback') {
this.testUtsClassInstanceResult.callback = TRUE;
}
})
const res = task.sync({
success: (res) => {
console.log("task.sync.success.callback", res);
this.testUtsClassInstanceResult.success = TRUE;
},
fail: (res) => {
console.log("task.sync.fail.callback", res);
},
complete: (res) => {
console.log("task.sync.complete.callback", res);
this.testUtsClassInstanceResult.complete = TRUE;
},
} as SyncOptions)
if (res === 'sync') {
this.testUtsClassInstanceResult.return = TRUE;
}
}
}
}
}
</script>
\ No newline at end of file
<template>
{{ret}}
<button @click="instanceCreate">多实例创建测试</button>
</template>
<script>
import {
User
} from '@/uni_modules/uts-advance'
export default {
data() {
return {
ret:''
}
},
methods: {
instanceCreate() {
const user1 = new User("张三", 20);
let userText1 = user1.describeSelf()
const user2 = new User("李四", 30);
let userText2 = user2.describeSelf()
const user3 = new User("王五", 40);
let userText3 = user3.describeSelf()
if(userText1 == userText2 || userText1 == userText3 || userText2 == userText3){
this.ret = '测试未通过'
}else{
this.ret = '测试通过'
}
}
}
}
</script>
<style>
</style>
\ No newline at end of file
......@@ -15,6 +15,7 @@
returnParam,
callbackArray,
callbackParam,
ParamOptions
} from '@/uni_modules/uts-advance'
......@@ -38,7 +39,7 @@
let ret = inputParam({
title: "hello",
array: ["1", "2", "3"]
})
} as ParamOptions)
if (ret) {
uni.showToast({
title: '测试通过'
......
......@@ -23,7 +23,7 @@
testShowAlert(){
showAlert("提示框","这是一个提示框", (index)=> {
var title = null
let title:string
if (index == 0) {
title = "点击了确认"
} else{
......
<template>
<view>
<page-head title="监听系统截屏" accordion></page-head>
<uni-list>
<uni-list-item @tap="testScreenShotListen" title="监听截屏事件" class="itemButton" :clickable="true"/>
<uni-list-item @tap="testScreenShotOff" title="关闭截屏监听" class="itemButton" :clickable="true"/>
</uni-list>
<button @click="testScreenShotListen">监听截屏事件</button>
<button @click="testScreenShotOff">关闭截屏监听</button>
<image :src="screenImage" mode="aspectFit" style="margin-top:10px"></image>
......@@ -47,7 +45,9 @@
icon:"none",
title:'捕获截屏事件'
})
that.screenImage = res.image
if (res.image != null) {
that.screenImage = res.image!
}
}
}else{
// 除android 之外的平台,不需要判断返回状态码
......
......@@ -2,10 +2,8 @@
<view>
<page-head title="监听系统截屏" accordion></page-head>
<uni-list>
<uni-list-item @tap="testScreenShotListen" title="监听截屏事件" class="itemButton" :clickable="true"/>
<uni-list-item @tap="testScreenShotOff" title="关闭截屏监听" class="itemButton" :clickable="true"/>
</uni-list>
<button @click="testScreenShotListen">监听截屏事件</button>
<button @click="testScreenShotOff">关闭截屏监听</button>
<image :src="screenImage" mode="aspectFit" style="margin-top:10px"></image>
......
<template>
<view>
<page-head :title="title"></page-head>
<uni-collapse>
<uni-collapse-item title="设备相关" :border="false">
<uni-list>
<uni-list-item @tap="testGetBatteryCapacity" title="获取电池电量" class="itemButton" :clickable="true"/>
</uni-list>
</uni-collapse-item>
</uni-collapse>
<uni-collapse>
<uni-collapse-item title="系统事件" :border="false">
<uni-list>
<uni-list-item @tap="gotoScreenListen" title="监听系统截屏" class="itemButton" :clickable="true" link/>
</uni-list>
</uni-collapse-item>
</uni-collapse>
<uni-collapse>
<uni-collapse-item title="Alert系统弹窗" :border="false">
<uni-list>
<uni-list-item @tap="gotoAlert" title="Alert弹窗" class="itemButton" :clickable="true" link/>
</uni-list>
</uni-collapse-item>
</uni-collapse>
<uni-collapse>
<uni-collapse-item title="android平台" :border="false">
<uni-list>
<uni-list-item @tap="testGotoDemoActivity" title="自定义activity(需自定义基座)" class="itemButton" :clickable="true" link/>
</uni-list>
</uni-collapse-item>
</uni-collapse>
</view>
</template>
<script>
import gotoDemoActivity from "@/uni_modules/uts-nativepage";
import getBatteryInfo from "@/uni_modules/uts-getbatteryinfo";
export default {
data() {
return {
title: '系统API示例',
}
},
onUnload: function() {},
methods: {
testGetBatteryCapacity() {
getBatteryInfo({
success(res) {
uni.showToast({
title: "当前电量:" + res.level + '%',
icon: 'none'
});
}
})
},
gotoScreenListen(){
uni.navigateTo({
url:'/pages/SystemAPI/ScreenListen/screenlisten'
})
},
gotoAlert(){
uni.navigateTo({
url:'/pages/SystemAPI/Alert/alert'
})
},
testGotoDemoActivity() {
let ret = gotoDemoActivity();
if(!ret){
uni.showToast({
icon:'none',
title:'需要在自定义基座中运行'
})
}
}
}
}
</script>
<style>
.screenImage{
width: 100%;
height: 380px;
}
</style>
<template>
<view class="uni-container">
<page-head :title="title"></page-head>
<view class="uni-panel" v-for="(item, index) in list" :key="index">
<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index)">
<text class="uni-panel-text">{{item.name}}</text>
<image :src="item.pages.length > 0 ? item.open ? arrowUpIcon : arrowDownIcon : arrowRightIcon"
class="uni-icon"></image>
</view>
<view class="uni-panel-c" v-if="item.open">
<view class="uni-navigate-item" v-for="(page,key) in item.pages" :key="key" @click="goDetailPage(page)" hover-class="uni-navigate-item-active">
<text class="uni-navigate-text">{{page.name}}</text>
<image :src="arrowRightIcon" class="uni-icon" v-if="page.url"></image>
</view>
</view>
</view>
</view>
</template>
<script lang="ts">
import { gotoDemoActivity } from "@/uni_modules/uts-nativepage";
import { getBatteryInfo, GetBatteryInfoOptions } from "@/uni_modules/uts-getbatteryinfo";
type Page = {
name : string,
url ?: string
function ?: string
}
type ListItem = {
name : string,
open : boolean,
pages : Page[],
}
export default {
data() {
return {
title: '系统API示例',
list: [{
name: "设备相关",
open: false,
pages: [{
name: "获取电池电量",
function: "testGetBatteryCapacity"
}] as Page[]
},
{
name: "系统事件",
open: false,
pages: [{
name: "监听系统截屏",
url: "SystemAPI/ScreenListen/screenlisten"
}] as Page[]
},
{
name: "Alert系统弹窗",
open: false,
pages: [{
name: "Alert弹窗",
url: "SystemAPI/Alert/alert"
}] as Page[]
},
{
name: "android平台",
open: false,
pages: [{
name: "自定义activity(需自定义基座)",
function: "testGotoDemoActivity"
}] as Page[]
}
] as ListItem[],
arrowUpIcon: '/static/icons/arrow-up.png',
arrowDownIcon: '/static/icons/arrow-down.png',
arrowRightIcon: '/static/icons/arrow-right.png',
}
},
methods: {
triggerCollapse(index: number) {
for (var i = 0; i < this.list.length; ++i) {
if (index == i) {
this.list[i].open = !this.list[i].open;
} else {
this.list[i].open = false;
}
}
},
goDetailPage(e: Page) {
if (e.function != null) {
const funName = e.function
switch (funName) {
case 'testGetBatteryCapacity':
this.testGetBatteryCapacity()
break
case 'testGotoDemoActivity':
this.testGotoDemoActivity()
break
}
return
}
uni.navigateTo({
url: `/pages/${e.url}`
})
},
testGetBatteryCapacity() {
getBatteryInfo({
success(res) {
uni.showToast({
title: "当前电量:" + (res as UTSJSONObject)['level'] + '%',
icon: 'none'
});
}
} as GetBatteryInfoOptions)
},
testGotoDemoActivity() {
let ret = gotoDemoActivity();
if (!ret) {
uni.showToast({
icon: 'none',
title: '需要在自定义基座中运行'
})
}
}
}
}
</script>
<style>
@import '@/common/uni-uvue.css';
</style>
\ No newline at end of file
<template>
<view>
<page-head :title="title"></page-head>
<uni-collapse>
<uni-collapse-item title="设备相关" :border="false">
<uni-list>
<uni-list-item @tap="testGetBatteryCapacity" title="获取电池电量" class="itemButton" :clickable="true"/>
</uni-list>
</uni-collapse-item>
</uni-collapse>
<uni-collapse>
<uni-collapse-item title="系统事件" :border="false">
<uni-list>
<uni-list-item @tap="gotoScreenListen" title="监听系统截屏" class="itemButton" :clickable="true" link/>
</uni-list>
</uni-collapse-item>
</uni-collapse>
<uni-collapse>
<uni-collapse-item title="Alert系统弹窗" :border="false">
<uni-list>
<uni-list-item @tap="gotoAlert" title="Alert弹窗" class="itemButton" :clickable="true" link/>
</uni-list>
</uni-collapse-item>
</uni-collapse>
<uni-collapse>
<uni-collapse-item title="android平台" :border="false">
<uni-list>
<uni-list-item @tap="testGotoDemoActivity" title="自定义activity(需自定义基座)" class="itemButton" :clickable="true" link/>
</uni-list>
</uni-collapse-item>
</uni-collapse>
</view>
</template>
<script>
import gotoDemoActivity from "@/uni_modules/uts-nativepage";
import getBatteryInfo from "@/uni_modules/uts-getbatteryinfo";
export default {
data() {
return {
title: '系统API示例',
}
},
onUnload: function() {},
methods: {
testGetBatteryCapacity() {
getBatteryInfo({
success(res) {
uni.showToast({
title: "当前电量:" + res.level + '%',
icon: 'none'
});
}
})
},
gotoScreenListen(){
uni.navigateTo({
url:'/pages/SystemAPI/ScreenListen/screenlisten'
})
},
gotoAlert(){
uni.navigateTo({
url:'/pages/SystemAPI/Alert/alert'
})
},
testGotoDemoActivity() {
let ret = gotoDemoActivity();
if(!ret){
uni.showToast({
icon:'none',
title:'需要在自定义基座中运行'
})
}
}
}
}
</script>
<style>
.screenImage{
width: 100%;
height: 380px;
}
</style>
<template>
<view class="uni-container">
<page-head :title="title"></page-head>
<view class="uni-panel" v-for="(item, index) in list" :key="index">
<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)">
<text class="uni-panel-text">{{item.name}}</text>
<image :src="item.pages.length > 0 ? item.open ? arrowUpIcon : arrowDownIcon : arrowRightIcon"
class="uni-icon"></image>
</view>
<view class="uni-panel-c" v-if="item.open">
<view class="uni-navigate-item" v-for="(page,key) in item.pages" :key="key" @click="goDetailPage(page)" hover-class="uni-navigate-item-active">
<text class="uni-navigate-text">{{page.name}}</text>
<image :src="arrowRightIcon" class="uni-icon" v-if="page.url"></image>
</view>
</view>
</view>
</view>
</template>·
<script>
import { gotoDemoActivity } from "@/uni_modules/uts-nativepage";
import { getBatteryInfo } from "@/uni_modules/uts-getbatteryinfo";
export default {
data() {
return {
title: '系统API示例',
list: [{
name: "设备相关",
open: false,
pages: [{
name: "获取电池电量",
function: "testGetBatteryCapacity"
}]
},
{
name: "系统事件",
open: false,
pages: [{
name: "监听系统截屏",
url: "SystemAPI/ScreenListen/screenlisten"
}]
},
{
name: "Alert系统弹窗",
open: false,
pages: [{
name: "Alert弹窗",
url: "SystemAPI/Alert/alert"
}]
},
{
name: "android平台",
open: false,
pages: [{
name: "自定义activity(需自定义基座)",
function: "testGotoDemoActivity"
}]
}
],
arrowUpIcon: '/static/icons/arrow-up.png',
arrowDownIcon: '/static/icons/arrow-down.png',
arrowRightIcon: '/static/icons/arrow-right.png',
}
},
methods: {
triggerCollapse(index) {
for (var i = 0; i < this.list.length; ++i) {
if (index == i) {
this.list[i].open = !this.list[i].open;
} else {
this.list[i].open = false;
}
}
},
goDetailPage(e) {
if (e.function) {
this[e.function]()
return
}
uni.navigateTo({
url: `/pages/${e.url}`
})
},
testGetBatteryCapacity() {
getBatteryInfo({
success(res) {
uni.showToast({
title: "当前电量:" + res.level + '%',
icon: 'none'
});
}
})
},
testGotoDemoActivity() {
let ret = gotoDemoActivity();
if (!ret) {
uni.showToast({
icon: 'none',
title: '需要在自定义基座中运行'
})
}
}
}
}
</script>
<style>
@import '@/common/uni-uvue.css';
.uni-container {
min-height: 100%;
}
</style>
\ No newline at end of file
<template>
<view>
<page-head :title="title" accordion></page-head>
<uni-collapse accordion>
<uni-collapse-item title="延迟任务" :border="false">
<uni-list>
<uni-list-item @tap="testTimer" title="开启延迟任务" :clickable="true">
</uni-list-item>
</uni-list>
</uni-collapse-item>
<uni-collapse-item title="定时任务" :border="false">
<uni-list>
<uni-list-item @tap="testInterval" title="开启定时任务" :clickable="true">
</uni-list-item>
<uni-list-item @tap="testClearInterval" title="关闭定时任务" :clickable="true">
</uni-list-item>
</uni-list>
</uni-collapse-item>
<uni-collapse-item title="语法示例" :border="false">
<uni-list>
<uni-list-item @tap="testSyntax" title="进阶语法示例" :clickable="true" link>
</uni-list-item>
<uni-list-item @tap="testParams" title="参数传递示例" :clickable="true" link>
</uni-list-item>
<uni-list-item @tap="testConsole" title="日志打印示例" :clickable="true" link>
</uni-list-item>
</uni-list>
</uni-collapse-item>
<uni-collapse-item title="资源加载示例" :border="false">
<uni-list>
<uni-list-item @tap="gotoResourceDemo" title="图片加载示例" :clickable="true" link>
</uni-list-item>
</uni-list>
</uni-collapse-item>
<uni-collapse-item title="组件开发示例" :border="false">
<uni-list>
<uni-list-item @tap="testHelloUTSComponent" title="Hello UTS Component" :clickable="true" link />
</uni-list>
</uni-collapse-item>
<uni-collapse-item title="android平台示例" :border="false">
<uni-list>
<uni-list-item @tap="testLifecyle" title="activity生命周期监听" :clickable="true" link />
<uni-list-item @tap="testAssetLoad" title="播放asset音频(需自定义基座)" :clickable="true" link/>
<uni-list-item @tap="gotoDecorView" title="操作DecorView" :clickable="true" link />
<uni-list-item @tap="testMetaRead" title="读取meta配置" :clickable="true" />
<uni-list-item @tap="testQuitApp" title="退出当前应用" :clickable="true" />
</uni-list>
</uni-collapse-item>
<uni-collapse-item title="iOS平台示例" :border="false">
<uni-list>
<uni-list-item @tap="testGetResourcePath" title="资源路径获取示例" :clickable="true" link />
</uni-list>
</uni-collapse-item>
</uni-collapse>
</view>
</template>
<script>
import {
doTimerTask,
doIntervalTask,
clearIntervalTask,
playAssetAudio,
getMetaConfig,
quitApp
} from "../../uni_modules/uts-advance";
export default {
data() {
return {
title: 'UTS进阶示例',
taskId: 0,
}
},
methods: {
/**
* 测试延迟任务
*/
testTimer: function() {
doTimerTask({
start: function(response) {
uni.showToast({
title: response,
icon: 'none'
});
},
work: function(response) {
uni.showToast({
title: response,
icon: 'none'
});
},
});
},
/**
* 测试周期任务
*/
testInterval: function() {
var ret = doIntervalTask({
start: function(response) {
uni.showToast({
title: response,
icon: 'none'
});
},
work: function(response) {
uni.showToast({
title: response,
icon: 'none'
});
},
});
this.taskId = ret.taskId;
},
/**
* 取消周期任务
*/
testClearInterval: function() {
console.log(this.taskId);
clearIntervalTask(this.taskId);
},
/**
* 跳转至资源加载演示界面
*/
gotoResourceDemo: function() {
uni.navigateTo({
url: '/pages/resource/resource'
})
},
gotoDecorView: function() {
uni.navigateTo({
url: '/pages/advance/android/decorview'
})
},
testAssetLoad() {
// playAssetAudio();
uni.navigateTo({
url: '/pages/advance/android/assetaudio'
})
},
testInputDialog() {
getUserInput(function(res){
console.log(res);
});
},
testQuitApp(){
quitApp()
},
testMetaRead() {
let ret = getMetaConfig();
uni.showToast({
icon:"none",
title: '读取成功,注意查看控制台输出'
});
console.log(ret);
},
testLifecyle: function() {
uni.navigateTo({
url: '/pages/lifecycle/lifecycle'
})
},
testHelloUTSComponent: function() {
uni.navigateTo({
url: '/pages/component/helloView'
})
},
testSyntax: function() {
uni.navigateTo({
url: '/pages/SyntaxCase/index'
})
},
testParams: function() {
uni.navigateTo({
url: '/pages/SyntaxCase/paramTest'
})
},
testConsole: function() {
uni.navigateTo({
url: '/pages/SyntaxCase/consoleTest'
})
},
testGetResourcePath: function() {
uni.navigateTo({
url: '/pages/advance/iOS/getResourcePath'
})
}
}
}
</script>
<style>
</style>
<template>
<view class="uni-container">
<page-head :title="title"></page-head>
<view class="uni-panel" v-for="(item, index) in list" :key="index">
<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index)">
<text class="uni-panel-text">{{item.name}}</text>
<image :src="item.pages.length > 0 ? item.open ? arrowUpIcon : arrowDownIcon : arrowRightIcon"
class="uni-icon"></image>
</view>
<view class="uni-panel-c" v-if="item.open">
<view class="uni-navigate-item" v-for="(page,key) in item.pages" :key="key" @click="goDetailPage(page)"
hover-class="uni-navigate-item-active">
<text class="uni-navigate-text">{{page.name}}</text>
<image :src="arrowRightIcon" class="uni-icon" v-if="page.url"></image>
</view>
</view>
</view>
</view>
</template>
<script lang="ts">
import {
doTimerTask,
doIntervalTask,
clearIntervalTask,
getMetaConfig,
quitApp,
TimerOptions
} from "../../uni_modules/uts-advance";
type Page = {
name : string,
url ?: string
function ?: string
}
type ListItem = {
name : string,
open : boolean,
pages : Page[],
}
export default {
data() {
return {
title: 'UTS进阶示例',
taskId: 0,
list: [{
name: "延迟任务",
open: false,
pages: [{
name: "开启延迟任务",
function: "testTimer"
}] as Page[]
},
{
name: "定时任务",
open: false,
pages: [{
name: "开启定时任务",
function: "testInterval"
}, {
name: "关闭定时任务",
function: "testClearInterval"
}] as Page[]
},
{
name: "语法示例",
open: false,
pages: [{
name: "进阶语法示例",
url: "SyntaxCase/index"
}, {
name: "参数传递示例",
url: "SyntaxCase/paramTest"
}, {
name: "日志打印示例",
url: "SyntaxCase/consoleTest"
}, {
name: "实例测试示例",
url: "SyntaxCase/instanceTest"
}, {
name: "基础语法测试例",
url: "SyntaxCase/basicTest"
}] as Page[]
},
{
name: "资源加载示例",
open: false,
pages: [{
name: "图片加载示例",
url: "resource/resource"
}, {
name: "文件读取示例",
url: "resource/fileRead"
}] as Page[]
},
{
name: "组件开发示例",
open: false,
pages: [{
name: "Hello UTS Component",
url: "component/helloView"
}] as Page[]
},
{
name: "android平台示例",
open: false,
pages: [{
name: "activity生命周期监听",
url: "lifecycle/lifecycle"
}, {
name: "播放asset音频(需自定义基座)",
url: "advance/android/assetaudio"
}, {
name: "操作DecorView",
url: "advance/android/decorview"
}, {
name: "读取meta配置",
function: "testMetaRead"
}, {
name: "退出当前应用",
function: "testQuitApp"
}] as Page[]
},
{
name: "iOS平台示例",
open: false,
pages: [{
name: "资源路径获取示例",
url: "advance/iOS/getResourcePath"
}] as Page[]
},
] as ListItem[],
arrowUpIcon: '/static/icons/arrow-up.png',
arrowDownIcon: '/static/icons/arrow-down.png',
arrowRightIcon: '/static/icons/arrow-right.png',
}
},
methods: {
triggerCollapse(index : number) {
for (var i = 0; i < this.list.length; ++i) {
if (index == i) {
this.list[i].open = !this.list[i].open;
} else {
this.list[i].open = false;
}
}
},
goDetailPage(e : Page) {
if (e.function != null) {
const funName = e.function
switch (funName) {
case 'testTimer':
this.testTimer()
break
case 'testInterval':
this.testInterval()
break
case 'testClearInterval':
this.testClearInterval()
break
case 'testMetaRead':
this.testMetaRead()
break
case 'testQuitApp':
this.testQuitApp()
break
}
return
}
uni.navigateTo({
url: `/pages/${e.url}`
})
},
/**
* 测试延迟任务
*/
testTimer: function () {
doTimerTask({
start: function (response) {
uni.showToast({
title: response,
icon: 'none'
});
},
work: function (response) {
uni.showToast({
title: response,
icon: 'none'
});
},
} as TimerOptions);
},
/**
* 测试周期任务
*/
testInterval: function () {
var ret = doIntervalTask({
start: function (response) {
uni.showToast({
title: response,
icon: 'none'
});
},
work: function (response) {
uni.showToast({
title: response,
icon: 'none'
});
},
} as TimerOptions);
if (ret.taskId != null) {
this.taskId = ret.taskId!;
}
},
/**
* 取消周期任务
*/
testClearInterval: function () {
console.log(this.taskId);
clearIntervalTask(this.taskId);
},
// testInputDialog() {
// getUserInput(function (res) {
// console.log(res);
// });
// },
testQuitApp() {
quitApp()
},
testMetaRead() {
let ret = getMetaConfig();
uni.showToast({
icon: "none",
title: '读取成功,注意查看控制台输出'
});
console.log(ret);
}
}
}
</script>
<style>
@import '@/common/uni-uvue.css';
</style>
\ No newline at end of file
<template>
<view>
<page-head :title="title" accordion></page-head>
<uni-collapse accordion>
<uni-collapse-item title="延迟任务" :border="false">
<uni-list>
<uni-list-item @tap="testTimer" title="开启延迟任务" :clickable="true">
</uni-list-item>
</uni-list>
</uni-collapse-item>
<uni-collapse-item title="定时任务" :border="false">
<uni-list>
<uni-list-item @tap="testInterval" title="开启定时任务" :clickable="true">
</uni-list-item>
<uni-list-item @tap="testClearInterval" title="关闭定时任务" :clickable="true">
</uni-list-item>
</uni-list>
</uni-collapse-item>
<uni-collapse-item title="语法示例" :border="false">
<uni-list>
<uni-list-item @tap="testSyntax" title="进阶语法示例" :clickable="true" link>
</uni-list-item>
<uni-list-item @tap="testParams" title="参数传递示例" :clickable="true" link>
</uni-list-item>
<uni-list-item @tap="testConsole" title="日志打印示例" :clickable="true" link>
</uni-list-item>
<uni-list-item @tap="testInstance" title="实例测试示例" :clickable="true" link>
</uni-list-item>
<uni-list-item @tap="testGrammar" title="基础语法测试例" :clickable="true" link>
</uni-list-item>
</uni-list>
</uni-collapse-item>
<uni-collapse-item title="资源加载示例" :border="false">
<uni-list>
<uni-list-item @tap="gotoResourceDemo" title="图片加载示例" :clickable="true" link>
</uni-list-item>
<uni-list-item @tap="gotoFileReadDemo" title="文件读取示例" :clickable="true" link>
</uni-list-item>
</uni-list>
</uni-collapse-item>
<uni-collapse-item title="组件开发示例" :border="false">
<uni-list>
<uni-list-item @tap="testHelloUTSComponent" title="Hello UTS Component" :clickable="true" link />
</uni-list>
</uni-collapse-item>
<uni-collapse-item title="android平台示例" :border="false">
<uni-list>
<uni-list-item @tap="testLifecyle" title="activity生命周期监听" :clickable="true" link />
<uni-list-item @tap="testAssetLoad" title="播放asset音频(需自定义基座)" :clickable="true" link/>
<uni-list-item @tap="gotoDecorView" title="操作DecorView" :clickable="true" link />
<uni-list-item @tap="testMetaRead" title="读取meta配置" :clickable="true" />
<uni-list-item @tap="testQuitApp" title="退出当前应用" :clickable="true" />
</uni-list>
</uni-collapse-item>
<uni-collapse-item title="iOS平台示例" :border="false">
<uni-list>
<uni-list-item @tap="testGetResourcePath" title="资源路径获取示例" :clickable="true" link />
</uni-list>
</uni-collapse-item>
</uni-collapse>
</view>
<view class="uni-container">
<page-head :title="title"></page-head>
<view class="uni-panel" v-for="(item, index) in list" :key="index">
<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)">
<text class="uni-panel-text">{{item.name}}</text>
<image :src="item.pages.length > 0 ? item.open ? arrowUpIcon : arrowDownIcon : arrowRightIcon"
class="uni-icon"></image>
</view>
<view class="uni-panel-c" v-if="item.open">
<view class="uni-navigate-item" v-for="(page,key) in item.pages" :key="key" @click="goDetailPage(page)" hover-class="uni-navigate-item-active">
<text class="uni-navigate-text">{{page.name}}</text>
<image :src="arrowRightIcon" class="uni-icon" v-if="page.url"></image>
</view>
</view>
</view>
</view>
</template>
<script>
import {
doTimerTask,
doIntervalTask,
clearIntervalTask,
playAssetAudio,
getMetaConfig,
quitApp
} from "../../uni_modules/uts-advance";
export default {
data() {
return {
title: 'UTS进阶示例',
taskId: 0,
}
},
methods: {
/**
* 测试延迟任务
*/
testTimer: function() {
doTimerTask({
start: function(response) {
uni.showToast({
title: response,
icon: 'none'
});
},
work: function(response) {
uni.showToast({
title: response,
icon: 'none'
});
},
});
},
/**
* 测试周期任务
*/
testInterval: function() {
var ret = doIntervalTask({
start: function(response) {
uni.showToast({
title: response,
icon: 'none'
});
},
work: function(response) {
uni.showToast({
title: response,
icon: 'none'
});
},
});
this.taskId = ret.taskId;
},
/**
* 取消周期任务
*/
testClearInterval: function() {
console.log(this.taskId);
clearIntervalTask(this.taskId);
},
/**
* 跳转至资源加载演示界面
*/
gotoResourceDemo: function() {
uni.navigateTo({
url: '/pages/resource/resource'
})
},
gotoFileReadDemo: function() {
uni.navigateTo({
url: '/pages/resource/fileRead'
})
},
gotoDecorView: function() {
uni.navigateTo({
url: '/pages/advance/android/decorview'
})
},
testAssetLoad() {
// playAssetAudio();
uni.navigateTo({
url: '/pages/advance/android/assetaudio'
})
},
testInputDialog() {
getUserInput(function(res){
console.log(res);
});
},
testQuitApp(){
quitApp()
},
testMetaRead() {
let ret = getMetaConfig();
uni.showToast({
icon:"none",
title: '读取成功,注意查看控制台输出'
});
console.log(ret);
},
testLifecyle: function() {
uni.navigateTo({
url: '/pages/lifecycle/lifecycle'
})
},
testHelloUTSComponent: function() {
uni.navigateTo({
url: '/pages/component/helloView'
})
},
testSyntax: function() {
uni.navigateTo({
url: '/pages/SyntaxCase/index'
})
},
testParams: function() {
uni.navigateTo({
url: '/pages/SyntaxCase/paramTest'
})
},
testConsole: function() {
uni.navigateTo({
url: '/pages/SyntaxCase/consoleTest'
})
},
testGrammar: function() {
uni.navigateTo({
url: '/pages/test/index'
})
},
testInstance: function() {
uni.navigateTo({
url: '/pages/SyntaxCase/instanceTest'
})
},
testGetResourcePath: function() {
uni.navigateTo({
url: '/pages/advance/iOS/getResourcePath'
})
}
}
}
import {
doTimerTask,
doIntervalTask,
clearIntervalTask,
playAssetAudio,
getMetaConfig,
quitApp
} from "../../uni_modules/uts-advance";
export default {
data() {
return {
title: 'UTS进阶示例',
taskId: 0,
list: [{
name: "延迟任务",
open: false,
pages: [{
name: "开启延迟任务",
function: "testTimer"
}]
},
{
name: "定时任务",
open: false,
pages: [{
name: "开启定时任务",
function: "testInterval"
}, {
name: "关闭定时任务",
function: "testClearInterval"
}]
},
{
name: "语法示例",
open: false,
pages: [{
name: "进阶语法示例",
url: "SyntaxCase/index"
}, {
name: "参数传递示例",
url: "SyntaxCase/paramTest"
}, {
name: "日志打印示例",
url: "SyntaxCase/consoleTest"
},{
name: "实例测试示例",
url: "SyntaxCase/instanceTest"
}, {
name: "基础语法测试例",
url: "SyntaxCase/basicTest"
}]
},
{
name: "资源加载示例",
open: false,
pages: [{
name: "图片加载示例",
url: "resource/resource"
},{
name: "文件读取示例",
url: "resource/fileRead"
}]
},
{
name: "组件开发示例",
open: false,
pages: [{
name: "Hello UTS Component",
url: "component/helloView"
}]
},
{
name: "android平台示例",
open: false,
pages: [{
name: "activity生命周期监听",
url: "lifecycle/lifecycle"
}, {
name: "播放asset音频(需自定义基座)",
url: "advance/android/assetaudio"
}, {
name: "操作DecorView",
url: "advance/android/decorview"
}, {
name: "读取meta配置",
function: "testMetaRead"
}, {
name: "退出当前应用",
function: "testQuitApp"
}]
},
{
name: "iOS平台示例",
open: false,
pages: [{
name: "资源路径获取示例",
url: "advance/iOS/getResourcePath"
}]
},
],
arrowUpIcon: '/static/icons/arrow-up.png',
arrowDownIcon: '/static/icons/arrow-down.png',
arrowRightIcon: '/static/icons/arrow-right.png',
}
},
methods: {
triggerCollapse(index) {
for (var i = 0; i < this.list.length; ++i) {
if (index == i) {
this.list[i].open = !this.list[i].open;
} else {
this.list[i].open = false;
}
}
},
goDetailPage(e) {
if (e.function) {
this[e.function]()
return
}
uni.navigateTo({
url: `/pages/${e.url}`
})
},
/**
* 测试延迟任务
*/
testTimer: function() {
doTimerTask({
start: function(response) {
uni.showToast({
title: response,
icon: 'none'
});
},
work: function(response) {
uni.showToast({
title: response,
icon: 'none'
});
},
});
},
/**
* 测试周期任务
*/
testInterval: function() {
var ret = doIntervalTask({
start: function(response) {
uni.showToast({
title: response,
icon: 'none'
});
},
work: function(response) {
uni.showToast({
title: response,
icon: 'none'
});
},
});
this.taskId = ret.taskId;
},
/**
* 取消周期任务
*/
testClearInterval: function() {
console.log(this.taskId);
clearIntervalTask(this.taskId);
},
testInputDialog() {
getUserInput(function(res) {
console.log(res);
});
},
testQuitApp() {
quitApp()
},
testMetaRead() {
let ret = getMetaConfig();
uni.showToast({
icon: "none",
title: '读取成功,注意查看控制台输出'
});
console.log(ret);
}
}
}
</script>
<style>
</style>
@import '@/common/uni-uvue.css';
.uni-container {
min-height: 100%;
}
</style>
\ No newline at end of file
......@@ -2,10 +2,8 @@
<view>
<page-head title="asset 音频播放示例" accordion></page-head>
<uni-list>
<uni-list-item title="播放asset音频" :clickable="true" @tap="testStart"></uni-list-item>
<uni-list-item title="停止播放asset音频" :clickable="true" @tap="testStop"></uni-list-item>
</uni-list>
<button @click="testStart">播放asset音频</button>
<button @click="testStop">停止播放asset音频</button>
</view>
</template>
......
......@@ -2,10 +2,8 @@
<view>
<page-head title="asset 音频播放示例" accordion></page-head>
<uni-list>
<uni-list-item title="播放asset音频" :clickable="true" @tap="testStart"></uni-list-item>
<uni-list-item title="停止播放asset音频" :clickable="true" @tap="testStop"></uni-list-item>
</uni-list>
<button @click="testStart">播放asset音频</button>
<button @click="testStop">停止播放asset音频</button>
</view>
</template>
......
<template>
<view>
<page-head title="DecorView示例" accordion></page-head>
<uni-list>
<uni-list-item title="添加TextView至视图顶层" :clickable="true" @tap="testAddToDecorView"></uni-list-item>
<uni-list-item title="移除视图顶层的TextView" :clickable="true" @tap="testRemoveToDecorView"></uni-list-item>
</uni-list>
<button @click="testAddToDecorView">添加TextView至视图顶层</button>
<button @click="testRemoveToDecorView">移除视图顶层的TextView</button>
</view>
</template>
......
......@@ -2,10 +2,8 @@
<view>
<page-head title="DecorView示例" accordion></page-head>
<uni-list>
<uni-list-item title="添加TextView至视图顶层" :clickable="true" @tap="testAddToDecorView"></uni-list-item>
<uni-list-item title="移除视图顶层的TextView" :clickable="true" @tap="testRemoveToDecorView"></uni-list-item>
</uni-list>
<button @click="testAddToDecorView">添加TextView至视图顶层</button>
<button @click="testRemoveToDecorView">移除视图顶层的TextView</button>
</view>
</template>
......
......@@ -5,16 +5,16 @@
</view>
</template>
<script>
import { getResourcePath } from '@/uni_modules/uts-advance'
import { removeExampleImageView } from '@/uni_modules/uts-advance'
// import { getResourcePath } from '@/uni_modules/uts-advance'
// import { removeExampleImageView } from '@/uni_modules/uts-advance'
export default {
onUnload() {
removeExampleImageView()
// removeExampleImageView()
},
methods:{
getResourcePath(){
getResourcePath("/static/logo.png")
// getResourcePath("/static/logo.png")
}
}
}
......
<template>
<div>
<view>
<uts-hello-view buttonText="点击按钮内容" style="width:375px;height: 375px;background-color: aqua;"></uts-hello-view>
<uts-hello-container>
<text>文本组件</text>
<image src="../../static/logo.png" mode="aspectFit"></image>
</uts-hello-container>
</div>
</view>
</template>
......
<template>
<view>
<page-head :title="title"></page-head>
<input class="uni-input" v-model="stringParam" />
<view class="uni-btn-v uni-common-mt">
<button type="primary" @tap="testDoSthWithCallback">uts异步方法(无参数)</button>
<button type="primary" @tap="testDoSthWithString">uts异步方法(字符串参数)</button>
<button type="primary" @tap="testDoSthWithJSON">uts异步方法(json参数)</button>
</view>
</view>
</template>
<script>
import * as UTSHello from "../../uni_modules/uts-helloworld";
export default {
data() {
return {
title: 'UTS入门示例',
stringParam:"hello world",
}
},
methods: {
/**
* 测试无参数调用
*/
testDoSthWithCallback: function () {
UTSHello.callWithoutParam(
()=>{
uni.showToast({
title:'成功调用uts插件uts-helloworld的callWithoutParam',
icon:'none'
});
}
);
},
/**
* 测试字符串参数回调
*/
testDoSthWithString: function () {
UTSHello.callWithStringParam(
this.stringParam,
function(response){
uni.showToast({
title:'uts插件uts-helloworld的callWithStringParam方法收到了你输入的字符串:'+response,
icon:'none'
});
},
);
},
/**
* 测试json参数回调
*/
testDoSthWithJSON: function () {
var inputObject = {
inputText:this.stringParam,
errCode:0
}
UTSHello.callWithJSONParam({
input:inputObject,
success:function(response){
uni.showToast({
title:'执行结果:' + JSON.stringify(response),
icon:'none'
});
}
});
},
}
}
</script>
<style>
<template>
<view>
<page-head :title="title"></page-head>
<input class="uni-input" v-model="stringParam" />
<view class="uni-btn-v uni-common-mt">
<button type="primary" @tap="testDoSthWithCallback">uts异步方法(无参数)</button>
<button type="primary" @tap="testDoSthWithString">uts异步方法(字符串参数)</button>
<button type="primary" @tap="testDoSthWithJSON">uts异步方法(json参数)</button>
</view>
</view>
</template>
<script>
import { callWithJSONParam, callWithStringParam, callWithoutParam, JsonParamOptions, inputJSON } from "../../uni_modules/uts-helloworld";
export default {
data() {
return {
title: 'UTS入门示例',
stringParam: "hello world",
}
},
methods: {
/**
* 测试无参数调用
*/
testDoSthWithCallback: function () {
callWithoutParam(
() => {
uni.showToast({
title: '成功调用uts插件uts-helloworld的callWithoutParam',
icon: 'none'
});
}
);
},
/**
* 测试字符串参数回调
*/
testDoSthWithString: function () {
callWithStringParam(
this.stringParam,
function (response) {
uni.showToast({
title: 'uts插件uts-helloworld的callWithStringParam方法收到了你输入的字符串:' + response,
icon: 'none'
});
},
);
},
/**
* 测试json参数回调
*/
testDoSthWithJSON: function () {
const that = this
var inputObject : inputJSON = {
inputText: that.stringParam,
errCode: 0
}
callWithJSONParam({
input: inputObject,
success: function (response) {
uni.showToast({
title: '执行结果:' + JSON.stringify(response),
icon: 'none'
});
}
} as JsonParamOptions);
},
}
}
</script>
<style>
</style>
\ No newline at end of file
......@@ -10,7 +10,7 @@
</view>
</template>
<script>
import * as UTSHello from "../../uni_modules/uts-helloworld";
import { callWithJSONParam, callWithStringParam, callWithoutParam } from "../../uni_modules/uts-helloworld";
export default {
data() {
......@@ -27,7 +27,7 @@
*/
testDoSthWithCallback: function () {
UTSHello.callWithoutParam(
callWithoutParam(
()=>{
uni.showToast({
title:'成功调用uts插件uts-helloworld的callWithoutParam',
......@@ -41,7 +41,7 @@
*/
testDoSthWithString: function () {
UTSHello.callWithStringParam(
callWithStringParam(
this.stringParam,
function(response){
uni.showToast({
......@@ -60,7 +60,7 @@
errCode:0
}
UTSHello.callWithJSONParam({
callWithJSONParam({
input:inputObject,
success:function(response){
uni.showToast({
......
......@@ -34,8 +34,8 @@
let that = this;
initAppLifecycle(function(eventLog){
// 展示捕捉到的声明周期日志
that.text = that.text += eventLog;
that.text = that.text += '\n';
that.text += eventLog;
that.text += '\n';
});
},
methods:{
......
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-btn-v uni-common-mt">
<button type="primary" @tap="getImageBase64">读取图片base64</button>
<button type="primary" @tap="getFileText">读取文本内容</button>
</view>
</view>
</template>
<script>
import { readFile,writeFile, ReadFileOptions, WriteFileOptions } from '../../uni_modules/uts-file-manager'
export default {
data() {
return {
title: '文件读取示例',
logo:""
}
},
methods: {
getImageBase64:function(){
readFile({
type:'base64',
path:'static/logo.png',
success:function(res){
console.log("success")
console.log(res)
},
fail:function(res){
console.log('fail')
console.log(res)
},
complete:function(res){
console.log("complete")
console.log(res)
}
} as ReadFileOptions)
},
getFileText:function(){
writeFile({
path:'/test/1.txt',
content:'锄禾日当午,汗滴禾下土,谁知盘中餐,粒粒皆辛苦',
success:function(res){
readFile({
type:'text',
path:res.filePath,
success:function(res){
console.log("success")
console.log(res)
},
fail:function(res){
console.log('fail')
console.log(res)
},
complete:function(res){
console.log("complete")
console.log(res)
}
} as ReadFileOptions)
},
fail:function(res){
console.log('fail')
console.log(res)
},
complete:function(res){
console.log("complete")
console.log(res)
}
} as WriteFileOptions)
}
}
}
</script>
<style>
</style>
## 1.2.1(2022-09-05)
- 修复 当 text 超过 max-num 时,badge 的宽度计算是根据 text 的长度计算,更改为 css 计算实际展示宽度,详见:[https://ask.dcloud.net.cn/question/150473](https://ask.dcloud.net.cn/question/150473)
## 1.2.0(2021-11-19)
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-badge](https://uniapp.dcloud.io/component/uniui/uni-badge)
## 1.1.7(2021-11-08)
- 优化 升级ui
- 修改 size 属性默认值调整为 small
- 修改 type 属性,默认值调整为 error,info 替换 default
## 1.1.6(2021-09-22)
- 修复 在字节小程序上样式不生效的 bug
## 1.1.5(2021-07-30)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.4(2021-07-29)
- 修复 去掉 nvue 不支持css 的 align-self 属性,nvue 下不暂支持 absolute 属性
## 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>
<view class="uni-badge--x">
<slot />
<text v-if="text" :class="classNames" :style="[positionStyle, customStyle, dotStyle]"
class="uni-badge" @click="onClick()">{{displayValue}}</text>
</view>
</template>
<script>
/**
* Badge 数字角标
* @description 数字角标一般和其它控件(列表、9宫格等)配合使用,用于进行数量提示,默认为实心灰色背景
* @tutorial https://ext.dcloud.net.cn/plugin?id=21
* @property {String} text 角标内容
* @property {String} size = [normal|small] 角标内容
* @property {String} type = [info|primary|success|warning|error] 颜色类型
* @value info 灰色
* @value primary 蓝色
* @value success 绿色
* @value warning 黄色
* @value error 红色
* @property {String} inverted = [true|false] 是否无需背景颜色
* @property {Number} maxNum 展示封顶的数字值,超过 99 显示 99+
* @property {String} absolute = [rightTop|rightBottom|leftBottom|leftTop] 开启绝对定位, 角标将定位到其包裹的标签的四角上
* @value rightTop 右上
* @value rightBottom 右下
* @value leftTop 左上
* @value leftBottom 左下
* @property {Array[number]} offset 距定位角中心点的偏移量,只有存在 absolute 属性时有效,例如:[-10, -10] 表示向外偏移 10px,[10, 10] 表示向 absolute 指定的内偏移 10px
* @property {String} isDot = [true|false] 是否显示为一个小点
* @event {Function} click 点击 Badge 触发事件
* @example <uni-badge text="1"></uni-badge>
*/
export default {
name: 'UniBadge',
emits: ['click'],
props: {
type: {
type: String,
default: 'error'
},
inverted: {
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: ''
},
size: {
type: String,
default: 'small'
},
customStyle: {
type: Object,
default () {
return {}
}
}
},
data() {
return {};
},
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' : ''
].join(' ')
},
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']
},
dotStyle() {
if (!this.isDot) return {}
return {
width: '10px',
minWidth: '0',
height: '10px',
padding: '0',
borderRadius: '10px'
}
},
displayValue() {
const {
isDot,
text,
maxNum
} = this
return isDot ? '' : (Number(text) > maxNum ? `${maxNum}+` : text)
}
},
methods: {
onClick() {
this.$emit('click');
}
}
};
</script>
<style lang="scss" >
$uni-primary: #2979ff !default;
$uni-success: #4cd964 !default;
$uni-warning: #f0ad4e !default;
$uni-error: #dd524d !default;
$uni-info: #909399 !default;
$bage-size: 12px;
$bage-small: scale(0.8);
.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--small {
transform: $bage-small;
transform-origin: center center;
}
.uni-badge {
/* #ifndef APP-NVUE */
display: flex;
overflow: hidden;
box-sizing: border-box;
/* #endif */
justify-content: center;
flex-direction: row;
height: 20px;
min-width: 20px;
padding: 0 4px;
line-height: 18px;
color: #fff;
border-radius: 100px;
background-color: $uni-info;
background-color: transparent;
border: 1px solid #fff;
text-align: center;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
font-feature-settings: "tnum";
font-size: $bage-size;
/* #ifdef H5 */
z-index: 999;
cursor: pointer;
/* #endif */
&--info {
color: #fff;
background-color: $uni-info;
}
&--primary {
background-color: $uni-primary;
}
&--success {
background-color: $uni-success;
}
&--warning {
background-color: $uni-warning;
}
&--error {
background-color: $uni-error;
}
&--inverted {
padding: 0 5px 0 0;
color: $uni-info;
}
&--info-inverted {
color: $uni-info;
background-color: transparent;
}
&--primary-inverted {
color: $uni-primary;
background-color: transparent;
}
&--success-inverted {
color: $uni-success;
background-color: transparent;
}
&--warning-inverted {
color: $uni-warning;
background-color: transparent;
}
&--error-inverted {
color: $uni-error;
background-color: transparent;
}
}
</style>
{
"id": "uni-badge",
"displayName": "uni-badge 数字角标",
"version": "1.2.1",
"description": "数字角标(徽章)组件,在元素周围展示消息提醒,一般用于列表、九宫格、按钮等地方。",
"keywords": [
"",
"badge",
"uni-ui",
"uniui",
"数字角标",
"徽章"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
"type": "component-vue"
},
"uni_modules": {
"dependencies": ["uni-scss"],
"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"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
\ No newline at end of file
## Badge 数字角标
> **组件名:uni-badge**
> 代码块: `uBadge`
数字角标一般和其它控件(列表、9宫格等)配合使用,用于进行数量提示,默认为实心灰色背景,
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-badge)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
## 1.4.3(2022-01-25)
- 修复 初始化的时候 ,open 属性失效的bug
## 1.4.2(2022-01-21)
- 修复 微信小程序resize后组件收起的bug
## 1.4.1(2021-11-22)
- 修复 vue3中个别scss变量无法找到的问题
## 1.4.0(2021-11-19)
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-collapse](https://uniapp.dcloud.io/component/uniui/uni-collapse)
## 1.3.3(2021-08-17)
- 优化 show-arrow 属性默认为true
## 1.3.2(2021-08-17)
- 新增 show-arrow 属性,控制是否显示右侧箭头
## 1.3.1(2021-07-30)
- 优化 vue3下小程序事件警告的问题
## 1.3.0(2021-07-30)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 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-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 v-if="showArrow"
: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="bottom" />
</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} open = [true|false] 是否展开组件
* @property {Boolean} titleBorder = [true|false] 是否显示标题分隔线
* @property {Boolean} border = [true|false] 是否显示分隔线
* @property {Boolean} disabled = [true|false] 是否展开面板
* @property {Boolean} showAnimation = [true|false] 开启动画
* @property {Boolean} showArrow = [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
},
showArrow: {
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
this.onClick(this.open, 'init')
},
// #ifndef VUE3
// TODO vue2
destroyed() {
if (this.__isUnmounted) return
this.uninstall()
},
// #endif
// #ifdef VUE3
// TODO vue3
unmounted() {
this.__isUnmounted = true
this.uninstall()
},
// #endif
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.isOpen, '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">
.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: #999;
}
}
}
&.uni-collapse-item-border {
border-bottom: 1px solid #ebeef5;
}
&.is-open {
border-bottom-color: transparent;
}
&-img {
height: 22px;
width: 22px;
margin-right: 10px;
}
&-text {
flex: 1;
font-size: 14px;
/* #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 {String|Array} value 当前激活面板改变时触发(如果是手风琴模式,参数类型为string,否则为array)
* @property {Boolean} accordion = [true|false] 是否开启手风琴效果是否开启手风琴效果
* @event {Function} change 切换面板时触发,如果是手风琴模式,返回类型为string,否则为array
*/
export default {
name: 'uniCollapse',
emits:['change','activeItem','input','update:modelValue'],
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.$nextTick(()=>{
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" >
.uni-collapse {
/* #ifndef APP-NVUE */
width: 100%;
display: flex;
/* #endif */
/* #ifdef APP-NVUE */
flex: 1;
/* #endif */
flex-direction: column;
background-color: #fff;
}
</style>
{
"id": "uni-collapse",
"displayName": "uni-collapse 折叠面板",
"version": "1.4.3",
"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-scss",
"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"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
## Collapse 折叠面板
> **组件名:uni-collapse**
> 代码块: `uCollapse`
> 关联组件:`uni-collapse-item`、`uni-icons`。
折叠面板用来折叠/显示过长的内容或者是列表。通常是在多内容分类项使用,折叠不重要的内容,显示重要内容。点击可以展开折叠部分。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-collapse)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
\ No newline at end of file
## 1.3.5(2022-01-24)
- 优化 size 属性可以传入不带单位的字符串数值
## 1.3.4(2022-01-24)
- 优化 size 支持其他单位
## 1.3.3(2022-01-17)
- 修复 nvue 有些图标不显示的bug,兼容老版本图标
## 1.3.2(2021-12-01)
- 优化 示例可复制图标名称
## 1.3.1(2021-11-23)
- 优化 兼容旧组件 type 值
## 1.3.0(2021-11-19)
- 新增 更多图标
- 优化 自定义图标使用方式
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-icons](https://uniapp.dcloud.io/component/uniui/uni-icons)
## 1.1.7(2021-11-08)
## 1.2.0(2021-07-30)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.5(2021-05-12)
- 新增 组件示例地址
## 1.1.4(2021-02-05)
- 调整为uni_modules目录规范
export default {
"id": "2852637",
"name": "uniui图标库",
"font_family": "uniicons",
"css_prefix_text": "uniui-",
"description": "",
"glyphs": [
{
"icon_id": "25027049",
"name": "yanse",
"font_class": "color",
"unicode": "e6cf",
"unicode_decimal": 59087
},
{
"icon_id": "25027048",
"name": "wallet",
"font_class": "wallet",
"unicode": "e6b1",
"unicode_decimal": 59057
},
{
"icon_id": "25015720",
"name": "settings-filled",
"font_class": "settings-filled",
"unicode": "e6ce",
"unicode_decimal": 59086
},
{
"icon_id": "25015434",
"name": "shimingrenzheng-filled",
"font_class": "auth-filled",
"unicode": "e6cc",
"unicode_decimal": 59084
},
{
"icon_id": "24934246",
"name": "shop-filled",
"font_class": "shop-filled",
"unicode": "e6cd",
"unicode_decimal": 59085
},
{
"icon_id": "24934159",
"name": "staff-filled-01",
"font_class": "staff-filled",
"unicode": "e6cb",
"unicode_decimal": 59083
},
{
"icon_id": "24932461",
"name": "VIP-filled",
"font_class": "vip-filled",
"unicode": "e6c6",
"unicode_decimal": 59078
},
{
"icon_id": "24932462",
"name": "plus_circle_fill",
"font_class": "plus-filled",
"unicode": "e6c7",
"unicode_decimal": 59079
},
{
"icon_id": "24932463",
"name": "folder_add-filled",
"font_class": "folder-add-filled",
"unicode": "e6c8",
"unicode_decimal": 59080
},
{
"icon_id": "24932464",
"name": "yanse-filled",
"font_class": "color-filled",
"unicode": "e6c9",
"unicode_decimal": 59081
},
{
"icon_id": "24932465",
"name": "tune-filled",
"font_class": "tune-filled",
"unicode": "e6ca",
"unicode_decimal": 59082
},
{
"icon_id": "24932455",
"name": "a-rilidaka-filled",
"font_class": "calendar-filled",
"unicode": "e6c0",
"unicode_decimal": 59072
},
{
"icon_id": "24932456",
"name": "notification-filled",
"font_class": "notification-filled",
"unicode": "e6c1",
"unicode_decimal": 59073
},
{
"icon_id": "24932457",
"name": "wallet-filled",
"font_class": "wallet-filled",
"unicode": "e6c2",
"unicode_decimal": 59074
},
{
"icon_id": "24932458",
"name": "paihangbang-filled",
"font_class": "medal-filled",
"unicode": "e6c3",
"unicode_decimal": 59075
},
{
"icon_id": "24932459",
"name": "gift-filled",
"font_class": "gift-filled",
"unicode": "e6c4",
"unicode_decimal": 59076
},
{
"icon_id": "24932460",
"name": "fire-filled",
"font_class": "fire-filled",
"unicode": "e6c5",
"unicode_decimal": 59077
},
{
"icon_id": "24928001",
"name": "refreshempty",
"font_class": "refreshempty",
"unicode": "e6bf",
"unicode_decimal": 59071
},
{
"icon_id": "24926853",
"name": "location-ellipse",
"font_class": "location-filled",
"unicode": "e6af",
"unicode_decimal": 59055
},
{
"icon_id": "24926735",
"name": "person-filled",
"font_class": "person-filled",
"unicode": "e69d",
"unicode_decimal": 59037
},
{
"icon_id": "24926703",
"name": "personadd-filled",
"font_class": "personadd-filled",
"unicode": "e698",
"unicode_decimal": 59032
},
{
"icon_id": "24923351",
"name": "back",
"font_class": "back",
"unicode": "e6b9",
"unicode_decimal": 59065
},
{
"icon_id": "24923352",
"name": "forward",
"font_class": "forward",
"unicode": "e6ba",
"unicode_decimal": 59066
},
{
"icon_id": "24923353",
"name": "arrowthinright",
"font_class": "arrow-right",
"unicode": "e6bb",
"unicode_decimal": 59067
},
{
"icon_id": "24923353",
"name": "arrowthinright",
"font_class": "arrowthinright",
"unicode": "e6bb",
"unicode_decimal": 59067
},
{
"icon_id": "24923354",
"name": "arrowthinleft",
"font_class": "arrow-left",
"unicode": "e6bc",
"unicode_decimal": 59068
},
{
"icon_id": "24923354",
"name": "arrowthinleft",
"font_class": "arrowthinleft",
"unicode": "e6bc",
"unicode_decimal": 59068
},
{
"icon_id": "24923355",
"name": "arrowthinup",
"font_class": "arrow-up",
"unicode": "e6bd",
"unicode_decimal": 59069
},
{
"icon_id": "24923355",
"name": "arrowthinup",
"font_class": "arrowthinup",
"unicode": "e6bd",
"unicode_decimal": 59069
},
{
"icon_id": "24923356",
"name": "arrowthindown",
"font_class": "arrow-down",
"unicode": "e6be",
"unicode_decimal": 59070
},{
"icon_id": "24923356",
"name": "arrowthindown",
"font_class": "arrowthindown",
"unicode": "e6be",
"unicode_decimal": 59070
},
{
"icon_id": "24923349",
"name": "arrowdown",
"font_class": "bottom",
"unicode": "e6b8",
"unicode_decimal": 59064
},{
"icon_id": "24923349",
"name": "arrowdown",
"font_class": "arrowdown",
"unicode": "e6b8",
"unicode_decimal": 59064
},
{
"icon_id": "24923346",
"name": "arrowright",
"font_class": "right",
"unicode": "e6b5",
"unicode_decimal": 59061
},
{
"icon_id": "24923346",
"name": "arrowright",
"font_class": "arrowright",
"unicode": "e6b5",
"unicode_decimal": 59061
},
{
"icon_id": "24923347",
"name": "arrowup",
"font_class": "top",
"unicode": "e6b6",
"unicode_decimal": 59062
},
{
"icon_id": "24923347",
"name": "arrowup",
"font_class": "arrowup",
"unicode": "e6b6",
"unicode_decimal": 59062
},
{
"icon_id": "24923348",
"name": "arrowleft",
"font_class": "left",
"unicode": "e6b7",
"unicode_decimal": 59063
},
{
"icon_id": "24923348",
"name": "arrowleft",
"font_class": "arrowleft",
"unicode": "e6b7",
"unicode_decimal": 59063
},
{
"icon_id": "24923334",
"name": "eye",
"font_class": "eye",
"unicode": "e651",
"unicode_decimal": 58961
},
{
"icon_id": "24923335",
"name": "eye-filled",
"font_class": "eye-filled",
"unicode": "e66a",
"unicode_decimal": 58986
},
{
"icon_id": "24923336",
"name": "eye-slash",
"font_class": "eye-slash",
"unicode": "e6b3",
"unicode_decimal": 59059
},
{
"icon_id": "24923337",
"name": "eye-slash-filled",
"font_class": "eye-slash-filled",
"unicode": "e6b4",
"unicode_decimal": 59060
},
{
"icon_id": "24923305",
"name": "info-filled",
"font_class": "info-filled",
"unicode": "e649",
"unicode_decimal": 58953
},
{
"icon_id": "24923299",
"name": "reload-01",
"font_class": "reload",
"unicode": "e6b2",
"unicode_decimal": 59058
},
{
"icon_id": "24923195",
"name": "mic_slash_fill",
"font_class": "micoff-filled",
"unicode": "e6b0",
"unicode_decimal": 59056
},
{
"icon_id": "24923165",
"name": "map-pin-ellipse",
"font_class": "map-pin-ellipse",
"unicode": "e6ac",
"unicode_decimal": 59052
},
{
"icon_id": "24923166",
"name": "map-pin",
"font_class": "map-pin",
"unicode": "e6ad",
"unicode_decimal": 59053
},
{
"icon_id": "24923167",
"name": "location",
"font_class": "location",
"unicode": "e6ae",
"unicode_decimal": 59054
},
{
"icon_id": "24923064",
"name": "starhalf",
"font_class": "starhalf",
"unicode": "e683",
"unicode_decimal": 59011
},
{
"icon_id": "24923065",
"name": "star",
"font_class": "star",
"unicode": "e688",
"unicode_decimal": 59016
},
{
"icon_id": "24923066",
"name": "star-filled",
"font_class": "star-filled",
"unicode": "e68f",
"unicode_decimal": 59023
},
{
"icon_id": "24899646",
"name": "a-rilidaka",
"font_class": "calendar",
"unicode": "e6a0",
"unicode_decimal": 59040
},
{
"icon_id": "24899647",
"name": "fire",
"font_class": "fire",
"unicode": "e6a1",
"unicode_decimal": 59041
},
{
"icon_id": "24899648",
"name": "paihangbang",
"font_class": "medal",
"unicode": "e6a2",
"unicode_decimal": 59042
},
{
"icon_id": "24899649",
"name": "font",
"font_class": "font",
"unicode": "e6a3",
"unicode_decimal": 59043
},
{
"icon_id": "24899650",
"name": "gift",
"font_class": "gift",
"unicode": "e6a4",
"unicode_decimal": 59044
},
{
"icon_id": "24899651",
"name": "link",
"font_class": "link",
"unicode": "e6a5",
"unicode_decimal": 59045
},
{
"icon_id": "24899652",
"name": "notification",
"font_class": "notification",
"unicode": "e6a6",
"unicode_decimal": 59046
},
{
"icon_id": "24899653",
"name": "staff",
"font_class": "staff",
"unicode": "e6a7",
"unicode_decimal": 59047
},
{
"icon_id": "24899654",
"name": "VIP",
"font_class": "vip",
"unicode": "e6a8",
"unicode_decimal": 59048
},
{
"icon_id": "24899655",
"name": "folder_add",
"font_class": "folder-add",
"unicode": "e6a9",
"unicode_decimal": 59049
},
{
"icon_id": "24899656",
"name": "tune",
"font_class": "tune",
"unicode": "e6aa",
"unicode_decimal": 59050
},
{
"icon_id": "24899657",
"name": "shimingrenzheng",
"font_class": "auth",
"unicode": "e6ab",
"unicode_decimal": 59051
},
{
"icon_id": "24899565",
"name": "person",
"font_class": "person",
"unicode": "e699",
"unicode_decimal": 59033
},
{
"icon_id": "24899566",
"name": "email-filled",
"font_class": "email-filled",
"unicode": "e69a",
"unicode_decimal": 59034
},
{
"icon_id": "24899567",
"name": "phone-filled",
"font_class": "phone-filled",
"unicode": "e69b",
"unicode_decimal": 59035
},
{
"icon_id": "24899568",
"name": "phone",
"font_class": "phone",
"unicode": "e69c",
"unicode_decimal": 59036
},
{
"icon_id": "24899570",
"name": "email",
"font_class": "email",
"unicode": "e69e",
"unicode_decimal": 59038
},
{
"icon_id": "24899571",
"name": "personadd",
"font_class": "personadd",
"unicode": "e69f",
"unicode_decimal": 59039
},
{
"icon_id": "24899558",
"name": "chatboxes-filled",
"font_class": "chatboxes-filled",
"unicode": "e692",
"unicode_decimal": 59026
},
{
"icon_id": "24899559",
"name": "contact",
"font_class": "contact",
"unicode": "e693",
"unicode_decimal": 59027
},
{
"icon_id": "24899560",
"name": "chatbubble-filled",
"font_class": "chatbubble-filled",
"unicode": "e694",
"unicode_decimal": 59028
},
{
"icon_id": "24899561",
"name": "contact-filled",
"font_class": "contact-filled",
"unicode": "e695",
"unicode_decimal": 59029
},
{
"icon_id": "24899562",
"name": "chatboxes",
"font_class": "chatboxes",
"unicode": "e696",
"unicode_decimal": 59030
},
{
"icon_id": "24899563",
"name": "chatbubble",
"font_class": "chatbubble",
"unicode": "e697",
"unicode_decimal": 59031
},
{
"icon_id": "24881290",
"name": "upload-filled",
"font_class": "upload-filled",
"unicode": "e68e",
"unicode_decimal": 59022
},
{
"icon_id": "24881292",
"name": "upload",
"font_class": "upload",
"unicode": "e690",
"unicode_decimal": 59024
},
{
"icon_id": "24881293",
"name": "weixin",
"font_class": "weixin",
"unicode": "e691",
"unicode_decimal": 59025
},
{
"icon_id": "24881274",
"name": "compose",
"font_class": "compose",
"unicode": "e67f",
"unicode_decimal": 59007
},
{
"icon_id": "24881275",
"name": "qq",
"font_class": "qq",
"unicode": "e680",
"unicode_decimal": 59008
},
{
"icon_id": "24881276",
"name": "download-filled",
"font_class": "download-filled",
"unicode": "e681",
"unicode_decimal": 59009
},
{
"icon_id": "24881277",
"name": "pengyouquan",
"font_class": "pyq",
"unicode": "e682",
"unicode_decimal": 59010
},
{
"icon_id": "24881279",
"name": "sound",
"font_class": "sound",
"unicode": "e684",
"unicode_decimal": 59012
},
{
"icon_id": "24881280",
"name": "trash-filled",
"font_class": "trash-filled",
"unicode": "e685",
"unicode_decimal": 59013
},
{
"icon_id": "24881281",
"name": "sound-filled",
"font_class": "sound-filled",
"unicode": "e686",
"unicode_decimal": 59014
},
{
"icon_id": "24881282",
"name": "trash",
"font_class": "trash",
"unicode": "e687",
"unicode_decimal": 59015
},
{
"icon_id": "24881284",
"name": "videocam-filled",
"font_class": "videocam-filled",
"unicode": "e689",
"unicode_decimal": 59017
},
{
"icon_id": "24881285",
"name": "spinner-cycle",
"font_class": "spinner-cycle",
"unicode": "e68a",
"unicode_decimal": 59018
},
{
"icon_id": "24881286",
"name": "weibo",
"font_class": "weibo",
"unicode": "e68b",
"unicode_decimal": 59019
},
{
"icon_id": "24881288",
"name": "videocam",
"font_class": "videocam",
"unicode": "e68c",
"unicode_decimal": 59020
},
{
"icon_id": "24881289",
"name": "download",
"font_class": "download",
"unicode": "e68d",
"unicode_decimal": 59021
},
{
"icon_id": "24879601",
"name": "help",
"font_class": "help",
"unicode": "e679",
"unicode_decimal": 59001
},
{
"icon_id": "24879602",
"name": "navigate-filled",
"font_class": "navigate-filled",
"unicode": "e67a",
"unicode_decimal": 59002
},
{
"icon_id": "24879603",
"name": "plusempty",
"font_class": "plusempty",
"unicode": "e67b",
"unicode_decimal": 59003
},
{
"icon_id": "24879604",
"name": "smallcircle",
"font_class": "smallcircle",
"unicode": "e67c",
"unicode_decimal": 59004
},
{
"icon_id": "24879605",
"name": "minus-filled",
"font_class": "minus-filled",
"unicode": "e67d",
"unicode_decimal": 59005
},
{
"icon_id": "24879606",
"name": "micoff",
"font_class": "micoff",
"unicode": "e67e",
"unicode_decimal": 59006
},
{
"icon_id": "24879588",
"name": "closeempty",
"font_class": "closeempty",
"unicode": "e66c",
"unicode_decimal": 58988
},
{
"icon_id": "24879589",
"name": "clear",
"font_class": "clear",
"unicode": "e66d",
"unicode_decimal": 58989
},
{
"icon_id": "24879590",
"name": "navigate",
"font_class": "navigate",
"unicode": "e66e",
"unicode_decimal": 58990
},
{
"icon_id": "24879591",
"name": "minus",
"font_class": "minus",
"unicode": "e66f",
"unicode_decimal": 58991
},
{
"icon_id": "24879592",
"name": "image",
"font_class": "image",
"unicode": "e670",
"unicode_decimal": 58992
},
{
"icon_id": "24879593",
"name": "mic",
"font_class": "mic",
"unicode": "e671",
"unicode_decimal": 58993
},
{
"icon_id": "24879594",
"name": "paperplane",
"font_class": "paperplane",
"unicode": "e672",
"unicode_decimal": 58994
},
{
"icon_id": "24879595",
"name": "close",
"font_class": "close",
"unicode": "e673",
"unicode_decimal": 58995
},
{
"icon_id": "24879596",
"name": "help-filled",
"font_class": "help-filled",
"unicode": "e674",
"unicode_decimal": 58996
},
{
"icon_id": "24879597",
"name": "plus-filled",
"font_class": "paperplane-filled",
"unicode": "e675",
"unicode_decimal": 58997
},
{
"icon_id": "24879598",
"name": "plus",
"font_class": "plus",
"unicode": "e676",
"unicode_decimal": 58998
},
{
"icon_id": "24879599",
"name": "mic-filled",
"font_class": "mic-filled",
"unicode": "e677",
"unicode_decimal": 58999
},
{
"icon_id": "24879600",
"name": "image-filled",
"font_class": "image-filled",
"unicode": "e678",
"unicode_decimal": 59000
},
{
"icon_id": "24855900",
"name": "locked-filled",
"font_class": "locked-filled",
"unicode": "e668",
"unicode_decimal": 58984
},
{
"icon_id": "24855901",
"name": "info",
"font_class": "info",
"unicode": "e669",
"unicode_decimal": 58985
},
{
"icon_id": "24855903",
"name": "locked",
"font_class": "locked",
"unicode": "e66b",
"unicode_decimal": 58987
},
{
"icon_id": "24855884",
"name": "camera-filled",
"font_class": "camera-filled",
"unicode": "e658",
"unicode_decimal": 58968
},
{
"icon_id": "24855885",
"name": "chat-filled",
"font_class": "chat-filled",
"unicode": "e659",
"unicode_decimal": 58969
},
{
"icon_id": "24855886",
"name": "camera",
"font_class": "camera",
"unicode": "e65a",
"unicode_decimal": 58970
},
{
"icon_id": "24855887",
"name": "circle",
"font_class": "circle",
"unicode": "e65b",
"unicode_decimal": 58971
},
{
"icon_id": "24855888",
"name": "checkmarkempty",
"font_class": "checkmarkempty",
"unicode": "e65c",
"unicode_decimal": 58972
},
{
"icon_id": "24855889",
"name": "chat",
"font_class": "chat",
"unicode": "e65d",
"unicode_decimal": 58973
},
{
"icon_id": "24855890",
"name": "circle-filled",
"font_class": "circle-filled",
"unicode": "e65e",
"unicode_decimal": 58974
},
{
"icon_id": "24855891",
"name": "flag",
"font_class": "flag",
"unicode": "e65f",
"unicode_decimal": 58975
},
{
"icon_id": "24855892",
"name": "flag-filled",
"font_class": "flag-filled",
"unicode": "e660",
"unicode_decimal": 58976
},
{
"icon_id": "24855893",
"name": "gear-filled",
"font_class": "gear-filled",
"unicode": "e661",
"unicode_decimal": 58977
},
{
"icon_id": "24855894",
"name": "home",
"font_class": "home",
"unicode": "e662",
"unicode_decimal": 58978
},
{
"icon_id": "24855895",
"name": "home-filled",
"font_class": "home-filled",
"unicode": "e663",
"unicode_decimal": 58979
},
{
"icon_id": "24855896",
"name": "gear",
"font_class": "gear",
"unicode": "e664",
"unicode_decimal": 58980
},
{
"icon_id": "24855897",
"name": "smallcircle-filled",
"font_class": "smallcircle-filled",
"unicode": "e665",
"unicode_decimal": 58981
},
{
"icon_id": "24855898",
"name": "map-filled",
"font_class": "map-filled",
"unicode": "e666",
"unicode_decimal": 58982
},
{
"icon_id": "24855899",
"name": "map",
"font_class": "map",
"unicode": "e667",
"unicode_decimal": 58983
},
{
"icon_id": "24855825",
"name": "refresh-filled",
"font_class": "refresh-filled",
"unicode": "e656",
"unicode_decimal": 58966
},
{
"icon_id": "24855826",
"name": "refresh",
"font_class": "refresh",
"unicode": "e657",
"unicode_decimal": 58967
},
{
"icon_id": "24855808",
"name": "cloud-upload",
"font_class": "cloud-upload",
"unicode": "e645",
"unicode_decimal": 58949
},
{
"icon_id": "24855809",
"name": "cloud-download-filled",
"font_class": "cloud-download-filled",
"unicode": "e646",
"unicode_decimal": 58950
},
{
"icon_id": "24855810",
"name": "cloud-download",
"font_class": "cloud-download",
"unicode": "e647",
"unicode_decimal": 58951
},
{
"icon_id": "24855811",
"name": "cloud-upload-filled",
"font_class": "cloud-upload-filled",
"unicode": "e648",
"unicode_decimal": 58952
},
{
"icon_id": "24855813",
"name": "redo",
"font_class": "redo",
"unicode": "e64a",
"unicode_decimal": 58954
},
{
"icon_id": "24855814",
"name": "images-filled",
"font_class": "images-filled",
"unicode": "e64b",
"unicode_decimal": 58955
},
{
"icon_id": "24855815",
"name": "undo-filled",
"font_class": "undo-filled",
"unicode": "e64c",
"unicode_decimal": 58956
},
{
"icon_id": "24855816",
"name": "more",
"font_class": "more",
"unicode": "e64d",
"unicode_decimal": 58957
},
{
"icon_id": "24855817",
"name": "more-filled",
"font_class": "more-filled",
"unicode": "e64e",
"unicode_decimal": 58958
},
{
"icon_id": "24855818",
"name": "undo",
"font_class": "undo",
"unicode": "e64f",
"unicode_decimal": 58959
},
{
"icon_id": "24855819",
"name": "images",
"font_class": "images",
"unicode": "e650",
"unicode_decimal": 58960
},
{
"icon_id": "24855821",
"name": "paperclip",
"font_class": "paperclip",
"unicode": "e652",
"unicode_decimal": 58962
},
{
"icon_id": "24855822",
"name": "settings",
"font_class": "settings",
"unicode": "e653",
"unicode_decimal": 58963
},
{
"icon_id": "24855823",
"name": "search",
"font_class": "search",
"unicode": "e654",
"unicode_decimal": 58964
},
{
"icon_id": "24855824",
"name": "redo-filled",
"font_class": "redo-filled",
"unicode": "e655",
"unicode_decimal": 58965
},
{
"icon_id": "24841702",
"name": "list",
"font_class": "list",
"unicode": "e644",
"unicode_decimal": 58948
},
{
"icon_id": "24841489",
"name": "mail-open-filled",
"font_class": "mail-open-filled",
"unicode": "e63a",
"unicode_decimal": 58938
},
{
"icon_id": "24841491",
"name": "hand-thumbsdown-filled",
"font_class": "hand-down-filled",
"unicode": "e63c",
"unicode_decimal": 58940
},
{
"icon_id": "24841492",
"name": "hand-thumbsdown",
"font_class": "hand-down",
"unicode": "e63d",
"unicode_decimal": 58941
},
{
"icon_id": "24841493",
"name": "hand-thumbsup-filled",
"font_class": "hand-up-filled",
"unicode": "e63e",
"unicode_decimal": 58942
},
{
"icon_id": "24841494",
"name": "hand-thumbsup",
"font_class": "hand-up",
"unicode": "e63f",
"unicode_decimal": 58943
},
{
"icon_id": "24841496",
"name": "heart-filled",
"font_class": "heart-filled",
"unicode": "e641",
"unicode_decimal": 58945
},
{
"icon_id": "24841498",
"name": "mail-open",
"font_class": "mail-open",
"unicode": "e643",
"unicode_decimal": 58947
},
{
"icon_id": "24841488",
"name": "heart",
"font_class": "heart",
"unicode": "e639",
"unicode_decimal": 58937
},
{
"icon_id": "24839963",
"name": "loop",
"font_class": "loop",
"unicode": "e633",
"unicode_decimal": 58931
},
{
"icon_id": "24839866",
"name": "pulldown",
"font_class": "pulldown",
"unicode": "e632",
"unicode_decimal": 58930
},
{
"icon_id": "24813798",
"name": "scan",
"font_class": "scan",
"unicode": "e62a",
"unicode_decimal": 58922
},
{
"icon_id": "24813786",
"name": "bars",
"font_class": "bars",
"unicode": "e627",
"unicode_decimal": 58919
},
{
"icon_id": "24813788",
"name": "cart-filled",
"font_class": "cart-filled",
"unicode": "e629",
"unicode_decimal": 58921
},
{
"icon_id": "24813790",
"name": "checkbox",
"font_class": "checkbox",
"unicode": "e62b",
"unicode_decimal": 58923
},
{
"icon_id": "24813791",
"name": "checkbox-filled",
"font_class": "checkbox-filled",
"unicode": "e62c",
"unicode_decimal": 58924
},
{
"icon_id": "24813794",
"name": "shop",
"font_class": "shop",
"unicode": "e62f",
"unicode_decimal": 58927
},
{
"icon_id": "24813795",
"name": "headphones",
"font_class": "headphones",
"unicode": "e630",
"unicode_decimal": 58928
},
{
"icon_id": "24813796",
"name": "cart",
"font_class": "cart",
"unicode": "e631",
"unicode_decimal": 58929
}
]
}
<template>
<!-- #ifdef APP-NVUE -->
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" @click="_onClick">{{unicode}}</text>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"></text>
<!-- #endif -->
</template>
<script>
import icons from './icons.js';
const getVal = (val) => {
const reg = /^[0-9]*$/g
return (typeof val === 'number' || reg.test(val) )? val + 'px' : val;
}
// #ifdef APP-NVUE
var domModule = weex.requireModule('dom');
import iconUrl from './uniicons.ttf'
domModule.addRule('fontFace', {
'fontFamily': "uniicons",
'src': "url('"+iconUrl+"')"
});
// #endif
/**
* Icons 图标
* @description 用于展示 icons 图标
* @tutorial https://ext.dcloud.net.cn/plugin?id=28
* @property {Number} size 图标大小
* @property {String} type 图标图案,参考示例
* @property {String} color 图标颜色
* @property {String} customPrefix 自定义图标
* @event {Function} click 点击 Icon 触发事件
*/
export default {
name: 'UniIcons',
emits:['click'],
props: {
type: {
type: String,
default: ''
},
color: {
type: String,
default: '#333333'
},
size: {
type: [Number, String],
default: 16
},
customPrefix:{
type: String,
default: ''
}
},
data() {
return {
icons: icons.glyphs
}
},
computed:{
unicode(){
let code = this.icons.find(v=>v.font_class === this.type)
if(code){
return unescape(`%u${code.unicode}`)
}
return ''
},
iconSize(){
return getVal(this.size)
}
},
methods: {
_onClick() {
this.$emit('click')
}
}
}
</script>
<style lang="scss">
/* #ifndef APP-NVUE */
@import './uniicons.css';
@font-face {
font-family: uniicons;
src: url('./uniicons.ttf') format('truetype');
}
/* #endif */
.uni-icons {
font-family: uniicons;
text-decoration: none;
text-align: center;
}
</style>
.uniui-color:before {
content: "\e6cf";
}
.uniui-wallet:before {
content: "\e6b1";
}
.uniui-settings-filled:before {
content: "\e6ce";
}
.uniui-auth-filled:before {
content: "\e6cc";
}
.uniui-shop-filled:before {
content: "\e6cd";
}
.uniui-staff-filled:before {
content: "\e6cb";
}
.uniui-vip-filled:before {
content: "\e6c6";
}
.uniui-plus-filled:before {
content: "\e6c7";
}
.uniui-folder-add-filled:before {
content: "\e6c8";
}
.uniui-color-filled:before {
content: "\e6c9";
}
.uniui-tune-filled:before {
content: "\e6ca";
}
.uniui-calendar-filled:before {
content: "\e6c0";
}
.uniui-notification-filled:before {
content: "\e6c1";
}
.uniui-wallet-filled:before {
content: "\e6c2";
}
.uniui-medal-filled:before {
content: "\e6c3";
}
.uniui-gift-filled:before {
content: "\e6c4";
}
.uniui-fire-filled:before {
content: "\e6c5";
}
.uniui-refreshempty:before {
content: "\e6bf";
}
.uniui-location-filled:before {
content: "\e6af";
}
.uniui-person-filled:before {
content: "\e69d";
}
.uniui-personadd-filled:before {
content: "\e698";
}
.uniui-back:before {
content: "\e6b9";
}
.uniui-forward:before {
content: "\e6ba";
}
.uniui-arrow-right:before {
content: "\e6bb";
}
.uniui-arrowthinright:before {
content: "\e6bb";
}
.uniui-arrow-left:before {
content: "\e6bc";
}
.uniui-arrowthinleft:before {
content: "\e6bc";
}
.uniui-arrow-up:before {
content: "\e6bd";
}
.uniui-arrowthinup:before {
content: "\e6bd";
}
.uniui-arrow-down:before {
content: "\e6be";
}
.uniui-arrowthindown:before {
content: "\e6be";
}
.uniui-bottom:before {
content: "\e6b8";
}
.uniui-arrowdown:before {
content: "\e6b8";
}
.uniui-right:before {
content: "\e6b5";
}
.uniui-arrowright:before {
content: "\e6b5";
}
.uniui-top:before {
content: "\e6b6";
}
.uniui-arrowup:before {
content: "\e6b6";
}
.uniui-left:before {
content: "\e6b7";
}
.uniui-arrowleft:before {
content: "\e6b7";
}
.uniui-eye:before {
content: "\e651";
}
.uniui-eye-filled:before {
content: "\e66a";
}
.uniui-eye-slash:before {
content: "\e6b3";
}
.uniui-eye-slash-filled:before {
content: "\e6b4";
}
.uniui-info-filled:before {
content: "\e649";
}
.uniui-reload:before {
content: "\e6b2";
}
.uniui-micoff-filled:before {
content: "\e6b0";
}
.uniui-map-pin-ellipse:before {
content: "\e6ac";
}
.uniui-map-pin:before {
content: "\e6ad";
}
.uniui-location:before {
content: "\e6ae";
}
.uniui-starhalf:before {
content: "\e683";
}
.uniui-star:before {
content: "\e688";
}
.uniui-star-filled:before {
content: "\e68f";
}
.uniui-calendar:before {
content: "\e6a0";
}
.uniui-fire:before {
content: "\e6a1";
}
.uniui-medal:before {
content: "\e6a2";
}
.uniui-font:before {
content: "\e6a3";
}
.uniui-gift:before {
content: "\e6a4";
}
.uniui-link:before {
content: "\e6a5";
}
.uniui-notification:before {
content: "\e6a6";
}
.uniui-staff:before {
content: "\e6a7";
}
.uniui-vip:before {
content: "\e6a8";
}
.uniui-folder-add:before {
content: "\e6a9";
}
.uniui-tune:before {
content: "\e6aa";
}
.uniui-auth:before {
content: "\e6ab";
}
.uniui-person:before {
content: "\e699";
}
.uniui-email-filled:before {
content: "\e69a";
}
.uniui-phone-filled:before {
content: "\e69b";
}
.uniui-phone:before {
content: "\e69c";
}
.uniui-email:before {
content: "\e69e";
}
.uniui-personadd:before {
content: "\e69f";
}
.uniui-chatboxes-filled:before {
content: "\e692";
}
.uniui-contact:before {
content: "\e693";
}
.uniui-chatbubble-filled:before {
content: "\e694";
}
.uniui-contact-filled:before {
content: "\e695";
}
.uniui-chatboxes:before {
content: "\e696";
}
.uniui-chatbubble:before {
content: "\e697";
}
.uniui-upload-filled:before {
content: "\e68e";
}
.uniui-upload:before {
content: "\e690";
}
.uniui-weixin:before {
content: "\e691";
}
.uniui-compose:before {
content: "\e67f";
}
.uniui-qq:before {
content: "\e680";
}
.uniui-download-filled:before {
content: "\e681";
}
.uniui-pyq:before {
content: "\e682";
}
.uniui-sound:before {
content: "\e684";
}
.uniui-trash-filled:before {
content: "\e685";
}
.uniui-sound-filled:before {
content: "\e686";
}
.uniui-trash:before {
content: "\e687";
}
.uniui-videocam-filled:before {
content: "\e689";
}
.uniui-spinner-cycle:before {
content: "\e68a";
}
.uniui-weibo:before {
content: "\e68b";
}
.uniui-videocam:before {
content: "\e68c";
}
.uniui-download:before {
content: "\e68d";
}
.uniui-help:before {
content: "\e679";
}
.uniui-navigate-filled:before {
content: "\e67a";
}
.uniui-plusempty:before {
content: "\e67b";
}
.uniui-smallcircle:before {
content: "\e67c";
}
.uniui-minus-filled:before {
content: "\e67d";
}
.uniui-micoff:before {
content: "\e67e";
}
.uniui-closeempty:before {
content: "\e66c";
}
.uniui-clear:before {
content: "\e66d";
}
.uniui-navigate:before {
content: "\e66e";
}
.uniui-minus:before {
content: "\e66f";
}
.uniui-image:before {
content: "\e670";
}
.uniui-mic:before {
content: "\e671";
}
.uniui-paperplane:before {
content: "\e672";
}
.uniui-close:before {
content: "\e673";
}
.uniui-help-filled:before {
content: "\e674";
}
.uniui-paperplane-filled:before {
content: "\e675";
}
.uniui-plus:before {
content: "\e676";
}
.uniui-mic-filled:before {
content: "\e677";
}
.uniui-image-filled:before {
content: "\e678";
}
.uniui-locked-filled:before {
content: "\e668";
}
.uniui-info:before {
content: "\e669";
}
.uniui-locked:before {
content: "\e66b";
}
.uniui-camera-filled:before {
content: "\e658";
}
.uniui-chat-filled:before {
content: "\e659";
}
.uniui-camera:before {
content: "\e65a";
}
.uniui-circle:before {
content: "\e65b";
}
.uniui-checkmarkempty:before {
content: "\e65c";
}
.uniui-chat:before {
content: "\e65d";
}
.uniui-circle-filled:before {
content: "\e65e";
}
.uniui-flag:before {
content: "\e65f";
}
.uniui-flag-filled:before {
content: "\e660";
}
.uniui-gear-filled:before {
content: "\e661";
}
.uniui-home:before {
content: "\e662";
}
.uniui-home-filled:before {
content: "\e663";
}
.uniui-gear:before {
content: "\e664";
}
.uniui-smallcircle-filled:before {
content: "\e665";
}
.uniui-map-filled:before {
content: "\e666";
}
.uniui-map:before {
content: "\e667";
}
.uniui-refresh-filled:before {
content: "\e656";
}
.uniui-refresh:before {
content: "\e657";
}
.uniui-cloud-upload:before {
content: "\e645";
}
.uniui-cloud-download-filled:before {
content: "\e646";
}
.uniui-cloud-download:before {
content: "\e647";
}
.uniui-cloud-upload-filled:before {
content: "\e648";
}
.uniui-redo:before {
content: "\e64a";
}
.uniui-images-filled:before {
content: "\e64b";
}
.uniui-undo-filled:before {
content: "\e64c";
}
.uniui-more:before {
content: "\e64d";
}
.uniui-more-filled:before {
content: "\e64e";
}
.uniui-undo:before {
content: "\e64f";
}
.uniui-images:before {
content: "\e650";
}
.uniui-paperclip:before {
content: "\e652";
}
.uniui-settings:before {
content: "\e653";
}
.uniui-search:before {
content: "\e654";
}
.uniui-redo-filled:before {
content: "\e655";
}
.uniui-list:before {
content: "\e644";
}
.uniui-mail-open-filled:before {
content: "\e63a";
}
.uniui-hand-down-filled:before {
content: "\e63c";
}
.uniui-hand-down:before {
content: "\e63d";
}
.uniui-hand-up-filled:before {
content: "\e63e";
}
.uniui-hand-up:before {
content: "\e63f";
}
.uniui-heart-filled:before {
content: "\e641";
}
.uniui-mail-open:before {
content: "\e643";
}
.uniui-heart:before {
content: "\e639";
}
.uniui-loop:before {
content: "\e633";
}
.uniui-pulldown:before {
content: "\e632";
}
.uniui-scan:before {
content: "\e62a";
}
.uniui-bars:before {
content: "\e627";
}
.uniui-cart-filled:before {
content: "\e629";
}
.uniui-checkbox:before {
content: "\e62b";
}
.uniui-checkbox-filled:before {
content: "\e62c";
}
.uniui-shop:before {
content: "\e62f";
}
.uniui-headphones:before {
content: "\e630";
}
.uniui-cart:before {
content: "\e631";
}
{
"id": "uni-icons",
"displayName": "uni-icons 图标",
"version": "1.3.5",
"description": "图标组件,用于展示移动端常见的图标,可自定义颜色、大小。",
"keywords": [
"uni-ui",
"uniui",
"icon",
"图标"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": "^3.2.14"
},
"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-scss"],
"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"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
\ No newline at end of file
## Icons 图标
> **组件名:uni-icons**
> 代码块: `uIcons`
用于展示 icons 图标 。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-icons)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
## 1.2.1(2022-03-30)
- 删除无用文件
## 1.2.0(2021-11-23)
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-list](https://uniapp.dcloud.io/component/uniui/uni-list)
## 1.1.3(2021-08-30)
- 修复 在vue3中to属性在发行应用的时候报错的bug
## 1.1.2(2021-07-30)
- 优化 vue3下事件警告的问题
## 1.1.1(2021-07-21)
- 修复 与其他组件嵌套使用时,点击失效的Bug
## 1.1.0(2021-07-13)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.17(2021-05-12)
- 新增 组件示例地址
## 1.0.16(2021-02-05)
- 优化 组件引用关系,通过uni_modules引用组件
## 1.0.15(2021-02-05)
- 调整为uni_modules目录规范
- 修复 uni-list-chat 角标显示不正常的问题
<template>
<!-- #ifdef APP-NVUE -->
<cell>
<!-- #endif -->
<view class="uni-list-ad">
<view v-if="borderShow" :class="{'uni-list--border':border,'uni-list-item--first':isFirstChild}"></view>
<ad style="width: 200px;height: 300px;border-width: 1px;border-color: red;border-style: solid;" adpid="1111111111"
unit-id="" appid="" apid="" type="feed" @error="aderror" @close="closeAd"></ad>
</view>
<!-- #ifdef APP-NVUE -->
</cell>
<!-- #endif -->
</template>
<script>
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin('dom');
// #endif
export default {
name: 'UniListAd',
props: {
title: {
type: String,
default: '',
}
},
// inject: ['list'],
data() {
return {
isFirstChild: false,
border: false,
borderShow: true,
}
},
mounted() {
this.list = this.getForm()
if (this.list) {
if (!this.list.firstChildAppend) {
this.list.firstChildAppend = true
this.isFirstChild = true
}
this.border = this.list.border
}
},
methods: {
/**
* 获取父元素实例
*/
getForm(name = 'uniList') {
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;
},
aderror(e) {
console.log("aderror: " + JSON.stringify(e.detail));
},
closeAd(e) {
this.borderShow = false
}
}
}
</script>
<style lang="scss" >
.uni-list-ad {
position: relative;
border: 1px red solid;
}
.uni-list--border {
position: relative;
padding-bottom: 1px;
/* #ifdef APP-PLUS */
border-top-color: $uni-border-color;
border-top-style: solid;
border-top-width: 0.5px;
/* #endif */
margin-left: $uni-spacing-row-lg;
}
/* #ifndef APP-NVUE */
.uni-list--border:after {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: $uni-border-color;
}
.uni-list-item--first:after {
height: 0px;
}
/* #endif */
</style>
/**
* 这里是 uni-list 组件内置的常用样式变量
* 如果需要覆盖样式,这里提供了基本的组件样式变量,您可以尝试修改这里的变量,去完成样式替换,而不用去修改源码
*
*/
// 背景色
$background-color : #fff;
// 分割线颜色
$divide-line-color : #e5e5e5;
// 默认头像大小,如需要修改此值,注意同步修改 js 中的值 const avatarWidth = xx ,目前只支持方形头像
// nvue 页面不支持修改头像大小
$avatar-width : 45px ;
// 头像边框
$avatar-border-radius: 5px;
$avatar-border-color: #eee;
$avatar-border-width: 1px;
// 标题文字样式
$title-size : 16px;
$title-color : #3b4144;
$title-weight : normal;
// 描述文字样式
$note-size : 12px;
$note-color : #999;
$note-weight : normal;
// 右侧额外内容默认样式
$right-text-size : 12px;
$right-text-color : #999;
$right-text-weight : normal;
// 角标样式
// nvue 页面不支持修改圆点位置以及大小
// 角标在左侧时,角标的位置,默认为 0 ,负数左/下移动,正数右/上移动
$badge-left: 0px;
$badge-top: 0px;
// 显示圆点时,圆点大小
$dot-width: 10px;
$dot-height: 10px;
// 显示角标时,角标大小和字体大小
$badge-size : 18px;
$badge-font : 12px;
// 显示角标时,角标前景色
$badge-color : #fff;
// 显示角标时,角标背景色
$badge-background-color : #ff5a5f;
// 显示角标时,角标左右间距
$badge-space : 6px;
// 状态样式
// 选中颜色
$hover : #f5f5f5;
<template>
<!-- #ifdef APP-NVUE -->
<cell>
<!-- #endif -->
<view :hover-class="!clickable && !link ? '' : 'uni-list-chat--hover'" class="uni-list-chat" @click.stop="onClick">
<view :class="{ 'uni-list--border': border, 'uni-list-chat--first': isFirstChild }"></view>
<view class="uni-list-chat__container">
<view class="uni-list-chat__header-warp">
<view v-if="avatarCircle || avatarList.length === 0" class="uni-list-chat__header" :class="{ 'header--circle': avatarCircle }">
<image class="uni-list-chat__header-image" :class="{ 'header--circle': avatarCircle }" :src="avatar" mode="aspectFill"></image>
</view>
<!-- 头像组 -->
<view v-else class="uni-list-chat__header">
<view v-for="(item, index) in avatarList" :key="index" class="uni-list-chat__header-box" :class="computedAvatar"
:style="{ width: imageWidth + 'px', height: imageWidth + 'px' }">
<image class="uni-list-chat__header-image" :style="{ width: imageWidth + 'px', height: imageWidth + 'px' }" :src="item.url"
mode="aspectFill"></image>
</view>
</view>
</view>
<view v-if="badgeText && badgePositon === 'left'" class="uni-list-chat__badge uni-list-chat__badge-pos" :class="[isSingle]">
<text class="uni-list-chat__badge-text">{{ badgeText === 'dot' ? '' : badgeText }}</text>
</view>
<view class="uni-list-chat__content">
<view class="uni-list-chat__content-main">
<text class="uni-list-chat__content-title uni-ellipsis">{{ title }}</text>
<text class="uni-list-chat__content-note uni-ellipsis">{{ note }}</text>
</view>
<view class="uni-list-chat__content-extra">
<slot>
<text class="uni-list-chat__content-extra-text">{{ time }}</text>
<view v-if="badgeText && badgePositon === 'right'" class="uni-list-chat__badge" :class="[isSingle, badgePositon === 'right' ? 'uni-list-chat--right' : '']">
<text class="uni-list-chat__badge-text">{{ badgeText === 'dot' ? '' : badgeText }}</text>
</view>
</slot>
</view>
</view>
</view>
</view>
<!-- #ifdef APP-NVUE -->
</cell>
<!-- #endif -->
</template>
<script>
// 头像大小
const avatarWidth = 45;
/**
* ListChat 聊天列表
* @description 聊天列表,用于创建聊天类列表
* @tutorial https://ext.dcloud.net.cn/plugin?id=24
* @property {String} title 标题
* @property {String} note 描述
* @property {Boolean} clickable = [true|false] 是否开启点击反馈,默认为false
* @property {String} badgeText 数字角标内容
* @property {String} badgePositon = [left|right] 角标位置,默认为 right
* @property {String} link = [false|navigateTo|redirectTo|reLaunch|switchTab] 是否展示右侧箭头并开启点击反馈,默认为false
* @value false 不开启
* @value navigateTo 同 uni.navigateTo()
* @value redirectTo 同 uni.redirectTo()
* @value reLaunch 同 uni.reLaunch()
* @value switchTab 同 uni.switchTab()
* @property {String | PageURIString} to 跳转目标页面
* @property {String} time 右侧时间显示
* @property {Boolean} avatarCircle = [true|false] 是否显示圆形头像,默认为false
* @property {String} avatar 头像地址,avatarCircle 不填时生效
* @property {Array} avatarList 头像组,格式为 [{url:''}]
* @event {Function} click 点击 uniListChat 触发事件
*/
export default {
name: 'UniListChat',
emits:['click'],
props: {
title: {
type: String,
default: ''
},
note: {
type: String,
default: ''
},
clickable: {
type: Boolean,
default: false
},
link: {
type: [Boolean, String],
default: false
},
to: {
type: String,
default: ''
},
badgeText: {
type: [String, Number],
default: ''
},
badgePositon: {
type: String,
default: 'right'
},
time: {
type: String,
default: ''
},
avatarCircle: {
type: Boolean,
default: false
},
avatar: {
type: String,
default: ''
},
avatarList: {
type: Array,
default () {
return [];
}
}
},
// inject: ['list'],
computed: {
isSingle() {
if (this.badgeText === 'dot') {
return 'uni-badge--dot';
} else {
const badgeText = this.badgeText.toString();
if (badgeText.length > 1) {
return 'uni-badge--complex';
} else {
return 'uni-badge--single';
}
}
},
computedAvatar() {
if (this.avatarList.length > 4) {
this.imageWidth = avatarWidth * 0.31;
return 'avatarItem--3';
} else if (this.avatarList.length > 1) {
this.imageWidth = avatarWidth * 0.47;
return 'avatarItem--2';
} else {
this.imageWidth = avatarWidth;
return 'avatarItem--1';
}
}
},
data() {
return {
isFirstChild: false,
border: true,
// avatarList: 3,
imageWidth: 50
};
},
mounted() {
this.list = this.getForm()
if (this.list) {
if (!this.list.firstChildAppend) {
this.list.firstChildAppend = true;
this.isFirstChild = true;
}
this.border = this.list.border;
}
},
methods: {
/**
* 获取父元素实例
*/
getForm(name = 'uniList') {
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;
},
onClick() {
if (this.to !== '') {
this.openPage();
return;
}
if (this.clickable || this.link) {
this.$emit('click', {
data: {}
});
}
},
openPage() {
if (['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].indexOf(this.link) !== -1) {
this.pageApi(this.link);
} else {
this.pageApi('navigateTo');
}
},
pageApi(api) {
uni[api]({
url: this.to,
success: res => {
this.$emit('click', {
data: res
});
},
fail: err => {
this.$emit('click', {
data: err
});
console.error(err.errMsg);
}
});
}
}
};
</script>
<style lang="scss" >
$uni-font-size-lg:16px;
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;
$background-color: #fff;
$divide-line-color: #e5e5e5;
$avatar-width: 45px;
$avatar-border-radius: 5px;
$avatar-border-color: #eee;
$avatar-border-width: 1px;
$title-size: 16px;
$title-color: #3b4144;
$title-weight: normal;
$note-size: 12px;
$note-color: #999;
$note-weight: normal;
$right-text-size: 12px;
$right-text-color: #999;
$right-text-weight: normal;
$badge-left: 0px;
$badge-top: 0px;
$dot-width: 10px;
$dot-height: 10px;
$badge-size: 18px;
$badge-font: 12px;
$badge-color: #fff;
$badge-background-color: #ff5a5f;
$badge-space: 6px;
$hover: #f5f5f5;
.uni-list-chat {
font-size: $uni-font-size-lg;
position: relative;
flex-direction: column;
justify-content: space-between;
background-color: $background-color;
}
// .uni-list-chat--disabled {
// opacity: 0.3;
// }
.uni-list-chat--hover {
background-color: $hover;
}
.uni-list--border {
position: relative;
margin-left: $uni-spacing-row-lg;
/* #ifdef APP-PLUS */
border-top-color: $divide-line-color;
border-top-style: solid;
border-top-width: 0.5px;
/* #endif */
}
/* #ifndef APP-NVUE */
.uni-list--border:after {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
background-color: $divide-line-color;
}
.uni-list-item--first:after {
height: 0px;
}
/* #endif */
.uni-list-chat--first {
border-top-width: 0px;
}
.uni-ellipsis {
/* #ifndef APP-NVUE */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/* #endif */
/* #ifdef APP-NVUE */
lines: 1;
/* #endif */
}
.uni-ellipsis-2 {
/* #ifndef APP-NVUE */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
/* #endif */
/* #ifdef APP-NVUE */
lines: 2;
/* #endif */
}
.uni-list-chat__container {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex: 1;
padding: $uni-spacing-row-base $uni-spacing-row-lg;
position: relative;
overflow: hidden;
}
.uni-list-chat__header-warp {
position: relative;
}
.uni-list-chat__header {
/* #ifndef APP-NVUE */
display: flex;
align-content: center;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap-reverse;
/* #ifdef APP-NVUE */
width: 50px;
height: 50px;
/* #endif */
/* #ifndef APP-NVUE */
width: $avatar-width;
height: $avatar-width;
/* #endif */
border-radius: $avatar-border-radius;
border-color: $avatar-border-color;
border-width: $avatar-border-width;
border-style: solid;
overflow: hidden;
}
.uni-list-chat__header-box {
/* #ifndef APP-PLUS */
box-sizing: border-box;
display: flex;
width: $avatar-width;
height: $avatar-width;
/* #endif */
/* #ifdef APP-NVUE */
width: 50px;
height: 50px;
/* #endif */
overflow: hidden;
border-radius: 2px;
}
.uni-list-chat__header-image {
margin: 1px;
/* #ifdef APP-NVUE */
width: 50px;
height: 50px;
/* #endif */
/* #ifndef APP-NVUE */
width: $avatar-width;
height: $avatar-width;
/* #endif */
}
/* #ifndef APP-NVUE */
.uni-list-chat__header-image {
display: block;
width: 100%;
height: 100%;
}
.avatarItem--1 {
width: 100%;
height: 100%;
}
.avatarItem--2 {
width: 47%;
height: 47%;
}
.avatarItem--3 {
width: 32%;
height: 32%;
}
/* #endif */
.header--circle {
border-radius: 50%;
}
.uni-list-chat__content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex: 1;
overflow: hidden;
padding: 2px 0;
}
.uni-list-chat__content-main {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: space-between;
padding-left: $uni-spacing-row-base;
flex: 1;
overflow: hidden;
}
.uni-list-chat__content-title {
font-size: $title-size;
color: $title-color;
font-weight: $title-weight;
overflow: hidden;
}
.uni-list-chat__content-note {
margin-top: 3px;
color: $note-color;
font-size: $note-size;
font-weight: $title-weight;
overflow: hidden;
}
.uni-list-chat__content-extra {
/* #ifndef APP-NVUE */
flex-shrink: 0;
display: flex;
/* #endif */
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
margin-left: 5px;
}
.uni-list-chat__content-extra-text {
color: $right-text-color;
font-size: $right-text-size;
font-weight: $right-text-weight;
overflow: hidden;
}
.uni-list-chat__badge-pos {
position: absolute;
/* #ifdef APP-NVUE */
left: 55px;
top: 3px;
/* #endif */
/* #ifndef APP-NVUE */
left: calc(#{$avatar-width} + 10px - #{$badge-space} + #{$badge-left});
top: calc(#{$uni-spacing-row-base}/ 2 + 1px + #{$badge-top});
/* #endif */
}
.uni-list-chat__badge {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
border-radius: 100px;
background-color: $badge-background-color;
}
.uni-list-chat__badge-text {
color: $badge-color;
font-size: $badge-font;
}
.uni-badge--single {
/* #ifndef APP-NVUE */
// left: calc(#{$avatar-width} + 7px + #{$badge-left});
/* #endif */
width: $badge-size;
height: $badge-size;
}
.uni-badge--complex {
/* #ifdef APP-NVUE */
left: 50px;
/* #endif */
/* #ifndef APP-NVUE */
width: auto;
/* #endif */
height: $badge-size;
padding: 0 $badge-space;
}
.uni-badge--dot {
/* #ifdef APP-NVUE */
left: 60px;
top: 6px;
/* #endif */
/* #ifndef APP-NVUE */
left: calc(#{$avatar-width} + 15px - #{$dot-width}/ 2 + 1px + #{$badge-left});
/* #endif */
width: $dot-width;
height: $dot-height;
padding: 0;
}
.uni-list-chat--right {
/* #ifdef APP-NVUE */
left: 0;
/* #endif */
}
</style>
<template>
<!-- #ifdef APP-NVUE -->
<cell>
<!-- #endif -->
<view :class="{ 'uni-list-item--disabled': disabled }"
:hover-class="(!clickable && !link) || disabled || showSwitch ? '' : 'uni-list-item--hover'"
class="uni-list-item" @click="onClick">
<view v-if="!isFirstChild" class="border--left" :class="{ 'uni-list--border': border }"></view>
<view class="uni-list-item__container"
:class="{ 'container--right': showArrow || link, 'flex--direction': direction === 'column' }">
<slot name="header">
<view class="uni-list-item__header">
<view v-if="thumb" class="uni-list-item__icon">
<image :src="thumb" class="uni-list-item__icon-img" :class="['uni-list--' + thumbSize]" />
</view>
<view v-else-if="showExtraIcon" class="uni-list-item__icon">
<uni-icons :color="extraIcon.color" :size="extraIcon.size" :type="extraIcon.type" />
</view>
</view>
</slot>
<slot name="body">
<view class="uni-list-item__content"
:class="{ 'uni-list-item__content--center': thumb || showExtraIcon || showBadge || showSwitch }">
<text v-if="title" class="uni-list-item__content-title"
:class="[ellipsis !== 0 && ellipsis <= 2 ? 'uni-ellipsis-' + ellipsis : '']">{{ title }}</text>
<text v-if="note" class="uni-list-item__content-note">{{ note }}</text>
</view>
</slot>
<slot name="footer">
<view v-if="rightText || showBadge || showSwitch" class="uni-list-item__extra"
:class="{ 'flex--justify': direction === 'column' }">
<text v-if="rightText" class="uni-list-item__extra-text">{{ rightText }}</text>
<uni-badge v-if="showBadge" :type="badgeType" :text="badgeText" :custom-style="badgeStyle" />
<switch v-if="showSwitch" :disabled="disabled" :checked="switchChecked"
@change="onSwitchChange" />
</view>
</slot>
</view>
<uni-icons v-if="showArrow || link" :size="16" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
</view>
<!-- #ifdef APP-NVUE -->
</cell>
<!-- #endif -->
</template>
<script>
/**
* ListItem 列表子组件
* @description 列表子组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=24
* @property {String} title 标题
* @property {String} note 描述
* @property {String} thumb 左侧缩略图,若thumb有值,则不会显示扩展图标
* @property {String} thumbSize = [lg|base|sm] 略缩图大小
* @value lg 大图
* @value base 一般
* @value sm 小图
* @property {String} badgeText 数字角标内容
* @property {String} badgeType 数字角标类型,参考[uni-icons](https://ext.dcloud.net.cn/plugin?id=21)
* @property {Object} badgeStyle 数字角标样式
* @property {String} rightText 右侧文字内容
* @property {Boolean} disabled = [true|false] 是否禁用
* @property {Boolean} clickable = [true|false] 是否开启点击反馈
* @property {String} link = [navigateTo|redirectTo|reLaunch|switchTab] 是否展示右侧箭头并开启点击反馈
* @value navigateTo 同 uni.navigateTo()
* @value redirectTo 同 uni.redirectTo()
* @value reLaunch 同 uni.reLaunch()
* @value switchTab 同 uni.switchTab()
* @property {String | PageURIString} to 跳转目标页面
* @property {Boolean} showBadge = [true|false] 是否显示数字角标
* @property {Boolean} showSwitch = [true|false] 是否显示Switch
* @property {Boolean} switchChecked = [true|false] Switch是否被选中
* @property {Boolean} showExtraIcon = [true|false] 左侧是否显示扩展图标
* @property {Object} extraIcon 扩展图标参数,格式为 {color: '#4cd964',size: '22',type: 'spinner'}
* @property {String} direction = [row|column] 排版方向
* @value row 水平排列
* @value column 垂直排列
* @event {Function} click 点击 uniListItem 触发事件
* @event {Function} switchChange 点击切换 Switch 时触发
*/
export default {
name: 'UniListItem',
emits: ['click', 'switchChange'],
props: {
direction: {
type: String,
default: 'row'
},
title: {
type: String,
default: ''
},
note: {
type: String,
default: ''
},
ellipsis: {
type: [Number,String],
default: 0
},
disabled: {
type: [Boolean, String],
default: false
},
clickable: {
type: Boolean,
default: false
},
showArrow: {
type: [Boolean, String],
default: false
},
link: {
type: [Boolean, String],
default: false
},
to: {
type: String,
default: ''
},
showBadge: {
type: [Boolean, String],
default: false
},
showSwitch: {
type: [Boolean, String],
default: false
},
switchChecked: {
type: [Boolean, String],
default: false
},
badgeText: {
type: String,
default: ''
},
badgeType: {
type: String,
default: 'success'
},
badgeStyle:{
type: Object,
default () {
return {}
}
},
rightText: {
type: String,
default: ''
},
thumb: {
type: String,
default: ''
},
thumbSize: {
type: String,
default: 'base'
},
showExtraIcon: {
type: [Boolean, String],
default: false
},
extraIcon: {
type: Object,
default () {
return {
type: '',
color: '#000000',
size: 20
};
}
},
border: {
type: Boolean,
default: true
}
},
// inject: ['list'],
data() {
return {
isFirstChild: false
};
},
mounted() {
this.list = this.getForm()
// 判断是否存在 uni-list 组件
if (this.list) {
if (!this.list.firstChildAppend) {
this.list.firstChildAppend = true;
this.isFirstChild = true;
}
}
},
methods: {
/**
* 获取父元素实例
*/
getForm(name = 'uniList') {
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;
},
onClick() {
if (this.to !== '') {
this.openPage();
return;
}
if (this.clickable || this.link) {
this.$emit('click', {
data: {}
});
}
},
onSwitchChange(e) {
this.$emit('switchChange', e.detail);
},
openPage() {
if (['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].indexOf(this.link) !== -1) {
this.pageApi(this.link);
} else {
this.pageApi('navigateTo');
}
},
pageApi(api) {
let callback = {
url: this.to,
success: res => {
this.$emit('click', {
data: res
});
},
fail: err => {
this.$emit('click', {
data: err
});
}
}
switch (api) {
case 'navigateTo':
uni.navigateTo(callback)
break
case 'redirectTo':
uni.redirectTo(callback)
break
case 'reLaunch':
uni.reLaunch(callback)
break
case 'switchTab':
uni.switchTab(callback)
break
default:
uni.navigateTo(callback)
}
}
}
};
</script>
<style lang="scss">
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16px;
$uni-spacing-col-lg: 12px;
$uni-spacing-row-lg: 15px;
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;
$uni-border-color:#e5e5e5;
$uni-bg-color-hover:#f1f1f1;
$uni-text-color-grey:#999;
$list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg;
.uni-list-item {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
font-size: $uni-font-size-lg;
position: relative;
justify-content: space-between;
align-items: center;
background-color: #fff;
flex-direction: row;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-list-item--disabled {
opacity: 0.3;
}
.uni-list-item--hover {
background-color: $uni-bg-color-hover;
}
.uni-list-item__container {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
padding: $list-item-pd;
padding-left: $uni-spacing-row-lg;
flex: 1;
overflow: hidden;
// align-items: center;
}
.container--right {
padding-right: 0;
}
// .border--left {
// margin-left: $uni-spacing-row-lg;
// }
.uni-list--border {
position: absolute;
top: 0;
right: 0;
left: 0;
/* #ifdef APP-NVUE */
border-top-color: $uni-border-color;
border-top-style: solid;
border-top-width: 0.5px;
/* #endif */
}
/* #ifndef APP-NVUE */
.uni-list--border:after {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
background-color: $uni-border-color;
}
/* #endif */
.uni-list-item__content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
padding-right: 8px;
flex: 1;
color: #3b4144;
// overflow: hidden;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.uni-list-item__content--center {
justify-content: center;
}
.uni-list-item__content-title {
font-size: $uni-font-size-base;
color: #3b4144;
overflow: hidden;
}
.uni-list-item__content-note {
margin-top: 6rpx;
color: $uni-text-color-grey;
font-size: $uni-font-size-sm;
overflow: hidden;
}
.uni-list-item__extra {
// width: 25%;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.uni-list-item__header {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
}
.uni-list-item__icon {
margin-right: 18rpx;
flex-direction: row;
justify-content: center;
align-items: center;
}
.uni-list-item__icon-img {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
height: $uni-img-size-base;
width: $uni-img-size-base;
margin-right: 10px;
}
.uni-icon-wrapper {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
align-items: center;
padding: 0 10px;
}
.flex--direction {
flex-direction: column;
/* #ifndef APP-NVUE */
align-items: initial;
/* #endif */
}
.flex--justify {
/* #ifndef APP-NVUE */
justify-content: initial;
/* #endif */
}
.uni-list--lg {
height: $uni-img-size-lg;
width: $uni-img-size-lg;
}
.uni-list--base {
height: $uni-img-size-base;
width: $uni-img-size-base;
}
.uni-list--sm {
height: $uni-img-size-sm;
width: $uni-img-size-sm;
}
.uni-list-item__extra-text {
color: $uni-text-color-grey;
font-size: $uni-font-size-sm;
}
.uni-ellipsis-1 {
/* #ifndef APP-NVUE */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/* #endif */
/* #ifdef APP-NVUE */
lines: 1;
text-overflow:ellipsis;
/* #endif */
}
.uni-ellipsis-2 {
/* #ifndef APP-NVUE */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
/* #endif */
/* #ifdef APP-NVUE */
lines: 2;
text-overflow:ellipsis;
/* #endif */
}
</style>
<template>
<!-- #ifndef APP-NVUE -->
<view class="uni-list uni-border-top-bottom">
<view v-if="border" class="uni-list--border-top"></view>
<slot />
<view v-if="border" class="uni-list--border-bottom"></view>
</view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<list class="uni-list" :class="{ 'uni-list--border': border }" :enableBackToTop="enableBackToTop" loadmoreoffset="15"><slot /></list>
<!-- #endif -->
</template>
<script>
/**
* List 列表
* @description 列表组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=24
* @property {String} border = [true|false] 标题
*/
export default {
name: 'uniList',
'mp-weixin': {
options: {
multipleSlots: false
}
},
props: {
enableBackToTop: {
type: [Boolean, String],
default: false
},
scrollY: {
type: [Boolean, String],
default: false
},
border: {
type: Boolean,
default: true
}
},
// provide() {
// return {
// list: this
// };
// },
created() {
this.firstChildAppend = false;
},
methods: {
loadMore(e) {
this.$emit('scrolltolower');
}
}
};
</script>
<style lang="scss" >
$uni-bg-color:#ffffff;
$uni-border-color:#e5e5e5;
.uni-list {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
background-color: $uni-bg-color;
position: relative;
flex-direction: column;
}
.uni-list--border {
position: relative;
/* #ifdef APP-NVUE */
border-top-color: $uni-border-color;
border-top-style: solid;
border-top-width: 0.5px;
border-bottom-color: $uni-border-color;
border-bottom-style: solid;
border-bottom-width: 0.5px;
/* #endif */
z-index: -1;
}
/* #ifndef APP-NVUE */
.uni-list--border-top {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
background-color: $uni-border-color;
z-index: 1;
}
.uni-list--border-bottom {
position: absolute;
bottom: 0;
right: 0;
left: 0;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
background-color: $uni-border-color;
}
/* #endif */
</style>
<template>
<!-- #ifdef APP-NVUE -->
<refresh :display="display" @refresh="onrefresh" @pullingdown="onpullingdown">
<slot />
</refresh>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<view ref="uni-refresh" class="uni-refresh" v-show="isShow">
<slot />
</view>
<!-- #endif -->
</template>
<script>
export default {
name: 'UniRefresh',
props: {
display: {
type: [String],
default: "hide"
}
},
data() {
return {
pulling: false
}
},
computed: {
isShow() {
if (this.display === "show" || this.pulling === true) {
return true;
}
return false;
}
},
created() {},
methods: {
onchange(value) {
this.pulling = value;
},
onrefresh(e) {
this.$emit("refresh", e);
},
onpullingdown(e) {
// #ifdef APP-NVUE
this.$emit("pullingdown", e);
// #endif
// #ifndef APP-NVUE
var detail = {
viewHeight: 90,
pullingDistance: e.height
}
this.$emit("pullingdown", detail);
// #endif
}
}
}
</script>
<style>
.uni-refresh {
height: 0;
overflow: hidden;
}
</style>
var pullDown = {
threshold: 95,
maxHeight: 200,
callRefresh: 'onrefresh',
callPullingDown: 'onpullingdown',
refreshSelector: '.uni-refresh'
};
function ready(newValue, oldValue, ownerInstance, instance) {
var state = instance.getState()
state.canPullDown = newValue;
// console.log(newValue);
}
function touchStart(e, instance) {
var state = instance.getState();
state.refreshInstance = instance.selectComponent(pullDown.refreshSelector);
state.canPullDown = (state.refreshInstance != null && state.refreshInstance != undefined);
if (!state.canPullDown) {
return
}
// console.log("touchStart");
state.height = 0;
state.touchStartY = e.touches[0].pageY || e.changedTouches[0].pageY;
state.refreshInstance.setStyle({
'height': 0
});
state.refreshInstance.callMethod("onchange", true);
}
function touchMove(e, ownerInstance) {
var instance = e.instance;
var state = instance.getState();
if (!state.canPullDown) {
return
}
var oldHeight = state.height;
var endY = e.touches[0].pageY || e.changedTouches[0].pageY;
var height = endY - state.touchStartY;
if (height > pullDown.maxHeight) {
return;
}
var refreshInstance = state.refreshInstance;
refreshInstance.setStyle({
'height': height + 'px'
});
height = height < pullDown.maxHeight ? height : pullDown.maxHeight;
state.height = height;
refreshInstance.callMethod(pullDown.callPullingDown, {
height: height
});
}
function touchEnd(e, ownerInstance) {
var state = e.instance.getState();
if (!state.canPullDown) {
return
}
state.refreshInstance.callMethod("onchange", false);
var refreshInstance = state.refreshInstance;
if (state.height > pullDown.threshold) {
refreshInstance.callMethod(pullDown.callRefresh);
return;
}
refreshInstance.setStyle({
'height': 0
});
}
function propObserver(newValue, oldValue, instance) {
pullDown = newValue;
}
module.exports = {
touchmove: touchMove,
touchstart: touchStart,
touchend: touchEnd,
propObserver: propObserver
}
{
"id": "uni-list",
"displayName": "uni-list 列表",
"version": "1.2.1",
"description": "List 组件 ,帮助使用者快速构建列表。",
"keywords": [
"",
"uni-ui",
"uniui",
"列表",
"",
"list"
],
"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-badge",
"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"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
\ No newline at end of file
## List 列表
> **组件名:uni-list**
> 代码块: `uList`、`uListItem`
> 关联组件:`uni-list-item`、`uni-badge`、`uni-icons`、`uni-list-chat`、`uni-list-ad`
List 列表组件,包含基本列表样式、可扩展插槽机制、长列表性能优化、多端兼容。
在vue页面里,它默认使用页面级滚动。在app-nvue页面里,它默认使用原生list组件滚动。这样的长列表,在滚动出屏幕外后,系统会回收不可见区域的渲染内存资源,不会造成滚动越长手机越卡的问题。
uni-list组件是父容器,里面的核心是uni-list-item子组件,它代表列表中的一个可重复行,子组件可以无限循环。
uni-list-item有很多风格,uni-list-item组件通过内置的属性,满足一些常用的场景。当内置属性不满足需求时,可以通过扩展插槽来自定义列表内容。
内置属性可以覆盖的场景包括:导航列表、设置列表、小图标列表、通信录列表、聊天记录列表。
涉及很多大图或丰富内容的列表,比如类今日头条的新闻列表、类淘宝的电商列表,需要通过扩展插槽实现。
下文均有样例给出。
uni-list不包含下拉刷新和上拉翻页。上拉翻页另见组件:[uni-load-more](https://ext.dcloud.net.cn/plugin?id=29)
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范,`HBuilderX 2.5.5`起,只需将本组件导入项目,在页面`template`中即可直接使用,无需在页面中`import`和注册`components`
如需通过`npm`方式使用`uni-ui`组件,另见文档:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
> **注意事项**
> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ,请自行手动安装
> - 组件内部依赖 `'uni-icons'` 、`uni-badge` 组件
> - `uni-list` 和 `uni-list-item` 需要配套使用,暂不支持单独使用 `uni-list-item`
> - 只有开启点击反馈后,会有点击选中效果
> - 使用插槽时,可以完全自定义内容
> - note 、rightText 属性暂时没做限制,不支持文字溢出隐藏,使用时应该控制长度显示或通过默认插槽自行扩展
> - 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式,开启方式: 详情 --> 项目配置 --> 启用 component2 编译
> - 如果需要修改 `switch`、`badge` 样式,请使用插槽自定义
> - 在 `HBuilderX` 低版本中,可能会出现组件显示 `undefined` 的问题,请升级最新的 `HBuilderX` 或者 `cli`
> - 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
### 基本用法
- 设置 `title` 属性,可以显示列表标题
- 设置 `disabled` 属性,可以禁用当前项
```html
<uni-list>
<uni-list-item title="列表文字" ></uni-list-item>
<uni-list-item :disabled="true" title="列表禁用状态" ></uni-list-item>
</uni-list>
```
### 多行内容显示
- 设置 `note` 属性 ,可以在第二行显示描述文本信息
```html
<uni-list>
<uni-list-item title="列表文字" note="列表描述信息"></uni-list-item>
<uni-list-item :disabled="true" title="列表文字" note="列表禁用状态"></uni-list-item>
</uni-list>
```
### 右侧显示角标、switch
- 设置 `show-badge` 属性 ,可以显示角标内容
- 设置 `show-switch` 属性,可以显示 switch 开关
```html
<uni-list>
<uni-list-item title="列表右侧显示角标" :show-badge="true" badge-text="12" ></uni-list-item>
<uni-list-item title="列表右侧显示 switch" :show-switch="true" @switchChange="switchChange" ></uni-list-item>
</uni-list>
```
### 左侧显示略缩图、图标
- 设置 `thumb` 属性 ,可以在列表左侧显示略缩图
- 设置 `show-extra-icon` 属性,并指定 `extra-icon` 可以在左侧显示图标
```html
<uni-list>
<uni-list-item title="列表左侧带略缩图" note="列表描述信息" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
thumb-size="lg" rightText="右侧文字"></uni-list-item>
<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" title="列表左侧带扩展图标" ></uni-list-item>
</uni-list>
```
### 开启点击反馈和右侧箭头
- 设置 `clickable``true` ,则表示这是一个可点击的列表,会默认给一个点击效果,并可以监听 `click` 事件
- 设置 `link` 属性,会自动开启点击反馈,并给列表右侧添加一个箭头
- 设置 `to` 属性,可以跳转页面,`link` 的值表示跳转方式,如果不指定,默认为 `navigateTo`
```html
<uni-list>
<uni-list-item title="开启点击反馈" clickable @click="onClick" ></uni-list-item>
<uni-list-item title="默认 navigateTo 方式跳转页面" link to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
<uni-list-item title="reLaunch 方式跳转页面" link="reLaunch" to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
</uni-list>
```
### 聊天列表示例
- 设置 `clickable``true` ,则表示这是一个可点击的列表,会默认给一个点击效果,并可以监听 `click` 事件
- 设置 `link` 属性,会自动开启点击反馈,`link` 的值表示跳转方式,如果不指定,默认为 `navigateTo`
- 设置 `to` 属性,可以跳转页面
- `time` 属性,通常会设置成时间显示,但是这个属性不仅仅可以设置时间,你可以传入任何文本,注意文本长度可能会影响显示
- `avatar``avatarList` 属性同时只会有一个生效,同时设置的话,`avatarList` 属性的长度大于1 ,`avatar` 属性将失效
- 可以通过默认插槽自定义列表右侧内容
```html
<uni-list>
<uni-list :border="true">
<!-- 显示圆形头像 -->
<uni-list-chat :avatar-circle="true" title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" ></uni-list-chat>
<!-- 右侧带角标 -->
<uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-text="12" :badge-style="{backgroundColor:'#FF80AB'}"></uni-list-chat>
<!-- 头像显示圆点 -->
<uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
<!-- 头像显示角标 -->
<uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="99"></uni-list-chat>
<!-- 显示多头像 -->
<uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
<!-- 自定义右侧内容 -->
<uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot">
<view class="chat-custom-right">
<text class="chat-custom-text">刚刚</text>
<!-- 需要使用 uni-icons 请自行引入 -->
<uni-icons type="star-filled" color="#999" size="18"></uni-icons>
</view>
</uni-list-chat>
</uni-list>
</uni-list>
```
```javascript
export default {
components: {},
data() {
return {
avatarList: [{
url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
}, {
url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
}, {
url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
}]
}
}
}
```
```css
.chat-custom-right {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
}
.chat-custom-text {
font-size: 12px;
color: #999;
}
```
## API
### List Props
属性名 |类型 |默认值 | 说明
:-: |:-: |:-: | :-:
border |Boolean |true | 是否显示边框
### ListItem Props
属性名 |类型 |默认值 | 说明
:-: |:-: |:-: | :-:
title |String |- | 标题
note |String |- | 描述
ellipsis |Number |0 | title 是否溢出隐藏,可选值,0:默认; 1:显示一行; 2:显示两行;【nvue 暂不支持】
thumb |String |- | 左侧缩略图,若thumb有值,则不会显示扩展图标
thumbSize |String |medium | 略缩图尺寸,可选值,lg:大图; medium:一般; sm:小图;
showBadge |Boolean |false | 是否显示数字角标
badgeText |String |- | 数字角标内容
badgeType |String |- | 数字角标类型,参考[uni-icons](https://ext.dcloud.net.cn/plugin?id=21)
badgeStyle |Object |- | 数字角标样式,使用uni-badge的custom-style参数
rightText |String |- | 右侧文字内容
disabled |Boolean |false | 是否禁用
showArrow |Boolean |true | 是否显示箭头图标
link |String |navigateTo | 新页面跳转方式,可选值见下表
to |String |- | 新页面跳转地址,如填写此属性,click 会返回页面是否跳转成功
clickable |Boolean |false | 是否开启点击反馈
showSwitch |Boolean |false | 是否显示Switch
switchChecked |Boolean |false | Switch是否被选中
showExtraIcon |Boolean |false | 左侧是否显示扩展图标
extraIcon |Object |- | 扩展图标参数,格式为 ``{color: '#4cd964',size: '22',type: 'spinner'}``,参考 [uni-icons](https://ext.dcloud.net.cn/plugin?id=28)
direction | String |row | 排版方向,可选值,row:水平排列; column:垂直排列; 3个插槽是水平排还是垂直排,也受此属性控制
#### Link Options
属性名 | 说明
:-: | :-:
navigateTo | 同 uni.navigateTo()
redirectTo | 同 uni.reLaunch()
reLaunch | 同 uni.reLaunch()
switchTab | 同 uni.switchTab()
### ListItem Events
事件称名 |说明 |返回参数
:-: |:-: |:-:
click |点击 uniListItem 触发事件,需开启点击反馈 |-
switchChange |点击切换 Switch 时触发,需显示 switch |e={value:checked}
### ListItem Slots
名称 | 说明
:-: | :-:
header | 左/上内容插槽,可完全自定义默认显示
body | 中间内容插槽,可完全自定义中间内容
footer | 右/下内容插槽,可完全自定义右侧内容
> **通过插槽扩展**
> 需要注意的是当使用插槽时,内置样式将会失效,只保留排版样式,此时的样式需要开发者自己实现
> 如果 `uni-list-item` 组件内置属性样式无法满足需求,可以使用插槽来自定义uni-list-item里的内容。
> uni-list-item提供了3个可扩展的插槽:`header`、`body`、`footer`
> - 当 `direction` 属性为 `row` 时表示水平排列,此时 `header` 表示列表的左边部分,`body` 表示列表的中间部分,`footer` 表示列表的右边部分
> - 当 `direction` 属性为 `column` 时表示垂直排列,此时 `header` 表示列表的上边部分,`body` 表示列表的中间部分,`footer` 表示列表的下边部分
> 开发者可以只用1个插槽,也可以3个一起使用。在插槽中可自主编写view标签,实现自己所需的效果。
**示例**
```html
<uni-list>
<uni-list-item title="自定义右侧插槽" note="列表描述信息" link>
<template slot="header">
<image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
</template>
</uni-list-item>
<uni-list-item>
<!-- 自定义 header -->
<view slot="header" class="slot-box"><image class="slot-image" src="/static/logo.png" mode="widthFix"></image></view>
<!-- 自定义 body -->
<text slot="body" class="slot-box slot-text">自定义插槽</text>
<!-- 自定义 footer-->
<template slot="footer">
<image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
</template>
</uni-list-item>
</uni-list>
```
### ListItemChat Props
属性名 |类型 |默认值 | 说明
:-: |:-: |:-: | :-:
title |String |- | 标题
note |String |- | 描述
clickable |Boolean |false | 是否开启点击反馈
badgeText |String |- | 数字角标内容,设置为 `dot` 将显示圆点
badgePositon |String |right | 角标位置
link |String |navigateTo | 是否展示右侧箭头并开启点击反馈,可选值见下表
clickable |Boolean |false | 是否开启点击反馈
to |String |- | 跳转页面地址,如填写此属性,click 会返回页面是否跳转成功
time |String |- | 右侧时间显示
avatarCircle |Boolean |false | 是否显示圆形头像
avatar |String |- | 头像地址,avatarCircle 不填时生效
avatarList |Array |- | 头像组,格式为 [{url:''}]
#### Link Options
属性名 | 说明
:-: | :-:
navigateTo | 同 uni.navigateTo()
redirectTo | 同 uni.reLaunch()
reLaunch | 同 uni.reLaunch()
switchTab | 同 uni.switchTab()
### ListItemChat Slots
名称 | 说明
:- | :-
default | 自定义列表右侧内容(包括时间和角标显示)
### ListItemChat Events
事件称名 | 说明 | 返回参数
:-: | :-: | :-:
@click | 点击 uniListChat 触发事件 | {data:{}} ,如有 to 属性,会返回页面跳转信息
## 基于uni-list扩展的页面模板
通过扩展插槽,可实现多种常见样式的列表
**新闻列表类**
1. 云端一体混合布局:[https://ext.dcloud.net.cn/plugin?id=2546](https://ext.dcloud.net.cn/plugin?id=2546)
2. 云端一体垂直布局,大图模式:[https://ext.dcloud.net.cn/plugin?id=2583](https://ext.dcloud.net.cn/plugin?id=2583)
3. 云端一体垂直布局,多行图文混排:[https://ext.dcloud.net.cn/plugin?id=2584](https://ext.dcloud.net.cn/plugin?id=2584)
4. 云端一体垂直布局,多图模式:[https://ext.dcloud.net.cn/plugin?id=2585](https://ext.dcloud.net.cn/plugin?id=2585)
5. 云端一体水平布局,左图右文:[https://ext.dcloud.net.cn/plugin?id=2586](https://ext.dcloud.net.cn/plugin?id=2586)
6. 云端一体水平布局,左文右图:[https://ext.dcloud.net.cn/plugin?id=2587](https://ext.dcloud.net.cn/plugin?id=2587)
7. 云端一体垂直布局,无图模式,主标题+副标题:[https://ext.dcloud.net.cn/plugin?id=2588](https://ext.dcloud.net.cn/plugin?id=2588)
**商品列表类**
1. 云端一体列表/宫格视图互切:[https://ext.dcloud.net.cn/plugin?id=2651](https://ext.dcloud.net.cn/plugin?id=2651)
2. 云端一体列表(宫格模式):[https://ext.dcloud.net.cn/plugin?id=2671](https://ext.dcloud.net.cn/plugin?id=2671)
3. 云端一体列表(列表模式):[https://ext.dcloud.net.cn/plugin?id=2672](https://ext.dcloud.net.cn/plugin?id=2672)
## 组件示例
点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/list/list](https://hellouniapp.dcloud.net.cn/pages/extUI/list/list)
\ No newline at end of file
## 1.0.3(2022-01-21)
- 优化 组件示例
## 1.0.2(2021-11-22)
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
## 1.0.1(2021-11-22)
- 修复 vue3中scss语法兼容问题
## 1.0.0(2021-11-18)
- init
{
"id": "uni-scss",
"displayName": "uni-scss 辅助样式",
"version": "1.0.3",
"description": "uni-sass是uni-ui提供的一套全局样式 ,通过一些简单的类名和sass变量,实现简单的页面布局操作,比如颜色、边距、圆角等。",
"keywords": [
"uni-scss",
"uni-ui",
"辅助样式"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"category": [
"JS SDK",
"通用 SDK"
],
"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": "u"
},
"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"
},
"快应用": {
"华为": "n",
"联盟": "n"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
`uni-sass``uni-ui`提供的一套全局样式 ,通过一些简单的类名和`sass`变量,实现简单的页面布局操作,比如颜色、边距、圆角等。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
\ No newline at end of file
@import './setting/_variables.scss';
@import './setting/_border.scss';
@import './setting/_color.scss';
@import './setting/_space.scss';
@import './setting/_radius.scss';
@import './setting/_text.scss';
@import './setting/_styles.scss';
.uni-border {
border: 1px $uni-border-1 solid;
}
\ No newline at end of file
// TODO 暂时不需要 class ,需要用户使用变量实现 ,如果使用类名其实并不推荐
// @mixin get-styles($k,$c) {
// @if $k == size or $k == weight{
// font-#{$k}:#{$c}
// }@else{
// #{$k}:#{$c}
// }
// }
$uni-ui-color:(
// 主色
primary: $uni-primary,
primary-disable: $uni-primary-disable,
primary-light: $uni-primary-light,
// 辅助色
success: $uni-success,
success-disable: $uni-success-disable,
success-light: $uni-success-light,
warning: $uni-warning,
warning-disable: $uni-warning-disable,
warning-light: $uni-warning-light,
error: $uni-error,
error-disable: $uni-error-disable,
error-light: $uni-error-light,
info: $uni-info,
info-disable: $uni-info-disable,
info-light: $uni-info-light,
// 中性色
main-color: $uni-main-color,
base-color: $uni-base-color,
secondary-color: $uni-secondary-color,
extra-color: $uni-extra-color,
// 背景色
bg-color: $uni-bg-color,
// 边框颜色
border-1: $uni-border-1,
border-2: $uni-border-2,
border-3: $uni-border-3,
border-4: $uni-border-4,
// 黑色
black:$uni-black,
// 白色
white:$uni-white,
// 透明
transparent:$uni-transparent
) !default;
@each $key, $child in $uni-ui-color {
.uni-#{"" + $key} {
color: $child;
}
.uni-#{"" + $key}-bg {
background-color: $child;
}
}
.uni-shadow-sm {
box-shadow: $uni-shadow-sm;
}
.uni-shadow-base {
box-shadow: $uni-shadow-base;
}
.uni-shadow-lg {
box-shadow: $uni-shadow-lg;
}
.uni-mask {
background-color:$uni-mask;
}
@mixin radius($r,$d:null ,$important: false){
$radius-value:map-get($uni-radius, $r) if($important, !important, null);
// Key exists within the $uni-radius variable
@if (map-has-key($uni-radius, $r) and $d){
@if $d == t {
border-top-left-radius:$radius-value;
border-top-right-radius:$radius-value;
}@else if $d == r {
border-top-right-radius:$radius-value;
border-bottom-right-radius:$radius-value;
}@else if $d == b {
border-bottom-left-radius:$radius-value;
border-bottom-right-radius:$radius-value;
}@else if $d == l {
border-top-left-radius:$radius-value;
border-bottom-left-radius:$radius-value;
}@else if $d == tl {
border-top-left-radius:$radius-value;
}@else if $d == tr {
border-top-right-radius:$radius-value;
}@else if $d == br {
border-bottom-right-radius:$radius-value;
}@else if $d == bl {
border-bottom-left-radius:$radius-value;
}
}@else{
border-radius:$radius-value;
}
}
@each $key, $child in $uni-radius {
@if($key){
.uni-radius-#{"" + $key} {
@include radius($key)
}
}@else{
.uni-radius {
@include radius($key)
}
}
}
@each $direction in t, r, b, l,tl, tr, br, bl {
@each $key, $child in $uni-radius {
@if($key){
.uni-radius-#{"" + $direction}-#{"" + $key} {
@include radius($key,$direction,false)
}
}@else{
.uni-radius-#{$direction} {
@include radius($key,$direction,false)
}
}
}
}
@mixin fn($space,$direction,$size,$n) {
@if $n {
#{$space}-#{$direction}: #{$size*$uni-space-root}px
} @else {
#{$space}-#{$direction}: #{-$size*$uni-space-root}px
}
}
@mixin get-styles($direction,$i,$space,$n){
@if $direction == t {
@include fn($space, top,$i,$n);
}
@if $direction == r {
@include fn($space, right,$i,$n);
}
@if $direction == b {
@include fn($space, bottom,$i,$n);
}
@if $direction == l {
@include fn($space, left,$i,$n);
}
@if $direction == x {
@include fn($space, left,$i,$n);
@include fn($space, right,$i,$n);
}
@if $direction == y {
@include fn($space, top,$i,$n);
@include fn($space, bottom,$i,$n);
}
@if $direction == a {
@if $n {
#{$space}:#{$i*$uni-space-root}px;
} @else {
#{$space}:#{-$i*$uni-space-root}px;
}
}
}
@each $orientation in m,p {
$space: margin;
@if $orientation == m {
$space: margin;
} @else {
$space: padding;
}
@for $i from 0 through 16 {
@each $direction in t, r, b, l, x, y, a {
.uni-#{$orientation}#{$direction}-#{$i} {
@include get-styles($direction,$i,$space,true);
}
.uni-#{$orientation}#{$direction}-n#{$i} {
@include get-styles($direction,$i,$space,false);
}
}
}
}
\ No newline at end of file
/* #ifndef APP-NVUE */
$-color-white:#fff;
$-color-black:#000;
@mixin base-style($color) {
color: #fff;
background-color: $color;
border-color: mix($-color-black, $color, 8%);
&:not([hover-class]):active {
background: mix($-color-black, $color, 10%);
border-color: mix($-color-black, $color, 20%);
color: $-color-white;
outline: none;
}
}
@mixin is-color($color) {
@include base-style($color);
&[loading] {
@include base-style($color);
&::before {
margin-right:5px;
}
}
&[disabled] {
&,
&[loading],
&:not([hover-class]):active {
color: $-color-white;
border-color: mix(darken($color,10%), $-color-white);
background-color: mix($color, $-color-white);
}
}
}
@mixin base-plain-style($color) {
color:$color;
background-color: mix($-color-white, $color, 90%);
border-color: mix($-color-white, $color, 70%);
&:not([hover-class]):active {
background: mix($-color-white, $color, 80%);
color: $color;
outline: none;
border-color: mix($-color-white, $color, 50%);
}
}
@mixin is-plain($color){
&[plain] {
@include base-plain-style($color);
&[loading] {
@include base-plain-style($color);
&::before {
margin-right:5px;
}
}
&[disabled] {
&,
&:active {
color: mix($-color-white, $color, 40%);
background-color: mix($-color-white, $color, 90%);
border-color: mix($-color-white, $color, 80%);
}
}
}
}
.uni-btn {
margin: 5px;
color: #393939;
border:1px solid #ccc;
font-size: 16px;
font-weight: 200;
background-color: #F9F9F9;
// TODO 暂时处理边框隐藏一边的问题
overflow: visible;
&::after{
border: none;
}
&:not([type]),&[type=default] {
color: #999;
&[loading] {
background: none;
&::before {
margin-right:5px;
}
}
&[disabled]{
color: mix($-color-white, #999, 60%);
&,
&[loading],
&:active {
color: mix($-color-white, #999, 60%);
background-color: mix($-color-white,$-color-black , 98%);
border-color: mix($-color-white, #999, 85%);
}
}
&[plain] {
color: #999;
background: none;
border-color: $uni-border-1;
&:not([hover-class]):active {
background: none;
color: mix($-color-white, $-color-black, 80%);
border-color: mix($-color-white, $-color-black, 90%);
outline: none;
}
&[disabled]{
&,
&[loading],
&:active {
background: none;
color: mix($-color-white, #999, 60%);
border-color: mix($-color-white, #999, 85%);
}
}
}
}
&:not([hover-class]):active {
color: mix($-color-white, $-color-black, 50%);
}
&[size=mini] {
font-size: 16px;
font-weight: 200;
border-radius: 8px;
}
&.uni-btn-small {
font-size: 14px;
}
&.uni-btn-mini {
font-size: 12px;
}
&.uni-btn-radius {
border-radius: 999px;
}
&[type=primary] {
@include is-color($uni-primary);
@include is-plain($uni-primary)
}
&[type=success] {
@include is-color($uni-success);
@include is-plain($uni-success)
}
&[type=error] {
@include is-color($uni-error);
@include is-plain($uni-error)
}
&[type=warning] {
@include is-color($uni-warning);
@include is-plain($uni-warning)
}
&[type=info] {
@include is-color($uni-info);
@include is-plain($uni-info)
}
}
/* #endif */
@mixin get-styles($k,$c) {
@if $k == size or $k == weight{
font-#{$k}:#{$c}
}@else{
#{$k}:#{$c}
}
}
@each $key, $child in $uni-headings {
/* #ifndef APP-NVUE */
.uni-#{$key} {
@each $k, $c in $child {
@include get-styles($k,$c)
}
}
/* #endif */
/* #ifdef APP-NVUE */
.container .uni-#{$key} {
@each $k, $c in $child {
@include get-styles($k,$c)
}
}
/* #endif */
}
// @use "sass:math";
@import '../tools/functions.scss';
// 间距基础倍数
$uni-space-root: 2 !default;
// 边框半径默认值
$uni-radius-root:5px !default;
$uni-radius: () !default;
// 边框半径断点
$uni-radius: map-deep-merge(
(
0: 0,
// TODO 当前版本暂时不支持 sm 属性
// 'sm': math.div($uni-radius-root, 2),
null: $uni-radius-root,
'lg': $uni-radius-root * 2,
'xl': $uni-radius-root * 6,
'pill': 9999px,
'circle': 50%
),
$uni-radius
);
// 字体家族
$body-font-family: 'Roboto', sans-serif !default;
// 文本
$heading-font-family: $body-font-family !default;
$uni-headings: () !default;
$letterSpacing: -0.01562em;
$uni-headings: map-deep-merge(
(
'h1': (
size: 32px,
weight: 300,
line-height: 50px,
// letter-spacing:-0.01562em
),
'h2': (
size: 28px,
weight: 300,
line-height: 40px,
// letter-spacing: -0.00833em
),
'h3': (
size: 24px,
weight: 400,
line-height: 32px,
// letter-spacing: normal
),
'h4': (
size: 20px,
weight: 400,
line-height: 30px,
// letter-spacing: 0.00735em
),
'h5': (
size: 16px,
weight: 400,
line-height: 24px,
// letter-spacing: normal
),
'h6': (
size: 14px,
weight: 500,
line-height: 18px,
// letter-spacing: 0.0125em
),
'subtitle': (
size: 12px,
weight: 400,
line-height: 20px,
// letter-spacing: 0.00937em
),
'body': (
font-size: 14px,
font-weight: 400,
line-height: 22px,
// letter-spacing: 0.03125em
),
'caption': (
'size': 12px,
'weight': 400,
'line-height': 20px,
// 'letter-spacing': 0.03333em,
// 'text-transform': false
)
),
$uni-headings
);
// 主色
$uni-primary: #2979ff !default;
$uni-primary-disable:lighten($uni-primary,20%) !default;
$uni-primary-light: lighten($uni-primary,25%) !default;
// 辅助色
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。
$uni-success: #18bc37 !default;
$uni-success-disable:lighten($uni-success,20%) !default;
$uni-success-light: lighten($uni-success,25%) !default;
$uni-warning: #f3a73f !default;
$uni-warning-disable:lighten($uni-warning,20%) !default;
$uni-warning-light: lighten($uni-warning,25%) !default;
$uni-error: #e43d33 !default;
$uni-error-disable:lighten($uni-error,20%) !default;
$uni-error-light: lighten($uni-error,25%) !default;
$uni-info: #8f939c !default;
$uni-info-disable:lighten($uni-info,20%) !default;
$uni-info-light: lighten($uni-info,25%) !default;
// 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。
$uni-main-color: #3a3a3a !default; // 主要文字
$uni-base-color: #6a6a6a !default; // 常规文字
$uni-secondary-color: #909399 !default; // 次要文字
$uni-extra-color: #c7c7c7 !default; // 辅助说明
// 边框颜色
$uni-border-1: #F0F0F0 !default;
$uni-border-2: #EDEDED !default;
$uni-border-3: #DCDCDC !default;
$uni-border-4: #B9B9B9 !default;
// 常规色
$uni-black: #000000 !default;
$uni-white: #ffffff !default;
$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
// 背景色
$uni-bg-color: #f7f7f7 !default;
/* 水平间距 */
$uni-spacing-sm: 8px !default;
$uni-spacing-base: 15px !default;
$uni-spacing-lg: 30px !default;
// 阴影
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
// 蒙版
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;
// 合并 map
@function map-deep-merge($parent-map, $child-map){
$result: $parent-map;
@each $key, $child in $child-map {
$parent-has-key: map-has-key($result, $key);
$parent-value: map-get($result, $key);
$parent-type: type-of($parent-value);
$child-type: type-of($child);
$parent-is-map: $parent-type == map;
$child-is-map: $child-type == map;
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
$result: map-merge($result, ( $key: $child ));
}@else {
$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
}
}
@return $result;
};
// 间距基础倍数
$uni-space-root: 2;
// 边框半径默认值
$uni-radius-root:5px;
// 主色
$uni-primary: #2979ff;
// 辅助色
$uni-success: #4cd964;
// 警告色
$uni-warning: #f0ad4e;
// 错误色
$uni-error: #dd524d;
// 描述色
$uni-info: #909399;
// 中性色
$uni-main-color: #303133;
$uni-base-color: #606266;
$uni-secondary-color: #909399;
$uni-extra-color: #C0C4CC;
// 背景色
$uni-bg-color: #f5f5f5;
// 边框颜色
$uni-border-1: #DCDFE6;
$uni-border-2: #E4E7ED;
$uni-border-3: #EBEEF5;
$uni-border-4: #F2F6FC;
// 常规色
$uni-black: #000000;
$uni-white: #ffffff;
$uni-transparent: rgba($color: #000000, $alpha: 0);
@import './styles/setting/_variables.scss';
// 间距基础倍数
$uni-space-root: 2;
// 边框半径默认值
$uni-radius-root:5px;
// 主色
$uni-primary: #2979ff;
$uni-primary-disable:mix(#fff,$uni-primary,50%);
$uni-primary-light: mix(#fff,$uni-primary,80%);
// 辅助色
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。
$uni-success: #18bc37;
$uni-success-disable:mix(#fff,$uni-success,50%);
$uni-success-light: mix(#fff,$uni-success,80%);
$uni-warning: #f3a73f;
$uni-warning-disable:mix(#fff,$uni-warning,50%);
$uni-warning-light: mix(#fff,$uni-warning,80%);
$uni-error: #e43d33;
$uni-error-disable:mix(#fff,$uni-error,50%);
$uni-error-light: mix(#fff,$uni-error,80%);
$uni-info: #8f939c;
$uni-info-disable:mix(#fff,$uni-info,50%);
$uni-info-light: mix(#fff,$uni-info,80%);
// 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。
$uni-main-color: #3a3a3a; // 主要文字
$uni-base-color: #6a6a6a; // 常规文字
$uni-secondary-color: #909399; // 次要文字
$uni-extra-color: #c7c7c7; // 辅助说明
// 边框颜色
$uni-border-1: #F0F0F0;
$uni-border-2: #EDEDED;
$uni-border-3: #DCDCDC;
$uni-border-4: #B9B9B9;
// 常规色
$uni-black: #000000;
$uni-white: #ffffff;
$uni-transparent: rgba($color: #000000, $alpha: 0);
// 背景色
$uni-bg-color: #f7f7f7;
/* 水平间距 */
$uni-spacing-sm: 8px;
$uni-spacing-base: 15px;
$uni-spacing-lg: 30px;
// 阴影
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
// 蒙版
$uni-mask: rgba($color: #000000, $alpha: 0.4);
......@@ -32,7 +32,7 @@ import array from 'android.R.array';
/**
* 定时任务参数封装
*/
type TimerOptions = {
export type TimerOptions = {
/**
* 定时任务开始的回调
* @res 回调参数
......@@ -45,39 +45,57 @@ type TimerOptions = {
work : (res : string) => void;
};
export type TimerResult = {
name : string;
taskId ?: number;
};
/**
* 执行延时任务
*/
export function doTimerTask(opts : TimerOptions) {
export function doTimerTask(opts : TimerOptions): TimerResult {
opts.start('doTimerTask start');
setTimeout(function () {
opts.work("doTimerTask work");
}, 2000);
return { name: "doTimerTask" };
const result: TimerResult = {
name: "doTimerTask"
}
return result
}
/**
* 执行周期任务
*/
export function doIntervalTask(opts : TimerOptions) {
export function doIntervalTask(opts : TimerOptions): TimerResult {
let taskRet = setInterval(function () {
opts.work("doIntervalTask work");
}, 2000);
opts.start('doIntervalTask start');
return { name: "doIntervalTask", taskId: taskRet };
const result: TimerResult = {
name: "doIntervalTask",
taskId: taskRet
}
return result
}
/**
* 清除周期任务
*/
export function clearIntervalTask(taskId : number) {
export function clearIntervalTask(taskId : number): TimerResult {
clearInterval(taskId);
return { name: "clearIntervalTask" };
const result: TimerResult = {
name: "clearIntervalTask"
}
return result
}
......
......@@ -9,7 +9,7 @@ export function playAssetAudio(){}
/**
* 定时任务参数封装
*/
type TimerOptions = {
export type TimerOptions = {
/**
* 定时任务开始的回调
* @res 回调参数
......@@ -22,39 +22,57 @@ type TimerOptions = {
work: (res: string) => void;
};
export type TimerResult = {
name : string;
taskId ?: number;
};
/**
* 执行延时任务
*/
export function doTimerTask(opts:TimerOptions) {
export function doTimerTask(opts:TimerOptions): TimerResult {
opts.start('doTimerTask start');
setTimeout(function() {
opts.work("doTimerTask work");
}, 2000);
return { name: "doTimerTask" };
const result: TimerResult = {
name: "doTimerTask"
}
return result
}
/**
* 执行周期任务
*/
export function doIntervalTask(opts:TimerOptions) {
export function doIntervalTask(opts:TimerOptions): TimerResult {
let taskRet = setInterval(function() {
opts.work("doIntervalTask work");
}, 2000);
opts.start('doIntervalTask start');
return { name: "doIntervalTask",taskId:taskRet};
const result: TimerResult = {
name: "doIntervalTask",
taskId: taskRet
}
return result
}
/**
* 清除周期任务
*/
export function clearIntervalTask(taskId:number) {
export function clearIntervalTask(taskId:number):TimerResult {
clearInterval(taskId);
return { name: "clearIntervalTask"};
const result: TimerResult = {
name: "clearIntervalTask"
}
return result
}
/*
......
......@@ -4,6 +4,8 @@ import File from "java.io.File"
import UTSAndroid from 'io.dcloud.uts.UTSAndroid';
import Base64 from "android.util.Base64"
import Environment from 'android.os.Environment';
export { ReadFileOptions, WriteFileOptions } from "../interface.uts"
/**
* 获取文件内容
*/
......
......@@ -3,13 +3,14 @@ import BatteryManager from "android.os.BatteryManager";
import { UTSAndroid } from "io.dcloud.uts";
type GetBatteryInfoOptions = {
export type GetBatteryInfoOptions = {
success?: (res: object) => void
fail?: (res: object) => void
complete?: (res: object) => void
}
export default function getBatteryInfo(options: GetBatteryInfoOptions) {
export function getBatteryInfo(options: GetBatteryInfoOptions) {
const context = UTSAndroid.getAppContext();
if (context != null) {
const manager = context.getSystemService(
......
......@@ -5,7 +5,7 @@ import { Int } from 'Swift';
/**
* 定义 接口参数
*/
type GetBatteryInfoOptions = {
export type GetBatteryInfoOptions = {
success?: (res: object) => void;
fail?: (res: object) => void;
complete?: (res: object) => void;
......@@ -14,7 +14,7 @@ type GetBatteryInfoOptions = {
/**
* 导出 获取电量方法
*/
export default function getBatteryInfo(options: GetBatteryInfoOptions) {
export function getBatteryInfo(options: GetBatteryInfoOptions) {
// 开启电量检测
UIDevice.current.isBatteryMonitoringEnabled = true
......
/**
* json参数格式定义
*/
type inputJSON = {
export type inputJSON = {
inputText: string,
errCode: number
}
/**
* json入参格式
*/
type JsonParamOptions = {
export type JsonParamOptions = {
input: inputJSON;
success: (res: inputJSON) => void;
fail: (res: string) => void;
complete: (res: string) => void;
fail?: (res: string) => void;
complete?: (res: string) => void;
};
/**
......
......@@ -271,7 +271,7 @@ class IntentRunable extends Runnable{
}
@Suppress("DEPRECATION")
export default function gotoDemoActivity():boolean {
export function gotoDemoActivity():boolean {
// 这里的逻辑是为了判断 当前的自定义activity 是否注册了,并以此为条件判断是否是自定义基座
let hasXActivityIntegration = true
try{
......
import { RequestTask, SyncOptions } from "./interface.uts";
import { log } from "./utils.uts";
type AsyncOptions = {
export type AsyncOptions = {
type : string;
success : (res : string) => void;
fail : (res : string) => void;
complete : (res : string) => void;
};
export type {
SyncOptions
} from "./interface.uts";
type SyntaxResult = {
name : string
};
......@@ -80,7 +84,7 @@ export async function testAsync(opts : AsyncOptions) : Promise<SyntaxResult> {
// return { name: "testAsync" };
}
type TestOptions = {
export type TestOptions = {
name : string;
callback : (res : string) => void;
};
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册