Commit 4310a86a by 郑艺斌

Initial commit

parents
Showing with 2732 additions and 0 deletions
# Windows
[Dd]esktop.ini
Thumbs.db
$RECYCLE.BIN/
# macOS
.DS_Store
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
# Node.js
node_modules/
<?xml version="1.0" encoding="UTF-8"?>
<module type="JAVA_MODULE" version="4">
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptSettings">
<option name="languageLevel" value="ES6" />
</component>
</project>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/emaint-servicer-wechat-app.iml" filepath="$PROJECT_DIR$/.idea/emaint-servicer-wechat-app.iml" />
</modules>
</component>
</project>
\ No newline at end of file
<changelist name="Uncommitted_changes_before_Checkout_at_2022_11_3,_15_34_[Default]" date="1667460851464" recycled="true" deleted="true">
<option name="PATH" value="$PROJECT_DIR$/.idea/shelf/Uncommitted_changes_before_Checkout_at_2022_11_3,_15_34_[Default]/shelved.patch" />
<option name="DESCRIPTION" value="Uncommitted changes before Checkout at 2022/11/3, 15:34 [Default]" />
</changelist>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>
\ No newline at end of file
//app.js
App({
onLaunch: function () {
// 检查更新
if (wx.canIUse('getUpdateManager')) {
const updateManager = wx.getUpdateManager()
updateManager.onCheckForUpdate(function (res) {
if (res.hasUpdate) {
updateManager.onUpdateReady(function () {
wx.showModal({
title: '更新提示',
content: '新版本已经准备好,是否重启应用?',
success: function (res) {
if (res.confirm) {
updateManager.applyUpdate()
}
}
})
})
updateManager.onUpdateFailed(function () {
wx.showModal({
title: '已经有新版本了哟~',
content: '新版本已经上线啦~,请您删除当前小程序,重新搜索打开哟~'
})
})
}
})
}
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
}
})
{
"pages": [
"pages/register/register",
"pages/endRepair/repair",
"pages/login/login",
"pages/index/index",
"pages/status/status",
"pages/order/order",
"pages/baobiao/baobiao",
"pages/allorder/allorder",
"pages/contact/contact",
"pages/fill/fill",
"pages/information/information",
"pages/add/add",
"pages/remarks/remarks",
"pages/change/change",
"pages/logs/logs",
"pages/beizhu/beizhu",
"pages/typeof/typeof",
"pages/weishou/weishou",
"pages/addcan/addcan",
"pages/baobiaojin/baobiaojin",
"pages/custSearch/search"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#108DE9",
"navigationBarTitleText": "我的工单",
"navigationBarTextStyle": "white"
},
"sitemapLocation": "sitemap44.json"
}
\ No newline at end of file
/**app.wxss**/
@import './miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';
page{
width:100%;
height:100%;
font-size:24rpx;
font-family:PingFangSC-Regular;
}
.container{display: block;padding: 0 25rpx;padding-bottom: 40rpx}
.container {
min-height:100vh;
width:100%;
/* display: flex; */
/* flex-direction: column; */
/* align-items: center; */
justify-content: space-between;
background:#f3f4f4;
padding-bottom: 200rpx;
box-sizing: border-box;
}
.change-bottom{
height:120rpx;
width:100%;
padding-top:20rpx;
padding-left:24rpx;
box-sizing: border-box;
background:#fff;
position:fixed;
left:0;
bottom:0;
}
.clear::after{
content:'';
display:block;
width:100%;
clear:both;
}
/* iconfont */
/*移动端滚动卡顿解决方法*/
.scroll{
-webkit-overflow-scrolling:touch;
}
@font-face {
font-family: 'iconfont'; /* project id 1224859 */
src: url('//at.alicdn.com/t/font_1224859_nnn270sgaj.eot');
src: url('//at.alicdn.com/t/font_1224859_nnn270sgaj.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1224859_nnn270sgaj.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1224859_nnn270sgaj.woff') format('woff'),
url('//at.alicdn.com/t/font_1224859_nnn270sgaj.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1224859_nnn270sgaj.svg#iconfont') format('svg');
}
.iconfont{
font-family:"iconfont" !important;
font-size:24rpx;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.icon_back::before {
content: "\e615";
}
.icon_add::before {
content: "\e727";
}
.icon_sear::before{
content: "\e688";
}
/*万能清除浮动法*/
.clearfix::after {
content: "";
display: block;
clear: both;
height: 0;
overflow: hidden;
visibility: hidden;
}
.btn{
width:145rpx;
height:60rpx;
border-radius:30rpx;
font-size:24rpx;
text-align:center;
line-height:60rpx;
background:#fff;
/* float:left; */
margin-left:16rpx;
display:inline-block;
}
.one{
border:1rpx solid rgba(16,142,233,1);
color:#108EE9;
}
.two{
color:#333333;
border:1rpx solid rgba(178,178,178,1);
}
.thr{
width:702rpx;
height:88rpx;
line-height:88rpx;
border-radius:8rpx;
margin: 0 auto;
font-size:32rpx;
background:#108DE9;
color:#fff;
}
.four{
width:320rpx;
height:88rpx;
line-height:88rpx;
border-radius:8rpx;
margin: 0 auto;
font-size:32rpx;
background:#108DE9;
color:#fff;
}
.five{
width:320rpx;
height:88rpx;
line-height:88rpx;
border-radius:8rpx;
margin: 0 auto;
font-size:32rpx;
background:rgba(235, 235, 235, 1);
}
Component({
properties: {
// 订单
type: {
type: Number,
value: 1
},
title: {
type: String,
value: '按钮'
}
},
/**
* 私有数据,组件的初始数据
* 可用于模版渲染
*/
data: {
},
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
bindBtn() {
console.log(this)
//触发成功回调
this.triggerEvent("bindBtn", this.data.type);
}
}
})
\ No newline at end of file
{
"component": true
}
\ No newline at end of file
<view class="sq">
<view class="sq-content">
<view class="sq-content-head">
<image></image>
<view class="sq-content-head-title">特房运维E报修 申请</view>
</view>
<view class="sq-title">获取你的昵称,头像,地区及性别</view>
</view>
</view>
\ No newline at end of file
.sq{
width:100%;
height:100%;
background:rgba(0,0,0,0.3);
position:fixed;
top:0;
left:0;
}
.sq-content{
width:100%;
height:654rpx;
background:#fff;
position:absolute;
bottom:0;
box-sizing: border-box;
padding:0 40rpx;
border-radius:24rpx 24rpx 0 0;
}
.sq-content-head{
height:124rpx;
width:100%;
}
.sq-content-head image{
float:left;
width:50rpx;
height:50rpx;
margin-top:37rpx;
margin-right:8rpx;
}
.sq-content-head-title{
float:left;
color:rgba(51,51,51,1);
line-height:124rpx;
font-size:32rpx;
}
\ No newline at end of file
Component({
properties: {
// 订单
type: {
type: Number,
value: 1
},
title:{
type:String,
value:'按钮'
},
beizhu: {
type: String,
value: ''
}
},
/**
* 私有数据,组件的初始数据
* 可用于模版渲染
*/
data: {
},
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
bindBtn() {
var that = this;
console.log(this.properties.beizhu)
if (that.properties.type == '2'){
wx.navigateTo({
url: '../../pages/change/change?danhao=' + that.properties.beizhu,
})
} else if (that.properties.type == '1'){
console.log('11')
}
// + aaa01 + '&shebeixin=' + JSON.stringify (res.data.data)
//触发成功回调
this.triggerEvent("bindBtn",this.data.type);
}
}
})
\ No newline at end of file
{
"component": true
}
<view class="btn {{type==1?'one':type==2?'two':type==3?'thr':type==4?'four':'five'}}" bindtap="bindBtn">{{title}}</view>
\ No newline at end of file
.btn{
width:152rpx;
height:60rpx;
border-radius:30rpx;
font-size:24rpx;
text-align:center;
line-height:60rpx;
background:#fff;
float:left;
margin-left:16rpx;
}
.one{
border:1rpx solid rgba(16,142,233,1);
color:#108EE9;
}
.two{
color:#333333;
border:1rpx solid rgba(178,178,178,1);
}
.thr{
width:702rpx;
height:88rpx;
line-height:88rpx;
border-radius:8rpx;
margin: 0 auto;
font-size:32rpx;
background:#108DE9;
color:#fff;
}
.four{
width:320rpx;
height:88rpx;
line-height:88rpx;
border-radius:8rpx;
margin: 0 auto;
font-size:32rpx;
background:#108DE9;
color:#fff;
}
.five{
width:320rpx;
height:88rpx;
line-height:88rpx;
border-radius:8rpx;
margin: 0 auto;
font-size:32rpx;
background:rgba(235, 235, 235, 1);
}
\ No newline at end of file
// components/inp/inp.js
Component({
options: {
multipleSlots: true
},
/**
* 组件的属性列表
*/
properties: {
bor:{
type: String,
value: 1
},
title:{
type: String,
value: "标题"
},
val: {
type: String || Number,
value: "未选择"
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
<!--components/inp/inp.wxml-->
<!-- bor:1有线 2 没有线 -->
<view class="inp clear {{bor==1?'bor':''}}">
<view class="inp-left">{{title}}</view>
<text class="iconfont icon_back"></text>
<view class="inp-right">{{val}}</view>
</view>
.inp{
width:100%;
height:104rpx;
line-height:104rpx;
background:#fff;
padding:0 26rpx 0 32rpx;
box-sizing: border-box;
font-size:30rpx;
}
.inp-left{
float:left;
}
.inp-right{
float:right;
color:rgba(153, 153, 153, 1);
}
.iconfont{
float:right;
padding-left:8rpx;
}
.clear::after{
content:'';
display:block;
width:100%;
clear:both;
}
@font-face {
font-family: 'iconfont'; /* project id 1224859 */
src: url('//at.alicdn.com/t/font_1224859_jqux3qqo68o.eot');
src: url('//at.alicdn.com/t/font_1224859_jqux3qqo68o.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1224859_jqux3qqo68o.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1224859_jqux3qqo68o.woff') format('woff'),
url('//at.alicdn.com/t/font_1224859_jqux3qqo68o.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1224859_jqux3qqo68o.svg#iconfont') format('svg');
}
.iconfont{
font-family:"iconfont" !important;
font-size:24rpx;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.icon_back::before {
content: "\e615";
}
.bor{
border-bottom:1rpx solid rgba(0,0,0,0.1);
}
\ No newline at end of file
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
/**
* 组件的属性列表
* 用于组件自定义设置
*/
properties: {
motto: {
type: Array,//类型
value: []//默认值
}
},
/**
* 私有数据,组件的初始数据
* 可用于模版渲染
*/
data: {
// 弹窗显示控制
isShow: false
},
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
_bindBtn(val){
console.log(val.detail)
},
/*
* 内部私有方法建议以下划线开头
* triggerEvent 用于触发事件
*/
_cancelEvent() {
//触发取消回调
this.triggerEvent("cancelEvent")
},
_confirmEvent() {
//触发成功回调
this.triggerEvent("confirmEvent");
}
},
})
\ No newline at end of file
{
"component": true,
"usingComponents": {
"my_btn":"/components/btn/btn"
}
}
\ No newline at end of file
<wxs module="filter" src="../../filter/filter.wxs"></wxs>
<view class="content">
<view class="content-top">
<view class="content-top-time">单号 {{motto.workOrderNo}}</view>
<view class="content-top-status">{{motto.state}}</view>
</view>
<view class="content-title">
<text class="content-title-left">{{motto.problemType}}-{{motto.problemClass}}</text>
<text class="content-title-right">{{motto.userName}}</text>
</view>
<view class="content-cont">{{motto.problem}}</view>
<view class="content-bottom">
<view class="content-bottom-time">更新时间{{filter.timeshi(motto.gmtCreate?motto.gmtCreate:'--:--:--')}}</view>
<view class="content-bottom-bottom">
<my_btn type="2" beizhu="{{motto.workOrderNo}}" title="备注" bind:bindBtn="_bindBtn"></my_btn>
<my_btn bind:bindBtn="_bindBtn" title="完成维修"></my_btn>
</view>
</view>
</view>
\ No newline at end of file
.content{
width:702rpx;
background:#fff;
margin-top:24rpx;
}
.content-top{
height:82rpx;
line-height:82rpx;
font-size:24rpx;
width:100%;
padding:0 24rpx;
box-sizing: border-box;
}
.content-top-time{
float:left;
color:#999999;
}
.content-top-status{
float:right;
color:#108EE9;
}
.content-title{
font-family:PingFangSC-Medium;
font-weight:bold;
font-size:32rpx;
height:44rpx;
margin-top:8rpx;
padding:0 24rpx;
box-sizing: border-box;
}
.content-title-left{
float:left;
}
.content-title-right{
float:right;
font-size:24rpx;
color:rgba(136, 136, 136, 1);
}
.content-cont{
font-size:28rpx;
min-height:48rpx;
padding:0 24rpx;
padding-bottom:40rpx;
box-sizing: border-box;
}
.content-bottom{
height:104rpx;
width:100%;
border-top:1rpx solid #f3f3f3;
}
.content-bottom-time{
float:left;
color:#888888;
padding-left:24rpx;
line-height:104rpx;
}
.content-bottom-bottom{
float:right;
padding-right:24rpx;
margin-top:22rpx;
}
\ No newline at end of file
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
/**
* 组件的属性列表
* 用于组件自定义设置
*/
properties: {
// 时间
time: { // 属性名
type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
value: "--:--:--" // 属性初始值(可选),如果未指定则会根据类型选择一个
},
// 订单
order: {
type: String,
value: '1234567'
},
// 状态
status: {
type: String,
value: '等待中'
},
// 标题
title: {
type: String,
value: '标题'
},
content: {
type: String,
value: '内容'
}
},
/**
* 私有数据,组件的初始数据
* 可用于模版渲染
*/
data: {
// 弹窗显示控制
isShow: false
},
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
_bindBtn(val) {
console.log(val.detail)
},
/*
* 内部私有方法建议以下划线开头
* triggerEvent 用于触发事件
*/
_cancelEvent() {
//触发取消回调
this.triggerEvent("cancelEvent")
},
_confirmEvent() {
//触发成功回调
this.triggerEvent("confirmEvent");
}
}
})
\ No newline at end of file
{
"component": true,
"usingComponents": {
"my_btn": "/components/btn/btn"
}
}
\ No newline at end of file
<view class="nodata">
<image src="/image/xiu.png"></image>
<text>暂无数据</text>
<!-- <my_btn bind:bindBtn="_bindBtn" type="4" title="评价"></my_btn> -->
</view>
\ No newline at end of file
.nodata{
margin:0 auto;
}
.nodata image{
width:166rpx;
height:166rpx;
display:block;
margin: 0 auto;
padding-top:312rpx;
margin-bottom:32rpx;
}
.nodata text{
display:block;
text-align:center;
font-size:32rpx;
color:rgba(136,136,136,1);
margin-bottom:68rpx;
}
\ No newline at end of file
// 我的工单待维修页面更新时间过滤器
function timeshi(value) {
return value.substring(0, 16);
}
function timeshixiang01(value) {
return value.substring(5, 10);
}
function timeshixiang02(value) {
return value.substring(11,16);
}
// 全部工单页面。是否是参与者
function canyuzheg(value,name) {
var valarr = value.split(',');
var ass = '否';
for (var i = 0; i < valarr.length;i++){
if (valarr[i] == name)
ass = '是'
}
return ass;
}
// 图片截取
function beiimg(value) {
if (!value){
var arr2 = [];
}else{
var imgarr = value.split('|~|');
var imgliststr = [];
for (var i = 0; i < imgarr.length; i++) {
var imgcha = imgarr[i].split('|');
imgliststr.push(imgcha)
}
// 二维数组转一维
var arr1 = imgliststr.reduce(function (a, b) { return a.concat(b) });
var arr2 = [];
for (var j = 0; j < arr1.length; j++) {
if (j % 2 != '1') {
arr2.push(arr1[j])
} else {
}
}
}
return arr2;
}
// 数组倒序
function shudaoxu(value) {
console.log(value)
var shudao = value.reverse();
return shudao;
}
module.exports = {
timeshi: timeshi,
timeshixiang01: timeshixiang01,
timeshixiang02: timeshixiang02,
canyuzheg: canyuzheg,
beiimg: beiimg,
shudaoxu: shudaoxu,
}
\ No newline at end of file
module.exports = (function() {
var __MODS__ = {};
var __DEFINE__ = function(modId, func, req) { var m = { exports: {}, _tempexports: {} }; __MODS__[modId] = { status: 0, func: func, req: req, m: m }; };
var __REQUIRE__ = function(modId, source) { if(!__MODS__[modId]) return require(source); if(!__MODS__[modId].status) { var m = __MODS__[modId].m; m._exports = m._tempexports; var desp = Object.getOwnPropertyDescriptor(m, "exports"); if (desp && desp.configurable) Object.defineProperty(m, "exports", { set: function (val) { if(typeof val === "object" && val !== m._exports) { m._exports.__proto__ = val.__proto__; Object.keys(val).forEach(function (k) { m._exports[k] = val[k]; }); } m._tempexports = val }, get: function () { return m._tempexports; } }); __MODS__[modId].status = 1; __MODS__[modId].func(__MODS__[modId].req, m, m.exports); } return __MODS__[modId].m.exports; };
var __REQUIRE_WILDCARD__ = function(obj) { if(obj && obj.__esModule) { return obj; } else { var newObj = {}; if(obj != null) { for(var k in obj) { if (Object.prototype.hasOwnProperty.call(obj, k)) newObj[k] = obj[k]; } } newObj.default = obj; return newObj; } };
var __REQUIRE_DEFAULT__ = function(obj) { return obj && obj.__esModule ? obj.default : obj; };
__DEFINE__(1667526479364, function(require, module, exports) {
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).dayjs=e()}(this,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",f="month",h="quarter",c="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return"["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return!r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return(e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return-t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,f),s=n-i<0,u=e.clone().add(r+(s?-1:1),f);return+(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return{M:f,y:c,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:h}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p=function(t){return t instanceof _},S=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else{var a=e.name;D[a]=e,i=a}return!r&&i&&(g=i),i||!r&&g},w=function(t,e){if(p(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},O=v;O.l=S,O.i=p,O.w=function(t,e){return w(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=S(t.locale,null,!0),this.parse(t)}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(O.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.$x=t.x||{},this.init()},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},m.$utils=function(){return O},m.isValid=function(){return!(this.$d.toString()===l)},m.isSame=function(t,e){var n=w(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return w(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<w(t)},m.$g=function(t,e,n){return O.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!O.u(e)||e,h=O.p(t),l=function(t,e){var i=O.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return O.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(h){case c:return r?l(1,0):l(31,11);case f:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=O.p(t),h="set"+(this.$u?"UTC":""),l=(n={},n[a]=h+"Date",n[d]=h+"Date",n[f]=h+"Month",n[c]=h+"FullYear",n[u]=h+"Hours",n[s]=h+"Minutes",n[i]=h+"Seconds",n[r]=h+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===f||o===c){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[O.p(t)]()},m.add=function(r,h){var d,l=this;r=Number(r);var $=O.p(h),y=function(t){var e=w(l);return O.w(e.date(e.date()+Math.round(t*r)),l)};if($===f)return this.set(f,this.$M+r);if($===c)return this.set(c,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return O.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=O.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,f=n.months,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},c=function(t){return O.s(s%12||12,t,"0")},d=n.meridiem||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r},$={YY:String(this.$y).slice(-2),YYYY:this.$y,M:a+1,MM:O.s(a+1,2,"0"),MMM:h(n.monthsShort,a,f,3),MMMM:h(f,a),D:this.$D,DD:O.s(this.$D,2,"0"),d:String(this.$W),dd:h(n.weekdaysMin,this.$W,o,2),ddd:h(n.weekdaysShort,this.$W,o,3),dddd:o[this.$W],H:String(s),HH:O.s(s,2,"0"),h:c(1),hh:c(2),a:d(s,u,!0),A:d(s,u,!1),m:String(u),mm:O.s(u,2,"0"),s:String(this.$s),ss:O.s(this.$s,2,"0"),SSS:O.s(this.$ms,3,"0"),Z:i};return r.replace(y,(function(t,e){return e||$[t]||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=O.p(d),M=w(r),m=(M.utcOffset()-this.utcOffset())*e,v=this-M,g=O.m(this,M);return g=($={},$[c]=g/12,$[f]=g,$[h]=g/3,$[o]=(v-m)/6048e5,$[a]=(v-m)/864e5,$[u]=v/n,$[s]=v/e,$[i]=v/t,$)[y]||v,l?g:O.a(g)},m.daysInMonth=function(){return this.endOf(f).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=S(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return O.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),T=_.prototype;return w.prototype=T,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",f],["$y",c],["$D",d]].forEach((function(t){T[t[1]]=function(e){return this.$g(e,t[0],t[1])}})),w.extend=function(t,e){return t.$i||(t(e,_,w),t.$i=!0),w},w.locale=S,w.isDayjs=p,w.unix=function(t){return w(1e3*t)},w.en=D[g],w.Ls=D,w.p={},w}));
}, function(modId) {var map = {}; return __REQUIRE__(map[modId], modId); })
return __REQUIRE__(1667526479364);
})()
//miniprogram-npm-outsideDeps=[]
//# sourceMappingURL=index.js.map
\ No newline at end of file
{"version":3,"sources":["dayjs.min.js"],"names":[],"mappings":";;;;;;;AAAA","file":"index.js","sourcesContent":["!function(t,e){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=e():\"function\"==typeof define&&define.amd?define(e):(t=\"undefined\"!=typeof globalThis?globalThis:t||self).dayjs=e()}(this,(function(){var t=1e3,e=6e4,n=36e5,r=\"millisecond\",i=\"second\",s=\"minute\",u=\"hour\",a=\"day\",o=\"week\",f=\"month\",h=\"quarter\",c=\"year\",d=\"date\",l=\"Invalid Date\",$=/^(\\d{4})[-/]?(\\d{1,2})?[-/]?(\\d{0,2})[Tt\\s]*(\\d{1,2})?:?(\\d{1,2})?:?(\\d{1,2})?[.:]?(\\d+)?$/,y=/\\[([^\\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:\"en\",weekdays:\"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday\".split(\"_\"),months:\"January_February_March_April_May_June_July_August_September_October_November_December\".split(\"_\"),ordinal:function(t){var e=[\"th\",\"st\",\"nd\",\"rd\"],n=t%100;return\"[\"+t+(e[(n-20)%10]||e[n]||e[0])+\"]\"}},m=function(t,e,n){var r=String(t);return!r||r.length>=e?t:\"\"+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return(e<=0?\"+\":\"-\")+m(r,2,\"0\")+\":\"+m(i,2,\"0\")},m:function t(e,n){if(e.date()<n.date())return-t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,f),s=n-i<0,u=e.clone().add(r+(s?-1:1),f);return+(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return{M:f,y:c,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:h}[t]||String(t||\"\").toLowerCase().replace(/s$/,\"\")},u:function(t){return void 0===t}},g=\"en\",D={};D[g]=M;var p=function(t){return t instanceof _},S=function t(e,n,r){var i;if(!e)return g;if(\"string\"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split(\"-\");if(!i&&u.length>1)return t(u[0])}else{var a=e.name;D[a]=e,i=a}return!r&&i&&(g=i),i||!r&&g},w=function(t,e){if(p(t))return t.clone();var n=\"object\"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},O=v;O.l=S,O.i=p,O.w=function(t,e){return w(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=S(t.locale,null,!0),this.parse(t)}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(O.u(e))return new Date;if(e instanceof Date)return new Date(e);if(\"string\"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||\"0\").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.$x=t.x||{},this.init()},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},m.$utils=function(){return O},m.isValid=function(){return!(this.$d.toString()===l)},m.isSame=function(t,e){var n=w(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return w(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<w(t)},m.$g=function(t,e,n){return O.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!O.u(e)||e,h=O.p(t),l=function(t,e){var i=O.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return O.w(n.toDate()[t].apply(n.toDate(\"s\"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v=\"set\"+(this.$u?\"UTC\":\"\");switch(h){case c:return r?l(1,0):l(31,11);case f:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+\"Hours\",0);case u:return $(v+\"Minutes\",1);case s:return $(v+\"Seconds\",2);case i:return $(v+\"Milliseconds\",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=O.p(t),h=\"set\"+(this.$u?\"UTC\":\"\"),l=(n={},n[a]=h+\"Date\",n[d]=h+\"Date\",n[f]=h+\"Month\",n[c]=h+\"FullYear\",n[u]=h+\"Hours\",n[s]=h+\"Minutes\",n[i]=h+\"Seconds\",n[r]=h+\"Milliseconds\",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===f||o===c){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[O.p(t)]()},m.add=function(r,h){var d,l=this;r=Number(r);var $=O.p(h),y=function(t){var e=w(l);return O.w(e.date(e.date()+Math.round(t*r)),l)};if($===f)return this.set(f,this.$M+r);if($===c)return this.set(c,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return O.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||\"YYYY-MM-DDTHH:mm:ssZ\",i=O.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,f=n.months,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},c=function(t){return O.s(s%12||12,t,\"0\")},d=n.meridiem||function(t,e,n){var r=t<12?\"AM\":\"PM\";return n?r.toLowerCase():r},$={YY:String(this.$y).slice(-2),YYYY:this.$y,M:a+1,MM:O.s(a+1,2,\"0\"),MMM:h(n.monthsShort,a,f,3),MMMM:h(f,a),D:this.$D,DD:O.s(this.$D,2,\"0\"),d:String(this.$W),dd:h(n.weekdaysMin,this.$W,o,2),ddd:h(n.weekdaysShort,this.$W,o,3),dddd:o[this.$W],H:String(s),HH:O.s(s,2,\"0\"),h:c(1),hh:c(2),a:d(s,u,!0),A:d(s,u,!1),m:String(u),mm:O.s(u,2,\"0\"),s:String(this.$s),ss:O.s(this.$s,2,\"0\"),SSS:O.s(this.$ms,3,\"0\"),Z:i};return r.replace(y,(function(t,e){return e||$[t]||i.replace(\":\",\"\")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=O.p(d),M=w(r),m=(M.utcOffset()-this.utcOffset())*e,v=this-M,g=O.m(this,M);return g=($={},$[c]=g/12,$[f]=g,$[h]=g/3,$[o]=(v-m)/6048e5,$[a]=(v-m)/864e5,$[u]=v/n,$[s]=v/e,$[i]=v/t,$)[y]||v,l?g:O.a(g)},m.daysInMonth=function(){return this.endOf(f).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=S(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return O.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),T=_.prototype;return w.prototype=T,[[\"$ms\",r],[\"$s\",i],[\"$m\",s],[\"$H\",u],[\"$W\",a],[\"$M\",f],[\"$y\",c],[\"$D\",d]].forEach((function(t){T[t[1]]=function(e){return this.$g(e,t[0],t[1])}})),w.extend=function(t,e){return t.$i||(t(e,_,w),t.$i=!0),w},w.locale=S,w.isDayjs=p,w.unix=function(t){return w(1e3*t)},w.en=D[g],w.Ls=D,w.p={},w}));"]}
\ No newline at end of file
This diff could not be displayed because it is too large.
---
title: ActionSheet 动作面板
description: 由用户操作后触发的一种特定的模态弹出框 ,呈现一组与当前情境相关的两个或多个选项。
spline: data
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-89%25-blue" /></span>
## 引入
全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-action-sheet": "tdesign-miniprogram/action-sheet/action-sheet",
}
```
## 代码演示
### 基础用法
{{ list }}
### 图标列表型
{{ icon-list }}
### 宫格型
{{ grid }}
### 宫格型-多页
{{ grid-multi }}
### 支持指令调用
```javascript
import ActionSheet, { ActionSheetTheme } from 'tdesign-miniprogram/action-sheet/index';
// 指令调用不同于组件引用不需要传入visible
const basicListOption: ActionSheetShowOption = {
theme: ActionSheetTheme.List,
selector: '#t-action-sheet',
items: [
{
label: '默认选项',
},
{
label: '失效选项',
disabled: true,
},
{
label: '警告选项',
color: '#e34d59',
},
],
};
const handler = ActionSheet.show(basicListOption);
```
指令调用的关闭如下
```javascript
handler.close();
```
## API
### ActionSheet Props
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
cancel-text | String | 取消 | 设置取消按钮的文本 | N
count | Number | 8 | 设置每页展示菜单的数量,仅当 type=grid 时有效 | N
items | Array | - | 必需。菜单项。TS 类型:`Array<string | ActionSheetItem>` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean; icon?: string; }`[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts) | Y
show-cancel | Boolean | true | 是否显示取消按钮 | N
theme | String | list | 展示类型,列表和表格形式展示。可选项:list/grid | N
visible | Boolean | null | 必需。显示与隐藏 | Y
default-visible | Boolean | false | 必需。显示与隐藏。非受控属性 | Y
external-classes | Array | - | 组件类名,分别用于设置 组件外层元素、组件内容部分、取消按钮 等元素类名。`['t-class', 't-class-content', 't-class-cancel']` | N
### ActionSheet Events
名称 | 参数 | 描述
-- | -- | --
visible-change | `(visible: Boolean)` | 当浮层隐藏或显示时触发。
cancel | - | 点击取消按钮时触发
selected | `(selected: ActionSheetItem | String, index: Number)` | 选择菜单项时触发
import { SuperComponent } from '../common/src/index';
export default class ActionSheet extends SuperComponent {
static show: (options: import("./show").ActionSheetShowOption) => WechatMiniprogram.Component.TrivialInstance;
externalClasses: string[];
properties: {
cancelText?: {
type: StringConstructor;
value?: string;
};
count?: {
type: NumberConstructor;
value?: number;
};
items: {
type: ArrayConstructor;
value?: (string | import("./type").ActionSheetItem)[];
};
showCancel?: {
type: BooleanConstructor;
value?: boolean;
};
theme?: {
type: StringConstructor;
value?: "list" | "grid";
};
visible: {
type: BooleanConstructor;
value?: boolean;
};
defaultVisible: {
type: BooleanConstructor;
value?: boolean;
};
};
data: {
prefix: string;
classPrefix: string;
gridThemeItems: any[];
currentSwiperIndex: number;
};
controlledProps: {
key: string;
event: string;
}[];
ready(): void;
methods: {
onSwiperChange(e: WechatMiniprogram.TouchEvent): void;
splitGridThemeActions(): void;
show(options: any): void;
memoInitialData(): void;
close(): void;
onPopupVisibleChange({ detail }: {
detail: any;
}): void;
onSelect(event: WechatMiniprogram.TouchEvent): void;
onCancel(): void;
};
}
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { chunk } from '../common/utils';
import { SuperComponent, wxComponent } from '../common/src/index';
import config from '../common/config';
import { ActionSheetTheme, show } from './show';
import props from './props';
const { prefix } = config;
const name = `${prefix}-action-sheet`;
let ActionSheet = class ActionSheet extends SuperComponent {
constructor() {
super(...arguments);
this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-cancel`];
this.properties = Object.assign({}, props);
this.data = {
prefix,
classPrefix: name,
gridThemeItems: [],
currentSwiperIndex: 0,
};
this.controlledProps = [
{
key: 'visible',
event: 'visible-change',
},
];
this.methods = {
onSwiperChange(e) {
const { detail: { current }, } = e;
this.setData({
currentSwiperIndex: current,
});
},
splitGridThemeActions() {
if (this.data.theme !== ActionSheetTheme.Grid)
return;
this.setData({
gridThemeItems: chunk(this.data.items, this.data.count),
});
},
show(options) {
this.setData(Object.assign(Object.assign(Object.assign({}, this.initialData), options), { visible: true }));
this.splitGridThemeActions();
this.autoClose = true;
this._trigger('visible-change', { visible: true });
},
memoInitialData() {
this.initialData = Object.assign(Object.assign({}, this.properties), this.data);
},
close() {
this._trigger('visible-change', { visible: false });
},
onPopupVisibleChange({ detail }) {
if (!detail.visible) {
this._trigger('visible-change', { visible: false });
}
if (this.autoClose) {
this.setData({ visible: false });
this.autoClose = false;
}
},
onSelect(event) {
const { currentSwiperIndex, items, gridThemeItems, count, theme } = this.data;
const { index } = event.currentTarget.dataset;
const isSwiperMode = theme === ActionSheetTheme.Grid;
const item = isSwiperMode ? gridThemeItems[currentSwiperIndex][index] : items[index];
const realIndex = isSwiperMode ? index + currentSwiperIndex * count : index;
if (item) {
this.triggerEvent('selected', { selected: item, index: realIndex });
this._trigger('visible-change', { visible: false });
}
},
onCancel() {
this.triggerEvent('cancel');
},
};
}
ready() {
this.memoInitialData();
this.splitGridThemeActions();
}
};
ActionSheet.show = show;
ActionSheet = __decorate([
wxComponent()
], ActionSheet);
export default ActionSheet;
{
"component": true,
"usingComponents": {
"t-icon": "../icon/icon",
"t-popup": "../popup/popup",
"t-swiper": "../swiper/swiper",
"t-swiper-item": "../swiper/swiper-item",
"t-image": "../image/image",
"t-grid": "../grid/grid",
"t-grid-item": "../grid/grid-item"
}
}
<wxs src="./action-sheet.wxs" module="this" />
<import src="./template/action-sheet-list.wxml" />
<import src="./template/action-sheet-grid.wxml" />
<view id="{{classPrefix}}" class="{{classPrefix}} {{prefix}}-class">
<t-popup visible="{{visible}}" placement="bottom" bind:visible-change="onPopupVisibleChange">
<view class="{{classPrefix}}__content {{prefix}}-class-content">
<block wx:if="{{gridThemeItems.length}}">
<template is="grid" data="{{classPrefix, prefix, gridThemeItems, count, currentSwiperIndex}}" />
</block>
<block wx:elif="{{items && items.length}}">
<view class="{{classPrefix}}__list" wx:for="{{ items }}" wx:key="index">
<template
is="list"
data="{{index, classPrefix, listThemeItemClass: this.getListThemeItemClass({ item, prefix, classPrefix }), item}}"
/>
</view>
</block>
</view>
<slot />
<view wx:if="{{showCancel}}" class="{{classPrefix}}__footer {{classPrefix}}__safe">
<view class="{{classPrefix}}__gap-{{theme}}" />
<view
class="{{classPrefix}}__cancel {{prefix}}-class-cancel"
hover-class="{{classPrefix}}__cancel--hover"
hover-stay-time="70"
bind:tap="onCancel"
>
{{ cancelText }}
</view>
</view>
</t-popup>
</view>
var getListThemeItemClass = function (props) {
var classPrefix = props.classPrefix;
var item = props.item;
var prefix = props.prefix;
var classList = [classPrefix + '__list-item'];
if (item.disabled) {
classList.push(prefix + '-is-disabled');
}
return classList.join(' ');
};
var isImage = function (name) {
return name.indexOf('/') !== -1;
};
module.exports = {
getListThemeItemClass: getListThemeItemClass,
isImage: isImage,
};
.t-float-left {
float: left;
}
.t-float-right {
float: right;
}
@keyframes tdesign-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.hotspot-expanded.relative {
position: relative;
}
.hotspot-expanded::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transform: scale(1.5);
}
.t-action-sheet .flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.t-action-sheet .ellipsis {
word-wrap: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.t-action-sheet__grid {
padding: 48rpx 0 16rpx 0;
}
.t-action-sheet__grid-item {
margin-bottom: 32rpx;
}
.t-action-sheet__list {
background-color: #fff;
border-bottom: 1rpx solid #f6f6f6;
}
.t-action-sheet__list:last-child {
border-bottom: none;
}
.t-action-sheet__list-item {
height: 96rpx;
display: flex;
align-items: center;
justify-content: center;
}
.t-action-sheet__list-item.t-is-disabled {
color: rgba(0, 0, 0, 0.26);
}
.t-action-sheet__list-item-text {
font-size: 32rpx;
word-wrap: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.t-action-sheet__list-item-icon {
margin-right: 16rpx;
}
.t-action-sheet__swiper-wrap {
position: relative;
background-color: #fff;
}
.t-action-sheet__square {
height: 148rpx;
margin-bottom: 32rpx;
}
.t-action-sheet__square-image {
width: 72rpx;
height: 72rpx;
padding: 10rpx;
}
.t-action-sheet__square-text {
width: 100%;
margin-top: 10rpx;
font-size: 28rpx;
color: rgba(0, 0, 0, 0.9);
text-align: center;
word-wrap: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.t-action-sheet__footer {
background-color: #fff;
}
.t-action-sheet__gap-list {
height: 16rpx;
background-color: #f3f3f3;
}
.t-action-sheet__gap-grid {
height: 1rpx;
background-color: #f3f3f3;
}
.t-action-sheet__cancel {
display: flex;
align-items: center;
justify-content: center;
height: 96rpx;
}
.t-action-sheet__dots {
position: absolute;
left: 50%;
bottom: 32rpx;
transform: translateX(-50%);
display: flex;
flex-direction: row;
}
.t-action-sheet__dots-item {
width: 16rpx;
height: 16rpx;
background-color: #dcdcdc;
border-radius: 50%;
margin: 0 16rpx;
transition: all 0.4s ease-in;
}
.t-action-sheet__dots-item.t-is-active {
background-color: #0052d9;
}
.t-action-sheet__safe {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
import ActionSheet from './action-sheet';
export * from './show';
export default ActionSheet;
import ActionSheet from './action-sheet';
export * from './show';
export default ActionSheet;
import { TdActionSheetProps } from './type';
declare const props: TdActionSheetProps;
export default props;
const props = {
cancelText: {
type: String,
value: '取消',
},
count: {
type: Number,
value: 8,
},
items: {
type: Array,
},
showCancel: {
type: Boolean,
value: true,
},
theme: {
type: String,
value: 'list',
},
visible: {
type: Boolean,
value: null,
},
defaultVisible: {
type: Boolean,
value: false,
},
};
export default props;
/// <reference types="miniprogram-api-typings" />
/// <reference types="miniprogram-api-typings" />
export interface ActionSheetItem {
label: string;
color?: string;
disabled?: boolean;
icon?: string;
}
declare type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
export declare enum ActionSheetTheme {
List = "list",
Grid = "grid"
}
interface ActionSheetProps {
visible: boolean;
items: Array<string | ActionSheetItem>;
defaultVisible?: boolean;
cancelText?: string;
count?: number;
showCancel?: boolean;
theme?: ActionSheetTheme;
}
export interface ActionSheetShowOption extends Omit<ActionSheetProps, 'visible'> {
context?: Context;
selector?: string;
}
export declare const show: (options: ActionSheetShowOption) => WechatMiniprogram.Component.TrivialInstance;
export declare const close: (options: ActionSheetShowOption) => void;
export {};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { getInstance } from '../common/utils';
export var ActionSheetTheme;
(function (ActionSheetTheme) {
ActionSheetTheme["List"] = "list";
ActionSheetTheme["Grid"] = "grid";
})(ActionSheetTheme || (ActionSheetTheme = {}));
export const show = function (options) {
const _a = Object.assign({}, options), { context, selector = '#t-action-sheet' } = _a, otherOptions = __rest(_a, ["context", "selector"]);
const instance = getInstance(context, selector);
if (instance) {
instance.show(Object.assign({}, otherOptions));
return instance;
}
console.error('未找到组件,请确认 selector && context 是否正确');
};
export const close = function (options) {
const { context, selector = '#t-action-sheet' } = Object.assign({}, options);
const instance = getInstance(context, selector);
if (instance) {
instance.close();
}
};
<import src="./action-sheet-item.wxml" />
<template name="grid">
<block wx:if="{{gridThemeItems.length === 1}}">
<t-grid align="center" t-class="{{classPrefix}}__grid" column="{{count / 2}}" class="{{classPrefix}}__single-wrap">
<t-grid-item
t-class="{{classPrefix}}__grid-item"
class="{{classPrefix}}__square"
wx:for="{{gridThemeItems[0]}}"
wx:key="index"
bind:tap="onSelect"
data-index="{{index}}"
>
<template is="item" data="{{classPrefix, item}}" />
</t-grid-item>
</t-grid>
</block>
<block wx:elif="{{gridThemeItems.length > 1}}">
<view class="{{classPrefix}}__swiper-wrap">
<t-swiper height="{{456}}" autoplay="{{false}}" current="{{currentSwiperIndex}}" bindchange="onSwiperChange">
<t-swiper-item wx:for="{{gridThemeItems}}" wx:key="index">
<t-grid align="center" t-class="{{classPrefix}}__grid" column="{{count / 2}}">
<t-grid-item
t-class="{{classPrefix}}__grid-item"
class="{{classPrefix}}__square"
wx:for="{{item}}"
wx:key="index"
data-index="{{index}}"
bind:tap="onSelect"
>
<template is="item" data="{{classPrefix, item}}" />
</t-grid-item>
</t-grid>
</t-swiper-item>
</t-swiper>
<view class="{{classPrefix}}__nav">
<view class="{{classPrefix}}__dots">
<view
wx:for="{{gridThemeItems.length}}"
wx:key="index"
class="{{classPrefix}}__dots-item {{index === currentSwiperIndex ? prefix + '-is-active' : ''}}"
/>
</view>
</view>
</view>
</block>
</template>
<wxs src="../action-sheet.wxs" module="this" />
<template name="item">
<block>
<t-image
slot="image"
wx:if="{{ this.isImage(item.icon) }}"
lazy
class="{{classPrefix}}__square-image"
src="{{item.icon}}"
mode="aspectFill"
/>
<t-icon slot="image" wx:else name="{{item.icon}}" class="{{classPrefix}}__square-image" size="72rpx" />
</block>
<view slot="text" style="{{ item.color ? 'color: ' + item.color : '' }}" class="{{classPrefix}}__square-text">
{{item.label}}
</view>
</template>
<template name="list">
<view
data-index="{{index}}"
style="{{ item.color ? 'color: ' + item.color : '' }}"
class="{{listThemeItemClass}}"
bind:tap="onSelect"
>
<t-icon wx:if="{{item.icon}}" name="{{item.icon}}" class="{{classPrefix}}__list-item-icon" size="48rpx"></t-icon>
<view class="{{classPrefix}}__list-item-text">{{item.label || item}}</view>
</view>
</template>
export interface TdActionSheetProps {
cancelText?: {
type: StringConstructor;
value?: string;
};
count?: {
type: NumberConstructor;
value?: number;
};
items: {
type: ArrayConstructor;
value?: Array<string | ActionSheetItem>;
};
showCancel?: {
type: BooleanConstructor;
value?: boolean;
};
theme?: {
type: StringConstructor;
value?: 'list' | 'grid';
};
visible: {
type: BooleanConstructor;
value?: boolean;
};
defaultVisible: {
type: BooleanConstructor;
value?: boolean;
};
}
export interface ActionSheetItem {
label: string;
color?: string;
disabled?: boolean;
}
---
title: Avatar 头像
description: 用于展示用户头像信息,除了纯展示也可点击进入个人详情等操作。
spline: data
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-99%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-85%25-blue" /></span>
## 引入
全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-avatar": "tdesign-miniprogram/avatar/avatar",
"t-avatar-group": "tdesign-miniprogram/avatar/avatar-group"
}
```
### 主题定制
CSS 变量名|说明
--|--
--td-avatar-bg-color | 头像背景颜色;
--td-avatar-content-color | 头像内容(文字、图标)颜色;
--td-avatar-group-border-color | 组合头像边框颜色;
## 代码演示
### 基础头像
头像样式可为默认头像、微信头像圆形、方形、自定义文字
<img src="https://tdesign.gtimg.com/miniprogram/readme/avatar-2.png" width="375px" height="50%">
{{ shape }}
### 纯展示 从上往下
<img src="https://tdesign.gtimg.com/miniprogram/readme/avatar-1.png" width="375px" height="50%">
{{ exhibition }}
### 带操作 从下往上
{{ action }}
### 头像大小尺寸及消息提醒
<img src="https://tdesign.gtimg.com/miniprogram/readme/avatar-3.png" width="375px" height="50%">
{{ size }}
## API
### Avatar Props
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
alt | String | - | 头像替换文本,仅当图片加载失败时有效 | N
badge-props | Object | - | 头像右上角提示信息,继承 Badge 组件的全部特性。如:小红点,或者数字。TS 类型:`BadgeProps`[Badge API Documents](./badge?tab=api)[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N
external-classes | Array | - | 组件类名,用于设置组件外层元素类名。`['t-class', 't-class-image', 't-class-icon', 't-class-alt', 't-class-content']` | N
hide-on-load-failed | Boolean | false | 加载失败时隐藏图片 | N
icon | String / Slot | - | 图标 | N
image | String | - | 图片地址 | N
shape | String | circle | 形状。可选项:circle/round。TS 类型:`ShapeEnum ` `type ShapeEnum = 'circle' | 'round'`[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N
size | String | - | 尺寸,示例值:small/medium/large/24px/38px 等,默认为 large | N
### Avatar Events
名称 | 参数 | 描述
-- | -- | --
error | \- | 图片加载失败时触发
### AvatarGroup Props
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
cascading | String | 'right-up' | 图片之间的层叠关系,可选值:左侧图片在上和右侧图片在上。可选项:left-up/right-up。TS 类型:`CascadingValue` `type CascadingValue = 'left-up' | 'right-up'`[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N
collapse-avatar | String / Slot | - | 头像数量超出时,会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例:`+5``...`, `更多` | N
external-classes | Array | - | 组件类名,用于设置组件外层元素类名。`['t-class', 't-class-image', 't-class-content']` | N
max | Number | - | 能够同时显示的最多头像数量 | N
size | String | medium | 尺寸,示例值:small/medium/large/24px/38px 等。优先级低于 Avatar.size | N
import { TdAvatarGroupProps } from './type';
declare const props: TdAvatarGroupProps;
export default props;
const props = {
cascading: {
type: String,
value: 'right-up',
},
collapseAvatar: {
type: String,
},
externalClasses: {
type: Array,
},
max: {
type: Number,
},
size: {
type: String,
value: 'medium',
},
};
export default props;
import { SuperComponent, RelationsOptions } from '../common/src/index';
export default class AvatarGroup extends SuperComponent {
externalClasses: string[];
properties: import("./type").TdAvatarGroupProps;
data: {
prefix: string;
classPrefix: string;
hasChild: boolean;
length: number;
className: string;
borderSize: string;
};
options: {
multipleSlots: boolean;
};
relations: RelationsOptions;
ready(): void;
lifetimes: {
attached(): void;
};
methods: {
isINcludePX(size: any): boolean;
setClass(): void;
handleHasChild(children: any, hasChild: any): void;
handleChildSlot(max: any, children: any, f: any): void;
handleChildMax(max: any, children: any, isSlotElement: any): void;
handleChildSize(size: any, children: any): void;
handleChildCascading(cascading: any, children: any): void;
handleChildBorder(size: any, children: any): void;
};
}
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { SuperComponent, wxComponent } from '../common/src/index';
import config from '../common/config';
import avatarGroupProps from './avatar-group-props';
const { prefix } = config;
const name = `${prefix}-avatar-group`;
let AvatarGroup = class AvatarGroup extends SuperComponent {
constructor() {
super(...arguments);
this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-image`];
this.properties = avatarGroupProps;
this.data = {
prefix,
classPrefix: name,
hasChild: true,
length: 0,
className: '',
borderSize: '',
};
this.options = {
multipleSlots: true,
};
this.relations = {
'./avatar': {
type: 'descendant',
linked() {
this.children = this.getRelationNodes('./avatar');
},
},
};
this.lifetimes = {
attached() {
this.setClass();
},
};
this.methods = {
isINcludePX(size) {
return size.indexOf('px') > -1;
},
setClass() {
const { cascading, size } = this.properties;
const classList = [name, `${prefix}-class`];
const direction = cascading.split('-')[0];
if (this.isINcludePX(size)) {
classList.push(`${name}-offset-${direction}-medium`);
}
else {
classList.push(`${name}-offset-${direction}-${size}`);
}
this.setData({
className: classList.join(' '),
});
},
handleHasChild(children, hasChild) {
children.forEach((child) => {
child.updateIsChild(hasChild);
});
},
handleChildSlot(max, children, f) {
const query = this.createSelectorQuery();
const slotName = `.${this.data.classPrefix}__collapse--slot`;
query.select(slotName).boundingClientRect();
query.exec((res) => {
const isSlot = !!res[0].width;
f(max, children, isSlot);
});
},
handleChildMax(max, children, isSlotElement) {
const len = children.length;
if (!max || max > len)
return;
const slotElement = isSlotElement ? children.pop() : '';
const leftChildren = children.splice(max, len - max, isSlotElement && slotElement);
leftChildren.forEach((child) => {
child.updateShow();
});
},
handleChildSize(size, children) {
if (!size)
return;
children.forEach((child) => {
child.updateSize(size);
});
},
handleChildCascading(cascading, children) {
if (cascading === 'right-up')
return;
const defaultZIndex = 100;
children.forEach((child, index) => {
child.updateCascading(defaultZIndex - index * 10);
});
},
handleChildBorder(size, children) {
const borderSize = this.isINcludePX(size) ? 'medium' : size;
this.setData({
borderSize,
});
children.forEach((child) => {
child.updateBorder(borderSize);
});
},
};
}
ready() {
this.setData({
length: this.children.length,
});
this.handleHasChild(this.children, this.data.hasChild);
this.handleChildSlot(this.properties.max, this.children, this.handleChildMax);
this.handleChildSize(this.properties.size, this.children);
this.handleChildCascading(this.properties.cascading, this.children);
this.handleChildBorder(this.properties.size, this.children);
}
};
AvatarGroup = __decorate([
wxComponent()
], AvatarGroup);
export default AvatarGroup;
{
"component": true,
"usingComponents": {
"t-avatar": "./avatar"
}
}
<view class="{{className}}">
<slot />
<!-- 自定义折叠元素 -->
<view class="{{classPrefix}}__collapse--slot {{collapseAvatar ? prefix + '-is-hidden' : ''}}">
<slot name="collapseAvatar" />
</view>
<!-- 默认折叠元素 -->
<view class="{{classPrefix}}__collapse--default" wx:if="{{max && (max < length)}}">
<t-avatar
t-class-image="border--{{borderSize}} {{prefix}}-class-image"
t-class-content="{{prefix}}-class-content"
size="{{size}}"
>{{collapseAvatar || '+N'}}</t-avatar
>
</view>
</view>
.t-float-left {
float: left;
}
.t-float-right {
float: right;
}
@keyframes tdesign-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.hotspot-expanded.relative {
position: relative;
}
.hotspot-expanded::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transform: scale(1.5);
}
page {
--td-avatar-group-border-color: #fff;
}
.border--small {
border: 4rpx solid var(--td-avatar-group-border-color, #fff);
}
.border--medium {
border: 6rpx solid var(--td-avatar-group-border-color, #fff);
}
.border--large {
border: 8rpx solid var(--td-avatar-group-border-color, #fff);
}
.t-avatar-group {
display: inline-flex;
align-items: center;
}
.t-avatar-group-offset-left-small t-avatar:not(:first-child) {
margin-left: -4px;
}
.t-avatar-group-offset-left-medium t-avatar:not(:first-child) {
margin-left: -6px;
}
.t-avatar-group-offset-left-large t-avatar:not(:first-child) {
margin-left: -8px;
}
.t-avatar-group-offset-right-small t-avatar:not(:last-child) {
margin-right: -4px;
}
.t-avatar-group-offset-right-medium t-avatar:not(:last-child) {
margin-right: -6px;
}
.t-avatar-group-offset-right-large t-avatar:not(:last-child) {
margin-right: -8px;
}
.t-avatar-group__collapse--slot {
float: left;
}
.t-avatar-group__collapse--slot:not(:empty) + .t-avatar-group__collapse--default {
display: none;
float: left;
}
.t-avatar-group__collapse--slot:empty + .t-avatar-group__collapse--default {
display: block;
float: left;
}
.t-avatar-group .t-is-hidden {
display: none;
}
import { SuperComponent, RelationsOptions } from '../common/src/index';
export default class Avatar extends SuperComponent {
options: {
multipleSlots: boolean;
};
externalClasses: string[];
properties: import("./type").TdAvatarProps;
data: {
prefix: string;
classPrefix: string;
isShow: boolean;
zIndex: number;
isChild: boolean;
borderSize: string;
};
relations: RelationsOptions;
methods: {
updateIsChild(isChild: any): void;
updateShow(): void;
updateSize(size: any): void;
updateCascading(zIndex: any): void;
updateBorder(borderSize: any): void;
};
onLoadError(e: any): void;
}
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { SuperComponent, wxComponent } from '../common/src/index';
import config from '../common/config';
import avatarProps from './props';
const { prefix } = config;
const name = `${prefix}-avatar`;
let Avatar = class Avatar extends SuperComponent {
constructor() {
super(...arguments);
this.options = {
multipleSlots: true,
};
this.externalClasses = [
`${prefix}-class`,
`${prefix}-class-image`,
`${prefix}-class-icon`,
`${prefix}-class-alt`,
`${prefix}-class-content`,
];
this.properties = avatarProps;
this.data = {
prefix,
classPrefix: name,
isShow: true,
zIndex: 0,
isChild: false,
borderSize: '',
};
this.relations = {
'./avatar-group': {
type: 'ancestor',
linked(target) {
this.parent = target;
},
},
};
this.methods = {
updateIsChild(isChild) {
this.setData({
isChild,
});
},
updateShow() {
this.setData({
isShow: false,
});
},
updateSize(size) {
if (this.properties.size)
return;
this.setData({ size });
},
updateCascading(zIndex) {
this.setData({ zIndex });
},
updateBorder(borderSize) {
this.setData({ borderSize });
},
};
}
onLoadError(e) {
if (this.properties.hideOnLoadFailed) {
this.setData({
isShow: false,
});
}
this.triggerEvent('error', e.detail);
}
};
Avatar = __decorate([
wxComponent()
], Avatar);
export default Avatar;
{
"component": true,
"usingComponents": {
"t-icon": "../icon/icon",
"t-badge": "../badge/badge",
"t-image": "../image/image"
}
}
<wxs src="./avatar.wxs" module="this" />
<view class="{{classPrefix}}__wrapper {{prefix}}-class" style="{{this.getStyles(isShow, zIndex)}}">
<view
class="{{this.getAvatarOuterClass(classPrefix, size, shape)}} border--{{borderSize}} {{prefix}}-class-image "
style="{{this.getAvatarSizePx(size)}}"
>
<t-image
wx:if="{{image}}"
class="{{prefix}}-image"
t-class-load="{{prefix}}-class-alt"
t-class="{{classPrefix}}__image"
src="{{image}}"
mode="aspectFill"
binderror="onLoadError"
loadFailed="{{alt}}"
/>
<view
wx:elif="{{icon}}"
class="{{classPrefix}}__icon {{this.getIconClass(classPrefix, size)}} {{prefix}}-class-icon"
>
<t-icon name="{{icon}}" />
</view>
<view wx:else class="{{classPrefix}}__text {{prefix}}-class-content">
<slot />
</view>
</view>
<t-badge
class="{{prefix}}-badge-host {{prefix}}-badge__{{shape === 'circle' ? 'circle' : 'round'}}"
wx:if="{{badgeProps.dot || badgeProps.count}}"
color="{{badgeProps.color}}"
count="{{badgeProps.count}}"
max-count="{{badgeProps.maxCount || 100}}"
dot="{{badgeProps.dot}}"
content="{{badgeProps.content}}"
size="{{badgeProps.size}}"
visible="{{badgeProps.visible}}"
offset="{{badgeProps.offset}}"
/>
</view>
module.exports = {
getAvatarOuterClass: function (classPrefix, size, shape) {
var isIncludePx = size.indexOf('px') > -1;
var classNames = [
classPrefix,
classPrefix + (shape === 'round' ? '--round' : '--circle'),
isIncludePx ? '' : 't-size-' + (size || 'medium').slice(0, 1),
];
return classNames.join(' ');
},
getAvatarSizePx: function (size = 'medium') {
var pxIndex = size.indexOf('px');
if (pxIndex > -1) {
return 'width:' + size + ';height:' + size + ';font-size:' + ((size.slice(0, pxIndex) / 8) * 3 + 2) + 'px;';
}
},
getStyles: function (isShow, zIndex) {
var styles = 'z-index:' + zIndex + ';';
return styles + (isShow ? '' : 'display: none;');
},
getIconClass: function (classPrefix, size) {
if (size.indexOf('px') > -1) return;
return classPrefix + '__icon--default-' + (size || 'medium').slice(0, 1);
},
};
.t-float-left {
float: left;
}
.t-float-right {
float: right;
}
@keyframes tdesign-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.hotspot-expanded.relative {
position: relative;
}
.hotspot-expanded::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transform: scale(1.5);
}
page {
--td-avatar-group-border-color: #fff;
}
.border--small {
border: 4rpx solid var(--td-avatar-group-border-color, #fff);
}
.border--medium {
border: 6rpx solid var(--td-avatar-group-border-color, #fff);
}
.border--large {
border: 8rpx solid var(--td-avatar-group-border-color, #fff);
}
page {
--td-avatar-bg-color: #d4e3fc;
--td-avatar-content-color: #0052d9;
}
.t-avatar {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.t-avatar__wrapper {
float: left;
position: relative;
background-color: var(--td-avatar-bg-color, #d4e3fc);
color: var(--td-avatar-content-color, #0052d9);
border-radius: 999rpx;
}
.t-avatar__wrapper .t-badge-host {
position: absolute;
}
.t-avatar__wrapper .t-badge__round {
top: -10%;
right: -10%;
}
.t-avatar__wrapper .t-badge__circle {
top: -5%;
right: -5%;
}
.t-avatar.t-size-l {
width: 128rpx;
height: 128rpx;
font-size: 52rpx;
}
.t-avatar.t-size-m {
width: 96rpx;
height: 96rpx;
font-size: 40rpx;
}
.t-avatar.t-size-s {
width: 64rpx;
height: 64rpx;
font-size: 28rpx;
}
.t-avatar .t-image,
.t-avatar__image {
width: 100%;
height: 100%;
}
.t-avatar--circle {
border-radius: 999rpx;
overflow: hidden;
}
.t-avatar--round {
border-radius: 10rpx;
overflow: hidden;
}
.t-avatar__text,
.t-avatar__icon {
font-size: inherit;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.t-avatar__text:empty,
.t-avatar__icon:empty {
width: 0;
height: 0;
}
page {
--td-avatar-group-border-color: #fff;
}
.border--small {
border: 4rpx solid var(--td-avatar-group-border-color, #fff);
}
.border--medium {
border: 6rpx solid var(--td-avatar-group-border-color, #fff);
}
.border--large {
border: 8rpx solid var(--td-avatar-group-border-color, #fff);
}
import { TdAvatarProps } from './type';
declare const props: TdAvatarProps;
export default props;
const props = {
alt: {
type: String,
value: '',
},
badgeProps: {
type: Object,
},
externalClasses: {
type: Array,
},
hideOnLoadFailed: {
type: Boolean,
value: false,
},
icon: {
type: String,
},
image: {
type: String,
value: '',
},
shape: {
type: String,
value: 'circle',
},
size: {
type: String,
value: '',
},
};
export default props;
import { BadgeProps } from '../badge/index';
export interface TdAvatarProps {
alt?: {
type: StringConstructor;
value?: string;
};
badgeProps?: {
type: ObjectConstructor;
value?: BadgeProps;
};
externalClasses?: {
type: ArrayConstructor;
value?: ['t-class'];
};
hideOnLoadFailed?: {
type: BooleanConstructor;
value?: boolean;
};
icon?: {
type: StringConstructor;
value?: string;
};
image?: {
type: StringConstructor;
value?: string;
};
shape?: {
type: StringConstructor;
value?: ShapeEnum;
};
size?: {
type: StringConstructor;
value?: string;
};
}
export interface TdAvatarGroupProps {
cascading?: {
type: StringConstructor;
value?: CascadingValue;
};
collapseAvatar?: {
type: StringConstructor;
value?: string;
};
externalClasses?: {
type: ArrayConstructor;
value?: ['t-class', 't-class-image', 't-class-content'];
};
max?: {
type: NumberConstructor;
value?: number;
};
size?: {
type: StringConstructor;
value?: string;
};
}
export declare type ShapeEnum = 'circle' | 'round';
export declare type CascadingValue = 'left-up' | 'right-up';
---
title: BackTop 返回顶部
description: 用于当页面过长往下滑动时,帮助用户快速回到页面顶部。
spline: navigation
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
## 引入
全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-back-top": "tdesign-miniprogram/back-top/back-top",
}
```
## 代码演示
<img src="https://tdesign.gtimg.com/miniprogram/readme/backtop-1.png" width="375px" height="50%">
### 基础返回顶部
{{ base }}
## API
### BackTop Props
| 名称 | 类型 | 默认值 | 说明 | 必传 |
| ---------------- | ------------- | --------- | ------------------------------------------------------------------------------------------------------- | ---- |
| external-classes | Array | - | 组件类名,分别用于设置外层元素、图标、文本内容等元素类名。`['t-class', 't-class-icon', 't-class-text']` | N |
| fixed | Boolean | true | 是否绝对定位固定到屏幕右下方 | N |
| icon | String / Slot | 'backtop' | 图标 | N |
| text | String | '' | 文案 | N |
| theme | String | round | 预设的样式类型。可选项:round/half-round/round-dark/half-round-dark | N |
### BackTop Events
| 名称 | 参数 | 描述 |
| ------ | ---- | -------- |
| to-top | - | 点击触发 |
import { SuperComponent } from '../common/src/index';
export default class BackTop extends SuperComponent {
externalClasses: string[];
properties: import("./type").TdBackTopProps;
data: {
prefix: string;
classPrefix: string;
};
toTop(): void;
}
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { SuperComponent, wxComponent } from '../common/src/index';
import config from '../common/config';
import props from './props';
const { prefix } = config;
const name = `${prefix}-back-top`;
let BackTop = class BackTop extends SuperComponent {
constructor() {
super(...arguments);
this.externalClasses = ['t-class', 't-class-icon', 't-class-text'];
this.properties = props;
this.data = {
prefix,
classPrefix: name,
};
}
toTop() {
this.triggerEvent('to-top');
wx.pageScrollTo({
scrollTop: 0,
duration: 300,
});
}
};
BackTop = __decorate([
wxComponent()
], BackTop);
export default BackTop;
{
"component": true,
"usingComponents": {
"t-icon": "../icon/icon"
}
}
<view
class="{{prefix}}-class {{classPrefix}} {{fixed ? prefix + '-is-fixed' : ''}} {{prefix + '-is-' + theme}}"
bindtap="toTop"
>
<t-icon wx:if="{{!!icon}}" class="{{classPrefix}}__icon {{prefix}}-class-icon" name="{{icon}}" />
<view wx:if="{{!!text}}" class="{{classPrefix}}__text {{prefix}}-class-text"> {{text}} </view>
<slot />
</view>
.t-float-left {
float: left;
}
.t-float-right {
float: right;
}
@keyframes tdesign-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.hotspot-expanded.relative {
position: relative;
}
.hotspot-expanded::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transform: scale(1.5);
}
.t-back-top {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: transparent;
overflow: hidden;
box-sizing: border-box;
transition: height 0.2s;
height: auto;
}
.t-back-top.t-is-fixed {
position: fixed;
right: 32rpx;
bottom: 133rpx;
}
.t-back-top.t-is-round,
.t-back-top.t-is-round-dark {
width: 96rpx;
height: 96rpx;
border-radius: 50%;
}
.t-back-top.t-is-round .t-back-top__icon,
.t-back-top.t-is-round-dark .t-back-top__icon {
margin: 0;
border-radius: 0;
background-color: transparent;
}
.t-back-top.t-is-round .t-back-top__text,
.t-back-top.t-is-round-dark .t-back-top__text {
padding: 0;
margin-top: 0;
}
.t-back-top.t-is-round,
.t-back-top.t-is-half-round {
background-color: #ffffff;
color: #333;
border: 1rpx solid;
border-color: #ddd;
}
.t-back-top.t-is-round .t-back-top__icon,
.t-back-top.t-is-half-round .t-back-top__icon,
.t-back-top.t-is-round .t-back-top__text,
.t-back-top.t-is-half-round .t-back-top__text {
color: #333;
}
.t-back-top.t-is-round-dark,
.t-back-top.t-is-half-round-dark {
background-color: #000;
color: #fff;
}
.t-back-top.t-is-round-dark .t-back-top__icon,
.t-back-top.t-is-half-round-dark .t-back-top__icon,
.t-back-top.t-is-round-dark .t-back-top__text,
.t-back-top.t-is-half-round-dark .t-back-top__text {
color: #fff;
}
.t-back-top.t-is-half-round,
.t-back-top.t-is-half-round-dark {
width: 120rpx;
height: 80rpx;
border-radius: 120rpx 0 0 120rpx;
flex-direction: row;
right: 0;
}
.t-back-top.t-is-half-round .t-back-top__icon,
.t-back-top.t-is-half-round-dark .t-back-top__icon {
margin: 0;
border-radius: 0;
background-color: transparent;
}
.t-back-top.t-is-half-round .t-back-top__text,
.t-back-top.t-is-half-round-dark .t-back-top__text {
padding: 0;
margin-left: 8rpx;
width: 2em;
}
.t-back-top__text {
font-size: 20rpx;
color: #666;
line-height: 24rpx;
}
.t-back-top__icon {
display: flex;
justify-content: center;
align-items: center;
color: #666;
font-size: 32rpx;
}
import { TdBackTopProps } from './type';
declare const props: TdBackTopProps;
export default props;
const props = {
externalClasses: {
type: Array,
},
fixed: {
type: Boolean,
value: true,
},
icon: {
type: String,
value: 'backtop',
},
text: {
type: String,
value: '',
},
theme: {
type: String,
value: 'round',
},
};
export default props;
export interface TdBackTopProps {
externalClasses?: {
type: ArrayConstructor;
value?: ['t-class', 't-class-icon', 't-class-text'];
required?: boolean;
};
fixed?: {
type: BooleanConstructor;
value?: boolean;
required?: boolean;
};
icon?: {
type: StringConstructor;
value?: string;
required?: boolean;
};
text?: {
type: StringConstructor;
value?: string;
required?: boolean;
};
theme?: {
type: StringConstructor;
value?: 'round' | 'half-round' | 'round-dark' | 'half-round-dark';
required?: boolean;
};
}
---
title: Badge 徽标
description: 用于告知用户,该区域的状态变化或者待处理任务的数量。
spline: data
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
## 引入
全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-badge": "tdesign-miniprogram/badge/badge"
}
```
## 代码演示
### 普通徽标
<img src="https://tdesign.gtimg.com/miniprogram/readme/badge-1.png" width="375px" height="50%">
{{ base }}
### 按钮徽标
{{ button }}
### 单行徽标
{{ cell }}
### 标签栏徽标
<img src="https://tdesign.gtimg.com/miniprogram/readme/badge-3.png" width="375px" height="50%">
{{ tab-item }}
## API
### Badge Props
| 名称 | 类型 | 默认值 | 说明 | 必传 |
| ---------------- | ---------------------- | ------ | ----------------------------------------------------------------------------------------------------------------- | -------- |
| color | String | - | 颜色 | N |
| content | String | - | 徽标内容,示例:`content='自定义内容'`。也可以使用默认插槽定义 | N |
| count | String / Number / Slot | 0 | 徽标右上角内容。可以是数字,也可以是文字。如:'new'/3/99+。特殊:值为空表示使用插槽渲染 | N |
| dot | Boolean | false | 是否为红点 | N |
| external-classes | Array | - | 组件类名,分别用于设置外层元素、默认内容、右上角内容等元素类名。`['t-class', 't-class-content', 't-class-count']` | N |
| max-count | Number | 99 | 封顶的数字值 | N |
| offset | Array | - | 设置状态点的位置偏移,示例:[-10, 20]['10em', '8rem']。TS 类型:`Array<string | number>` | N |
| shape | String | circle | 形状。可选项:circle/square/round/ribbon | N |
| show-zero | Boolean | false | 当数值为 0 时,是否展示徽标 | N |
| size | String | medium | 尺寸。可选项:small/medium | N |
import { SuperComponent } from '../common/src/index';
import type { TdBadgeProps } from './type';
export interface BadgeProps extends TdBadgeProps {
}
export default class Badge extends SuperComponent {
options: {
multipleSlots: boolean;
};
externalClasses: string[];
properties: TdBadgeProps;
data: {
classPrefix: string;
value: string;
};
}
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { SuperComponent, wxComponent } from '../common/src/index';
import config from '../common/config';
import props from './props';
const { prefix } = config;
const name = `${prefix}-badge`;
let Badge = class Badge extends SuperComponent {
constructor() {
super(...arguments);
this.options = {
multipleSlots: true,
};
this.externalClasses = [`${prefix}-class`, `${prefix}-class-count`, `${prefix}-class-content`];
this.properties = props;
this.data = {
classPrefix: name,
value: '',
};
}
};
Badge = __decorate([
wxComponent()
], Badge);
export default Badge;
{
"component": true,
"usingComponents": {}
}
<wxs src="./badge.wxs" module="this" />
<view class="{{this.getBadgeOuterClass({shape})}} t-class">
<view class="{{classPrefix}}__content t-class-content">
<slot wx:if="{{!content}}" class="{{classPrefix}}__content-slot" />
<text wx:else class="{{classPrefix}}__content-text">{{content}}</text>
</view>
<view
wx:if="{{count !== 'slot' && this.isShowBadge({dot,count,showZero})}}"
class="{{this.getBadgeInnerClass({dot, size, shape, count})}} t-has-count t-class-count"
style="{{this.getBadgeStyles({color, offset})}}"
>{{ this.getBadgeValue({dot, count, maxCount}) }}
</view>
<slot name="count" wx:if="{{count === 'slot' || !count}}" />
</view>
var getBadgeValue = function (props) {
if (props.dot) {
return '';
}
if (isNaN(props.count) || isNaN(props.maxCount)) {
return props.count;
}
return parseInt(props.count) > props.maxCount ? props.maxCount + '+' : props.count;
};
var hasUnit = function (unit) {
return (
unit.indexOf('px') > 0 ||
unit.indexOf('rpx') > 0 ||
unit.indexOf('em') > 0 ||
unit.indexOf('rem') > 0 ||
unit.indexOf('%') > 0 ||
unit.indexOf('vh') > 0 ||
unit.indexOf('vm') > 0
);
};
var getBadgeStyles = function (props) {
var styleStr = '';
if (props.color) {
styleStr += 'background:' + props.color + ';';
}
if (props.offset[0]) {
styleStr += 'top:' + (hasUnit(props.offset[0].toString()) ? props.offset[0] : props.offset[0] + 'px') + ';';
}
if (props.offset[1]) {
styleStr += 'right:' + (hasUnit(props.offset[1].toString()) ? props.offset[1] : props.offset[1] + 'px') + ';';
}
return styleStr;
};
var getBadgeOuterClass = function (props) {
var baseClass = 't-badge';
var classNames = [baseClass, props.shape === 'ribbon' ? baseClass + '__ribbon--outer' : ''];
return classNames.join(' ');
};
var getBadgeInnerClass = function (props) {
var baseClass = 't-badge';
var classNames = [
baseClass + '--basic',
props.dot ? baseClass + '--dot' : '',
props.size === 'small' ? baseClass + '--small' : '',
baseClass + '--' + props.shape,
!props.dot && props.count ? baseClass + '--count' : '',
];
return classNames.join(' ');
};
var isShowBadge = function (props) {
if (props.dot) {
return true;
}
if (!props.showZero && !isNaN(props.count) && parseInt(props.count) === 0) {
return false;
}
return true;
};
module.exports.getBadgeValue = getBadgeValue;
module.exports.getBadgeStyles = getBadgeStyles;
module.exports.getBadgeOuterClass = getBadgeOuterClass;
module.exports.getBadgeInnerClass = getBadgeInnerClass;
module.exports.isShowBadge = isShowBadge;
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment