wanggang
2 years ago
185 changed files with 30361 additions and 518 deletions
@ -1,410 +0,0 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<!-- <image mode="widthFix" class="loginimg" src="../../static/login.png"></image> --> |
|||
<image mode="widthFix" class="loginimg" src="../../static/icons_ui/login_bg.png"></image> |
|||
<view class="login_title"> |
|||
<text>您好，欢迎使用</text><br> |
|||
WMS仓库管理系统 |
|||
</view> |
|||
<view class="bgf login_wrap"> |
|||
<view class="loginbox"> |
|||
<form > |
|||
<view class="mytab"> |
|||
<!-- <view class="mytabline" :class="tapstyle == 1?'active':''" @click="tapchenge(1)">扫码登录</view> --> |
|||
<view class="mytabline" :class="tapstyle == 2?'active_in':''" @click="tapchenge(2)">密码登录</view> |
|||
</view> |
|||
|
|||
<!-- <view class="mybox" v-if="tapstyle == 1"> |
|||
<view class="conone"> |
|||
<uni-easyinput prefixIcon="scan" class="uni-input" type="password" v-model="smloginmsg" |
|||
name="nickname" placeholder="扫码登录"></uni-easyinput> |
|||
</view> |
|||
</view> --> |
|||
<view class="mybox" v-if="tapstyle == 2"> |
|||
<view class="conone"> |
|||
<view class="title uni-flex"> |
|||
<image class="icon_normal" src="../../static/icons_ui/icon_login_user.svg"></image> |
|||
用户名 |
|||
</view> |
|||
<view> |
|||
<input class="uni-input" placeholder="请输入用户名" v-model="username" /> |
|||
</view> |
|||
</view> |
|||
<view class="conone"> |
|||
<view class="title uni-flex"> |
|||
<image class="icon_normal" src="../../static/icons_ui/icon_login_password.svg"></image> |
|||
密码 |
|||
</view> |
|||
<view class="uni-input-wrapper"> |
|||
<input class="uni-input" placeholder="请输入密码" :password="showPassword" |
|||
v-model="password" /> |
|||
<text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']" |
|||
@click="changePassword"></text> |
|||
</view> |
|||
<!-- <view class="uni-input-wrapper"> |
|||
<input class="uni-input" type="password" name="password" |
|||
:password="showPassword" |
|||
placeholder="请输入密码" v-model="password"></input> |
|||
<text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']" @click="changePassword"></text> |
|||
</view> --> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
<view class="loginbtnbox"> |
|||
<button @click="handelerlogin()" class="loginbtn">登录</button> |
|||
</view> |
|||
</form> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
getlogin |
|||
} from '@/api/index.js'; |
|||
import jwtDecode from 'jwt-decode' |
|||
// import qs from 'qs' |
|||
import { |
|||
mapState, |
|||
mapMutations |
|||
} from 'vuex' |
|||
// import VUE from 'vue' |
|||
// import Base64 from 'base-64'; |
|||
// import vue from vue |
|||
export default { |
|||
data() { |
|||
return { |
|||
smloginmsg: "", |
|||
username: "", |
|||
password: "", |
|||
tapstyle: 2, |
|||
loading: false, |
|||
showPassword: true |
|||
} |
|||
}, |
|||
computed: mapState(['forcedLogin', 'hasLogin']), |
|||
mounted() { |
|||
uni.clearStorage(); //清除缓存 |
|||
if (process.env.NODE_ENV === 'development') { |
|||
this.username = "admin" |
|||
this.password = "1234qwer!@#$QWER"; |
|||
} |
|||
uni.setNavigationBarColor({ |
|||
frontColor: '#ffffff', |
|||
backgroundColor: "#476DF5 !important" |
|||
}) |
|||
}, |
|||
onLoad() {}, |
|||
methods: { |
|||
...mapMutations(['login']), |
|||
handelerlogin() { |
|||
if (this.username === '') { |
|||
uni.showToast({ |
|||
title: '用户名不能为空', |
|||
icon: 'none', |
|||
mask: true |
|||
}) |
|||
} else if (this.password === '') { |
|||
uni.showToast({ |
|||
title: '密码不能为空', |
|||
icon: 'none', |
|||
mask: true |
|||
}) |
|||
} else { |
|||
// console.log("用户名：", this.username, "密码：", this.password, this.tapstyle, this.smloginmsg) |
|||
let logininfo = { |
|||
grant_type: 'password', |
|||
client_id: 'Auth_App', |
|||
client_secret: '1q2w3E*', |
|||
username: "", |
|||
password: "" |
|||
} |
|||
if (this.tapstyle == 2) //密码登录 |
|||
{ |
|||
logininfo.username = this.username; |
|||
logininfo.password = this.password |
|||
} else if (this.tapstyle == 1) { |
|||
// let arr = Base64.decode(this.smloginmsg).split(':') |
|||
// logininfo.username = arr[0]; |
|||
// logininfo.password = arr[1] |
|||
} |
|||
let params = JSON.stringify(logininfo); |
|||
console.log('params', params); |
|||
// let params = qs.stringify(logininfo) |
|||
this.toLogin(params); |
|||
} |
|||
}, |
|||
toLogin(params) { |
|||
uni.showLoading({ |
|||
title: '登录中...' |
|||
}) |
|||
localStorage.setItem("token_type", 'application/json') |
|||
getlogin(params).then((res) => { |
|||
console.log("res", res) |
|||
this.setStorage(res); |
|||
if (res) { |
|||
this.toMain(res); |
|||
} else { |
|||
uni.showToast({ |
|||
title: '请求失败', |
|||
icon: 'none', |
|||
mask: true |
|||
}) |
|||
} |
|||
uni.hideLoading(); |
|||
}).catch((err) => { |
|||
this.loading = false; |
|||
if (err.message.includes('token返回的res为空')) { |
|||
uni.showToast({ |
|||
title: '无法连接到认证服务器!', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}); |
|||
} else { |
|||
uni.showToast({ |
|||
title: err.message, |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}); |
|||
} |
|||
|
|||
uni.hideLoading(); |
|||
}) |
|||
// this.loading = false; |
|||
// uni.showToast({ |
|||
// title: eror.message, |
|||
// icon: 'none', |
|||
// duration: 2000 |
|||
// }); |
|||
// if (eror=='token返回的res为空') { |
|||
// uni.showToast({ |
|||
// title: '无法连接到认证服务器!', |
|||
// icon: 'none', |
|||
// duration: 2000 |
|||
// }); |
|||
// } else { |
|||
// uni.showToast({ |
|||
// title: err.message, |
|||
// icon: 'none', |
|||
// duration: 2000 |
|||
// }); |
|||
// } |
|||
// getlogin(params).then(res => { |
|||
// console.log("请求getlogin", res) |
|||
// console.log("res", res) |
|||
// this.setStorage(res); |
|||
// if (res) { |
|||
// this.toMain(res); |
|||
// } else { |
|||
// uni.showToast({ |
|||
// title: '请求失败', |
|||
// icon: 'none', |
|||
// mask: true |
|||
// }) |
|||
// } |
|||
// uni.hideLoading(); |
|||
// }).catch((err) => { |
|||
// this.loading = false; |
|||
// // if (err.message.includes('token返回的res为空')) { |
|||
// // uni.showToast({ |
|||
// // title: '无法连接到认证服务器!', |
|||
// // icon: 'none', |
|||
// // duration: 2000 |
|||
// // }); |
|||
// // } else { |
|||
// // uni.showToast({ |
|||
// // title: err.message, |
|||
// // icon: 'none', |
|||
// // duration: 2000 |
|||
// // }); |
|||
// // } |
|||
|
|||
// uni.hideLoading(); |
|||
// }) |
|||
}, |
|||
|
|||
setStorage(res) { |
|||
sessionStorage.setItem('isLogin', 1); //登录判断 |
|||
sessionStorage.setItem('hasLogin', true); |
|||
localStorage.setItem("token_type", res.token_type + ' ' + res.access_token) |
|||
localStorage.setItem('userName', this.username); |
|||
localStorage.setItem('company', this.$companyCode); |
|||
localStorage.setItem('warehouseCode', this.$warehouseCode); |
|||
var decode = jwtDecode(localStorage.getItem('token_type')) |
|||
localStorage.setItem('userId', decode.sub); |
|||
}, |
|||
clearStorage(res) { |
|||
sessionStorage.setItem('isLogin', 0); //登录判断 |
|||
sessionStorage.setItem('hasLogin', false); |
|||
localStorage.setItem("token_type", "") |
|||
}, |
|||
|
|||
toMain(user) { |
|||
console.log("user", user) |
|||
this.login(user); |
|||
uni.switchTab({ |
|||
url: '/pages/index/index' |
|||
}); |
|||
|
|||
/** |
|||
* 强制登录时使用reLaunch方式跳 |
|||
* 返回首页也是使用reLaunch方式 |
|||
*/ |
|||
// if (this.forcedLogin) //强制登录 |
|||
// { |
|||
// uni.reLaunch({ |
|||
// url: '../index/index' |
|||
// }) |
|||
// } else { |
|||
// uni.navigateBack() |
|||
// } |
|||
}, |
|||
tapchenge(e) { |
|||
this.tapstyle = e |
|||
}, |
|||
onchange(e) { |
|||
const value = e.detail.value |
|||
}, |
|||
onCompanyChange(company) { |
|||
if (company === 'IACHZ') {} else { |
|||
|
|||
} |
|||
}, |
|||
// onBackPress(e) { |
|||
// console.log("监听返回按钮事件", e); |
|||
// // 此处一定要return为true，否则页面不会返回到指定路径 |
|||
// return true; |
|||
// } |
|||
changePassword: function() { |
|||
this.showPassword = !this.showPassword; |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page { |
|||
background-color: #fff; |
|||
} |
|||
|
|||
.content { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background-color: #FFFFFF; |
|||
} |
|||
|
|||
.cs { |
|||
margin-bottom: 20upx; |
|||
} |
|||
|
|||
.mytab { |
|||
display: flex; |
|||
} |
|||
|
|||
.mytabline { |
|||
flex: 1; |
|||
text-align: center; |
|||
padding: 20rpx 0; |
|||
color: #666; |
|||
position: relative; |
|||
font-size: 0.875rem; |
|||
} |
|||
|
|||
.active_in { |
|||
color: #101010; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.active_in::after { |
|||
content: ""; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
height: 8rpx; |
|||
background-color: #007AFF; |
|||
width: 40rpx; |
|||
border-radius: 8rpx; |
|||
} |
|||
|
|||
.loginbox { |
|||
box-sizing: border-box; |
|||
padding: 30rpx; |
|||
|
|||
} |
|||
|
|||
.loginimg { |
|||
width: 100%; |
|||
} |
|||
|
|||
.logo { |
|||
height: 200rpx; |
|||
width: 200rpx; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
margin-bottom: 50rpx; |
|||
} |
|||
|
|||
.conone { |
|||
margin: 30rpx 0; |
|||
align-items: center; |
|||
} |
|||
|
|||
.conone .uni-input-wrapper { |
|||
position: relative; |
|||
} |
|||
|
|||
.conone .uni-input { |
|||
background-color: #F7F9FF; |
|||
height: 90rpx; |
|||
line-height: 90rpx; |
|||
padding: 0 0 0 20rpx; |
|||
} |
|||
|
|||
.conone .title { |
|||
font-size: .875rem; |
|||
align-items: center; |
|||
margin-bottom: 20rpx; |
|||
letter-spacing: 1rpx; |
|||
} |
|||
|
|||
.conone .title image { |
|||
margin-right: 6rpx; |
|||
} |
|||
|
|||
.uni-easyinput .is-input-border { |
|||
border-color: transparent !important; |
|||
} |
|||
|
|||
.loginbtnbox { |
|||
margin-top: 40rpx; |
|||
} |
|||
|
|||
.loginbtn { |
|||
color: #fff; |
|||
font-size: 0.875rem; |
|||
height: 100rpx; |
|||
line-height: 100rpx; |
|||
background: #5d66de; |
|||
border-radius: 8rpx; |
|||
border: none; |
|||
outline: none; |
|||
} |
|||
|
|||
.conone .uni-icon { |
|||
float: right; |
|||
position: absolute; |
|||
right: 20rpx; |
|||
color: #ccc; |
|||
font-size: 1.25rem; |
|||
} |
|||
|
|||
.conone .uni-eye-active { |
|||
color: #5a7cf3; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,135 @@ |
|||
## 1.4.5（2022-12-05） |
|||
* 【修复】`u-row`、`u-col` 使用 `@click.stop` 会报错的问题，同时建议改用 `@click.native.stop` 来代替 `@click.stop` |
|||
## 1.4.4（2022-11-12） |
|||
* 【修复】`u-calendar` `u-modal` `u-picker` `u-popup` 组件在页面进入后马上需要弹窗时，无法正常弹窗的问题。 |
|||
## 1.4.3（2022-10-22） |
|||
* 【优化】部分组件的细节 |
|||
## 1.4.2（2022-10-15） |
|||
* 【修复】`1.4.1` 引出的 `u-subsection` 的部分问题 |
|||
## 1.4.1（2022-10-14） |
|||
* 【修复】`u-count-to` 若设置了千分位符合，会错误显示-的问题 |
|||
* 【修复】`u-subsection` 部分细节问题 |
|||
## 1.4.0（2022-10-07） |
|||
* 【修复】`u-section` 点击更多，会触发两次事件的问题 |
|||
* 【修复】`loadMore` 加载更多，icon-type为circle不会转动的问题 |
|||
* 【修复】`u-subsection` current 有转入值时，变更值，样式不更新（需用 `v-model="current"` 代替 `:current="current"`） |
|||
## 1.3.13（2022-09-28） |
|||
* 【修复】`u-avatar-cropper` 组件在vue3中会报错的问题。 |
|||
## 1.3.12（2022-08-30） |
|||
* 【优化】`u-keyboard` 组件内部细节。 |
|||
## 1.3.11（2022-08-30） |
|||
* 【修复】`u-subsection` 组件的 `list` 属性不支持动态修改的问题。 |
|||
## 1.3.10（2022-07-30） |
|||
* 【优化】上传组件部分细节 |
|||
## 1.3.9（2022-07-07） |
|||
* 【更新】省市区数据源 |
|||
* 【优化】`u-subsection` 组件支持在右上角显示数字角标 |
|||
```html |
|||
<template> |
|||
<u-subsection :list="list"></u-subsection> |
|||
</template> |
|||
``` |
|||
|
|||
```js |
|||
export default { |
|||
data() { |
|||
return { |
|||
list: [ |
|||
{ |
|||
name: '待发货', |
|||
num: 10 |
|||
}, |
|||
{ |
|||
name: '待付款', |
|||
num: 5 |
|||
}, |
|||
{ |
|||
name: '待评价', |
|||
num: 15 |
|||
} |
|||
] |
|||
} |
|||
} |
|||
} |
|||
``` |
|||
## 1.3.8（2022-06-13） |
|||
* 【优化】组件 `u-icon`，使之更方便的兼容第三方icon（满足规则自动计算customPrefix） |
|||
**规则如下：** |
|||
* 当 `name` 中包含 `-icon-` 字符串时 |
|||
* 如 `vk-icon-goods`，则组件的 `customPrefix` 属性自动识别为 `vk-icon` ，`name`属性 自动识别为 `goods` |
|||
* 如 `vk-2-icon-goods-list`，则组件的 `customPrefix` 属性自动识别为 `vk-2-icon` ，`name`属性 自动识别为 `goods-list` |
|||
## 1.3.7（2022-06-10） |
|||
* 【优化】组件 `u-action-sheet` `u-calendar` `u-dropdown-item` `u-field` `u-input` `u-keyboard` `u-modal` `u-radio-group` `u-rate` `u-search` `u-slider` `u-switch` `u-tabbar` `u-waterfall` 在 `vue3` 模式下的细节问题。 |
|||
## 1.3.6（2022-06-10） |
|||
* 【优化】组件 `u-action-sheet` `u-calendar` `u-dropdown-item` `u-field` `u-input` `u-keyboard` `u-modal` `u-radio-group` `u-rate` `u-search` `u-slider` `u-switch` `u-tabbar` `u-waterfall` 在 `vue3` 模式下的细节问题。 |
|||
## 1.3.5（2022-05-28） |
|||
* 【优化】组件 `u-mask` `u-popup` `u-select` `u-modal` `u-keyboard` `u-calendar` `u-action-sheet` `u-picker` 均新增 `blur` 属性，可用于设置弹出遮罩的模糊度，默认为0（不模糊） |
|||
*  |
|||
## 1.3.4（2022-05-03） |
|||
* 【修复】`u-tabs` 组件细节问题。 |
|||
## 1.1.4（2022-03-22） |
|||
* 【修复】`u-field` 组件 `arrowDirection` 属性无效的问题。 |
|||
## 1.1.3（2022-03-21） |
|||
* 【优化】部分细节。 |
|||
## 1.1.2（2022-03-21） |
|||
* 【优化】部分细节。 |
|||
## 1.1.1（2022-03-17） |
|||
* 【优化】部分细节。 |
|||
## 1.1.0（2022-03-12） |
|||
* 【重要】`u-picker` 组件新增 `regionDiscern` 方法 智能识别省市区街道地址 |
|||
如将字符串 `浙江省杭州市西湖区希望路1333弄是啊我庭12号楼1203` 中识别为 |
|||
```json |
|||
{ |
|||
"province": { |
|||
"code": "330000", |
|||
"name": "浙江省" |
|||
}, |
|||
"city": { |
|||
"code": "330100", |
|||
"name": "杭州市" |
|||
}, |
|||
"area": { |
|||
"code": "330106", |
|||
"name": "西湖区" |
|||
}, |
|||
"address": "龙井路1号", |
|||
"formatted_address": "浙江省杭州市西湖区龙井路1号" |
|||
} |
|||
``` |
|||
而组件的 `addressDiscern` 方法还可以识别收货信息，如 `张三 13888888888 上海市嘉定区希望路1333弄是啊我庭12号楼1203` 中识别姓名、手机号、地址（支持多种格式） |
|||
## 1.0.13（2022-03-12） |
|||
* 【优化】部分细节。 |
|||
## 1.0.12（2022-03-09） |
|||
* 【修复】`u-radio-group` 在 vue3 模式下，设置默认值可能会无效的问题。 |
|||
## 1.0.11（2022-03-07） |
|||
* 【优化】部分细节。 |
|||
## 1.0.10（2022-03-05） |
|||
* 【修复】`u-radio` 中的值相等的判断 == 改为 === |
|||
* 【优化】部分注释的错别字。 |
|||
## 1.0.9（2022-03-03） |
|||
* 【修复】`u-parse` 在 vue3模式下编译到app无法正常显示的问题。 |
|||
## 1.0.8（2022-02-26） |
|||
* 【优化】`u-form` 组件新增2个属性 `inputAlign` 和 `clearable` 用于统一设置表单内所有 `u-input` 组件的对应属性默认值 |
|||
* 【优化】更新城市数据源信息 |
|||
## 1.0.7（2022-02-25） |
|||
* 【重要】`u-picker` 组件新增 `addressDiscern` 方法 智能识别收货信息 |
|||
|
|||
如在 `张三 13888888888 上海市嘉定区希望路1333弄是啊我庭12号楼1203` 中识别姓名、手机号、地址（支持多种格式） |
|||
即使这样的字符串也能识别 `!!!!~~~$张三~~~上海市嘉定区希望路1333弄是啊我庭12号楼1203【【【【13888888888】` |
|||
## 1.0.6（2022-02-24） |
|||
* 【优化】`u-form-item` 组件的 `prop` 属性支持 a.b 形式 |
|||
## 1.0.5（2022-01-11） |
|||
* 【修复】`u-sticky` 组件 在微信小程序中无法正常吸顶的问题 |
|||
## 1.0.4（2021-12-31） |
|||
* 【优化】`u-dropdown-item` 组件 0和"" 无法区分的问题。 |
|||
* 【修复】`u-modal` 在Vue3版本中使用了mask-close-able属性无效的问题 |
|||
## 1.0.3（2021-12-20） |
|||
【优化】u-icon在微信小程序下可能会显示null字符串的问题 |
|||
## 1.0.2（2021-12-09） |
|||
* 1、【优化】`u-button` 组件新增 `timerId` 属性 |
|||
* 之前的效果是：所有按钮一定时间内只能点击1次（`共用计算时间`）导致点击按钮A后无法马上点击按钮B |
|||
* 优化的效果是：每个按钮一定时间内只能点击1次（`分开计算时间`）且支持设置相同的 timerId 来达到指定按钮 `共用计算时间` |
|||
## 1.0.1（2021-11-22） |
|||
* 修复 u-parse 组件在微信小程序上的显示问题。 |
|||
## 1.0.0（2021-11-18） |
|||
uView Vue3.0 横空出世，继承uView1.0意志，再战江湖，风云再起！by vk 2021-11-18 |
|||
@ -0,0 +1,246 @@ |
|||
<template> |
|||
<u-popup |
|||
:blur="blur" |
|||
mode="bottom" |
|||
:border-radius="borderRadius" |
|||
:popup="false" |
|||
v-model="popupValue" |
|||
:maskCloseAble="maskCloseAble" |
|||
length="auto" |
|||
:safeAreaInsetBottom="safeAreaInsetBottom" |
|||
@close="popupClose" |
|||
:z-index="uZIndex" |
|||
> |
|||
<view class="u-tips u-border-bottom" v-if="tips.text" :style="[tipsStyle]"> |
|||
<text>{{ tips.text }}</text> |
|||
</view> |
|||
<block v-for="(item, index) in list" :key="index"> |
|||
<view |
|||
@touchmove.stop.prevent |
|||
@tap="itemClick(index)" |
|||
:style="[itemStyle(index)]" |
|||
class="u-action-sheet-item u-line-1" |
|||
:class="[index < list.length - 1 ? 'u-border-bottom' : '']" |
|||
:hover-stay-time="150" |
|||
> |
|||
<text>{{ item[labelName] }}</text> |
|||
<text class="u-action-sheet-item__subtext u-line-1" v-if="item.subText"> |
|||
{{ item.subText }} |
|||
</text> |
|||
</view> |
|||
</block> |
|||
<view class="u-gab" v-if="cancelBtn"></view> |
|||
<view |
|||
@touchmove.stop.prevent |
|||
class="u-actionsheet-cancel u-action-sheet-item" |
|||
hover-class="u-hover-class" |
|||
:hover-stay-time="150" |
|||
v-if="cancelBtn" |
|||
@tap="close" |
|||
> |
|||
{{ cancelText }} |
|||
</view> |
|||
</u-popup> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* actionSheet 操作菜单 |
|||
* @description 本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。 |
|||
* @tutorial https://www.uviewui.com/components/actionSheet.html |
|||
* @property {Array<Object>} list 按钮的文字数组，见官方文档示例 |
|||
* @property {Object} tips 顶部的提示文字，见官方文档示例 |
|||
* @property {String} cancel-text 取消按钮的提示文字 |
|||
* @property {Boolean} cancel-btn 是否显示底部的取消按钮（默认true） |
|||
* @property {Number String} border-radius 弹出部分顶部左右的圆角值，单位rpx（默认0） |
|||
* @property {Boolean} mask-close-able 点击遮罩是否可以关闭（默认true） |
|||
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false） |
|||
* @property {Number String} z-index z-index值（默认1075） |
|||
* @property {String} cancel-text 取消按钮的提示文字 |
|||
* @event {Function} click 点击ActionSheet列表项时触发 |
|||
* @event {Function} close 点击取消按钮时触发 |
|||
* @example <u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet> |
|||
*/ |
|||
|
|||
export default { |
|||
name: "u-action-sheet", |
|||
emits: ["update:modelValue", "input", "click", "close"], |
|||
props: { |
|||
// 通过双向绑定控制组件的弹出与收起 |
|||
value: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
modelValue: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 点击遮罩是否可以关闭actionsheet |
|||
maskCloseAble: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 按钮的文字数组，可以自定义颜色和字体大小，字体单位为rpx |
|||
list: { |
|||
type: Array, |
|||
default() { |
|||
// 如下 |
|||
// return [{ |
|||
// text: '确定', |
|||
// color: '', |
|||
// fontSize: '' |
|||
// }] |
|||
return []; |
|||
} |
|||
}, |
|||
// 顶部的提示文字 |
|||
tips: { |
|||
type: Object, |
|||
default() { |
|||
return { |
|||
text: "", |
|||
color: "", |
|||
fontSize: "26" |
|||
}; |
|||
} |
|||
}, |
|||
// 底部的取消按钮 |
|||
cancelBtn: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距 |
|||
safeAreaInsetBottom: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 弹出的顶部圆角值 |
|||
borderRadius: { |
|||
type: [String, Number], |
|||
default: 0 |
|||
}, |
|||
// 弹出的z-index值 |
|||
zIndex: { |
|||
type: [String, Number], |
|||
default: 0 |
|||
}, |
|||
// 取消按钮的文字提示 |
|||
cancelText: { |
|||
type: String, |
|||
default: "取消" |
|||
}, |
|||
// 自定义label属性名 |
|||
labelName: { |
|||
type: String, |
|||
default: "text" |
|||
}, |
|||
// 遮罩的模糊度 |
|||
blur: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
} |
|||
}, |
|||
computed: { |
|||
valueCom() { |
|||
// #ifndef VUE3 |
|||
return this.value; |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
return this.modelValue; |
|||
// #endif |
|||
}, |
|||
// 顶部提示的样式 |
|||
tipsStyle() { |
|||
let style = {}; |
|||
if (this.tips.color) style.color = this.tips.color; |
|||
if (this.tips.fontSize) style.fontSize = this.tips.fontSize + "rpx"; |
|||
return style; |
|||
}, |
|||
// 操作项目的样式 |
|||
itemStyle() { |
|||
return index => { |
|||
let style = {}; |
|||
if (this.list[index].color) style.color = this.list[index].color; |
|||
if (this.list[index].fontSize) style.fontSize = this.list[index].fontSize + "rpx"; |
|||
// 选项被禁用的样式 |
|||
if (this.list[index].disabled) style.color = "#c0c4cc"; |
|||
return style; |
|||
}; |
|||
}, |
|||
uZIndex() { |
|||
// 如果用户有传递z-index值，优先使用 |
|||
return this.zIndex ? this.zIndex : this.$u.zIndex.popup; |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
popupValue: false |
|||
}; |
|||
}, |
|||
watch: { |
|||
valueCom(v1, v2) { |
|||
this.popupValue = v1; |
|||
} |
|||
}, |
|||
methods: { |
|||
// 点击取消按钮 |
|||
close() { |
|||
// 发送input事件，并不会作用于父组件，而是要设置组件内部通过props传递的value参数 |
|||
// 这是一个vue发送事件的特殊用法 |
|||
this.popupClose(); |
|||
this.$emit("close"); |
|||
}, |
|||
// 弹窗关闭 |
|||
popupClose() { |
|||
this.$emit("input", false); |
|||
this.$emit("update:modelValue", false); |
|||
}, |
|||
// 点击某一个item |
|||
itemClick(index) { |
|||
// disabled的项禁止点击 |
|||
if (this.list[index].disabled) return; |
|||
this.$emit("click", index); |
|||
this.$emit("input", false); |
|||
this.$emit("update:modelValue", false); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-tips { |
|||
font-size: 26rpx; |
|||
text-align: center; |
|||
padding: 34rpx 0; |
|||
line-height: 1.5; |
|||
color: $u-tips-color; |
|||
} |
|||
|
|||
.u-action-sheet-item { |
|||
@include vue-flex; |
|||
line-height: 1; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 32rpx; |
|||
padding: 34rpx 0; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.u-action-sheet-item__subtext { |
|||
font-size: 24rpx; |
|||
color: $u-tips-color; |
|||
margin-top: 20rpx; |
|||
} |
|||
|
|||
.u-gab { |
|||
height: 12rpx; |
|||
background-color: rgb(234, 234, 236); |
|||
} |
|||
|
|||
.u-actionsheet-cancel { |
|||
color: $u-main-color; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,257 @@ |
|||
<template> |
|||
<view class="u-alert-tips" v-if="show" :class="[ |
|||
!show ? 'u-close-alert-tips': '', |
|||
type ? 'u-alert-tips--bg--' + type + '-light' : '', |
|||
type ? 'u-alert-tips--border--' + type + '-disabled' : '', |
|||
]" :style="{ |
|||
backgroundColor: bgColor, |
|||
borderColor: borderColor |
|||
}"> |
|||
<view class="u-icon-wrap"> |
|||
<u-icon v-if="showIcon" :name="uIcon" :size="description ? 40 : 32" class="u-icon" :color="uIconType" :custom-style="iconStyle"></u-icon> |
|||
</view> |
|||
<view class="u-alert-content" @tap.stop="click"> |
|||
<view class="u-alert-title" :style="[uTitleStyle]"> |
|||
{{title}} |
|||
</view> |
|||
<view v-if="description" class="u-alert-desc" :style="[descStyle]"> |
|||
{{description}} |
|||
</view> |
|||
</view> |
|||
<view class="u-icon-wrap"> |
|||
<u-icon @click="close" v-if="closeAble && !closeText" hoverClass="u-type-error-hover-color" name="close" color="#c0c4cc" |
|||
:size="22" class="u-close-icon" :style="{ |
|||
top: description ? '18rpx' : '24rpx' |
|||
}"></u-icon> |
|||
</view> |
|||
<text v-if="closeAble && closeText" class="u-close-text" :style="{ |
|||
top: description ? '18rpx' : '24rpx' |
|||
}">{{closeText}}</text> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* alertTips 警告提示 |
|||
* @description 警告提示，展现需要关注的信息 |
|||
* @tutorial https://uviewui.com/components/alertTips.html |
|||
* @property {String} title 显示的标题文字 |
|||
* @property {String} description 辅助性文字，颜色比title浅一点，字号也小一点，可选 |
|||
* @property {String} type 关闭按钮(默认为叉号icon图标) |
|||
* @property {String} icon 图标名称 |
|||
* @property {Object} icon-style 图标的样式，对象形式 |
|||
* @property {Object} title-style 标题的样式，对象形式 |
|||
* @property {Object} desc-style 描述的样式，对象形式 |
|||
* @property {String} close-able 用文字替代关闭图标，close-able为true时有效 |
|||
* @property {Boolean} show-icon 是否显示左边的辅助图标 |
|||
* @property {Boolean} show 显示或隐藏组件 |
|||
* @event {Function} click 点击组件时触发 |
|||
* @event {Function} close 点击关闭按钮时触发 |
|||
*/ |
|||
export default { |
|||
name: 'u-alert-tips', |
|||
emits: ["click", "close"], |
|||
props: { |
|||
// 显示文字 |
|||
title: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 主题，success/warning/info/error |
|||
type: { |
|||
type: String, |
|||
default: 'warning' |
|||
}, |
|||
// 辅助性文字 |
|||
description: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 是否可关闭 |
|||
closeAble: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 关闭按钮自定义文本 |
|||
closeText: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 是否显示图标 |
|||
showIcon: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 文字颜色，如果定义了color值，icon会失效 |
|||
color: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 背景颜色 |
|||
bgColor: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 边框颜色 |
|||
borderColor: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 是否显示 |
|||
show: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 左边显示的icon |
|||
icon: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// icon的样式 |
|||
iconStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {} |
|||
} |
|||
}, |
|||
// 标题的样式 |
|||
titleStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {} |
|||
} |
|||
}, |
|||
// 描述文字的样式 |
|||
descStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {} |
|||
} |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
} |
|||
}, |
|||
computed: { |
|||
uTitleStyle() { |
|||
let style = {}; |
|||
// 如果有描述文字的话，标题进行加粗 |
|||
style.fontWeight = this.description ? 500 : 'normal'; |
|||
// 将用户传入样式对象和style合并，传入的优先级比style高，同属性会被覆盖 |
|||
return this.$u.deepMerge(style, this.titleStyle); |
|||
}, |
|||
uIcon() { |
|||
// 如果有设置icon名称就使用，否则根据type主题，推定一个默认的图标 |
|||
return this.icon ? this.icon : this.$u.type2icon(this.type); |
|||
}, |
|||
uIconType() { |
|||
// 如果有设置图标的样式，优先使用，没有的话，则用type的样式 |
|||
return Object.keys(this.iconStyle).length ? '' : this.type; |
|||
} |
|||
}, |
|||
methods: { |
|||
// 点击内容 |
|||
click() { |
|||
this.$emit('click'); |
|||
}, |
|||
// 点击关闭按钮 |
|||
close() { |
|||
this.$emit('close'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-alert-tips { |
|||
@include vue-flex; |
|||
align-items: center; |
|||
padding: 16rpx 30rpx; |
|||
border-radius: 8rpx; |
|||
position: relative; |
|||
transition: all 0.3s linear; |
|||
border: 1px solid #fff; |
|||
|
|||
&--bg--primary-light { |
|||
background-color: $u-type-primary-light; |
|||
} |
|||
|
|||
&--bg--info-light { |
|||
background-color: $u-type-info-light; |
|||
} |
|||
|
|||
&--bg--success-light { |
|||
background-color: $u-type-success-light; |
|||
} |
|||
|
|||
&--bg--warning-light { |
|||
background-color: $u-type-warning-light; |
|||
} |
|||
|
|||
&--bg--error-light { |
|||
background-color: $u-type-error-light; |
|||
} |
|||
|
|||
&--border--primary-disabled { |
|||
border-color: $u-type-primary-disabled; |
|||
} |
|||
|
|||
&--border--success-disabled { |
|||
border-color: $u-type-success-disabled; |
|||
} |
|||
|
|||
&--border--error-disabled { |
|||
border-color: $u-type-error-disabled; |
|||
} |
|||
|
|||
&--border--warning-disabled { |
|||
border-color: $u-type-warning-disabled; |
|||
} |
|||
|
|||
&--border--info-disabled { |
|||
border-color: $u-type-info-disabled; |
|||
} |
|||
} |
|||
|
|||
.u-close-alert-tips { |
|||
opacity: 0; |
|||
visibility: hidden; |
|||
} |
|||
|
|||
.u-icon { |
|||
margin-right: 16rpx; |
|||
} |
|||
|
|||
.u-alert-title { |
|||
font-size: 28rpx; |
|||
color: $u-main-color; |
|||
} |
|||
|
|||
.u-alert-desc { |
|||
font-size: 26rpx; |
|||
text-align: left; |
|||
color: $u-content-color; |
|||
} |
|||
|
|||
.u-close-icon { |
|||
position: absolute; |
|||
top: 20rpx; |
|||
right: 20rpx; |
|||
} |
|||
|
|||
.u-close-hover { |
|||
color: red; |
|||
} |
|||
|
|||
.u-close-text { |
|||
font-size: 24rpx; |
|||
color: $u-tips-color; |
|||
position: absolute; |
|||
top: 20rpx; |
|||
right: 20rpx; |
|||
line-height: 1; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,290 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<view class="cropper-wrapper" :style="{ height: cropperOpt.height + 'px' }"> |
|||
<canvas |
|||
class="cropper" |
|||
:disable-scroll="true" |
|||
@touchstart="touchStart" |
|||
@touchmove="touchMove" |
|||
@touchend="touchEnd" |
|||
:style="{ width: cropperOpt.width, height: cropperOpt.height, backgroundColor: 'rgba(0, 0, 0, 0.8)' }" |
|||
canvas-id="cropper" |
|||
id="cropper" |
|||
></canvas> |
|||
<canvas |
|||
class="cropper" |
|||
:disable-scroll="true" |
|||
:style="{ |
|||
position: 'fixed', |
|||
top: `-${cropperOpt.width * cropperOpt.pixelRatio}px`, |
|||
left: `-${cropperOpt.height * cropperOpt.pixelRatio}px`, |
|||
width: `${cropperOpt.width * cropperOpt.pixelRatio}px`, |
|||
height: `${cropperOpt.height * cropperOpt.pixelRatio}` |
|||
}" |
|||
canvas-id="targetId" |
|||
id="targetId" |
|||
></canvas> |
|||
</view> |
|||
<view class="cropper-buttons safe-area-padding" :style="{ height: bottomNavHeight + 'px' }"> |
|||
<!-- #ifdef H5 --> |
|||
<view class="upload" @tap="uploadTap">选择图片</view> |
|||
<!-- #endif --> |
|||
<!-- #ifndef H5 --> |
|||
<view class="upload" @tap="uploadTap">重新选择</view> |
|||
<!-- #endif --> |
|||
<view class="getCropperImage" @tap="getCropperImage(false)">确定</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import WeCropper from './weCropper.js'; |
|||
export default { |
|||
props: { |
|||
// 裁剪矩形框的样式，其中可包含的属性为lineWidth-边框宽度(单位rpx)，color: 边框颜色， |
|||
// mask-遮罩颜色，一般设置为一个rgba的透明度，如"rgba(0, 0, 0, 0.35)" |
|||
boundStyle: { |
|||
type: Object, |
|||
default() { |
|||
return { |
|||
lineWidth: 4, |
|||
borderColor: 'rgb(245, 245, 245)', |
|||
mask: 'rgba(0, 0, 0, 0.35)' |
|||
}; |
|||
} |
|||
} |
|||
// // 裁剪框宽度，单位rpx |
|||
// rectWidth: { |
|||
// type: [String, Number], |
|||
// default: 400 |
|||
// }, |
|||
// // 裁剪框高度，单位rpx |
|||
// rectHeight: { |
|||
// type: [String, Number], |
|||
// default: 400 |
|||
// }, |
|||
// // 输出图片宽度，单位rpx |
|||
// destWidth: { |
|||
// type: [String, Number], |
|||
// default: 400 |
|||
// }, |
|||
// // 输出图片高度，单位rpx |
|||
// destHeight: { |
|||
// type: [String, Number], |
|||
// default: 400 |
|||
// }, |
|||
// // 输出的图片类型，如果发现裁剪的图片很大，可能是因为设置为了"png"，改成"jpg"即可 |
|||
// fileType: { |
|||
// type: String, |
|||
// default: 'jpg', |
|||
// }, |
|||
// // 生成的图片质量 |
|||
// // H5上无效，目前不考虑使用此参数 |
|||
// quality: { |
|||
// type: [Number, String], |
|||
// default: 1 |
|||
// } |
|||
}, |
|||
data() { |
|||
return { |
|||
// 底部导航的高度 |
|||
bottomNavHeight: 50, |
|||
originWidth: 200, |
|||
width: 0, |
|||
height: 0, |
|||
cropperOpt: { |
|||
id: 'cropper', |
|||
targetId: 'targetCropper', |
|||
pixelRatio: 1, |
|||
width: 0, |
|||
height: 0, |
|||
scale: 2.5, |
|||
zoom: 8, |
|||
cut: { |
|||
x: (this.width - this.originWidth) / 2, |
|||
y: (this.height - this.originWidth) / 2, |
|||
width: this.originWidth, |
|||
height: this.originWidth |
|||
}, |
|||
boundStyle: { |
|||
lineWidth: uni.upx2px(this.boundStyle.lineWidth), |
|||
mask: this.boundStyle.mask, |
|||
color: this.boundStyle.borderColor |
|||
} |
|||
}, |
|||
// 裁剪框和输出图片的尺寸，高度默认等于宽度 |
|||
// 输出图片宽度，单位px |
|||
destWidth: 200, |
|||
// 裁剪框宽度，单位px |
|||
rectWidth: 200, |
|||
// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可 |
|||
fileType: 'jpg', |
|||
src: '', // 选择的图片路径，用于在点击确定时，判断是否选择了图片 |
|||
}; |
|||
}, |
|||
onLoad(option) { |
|||
let rectInfo = uni.getSystemInfoSync(); |
|||
this.width = rectInfo.windowWidth; |
|||
this.height = rectInfo.windowHeight - this.bottomNavHeight; |
|||
this.cropperOpt.width = this.width; |
|||
this.cropperOpt.height = this.height; |
|||
this.cropperOpt.pixelRatio = rectInfo.pixelRatio; |
|||
|
|||
if (option.destWidth) this.destWidth = option.destWidth; |
|||
if (option.rectWidth) { |
|||
let rectWidth = Number(option.rectWidth); |
|||
this.cropperOpt.cut = { |
|||
x: (this.width - rectWidth) / 2, |
|||
y: (this.height - rectWidth) / 2, |
|||
width: rectWidth, |
|||
height: rectWidth |
|||
}; |
|||
} |
|||
this.rectWidth = option.rectWidth; |
|||
if (option.fileType) this.fileType = option.fileType; |
|||
// 初始化 |
|||
this.cropper = new WeCropper(this.cropperOpt) |
|||
.on('ready', ctx => { |
|||
// wecropper is ready for work! |
|||
}) |
|||
.on('beforeImageLoad', ctx => { |
|||
// before picture loaded, i can do something |
|||
}) |
|||
.on('imageLoad', ctx => { |
|||
// picture loaded |
|||
}) |
|||
.on('beforeDraw', (ctx, instance) => { |
|||
// before canvas draw,i can do something |
|||
}); |
|||
// 设置导航栏样式，以免用户在page.json中没有设置为黑色背景 |
|||
uni.setNavigationBarColor({ |
|||
frontColor: '#ffffff', |
|||
backgroundColor: '#000000' |
|||
}); |
|||
uni.chooseImage({ |
|||
count: 1, // 默认9 |
|||
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有 |
|||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 |
|||
success: res => { |
|||
this.src = res.tempFilePaths[0]; |
|||
// 获取裁剪图片资源后，给data添加src属性及其值 |
|||
this.cropper.pushOrign(this.src); |
|||
} |
|||
}); |
|||
}, |
|||
methods: { |
|||
touchStart(e) { |
|||
this.cropper.touchStart(e); |
|||
}, |
|||
touchMove(e) { |
|||
this.cropper.touchMove(e); |
|||
}, |
|||
touchEnd(e) { |
|||
this.cropper.touchEnd(e); |
|||
}, |
|||
getCropperImage(isPre = false) { |
|||
if(!this.src) return this.$u.toast('请先选择图片再裁剪'); |
|||
|
|||
let cropper_opt = { |
|||
destHeight: Number(this.destWidth), // uni.canvasToTempFilePath要求这些参数为数值 |
|||
destWidth: Number(this.destWidth), |
|||
fileType: this.fileType |
|||
}; |
|||
this.cropper.getCropperImage(cropper_opt, (path, err) => { |
|||
if (err) { |
|||
uni.showModal({ |
|||
title: '温馨提示', |
|||
content: err.message |
|||
}); |
|||
} else { |
|||
if (isPre) { |
|||
uni.previewImage({ |
|||
current: '', // 当前显示图片的 http 链接 |
|||
urls: [path] // 需要预览的图片 http 链接列表 |
|||
}); |
|||
} else { |
|||
uni.$emit('uAvatarCropper', path); |
|||
this.$u.route({ |
|||
type: 'back' |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
uploadTap() { |
|||
const self = this; |
|||
uni.chooseImage({ |
|||
count: 1, // 默认9 |
|||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 |
|||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 |
|||
success: (res) => { |
|||
self.src = res.tempFilePaths[0]; |
|||
// 获取裁剪图片资源后，给data添加src属性及其值 |
|||
|
|||
self.cropper.pushOrign(this.src); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import '../../libs/css/style.components.scss'; |
|||
|
|||
.content { |
|||
background: rgba(255, 255, 255, 1); |
|||
} |
|||
|
|||
.cropper { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 11; |
|||
} |
|||
|
|||
.cropper-buttons { |
|||
background-color: #000000; |
|||
color: #eee; |
|||
} |
|||
|
|||
.cropper-wrapper { |
|||
position: relative; |
|||
@include vue-flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
width: 100%; |
|||
background-color: #000; |
|||
} |
|||
|
|||
.cropper-buttons { |
|||
width: 100vw; |
|||
@include vue-flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.cropper-buttons .upload, |
|||
.cropper-buttons .getCropperImage { |
|||
width: 50%; |
|||
text-align: center; |
|||
} |
|||
|
|||
.cropper-buttons .upload { |
|||
text-align: left; |
|||
padding-left: 50rpx; |
|||
} |
|||
|
|||
.cropper-buttons .getCropperImage { |
|||
text-align: right; |
|||
padding-right: 50rpx; |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,263 @@ |
|||
<template> |
|||
<view class="u-avatar" :style="[wrapStyle]" @tap="click"> |
|||
<image |
|||
@error="loadError" |
|||
:style="[imgStyle]" |
|||
class="u-avatar__img" |
|||
v-if="!uText && avatar" |
|||
:src="avatar" |
|||
:mode="imgMode" |
|||
></image> |
|||
<text |
|||
class="u-line-1" |
|||
v-else-if="uText" |
|||
:style="{ |
|||
fontSize: '38rpx' |
|||
}" |
|||
> |
|||
{{ uText }} |
|||
</text> |
|||
<slot v-else></slot> |
|||
<view |
|||
class="u-avatar__sex" |
|||
v-if="showSex" |
|||
:class="['u-avatar__sex--' + sexIcon]" |
|||
:style="[uSexStyle]" |
|||
> |
|||
<u-icon :name="sexIcon" size="20"></u-icon> |
|||
</view> |
|||
<view class="u-avatar__level" v-if="showLevel" :style="[uLevelStyle]"> |
|||
<u-icon :name="levelIcon" size="20"></u-icon> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
let base64Avatar = |
|||
"data:image/jpg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjREMEQwRkY0RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjREMEQwRkY1RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEQwRDBGRjJGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEQwRDBGRjNGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCADIAMgDAREAAhEBAxEB/8QAcQABAQEAAwEBAAAAAAAAAAAAAAUEAQMGAgcBAQAAAAAAAAAAAAAAAAAAAAAQAAIBAwICBgkDBQAAAAAAAAABAhEDBCEFMVFBYXGREiKBscHRMkJSEyOh4XLxYjNDFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A/fAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHbHFyZ/Dam+yLA+Z2L0Pjtyj2poD4AAAAAAAAAAAAAAAAAAAAAAAAKWFs9y6lcvvwQeqj8z9wFaziY1n/HbUX9XF97A7QAGXI23EvJ1goyfzR0YEfN269jeZ+a03pNe0DIAAAAAAAAAAAAAAAAAAAACvtO3RcVkXlWutuL9YFYAAAAAOJRjKLjJVi9GmB5/csH/mu1h/in8PU+QGMAAAAAAAAAAAAAAAAAAaMDG/6MmMH8C80+xAelSSVFolwQAAAAAAAHVlWI37ErUulaPk+hgeYnCUJuElSUXRrrQHAAAAAAAAAAAAAAAAABa2Oz4bM7r4zdF2ICmAAAAAAAAAg7zZ8GX41wuJP0rRgYAAAAAAAAAAAAAAAAAD0m2R8ODaXU33tsDSAAAAAAAAAlb9HyWZcnJd9PcBHAAAAAAAAAAAAAAAAAPS7e64Vn+KA0AAAAAAAAAJm+v8Ftf3ewCKAAAAAAAAAAAAAAAAAX9muqeGo9NttP06+0DcAAAAAAAAAjb7dTu2ra+VOT9P8AQCWAAAAAAAAAAAAAAAAAUNmyPt5Ltv4bui/kuAF0AAAAAAADiUlGLlJ0SVW+oDzOXfd/Ind6JPRdS0QHSAAAAAAAAAAAAAAAAAE2nVaNcGB6Lbs6OTao9LsF51z60BrAAAAAABJ3jOVHjW3r/sa9QEgAAAAAAAAAAAAAAAAAAAPu1duWriuW34ZR4MC9hbnZyEoy8l36XwfYBsAAADaSq9EuLAlZ+7xSdrGdW9Hc5dgEdtt1erfFgAAAAAAAAAAAAAAAAADVjbblX6NR8MH80tEBRs7HYivyzlN8lovaBPzduvY0m6eK10TXtAyAarO55lpJK54orolr+4GqO/Xaea1FvqbXvA+Z77kNeW3GPbV+4DJfzcm/pcm3H6Vou5AdAFLC2ed2Pjv1txa8sV8T6wOL+yZEKu1JXFy4MDBOE4ScZxcZLinoB8gAAAAAAAAAAAB242LeyJ+C3GvN9C7QLmJtePYpKS+5c+p8F2IDYAANJqj1T4oCfk7Nj3G5Wn9qXJax7gJ93Z82D8sVNc4v30A6Xg5i42Z+iLfqARwcyT0sz9MWvWBps7LlTf5Grce9/oBTxdtxseklHxT+uWr9AGoAB138ezfj4bsFJdD6V2MCPm7RdtJzs1uW1xXzL3gTgAAAAAAAAADRhYc8q74I6RWs5ckB6GxYtWLat21SK731sDsAAAAAAAAAAAAAAAASt021NO/YjrxuQXT1oCOAAAAAAABzGLlJRSq26JAelwsWONYjbXxcZvmwO8AAAAAAAAAAAAAAAAAAef3TEWPkVivx3NY9T6UBiAAAAAABo2+VmGXblddIJ8eivRUD0oAAAAAAAAAAAAAAAAAAAYt4tKeFKVNYNSXfRgefAAAAAAAAr7VuSSWPedKaW5v1MCsAAAAAAAAAAAAAAAAAAIe6bj96Ts2n+JPzSXzP3ATgAAAAAAAAFbbt1UUrOQ9FpC4/UwK6aaqtU+DAAAAAAAAAAAAAAA4lKMIuUmoxWrb4ARNx3R3q2rLpa4Sl0y/YCcAAAAAAAAAAANmFud7G8r89r6X0dgFvGzLGRGtuWvTF6NAdwAAAAAAAAAAAy5W442PVN+K59EePp5ARMvOv5MvO6QXCC4AZwAAAAAAAAAAAAAcxlKLUotprg1owN+PvORborq+7Hnwl3gUbO74VzRydt8pKn68ANcJwmqwkpLmnUDkAAAAfNy9atqtyagut0AxXt5xIV8Fbj6lRd7Am5G65V6qUvtwfyx94GMAAAAAAAAAAAAAAAAAAAOU2nVOj5gdsc3LiqRvTpyqwOxbnnrhdfpSfrQB7pnv/AGvuS9gHXPMy5/Fem1yq0v0A6W29XqwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAf//Z"; |
|||
/** |
|||
* avatar 头像 |
|||
* @description 本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。 |
|||
* @tutorial https://www.uviewui.com/components/avatar.html |
|||
* @property {String} bg-color 背景颜色，一般显示文字时用（默认#ffffff） |
|||
* @property {String} src 头像路径，如加载失败，将会显示默认头像 |
|||
* @property {String Number} size 头像尺寸，可以为指定字符串(large, default, mini)，或者数值，单位rpx（默认default） |
|||
* @property {String} mode 显示类型，见上方说明（默认circle） |
|||
* @property {String} sex-icon 性别图标，man-男，woman-女（默认man） |
|||
* @property {String} level-icon 等级图标（默认level） |
|||
* @property {String} sex-bg-color 性别图标背景颜色 |
|||
* @property {String} level-bg-color 等级图标背景颜色 |
|||
* @property {String} show-sex 是否显示性别图标（默认false） |
|||
* @property {String} show-level 是否显示等级图标（默认false） |
|||
* @property {String} img-mode 头像图片的裁剪类型，与uni的image组件的mode参数一致，如效果达不到需求，可尝试传widthFix值（默认aspectFill） |
|||
* @property {String} index 用户传递的标识符值，如果是列表循环，可穿v-for的index值 |
|||
* @event {Function} click 头像被点击 |
|||
* @example <u-avatar :src="src"></u-avatar> |
|||
*/ |
|||
export default { |
|||
name: "u-avatar", |
|||
emits: ["click"], |
|||
props: { |
|||
// 背景颜色 |
|||
bgColor: { |
|||
type: String, |
|||
default: "transparent" |
|||
}, |
|||
// 头像路径 |
|||
src: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
// 尺寸，large-大，default-中等，mini-小，如果为数值，则单位为rpx |
|||
// 宽度等于高度 |
|||
size: { |
|||
type: [String, Number], |
|||
default: "default" |
|||
}, |
|||
// 头像模型，square-带圆角方形，circle-圆形 |
|||
mode: { |
|||
type: String, |
|||
default: "circle" |
|||
}, |
|||
// 文字内容 |
|||
text: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
// 图片的裁剪模型 |
|||
imgMode: { |
|||
type: String, |
|||
default: "aspectFill" |
|||
}, |
|||
// 标识符 |
|||
index: { |
|||
type: [String, Number], |
|||
default: "" |
|||
}, |
|||
// 右上角性别角标，man-男，woman-女 |
|||
sexIcon: { |
|||
type: String, |
|||
default: "man" |
|||
}, |
|||
// 右下角的等级图标 |
|||
levelIcon: { |
|||
type: String, |
|||
default: "level" |
|||
}, |
|||
// 右下角等级图标背景颜色 |
|||
levelBgColor: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
// 右上角性别图标的背景颜色 |
|||
sexBgColor: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
// 是否显示性别图标 |
|||
showSex: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否显示等级图标 |
|||
showLevel: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
error: false, |
|||
// 头像的地址，因为如果加载错误，需要赋值为默认图片，props值无法修改，所以需要一个中间值 |
|||
avatar: this.src ? this.src : base64Avatar |
|||
}; |
|||
}, |
|||
watch: { |
|||
src(n) { |
|||
// 用户可能会在头像加载失败时，再次修改头像值，所以需要重新赋值 |
|||
if (!n) { |
|||
// 如果传入null或者''，或者undefined，显示默认头像 |
|||
this.avatar = base64Avatar; |
|||
this.error = true; |
|||
} else { |
|||
this.avatar = n; |
|||
this.error = false; |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
wrapStyle() { |
|||
let style = {}; |
|||
style.height = |
|||
this.size == "large" |
|||
? "120rpx" |
|||
: this.size == "default" |
|||
? "90rpx" |
|||
: this.size == "mini" |
|||
? "70rpx" |
|||
: this.size + "rpx"; |
|||
style.width = style.height; |
|||
style.flex = `0 0 ${style.height}`; |
|||
style.backgroundColor = this.bgColor; |
|||
style.borderRadius = this.mode == "circle" ? "500px" : "5px"; |
|||
if (this.text) style.padding = `0 6rpx`; |
|||
return style; |
|||
}, |
|||
imgStyle() { |
|||
let style = {}; |
|||
style.borderRadius = this.mode == "circle" ? "500px" : "5px"; |
|||
return style; |
|||
}, |
|||
// 取字符串的第一个字符 |
|||
uText() { |
|||
return String(this.text)[0]; |
|||
}, |
|||
// 性别图标的自定义样式 |
|||
uSexStyle() { |
|||
let style = {}; |
|||
if (this.sexBgColor) style.backgroundColor = this.sexBgColor; |
|||
return style; |
|||
}, |
|||
// 等级图标的自定义样式 |
|||
uLevelStyle() { |
|||
let style = {}; |
|||
if (this.levelBgColor) style.backgroundColor = this.levelBgColor; |
|||
return style; |
|||
} |
|||
}, |
|||
methods: { |
|||
// 图片加载错误时，显示默认头像 |
|||
loadError() { |
|||
this.error = true; |
|||
this.avatar = base64Avatar; |
|||
}, |
|||
click() { |
|||
this.$emit("click", this.index); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-avatar { |
|||
/* #ifndef APP-NVUE */ |
|||
display: inline-flex; |
|||
/* #endif */ |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 28rpx; |
|||
color: $u-content-color; |
|||
border-radius: 10px; |
|||
position: relative; |
|||
|
|||
&__img { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
&__sex { |
|||
position: absolute; |
|||
width: 32rpx; |
|||
color: #ffffff; |
|||
height: 32rpx; |
|||
@include vue-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
border-radius: 100rpx; |
|||
top: 5%; |
|||
z-index: 1; |
|||
right: -7%; |
|||
border: 1px #ffffff solid; |
|||
|
|||
&--man { |
|||
background-color: $u-type-primary; |
|||
} |
|||
|
|||
&--woman { |
|||
background-color: $u-type-error; |
|||
} |
|||
|
|||
&--none { |
|||
background-color: $u-type-warning; |
|||
} |
|||
} |
|||
|
|||
&__level { |
|||
position: absolute; |
|||
width: 32rpx; |
|||
color: #ffffff; |
|||
height: 32rpx; |
|||
@include vue-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
border-radius: 100rpx; |
|||
bottom: 5%; |
|||
z-index: 1; |
|||
right: -7%; |
|||
border: 1px #ffffff solid; |
|||
background-color: $u-type-warning; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,153 @@ |
|||
<template> |
|||
<view @tap="backToTop" class="u-back-top" :class="['u-back-top--mode--' + mode]" :style="[{ |
|||
bottom: bottom + 'rpx', |
|||
right: right + 'rpx', |
|||
borderRadius: mode == 'circle' ? '10000rpx' : '8rpx', |
|||
zIndex: uZIndex, |
|||
opacity: opacity |
|||
}, customStyle]"> |
|||
<view class="u-back-top__content" v-if="!$slots.default && !$slots.$default"> |
|||
<u-icon @click="backToTop" :name="icon" :custom-style="iconStyle"></u-icon> |
|||
<view class="u-back-top__content__tips"> |
|||
{{tips}} |
|||
</view> |
|||
</view> |
|||
<slot v-else /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'u-back-top', |
|||
props: { |
|||
// 返回顶部的形状，circle-圆形，square-方形 |
|||
mode: { |
|||
type: String, |
|||
default: 'circle' |
|||
}, |
|||
// 自定义图标 |
|||
icon: { |
|||
type: String, |
|||
default: 'arrow-upward' |
|||
}, |
|||
// 提示文字 |
|||
tips: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 返回顶部滚动时间 |
|||
duration: { |
|||
type: [Number, String], |
|||
default: 100 |
|||
}, |
|||
// 滚动距离 |
|||
scrollTop: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
// 距离顶部多少距离显示，单位rpx |
|||
top: { |
|||
type: [Number, String], |
|||
default: 400 |
|||
}, |
|||
// 返回顶部按钮到底部的距离，单位rpx |
|||
bottom: { |
|||
type: [Number, String], |
|||
default: 200 |
|||
}, |
|||
// 返回顶部按钮到右边的距离，单位rpx |
|||
right: { |
|||
type: [Number, String], |
|||
default: 40 |
|||
}, |
|||
// 层级 |
|||
zIndex: { |
|||
type: [Number, String], |
|||
default: '9' |
|||
}, |
|||
// 图标的样式，对象形式 |
|||
iconStyle: { |
|||
type: Object, |
|||
default() { |
|||
return { |
|||
color: '#909399', |
|||
fontSize: '38rpx' |
|||
} |
|||
} |
|||
}, |
|||
// 整个组件的样式 |
|||
customStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
showBackTop(nVal, oVal) { |
|||
// 当组件的显示与隐藏状态发生跳变时，修改组件的层级和不透明度 |
|||
// 让组件有显示和消失的动画效果，如果用v-if控制组件状态，将无设置动画效果 |
|||
if(nVal) { |
|||
this.uZIndex = this.zIndex; |
|||
this.opacity = 1; |
|||
} else { |
|||
this.uZIndex = -1; |
|||
this.opacity = 0; |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
showBackTop() { |
|||
// 由于scrollTop为页面的滚动距离，默认为px单位，这里将用于传入的top(rpx)值 |
|||
// 转为px用于比较，如果滚动条到顶的距离大于设定的距离，就显示返回顶部的按钮 |
|||
return this.scrollTop > uni.upx2px(this.top); |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
// 不透明度，为了让组件有一个显示和隐藏的过渡动画 |
|||
opacity: 0, |
|||
// 组件的z-index值，隐藏时设置为-1，就会看不到 |
|||
uZIndex: -1 |
|||
} |
|||
}, |
|||
methods: { |
|||
backToTop() { |
|||
uni.pageScrollTo({ |
|||
scrollTop: 0, |
|||
duration: this.duration |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-back-top { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
position: fixed; |
|||
z-index: 9; |
|||
@include vue-flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
background-color: #E1E1E1; |
|||
color: $u-content-color; |
|||
align-items: center; |
|||
transition: opacity 0.4s; |
|||
|
|||
&__content { |
|||
@include vue-flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
|
|||
&__tips { |
|||
font-size: 24rpx; |
|||
transform: scale(0.8); |
|||
line-height: 1; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,216 @@ |
|||
<template> |
|||
<view v-if="show" class="u-badge" :class="[ |
|||
isDot ? 'u-badge-dot' : '', |
|||
size == 'mini' ? 'u-badge-mini' : '', |
|||
type ? 'u-badge--bg--' + type : '' |
|||
]" :style="[{ |
|||
top: offset[0] + 'rpx', |
|||
right: offset[1] + 'rpx', |
|||
fontSize: fontSize + 'rpx', |
|||
position: absolute ? 'absolute' : 'static', |
|||
color: color, |
|||
backgroundColor: bgColor |
|||
}, boxStyle]" |
|||
> |
|||
{{showText}} |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* badge 角标 |
|||
* @description 本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。 |
|||
* @tutorial https://www.uviewui.com/components/badge.html |
|||
* @property {String Number} count 展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为0且show-zero为false时隐藏 |
|||
* @property {Boolean} is-dot 不展示数字，只有一个小点（默认false） |
|||
* @property {Boolean} absolute 组件是否绝对定位，为true时，offset参数才有效（默认true） |
|||
* @property {String Number} overflow-count 展示封顶的数字值（默认99） |
|||
* @property {String} type 使用预设的背景颜色（默认error） |
|||
* @property {Boolean} show-zero 当数值为 0 时，是否展示 Badge（默认false） |
|||
* @property {String} size Badge的尺寸，设为mini会得到小一号的Badge（默认default） |
|||
* @property {Array} offset 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，单位rpx。absolute为true时有效（默认[20, 20]） |
|||
* @property {String} color 字体颜色（默认#ffffff） |
|||
* @property {String} bgColor 背景颜色，优先级比type高，如设置，type参数会失效 |
|||
* @property {Boolean} is-center 组件中心点是否和父组件右上角重合，优先级比offset高，如设置，offset参数会失效（默认false） |
|||
* @example <u-badge type="error" count="7"></u-badge> |
|||
*/ |
|||
export default { |
|||
name: 'u-badge', |
|||
props: { |
|||
// primary,warning,success,error,info |
|||
type: { |
|||
type: String, |
|||
default: 'error' |
|||
}, |
|||
// default, mini |
|||
size: { |
|||
type: String, |
|||
default: 'default' |
|||
}, |
|||
//是否是圆点 |
|||
isDot: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 显示的数值内容 |
|||
count: { |
|||
type: [Number, String], |
|||
}, |
|||
// 展示封顶的数字值 |
|||
overflowCount: { |
|||
type: Number, |
|||
default: 99 |
|||
}, |
|||
// 当数值为 0 时，是否展示 Badge |
|||
showZero: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 位置偏移 |
|||
offset: { |
|||
type: Array, |
|||
default: () => { |
|||
return [20, 20] |
|||
} |
|||
}, |
|||
// 是否开启绝对定位，开启了offset才会起作用 |
|||
absolute: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 字体大小 |
|||
fontSize: { |
|||
type: [String, Number], |
|||
default: '24' |
|||
}, |
|||
// 字体演示 |
|||
color: { |
|||
type: String, |
|||
default: '#ffffff' |
|||
}, |
|||
// badge的背景颜色 |
|||
bgColor: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 是否让badge组件的中心点和父组件右上角重合，配置的话，offset将会失效 |
|||
isCenter: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
computed: { |
|||
// 是否将badge中心与父组件右上角重合 |
|||
boxStyle() { |
|||
let style = {}; |
|||
if(this.isCenter) { |
|||
style.top = 0; |
|||
style.right = 0; |
|||
// Y轴-50%，意味着badge向上移动了badge自身高度一半，X轴50%，意味着向右移动了自身宽度一半 |
|||
style.transform = "translateY(-50%) translateX(50%)"; |
|||
} else { |
|||
style.top = this.offset[0] + 'rpx'; |
|||
style.right = this.offset[1] + 'rpx'; |
|||
style.transform = "translateY(0) translateX(0)"; |
|||
} |
|||
// 如果尺寸为mini，后接上scale() |
|||
if(this.size == 'mini') { |
|||
style.transform = style.transform + " scale(0.8)"; |
|||
} |
|||
return style; |
|||
}, |
|||
// isDot类型时，不显示文字 |
|||
showText() { |
|||
if(this.isDot) return ''; |
|||
else { |
|||
if(this.count > this.overflowCount) return `${this.overflowCount}+`; |
|||
else return this.count; |
|||
} |
|||
}, |
|||
// 是否显示组件 |
|||
show() { |
|||
// 如果count的值为0，并且showZero设置为false，不显示组件 |
|||
if(this.count == 0 && this.showZero == false) return false; |
|||
else return true; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-badge { |
|||
/* #ifndef APP-NVUE */ |
|||
display: inline-flex; |
|||
/* #endif */ |
|||
justify-content: center; |
|||
align-items: center; |
|||
line-height: 24rpx; |
|||
padding: 4rpx 8rpx; |
|||
border-radius: 100rpx; |
|||
z-index: 9; |
|||
|
|||
&--bg--primary { |
|||
background-color: $u-type-primary; |
|||
} |
|||
|
|||
&--bg--error { |
|||
background-color: $u-type-error; |
|||
} |
|||
|
|||
&--bg--success { |
|||
background-color: $u-type-success; |
|||
} |
|||
|
|||
&--bg--info { |
|||
background-color: $u-type-info; |
|||
} |
|||
|
|||
&--bg--warning { |
|||
background-color: $u-type-warning; |
|||
} |
|||
} |
|||
|
|||
.u-badge-dot { |
|||
height: 16rpx; |
|||
width: 16rpx; |
|||
border-radius: 100rpx; |
|||
line-height: 1; |
|||
} |
|||
|
|||
.u-badge-mini { |
|||
transform: scale(0.8); |
|||
transform-origin: center center; |
|||
} |
|||
|
|||
// .u-primary { |
|||
// background: $u-type-primary; |
|||
// color: #fff; |
|||
// } |
|||
|
|||
// .u-error { |
|||
// background: $u-type-error; |
|||
// color: #fff; |
|||
// } |
|||
|
|||
// .u-warning { |
|||
// background: $u-type-warning; |
|||
// color: #fff; |
|||
// } |
|||
|
|||
// .u-success { |
|||
// background: $u-type-success; |
|||
// color: #fff; |
|||
// } |
|||
|
|||
// .u-black { |
|||
// background: #585858; |
|||
// color: #fff; |
|||
// } |
|||
|
|||
.u-info { |
|||
background-color: $u-type-info; |
|||
color: #fff; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,602 @@ |
|||
<template> |
|||
<button |
|||
id="u-wave-btn" |
|||
class="u-btn u-line-1 u-fix-ios-appearance" |
|||
:class="[ |
|||
'u-size-' + size, |
|||
plain ? 'u-btn--' + type + '--plain' : '', |
|||
loading ? 'u-loading' : '', |
|||
shape == 'circle' ? 'u-round-circle' : '', |
|||
hairLine ? showHairLineBorder : 'u-btn--bold-border', |
|||
'u-btn--' + type, |
|||
disabled ? `u-btn--${type}--disabled` : '', |
|||
]" |
|||
:hover-start-time="Number(hoverStartTime)" |
|||
:hover-stay-time="Number(hoverStayTime)" |
|||
:disabled="disabled" |
|||
:form-type="formType" |
|||
:open-type="openType" |
|||
:app-parameter="appParameter" |
|||
:hover-stop-propagation="hoverStopPropagation" |
|||
:send-message-title="sendMessageTitle" |
|||
send-message-path="sendMessagePath" |
|||
:lang="lang" |
|||
:data-name="dataName" |
|||
:session-from="sessionFrom" |
|||
:send-message-img="sendMessageImg" |
|||
:show-message-card="showMessageCard" |
|||
@getphonenumber="getphonenumber" |
|||
@getuserinfo="getuserinfo" |
|||
@error="error" |
|||
@opensetting="opensetting" |
|||
@launchapp="launchapp" |
|||
:style="[customStyle, { |
|||
overflow: ripple ? 'hidden' : 'visible' |
|||
}]" |
|||
@tap.stop="click($event)" |
|||
:hover-class="getHoverClass" |
|||
:loading="loading" |
|||
> |
|||
<slot></slot> |
|||
<view |
|||
v-if="ripple" |
|||
class="u-wave-ripple" |
|||
:class="[waveActive ? 'u-wave-active' : '']" |
|||
:style="{ |
|||
top: rippleTop + 'px', |
|||
left: rippleLeft + 'px', |
|||
width: fields.targetWidth + 'px', |
|||
height: fields.targetWidth + 'px', |
|||
'background-color': rippleBgColor || 'rgba(0, 0, 0, 0.15)' |
|||
}" |
|||
></view> |
|||
</button> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* button 按钮 |
|||
* @description Button 按钮 |
|||
* @tutorial https://www.uviewui.com/components/button.html |
|||
* @property {String} size 按钮的大小 |
|||
* @property {Boolean} ripple 是否开启点击水波纹效果 |
|||
* @property {String} ripple-bg-color 水波纹的背景色，ripple为true时有效 |
|||
* @property {String} type 按钮的样式类型 |
|||
* @property {Boolean} plain 按钮是否镂空，背景色透明 |
|||
* @property {Boolean} disabled 是否禁用 |
|||
* @property {Boolean} hair-line 是否显示按钮的细边框(默认true) |
|||
* @property {Boolean} shape 按钮外观形状，见文档说明 |
|||
* @property {Boolean} loading 按钮名称前是否带 loading 图标(App-nvue 平台，在 ios 上为雪花，Android上为圆圈) |
|||
* @property {String} form-type 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件 |
|||
* @property {String} open-type 开放能力 |
|||
* @property {String} data-name 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取 |
|||
* @property {String} hover-class 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果(App-nvue 平台暂不支持) |
|||
* @property {Number} hover-start-time 按住后多久出现点击态，单位毫秒 |
|||
* @property {Number} hover-stay-time 手指松开后点击态保留时间，单位毫秒 |
|||
* @property {Object} custom-style 对按钮的自定义样式，对象形式，见文档说明 |
|||
* @event {Function} click 按钮点击 |
|||
* @event {Function} getphonenumber open-type="getPhoneNumber"时有效 |
|||
* @event {Function} getuserinfo 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo |
|||
* @event {Function} error 当使用开放能力时，发生错误的回调 |
|||
* @event {Function} opensetting 在打开授权设置页并关闭后回调 |
|||
* @event {Function} launchapp 打开 APP 成功的回调 |
|||
* @example <u-button>月落</u-button> |
|||
*/ |
|||
export default { |
|||
name: 'u-button', |
|||
emits: ["click", "getphonenumber", "getuserinfo", "error", "opensetting", "launchapp"], |
|||
props: { |
|||
// 是否细边框 |
|||
hairLine: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 按钮的预置样式，default，primary，error，warning，success |
|||
type: { |
|||
type: String, |
|||
default: 'default' |
|||
}, |
|||
// 按钮尺寸，default，medium，mini |
|||
size: { |
|||
type: String, |
|||
default: 'default' |
|||
}, |
|||
// 按钮形状，circle（两边为半圆），square（带圆角） |
|||
shape: { |
|||
type: String, |
|||
default: 'square' |
|||
}, |
|||
// 按钮是否镂空 |
|||
plain: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否禁止状态 |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否加载中 |
|||
loading: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 开放能力，具体请看uniapp稳定关于button组件部分说明 |
|||
// https://uniapp.dcloud.io/component/button |
|||
openType: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件 |
|||
// 取值为submit（提交表单），reset（重置表单） |
|||
formType: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 |
|||
// 只微信小程序、QQ小程序有效 |
|||
appParameter: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效 |
|||
hoverStopPropagation: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。只微信小程序有效 |
|||
lang: { |
|||
type: String, |
|||
default: 'en' |
|||
}, |
|||
// 会话来源，open-type="contact"时有效。只微信小程序有效 |
|||
sessionFrom: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 会话内消息卡片标题，open-type="contact"时有效 |
|||
// 默认当前标题，只微信小程序有效 |
|||
sendMessageTitle: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 |
|||
// 默认当前分享路径，只微信小程序有效 |
|||
sendMessagePath: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 会话内消息卡片图片，open-type="contact"时有效 |
|||
// 默认当前页面截图，只微信小程序有效 |
|||
sendMessageImg: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示， |
|||
// 用户点击后可以快速发送小程序消息，open-type="contact"时有效 |
|||
showMessageCard: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 手指按（触摸）按钮时按钮时的背景颜色 |
|||
hoverBgColor: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 水波纹的背景颜色 |
|||
rippleBgColor: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 是否开启水波纹效果 |
|||
ripple: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 按下的类名 |
|||
hoverClass: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 自定义样式，对象形式 |
|||
customStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
} |
|||
}, |
|||
// 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取 |
|||
dataName: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 节流，一定时间内只能触发一次 |
|||
throttleTime: { |
|||
type: [String, Number], |
|||
default: 500 |
|||
}, |
|||
// 按住后多久出现点击态，单位毫秒 |
|||
hoverStartTime: { |
|||
type: [String, Number], |
|||
default: 20 |
|||
}, |
|||
// 手指松开后点击态保留时间，单位毫秒 |
|||
hoverStayTime: { |
|||
type: [String, Number], |
|||
default: 150 |
|||
}, |
|||
timerId: { |
|||
type: [String, Number] |
|||
}, |
|||
}, |
|||
computed: { |
|||
// 当没有传bgColor变量时，按钮按下去的颜色类名 |
|||
getHoverClass() { |
|||
// 如果开启水波纹效果，则不启用hover-class效果 |
|||
if (this.loading || this.disabled || this.ripple || this.hoverClass) return ''; |
|||
let hoverClass = ''; |
|||
hoverClass = this.plain ? 'u-' + this.type + '-plain-hover' : 'u-' + this.type + '-hover'; |
|||
return hoverClass; |
|||
}, |
|||
// 在'primary', 'success', 'error', 'warning'类型下，不显示边框，否则会造成四角有毛刺现象 |
|||
showHairLineBorder() { |
|||
if (['primary', 'success', 'error', 'warning'].indexOf(this.type) >= 0 && !this.plain) { |
|||
return ''; |
|||
} else { |
|||
return 'u-hairline-border'; |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
let btnTimerId = this.timerId || "button_" + Math.floor(Math.random() * 100000000 + 0); |
|||
return { |
|||
btnTimerId, |
|||
rippleTop: 0, // 水波纹的起点Y坐标到按钮上边界的距离 |
|||
rippleLeft: 0, // 水波纹起点X坐标到按钮左边界的距离 |
|||
fields: {}, // 波纹按钮节点信息 |
|||
waveActive: false // 激活水波纹 |
|||
}; |
|||
}, |
|||
methods: { |
|||
// 按钮点击 |
|||
click(e) { |
|||
// 进行节流控制，每this.throttle毫秒内，只在开始处执行 |
|||
this.$u.throttle(() => { |
|||
// 如果按钮时disabled和loading状态，不触发水波纹效果 |
|||
if (this.loading === true || this.disabled === true) return; |
|||
// 是否开启水波纹效果 |
|||
if (this.ripple) { |
|||
// 每次点击时，移除上一次的类，再次添加，才能触发动画效果 |
|||
this.waveActive = false; |
|||
this.$nextTick(function() { |
|||
this.getWaveQuery(e); |
|||
}); |
|||
} |
|||
this.$emit('click', e); |
|||
}, this.throttleTime, true, this.btnTimerId); |
|||
}, |
|||
// 查询按钮的节点信息 |
|||
getWaveQuery(e) { |
|||
this.getElQuery().then(res => { |
|||
// 查询返回的是一个数组节点 |
|||
let data = res[0]; |
|||
// 查询不到节点信息，不操作 |
|||
if (!data.width || !data.width) return; |
|||
// 水波纹的最终形态是一个正方形(通过border-radius让其变为一个圆形)，这里要保证正方形的边长等于按钮的最长边 |
|||
// 最终的方形（变换后的圆形）才能覆盖整个按钮 |
|||
data.targetWidth = data.height > data.width ? data.height : data.width; |
|||
if (!data.targetWidth) return; |
|||
this.fields = data; |
|||
let touchesX = '', |
|||
touchesY = ''; |
|||
// #ifdef MP-BAIDU |
|||
touchesX = e.changedTouches[0].clientX; |
|||
touchesY = e.changedTouches[0].clientY; |
|||
// #endif |
|||
// #ifdef MP-ALIPAY |
|||
touchesX = e.detail.clientX; |
|||
touchesY = e.detail.clientY; |
|||
// #endif |
|||
// #ifndef MP-BAIDU || MP-ALIPAY |
|||
touchesX = e.touches[0].clientX; |
|||
touchesY = e.touches[0].clientY; |
|||
// #endif |
|||
// 获取触摸点相对于按钮上边和左边的x和y坐标，原理是通过屏幕的触摸点（touchesY），减去按钮的上边界data.top |
|||
// 但是由于`transform-origin`默认是center，所以这里再减去半径才是水波纹view应该的位置 |
|||
// 总的来说，就是把水波纹的矩形（变换后的圆形）的中心点，移动到我们的触摸点位置 |
|||
this.rippleTop = touchesY - data.top - data.targetWidth / 2; |
|||
this.rippleLeft = touchesX - data.left - data.targetWidth / 2; |
|||
this.$nextTick(() => { |
|||
this.waveActive = true; |
|||
}); |
|||
}); |
|||
}, |
|||
// 获取节点信息 |
|||
getElQuery() { |
|||
return new Promise(resolve => { |
|||
let queryInfo = ''; |
|||
// 获取元素节点信息，请查看uniapp相关文档 |
|||
// https://uniapp.dcloud.io/api/ui/nodes-info?id=nodesrefboundingclientrect |
|||
queryInfo = uni.createSelectorQuery().in(this); |
|||
//#ifdef MP-ALIPAY |
|||
queryInfo = uni.createSelectorQuery(); |
|||
//#endif |
|||
queryInfo.select('.u-btn').boundingClientRect(); |
|||
queryInfo.exec(data => { |
|||
resolve(data); |
|||
}); |
|||
}); |
|||
}, |
|||
// 下面为对接uniapp官方按钮开放能力事件回调的对接 |
|||
getphonenumber(res) { |
|||
this.$emit('getphonenumber', res); |
|||
}, |
|||
getuserinfo(res) { |
|||
this.$emit('getuserinfo', res); |
|||
}, |
|||
error(res) { |
|||
this.$emit('error', res); |
|||
}, |
|||
opensetting(res) { |
|||
this.$emit('opensetting', res); |
|||
}, |
|||
launchapp(res) { |
|||
this.$emit('launchapp', res); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import '../../libs/css/style.components.scss'; |
|||
.u-btn::after { |
|||
border: none; |
|||
} |
|||
|
|||
.u-btn { |
|||
position: relative; |
|||
border: 0; |
|||
//border-radius: 10rpx; |
|||
/* #ifndef APP-NVUE */ |
|||
display: inline-flex; |
|||
/* #endif */ |
|||
// 避免边框某些场景可能被“裁剪”，不能设置为hidden |
|||
overflow: visible; |
|||
line-height: 1; |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
cursor: pointer; |
|||
padding: 0 40rpx; |
|||
z-index: 1; |
|||
box-sizing: border-box; |
|||
transition: all 0.15s; |
|||
|
|||
&--bold-border { |
|||
border: 1px solid #ffffff; |
|||
} |
|||
|
|||
&--default { |
|||
color: $u-content-color; |
|||
border-color: #c0c4cc; |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
&--primary { |
|||
color: #ffffff; |
|||
border-color: $u-type-primary; |
|||
background-color: $u-type-primary; |
|||
} |
|||
|
|||
&--success { |
|||
color: #ffffff; |
|||
border-color: $u-type-success; |
|||
background-color: $u-type-success; |
|||
} |
|||
|
|||
&--error { |
|||
color: #ffffff; |
|||
border-color: $u-type-error; |
|||
background-color: $u-type-error; |
|||
} |
|||
|
|||
&--warning { |
|||
color: #ffffff; |
|||
border-color: $u-type-warning; |
|||
background-color: $u-type-warning; |
|||
} |
|||
|
|||
&--default--disabled { |
|||
color: #ffffff; |
|||
border-color: #e4e7ed; |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
&--primary--disabled { |
|||
color: #ffffff!important; |
|||
border-color: $u-type-primary-disabled!important; |
|||
background-color: $u-type-primary-disabled!important; |
|||
} |
|||
|
|||
&--success--disabled { |
|||
color: #ffffff!important; |
|||
border-color: $u-type-success-disabled!important; |
|||
background-color: $u-type-success-disabled!important; |
|||
} |
|||
|
|||
&--error--disabled { |
|||
color: #ffffff!important; |
|||
border-color: $u-type-error-disabled!important; |
|||
background-color: $u-type-error-disabled!important; |
|||
} |
|||
|
|||
&--warning--disabled { |
|||
color: #ffffff!important; |
|||
border-color: $u-type-warning-disabled!important; |
|||
background-color: $u-type-warning-disabled!important; |
|||
} |
|||
|
|||
&--primary--plain { |
|||
color: $u-type-primary!important; |
|||
border-color: $u-type-primary-disabled!important; |
|||
background-color: $u-type-primary-light!important; |
|||
} |
|||
|
|||
&--success--plain { |
|||
color: $u-type-success!important; |
|||
border-color: $u-type-success-disabled!important; |
|||
background-color: $u-type-success-light!important; |
|||
} |
|||
|
|||
&--error--plain { |
|||
color: $u-type-error!important; |
|||
border-color: $u-type-error-disabled!important; |
|||
background-color: $u-type-error-light!important; |
|||
} |
|||
|
|||
&--warning--plain { |
|||
color: $u-type-warning!important; |
|||
border-color: $u-type-warning-disabled!important; |
|||
background-color: $u-type-warning-light!important; |
|||
} |
|||
} |
|||
|
|||
.u-hairline-border:after { |
|||
content: ' '; |
|||
position: absolute; |
|||
pointer-events: none; |
|||
// 设置为border-box，意味着下面的scale缩小为0.5，实际上缩小的是伪元素的内容（border-box意味着内容不含border） |
|||
box-sizing: border-box; |
|||
// 中心点作为变形(scale())的原点 |
|||
-webkit-transform-origin: 0 0; |
|||
transform-origin: 0 0; |
|||
left: 0; |
|||
top: 0; |
|||
width: 199.8%; |
|||
height: 199.7%; |
|||
-webkit-transform: scale(0.5, 0.5); |
|||
transform: scale(0.5, 0.5); |
|||
border: 1px solid currentColor; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.u-wave-ripple { |
|||
z-index: 0; |
|||
position: absolute; |
|||
border-radius: 100%; |
|||
background-clip: padding-box; |
|||
pointer-events: none; |
|||
user-select: none; |
|||
transform: scale(0); |
|||
opacity: 1; |
|||
transform-origin: center; |
|||
} |
|||
|
|||
.u-wave-ripple.u-wave-active { |
|||
opacity: 0; |
|||
transform: scale(2); |
|||
transition: opacity 1s linear, transform 0.4s linear; |
|||
} |
|||
|
|||
.u-round-circle { |
|||
border-radius: 100rpx; |
|||
} |
|||
|
|||
.u-round-circle::after { |
|||
border-radius: 100rpx; |
|||
} |
|||
|
|||
.u-loading::after { |
|||
background-color: hsla(0, 0%, 100%, 0.35); |
|||
} |
|||
|
|||
.u-size-default { |
|||
font-size: 30rpx; |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
} |
|||
|
|||
.u-size-medium { |
|||
/* #ifndef APP-NVUE */ |
|||
display: inline-flex; |
|||
/* #endif */ |
|||
width: auto; |
|||
font-size: 26rpx; |
|||
height: 70rpx; |
|||
line-height: 70rpx; |
|||
padding: 0 80rpx; |
|||
} |
|||
|
|||
.u-size-mini { |
|||
/* #ifndef APP-NVUE */ |
|||
display: inline-flex; |
|||
/* #endif */ |
|||
width: auto; |
|||
font-size: 22rpx; |
|||
padding-top: 1px; |
|||
height: 50rpx; |
|||
line-height: 50rpx; |
|||
padding: 0 20rpx; |
|||
} |
|||
|
|||
.u-primary-plain-hover { |
|||
color: #ffffff !important; |
|||
background: $u-type-primary-dark !important; |
|||
} |
|||
|
|||
.u-default-plain-hover { |
|||
color: $u-type-primary-dark !important; |
|||
background: $u-type-primary-light !important; |
|||
} |
|||
|
|||
.u-success-plain-hover { |
|||
color: #ffffff !important; |
|||
background: $u-type-success-dark !important; |
|||
} |
|||
|
|||
.u-warning-plain-hover { |
|||
color: #ffffff !important; |
|||
background: $u-type-warning-dark !important; |
|||
} |
|||
|
|||
.u-error-plain-hover { |
|||
color: #ffffff !important; |
|||
background: $u-type-error-dark !important; |
|||
} |
|||
|
|||
.u-info-plain-hover { |
|||
color: #ffffff !important; |
|||
background: $u-type-info-dark !important; |
|||
} |
|||
|
|||
.u-default-hover { |
|||
color: $u-type-primary-dark !important; |
|||
border-color: $u-type-primary-dark !important; |
|||
background-color: $u-type-primary-light !important; |
|||
} |
|||
|
|||
.u-primary-hover { |
|||
background: $u-type-primary-dark !important; |
|||
color: #fff; |
|||
} |
|||
|
|||
.u-success-hover { |
|||
background: $u-type-success-dark !important; |
|||
color: #fff; |
|||
} |
|||
|
|||
.u-info-hover { |
|||
background: $u-type-info-dark !important; |
|||
color: #fff; |
|||
} |
|||
|
|||
.u-warning-hover { |
|||
background: $u-type-warning-dark !important; |
|||
color: #fff; |
|||
} |
|||
|
|||
.u-error-hover { |
|||
background: $u-type-error-dark !important; |
|||
color: #fff; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,666 @@ |
|||
<template> |
|||
<u-popup :blur="blur" closeable :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="popupValue" length="auto" |
|||
:safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex" :border-radius="borderRadius" :closeable="closeable"> |
|||
<view class="u-calendar"> |
|||
<view class="u-calendar__header"> |
|||
<view class="u-calendar__header__text" v-if="!$slots['tooltip']"> |
|||
{{toolTip}} |
|||
</view> |
|||
<slot v-else name="tooltip" /> |
|||
</view> |
|||
<view class="u-calendar__action u-flex u-row-center"> |
|||
<view class="u-calendar__action__icon"> |
|||
<u-icon v-if="changeYear" name="arrow-left-double" :color="yearArrowColor" @click="changeYearHandler(0)"></u-icon> |
|||
</view> |
|||
<view class="u-calendar__action__icon"> |
|||
<u-icon v-if="changeMonth" name="arrow-left" :color="monthArrowColor" @click="changeMonthHandler(0)"></u-icon> |
|||
</view> |
|||
<view class="u-calendar__action__text">{{ showTitle }}</view> |
|||
<view class="u-calendar__action__icon"> |
|||
<u-icon v-if="changeMonth" name="arrow-right" :color="monthArrowColor" @click="changeMonthHandler(1)"></u-icon> |
|||
</view> |
|||
<view class="u-calendar__action__icon"> |
|||
<u-icon v-if="changeYear" name="arrow-right-double" :color="yearArrowColor" @click="changeYearHandler(1)"></u-icon> |
|||
</view> |
|||
</view> |
|||
<view class="u-calendar__week-day"> |
|||
<view class="u-calendar__week-day__text" v-for="(item, index) in weekDayZh" :key="index">{{item}}</view> |
|||
</view> |
|||
<view class="u-calendar__content"> |
|||
<!-- 前置空白部分 --> |
|||
<block v-for="(item, index) in weekdayArr" :key="index"> |
|||
<view class="u-calendar__content__item"></view> |
|||
</block> |
|||
<view class="u-calendar__content__item" :class="{ |
|||
'u-hover-class':openDisAbled(year,month,index+1), |
|||
'u-calendar__content--start-date': (mode == 'range' && startDate==`${year}-${month}-${index+1}`) || mode== 'date', |
|||
'u-calendar__content--end-date':(mode== 'range' && endDate==`${year}-${month}-${index+1}`) || mode == 'date' |
|||
}" :style="{backgroundColor: getColor(index,1)}" v-for="(item, index) in daysArr" :key="index" |
|||
@tap="dateClick(index)"> |
|||
<view class="u-calendar__content__item__inner" :style="{color: getColor(index,2)}"> |
|||
<view>{{ index + 1 }}</view> |
|||
</view> |
|||
<view class="u-calendar__content__item__tips" :style="{color:activeColor}" v-if="mode== 'range' && startDate==`${year}-${month}-${index+1}` && startDate!=endDate">{{startText}}</view> |
|||
<view class="u-calendar__content__item__tips" :style="{color:activeColor}" v-if="mode== 'range' && endDate==`${year}-${month}-${index+1}`">{{endText}}</view> |
|||
</view> |
|||
<view class="u-calendar__content__bg-month">{{month}}</view> |
|||
</view> |
|||
<view class="u-calendar__bottom"> |
|||
<view class="u-calendar__bottom__choose"> |
|||
<text>{{mode == 'date' ? activeDate : startDate}}</text> |
|||
<text v-if="endDate">至{{endDate}}</text> |
|||
</view> |
|||
<view class="u-calendar__bottom__btn"> |
|||
<u-button :type="btnType" shape="circle" size="default" @click="btnFix(false)">确定</u-button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</u-popup> |
|||
</template> |
|||
<script> |
|||
/** |
|||
* calendar 日历 |
|||
* @description 此组件用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中。 |
|||
* @tutorial http://uviewui.com/components/calendar.html |
|||
* @property {String} mode 选择日期的模式，date-为单个日期，range-为选择日期范围 |
|||
* @property {Boolean} v-model 布尔值变量，用于控制日历的弹出与收起 |
|||
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false) |
|||
* @property {Boolean} change-year 是否显示顶部的切换年份方向的按钮(默认true) |
|||
* @property {Boolean} change-month 是否显示顶部的切换月份方向的按钮(默认true) |
|||
* @property {String Number} max-year 可切换的最大年份(默认2050) |
|||
* @property {String Number} min-year 可切换的最小年份(默认1950) |
|||
* @property {String Number} min-date 最小可选日期(默认1950-01-01) |
|||
* @property {String Number} max-date 最大可选日期(默认当前日期) |
|||
* @property {String Number} 弹窗顶部左右两边的圆角值，单位rpx(默认20) |
|||
* @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭日历(默认true) |
|||
* @property {String} month-arrow-color 月份切换按钮箭头颜色(默认#606266) |
|||
* @property {String} year-arrow-color 年份切换按钮箭头颜色(默认#909399) |
|||
* @property {String} color 日期字体的默认颜色(默认#303133) |
|||
* @property {String} active-bg-color 起始/结束日期按钮的背景色(默认#2979ff) |
|||
* @property {String Number} z-index 弹出时的z-index值(默认10075) |
|||
* @property {String} active-color 起始/结束日期按钮的字体颜色(默认#ffffff) |
|||
* @property {String} range-bg-color 起始/结束日期之间的区域的背景颜色(默认rgba(41,121,255,0.13)) |
|||
* @property {String} range-color 选择范围内字体颜色(默认#2979ff) |
|||
* @property {String} start-text 起始日期底部的提示文字(默认 '开始') |
|||
* @property {String} end-text 结束日期底部的提示文字(默认 '结束') |
|||
* @property {String} btn-type 底部确定按钮的主题(默认 'primary') |
|||
* @property {String} toolTip 顶部提示文字，如设置名为tooltip的slot，此参数将失效(默认 '选择日期') |
|||
* @property {Boolean} closeable 是否显示右上角的关闭图标(默认true) |
|||
* @example <u-calendar v-model="show" :mode="mode"></u-calendar> |
|||
*/ |
|||
|
|||
export default { |
|||
name: 'u-calendar', |
|||
emits: ["update:modelValue", "input", "change"], |
|||
props: { |
|||
// 通过双向绑定控制组件的弹出与收起 |
|||
value: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
modelValue: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
safeAreaInsetBottom: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否允许通过点击遮罩关闭Picker |
|||
maskCloseAble: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 弹出的z-index值 |
|||
zIndex: { |
|||
type: [String, Number], |
|||
default: 0 |
|||
}, |
|||
// 是否允许切换年份 |
|||
changeYear: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否允许切换月份 |
|||
changeMonth: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// date-单个日期选择，range-开始日期+结束日期选择 |
|||
mode: { |
|||
type: String, |
|||
default: 'date' |
|||
}, |
|||
// 可切换的最大年份 |
|||
maxYear: { |
|||
type: [Number, String], |
|||
default: 2050 |
|||
}, |
|||
// 可切换的最小年份 |
|||
minYear: { |
|||
type: [Number, String], |
|||
default: 1950 |
|||
}, |
|||
// 最小可选日期(不在范围内日期禁用不可选) |
|||
minDate: { |
|||
type: [Number, String], |
|||
default: '1950-01-01' |
|||
}, |
|||
/** |
|||
* 最大可选日期 |
|||
* 默认最大值为今天，之后的日期不可选 |
|||
* 2030-12-31 |
|||
* */ |
|||
maxDate: { |
|||
type: [Number, String], |
|||
default: '' |
|||
}, |
|||
// 弹窗顶部左右两边的圆角值 |
|||
borderRadius: { |
|||
type: [String, Number], |
|||
default: 20 |
|||
}, |
|||
// 月份切换按钮箭头颜色 |
|||
monthArrowColor: { |
|||
type: String, |
|||
default: '#606266' |
|||
}, |
|||
// 年份切换按钮箭头颜色 |
|||
yearArrowColor: { |
|||
type: String, |
|||
default: '#909399' |
|||
}, |
|||
// 默认日期字体颜色 |
|||
color: { |
|||
type: String, |
|||
default: '#303133' |
|||
}, |
|||
// 选中|起始结束日期背景色 |
|||
activeBgColor: { |
|||
type: String, |
|||
default: '#2979ff' |
|||
}, |
|||
// 选中|起始结束日期字体颜色 |
|||
activeColor: { |
|||
type: String, |
|||
default: '#ffffff' |
|||
}, |
|||
// 范围内日期背景色 |
|||
rangeBgColor: { |
|||
type: String, |
|||
default: 'rgba(41,121,255,0.13)' |
|||
}, |
|||
// 范围内日期字体颜色 |
|||
rangeColor: { |
|||
type: String, |
|||
default: '#2979ff' |
|||
}, |
|||
// mode=range时生效，起始日期自定义文案 |
|||
startText: { |
|||
type: String, |
|||
default: '开始' |
|||
}, |
|||
// mode=range时生效，结束日期自定义文案 |
|||
endText: { |
|||
type: String, |
|||
default: '结束' |
|||
}, |
|||
//按钮样式类型 |
|||
btnType: { |
|||
type: String, |
|||
default: 'primary' |
|||
}, |
|||
// 当前选中日期带选中效果 |
|||
isActiveCurrent: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 切换年月是否触发事件 mode=date时生效 |
|||
isChange: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否显示右上角的关闭图标 |
|||
closeable: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 顶部的提示文字 |
|||
toolTip: { |
|||
type: String, |
|||
default: '选择日期' |
|||
}, |
|||
// 遮罩的模糊度 |
|||
blur: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
popupValue:false, |
|||
// 星期几,值为1-7 |
|||
weekday: 1, |
|||
weekdayArr:[], |
|||
// 当前月有多少天 |
|||
days: 0, |
|||
daysArr:[], |
|||
showTitle: '', |
|||
year: 2020, |
|||
month: 0, |
|||
day: 0, |
|||
startYear: 0, |
|||
startMonth: 0, |
|||
startDay: 0, |
|||
endYear: 0, |
|||
endMonth: 0, |
|||
endDay: 0, |
|||
today: '', |
|||
activeDate: '', |
|||
startDate: '', |
|||
endDate: '', |
|||
isStart: true, |
|||
min: null, |
|||
max: null, |
|||
weekDayZh: ['日', '一', '二', '三', '四', '五', '六'] |
|||
}; |
|||
}, |
|||
computed: { |
|||
valueCom() { |
|||
// #ifndef VUE3 |
|||
return this.value; |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
return this.modelValue; |
|||
// #endif |
|||
}, |
|||
dataChange() { |
|||
return `${this.mode}-${this.minDate}-${this.maxDate}`; |
|||
}, |
|||
uZIndex() { |
|||
// 如果用户有传递z-index值，优先使用 |
|||
return this.zIndex ? this.zIndex : this.$u.zIndex.popup; |
|||
} |
|||
}, |
|||
watch: { |
|||
dataChange(val) { |
|||
this.init() |
|||
}, |
|||
valueCom:{ |
|||
immediate: true, |
|||
handler(val){ |
|||
this.popupValue = val; |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
this.init() |
|||
}, |
|||
methods: { |
|||
getColor(index, type) { |
|||
let color = type == 1 ? '' : this.color; |
|||
let day = index + 1 |
|||
let date = `${this.year}-${this.month}-${day}` |
|||
let timestamp = new Date(date.replace(/\-/g, '/')).getTime(); |
|||
let start = this.startDate.replace(/\-/g, '/') |
|||
let end = this.endDate.replace(/\-/g, '/') |
|||
if ((this.isActiveCurrent && this.activeDate == date) || this.startDate == date || this.endDate == date) { |
|||
color = type == 1 ? this.activeBgColor : this.activeColor; |
|||
} else if (this.endDate && timestamp > new Date(start).getTime() && timestamp < new Date(end).getTime()) { |
|||
color = type == 1 ? this.rangeBgColor : this.rangeColor; |
|||
} |
|||
return color; |
|||
}, |
|||
init() { |
|||
let now = new Date(); |
|||
this.year = now.getFullYear(); |
|||
this.month = now.getMonth() + 1; |
|||
this.day = now.getDate(); |
|||
this.today = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`; |
|||
this.activeDate = this.today; |
|||
this.min = this.initDate(this.minDate); |
|||
this.max = this.initDate(this.maxDate || this.today); |
|||
this.startDate = ""; |
|||
this.startYear = 0; |
|||
this.startMonth = 0; |
|||
this.startDay = 0; |
|||
this.endYear = 0; |
|||
this.endMonth = 0; |
|||
this.endDay = 0; |
|||
this.endDate = ""; |
|||
this.isStart = true; |
|||
this.changeData(); |
|||
}, |
|||
//日期处理 |
|||
initDate(date) { |
|||
let fdate = date.split('-'); |
|||
return { |
|||
year: Number(fdate[0] || 1920), |
|||
month: Number(fdate[1] || 1), |
|||
day: Number(fdate[2] || 1) |
|||
} |
|||
}, |
|||
openDisAbled: function(year, month, day) { |
|||
let bool = true; |
|||
let date = `${year}/${month}/${day}`; |
|||
// let today = this.today.replace(/\-/g, '/'); |
|||
let min = `${this.min.year}/${this.min.month}/${this.min.day}`; |
|||
let max = `${this.max.year}/${this.max.month}/${this.max.day}`; |
|||
let timestamp = new Date(date).getTime(); |
|||
if (timestamp >= new Date(min).getTime() && timestamp <= new Date(max).getTime()) { |
|||
bool = false; |
|||
} |
|||
return bool; |
|||
}, |
|||
generateArray: function(start, end) { |
|||
return Array.from(new Array(end + 1).keys()).slice(start); |
|||
}, |
|||
formatNum: function(num) { |
|||
return num < 10 ? '0' + num : num + ''; |
|||
}, |
|||
//一个月有多少天 |
|||
getMonthDay(year, month) { |
|||
let days = new Date(year, month, 0).getDate(); |
|||
return days; |
|||
}, |
|||
getWeekday(year, month) { |
|||
let date = new Date(`${year}/${month}/01 00:00:00`); |
|||
return date.getDay(); |
|||
}, |
|||
checkRange(year) { |
|||
let overstep = false; |
|||
if (year < this.minYear || year > this.maxYear) { |
|||
uni.showToast({ |
|||
title: "日期超出范围啦~", |
|||
icon: 'none' |
|||
}) |
|||
overstep = true; |
|||
} |
|||
return overstep; |
|||
}, |
|||
changeMonthHandler(isAdd) { |
|||
if (isAdd) { |
|||
let month = this.month + 1; |
|||
let year = month > 12 ? this.year + 1 : this.year; |
|||
if (!this.checkRange(year)) { |
|||
this.month = month > 12 ? 1 : month; |
|||
this.year = year; |
|||
this.changeData(); |
|||
} |
|||
|
|||
} else { |
|||
let month = this.month - 1; |
|||
let year = month < 1 ? this.year - 1 : this.year; |
|||
if (!this.checkRange(year)) { |
|||
this.month = month < 1 ? 12 : month; |
|||
this.year = year; |
|||
this.changeData(); |
|||
} |
|||
} |
|||
}, |
|||
changeYearHandler(isAdd) { |
|||
let year = isAdd ? this.year + 1 : this.year - 1; |
|||
if (!this.checkRange(year)) { |
|||
this.year = year; |
|||
this.changeData(); |
|||
} |
|||
}, |
|||
changeData() { |
|||
this.days = this.getMonthDay(this.year, this.month); |
|||
this.daysArr=this.generateArray(1,this.days) |
|||
this.weekday = this.getWeekday(this.year, this.month); |
|||
this.weekdayArr=this.generateArray(1,this.weekday) |
|||
this.showTitle = `${this.year}年${this.month}月`; |
|||
if (this.isChange && this.mode == 'date') { |
|||
this.btnFix(true); |
|||
} |
|||
}, |
|||
dateClick: function(day) { |
|||
day += 1; |
|||
if (!this.openDisAbled(this.year, this.month, day)) { |
|||
this.day = day; |
|||
let date = `${this.year}-${this.month}-${day}`; |
|||
if (this.mode == 'date') { |
|||
this.activeDate = date; |
|||
} else { |
|||
let compare = new Date(date.replace(/\-/g, '/')).getTime() < new Date(this.startDate.replace(/\-/g, '/')).getTime() |
|||
if (this.isStart || compare) { |
|||
this.startDate = date; |
|||
this.startYear = this.year; |
|||
this.startMonth = this.month; |
|||
this.startDay = this.day; |
|||
this.endYear = 0; |
|||
this.endMonth = 0; |
|||
this.endDay = 0; |
|||
this.endDate = ""; |
|||
this.activeDate = ""; |
|||
this.isStart = false; |
|||
} else { |
|||
this.endDate = date; |
|||
this.endYear = this.year; |
|||
this.endMonth = this.month; |
|||
this.endDay = this.day; |
|||
this.isStart = true; |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
close() { |
|||
// 修改通过v-model绑定的父组件变量的值为false，从而隐藏日历弹窗 |
|||
this.$emit('input', false); |
|||
this.$emit("update:modelValue", false); |
|||
}, |
|||
getWeekText(date) { |
|||
date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`); |
|||
let week = date.getDay(); |
|||
return '星期' + ['日', '一', '二', '三', '四', '五', '六'][week]; |
|||
}, |
|||
btnFix(show) { |
|||
if (!show) { |
|||
this.close(); |
|||
} |
|||
if (this.mode == 'date') { |
|||
let arr = this.activeDate.split('-') |
|||
let year = this.isChange ? this.year : Number(arr[0]); |
|||
let month = this.isChange ? this.month : Number(arr[1]); |
|||
let day = this.isChange ? this.day : Number(arr[2]); |
|||
//当前月有多少天 |
|||
let days = this.getMonthDay(year, month); |
|||
let result = `${year}-${this.formatNum(month)}-${this.formatNum(day)}`; |
|||
let weekText = this.getWeekText(result); |
|||
let isToday = false; |
|||
if (`${year}-${month}-${day}` == this.today) { |
|||
//今天 |
|||
isToday = true; |
|||
} |
|||
this.$emit('change', { |
|||
year: year, |
|||
month: month, |
|||
day: day, |
|||
days: days, |
|||
result: result, |
|||
week: weekText, |
|||
isToday: isToday, |
|||
// switch: show //是否是切换年月操作 |
|||
}); |
|||
} else { |
|||
if (!this.startDate || !this.endDate) return; |
|||
let startMonth = this.formatNum(this.startMonth); |
|||
let startDay = this.formatNum(this.startDay); |
|||
let startDate = `${this.startYear}-${startMonth}-${startDay}`; |
|||
let startWeek = this.getWeekText(startDate) |
|||
|
|||
let endMonth = this.formatNum(this.endMonth); |
|||
let endDay = this.formatNum(this.endDay); |
|||
let endDate = `${this.endYear}-${endMonth}-${endDay}`; |
|||
let endWeek = this.getWeekText(endDate); |
|||
this.$emit('change', { |
|||
startYear: this.startYear, |
|||
startMonth: this.startMonth, |
|||
startDay: this.startDay, |
|||
startDate: startDate, |
|||
startWeek: startWeek, |
|||
endYear: this.endYear, |
|||
endMonth: this.endMonth, |
|||
endDay: this.endDay, |
|||
endDate: endDate, |
|||
endWeek: endWeek |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-calendar { |
|||
color: $u-content-color; |
|||
|
|||
&__header { |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
font-size: 30rpx; |
|||
background-color: #fff; |
|||
color: $u-main-color; |
|||
|
|||
&__text { |
|||
margin-top: 30rpx; |
|||
padding: 0 60rpx; |
|||
@include vue-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
} |
|||
|
|||
&__action { |
|||
padding: 40rpx 0 40rpx 0; |
|||
|
|||
&__icon { |
|||
margin: 0 16rpx; |
|||
} |
|||
|
|||
&__text { |
|||
padding: 0 16rpx; |
|||
color: $u-main-color; |
|||
font-size: 32rpx; |
|||
line-height: 32rpx; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
|
|||
&__week-day { |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 6px 0; |
|||
overflow: hidden; |
|||
|
|||
&__text { |
|||
flex: 1; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
&__content { |
|||
width: 100%; |
|||
@include vue-flex; |
|||
flex-wrap: wrap; |
|||
padding: 6px 0; |
|||
box-sizing: border-box; |
|||
background-color: #fff; |
|||
position: relative; |
|||
|
|||
&--end-date { |
|||
border-top-right-radius: 8rpx; |
|||
border-bottom-right-radius: 8rpx; |
|||
} |
|||
|
|||
&--start-date { |
|||
border-top-left-radius: 8rpx; |
|||
border-bottom-left-radius: 8rpx; |
|||
} |
|||
|
|||
&__item { |
|||
width: 14.2857%; |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 6px 0; |
|||
overflow: hidden; |
|||
position: relative; |
|||
z-index: 2; |
|||
|
|||
&__inner { |
|||
height: 84rpx; |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
font-size: 32rpx; |
|||
position: relative; |
|||
border-radius: 50%; |
|||
|
|||
&__desc { |
|||
width: 100%; |
|||
font-size: 24rpx; |
|||
line-height: 24rpx; |
|||
transform: scale(0.75); |
|||
transform-origin: center center; |
|||
position: absolute; |
|||
left: 0; |
|||
text-align: center; |
|||
bottom: 2rpx; |
|||
} |
|||
} |
|||
|
|||
&__tips { |
|||
width: 100%; |
|||
font-size: 24rpx; |
|||
line-height: 24rpx; |
|||
position: absolute; |
|||
left: 0; |
|||
transform: scale(0.8); |
|||
transform-origin: center center; |
|||
text-align: center; |
|||
bottom: 8rpx; |
|||
z-index: 2; |
|||
} |
|||
} |
|||
|
|||
&__bg-month { |
|||
position: absolute; |
|||
font-size: 130px; |
|||
line-height: 130px; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%, -50%); |
|||
color: #e4e7ed; |
|||
z-index: 1; |
|||
} |
|||
} |
|||
|
|||
&__bottom { |
|||
width: 100%; |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
background-color: #fff; |
|||
padding: 0 40rpx 30rpx; |
|||
box-sizing: border-box; |
|||
font-size: 24rpx; |
|||
color: $u-tips-color; |
|||
|
|||
&__choose { |
|||
height: 50rpx; |
|||
} |
|||
|
|||
&__btn { |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,267 @@ |
|||
<template> |
|||
<view class="u-keyboard" @touchmove.stop.prevent="() => {}"> |
|||
<view class="u-keyboard-grids"> |
|||
<view class="u-keyboard-grids-item" v-for="(group, i) in abc ? EngKeyBoardList : areaList" :key="i"> |
|||
<view :hover-stay-time="100" @touchstart="carInputClick(i, j)" hover-class="u-carinput-hover" class="u-keyboard-grids-btn" |
|||
v-for="(item, j) in group" :key="j"> |
|||
{{ item }} |
|||
</view> |
|||
</view> |
|||
<view @touchstart="backspaceClick" @touchend="clearTimer" :hover-stay-time="100" class="u-keyboard-back" |
|||
hover-class="u-hover-class"> |
|||
<u-icon :size="38" name="backspace" :bold="true"></u-icon> |
|||
</view> |
|||
<view :hover-stay-time="100" class="u-keyboard-change" hover-class="u-carinput-hover" @click="changeCarInputMode"> |
|||
<text class="zh" :class="[!abc ? 'active' : 'inactive']">中</text> |
|||
/ |
|||
<text class="en" :class="[abc ? 'active' : 'inactive']">英</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "u-keyboard", |
|||
emits: ["change", "backspace"], |
|||
props: { |
|||
// 是否打乱键盘按键的顺序 |
|||
random: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
// 车牌输入时，abc=true为输入车牌号码，bac=false为输入省份中文简称 |
|||
abc: false |
|||
}; |
|||
}, |
|||
computed: { |
|||
areaList() { |
|||
let data = [ |
|||
'京', |
|||
'沪', |
|||
'粤', |
|||
'津', |
|||
'冀', |
|||
'豫', |
|||
'云', |
|||
'辽', |
|||
'黑', |
|||
'湘', |
|||
'皖', |
|||
'鲁', |
|||
'苏', |
|||
'浙', |
|||
'赣', |
|||
'鄂', |
|||
'桂', |
|||
'甘', |
|||
'晋', |
|||
'陕', |
|||
'蒙', |
|||
'吉', |
|||
'闽', |
|||
'贵', |
|||
'渝', |
|||
'川', |
|||
'青', |
|||
'琼', |
|||
'宁', |
|||
'挂', |
|||
'藏', |
|||
'港', |
|||
'澳', |
|||
'新', |
|||
'使', |
|||
'学' |
|||
]; |
|||
let tmp = []; |
|||
// 打乱顺序 |
|||
if (this.random) data = this.$u.randomArray(data); |
|||
// 切割成二维数组 |
|||
tmp[0] = data.slice(0, 10); |
|||
tmp[1] = data.slice(10, 20); |
|||
tmp[2] = data.slice(20, 30); |
|||
tmp[3] = data.slice(30, 36); |
|||
return tmp; |
|||
}, |
|||
EngKeyBoardList() { |
|||
let data = [ |
|||
1, |
|||
2, |
|||
3, |
|||
4, |
|||
5, |
|||
6, |
|||
7, |
|||
8, |
|||
9, |
|||
0, |
|||
'Q', |
|||
'W', |
|||
'E', |
|||
'R', |
|||
'T', |
|||
'Y', |
|||
'U', |
|||
'I', |
|||
'O', |
|||
'P', |
|||
'A', |
|||
'S', |
|||
'D', |
|||
'F', |
|||
'G', |
|||
'H', |
|||
'J', |
|||
'K', |
|||
'L', |
|||
'Z', |
|||
'X', |
|||
'C', |
|||
'V', |
|||
'B', |
|||
'N', |
|||
'M' |
|||
]; |
|||
let tmp = []; |
|||
if (this.random) data = this.$u.randomArray(data); |
|||
tmp[0] = data.slice(0, 10); |
|||
tmp[1] = data.slice(10, 20); |
|||
tmp[2] = data.slice(20, 30); |
|||
tmp[3] = data.slice(30, 36); |
|||
return tmp; |
|||
} |
|||
}, |
|||
methods: { |
|||
// 点击键盘按钮 |
|||
carInputClick(i, j) { |
|||
let value = ''; |
|||
// 不同模式，获取不同数组的值 |
|||
if (this.abc) value = this.EngKeyBoardList[i][j]; |
|||
else value = this.areaList[i][j]; |
|||
if(!this.abc) this.abc = true; |
|||
this.$emit('change', value); |
|||
if(this.vibrate) uni.vibrateShort(); |
|||
}, |
|||
// 修改汽车牌键盘的输入模式，中文|英文 |
|||
changeCarInputMode() { |
|||
this.abc = !this.abc; |
|||
}, |
|||
// 修改汽车牌键盘的输入模式，中文|英文 |
|||
updateCarInputMode(abc) { |
|||
this.abc = abc; |
|||
}, |
|||
// 点击退格键 |
|||
backspaceClick() { |
|||
let count = 1; |
|||
this.backspaceFn(count); |
|||
clearInterval(this.timer); //再次清空定时器，防止重复注册定时器 |
|||
this.timer = null; |
|||
this.timer = setInterval(() => { |
|||
count++; |
|||
this.backspaceFn(count); |
|||
}, 250); |
|||
}, |
|||
backspaceFn(count){ |
|||
this.$emit('backspace',count); |
|||
}, |
|||
clearTimer() { |
|||
clearInterval(this.timer); |
|||
this.timer = null; |
|||
}, |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-keyboard-grids { |
|||
background: rgb(215, 215, 217); |
|||
padding: 24rpx 0; |
|||
position: relative; |
|||
} |
|||
|
|||
.u-keyboard-grids-item { |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.u-keyboard-grids-btn { |
|||
text-decoration: none; |
|||
width: 62rpx; |
|||
flex: 0 0 64rpx; |
|||
height: 80rpx; |
|||
/* #ifndef APP-NVUE */ |
|||
display: inline-flex; |
|||
/* #endif */ |
|||
font-size: 36rpx; |
|||
text-align: center; |
|||
line-height: 80rpx; |
|||
background-color: #fff; |
|||
margin: 8rpx 5rpx; |
|||
border-radius: 8rpx; |
|||
box-shadow: 0 2rpx 0rpx #888992; |
|||
font-weight: 500; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.u-carinput-hover { |
|||
background-color: rgb(185, 188, 195) !important; |
|||
} |
|||
|
|||
.u-keyboard-back { |
|||
position: absolute; |
|||
width: 96rpx; |
|||
right: 22rpx; |
|||
bottom: 32rpx; |
|||
height: 80rpx; |
|||
background-color: rgb(185, 188, 195); |
|||
@include vue-flex; |
|||
align-items: center; |
|||
border-radius: 8rpx; |
|||
justify-content: center; |
|||
box-shadow: 0 2rpx 0rpx #888992; |
|||
} |
|||
|
|||
.u-keyboard-change { |
|||
font-size: 24rpx; |
|||
box-shadow: 0 2rpx 0rpx #888992; |
|||
position: absolute; |
|||
width: 96rpx; |
|||
left: 22rpx; |
|||
line-height: 1; |
|||
bottom: 32rpx; |
|||
height: 80rpx; |
|||
background-color: #ffffff; |
|||
@include vue-flex; |
|||
align-items: center; |
|||
border-radius: 8rpx; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.u-keyboard-change .inactive.zh { |
|||
transform: scale(0.85) translateY(-10rpx); |
|||
} |
|||
|
|||
.u-keyboard-change .inactive.en { |
|||
transform: scale(0.85) translateY(10rpx); |
|||
} |
|||
|
|||
.u-keyboard-change .active { |
|||
color: rgb(237, 112, 64); |
|||
font-size: 30rpx; |
|||
} |
|||
|
|||
.u-keyboard-change .zh { |
|||
transform: translateY(-10rpx); |
|||
} |
|||
|
|||
.u-keyboard-change .en { |
|||
transform: translateY(10rpx); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,300 @@ |
|||
<template> |
|||
<view |
|||
class="u-card" |
|||
@tap.stop="click" |
|||
:class="{ 'u-border': border, 'u-card-full': full, 'u-card--border': borderRadius > 0 }" |
|||
:style="{ |
|||
borderRadius: borderRadius + 'rpx', |
|||
margin: margin, |
|||
boxShadow: boxShadow |
|||
}" |
|||
> |
|||
<view |
|||
v-if="showHead" |
|||
class="u-card__head" |
|||
:style="[{padding: padding + 'rpx'}, headStyle]" |
|||
:class="{ |
|||
'u-border-bottom': headBorderBottom |
|||
}" |
|||
@tap="headClick" |
|||
> |
|||
<view v-if="!$slots.head" class="u-flex u-row-between"> |
|||
<view class="u-card__head--left u-flex u-line-1" v-if="title"> |
|||
<image |
|||
:src="thumb" |
|||
class="u-card__head--left__thumb" |
|||
mode="aspectFill" |
|||
v-if="thumb" |
|||
:style="{ |
|||
height: thumbWidth + 'rpx', |
|||
width: thumbWidth + 'rpx', |
|||
borderRadius: thumbCircle ? '100rpx' : '6rpx' |
|||
}" |
|||
></image> |
|||
<text |
|||
class="u-card__head--left__title u-line-1" |
|||
:style="{ |
|||
fontSize: titleSize + 'rpx', |
|||
color: titleColor |
|||
}" |
|||
> |
|||
{{ title }} |
|||
</text> |
|||
</view> |
|||
<view class="u-card__head--right u-line-1" v-if="subTitle"> |
|||
<text |
|||
class="u-card__head__title__text" |
|||
:style="{ |
|||
fontSize: subTitleSize + 'rpx', |
|||
color: subTitleColor |
|||
}" |
|||
> |
|||
{{ subTitle }} |
|||
</text> |
|||
</view> |
|||
</view> |
|||
<slot name="head" v-else /> |
|||
</view> |
|||
<view @tap="bodyClick" class="u-card__body" :style="[{padding: padding + 'rpx'}, bodyStyle]"><slot name="body" /></view> |
|||
<view |
|||
v-if="showFoot" |
|||
class="u-card__foot" |
|||
@tap="footClick" |
|||
:style="[{padding: $slots.foot ? padding + 'rpx' : 0}, footStyle]" |
|||
:class="{ |
|||
'u-border-top': footBorderTop |
|||
}" |
|||
> |
|||
<slot name="foot" /> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* card 卡片 |
|||
* @description 卡片组件一般用于多个列表条目，且风格统一的场景 |
|||
* @tutorial https://www.uviewui.com/components/card.html |
|||
* @property {Boolean} full 卡片与屏幕两侧是否留空隙（默认false） |
|||
* @property {String} title 头部左边的标题 |
|||
* @property {String} title-color 标题颜色（默认#303133） |
|||
* @property {String | Number} title-size 标题字体大小，单位rpx（默认30） |
|||
* @property {String} sub-title 头部右边的副标题 |
|||
* @property {String} sub-title-color 副标题颜色（默认#909399） |
|||
* @property {String | Number} sub-title-size 副标题字体大小（默认26） |
|||
* @property {Boolean} border 是否显示边框（默认true） |
|||
* @property {String | Number} index 用于标识点击了第几个卡片 |
|||
* @property {String} box-shadow 卡片外围阴影，字符串形式（默认none） |
|||
* @property {String} margin 卡片与屏幕两边和上下元素的间距，需带单位，如"30rpx 20rpx"（默认30rpx） |
|||
* @property {String | Number} border-radius 卡片整体的圆角值，单位rpx（默认16） |
|||
* @property {Object} head-style 头部自定义样式，对象形式 |
|||
* @property {Object} body-style 中部自定义样式，对象形式 |
|||
* @property {Object} foot-style 底部自定义样式，对象形式 |
|||
* @property {Boolean} head-border-bottom 是否显示头部的下边框（默认true） |
|||
* @property {Boolean} foot-border-top 是否显示底部的上边框（默认true） |
|||
* @property {Boolean} show-head 是否显示头部（默认true） |
|||
* @property {Boolean} show-head 是否显示尾部（默认true） |
|||
* @property {String} thumb 缩略图路径，如设置将显示在标题的左边，不建议使用相对路径 |
|||
* @property {String | Number} thumb-width 缩略图的宽度，高等于宽，单位rpx（默认60） |
|||
* @property {Boolean} thumb-circle 缩略图是否为圆形（默认false） |
|||
* @event {Function} click 整个卡片任意位置被点击时触发 |
|||
* @event {Function} head-click 卡片头部被点击时触发 |
|||
* @event {Function} body-click 卡片主体部分被点击时触发 |
|||
* @event {Function} foot-click 卡片底部部分被点击时触发 |
|||
* @example <u-card padding="30" title="card"></u-card> |
|||
*/ |
|||
export default { |
|||
name: 'u-card', |
|||
emits: ["click", "head-click", "body-click", "foot-click"], |
|||
props: { |
|||
// 与屏幕两侧是否留空隙 |
|||
full: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 标题 |
|||
title: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 标题颜色 |
|||
titleColor: { |
|||
type: String, |
|||
default: '#303133' |
|||
}, |
|||
// 标题字体大小，单位rpx |
|||
titleSize: { |
|||
type: [Number, String], |
|||
default: '30' |
|||
}, |
|||
// 副标题 |
|||
subTitle: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 副标题颜色 |
|||
subTitleColor: { |
|||
type: String, |
|||
default: '#909399' |
|||
}, |
|||
// 副标题字体大小，单位rpx |
|||
subTitleSize: { |
|||
type: [Number, String], |
|||
default: '26' |
|||
}, |
|||
// 是否显示外部边框，只对full=false时有效(卡片与边框有空隙时) |
|||
border: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 用于标识点击了第几个 |
|||
index: { |
|||
type: [Number, String, Object], |
|||
default: '' |
|||
}, |
|||
// 用于隔开上下左右的边距，带单位的写法，如："30rpx 30rpx"，"20rpx 20rpx 30rpx 30rpx" |
|||
margin: { |
|||
type: String, |
|||
default: '30rpx' |
|||
}, |
|||
// card卡片的圆角 |
|||
borderRadius: { |
|||
type: [Number, String], |
|||
default: '16' |
|||
}, |
|||
// 头部自定义样式，对象形式 |
|||
headStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
} |
|||
}, |
|||
// 主体自定义样式，对象形式 |
|||
bodyStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
} |
|||
}, |
|||
// 底部自定义样式，对象形式 |
|||
footStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
} |
|||
}, |
|||
// 头部是否下边框 |
|||
headBorderBottom: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 底部是否有上边框 |
|||
footBorderTop: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 标题左边的缩略图 |
|||
thumb: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 缩略图宽高，单位rpx |
|||
thumbWidth: { |
|||
type: [String, Number], |
|||
default: '60' |
|||
}, |
|||
// 缩略图是否为圆形 |
|||
thumbCircle: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 给head，body，foot的内边距 |
|||
padding: { |
|||
type: [String, Number], |
|||
default: '30' |
|||
}, |
|||
// 是否显示头部 |
|||
showHead: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否显示尾部 |
|||
showFoot: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 卡片外围阴影，字符串形式 |
|||
boxShadow: { |
|||
type: String, |
|||
default: 'none' |
|||
} |
|||
}, |
|||
data() { |
|||
return {}; |
|||
}, |
|||
methods: { |
|||
click() { |
|||
this.$emit('click', this.index); |
|||
}, |
|||
headClick() { |
|||
this.$emit('head-click', this.index); |
|||
}, |
|||
bodyClick() { |
|||
this.$emit('body-click', this.index); |
|||
}, |
|||
footClick() { |
|||
this.$emit('foot-click', this.index); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-card { |
|||
position: relative; |
|||
overflow: hidden; |
|||
font-size: 28rpx; |
|||
background-color: #ffffff; |
|||
box-sizing: border-box; |
|||
|
|||
&-full { |
|||
// 如果是与屏幕之间不留空隙，应该设置左右边距为0 |
|||
margin-left: 0 !important; |
|||
margin-right: 0 !important; |
|||
width: 100%; |
|||
} |
|||
|
|||
&--border:after { |
|||
border-radius: 16rpx; |
|||
} |
|||
|
|||
&__head { |
|||
&--left { |
|||
color: $u-main-color; |
|||
|
|||
&__thumb { |
|||
margin-right: 16rpx; |
|||
} |
|||
|
|||
&__title { |
|||
max-width: 400rpx; |
|||
} |
|||
} |
|||
|
|||
&--right { |
|||
color: $u-tips-color; |
|||
margin-left: 6rpx; |
|||
} |
|||
} |
|||
|
|||
&__body { |
|||
color: $u-content-color; |
|||
} |
|||
|
|||
&__foot { |
|||
color: $u-tips-color; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,70 @@ |
|||
<template> |
|||
<view class="u-cell-box"> |
|||
<view class="u-cell-title" v-if="title" :style="[titleStyle]"> |
|||
{{title}} |
|||
</view> |
|||
<view class="u-cell-item-box" :class="{'u-border-bottom u-border-top': border}"> |
|||
<slot /> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* cellGroup 单元格父组件Group |
|||
* @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。搭配u-cell-item |
|||
* @tutorial https://www.uviewui.com/components/cell.html |
|||
* @property {String} title 分组标题 |
|||
* @property {Boolean} border 是否显示外边框（默认true） |
|||
* @property {Object} title-style 分组标题的的样式，对象形式，如{'font-size': '24rpx'} 或 {'fontSize': '24rpx'} |
|||
* @example <u-cell-group title="设置喜好"> |
|||
*/ |
|||
export default { |
|||
name: "u-cell-group", |
|||
props: { |
|||
// 分组标题 |
|||
title: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 是否显示分组list上下边框 |
|||
border: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 分组标题的样式，对象形式，注意驼峰属性写法 |
|||
// 类似 {'font-size': '24rpx'} 和 {'fontSize': '24rpx'} |
|||
titleStyle: { |
|||
type: Object, |
|||
default () { |
|||
return {}; |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
index: 0, |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-cell-box { |
|||
width: 100%; |
|||
} |
|||
|
|||
.u-cell-title { |
|||
padding: 30rpx 32rpx 10rpx 32rpx; |
|||
font-size: 30rpx; |
|||
text-align: left; |
|||
color: $u-tips-color; |
|||
} |
|||
|
|||
.u-cell-item-box { |
|||
background-color: #FFFFFF; |
|||
flex-direction: row; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,317 @@ |
|||
<template> |
|||
<view |
|||
@tap="click" |
|||
class="u-cell" |
|||
:class="{ 'u-border-bottom': borderBottom, 'u-border-top': borderTop, 'u-col-center': center, 'u-cell--required': required }" |
|||
hover-stay-time="150" |
|||
:hover-class="hoverClass" |
|||
:style="{ |
|||
backgroundColor: bgColor |
|||
}" |
|||
> |
|||
<u-icon :size="iconSize" :name="icon" v-if="icon" :custom-style="iconStyle" class="u-cell__left-icon-wrap"></u-icon> |
|||
<view class="u-flex" v-else> |
|||
<slot name="icon"></slot> |
|||
</view> |
|||
<view |
|||
class="u-cell_title" |
|||
:style="[ |
|||
{ |
|||
width: titleWidth ? titleWidth + 'rpx' : 'auto' |
|||
}, |
|||
titleStyle |
|||
]" |
|||
> |
|||
<block v-if="title !== ''">{{ title }}</block> |
|||
<slot name="title" v-else></slot> |
|||
|
|||
<view class="u-cell__label" v-if="label || $slots.label" :style="[labelStyle]"> |
|||
<block v-if="label !== ''">{{ label }}</block> |
|||
<slot name="label" v-else></slot> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="u-cell__value" :style="[valueStyle]"> |
|||
<block class="u-cell__value" v-if="value !== ''">{{ value }}</block> |
|||
<slot v-else></slot> |
|||
</view> |
|||
<view class="u-flex u-cell_right" v-if="$slots['right-icon']"> |
|||
<slot name="right-icon"></slot> |
|||
</view> |
|||
<u-icon v-if="arrow" name="arrow-right" :style="[arrowStyle]" class="u-icon-wrap u-cell__right-icon-wrap"></u-icon> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* cellItem 单元格Item |
|||
* @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。搭配u-cell-group使用 |
|||
* @tutorial https://www.uviewui.com/components/cell.html |
|||
* @property {String} title 左侧标题 |
|||
* @property {String} icon 左侧图标名，只支持uView内置图标，见Icon 图标 |
|||
* @property {Object} icon-style 左边图标的样式，对象形式 |
|||
* @property {String} value 右侧内容 |
|||
* @property {String} label 标题下方的描述信息 |
|||
* @property {Boolean} border-bottom 是否显示cell的下边框（默认true） |
|||
* @property {Boolean} border-top 是否显示cell的上边框（默认false） |
|||
* @property {Boolean} center 是否使内容垂直居中（默认false） |
|||
* @property {String} hover-class 是否开启点击反馈，none为无效果（默认true） |
|||
* // @property {Boolean} border-gap border-bottom为true时，Cell列表中间的条目的下边框是否与左边有一个间隔（默认true） |
|||
* @property {Boolean} arrow 是否显示右侧箭头（默认true） |
|||
* @property {Boolean} required 箭头方向，可选值（默认right） |
|||
* @property {Boolean} arrow-direction 是否显示左边表示必填的星号（默认false） |
|||
* @property {Object} title-style 标题样式，对象形式 |
|||
* @property {Object} value-style 右侧内容样式，对象形式 |
|||
* @property {Object} label-style 标题下方描述信息的样式，对象形式 |
|||
* @property {String} bg-color 背景颜色（默认transparent） |
|||
* @property {String Number} index 用于在click事件回调中返回，标识当前是第几个Item |
|||
* @property {String Number} title-width 标题的宽度，单位rpx |
|||
* @example <u-cell-item icon="integral-fill" title="会员等级" value="新版本"></u-cell-item> |
|||
*/ |
|||
export default { |
|||
name: 'u-cell-item', |
|||
emits: ["click"], |
|||
props: { |
|||
// 左侧图标名称(只能uView内置图标)，或者图标src |
|||
icon: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 左侧标题 |
|||
title: { |
|||
type: [String, Number], |
|||
default: '' |
|||
}, |
|||
// 右侧内容 |
|||
value: { |
|||
type: [String, Number], |
|||
default: '' |
|||
}, |
|||
// 标题下方的描述信息 |
|||
label: { |
|||
type: [String, Number], |
|||
default: '' |
|||
}, |
|||
// 是否显示下边框 |
|||
borderBottom: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否显示上边框 |
|||
borderTop: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 多个cell中，中间的cell显示下划线时，下划线是否给一个到左边的距离 |
|||
// 1.4.0版本废除此参数，默认边框由border-top和border-bottom提供，此参数会造成干扰 |
|||
// borderGap: { |
|||
// type: Boolean, |
|||
// default: true |
|||
// }, |
|||
// 是否开启点击反馈，即点击时cell背景为灰色，none为无效果 |
|||
hoverClass: { |
|||
type: String, |
|||
default: 'u-cell-hover' |
|||
}, |
|||
// 是否显示右侧箭头 |
|||
arrow: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 内容是否垂直居中 |
|||
center: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否显示左边表示必填的星号 |
|||
required: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 标题的宽度，单位rpx |
|||
titleWidth: { |
|||
type: [Number, String], |
|||
default: '' |
|||
}, |
|||
// 右侧箭头方向，可选值：right|up|down，默认为right |
|||
arrowDirection: { |
|||
type: String, |
|||
default: 'right' |
|||
}, |
|||
// 控制标题的样式 |
|||
titleStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
} |
|||
}, |
|||
// 右侧显示内容的样式 |
|||
valueStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
} |
|||
}, |
|||
// 描述信息的样式 |
|||
labelStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
} |
|||
}, |
|||
// 背景颜色 |
|||
bgColor: { |
|||
type: String, |
|||
default: 'transparent' |
|||
}, |
|||
// 用于识别被点击的是第几个cell |
|||
index: { |
|||
type: [String, Number], |
|||
default: '' |
|||
}, |
|||
// 是否使用lable插槽 |
|||
useLabelSlot: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 左边图标的大小，单位rpx，只对传入icon字段时有效 |
|||
iconSize: { |
|||
type: [Number, String], |
|||
default: 34 |
|||
}, |
|||
// 左边图标的样式，对象形式 |
|||
iconStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {} |
|||
} |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
}; |
|||
}, |
|||
computed: { |
|||
arrowStyle() { |
|||
let style = {}; |
|||
if (this.arrowDirection == 'up') style.transform = 'rotate(-90deg)'; |
|||
else if (this.arrowDirection == 'down') style.transform = 'rotate(90deg)'; |
|||
else style.transform = 'rotate(0deg)'; |
|||
return style; |
|||
} |
|||
}, |
|||
methods: { |
|||
click() { |
|||
this.$emit('click', this.index); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
.u-cell { |
|||
@include vue-flex; |
|||
align-items: center; |
|||
position: relative; |
|||
/* #ifndef APP-NVUE */ |
|||
box-sizing: border-box; |
|||
/* #endif */ |
|||
width: 100%; |
|||
padding: 26rpx 32rpx; |
|||
font-size: 28rpx; |
|||
line-height: 54rpx; |
|||
color: $u-content-color; |
|||
background-color: #fff; |
|||
text-align: left; |
|||
} |
|||
|
|||
.u-cell_title { |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.u-cell__left-icon-wrap { |
|||
margin-right: 10rpx; |
|||
font-size: 32rpx; |
|||
} |
|||
|
|||
.u-cell__right-icon-wrap { |
|||
margin-left: 10rpx; |
|||
color: #969799; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.u-cell__left-icon-wrap, |
|||
.u-cell__right-icon-wrap { |
|||
@include vue-flex; |
|||
align-items: center; |
|||
height: 48rpx; |
|||
} |
|||
|
|||
.u-cell-border:after { |
|||
position: absolute; |
|||
/* #ifndef APP-NVUE */ |
|||
box-sizing: border-box; |
|||
content: ' '; |
|||
pointer-events: none; |
|||
border-bottom: 1px solid $u-border-color; |
|||
/* #endif */ |
|||
right: 0; |
|||
left: 0; |
|||
top: 0; |
|||
transform: scaleY(0.5); |
|||
} |
|||
|
|||
.u-cell-border { |
|||
position: relative; |
|||
} |
|||
|
|||
.u-cell__label { |
|||
margin-top: 6rpx; |
|||
font-size: 26rpx; |
|||
line-height: 36rpx; |
|||
color: $u-tips-color; |
|||
/* #ifndef APP-NVUE */ |
|||
word-wrap: break-word; |
|||
/* #endif */ |
|||
} |
|||
|
|||
.u-cell__value { |
|||
overflow: hidden; |
|||
text-align: right; |
|||
/* #ifndef APP-NVUE */ |
|||
vertical-align: middle; |
|||
/* #endif */ |
|||
color: $u-tips-color; |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
.u-cell__title, |
|||
.u-cell__value { |
|||
flex: 1; |
|||
} |
|||
|
|||
.u-cell--required { |
|||
/* #ifndef APP-NVUE */ |
|||
overflow: visible; |
|||
/* #endif */ |
|||
@include vue-flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.u-cell--required:before { |
|||
position: absolute; |
|||
/* #ifndef APP-NVUE */ |
|||
content: '*'; |
|||
/* #endif */ |
|||
left: 8px; |
|||
margin-top: 4rpx; |
|||
font-size: 14px; |
|||
color: $u-type-error; |
|||
} |
|||
|
|||
.u-cell_right { |
|||
line-height: 1; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,178 @@ |
|||
<template> |
|||
<view class="u-checkbox-group u-clearfix" :class="uFromData.inputAlign == 'right' ? 'flex-end' : ''"><slot></slot></view> |
|||
</template> |
|||
|
|||
<script> |
|||
import Emitter from "../../libs/util/emitter.js"; |
|||
/** |
|||
* checkboxGroup 开关选择器父组件Group |
|||
* @description 复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便 |
|||
* @tutorial https://www.uviewui.com/components/checkbox.html |
|||
* @property {String Number} max 最多能选中多少个checkbox（默认999） |
|||
* @property {String Number} size 组件整体的大小，单位rpx（默认40） |
|||
* @property {Boolean} disabled 是否禁用所有checkbox（默认false） |
|||
* @property {String Number} icon-size 图标大小，单位rpx（默认20） |
|||
* @property {Boolean} label-disabled 是否禁止点击文本操作checkbox(默认false) |
|||
* @property {String} width 宽度，需带单位 |
|||
* @property {String} width 宽度，需带单位 |
|||
* @property {String} shape 外观形状，shape-方形，circle-圆形(默认circle) |
|||
* @property {Boolean} wrap 是否每个checkbox都换行（默认false） |
|||
* @property {String} active-color 选中时的颜色，应用到所有子Checkbox组件（默认#2979ff） |
|||
* @event {Function} change 任一个checkbox状态发生变化时触发，回调为一个对象 |
|||
* @example <u-checkbox-group></u-checkbox-group> |
|||
*/ |
|||
export default { |
|||
name: "u-checkbox-group", |
|||
emits: ["update:modelValue", "input", "change"], |
|||
mixins: [Emitter], |
|||
props: { |
|||
// 匹配某一个radio组件，如果某个radio的name值等于此值，那么这个radio就被会选中 |
|||
value: { |
|||
type: [String, Number, Array, Boolean], |
|||
default: "" |
|||
}, |
|||
modelValue: { |
|||
type: [String, Number, Array, Boolean], |
|||
default: "" |
|||
}, |
|||
// 最多能选中多少个checkbox |
|||
max: { |
|||
type: [Number, String], |
|||
default: 999 |
|||
}, |
|||
// 所有选中项的 name |
|||
// value: { |
|||
// default: Array, |
|||
// default() { |
|||
// return [] |
|||
// } |
|||
// }, |
|||
// 是否禁用所有复选框 |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 在表单内提交时的标识符 |
|||
name: { |
|||
type: [Boolean, String], |
|||
default: "" |
|||
}, |
|||
// 是否禁止点击提示语选中复选框 |
|||
labelDisabled: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 形状，square为方形，circle为圆型 |
|||
shape: { |
|||
type: String, |
|||
default: "square" |
|||
}, |
|||
// 选中状态下的颜色 |
|||
activeColor: { |
|||
type: String, |
|||
default: "#2979ff" |
|||
}, |
|||
// 组件的整体大小 |
|||
size: { |
|||
type: [String, Number], |
|||
default: 34 |
|||
}, |
|||
// 每个checkbox占u-checkbox-group的宽度 |
|||
width: { |
|||
type: String, |
|||
default: "auto" |
|||
}, |
|||
// 是否每个checkbox都换行 |
|||
wrap: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 图标的大小，单位rpx |
|||
iconSize: { |
|||
type: [String, Number], |
|||
default: 20 |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
values: [], |
|||
uFromData: { |
|||
inputAlign: "left" |
|||
} |
|||
}; |
|||
}, |
|||
created() { |
|||
// 如果将children定义在data中，在微信小程序会造成循环引用而报错 |
|||
this.children = []; |
|||
}, |
|||
mounted() { |
|||
// 支付宝、头条小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环应用 |
|||
let parent = this.$u.$parent.call(this, "u-form"); |
|||
if (parent) { |
|||
Object.keys(this.uFromData).map(key => { |
|||
this.uFromData[key] = parent[key]; |
|||
}); |
|||
} |
|||
}, |
|||
methods: { |
|||
emitEvent(obj) { |
|||
let values = this.values || []; |
|||
if (obj.value) { |
|||
let index = values.indexOf(obj.name); |
|||
if (index === -1) { |
|||
values.push(obj.name); |
|||
} |
|||
} else { |
|||
let index = values.indexOf(obj.name); |
|||
if (index > -1) { |
|||
values.splice(index, 1); |
|||
} |
|||
} |
|||
|
|||
this.$emit("change", values); |
|||
// 通过emit事件，设置父组件通过v-model双向绑定的值 |
|||
this.$emit("input", values); |
|||
this.$emit("update:modelValue", values); |
|||
// 发出事件，用于在表单组件中嵌入checkbox的情况，进行验证 |
|||
// 由于头条小程序执行迟钝，故需要用几十毫秒的延时 |
|||
setTimeout(() => { |
|||
// 将当前的值发送到 u-form-item 进行校验 |
|||
this.dispatch("u-form-item", "onFieldChange", values); |
|||
}, 60); |
|||
}, |
|||
_emitEvent(obj) { |
|||
let values = this.values || []; |
|||
if (obj.value) { |
|||
let index = values.indexOf(obj.name); |
|||
if (index === -1) { |
|||
values.push(obj.name); |
|||
} |
|||
} else { |
|||
let index = values.indexOf(obj.name); |
|||
if (index > -1) { |
|||
values.splice(index, 1); |
|||
} |
|||
} |
|||
//this.$emit("change", values); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-checkbox-group { |
|||
/* #ifndef MP || APP-NVUE */ |
|||
display: inline-flex; |
|||
flex-wrap: wrap; |
|||
/* #endif */ |
|||
} |
|||
.u-checkbox-group.flex-end { |
|||
/* #ifndef APP-NVUE */ |
|||
display: inline-flex; |
|||
justify-content: flex-end; |
|||
flex-wrap: wrap; |
|||
/* #endif */ |
|||
} |
|||
</style> |
|||
@ -0,0 +1,322 @@ |
|||
<template> |
|||
<view class="u-checkbox" :style="[checkboxStyle]"> |
|||
<view class="u-checkbox__icon-wrap" @tap="toggle" :class="[iconClass]" :style="[iconStyle]"> |
|||
<u-icon class="u-checkbox__icon-wrap__icon" name="checkbox-mark" :size="checkboxIconSize" :color="iconColor" /> |
|||
</view> |
|||
<view |
|||
class="u-checkbox__label" |
|||
@tap="onClickLabel" |
|||
:style="{ |
|||
fontSize: $u.addUnit(labelSize) |
|||
}" |
|||
> |
|||
<slot /> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* checkbox 复选框 |
|||
* @description 该组件需要搭配checkboxGroup组件使用，以便用户进行操作时，获得当前复选框组的选中情况。 |
|||
* @tutorial https://www.uviewui.com/components/checkbox.html |
|||
* @property {String Number} icon-size 图标大小，单位rpx（默认20） |
|||
* @property {String Number} label-size label字体大小，单位rpx（默认28） |
|||
* @property {String Number} name checkbox组件的标示符 |
|||
* @property {String} shape 形状，外观形状，shape-方形，circle-圆形(默认circle) |
|||
* @property {Boolean} disabled 是否禁用 |
|||
* @property {Boolean} label-disabled 是否禁止点击文本操作checkbox |
|||
* @property {String} active-color 选中时的颜色，如设置CheckboxGroup的active-color将失效 |
|||
* @event {Function} change 某个checkbox状态发生变化时触发，回调为一个对象 |
|||
* @example <u-checkbox v-model="checked" :disabled="false">天涯</u-checkbox> |
|||
*/ |
|||
export default { |
|||
name: "u-checkbox", |
|||
emits: ["update:modelValue", "input", "change"], |
|||
props: { |
|||
// 是否为选中状态 |
|||
value: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
modelValue: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// checkbox的名称 |
|||
name: { |
|||
type: [String, Number], |
|||
default: "" |
|||
}, |
|||
// 形状，square为方形，circle为圆型 |
|||
shape: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
// 是否禁用 |
|||
disabled: { |
|||
type: [String, Boolean], |
|||
default: "" |
|||
}, |
|||
// 是否禁止点击提示语选中复选框 |
|||
labelDisabled: { |
|||
type: [String, Boolean], |
|||
default: "" |
|||
}, |
|||
// 选中状态下的颜色，如设置此值，将会覆盖checkboxGroup的activeColor值 |
|||
activeColor: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
// 图标的大小，单位rpx |
|||
iconSize: { |
|||
type: [String, Number], |
|||
default: "" |
|||
}, |
|||
// label的字体大小，rpx单位 |
|||
labelSize: { |
|||
type: [String, Number], |
|||
default: "" |
|||
}, |
|||
// 组件的整体大小 |
|||
size: { |
|||
type: [String, Number], |
|||
default: "" |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
parentDisabled: false, |
|||
newParams: {} |
|||
}; |
|||
}, |
|||
created() { |
|||
// 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环应用 |
|||
this.parent = this.$u.$parent.call(this, "u-checkbox-group"); |
|||
// 如果存在u-checkbox-group，将本组件的this塞进父组件的children中 |
|||
this.parent && this.parent.children.push(this); |
|||
}, |
|||
computed: { |
|||
valueCom() { |
|||
// #ifndef VUE3 |
|||
return this.value; |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
return this.modelValue; |
|||
// #endif |
|||
}, |
|||
// 是否禁用，如果父组件u-checkbox-group禁用的话，将会忽略子组件的配置 |
|||
isDisabled() { |
|||
return this.disabled !== "" ? this.disabled : this.parent ? this.parent.disabled : false; |
|||
}, |
|||
// 是否禁用label点击 |
|||
isLabelDisabled() { |
|||
return this.labelDisabled !== "" ? this.labelDisabled : this.parent ? this.parent.labelDisabled : false; |
|||
}, |
|||
// 组件尺寸，对应size的值，默认值为34rpx |
|||
checkboxSize() { |
|||
return this.size ? this.size : this.parent ? this.parent.size : 34; |
|||
}, |
|||
// 组件的勾选图标的尺寸，默认20 |
|||
checkboxIconSize() { |
|||
return this.iconSize ? this.iconSize : this.parent ? this.parent.iconSize : 20; |
|||
}, |
|||
// 组件选中激活时的颜色 |
|||
elActiveColor() { |
|||
return this.activeColor ? this.activeColor : this.parent ? this.parent.activeColor : "primary"; |
|||
}, |
|||
// 组件的形状 |
|||
elShape() { |
|||
return this.shape ? this.shape : this.parent ? this.parent.shape : "square"; |
|||
}, |
|||
iconStyle() { |
|||
let style = {}; |
|||
// 既要判断是否手动禁用，还要判断用户v-model绑定的值，如果绑定为false，那么也无法选中 |
|||
if (this.elActiveColor && this.valueCom && !this.isDisabled) { |
|||
style.borderColor = this.elActiveColor; |
|||
style.backgroundColor = this.elActiveColor; |
|||
} |
|||
style.width = this.$u.addUnit(this.checkboxSize); |
|||
style.height = this.$u.addUnit(this.checkboxSize); |
|||
return style; |
|||
}, |
|||
// checkbox内部的勾选图标，如果选中状态，为白色，否则为透明色即可 |
|||
iconColor() { |
|||
return this.valueCom ? "#ffffff" : "transparent"; |
|||
}, |
|||
iconClass() { |
|||
let classes = []; |
|||
classes.push("u-checkbox__icon-wrap--" + this.elShape); |
|||
if (this.valueCom == true) classes.push("u-checkbox__icon-wrap--checked"); |
|||
if (this.isDisabled) classes.push("u-checkbox__icon-wrap--disabled"); |
|||
if (this.valueCom && this.isDisabled) classes.push("u-checkbox__icon-wrap--disabled--checked"); |
|||
// 支付宝小程序无法动态绑定一个数组类名，否则解析出来的结果会带有","，而导致失效 |
|||
return classes.join(" "); |
|||
}, |
|||
checkboxStyle() { |
|||
let style = {}; |
|||
if (this.parent && this.parent.width) { |
|||
style.width = this.parent.width; |
|||
// #ifdef MP |
|||
// 各家小程序因为它们特殊的编译结构，使用float布局 |
|||
style.float = "left"; |
|||
// #endif |
|||
// #ifndef MP |
|||
// H5和APP使用flex布局 |
|||
style.flex = `0 0 ${this.parent.width}`; |
|||
// #endif |
|||
} |
|||
if (this.parent && this.parent.wrap) { |
|||
style.width = "100%"; |
|||
// #ifndef MP |
|||
// H5和APP使用flex布局，将宽度设置100%，即可自动换行 |
|||
style.flex = "0 0 100%"; |
|||
// #endif |
|||
} |
|||
return style; |
|||
} |
|||
}, |
|||
mounted() { |
|||
this._emitEvent(); |
|||
}, |
|||
watch: { |
|||
valueCom: { |
|||
handler: function(newVal, oldVal) { |
|||
this._emitEvent(); |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
_emitEvent() { |
|||
let value = this.valueCom; |
|||
let obj = { |
|||
value, |
|||
name: this.name |
|||
}; |
|||
// 执行父组件u-checkbox-group的事件方法 |
|||
if (this.parent && this.parent.emitEvent) this.parent._emitEvent(obj); |
|||
}, |
|||
onClickLabel() { |
|||
if (!this.isLabelDisabled && !this.isDisabled) { |
|||
this.setValue(); |
|||
} |
|||
}, |
|||
toggle() { |
|||
if (!this.isDisabled) { |
|||
this.setValue(); |
|||
} |
|||
}, |
|||
emitEvent() { |
|||
let obj = { |
|||
value: !this.valueCom, |
|||
name: this.name |
|||
}; |
|||
this.$emit("change", obj); |
|||
// 执行父组件u-checkbox-group的事件方法 |
|||
if (this.parent && this.parent.emitEvent) this.parent.emitEvent(obj); |
|||
}, |
|||
// 设置input的值，这里通过input事件，设置通过v-model绑定的组件的值 |
|||
setValue() { |
|||
let value = this.valueCom; |
|||
// 判断是否超过了可选的最大数量 |
|||
let checkedNum = 0; |
|||
if (this.parent && this.parent.children) { |
|||
// 只要父组件的某一个子元素的value为true，就加1(已有的选中数量) |
|||
this.parent.children.map(val => { |
|||
if (val.value) checkedNum++; |
|||
}); |
|||
} |
|||
// 如果原来为选中状态，那么可以取消 |
|||
if (value == true) { |
|||
this.emitEvent(); |
|||
this.$emit("input", !value); |
|||
this.$emit("update:modelValue", !value); |
|||
} else { |
|||
// 如果超出最多可选项，提示 |
|||
if (this.parent && checkedNum >= this.parent.max) { |
|||
return this.$u.toast(`最多可选${this.parent.max}项`); |
|||
} |
|||
// 如果原来为未选中状态，需要选中的数量少于父组件中设置的max值，才可以选中 |
|||
this.emitEvent(); |
|||
this.$emit("input", !value); |
|||
this.$emit("update:modelValue", !value); |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-checkbox { |
|||
/* #ifndef APP-NVUE */ |
|||
display: inline-flex; |
|||
/* #endif */ |
|||
align-items: center; |
|||
overflow: hidden; |
|||
user-select: none; |
|||
line-height: 1.8; |
|||
|
|||
&__icon-wrap { |
|||
color: $u-content-color; |
|||
flex: none; |
|||
display: -webkit-flex; |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
box-sizing: border-box; |
|||
width: 42rpx; |
|||
height: 42rpx; |
|||
color: transparent; |
|||
text-align: center; |
|||
transition-property: color, border-color, background-color; |
|||
font-size: 20px; |
|||
border: 1px solid #c8c9cc; |
|||
transition-duration: 0.2s; |
|||
|
|||
/* #ifdef MP-TOUTIAO */ |
|||
// 头条小程序兼容性问题，需要设置行高为0，否则图标偏下 |
|||
&__icon { |
|||
line-height: 0; |
|||
} |
|||
/* #endif */ |
|||
|
|||
&--circle { |
|||
border-radius: 100%; |
|||
} |
|||
|
|||
&--square { |
|||
border-radius: 6rpx; |
|||
} |
|||
|
|||
&--checked { |
|||
color: #fff; |
|||
background-color: $u-type-primary; |
|||
border-color: $u-type-primary; |
|||
} |
|||
|
|||
&--disabled { |
|||
background-color: #ebedf0; |
|||
border-color: #c8c9cc; |
|||
} |
|||
|
|||
&--disabled--checked { |
|||
color: #c8c9cc !important; |
|||
} |
|||
} |
|||
|
|||
&__label { |
|||
word-wrap: break-word; |
|||
margin-left: 10rpx; |
|||
margin-right: 24rpx; |
|||
color: $u-content-color; |
|||
font-size: 30rpx; |
|||
|
|||
&--disabled { |
|||
color: #c8c9cc; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,220 @@ |
|||
<template> |
|||
<view |
|||
class="u-circle-progress" |
|||
:style="{ |
|||
width: widthPx + 'px', |
|||
height: widthPx + 'px', |
|||
backgroundColor: bgColor |
|||
}" |
|||
> |
|||
<!-- 支付宝小程序不支持canvas-id属性，必须用id属性 --> |
|||
<canvas |
|||
class="u-canvas-bg" |
|||
:canvas-id="elBgId" |
|||
:id="elBgId" |
|||
:style="{ |
|||
width: widthPx + 'px', |
|||
height: widthPx + 'px' |
|||
}" |
|||
></canvas> |
|||
<canvas |
|||
class="u-canvas" |
|||
:canvas-id="elId" |
|||
:id="elId" |
|||
:style="{ |
|||
width: widthPx + 'px', |
|||
height: widthPx + 'px' |
|||
}" |
|||
></canvas> |
|||
<slot></slot> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* circleProgress 环形进度条 |
|||
* @description 展示操作或任务的当前进度，比如上传文件，是一个圆形的进度条。注意：此组件的percent值只能动态增加，不能动态减少。 |
|||
* @tutorial https://www.uviewui.com/components/circleProgress.html |
|||
* @property {String Number} percent 圆环进度百分比值，为数值类型，0-100 |
|||
* @property {String} inactive-color 圆环的底色，默认为灰色(该值无法动态变更)（默认#ececec） |
|||
* @property {String} active-color 圆环激活部分的颜色(该值无法动态变更)（默认#19be6b） |
|||
* @property {String Number} width 整个圆环组件的宽度，高度默认等于宽度值，单位rpx（默认200） |
|||
* @property {String Number} border-width 圆环的边框宽度，单位rpx（默认14） |
|||
* @property {String Number} duration 整个圆环执行一圈的时间，单位ms（默认呢1500） |
|||
* @property {String} type 如设置，active-color值将会失效 |
|||
* @property {String} bg-color 整个组件背景颜色，默认为白色 |
|||
* @example <u-circle-progress active-color="#2979ff" :percent="80"></u-circle-progress> |
|||
*/ |
|||
export default { |
|||
name: 'u-circle-progress', |
|||
props: { |
|||
// 圆环进度百分比值 |
|||
percent: { |
|||
type: Number, |
|||
default: 0, |
|||
// 限制值在0到100之间 |
|||
validator: val => { |
|||
return val >= 0 && val <= 100; |
|||
} |
|||
}, |
|||
// 底部圆环的颜色（灰色的圆环） |
|||
inactiveColor: { |
|||
type: String, |
|||
default: '#ececec' |
|||
}, |
|||
// 圆环激活部分的颜色 |
|||
activeColor: { |
|||
type: String, |
|||
default: '#19be6b' |
|||
}, |
|||
// 圆环线条的宽度，单位rpx |
|||
borderWidth: { |
|||
type: [Number, String], |
|||
default: 14 |
|||
}, |
|||
// 整个圆形的宽度，单位rpx |
|||
width: { |
|||
type: [Number, String], |
|||
default: 200 |
|||
}, |
|||
// 整个圆环执行一圈的时间，单位ms |
|||
duration: { |
|||
type: [Number, String], |
|||
default: 1500 |
|||
}, |
|||
// 主题类型 |
|||
type: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 整个圆环进度区域的背景色 |
|||
bgColor: { |
|||
type: String, |
|||
default: '#ffffff' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
// #ifdef MP-WEIXIN |
|||
elBgId: 'uCircleProgressBgId', // 微信小程序中不能使用this.$u.guid()形式动态生成id值，否则会报错 |
|||
elId: 'uCircleProgressElId', |
|||
// #endif |
|||
// #ifndef MP-WEIXIN |
|||
elBgId: this.$u.guid(), // 非微信端的时候，需用动态的id，否则一个页面多个圆形进度条组件数据会混乱 |
|||
elId: this.$u.guid(), |
|||
// #endif |
|||
widthPx: uni.upx2px(this.width), // 转成px后的整个组件的背景宽度 |
|||
borderWidthPx: uni.upx2px(this.borderWidth), // 转成px后的圆环的宽度 |
|||
startAngle: -Math.PI / 2, // canvas画圆的起始角度，默认为3点钟方向，定位到12点钟方向 |
|||
progressContext: null, // 活动圆的canvas上下文 |
|||
newPercent: 0, // 当动态修改进度值的时候，保存进度值的变化前后值，用于比较用 |
|||
oldPercent: 0 // 当动态修改进度值的时候，保存进度值的变化前后值，用于比较用 |
|||
}; |
|||
}, |
|||
watch: { |
|||
percent(nVal, oVal = 0) { |
|||
if (nVal > 100) nVal = 100; |
|||
if (nVal < 0) oVal = 0; |
|||
// 此值其实等于this.percent，命名一个新 |
|||
this.newPercent = nVal; |
|||
this.oldPercent = oVal; |
|||
setTimeout(() => { |
|||
// 无论是百分比值增加还是减少，需要操作还是原来的旧的百分比值 |
|||
// 将此值减少或者新增到新的百分比值 |
|||
this.drawCircleByProgress(oVal); |
|||
}, 50); |
|||
} |
|||
}, |
|||
created() { |
|||
// 赋值，用于加载后第一个画圆使用 |
|||
this.newPercent = this.percent; |
|||
this.oldPercent = 0; |
|||
}, |
|||
computed: { |
|||
// 有type主题时，优先起作用 |
|||
circleColor() { |
|||
if (['success', 'error', 'info', 'primary', 'warning'].indexOf(this.type) >= 0) return this.$u.color[this.type]; |
|||
else return this.activeColor; |
|||
} |
|||
}, |
|||
mounted() { |
|||
// 在h5端，必须要做一点延时才起作用，this.$nextTick()无效(HX2.4.7) |
|||
setTimeout(() => { |
|||
this.drawProgressBg(); |
|||
this.drawCircleByProgress(this.oldPercent); |
|||
}, 50); |
|||
}, |
|||
methods: { |
|||
drawProgressBg() { |
|||
let ctx = uni.createCanvasContext(this.elBgId, this); |
|||
ctx.setLineWidth(this.borderWidthPx); // 设置圆环宽度 |
|||
ctx.setStrokeStyle(this.inactiveColor); // 线条颜色 |
|||
ctx.beginPath(); // 开始描绘路径 |
|||
// 设置一个原点(110,110)，半径为100的圆的路径到当前路径 |
|||
let radius = this.widthPx / 2; |
|||
ctx.arc(radius, radius, radius - this.borderWidthPx, 0, 2 * Math.PI, false); |
|||
ctx.stroke(); // 对路径进行描绘 |
|||
ctx.draw(); |
|||
}, |
|||
drawCircleByProgress(progress) { |
|||
// 第一次操作进度环时将上下文保存到了this.data中，直接使用即可 |
|||
let ctx = this.progressContext; |
|||
if (!ctx) { |
|||
ctx = uni.createCanvasContext(this.elId, this); |
|||
this.progressContext = ctx; |
|||
} |
|||
// 表示进度的两端为圆形 |
|||
ctx.setLineCap('round'); |
|||
// 设置线条的宽度和颜色 |
|||
ctx.setLineWidth(this.borderWidthPx); |
|||
ctx.setStrokeStyle(this.circleColor); |
|||
// 将总过渡时间除以100，得出每修改百分之一进度所需的时间 |
|||
let time = Math.floor(this.duration / 100); |
|||
// 结束角的计算依据为：将2π分为100份，乘以当前的进度值，得出终止点的弧度值，加起始角，为整个圆从默认的 |
|||
// 3点钟方向开始画图，转为更好理解的12点钟方向开始作图，这需要起始角和终止角同时加上this.startAngle值 |
|||
let endAngle = ((2 * Math.PI) / 100) * progress + this.startAngle; |
|||
ctx.beginPath(); |
|||
// 半径为整个canvas宽度的一半 |
|||
let radius = this.widthPx / 2; |
|||
ctx.arc(radius, radius, radius - this.borderWidthPx, this.startAngle, endAngle, false); |
|||
ctx.stroke(); |
|||
ctx.draw(); |
|||
// 如果变更后新值大于旧值，意味着增大了百分比 |
|||
if (this.newPercent > this.oldPercent) { |
|||
// 每次递增百分之一 |
|||
progress++; |
|||
// 如果新增后的值，大于需要设置的值百分比值，停止继续增加 |
|||
if (progress > this.newPercent) return; |
|||
} else { |
|||
// 同理于上面 |
|||
progress--; |
|||
if (progress < this.newPercent) return; |
|||
} |
|||
setTimeout(() => { |
|||
// 定时器，每次操作间隔为time值，为了让进度条有动画效果 |
|||
this.drawCircleByProgress(progress); |
|||
}, time); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
.u-circle-progress { |
|||
position: relative; |
|||
/* #ifndef APP-NVUE */ |
|||
display: inline-flex; |
|||
/* #endif */ |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.u-canvas-bg { |
|||
position: absolute; |
|||
} |
|||
|
|||
.u-canvas { |
|||
position: absolute; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,157 @@ |
|||
<template> |
|||
<view class="u-col" :class="[ |
|||
'u-col-' + span |
|||
]" :style="{ |
|||
padding: `0 ${Number(gutter)/2 + 'rpx'}`, |
|||
marginLeft: 100 / 12 * offset + '%', |
|||
flex: `0 0 ${100 / 12 * span}%`, |
|||
alignItems: uAlignItem, |
|||
justifyContent: uJustify, |
|||
textAlign: textAlign |
|||
}" |
|||
@tap="click"> |
|||
<slot></slot> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* col 布局单元格 |
|||
* @description 通过基础的 12 分栏，迅速简便地创建布局（搭配<u-row>使用） |
|||
* @tutorial https://www.uviewui.com/components/layout.html |
|||
* @property {String Number} span 栅格占据的列数，总12等分（默认0） |
|||
* @property {String} text-align 文字水平对齐方式（默认left） |
|||
* @property {String Number} offset 分栏左边偏移，计算方式与span相同（默认0） |
|||
* @example <u-col span="3"><view class="demo-layout bg-purple"></view></u-col> |
|||
*/ |
|||
export default { |
|||
name: "u-col", |
|||
emits: ["click"], |
|||
props: { |
|||
// 占父容器宽度的多少等分，总分为12份 |
|||
span: { |
|||
type: [Number, String], |
|||
default: 12 |
|||
}, |
|||
// 指定栅格左侧的间隔数(总12栏) |
|||
offset: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
// 水平排列方式，可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`) |
|||
justify: { |
|||
type: String, |
|||
default: 'start' |
|||
}, |
|||
// 垂直对齐方式，可选值为top、center、bottom |
|||
align: { |
|||
type: String, |
|||
default: 'center' |
|||
}, |
|||
// 文字对齐方式 |
|||
textAlign: { |
|||
type: String, |
|||
default: 'left' |
|||
}, |
|||
// 是否阻止事件传播 |
|||
stop: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
gutter: 20, // 给col添加间距，左右边距各占一半，从父组件u-row获取 |
|||
} |
|||
}, |
|||
created() { |
|||
this.parent = false; |
|||
}, |
|||
mounted() { |
|||
// 获取父组件实例，并赋值给对应的参数 |
|||
this.parent = this.$u.$parent.call(this, 'u-row'); |
|||
if (this.parent) { |
|||
this.gutter = this.parent.gutter; |
|||
} |
|||
}, |
|||
computed: { |
|||
uJustify() { |
|||
if (this.justify == 'end' || this.justify == 'start') return 'flex-' + this.justify; |
|||
else if (this.justify == 'around' || this.justify == 'between') return 'space-' + this.justify; |
|||
else return this.justify; |
|||
}, |
|||
uAlignItem() { |
|||
if (this.align == 'top') return 'flex-start'; |
|||
if (this.align == 'bottom') return 'flex-end'; |
|||
else return this.align; |
|||
} |
|||
}, |
|||
methods: { |
|||
click(e) { |
|||
this.$emit('click',e); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-col { |
|||
/* #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO */ |
|||
float: left; |
|||
/* #endif */ |
|||
} |
|||
|
|||
.u-col-0 { |
|||
width: 0; |
|||
} |
|||
|
|||
.u-col-1 { |
|||
width: calc(100%/12); |
|||
} |
|||
|
|||
.u-col-2 { |
|||
width: calc(100%/12 * 2); |
|||
} |
|||
|
|||
.u-col-3 { |
|||
width: calc(100%/12 * 3); |
|||
} |
|||
|
|||
.u-col-4 { |
|||
width: calc(100%/12 * 4); |
|||
} |
|||
|
|||
.u-col-5 { |
|||
width: calc(100%/12 * 5); |
|||
} |
|||
|
|||
.u-col-6 { |
|||
width: calc(100%/12 * 6); |
|||
} |
|||
|
|||
.u-col-7 { |
|||
width: calc(100%/12 * 7); |
|||
} |
|||
|
|||
.u-col-8 { |
|||
width: calc(100%/12 * 8); |
|||
} |
|||
|
|||
.u-col-9 { |
|||
width: calc(100%/12 * 9); |
|||
} |
|||
|
|||
.u-col-10 { |
|||
width: calc(100%/12 * 10); |
|||
} |
|||
|
|||
.u-col-11 { |
|||
width: calc(100%/12 * 11); |
|||
} |
|||
|
|||
.u-col-12 { |
|||
width: calc(100%/12 * 12); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,206 @@ |
|||
<template> |
|||
<view class="u-collapse-item" :style="[itemStyle]"> |
|||
<view :hover-stay-time="200" class="u-collapse-head" @tap.stop="headClick" :hover-class="hoverClass" :style="[headStyle]"> |
|||
<block v-if="!$slots['title-all']"> |
|||
<view v-if="!$slots['title']" class="u-collapse-title u-line-1" :style="[{ textAlign: align ? align : 'left' }, |
|||
isShow && activeStyle && !arrow ? activeStyle : '']"> |
|||
{{ title }} |
|||
</view> |
|||
<slot v-else name="title" /> |
|||
<view class="u-icon-wrap"> |
|||
<u-icon v-if="arrow" :color="arrowColor" :class="{ 'u-arrow-down-icon-active': isShow }" |
|||
class="u-arrow-down-icon" name="arrow-down"></u-icon> |
|||
</view> |
|||
</block> |
|||
<slot v-else name="title-all" /> |
|||
</view> |
|||
<view class="u-collapse-body" :style="[{ |
|||
height: isShow ? height + 'px' : '0' |
|||
}]"> |
|||
<view class="u-collapse-content" :id="elId" :style="[bodyStyle]"> |
|||
<slot></slot> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* collapseItem 手风琴Item |
|||
* @description 通过折叠面板收纳内容区域（搭配u-collapse使用） |
|||
* @tutorial https://www.uviewui.com/components/collapse.html |
|||
* @property {String} title 面板标题 |
|||
* @property {String Number} index 主要用于事件的回调，标识那个Item被点击 |
|||
* @property {Boolean} disabled 面板是否可以打开或收起（默认false） |
|||
* @property {Boolean} open 设置某个面板的初始状态是否打开（默认false） |
|||
* @property {String Number} name 唯一标识符，如不设置，默认用当前collapse-item的索引值 |
|||
* @property {String} align 标题的对齐方式（默认left） |
|||
* @property {Object} active-style 不显示箭头时，可以添加当前选择的collapse-item活动样式，对象形式 |
|||
* @event {Function} change 某个item被打开或者收起时触发 |
|||
* @example <u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">{{item.body}}</u-collapse-item> |
|||
*/ |
|||
export default { |
|||
name: "u-collapse-item", |
|||
emits: ["change"], |
|||
props: { |
|||
// 标题 |
|||
title: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 标题的对齐方式 |
|||
align: { |
|||
type: String, |
|||
default: 'left' |
|||
}, |
|||
// 是否可以点击收起 |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// collapse显示与否 |
|||
open: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 唯一标识符 |
|||
name: { |
|||
type: [Number, String], |
|||
default: '' |
|||
}, |
|||
//活动样式 |
|||
activeStyle: { |
|||
type: Object, |
|||
default () { |
|||
return {} |
|||
} |
|||
}, |
|||
// 标识当前为第几个 |
|||
index: { |
|||
type: [String, Number], |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
isShow: false, |
|||
elId: this.$u.guid(), |
|||
height: 0, // body内容的高度 |
|||
headStyle: {}, // 头部样式，对象形式 |
|||
bodyStyle: {}, // 主体部分样式 |
|||
itemStyle: {}, // 每个item的整体样式 |
|||
arrowColor: '', // 箭头的颜色 |
|||
hoverClass: '', // 头部按下时的效果样式类 |
|||
arrow: true, // 是否显示右侧箭头 |
|||
|
|||
}; |
|||
}, |
|||
watch: { |
|||
open(val) { |
|||
this.isShow = val; |
|||
} |
|||
}, |
|||
created() { |
|||
this.parent = false; |
|||
// 获取u-collapse的信息，放在u-collapse是为了方便，不用每个u-collapse-item写一遍 |
|||
this.isShow = this.open; |
|||
}, |
|||
methods: { |
|||
// 异步获取内容，或者动态修改了内容时，需要重新初始化 |
|||
init() { |
|||
this.parent = this.$u.$parent.call(this, 'u-collapse'); |
|||
if(this.parent) { |
|||
this.nameSync = this.name ? this.name : this.parent.childrens.length; |
|||
// 不存在时才添加本实例 |
|||
!this.parent.childrens.includes(this) && this.parent.childrens.push(this); |
|||
this.headStyle = this.parent.headStyle; |
|||
this.bodyStyle = this.parent.bodyStyle; |
|||
this.arrowColor = this.parent.arrowColor; |
|||
this.hoverClass = this.parent.hoverClass; |
|||
this.arrow = this.parent.arrow; |
|||
this.itemStyle = this.parent.itemStyle; |
|||
} |
|||
this.$nextTick(() => { |
|||
this.queryRect(); |
|||
}); |
|||
}, |
|||
// 点击collapsehead头部 |
|||
headClick() { |
|||
if (this.disabled) return; |
|||
if (this.parent && this.parent.accordion == true) { |
|||
this.parent.childrens.map(val => { |
|||
// 自身不设置为false，因为后面有this.isShow = !this.isShow;处理了 |
|||
if (this != val) { |
|||
val.isShow = false; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
this.isShow = !this.isShow; |
|||
// 触发本组件的事件 |
|||
this.$emit('change', { |
|||
index: this.index, |
|||
show: this.isShow |
|||
}) |
|||
// 只有在打开时才发出事件 |
|||
if (this.isShow) this.parent && this.parent.onChange(); |
|||
this.$forceUpdate(); |
|||
}, |
|||
// 查询内容高度 |
|||
queryRect() { |
|||
// $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://www.uviewui.com/js/getRect.html |
|||
// 组件内部一般用this.$uGetRect，对外的为this.$u.getRect，二者功能一致，名称不同 |
|||
this.$uGetRect('#' + this.elId).then(res => { |
|||
this.height = res.height; |
|||
}) |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.init(); |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-collapse-head { |
|||
position: relative; |
|||
@include vue-flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
color: $u-main-color; |
|||
font-size: 30rpx; |
|||
line-height: 1; |
|||
padding: 24rpx 0; |
|||
text-align: left; |
|||
} |
|||
|
|||
.u-collapse-title { |
|||
flex: 1; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.u-arrow-down-icon { |
|||
transition: all 0.3s; |
|||
margin-right: 20rpx; |
|||
margin-left: 14rpx; |
|||
} |
|||
|
|||
.u-arrow-down-icon-active { |
|||
transform: rotate(180deg); |
|||
transform-origin: center center; |
|||
} |
|||
|
|||
.u-collapse-body { |
|||
overflow: hidden; |
|||
transition: all 0.3s; |
|||
} |
|||
|
|||
.u-collapse-content { |
|||
overflow: hidden; |
|||
font-size: 28rpx; |
|||
color: $u-tips-color; |
|||
text-align: left; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,100 @@ |
|||
<template> |
|||
<view class="u-collapse"> |
|||
<slot /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* collapse 手风琴 |
|||
* @description 通过折叠面板收纳内容区域 |
|||
* @tutorial https://www.uviewui.com/components/collapse.html |
|||
* @property {Boolean} accordion 是否手风琴模式（默认true） |
|||
* @property {Boolean} arrow 是否显示标题右侧的箭头（默认true） |
|||
* @property {String} arrow-color 标题右侧箭头的颜色（默认#909399） |
|||
* @property {Object} head-style 标题自定义样式，对象形式 |
|||
* @property {Object} body-style 主体自定义样式，对象形式 |
|||
* @property {String} hover-class 样式类名，按下时有效（默认u-hover-class） |
|||
* @event {Function} change 当前激活面板展开时触发(如果是手风琴模式，参数activeNames类型为String，否则为Array) |
|||
* @example <u-collapse></u-collapse> |
|||
*/ |
|||
export default { |
|||
name:"u-collapse", |
|||
emits: ["change"], |
|||
props: { |
|||
// 是否手风琴模式 |
|||
accordion: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 头部的样式 |
|||
headStyle: { |
|||
type: Object, |
|||
default () { |
|||
return {} |
|||
} |
|||
}, |
|||
// 主体的样式 |
|||
bodyStyle: { |
|||
type: Object, |
|||
default () { |
|||
return {} |
|||
} |
|||
}, |
|||
// 每一个item的样式 |
|||
itemStyle: { |
|||
type: Object, |
|||
default () { |
|||
return {} |
|||
} |
|||
}, |
|||
// 是否显示右侧的箭头 |
|||
arrow: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 箭头的颜色 |
|||
arrowColor: { |
|||
type: String, |
|||
default: '#909399' |
|||
}, |
|||
// 标题部分按压时的样式类，"none"为无效果 |
|||
hoverClass: { |
|||
type: String, |
|||
default: 'u-hover-class' |
|||
} |
|||
}, |
|||
created() { |
|||
this.childrens = [] |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
// 重新初始化一次内部的所有子元素的高度计算，用于异步获取数据渲染的情况 |
|||
init() { |
|||
this.childrens.forEach((vm, index) => { |
|||
vm.init(); |
|||
}) |
|||
}, |
|||
// collapse item被点击，由collapse item调用父组件方法 |
|||
onChange() { |
|||
let activeItem = []; |
|||
this.childrens.forEach((vm, index) => { |
|||
if (vm.isShow) { |
|||
activeItem.push(vm.nameSync); |
|||
} |
|||
}) |
|||
// 如果是手风琴模式，只有一个匹配结果，也即activeItem长度为1，将其转为字符串 |
|||
if (this.accordion) activeItem = activeItem.join(''); |
|||
this.$emit('change', activeItem); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
</style> |
|||
@ -0,0 +1,238 @@ |
|||
<template> |
|||
<view |
|||
class="u-notice-bar" |
|||
:style="{ |
|||
background: computeBgColor, |
|||
padding: padding |
|||
}" |
|||
:class="[ |
|||
type ? `u-type-${type}-light-bg` : '' |
|||
]" |
|||
> |
|||
<view class="u-icon-wrap"> |
|||
<u-icon class="u-left-icon" v-if="volumeIcon" name="volume-fill" :size="volumeSize" :color="computeColor"></u-icon> |
|||
</view> |
|||
<swiper :disable-touch="disableTouch" @change="change" :autoplay="autoplay && playState == 'play'" :vertical="vertical" circular :interval="duration" class="u-swiper"> |
|||
<swiper-item v-for="(item, index) in list" :key="index" class="u-swiper-item"> |
|||
<view |
|||
class="u-news-item u-line-1" |
|||
:style="[textStyle]" |
|||
@tap="click(index)" |
|||
:class="['u-type-' + type]" |
|||
> |
|||
{{ item }} |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
<view class="u-icon-wrap"> |
|||
<u-icon @click="getMore" class="u-right-icon" v-if="moreIcon" name="arrow-right" :size="26" :color="computeColor"></u-icon> |
|||
<u-icon @click="close" class="u-right-icon" v-if="closeIcon" name="close" :size="24" :color="computeColor"></u-icon> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
emits: ["close", "getMore", "end"], |
|||
props: { |
|||
// 显示的内容，数组 |
|||
list: { |
|||
type: Array, |
|||
default() { |
|||
return []; |
|||
} |
|||
}, |
|||
// 显示的主题，success|error|primary|info|warning |
|||
type: { |
|||
type: String, |
|||
default: 'warning' |
|||
}, |
|||
// 是否显示左侧的音量图标 |
|||
volumeIcon: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否显示右侧的右箭头图标 |
|||
moreIcon: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否显示右侧的关闭图标 |
|||
closeIcon: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否自动播放 |
|||
autoplay: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 文字颜色，各图标也会使用文字颜色 |
|||
color: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 背景颜色 |
|||
bgColor: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 滚动方向，row-水平滚动，column-垂直滚动 |
|||
direction: { |
|||
type: String, |
|||
default: 'row' |
|||
}, |
|||
// 是否显示 |
|||
show: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 字体大小，单位rpx |
|||
fontSize: { |
|||
type: [Number, String], |
|||
default: 26 |
|||
}, |
|||
// 滚动一个周期的时间长，单位ms |
|||
duration: { |
|||
type: [Number, String], |
|||
default: 2000 |
|||
}, |
|||
// 音量喇叭的大小 |
|||
volumeSize: { |
|||
type: [Number, String], |
|||
default: 34 |
|||
}, |
|||
// 水平滚动时的滚动速度，即每秒滚动多少rpx，这有利于控制文字无论多少时，都能有一个恒定的速度 |
|||
speed: { |
|||
type: Number, |
|||
default: 160 |
|||
}, |
|||
// 水平滚动时，是否采用衔接形式滚动 |
|||
isCircular: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 滚动方向，horizontal-水平滚动，vertical-垂直滚动 |
|||
mode: { |
|||
type: String, |
|||
default: 'horizontal' |
|||
}, |
|||
// 播放状态，play-播放，paused-暂停 |
|||
playState: { |
|||
type: String, |
|||
default: 'play' |
|||
}, |
|||
// 是否禁止用手滑动切换 |
|||
// 目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序 |
|||
disableTouch: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 通知的边距 |
|||
padding: { |
|||
type: [Number, String], |
|||
default: '18rpx 24rpx' |
|||
} |
|||
}, |
|||
computed: { |
|||
// 计算字体颜色，如果没有自定义的，就用uview主题颜色 |
|||
computeColor() { |
|||
if (this.color) return this.color; |
|||
// 如果是无主题，就默认使用content-color |
|||
else if(this.type == 'none') return '#606266'; |
|||
else return this.type; |
|||
}, |
|||
// 文字内容的样式 |
|||
textStyle() { |
|||
let style = {}; |
|||
if (this.color) style.color = this.color; |
|||
else if(this.type == 'none') style.color = '#606266'; |
|||
style.fontSize = this.fontSize + 'rpx'; |
|||
return style; |
|||
}, |
|||
// 垂直或者水平滚动 |
|||
vertical() { |
|||
if(this.mode == 'horizontal') return false; |
|||
else return true; |
|||
}, |
|||
// 计算背景颜色 |
|||
computeBgColor() { |
|||
if (this.bgColor) return this.bgColor; |
|||
else if(this.type == 'none') return 'transparent'; |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
// animation: false |
|||
}; |
|||
}, |
|||
methods: { |
|||
// 点击通告栏 |
|||
click(index) { |
|||
this.$emit('click', index); |
|||
}, |
|||
// 点击关闭按钮 |
|||
close() { |
|||
this.$emit('close'); |
|||
}, |
|||
// 点击更多箭头按钮 |
|||
getMore() { |
|||
this.$emit('getMore'); |
|||
}, |
|||
change(e) { |
|||
let index = e.detail.current; |
|||
if(index == this.list.length - 1) { |
|||
this.$emit('end'); |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-notice-bar { |
|||
width: 100%; |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-wrap: nowrap; |
|||
padding: 18rpx 24rpx; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.u-swiper { |
|||
font-size: 26rpx; |
|||
height: 32rpx; |
|||
@include vue-flex; |
|||
align-items: center; |
|||
flex: 1; |
|||
margin-left: 12rpx; |
|||
} |
|||
|
|||
.u-swiper-item { |
|||
@include vue-flex; |
|||
align-items: center; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.u-news-item { |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.u-right-icon { |
|||
margin-left: 12rpx; |
|||
/* #ifndef APP-NVUE */ |
|||
display: inline-flex; |
|||
/* #endif */ |
|||
align-items: center; |
|||
} |
|||
|
|||
.u-left-icon { |
|||
/* #ifndef APP-NVUE */ |
|||
display: inline-flex; |
|||
/* #endif */ |
|||
align-items: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,175 @@ |
|||
<template> |
|||
<view class="u-count-down"> |
|||
<slot> |
|||
<text class="u-count-down__text" :style="customStyle">{{ formattedTime }}</text> |
|||
</slot> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { isSameSecond, parseFormat, parseTimeData } from "./utils"; |
|||
/** |
|||
* u-count-down 倒计时 |
|||
* @description 该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。 |
|||
* @tutorial https://uviewui.com/components/countDown.html |
|||
* @property {String | Number} timestamp 倒计时时长，单位ms （默认 0 ） |
|||
* @property {String} format 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 （默认 'HH:mm:ss' ） |
|||
* @property {Boolean} autoStart 是否自动开始倒计时 （默认 true ） |
|||
* @event {Function} end 倒计时结束时触发 |
|||
* @event {Function} change 倒计时变化时触发 |
|||
* @event {Function} start 开始倒计时 |
|||
* @event {Function} pause 暂停倒计时 |
|||
* @event {Function} reset 重设倒计时，若 auto-start 为 true，重设后会自动开始倒计时 |
|||
* @example <u-count-down :timestamp="timestamp"></u-count-down> |
|||
*/ |
|||
export default { |
|||
name: "u-count-down", |
|||
emits: ["change", "end", "finish"], |
|||
props: { |
|||
// 倒计时时长，单位ms |
|||
timestamp: { |
|||
type: [String, Number], |
|||
default: 0 |
|||
}, |
|||
// 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 |
|||
format: { |
|||
type: String, |
|||
default: "DD:HH:mm:ss" |
|||
}, |
|||
// 是否自动开始倒计时 |
|||
autoStart: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
customStyle: { |
|||
type: [String, Object], |
|||
default: "" |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
timer: null, |
|||
// 各单位(天，时，分等)剩余时间 |
|||
timeData: parseTimeData(0), |
|||
// 格式化后的时间，如"03:23:21" |
|||
formattedTime: "0", |
|||
// 倒计时是否正在进行中 |
|||
runing: false, |
|||
endTime: 0, // 结束的毫秒时间戳 |
|||
remainTime: 0 // 剩余的毫秒时间 |
|||
}; |
|||
}, |
|||
watch: { |
|||
timestamp(n) { |
|||
this.reset(); |
|||
}, |
|||
format(newVal, oldVal) { |
|||
this.pause(); |
|||
this.start(); |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.init(); |
|||
}, |
|||
methods: { |
|||
init() { |
|||
this.reset(); |
|||
}, |
|||
// 开始倒计时 |
|||
start() { |
|||
if (this.runing) return; |
|||
// 标识为进行中 |
|||
this.runing = true; |
|||
// 结束时间戳 = 此刻时间戳 + 剩余的时间 |
|||
this.endTime = Date.now() + this.remainTime; |
|||
this.toTick(); |
|||
}, |
|||
// 根据是否展示毫秒，执行不同操作函数 |
|||
toTick() { |
|||
if (this.format.indexOf("SSS") > -1) { |
|||
this.microTick(); |
|||
} else { |
|||
this.macroTick(); |
|||
} |
|||
}, |
|||
macroTick() { |
|||
this.clearTimeout(); |
|||
// 每隔一定时间，更新一遍定时器的值 |
|||
// 同时此定时器的作用也能带来毫秒级的更新 |
|||
this.timer = setTimeout(() => { |
|||
// 获取剩余时间 |
|||
const remain = this.getRemainTime(); |
|||
// 重设剩余时间 |
|||
if (!isSameSecond(remain, this.remainTime) || remain === 0) { |
|||
this.setRemainTime(remain); |
|||
} |
|||
// 如果剩余时间不为0，则继续检查更新倒计时 |
|||
if (this.remainTime !== 0) { |
|||
this.macroTick(); |
|||
} |
|||
}, 30); |
|||
}, |
|||
microTick() { |
|||
this.clearTimeout(); |
|||
this.timer = setTimeout(() => { |
|||
this.setRemainTime(this.getRemainTime()); |
|||
if (this.remainTime !== 0) { |
|||
this.microTick(); |
|||
} |
|||
}, 30); |
|||
}, |
|||
// 获取剩余的时间 |
|||
getRemainTime() { |
|||
// 取最大值，防止出现小于0的剩余时间值 |
|||
return Math.max(this.endTime - Date.now(), 0); |
|||
}, |
|||
// 设置剩余的时间 |
|||
setRemainTime(remain) { |
|||
this.remainTime = remain; |
|||
// 根据剩余的毫秒时间，得出该有天，小时，分钟等的值，返回一个对象 |
|||
const timeData = parseTimeData(remain); |
|||
this.$emit("change", timeData); |
|||
// 得出格式化后的时间 |
|||
this.formattedTime = parseFormat(this.format, timeData); |
|||
// 如果时间已到，停止倒计时 |
|||
if (remain <= 0) { |
|||
this.pause(); |
|||
this.$emit("end"); |
|||
this.$emit("finish"); |
|||
} |
|||
}, |
|||
// 重置倒计时 |
|||
reset() { |
|||
this.pause(); |
|||
this.remainTime = this.timestamp; |
|||
this.setRemainTime(this.remainTime); |
|||
if (this.autoStart) { |
|||
this.start(); |
|||
} |
|||
}, |
|||
// 暂停倒计时 |
|||
pause() { |
|||
this.runing = false; |
|||
this.clearTimeout(); |
|||
}, |
|||
// 清空定时器 |
|||
clearTimeout() { |
|||
clearTimeout(this.timer); |
|||
this.timer = null; |
|||
} |
|||
}, |
|||
// #ifndef VUE3 |
|||
beforeDestroy() { |
|||
this.clearTimeout(); |
|||
}, |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
beforeUnmount() { |
|||
this.clearTimeout(); |
|||
}, |
|||
// #endif |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss"></style> |
|||
@ -0,0 +1,62 @@ |
|||
// 补0，如1 -> 01
|
|||
function padZero(num, targetLength = 2) { |
|||
let str = `${num}` |
|||
while (str.length < targetLength) { |
|||
str = `0${str}` |
|||
} |
|||
return str |
|||
} |
|||
const SECOND = 1000 |
|||
const MINUTE = 60 * SECOND |
|||
const HOUR = 60 * MINUTE |
|||
const DAY = 24 * HOUR |
|||
export function parseTimeData(time) { |
|||
const days = Math.floor(time / DAY) |
|||
const hours = Math.floor((time % DAY) / HOUR) |
|||
const minutes = Math.floor((time % HOUR) / MINUTE) |
|||
const seconds = Math.floor((time % MINUTE) / SECOND) |
|||
const milliseconds = Math.floor(time % SECOND) |
|||
return { |
|||
days, |
|||
hours, |
|||
minutes, |
|||
seconds, |
|||
milliseconds |
|||
} |
|||
} |
|||
export function parseFormat(format, timeData) { |
|||
let { |
|||
days, |
|||
hours, |
|||
minutes, |
|||
seconds, |
|||
milliseconds |
|||
} = timeData |
|||
// 如果格式化字符串中不存在DD(天)，则将天的时间转为小时中去
|
|||
if (format.indexOf('DD') === -1) { |
|||
hours += days * 24 |
|||
} else { |
|||
// 对天补0
|
|||
format = format.replace('DD', padZero(days)) |
|||
} |
|||
// 其他同理于DD的格式化处理方式
|
|||
if (format.indexOf('HH') === -1) { |
|||
minutes += hours * 60 |
|||
} else { |
|||
format = format.replace('HH', padZero(hours)) |
|||
} |
|||
if (format.indexOf('mm') === -1) { |
|||
seconds += minutes * 60 |
|||
} else { |
|||
format = format.replace('mm', padZero(minutes)) |
|||
} |
|||
if (format.indexOf('ss') === -1) { |
|||
milliseconds += seconds * 1000 |
|||
} else { |
|||
format = format.replace('ss', padZero(seconds)) |
|||
} |
|||
return format.replace('SSS', padZero(milliseconds, 3)) |
|||
} |
|||
export function isSameSecond(time1, time2) { |
|||
return Math.floor(time1 / 1000) === Math.floor(time2 / 1000) |
|||
} |
|||
@ -0,0 +1,266 @@ |
|||
<template> |
|||
<view |
|||
class="u-count-num" |
|||
:style="{ |
|||
fontSize: fontSize + 'rpx', |
|||
fontWeight: bold ? 'bold' : 'normal', |
|||
color: color |
|||
}" |
|||
> |
|||
{{ displayValueCom }} |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* countTo 数字滚动 |
|||
* @description 该组件一般用于需要滚动数字到某一个值的场景，目标要求是一个递增的值。 |
|||
* @tutorial https://www.uviewui.com/components/countTo.html |
|||
* @property {String Number} nullVal 空值或NaN时显示的值，默认 - |
|||
* @property {String Number} start-val 开始值 |
|||
* @property {String Number} end-val 结束值 |
|||
* @property {String Number} duration 滚动过程所需的时间，单位ms（默认2000） |
|||
* @property {Boolean} autoplay 是否自动开始滚动（默认true） |
|||
* @property {String Number} decimals 要显示的小数位数，见官网说明（默认0） |
|||
* @property {Boolean} use-easing 滚动结束时，是否缓动结尾，见官网说明（默认true） |
|||
* @property {String} separator 千位分隔符，见官网说明 |
|||
* @property {String} color 字体颜色（默认#303133） |
|||
* @property {String Number} font-size 字体大小，单位rpx（默认50） |
|||
* @property {Boolean} bold 字体是否加粗（默认false） |
|||
* @event {Function} end 数值滚动到目标值时触发 |
|||
* @example <u-count-to ref="uCountTo" :end-val="endVal" :autoplay="autoplay"></u-count-to> |
|||
*/ |
|||
export default { |
|||
name: "u-count-to", |
|||
emits: ["end"], |
|||
props: { |
|||
// 没有值时显示 |
|||
nullVal: { |
|||
type: [Number, String], |
|||
default: "-" |
|||
}, |
|||
// 开始的数值，默认从0增长到某一个数 |
|||
startVal: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
// 要滚动的目标数值，必须 |
|||
endVal: { |
|||
type: [Number, String], |
|||
default: 0, |
|||
required: true |
|||
}, |
|||
// 滚动到目标数值的动画持续时间，单位为毫秒（ms） |
|||
duration: { |
|||
type: [Number, String], |
|||
default: 2000 |
|||
}, |
|||
// 设置数值后是否自动开始滚动 |
|||
autoplay: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 要显示的小数位数 |
|||
decimals: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
// 是否在即将到达目标数值的时候，使用缓慢滚动的效果 |
|||
useEasing: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 十进制分割 |
|||
decimal: { |
|||
type: [Number, String], |
|||
default: "." |
|||
}, |
|||
// 字体颜色 |
|||
color: { |
|||
type: String, |
|||
default: "#303133" |
|||
}, |
|||
// 字体大小 |
|||
fontSize: { |
|||
type: [Number, String], |
|||
default: 50 |
|||
}, |
|||
// 是否加粗字体 |
|||
bold: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 千位分隔符，类似金额的分割(￥23,321.05中的",") |
|||
separator: { |
|||
type: String, |
|||
default: "" |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
localStartVal: this.startVal, |
|||
displayValue: this.formatNumber(this.startVal), |
|||
printVal: null, |
|||
paused: false, // 是否暂停 |
|||
localDuration: Number(this.duration), |
|||
startTime: null, // 开始的时间 |
|||
timestamp: null, // 时间戳 |
|||
remaining: null, // 停留的时间 |
|||
rAF: null, |
|||
lastTime: 0 // 上一次的时间 |
|||
}; |
|||
}, |
|||
computed: { |
|||
countDown() { |
|||
return this.startVal > this.endVal; |
|||
}, |
|||
displayValueCom() { |
|||
let str; |
|||
let { displayValue, nullVal, endVal } = this; |
|||
if (isNaN(endVal)) { |
|||
str = nullVal; |
|||
} else { |
|||
str = displayValue; |
|||
} |
|||
return str; |
|||
} |
|||
}, |
|||
watch: { |
|||
startVal() { |
|||
this.autoplay && this.start(); |
|||
}, |
|||
endVal() { |
|||
this.autoplay && this.start(); |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.autoplay && this.start(); |
|||
}, |
|||
methods: { |
|||
easingFn(t, b, c, d) { |
|||
return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b; |
|||
}, |
|||
requestAnimationFrame(callback) { |
|||
const currTime = new Date().getTime(); |
|||
// 为了使setTimteout的尽可能的接近每秒60帧的效果 |
|||
const timeToCall = Math.max(0, 16 - (currTime - this.lastTime)); |
|||
const id = setTimeout(() => { |
|||
callback(currTime + timeToCall); |
|||
}, timeToCall); |
|||
this.lastTime = currTime + timeToCall; |
|||
return id; |
|||
}, |
|||
|
|||
cancelAnimationFrame(id) { |
|||
clearTimeout(id); |
|||
}, |
|||
// 开始滚动数字 |
|||
start() { |
|||
this.localStartVal = this.startVal; |
|||
this.startTime = null; |
|||
this.localDuration = this.duration; |
|||
this.paused = false; |
|||
this.rAF = this.requestAnimationFrame(this.count); |
|||
}, |
|||
// 暂定状态，重新再开始滚动；或者滚动状态下，暂停 |
|||
reStart() { |
|||
if (this.paused) { |
|||
this.resume(); |
|||
this.paused = false; |
|||
} else { |
|||
this.stop(); |
|||
this.paused = true; |
|||
} |
|||
}, |
|||
// 暂停 |
|||
stop() { |
|||
this.cancelAnimationFrame(this.rAF); |
|||
}, |
|||
// 重新开始(暂停的情况下) |
|||
resume() { |
|||
this.startTime = null; |
|||
this.localDuration = this.remaining; |
|||
this.localStartVal = this.printVal; |
|||
this.requestAnimationFrame(this.count); |
|||
}, |
|||
// 重置 |
|||
reset() { |
|||
this.startTime = null; |
|||
this.cancelAnimationFrame(this.rAF); |
|||
this.displayValue = this.formatNumber(this.startVal); |
|||
}, |
|||
count(timestamp) { |
|||
if (!this.startTime) this.startTime = timestamp; |
|||
this.timestamp = timestamp; |
|||
const progress = timestamp - this.startTime; |
|||
this.remaining = this.localDuration - progress; |
|||
if (this.useEasing) { |
|||
if (this.countDown) { |
|||
this.printVal = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration); |
|||
} else { |
|||
this.printVal = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration); |
|||
} |
|||
} else { |
|||
if (this.countDown) { |
|||
this.printVal = this.localStartVal - (this.localStartVal - this.endVal) * (progress / this.localDuration); |
|||
} else { |
|||
this.printVal = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration); |
|||
} |
|||
} |
|||
if (this.countDown) { |
|||
this.printVal = this.printVal < this.endVal ? this.endVal : this.printVal; |
|||
} else { |
|||
this.printVal = this.printVal > this.endVal ? this.endVal : this.printVal; |
|||
} |
|||
this.displayValue = this.formatNumber(this.printVal); |
|||
if (progress < this.localDuration) { |
|||
this.rAF = this.requestAnimationFrame(this.count); |
|||
} else { |
|||
this.$emit("end"); |
|||
} |
|||
}, |
|||
// 判断是否数字 |
|||
isNumber(val) { |
|||
return !isNaN(parseFloat(val)); |
|||
}, |
|||
formatNumber(num) { |
|||
// 将num转为Number类型，因为其值可能为字符串数值，调用toFixed会报错 |
|||
num = Number(num); |
|||
num = num.toFixed(Number(this.decimals)); |
|||
num += ""; |
|||
const x = num.split("."); |
|||
let x1 = x[0]; |
|||
const x2 = x.length > 1 ? this.decimal + x[1] : ""; |
|||
const rgx = /(\d+)(\d{3})/; |
|||
if (this.separator && !this.isNumber(this.separator)) { |
|||
while (rgx.test(x1)) { |
|||
x1 = x1.replace(rgx, "$1" + this.separator + "$2"); |
|||
} |
|||
} |
|||
return x1 + x2; |
|||
}, |
|||
// #ifndef VUE3 |
|||
destroyed() { |
|||
this.cancelAnimationFrame(this.rAF); |
|||
}, |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
unmounted() { |
|||
this.cancelAnimationFrame(this.rAF); |
|||
} |
|||
// #endif |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-count-num { |
|||
/* #ifndef APP-NVUE */ |
|||
display: inline-flex; |
|||
/* #endif */ |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,153 @@ |
|||
<template> |
|||
<view class="u-divider" :style="{ |
|||
height: height == 'auto' ? 'auto' : height + 'rpx', |
|||
backgroundColor: bgColor, |
|||
marginBottom: marginBottom + 'rpx', |
|||
marginTop: marginTop + 'rpx' |
|||
}" @tap="click"> |
|||
<view class="u-divider-line" :class="[type ? 'u-divider-line--bordercolor--' + type : '']" :style="[lineStyle]"></view> |
|||
<view v-if="useSlot" class="u-divider-text" :style="{ |
|||
color: color, |
|||
fontSize: fontSize + 'rpx' |
|||
}"><slot /></view> |
|||
<view class="u-divider-line" :class="[type ? 'u-divider-line--bordercolor--' + type : '']" :style="[lineStyle]"></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* divider 分割线 |
|||
* @description 区隔内容的分割线，一般用于页面底部"没有更多"的提示。 |
|||
* @tutorial https://www.uviewui.com/components/divider.html |
|||
* @property {String Number} half-width 文字左或右边线条宽度，数值或百分比，数值时单位为rpx |
|||
* @property {String} border-color 线条颜色，优先级高于type（默认#dcdfe6） |
|||
* @property {String} color 文字颜色（默认#909399） |
|||
* @property {String Number} fontSize 字体大小，单位rpx（默认26） |
|||
* @property {String} bg-color 整个divider的背景颜色（默认呢#ffffff） |
|||
* @property {String Number} height 整个divider的高度，单位rpx（默认40） |
|||
* @property {String} type 将线条设置主题色（默认primary） |
|||
* @property {Boolean} useSlot 是否使用slot传入内容，如果不传入，中间不会有空隙（默认true） |
|||
* @property {String Number} margin-top 与前一个组件的距离，单位rpx（默认0） |
|||
* @property {String Number} margin-bottom 与后一个组件的距离，单位rpx（0） |
|||
* @event {Function} click divider组件被点击时触发 |
|||
* @example <u-divider color="#fa3534">长河落日圆</u-divider> |
|||
*/ |
|||
export default { |
|||
name: 'u-divider', |
|||
props: { |
|||
// 单一边divider横线的宽度(数值)，单位rpx。或者百分比 |
|||
halfWidth: { |
|||
type: [Number, String], |
|||
default: 150 |
|||
}, |
|||
// divider横线的颜色，如设置， |
|||
borderColor: { |
|||
type: String, |
|||
default: '#dcdfe6' |
|||
}, |
|||
// 主题色，可以是primary|info|success|warning|error之一值 |
|||
type: { |
|||
type: String, |
|||
default: 'primary' |
|||
}, |
|||
// 文字颜色 |
|||
color: { |
|||
type: String, |
|||
default: '#909399' |
|||
}, |
|||
// 文字大小，单位rpx |
|||
fontSize: { |
|||
type: [Number, String], |
|||
default: 26 |
|||
}, |
|||
// 整个divider的背景颜色 |
|||
bgColor: { |
|||
type: String, |
|||
default: '#ffffff' |
|||
}, |
|||
// 整个divider的高度单位rpx |
|||
height: { |
|||
type: [Number, String], |
|||
default: 'auto' |
|||
}, |
|||
// 上边距 |
|||
marginTop: { |
|||
type: [String, Number], |
|||
default: 0 |
|||
}, |
|||
// 下边距 |
|||
marginBottom: { |
|||
type: [String, Number], |
|||
default: 0 |
|||
}, |
|||
// 是否使用slot传入内容，如果不用slot传入内容，先的中间就不会有空隙 |
|||
useSlot: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}, |
|||
computed: { |
|||
lineStyle() { |
|||
let style = {}; |
|||
if(String(this.halfWidth).indexOf('%') != -1) style.width = this.halfWidth; |
|||
else style.width = this.halfWidth + 'rpx'; |
|||
// borderColor优先级高于type值 |
|||
if(this.borderColor) style.borderColor = this.borderColor; |
|||
return style; |
|||
} |
|||
}, |
|||
methods: { |
|||
click() { |
|||
this.$emit('click'); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
.u-divider { |
|||
width: 100%; |
|||
position: relative; |
|||
text-align: center; |
|||
@include vue-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
overflow: hidden; |
|||
flex-direction: row; |
|||
} |
|||
|
|||
.u-divider-line { |
|||
border-bottom: 1px solid $u-border-color; |
|||
transform: scale(1, 0.5); |
|||
transform-origin: center; |
|||
|
|||
&--bordercolor--primary { |
|||
border-color: $u-type-primary; |
|||
} |
|||
|
|||
&--bordercolor--success { |
|||
border-color: $u-type-success; |
|||
} |
|||
|
|||
&--bordercolor--error { |
|||
border-color: $u-type-primary; |
|||
} |
|||
|
|||
&--bordercolor--info { |
|||
border-color: $u-type-info; |
|||
} |
|||
|
|||
&--bordercolor--warning { |
|||
border-color: $u-type-warning; |
|||
} |
|||
} |
|||
|
|||
.u-divider-text { |
|||
white-space: nowrap; |
|||
padding: 0 16rpx; |
|||
/* #ifndef APP-NVUE */ |
|||
display: inline-flex; |
|||
/* #endif */ |
|||
} |
|||
</style> |
|||
@ -0,0 +1,166 @@ |
|||
<template> |
|||
<view |
|||
class="u-dropdown-item" |
|||
v-if="active" |
|||
@touchmove.stop.prevent="() => {}" |
|||
@tap.stop.prevent="() => {}" |
|||
> |
|||
<block v-if="!$slots.default && !$slots.$default"> |
|||
<scroll-view |
|||
scroll-y="true" |
|||
:style="{ |
|||
height: $u.addUnit(height) |
|||
}" |
|||
> |
|||
<view class="u-dropdown-item__options"> |
|||
<u-cell-group> |
|||
<u-cell-item |
|||
@click="cellClick(item.value)" |
|||
:arrow="false" |
|||
:title="item.label" |
|||
v-for="(item, index) in options" |
|||
:key="index" |
|||
:title-style="{ |
|||
color: value === item.value ? activeColor : inactiveColor |
|||
}" |
|||
> |
|||
<u-icon |
|||
v-if="valueCom === item.value" |
|||
name="checkbox-mark" |
|||
:color="activeColor" |
|||
size="32" |
|||
></u-icon> |
|||
</u-cell-item> |
|||
</u-cell-group> |
|||
</view> |
|||
</scroll-view> |
|||
</block> |
|||
<slot v-else /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* dropdown-item 下拉菜单 |
|||
* @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景 |
|||
* @tutorial http://uviewui.com/components/dropdown.html |
|||
* @property {String | Number} v-model 双向绑定选项卡选择值 |
|||
* @property {String} title 菜单项标题 |
|||
* @property {Array[Object]} options 选项数据，如果传入了默认slot，此参数无效 |
|||
* @property {Boolean} disabled 是否禁用此选项卡（默认false） |
|||
* @property {String | Number} duration 选项卡展开和收起的过渡时间，单位ms（默认300） |
|||
* @property {String | Number} height 弹窗下拉内容的高度(内容超出将会滚动)（默认auto） |
|||
* @example <u-dropdown-item title="标题"></u-dropdown-item> |
|||
*/ |
|||
export default { |
|||
name: "u-dropdown-item", |
|||
emits: ["update:modelValue", "input", "change"], |
|||
props: { |
|||
// 当前选中项的value值 |
|||
value: { |
|||
type: [Number, String, Array], |
|||
default: "" |
|||
}, |
|||
modelValue: { |
|||
type: [Number, String, Array], |
|||
default: "" |
|||
}, |
|||
// 菜单项标题 |
|||
title: { |
|||
type: [String, Number], |
|||
default: "" |
|||
}, |
|||
// 选项数据，如果传入了默认slot，此参数无效 |
|||
options: { |
|||
type: Array, |
|||
default() { |
|||
return []; |
|||
} |
|||
}, |
|||
// 是否禁用此菜单项 |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 下拉弹窗的高度 |
|||
height: { |
|||
type: [Number, String], |
|||
default: "auto" |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
active: false, // 当前项是否处于展开状态 |
|||
activeColor: "#2979ff", // 激活时左边文字和右边对勾图标的颜色 |
|||
inactiveColor: "#606266" // 未激活时左边文字和右边对勾图标的颜色 |
|||
}; |
|||
}, |
|||
computed: { |
|||
valueCom() { |
|||
// #ifndef VUE3 |
|||
return this.value; |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
return this.modelValue; |
|||
// #endif |
|||
}, |
|||
// 监听props是否发生了变化，有些值需要传递给父组件u-dropdown，无法双向绑定 |
|||
propsChange() { |
|||
return `${this.title}-${this.disabled}`; |
|||
} |
|||
}, |
|||
watch: { |
|||
propsChange(n) { |
|||
// 当值变化时，通知父组件重新初始化，让父组件执行每个子组件的init()方法 |
|||
// 将所有子组件数据重新整理一遍 |
|||
if (this.parent) this.parent.init(); |
|||
} |
|||
}, |
|||
created() { |
|||
// 父组件的实例 |
|||
this.parent = false; |
|||
}, |
|||
methods: { |
|||
init() { |
|||
// 获取父组件u-dropdown |
|||
let parent = this.$u.$parent.call(this, "u-dropdown"); |
|||
if (parent) { |
|||
this.parent = parent; |
|||
// 将子组件的激活颜色配置为父组件设置的激活和未激活时的颜色 |
|||
this.activeColor = parent.activeColor; |
|||
this.inactiveColor = parent.inactiveColor; |
|||
// 将本组件的this，放入到父组件的children数组中，让父组件可以操作本(子)组件的方法和属性 |
|||
// push进去前，显判断是否已经存在了本实例，因为在子组件内部数据变化时，会通过父组件重新初始化子组件 |
|||
let exist = parent.children.find(val => { |
|||
return this === val; |
|||
}); |
|||
if (!exist) parent.children.push(this); |
|||
if (parent.children.length == 1) this.active = true; |
|||
// 父组件无法监听children的变化，故将子组件的title，传入父组件的menuList数组中 |
|||
parent.menuList.push({ |
|||
title: this.title, |
|||
disabled: this.disabled |
|||
}); |
|||
} |
|||
}, |
|||
// cell被点击 |
|||
cellClick(value) { |
|||
// 修改通过v-model绑定的值 |
|||
this.$emit("input", value); |
|||
this.$emit("update:modelValue", value); |
|||
// 通知父组件(u-dropdown)收起菜单 |
|||
this.parent.close(); |
|||
// 发出事件，抛出当前勾选项的value |
|||
this.$emit("change", value); |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.init(); |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "../../libs/css/style.components.scss"; |
|||
</style> |
|||
@ -0,0 +1,299 @@ |
|||
<template> |
|||
<view class="u-dropdown"> |
|||
<view class="u-dropdown__menu" :style="{ |
|||
height: $u.addUnit(height) |
|||
}" :class="{ |
|||
'u-border-bottom': borderBottom |
|||
}"> |
|||
<view class="u-dropdown__menu__item" v-for="(item, index) in menuList" :key="index" @tap.stop="menuClick(index)"> |
|||
<view class="u-flex"> |
|||
<text class="u-dropdown__menu__item__text" :style="{ |
|||
color: item.disabled ? '#c0c4cc' : (index === current || highlightIndex == index) ? activeColor : inactiveColor, |
|||
fontSize: $u.addUnit(titleSize) |
|||
}">{{item.title}}</text> |
|||
<view class="u-dropdown__menu__item__arrow" :class="{ |
|||
'u-dropdown__menu__item__arrow--rotate': index === current |
|||
}"> |
|||
<u-icon :custom-style="{display: 'flex'}" :name="menuIcon" :size="$u.addUnit(menuIconSize)" :color="index === current || highlightIndex == index ? activeColor : '#c0c4cc'"></u-icon> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-dropdown__content" :style="[contentStyle, { |
|||
transition: `opacity ${duration / 1000}s linear`, |
|||
top: $u.addUnit(height), |
|||
height: contentHeight + 'px' |
|||
}]" |
|||
@tap="maskClick" @touchmove.stop.prevent> |
|||
<view @tap.stop.prevent class="u-dropdown__content__popup" :style="[popupStyle]"> |
|||
<slot></slot> |
|||
</view> |
|||
<view class="u-dropdown__content__mask"></view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* dropdown 下拉菜单 |
|||
* @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景 |
|||
* @tutorial http://uviewui.com/components/dropdown.html |
|||
* @property {String} active-color 标题和选项卡选中的颜色（默认#2979ff） |
|||
* @property {String} inactive-color 标题和选项卡未选中的颜色（默认#606266） |
|||
* @property {Boolean} close-on-click-mask 点击遮罩是否关闭菜单（默认true） |
|||
* @property {Boolean} close-on-click-self 点击当前激活项标题是否关闭菜单（默认true） |
|||
* @property {String | Number} duration 选项卡展开和收起的过渡时间，单位ms（默认300） |
|||
* @property {String | Number} height 标题菜单的高度，单位任意（默认80） |
|||
* @property {String | Number} border-radius 菜单展开内容下方的圆角值，单位任意（默认0） |
|||
* @property {Boolean} border-bottom 标题菜单是否显示下边框（默认false） |
|||
* @property {String | Number} title-size 标题的字体大小，单位任意，数值默认为rpx单位（默认28） |
|||
* @event {Function} open 下拉菜单被打开时触发 |
|||
* @event {Function} close 下拉菜单被关闭时触发 |
|||
* @example <u-dropdown></u-dropdown> |
|||
*/ |
|||
export default { |
|||
name: 'u-dropdown', |
|||
emits: ["open", "close"], |
|||
props: { |
|||
// 菜单标题和选项的激活态颜色 |
|||
activeColor: { |
|||
type: String, |
|||
default: '#2979ff' |
|||
}, |
|||
// 菜单标题和选项的未激活态颜色 |
|||
inactiveColor: { |
|||
type: String, |
|||
default: '#606266' |
|||
}, |
|||
// 点击遮罩是否关闭菜单 |
|||
closeOnClickMask: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 点击当前激活项标题是否关闭菜单 |
|||
closeOnClickSelf: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 过渡时间 |
|||
duration: { |
|||
type: [Number, String], |
|||
default: 300 |
|||
}, |
|||
// 标题菜单的高度，单位任意，数值默认为rpx单位 |
|||
height: { |
|||
type: [Number, String], |
|||
default: 80 |
|||
}, |
|||
// 是否显示下边框 |
|||
borderBottom: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 标题的字体大小 |
|||
titleSize: { |
|||
type: [Number, String], |
|||
default: 28 |
|||
}, |
|||
// 下拉出来的内容部分的圆角值 |
|||
borderRadius: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
// 菜单右侧的icon图标 |
|||
menuIcon: { |
|||
type: String, |
|||
default: 'arrow-down' |
|||
}, |
|||
// 菜单右侧图标的大小 |
|||
menuIconSize: { |
|||
type: [Number, String], |
|||
default: 26 |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
showDropdown: true, // 是否打开下来菜单, |
|||
menuList: [], // 显示的菜单 |
|||
active: false, // 下拉菜单的状态 |
|||
// 当前是第几个菜单处于激活状态，小程序中此处不能写成false或者""，否则后续将current赋值为0， |
|||
// 无能的TX没有使用===而是使用==判断，导致程序认为前后二者没有变化，从而不会触发视图更新 |
|||
current: 99999, |
|||
// 外层内容的样式，初始时处于底层，且透明 |
|||
contentStyle: { |
|||
zIndex: -1, |
|||
opacity: 0 |
|||
}, |
|||
// 让某个菜单保持高亮的状态 |
|||
highlightIndex: 99999, |
|||
contentHeight: 0 |
|||
} |
|||
}, |
|||
computed: { |
|||
// 下拉出来部分的样式 |
|||
popupStyle() { |
|||
let style = {}; |
|||
// 进行Y轴位移，展开状态时，恢复原位。收齐状态时，往上位移100%，进行隐藏 |
|||
style.transform = `translateY(${this.active ? 0 : '-100%'})` |
|||
style['transition-duration'] = this.duration / 1000 + 's'; |
|||
style.borderRadius = `0 0 ${this.$u.addUnit(this.borderRadius)} ${this.$u.addUnit(this.borderRadius)}`; |
|||
return style; |
|||
} |
|||
}, |
|||
created() { |
|||
// 引用所有子组件(u-dropdown-item)的this，不能在data中声明变量，否则在微信小程序会造成循环引用而报错 |
|||
this.children = []; |
|||
}, |
|||
mounted() { |
|||
this.getContentHeight(); |
|||
}, |
|||
methods: { |
|||
init() { |
|||
// 当某个子组件内容变化时，触发父组件的init，父组件再让每一个子组件重新初始化一遍 |
|||
// 以保证数据的正确性 |
|||
this.menuList = []; |
|||
this.children.map(child => { |
|||
child.init(); |
|||
}) |
|||
}, |
|||
// 点击菜单 |
|||
menuClick(index) { |
|||
// 判断是否被禁用 |
|||
if (this.menuList[index].disabled) return; |
|||
// 如果点击时的索引和当前激活项索引相同，意味着点击了激活项，需要收起下拉菜单 |
|||
if (index === this.current && this.closeOnClickSelf) { |
|||
this.close(); |
|||
// 等动画结束后，再移除下拉菜单中的内容，否则直接移除，也就没有下拉菜单收起的效果了 |
|||
setTimeout(() => { |
|||
this.children[index].active = false; |
|||
}, this.duration) |
|||
return; |
|||
} |
|||
this.open(index); |
|||
}, |
|||
// 打开下拉菜单 |
|||
open(index) { |
|||
// 重置高亮索引，否则会造成多个菜单同时高亮 |
|||
// this.highlightIndex = 9999; |
|||
// 展开时，设置下拉内容的样式 |
|||
this.contentStyle = { |
|||
zIndex: 11, |
|||
} |
|||
// 标记展开状态以及当前展开项的索引 |
|||
this.active = true; |
|||
this.current = index; |
|||
// 历遍所有的子元素，将索引匹配的项标记为激活状态，因为子元素是通过v-if控制切换的 |
|||
// 之所以不是因display: none，是因为nvue没有display这个属性 |
|||
this.children.map((val, idx) => { |
|||
val.active = index == idx ? true : false; |
|||
}) |
|||
this.$emit('open', this.current); |
|||
}, |
|||
// 设置下拉菜单处于收起状态 |
|||
close() { |
|||
this.$emit('close', this.current); |
|||
// 设置为收起状态，同时current归位，设置为空字符串 |
|||
this.active = false; |
|||
this.current = 99999; |
|||
// 下拉内容的样式进行调整，不透明度设置为0 |
|||
this.contentStyle = { |
|||
zIndex: -1, |
|||
opacity: 0 |
|||
} |
|||
}, |
|||
// 点击遮罩 |
|||
maskClick() { |
|||
// 如果不允许点击遮罩，直接返回 |
|||
if (!this.closeOnClickMask) return; |
|||
this.close(); |
|||
}, |
|||
// 外部手动设置某个菜单高亮 |
|||
highlight(index = undefined) { |
|||
this.highlightIndex = index !== undefined ? index : 99999; |
|||
}, |
|||
// 获取下拉菜单内容的高度 |
|||
getContentHeight() { |
|||
// 这里的原理为，因为dropdown组件是相对定位的，它的下拉出来的内容，必须给定一个高度 |
|||
// 才能让遮罩占满菜单一下，直到屏幕底部的高度 |
|||
// this.$u.sys()为uView封装的获取设备信息的方法 |
|||
let windowHeight = this.$u.sys().windowHeight; |
|||
this.$uGetRect('.u-dropdown__menu').then(res => { |
|||
// 这里获取的是dropdown的尺寸，在H5上，uniapp获取尺寸是有bug的(以前提出修复过，后来又出现了此bug，目前hx2.8.11版本) |
|||
// H5端bug表现为元素尺寸的top值为导航栏底部到到元素的上边沿的距离，但是元素的bottom值确是导航栏顶部到元素底部的距离 |
|||
// 二者是互相矛盾的，本质原因是H5端导航栏非原生，uni的开发者大意造成 |
|||
// 这里取菜单栏的botton值合理的，不能用res.top，否则页面会造成滚动 |
|||
this.contentHeight = windowHeight - res.bottom; |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-dropdown { |
|||
flex: 1; |
|||
width: 100%; |
|||
position: relative; |
|||
|
|||
&__menu { |
|||
@include vue-flex; |
|||
position: relative; |
|||
z-index: 11; |
|||
height: 80rpx; |
|||
|
|||
&__item { |
|||
flex: 1; |
|||
@include vue-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
&__text { |
|||
font-size: 28rpx; |
|||
color: $u-content-color; |
|||
} |
|||
|
|||
&__arrow { |
|||
margin-left: 6rpx; |
|||
transition: transform .3s; |
|||
align-items: center; |
|||
@include vue-flex; |
|||
|
|||
&--rotate { |
|||
transform: rotate(180deg); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
&__content { |
|||
position: absolute; |
|||
z-index: 8; |
|||
width: 100%; |
|||
left: 0px; |
|||
bottom: 0; |
|||
overflow: hidden; |
|||
|
|||
|
|||
&__mask { |
|||
position: absolute; |
|||
z-index: 9; |
|||
background: rgba(0, 0, 0, .3); |
|||
width: 100%; |
|||
left: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
} |
|||
|
|||
&__popup { |
|||
position: relative; |
|||
z-index: 10; |
|||
transition: all 0.3s; |
|||
transform: translate3D(0, -100%, 0); |
|||
overflow: hidden; |
|||
} |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,193 @@ |
|||
<template> |
|||
<view class="u-empty" v-if="show" :style="{ |
|||
marginTop: marginTop + 'rpx' |
|||
}"> |
|||
<u-icon |
|||
:name="src ? src : 'empty-' + mode" |
|||
:custom-style="iconStyle" |
|||
:label="text ? text : icons[mode]" |
|||
label-pos="bottom" |
|||
:label-color="color" |
|||
:label-size="fontSize" |
|||
:size="iconSize" |
|||
:color="iconColor" |
|||
margin-top="14" |
|||
></u-icon> |
|||
<view class="u-slot-wrap"> |
|||
<slot name="bottom"></slot> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* empty 内容为空 |
|||
* @description 该组件用于需要加载内容，但是加载的第一页数据就为空，提示一个"没有内容"的场景， 我们精心挑选了十几个场景的图标，方便您使用。 |
|||
* @tutorial https://www.uviewui.com/components/empty.html |
|||
* @property {String} color 文字颜色（默认#c0c4cc） |
|||
* @property {String} text 文字提示（默认“无内容”） |
|||
* @property {String} src 自定义图标路径，如定义，mode参数会失效 |
|||
* @property {String Number} font-size 提示文字的大小，单位rpx（默认28） |
|||
* @property {String} mode 内置的图标，见官网说明（默认data） |
|||
* @property {String Number} img-width 图标的宽度，单位rpx（默认240） |
|||
* @property {String} img-height 图标的高度，单位rpx（默认auto） |
|||
* @property {String Number} margin-top 组件距离上一个元素之间的距离（默认0） |
|||
* @property {Boolean} show 是否显示组件（默认true） |
|||
* @event {Function} click 点击组件时触发 |
|||
* @event {Function} close 点击关闭按钮时触发 |
|||
* @example <u-empty text="所谓伊人，在水一方" mode="list"></u-empty> |
|||
*/ |
|||
export default { |
|||
name: "u-empty", |
|||
props: { |
|||
// 图标路径 |
|||
src: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 提示文字 |
|||
text: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 文字颜色 |
|||
color: { |
|||
type: String, |
|||
default: '#c0c4cc' |
|||
}, |
|||
// 图标的颜色 |
|||
iconColor: { |
|||
type: String, |
|||
default: '#c0c4cc' |
|||
}, |
|||
// 图标的大小 |
|||
iconSize: { |
|||
type: [String, Number], |
|||
default: 120 |
|||
}, |
|||
// 文字大小，单位rpx |
|||
fontSize: { |
|||
type: [String, Number], |
|||
default: 26 |
|||
}, |
|||
// 选择预置的图标类型 |
|||
mode: { |
|||
type: String, |
|||
default: 'data' |
|||
}, |
|||
// 图标宽度，单位rpx |
|||
imgWidth: { |
|||
type: [String, Number], |
|||
default: 120 |
|||
}, |
|||
// 图标高度，单位rpx |
|||
imgHeight: { |
|||
type: [String, Number], |
|||
default: 'auto' |
|||
}, |
|||
// 是否显示组件 |
|||
show: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 组件距离上一个元素之间的距离 |
|||
marginTop: { |
|||
type: [String, Number], |
|||
default: 0 |
|||
}, |
|||
iconStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
icons: { |
|||
car: '购物车为空', |
|||
page: '页面不存在', |
|||
search: '没有搜索结果', |
|||
address: '没有收货地址', |
|||
wifi: '没有WiFi', |
|||
order: '订单为空', |
|||
coupon: '没有优惠券', |
|||
favor: '暂无收藏', |
|||
permission: '无权限', |
|||
history: '无历史记录', |
|||
news: '无新闻列表', |
|||
message: '消息列表为空', |
|||
list: '列表为空', |
|||
data: '数据为空' |
|||
}, |
|||
// icons: [{ |
|||
// icon: 'car', |
|||
// text: '购物车为空' |
|||
// },{ |
|||
// icon: 'page', |
|||
// text: '页面不存在' |
|||
// },{ |
|||
// icon: 'search', |
|||
// text: '没有搜索结果' |
|||
// },{ |
|||
// icon: 'address', |
|||
// text: '没有收货地址' |
|||
// },{ |
|||
// icon: 'wifi', |
|||
// text: '没有WiFi' |
|||
// },{ |
|||
// icon: 'order', |
|||
// text: '订单为空' |
|||
// },{ |
|||
// icon: 'coupon', |
|||
// text: '没有优惠券' |
|||
// },{ |
|||
// icon: 'favor', |
|||
// text: '暂无收藏' |
|||
// },{ |
|||
// icon: 'permission', |
|||
// text: '无权限' |
|||
// },{ |
|||
// icon: 'history', |
|||
// text: '无历史记录' |
|||
// },{ |
|||
// icon: 'news', |
|||
// text: '无新闻列表' |
|||
// },{ |
|||
// icon: 'message', |
|||
// text: '消息列表为空' |
|||
// },{ |
|||
// icon: 'list', |
|||
// text: '列表为空' |
|||
// },{ |
|||
// icon: 'data', |
|||
// text: '数据为空' |
|||
// }], |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-empty { |
|||
@include vue-flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
height: 100%; |
|||
} |
|||
|
|||
.u-image { |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.u-slot-wrap { |
|||
@include vue-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-top: 20rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,402 @@ |
|||
<template> |
|||
<view class="u-field" :class="{'u-border-top': borderTop, 'u-border-bottom': borderBottom }"> |
|||
<view class="u-field-inner" :class="[type == 'textarea' ? 'u-textarea-inner' : '', 'u-label-postion-' + labelPosition]"> |
|||
<view class="u-label" :class="[required ? 'u-required' : '']" :style="{ |
|||
justifyContent: justifyContent, |
|||
flex: labelPosition == 'left' ? `0 0 ${labelWidth}rpx` : '1' |
|||
}"> |
|||
<view class="u-icon-wrap" v-if="icon"> |
|||
<u-icon size="32" :custom-style="iconStyle" :name="icon" :color="iconColor" class="u-icon"></u-icon> |
|||
</view> |
|||
<slot name="icon"></slot> |
|||
<text class="u-label-text" :class="[$slots.icon || icon ? 'u-label-left-gap' : '']">{{ label }}</text> |
|||
</view> |
|||
<view class="fild-body"> |
|||
<view class="u-flex-1 u-flex" :style="[inputWrapStyle]"> |
|||
<textarea v-if="type == 'textarea'" class="u-flex-1 u-textarea-class" :style="[fieldStyle]" :value="valueCom" |
|||
:placeholder="placeholder" :placeholderStyle="placeholderStyle" :disabled="disabled" :maxlength="inputMaxlength" |
|||
:focus="focus" :autoHeight="autoHeight" :fixed="fixed" @input="onInput" @blur="onBlur" @focus="onFocus" @confirm="onConfirm" |
|||
@tap="fieldClick" /> |
|||
<input |
|||
v-else |
|||
:style="[fieldStyle]" |
|||
:type="type" |
|||
class="u-flex-1 u-field__input-wrap" |
|||
:value="valueCom" |
|||
:password="password || type === 'password'" |
|||
:placeholder="placeholder" |
|||
:placeholderStyle="placeholderStyle" |
|||
:disabled="disabled" |
|||
:maxlength="inputMaxlength" |
|||
:focus="focus" |
|||
:confirmType="confirmType" |
|||
@focus="onFocus" |
|||
@blur="onBlur" |
|||
@input="onInput" |
|||
@confirm="onConfirm" |
|||
@tap="fieldClick" |
|||
/> |
|||
</view> |
|||
<u-icon :size="clearSize" v-if="clearable && valueCom != '' && focused" name="close-circle-fill" color="#c0c4cc" class="u-clear-icon" @click="onClear"/> |
|||
<view class="u-button-wrap"><slot name="right" /></view> |
|||
<u-icon v-if="rightIcon" @click="rightIconClick" :name="rightIcon" color="#c0c4cc" :style="[rightIconStyle]" size="26" class="u-arror-right" /> |
|||
</view> |
|||
</view> |
|||
<view v-if="errorMessage !== false && errorMessage != ''" class="u-error-message" :style="{ |
|||
paddingLeft: labelWidth + 'rpx' |
|||
}">{{ errorMessage }}</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* field 输入框 |
|||
* @description 借助此组件，可以实现表单的输入， 有"text"和"textarea"类型的，此外，借助uView的picker和actionSheet组件可以快速实现上拉菜单，时间，地区选择等， 为表单解决方案的利器。 |
|||
* @tutorial https://www.uviewui.com/components/field.html |
|||
* @property {String} type 输入框的类型（默认text） |
|||
* @property {String} icon label左边的图标，限uView的图标名称 |
|||
* @property {Object} icon-style 左边图标的样式，对象形式 |
|||
* @property {Boolean} right-icon 输入框右边的图标名称，限uView的图标名称（默认false） |
|||
* @property {Boolean} required 是否必填，左边您显示红色"*"号（默认false） |
|||
* @property {String} label 输入框左边的文字提示 |
|||
* @property {Boolean} password 是否密码输入方式(用点替换文字)，type为text时有效（默认false） |
|||
* @property {Boolean} clearable 是否显示右侧清空内容的图标控件(输入框有内容，且获得焦点时才显示)，点击可清空输入框内容（默认true） |
|||
* @property {Number String} label-width label的宽度，单位rpx（默认130） |
|||
* @property {String} label-align label的文字对齐方式（默认left） |
|||
* @property {Object} field-style 自定义输入框的样式，对象形式 |
|||
* @property {Number | String} clear-size 清除图标的大小，单位rpx（默认30） |
|||
* @property {String} input-align 输入框内容对齐方式（默认left） |
|||
* @property {Boolean} border-bottom 是否显示field的下边框（默认true） |
|||
* @property {Boolean} border-top 是否显示field的上边框（默认false） |
|||
* @property {String} icon-color 左边通过icon配置的图标的颜色（默认#606266） |
|||
* @property {Boolean} auto-height 是否自动增高输入区域，type为textarea时有效（默认true） |
|||
* @property {String Boolean} error-message 显示的错误提示内容，如果为空字符串或者false，则不显示错误信息 |
|||
* @property {String} placeholder 输入框的提示文字 |
|||
* @property {String} placeholder-style placeholder的样式(内联样式，字符串)，如"color: #ddd" |
|||
* @property {Boolean} focus 是否自动获得焦点（默认false） |
|||
* @property {Boolean} fixed 如果type为textarea，且在一个"position:fixed"的区域，需要指明为true（默认false） |
|||
* @property {Boolean} disabled 是否不可输入（默认false） |
|||
* @property {Number String} maxlength 最大输入长度，设置为 -1 的时候不限制最大长度（默认140） |
|||
* @property {String} confirm-type 设置键盘右下角按钮的文字，仅在type="text"时生效（默认done） |
|||
* @event {Function} input 输入框内容发生变化时触发 |
|||
* @event {Function} focus 输入框获得焦点时触发 |
|||
* @event {Function} blur 输入框失去焦点时触发 |
|||
* @event {Function} confirm 点击完成按钮时触发 |
|||
* @event {Function} right-icon-click 通过right-icon生成的图标被点击时触发 |
|||
* @event {Function} click 输入框被点击或者通过right-icon生成的图标被点击时触发，这样设计是考虑到传递右边的图标，一般都为需要弹出"picker"等操作时的场景，点击倒三角图标，理应发出此事件，见上方说明 |
|||
* @example <u-field v-model="mobile" label="手机号" required :error-message="errorMessage"></u-field> |
|||
*/ |
|||
export default { |
|||
name:"u-field", |
|||
emits: ["update:modelValue", "input", "focus", "blur", "confirm", "right-icon-click", "click"], |
|||
props: { |
|||
value: [Number, String], |
|||
modelValue: [Number, String], |
|||
icon: String, |
|||
rightIcon: String, |
|||
arrowDirection: { |
|||
type: String, |
|||
default: 'right' |
|||
}, |
|||
required: Boolean, |
|||
label: String, |
|||
password: Boolean, |
|||
clearable: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 左边标题的宽度单位rpx |
|||
labelWidth: { |
|||
type: [Number, String], |
|||
default: 130 |
|||
}, |
|||
// 对齐方式，left|center|right |
|||
labelAlign: { |
|||
type: String, |
|||
default: 'left' |
|||
}, |
|||
inputAlign: { |
|||
type: String, |
|||
default: 'left' |
|||
}, |
|||
iconColor: { |
|||
type: String, |
|||
default: '#606266' |
|||
}, |
|||
autoHeight: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
errorMessage: { |
|||
type: [String, Boolean], |
|||
default: '' |
|||
}, |
|||
placeholder: String, |
|||
placeholderStyle: String, |
|||
focus: Boolean, |
|||
fixed: Boolean, |
|||
type: { |
|||
type: String, |
|||
default: 'text' |
|||
}, |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
maxlength: { |
|||
type: [Number, String], |
|||
default: 140 |
|||
}, |
|||
confirmType: { |
|||
type: String, |
|||
default: 'done' |
|||
}, |
|||
// lable的位置，可选为 left-左边，top-上边 |
|||
labelPosition: { |
|||
type: String, |
|||
default: 'left' |
|||
}, |
|||
// 输入框的自定义样式 |
|||
fieldStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {} |
|||
} |
|||
}, |
|||
// 清除按钮的大小 |
|||
clearSize: { |
|||
type: [Number, String], |
|||
default: 30 |
|||
}, |
|||
// lable左边的图标样式，对象形式 |
|||
iconStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {} |
|||
} |
|||
}, |
|||
// 是否显示上边框 |
|||
borderTop: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否显示下边框 |
|||
borderBottom: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否自动去除两端的空格 |
|||
trim: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
focused: false, |
|||
itemIndex: 0, |
|||
}; |
|||
}, |
|||
computed: { |
|||
valueCom() { |
|||
// #ifndef VUE3 |
|||
return this.value; |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
return this.modelValue; |
|||
// #endif |
|||
}, |
|||
inputWrapStyle() { |
|||
let style = {}; |
|||
style.textAlign = this.inputAlign; |
|||
// 判断lable的位置，如果是left的话，让input左边两边有间隙 |
|||
if(this.labelPosition == 'left') { |
|||
style.margin = `0 8rpx`; |
|||
} else { |
|||
// 如果lable是top的，input的左边就没必要有间隙了 |
|||
style.marginRight = `8rpx`; |
|||
} |
|||
return style; |
|||
}, |
|||
rightIconStyle() { |
|||
let style = {}; |
|||
let arrowDirectionObj = { |
|||
"top": "-90deg", |
|||
"bottom": "90deg", |
|||
"left": "180deg", |
|||
"right": "0deg", |
|||
}; |
|||
let deg = arrowDirectionObj[this.arrowDirection] || "0deg"; |
|||
style.transform = 'rotate('+deg+')'; |
|||
return style; |
|||
}, |
|||
labelStyle() { |
|||
let style = {}; |
|||
if(this.labelAlign == 'left') style.justifyContent = 'flext-start'; |
|||
if(this.labelAlign == 'center') style.justifyContent = 'center'; |
|||
if(this.labelAlign == 'right') style.justifyContent = 'flext-end'; |
|||
return style; |
|||
}, |
|||
// uni不支持在computed中写style.justifyContent = 'center'的形式，故用此方法 |
|||
justifyContent() { |
|||
if(this.labelAlign == 'left') return 'flex-start'; |
|||
if(this.labelAlign == 'center') return 'center'; |
|||
if(this.labelAlign == 'right') return 'flex-end'; |
|||
}, |
|||
// 因为uniapp的input组件的maxlength组件必须要数值，这里转为数值，给用户可以传入字符串数值 |
|||
inputMaxlength() { |
|||
return Number(this.maxlength) |
|||
}, |
|||
// label的位置 |
|||
fieldInnerStyle() { |
|||
let style = {}; |
|||
if(this.labelPosition == 'left') { |
|||
style.flexDirection = 'row'; |
|||
} else { |
|||
style.flexDirection = 'column'; |
|||
} |
|||
|
|||
return style; |
|||
} |
|||
}, |
|||
methods: { |
|||
onInput(event) { |
|||
let value = event.detail.value; |
|||
// 判断是否去除空格 |
|||
if(this.trim) value = this.$u.trim(value); |
|||
this.$emit('input', value); |
|||
this.$emit("update:modelValue", value); |
|||
}, |
|||
onFocus(event) { |
|||
this.focused = true; |
|||
this.$emit('focus', event); |
|||
}, |
|||
onBlur(event) { |
|||
// 最开始使用的是监听图标@touchstart事件，自从hx2.8.4后，此方法在微信小程序出错 |
|||
// 这里改为监听点击事件，手点击清除图标时，同时也发生了@blur事件，导致图标消失而无法点击，这里做一个延时 |
|||
setTimeout(() => { |
|||
this.focused = false; |
|||
}, 100) |
|||
this.$emit('blur', event); |
|||
}, |
|||
onConfirm(e) { |
|||
this.$emit('confirm', e.detail.value); |
|||
}, |
|||
onClear(event) { |
|||
this.$emit('input', ''); |
|||
this.$emit("update:modelValue", ''); |
|||
}, |
|||
rightIconClick() { |
|||
this.$emit('right-icon-click'); |
|||
this.$emit('click'); |
|||
}, |
|||
fieldClick() { |
|||
this.$emit('click'); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-field { |
|||
font-size: 28rpx; |
|||
padding: 20rpx 28rpx; |
|||
text-align: left; |
|||
position: relative; |
|||
color: $u-main-color; |
|||
} |
|||
|
|||
.u-field-inner { |
|||
@include vue-flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.u-textarea-inner { |
|||
align-items: flex-start; |
|||
} |
|||
|
|||
.u-textarea-class { |
|||
min-height: 96rpx; |
|||
width: auto; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.fild-body { |
|||
@include vue-flex; |
|||
flex: 1; |
|||
align-items: center; |
|||
} |
|||
|
|||
.u-arror-right { |
|||
margin-left: 8rpx; |
|||
} |
|||
|
|||
.u-label-text { |
|||
/* #ifndef APP-NVUE */ |
|||
display: inline-flex; |
|||
/* #endif */ |
|||
} |
|||
|
|||
.u-label-left-gap { |
|||
margin-left: 6rpx; |
|||
} |
|||
|
|||
.u-label-postion-top { |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
} |
|||
|
|||
.u-label { |
|||
width: 130rpx; |
|||
flex: 1 1 130rpx; |
|||
text-align: left; |
|||
position: relative; |
|||
@include vue-flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.u-required::before { |
|||
content: '*'; |
|||
position: absolute; |
|||
left: -16rpx; |
|||
font-size: 14px; |
|||
color: $u-type-error; |
|||
height: 9px; |
|||
line-height: 1; |
|||
} |
|||
|
|||
.u-field__input-wrap { |
|||
position: relative; |
|||
overflow: hidden; |
|||
font-size: 28rpx; |
|||
height: 48rpx; |
|||
flex: 1; |
|||
width: auto; |
|||
} |
|||
|
|||
.u-clear-icon { |
|||
@include vue-flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.u-error-message { |
|||
color: $u-type-error; |
|||
font-size: 26rpx; |
|||
text-align: left; |
|||
} |
|||
|
|||
.placeholder-style { |
|||
color: rgb(150, 151, 153); |
|||
} |
|||
|
|||
.u-input-class { |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.u-button-wrap { |
|||
margin-left: 8rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,509 @@ |
|||
<template> |
|||
<view class="u-form-item" :class="{'u-border-bottom': elBorderBottom, 'u-form-item__border-bottom--error': validateState === 'error' && showError('border-bottom')}"> |
|||
<view class="u-form-item__body" :style="{ |
|||
flexDirection: elLabelPosition == 'left' ? 'row' : 'column' |
|||
}"> |
|||
<!-- 微信小程序中，将一个参数设置空字符串，结果会变成字符串"true" --> |
|||
<view class="u-form-item--left" :style="{ |
|||
width: uLabelWidth, |
|||
flex: `0 0 ${uLabelWidth}`, |
|||
marginBottom: elLabelPosition == 'left' ? 0 : '10rpx', |
|||
}"> |
|||
<!-- 为了块对齐 --> |
|||
<view class="u-form-item--left__content" v-if="required || leftIcon || label"> |
|||
<!-- nvue不支持伪元素before --> |
|||
<text v-if="required" class="u-form-item--left__content--required">*</text> |
|||
<view class="u-form-item--left__content__icon" v-if="leftIcon"> |
|||
<u-icon :name="leftIcon" :custom-style="leftIconStyle"></u-icon> |
|||
</view> |
|||
<view class="u-form-item--left__content__label" :style="[elLabelStyle, { |
|||
'justify-content': elLabelAlign == 'left' ? 'flex-start' : elLabelAlign == 'center' ? 'center' : 'flex-end' |
|||
}]"> |
|||
{{label}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-form-item--right u-flex"> |
|||
<view class="u-form-item--right__content"> |
|||
<view class="u-form-item--right__content__slot" :style="elLabelPosition == 'left' && elInputAlign == 'right' ? 'text-align:right;display: inline-block;line-height:initial;' : ''"> |
|||
<slot /> |
|||
</view> |
|||
<view class="u-form-item--right__content__icon u-flex" v-if="$slots.right || rightIcon"> |
|||
<u-icon :custom-style="rightIconStyle" v-if="rightIcon" :name="rightIcon"></u-icon> |
|||
<slot name="right" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-form-item__message" v-if="validateState === 'error' && showError('message')" :style="{ |
|||
paddingLeft: elLabelPosition == 'left' ? $u.addUnit(elLabelWidth) : '0', |
|||
textAlign: elInputAlign == 'right' ? 'right' : 'left' |
|||
}">{{validateMessage}}</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import Emitter from '../../libs/util/emitter.js'; |
|||
import schema from '../../libs/util/async-validator'; |
|||
// 去除警告信息 |
|||
schema.warning = function() {}; |
|||
|
|||
/** |
|||
* form-item 表单item |
|||
* @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。 |
|||
* @tutorial http://uviewui.com/components/form.html |
|||
* @property {String} label 左侧提示文字 |
|||
* @property {Object} prop 表单域model对象的属性名，在使用 validate、resetFields 方法的情况下，该属性是必填的 |
|||
* @property {Boolean} border-bottom 是否显示表单域的下划线边框 |
|||
* @property {String} label-position 表单域提示文字的位置，left-左侧，top-上方 |
|||
* @property {String Number} label-width 提示文字的宽度，单位rpx（默认90） |
|||
* @property {Object} label-style lable的样式，对象形式 |
|||
* @property {String} label-align lable的对齐方式 |
|||
* @property {String} right-icon 右侧自定义字体图标(限uView内置图标)或图片地址 |
|||
* @property {String} left-icon 左侧自定义字体图标(限uView内置图标)或图片地址 |
|||
* @property {Object} left-icon-style 左侧图标的样式，对象形式 |
|||
* @property {Object} right-icon-style 右侧图标的样式，对象形式 |
|||
* @property {Boolean} required 是否显示左边的"*"号，这里仅起展示作用，如需校验必填，请通过rules配置必填规则(默认false) |
|||
* @example <u-form-item label="姓名"><u-input v-model="form.name" /></u-form-item> |
|||
*/ |
|||
|
|||
export default { |
|||
name: 'u-form-item', |
|||
mixins: [Emitter], |
|||
inject: { |
|||
uForm: { |
|||
default () { |
|||
return null |
|||
} |
|||
} |
|||
}, |
|||
props: { |
|||
// input的label提示语 |
|||
label: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 绑定的值 |
|||
prop: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 是否显示表单域的下划线边框 |
|||
borderBottom: { |
|||
type: [String, Boolean], |
|||
default: '' |
|||
}, |
|||
// label的位置，left-左边，top-上边 |
|||
labelPosition: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// label的宽度，单位rpx |
|||
labelWidth: { |
|||
type: [String, Number], |
|||
default: '' |
|||
}, |
|||
// lable的样式，对象形式 |
|||
labelStyle: { |
|||
type: Object, |
|||
default () { |
|||
return {} |
|||
} |
|||
}, |
|||
// lable字体的对齐方式 |
|||
labelAlign: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 右侧图标 |
|||
rightIcon: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 左侧图标 |
|||
leftIcon: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 左侧图标的样式 |
|||
leftIconStyle: { |
|||
type: Object, |
|||
default () { |
|||
return {} |
|||
} |
|||
}, |
|||
// 左侧图标的样式 |
|||
rightIconStyle: { |
|||
type: Object, |
|||
default () { |
|||
return {} |
|||
} |
|||
}, |
|||
// 是否显示左边的必填星号，只作显示用，具体校验必填的逻辑，请在rules中配置 |
|||
required: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
inputAlign:{ |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
initialValue: '', // 存储的默认值 |
|||
// isRequired: false, // 是否必填，由于人性化考虑，必填"*"号通过props的required配置，不再通过rules的规则自动生成 |
|||
validateState: '', // 是否校验成功 |
|||
validateMessage: '', // 校验失败的提示语 |
|||
// 有错误时的提示方式，message-提示信息，border-如果input设置了边框，变成呈红色， |
|||
errorType: ['message'], |
|||
fieldValue: '', // 获取当前子组件input的输入的值 |
|||
// 父组件的参数，在computed计算中，无法得知this.parent发生变化，故将父组件的参数值，放到data中 |
|||
parentData: { |
|||
borderBottom: true, |
|||
labelWidth: 90, |
|||
labelPosition: 'left', |
|||
labelStyle: {}, |
|||
labelAlign: 'left', |
|||
inputAlign: 'left', |
|||
} |
|||
}; |
|||
}, |
|||
watch: { |
|||
validateState(val) { |
|||
this.broadcastInputError(); |
|||
}, |
|||
// 监听u-form组件的errorType的变化 |
|||
"uForm.errorType"(val) { |
|||
this.errorType = val; |
|||
this.broadcastInputError(); |
|||
}, |
|||
}, |
|||
computed: { |
|||
// 计算后的label宽度，由于需要多个判断，故放到computed中 |
|||
uLabelWidth() { |
|||
// 如果用户设置label为空字符串(微信小程序空字符串最终会变成字符串的'true')，意味着要将label的位置宽度设置为auto |
|||
return this.elLabelPosition == 'left' ? (this.label === 'true' || this.label === '' ? 'auto' : this.$u.addUnit(this |
|||
.elLabelWidth)) : '100%'; |
|||
}, |
|||
showError() { |
|||
return type => { |
|||
// 如果errorType数组中含有none，或者toast提示类型 |
|||
if (this.errorType.indexOf('none') >= 0) return false; |
|||
else if (this.errorType.indexOf(type) >= 0) return true; |
|||
else return false; |
|||
} |
|||
}, |
|||
// label的宽度 |
|||
elLabelWidth() { |
|||
// label默认宽度为90，优先使用本组件的值，如果没有(如果设置为0，也算是配置了值，依然起效)，则用u-form的值 |
|||
return (this.labelWidth != 0 || this.labelWidth != '') ? this.labelWidth : (this.parentData.labelWidth ? this.parentData |
|||
.labelWidth : |
|||
90); |
|||
}, |
|||
// label的样式 |
|||
elLabelStyle() { |
|||
return Object.keys(this.labelStyle).length ? this.labelStyle : (this.parentData.labelStyle ? this.parentData.labelStyle : |
|||
{}); |
|||
}, |
|||
// label的位置，左侧或者上方 |
|||
elLabelPosition() { |
|||
return this.labelPosition ? this.labelPosition : (this.parentData.labelPosition ? this.parentData.labelPosition : |
|||
'left'); |
|||
}, |
|||
// label的对齐方式 |
|||
elLabelAlign() { |
|||
return this.labelAlign ? this.labelAlign : (this.parentData.labelAlign ? this.parentData.labelAlign : 'left'); |
|||
}, |
|||
// label的下划线 |
|||
elBorderBottom() { |
|||
// 子组件的borderBottom默认为空字符串，如果不等于空字符串，意味着子组件设置了值，优先使用子组件的值 |
|||
return this.borderBottom !== '' ? this.borderBottom : this.parentData.borderBottom ? this.parentData.borderBottom : |
|||
true; |
|||
}, |
|||
elInputAlign() { |
|||
return this.inputAlign ? this.inputAlign : (this.parentData.inputAlign ? this.parentData.inputAlign : 'left'); |
|||
}, |
|||
}, |
|||
methods: { |
|||
broadcastInputError() { |
|||
// 子组件发出事件，第三个参数为true或者false，true代表有错误 |
|||
this.broadcast('u-input', 'onFormItemError', this.validateState === 'error' && this.showError('border')); |
|||
}, |
|||
// 判断是否需要required校验 |
|||
setRules() { |
|||
let that = this; |
|||
// 由于人性化考虑，必填"*"号通过props的required配置，不再通过rules的规则自动生成 |
|||
// 从父组件u-form拿到当前u-form-item需要验证 的规则 |
|||
// let rules = this.getRules(); |
|||
// if (rules.length) { |
|||
// this.isRequired = rules.some(rule => { |
|||
// // 如果有必填项，就返回，没有的话，就是undefined |
|||
// return rule.required; |
|||
// }); |
|||
// } |
|||
// #ifndef VUE3 |
|||
// blur事件 |
|||
this.$on('onFieldBlur', that.onFieldBlur); |
|||
// change事件 |
|||
this.$on('onFieldChange', that.onFieldChange); |
|||
// #endif |
|||
// #ifdef VUE3 |
|||
|
|||
// #endif |
|||
}, |
|||
|
|||
// 从u-form的rules属性中，取出当前u-form-item的校验规则 |
|||
getRules() { |
|||
// 父组件的所有规则 |
|||
let rules = this.parent.rules; |
|||
rules = rules ? rules[this.prop] : []; |
|||
// 保证返回的是一个数组形式 |
|||
return [].concat(rules || []); |
|||
}, |
|||
|
|||
// blur事件时进行表单校验 |
|||
onFieldBlur() { |
|||
this.validation('blur'); |
|||
}, |
|||
|
|||
// change事件进行表单校验 |
|||
onFieldChange() { |
|||
this.validation('change'); |
|||
}, |
|||
|
|||
// 过滤出符合要求的rule规则 |
|||
getFilteredRule(triggerType = '') { |
|||
let rules = this.getRules(); |
|||
// 整体验证表单时，triggerType为空字符串，此时返回所有规则进行验证 |
|||
if (!triggerType) return rules; |
|||
// 历遍判断规则是否有对应的事件，比如blur，change触发等的事件 |
|||
// 使用indexOf判断，是因为某些时候设置的验证规则的trigger属性可能为多个，比如['blur','change'] |
|||
// 某些场景可能的判断规则，可能不存在trigger属性，故先判断是否存在此属性 |
|||
return rules.filter(res => res.trigger && res.trigger.indexOf(triggerType) !== -1); |
|||
}, |
|||
|
|||
getData(dataObj, name, defaultValue) { |
|||
let newDataObj; |
|||
if (dataObj) { |
|||
newDataObj = JSON.parse(JSON.stringify(dataObj)); |
|||
let k = "", |
|||
d = ".", |
|||
l = "[", |
|||
r = "]"; |
|||
name = name.replace(/\s+/g, k) + d; |
|||
let tstr = k; |
|||
for (let i = 0; i < name.length; i++) { |
|||
let theChar = name.charAt(i); |
|||
if (theChar != d && theChar != l && theChar != r) { |
|||
tstr += theChar; |
|||
} else if (newDataObj) { |
|||
if (tstr != k) newDataObj = newDataObj[tstr]; |
|||
tstr = k; |
|||
} |
|||
} |
|||
} |
|||
if (typeof newDataObj === "undefined" && typeof defaultValue !== "undefined") newDataObj = defaultValue; |
|||
return newDataObj; |
|||
}, |
|||
|
|||
setData(dataObj, name, value) { |
|||
// 通过正则表达式 查找路径数据 |
|||
let dataValue; |
|||
if (typeof value === "object") { |
|||
dataValue = JSON.parse(JSON.stringify(value)); |
|||
} else { |
|||
dataValue = value; |
|||
} |
|||
let regExp = new RegExp("([\\w$]+)|\\[(:\\d)\\]", "g"); |
|||
const patten = name.match(regExp); |
|||
// 遍历路径 逐级查找 最后一级用于直接赋值 |
|||
for (let i = 0; i < patten.length - 1; i++) { |
|||
let keyName = patten[i]; |
|||
if (typeof dataObj[keyName] !== "object") dataObj[keyName] = {}; |
|||
dataObj = dataObj[keyName]; |
|||
} |
|||
// 最后一级 |
|||
dataObj[patten[patten.length - 1]] = dataValue; |
|||
}, |
|||
|
|||
// 校验数据 |
|||
validation(trigger, callback = () => {}) { |
|||
// 检验之间，先获取需要校验的值 |
|||
//this.fieldValue = this.parent.model[this.prop]; |
|||
// 修改支持a.b |
|||
this.fieldValue = this.getData(this.parent.model,this.prop); |
|||
// blur和change是否有当前方式的校验规则 |
|||
let rules = this.getFilteredRule(trigger); |
|||
// 判断是否有验证规则，如果没有规则，也调用回调方法，否则父组件u-form会因为 |
|||
// 对count变量的统计错误而无法进入上一层的回调 |
|||
if (!rules || rules.length === 0) { |
|||
return callback(''); |
|||
} |
|||
// 设置当前的装填，标识为校验中 |
|||
this.validateState = 'validating'; |
|||
// 调用async-validator的方法 |
|||
let validator = new schema({ |
|||
[this.prop]: rules |
|||
}); |
|||
validator.validate({ |
|||
[this.prop]: this.fieldValue |
|||
}, { |
|||
firstFields: true |
|||
}, (errors, fields) => { |
|||
// 记录状态和报错信息 |
|||
this.validateState = !errors ? 'success' : 'error'; |
|||
this.validateMessage = errors ? errors[0].message : ''; |
|||
let field = errors ? errors[0].field : ''; |
|||
// 调用回调方法 |
|||
callback(this.validateMessage, { |
|||
state: this.validateState, |
|||
key: field, |
|||
msg: this.validateMessage |
|||
}); |
|||
}); |
|||
}, |
|||
|
|||
// 清空当前的u-form-item |
|||
resetField() { |
|||
//this.parent.model[this.prop] = this.initialValue; |
|||
this.setData(this.parent.model,this.prop,this.initialValue); |
|||
// 设置为`success`状态，只是为了清空错误标记 |
|||
this.validateState = 'success'; |
|||
} |
|||
}, |
|||
|
|||
// 组件创建完成时，将当前实例保存到u-form中 |
|||
mounted() { |
|||
// 支付宝、头条小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环应用 |
|||
this.parent = this.$u.$parent.call(this, 'u-form'); |
|||
if (this.parent) { |
|||
// 历遍parentData中的属性，将parent中的同名属性赋值给parentData |
|||
Object.keys(this.parentData).map(key => { |
|||
this.parentData[key] = this.parent[key]; |
|||
}); |
|||
// 如果没有传入prop，或者uForm为空(如果u-form-input单独使用，就不会有uForm注入)，就不进行校验 |
|||
if (this.prop) { |
|||
// 将本实例添加到父组件中 |
|||
this.parent.fields.push(this); |
|||
this.errorType = this.parent.errorType; |
|||
// 设置初始值 |
|||
this.initialValue = this.fieldValue; |
|||
// 添加表单校验，这里必须要写在$nextTick中，因为u-form的rules是通过ref手动传入的 |
|||
// 不在$nextTick中的话，可能会造成执行此处代码时，父组件还没通过ref把规则给u-form，导致规则为空 |
|||
this.$nextTick(() => { |
|||
this.setRules(); |
|||
}) |
|||
} |
|||
} |
|||
}, |
|||
// #ifndef VUE3 |
|||
// 组件销毁前，将实例从u-form的缓存中移除 |
|||
beforeDestroy() { |
|||
// 如果当前没有prop的话表示当前不要进行删除（因为没有注入） |
|||
if (this.parent && this.prop) { |
|||
this.parent.fields.map((item, index) => { |
|||
if (item === this) this.parent.fields.splice(index, 1); |
|||
}) |
|||
} |
|||
}, |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
beforeUnmount() { |
|||
// 如果当前没有prop的话表示当前不要进行删除（因为没有注入） |
|||
if (this.parent && this.prop) { |
|||
this.parent.fields.map((item, index) => { |
|||
if (item === this) this.parent.fields.splice(index, 1); |
|||
}) |
|||
} |
|||
}, |
|||
// #endif |
|||
|
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-form-item { |
|||
@include vue-flex; |
|||
// align-items: flex-start; |
|||
padding: 20rpx 0; |
|||
font-size: 28rpx; |
|||
color: $u-main-color; |
|||
box-sizing: border-box; |
|||
line-height: $u-form-item-height; |
|||
flex-direction: column; |
|||
|
|||
&__border-bottom--error:after { |
|||
border-color: $u-type-error; |
|||
} |
|||
|
|||
&__body { |
|||
@include vue-flex; |
|||
} |
|||
|
|||
&--left { |
|||
@include vue-flex; |
|||
align-items: center; |
|||
|
|||
&__content { |
|||
position: relative; |
|||
@include vue-flex; |
|||
align-items: center; |
|||
padding-right: 10rpx; |
|||
flex: 1; |
|||
|
|||
&__icon { |
|||
margin-right: 8rpx; |
|||
} |
|||
|
|||
&--required { |
|||
position: absolute; |
|||
left: -16rpx; |
|||
vertical-align: middle; |
|||
color: $u-type-error; |
|||
padding-top: 6rpx; |
|||
} |
|||
|
|||
&__label { |
|||
@include vue-flex; |
|||
align-items: center; |
|||
flex: 1; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&--right { |
|||
flex: 1; |
|||
|
|||
&__content { |
|||
@include vue-flex; |
|||
align-items: center; |
|||
flex: 1; |
|||
|
|||
&__slot { |
|||
flex: 1; |
|||
/* #ifndef MP */ |
|||
@include vue-flex; |
|||
align-items: center; |
|||
/* #endif */ |
|||
} |
|||
|
|||
&__icon { |
|||
margin-left: 10rpx; |
|||
color: $u-light-color; |
|||
font-size: 30rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&__message { |
|||
font-size: 24rpx; |
|||
line-height: 24rpx; |
|||
color: $u-type-error; |
|||
margin-top: 12rpx; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,148 @@ |
|||
<template> |
|||
<view class="u-form"><slot /></view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* form 表单 |
|||
* @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。 |
|||
* @tutorial http://uviewui.com/components/form.html |
|||
* @property {Object} model 表单数据对象 |
|||
* @property {Boolean} border-bottom 是否显示表单域的下划线边框 |
|||
* @property {String} label-position 表单域提示文字的位置，left-左侧，top-上方 |
|||
* @property {String Number} label-width 提示文字的宽度，单位rpx（默认90） |
|||
* @property {Object} label-style lable的样式，对象形式 |
|||
* @property {String} label-align lable的对齐方式 |
|||
* @property {Object} rules 通过ref设置，见官网说明 |
|||
* @property {Array} error-type 错误的提示方式，数组形式，见上方说明(默认['message']) |
|||
* @example <u-form :model="form" ref="uForm"></u-form> |
|||
*/ |
|||
|
|||
export default { |
|||
name: 'u-form', |
|||
props: { |
|||
// 当前form的需要验证字段的集合 |
|||
model: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
} |
|||
}, |
|||
// 验证规则 |
|||
// rules: { |
|||
// type: [Object, Function, Array], |
|||
// default() { |
|||
// return {}; |
|||
// } |
|||
// }, |
|||
// 有错误时的提示方式，message-提示信息，border-如果input设置了边框，变成呈红色， |
|||
// border-bottom-下边框呈现红色，none-无提示 |
|||
errorType: { |
|||
type: Array, |
|||
default() { |
|||
return ['message', 'toast'] |
|||
} |
|||
}, |
|||
// 是否显示表单域的下划线边框 |
|||
borderBottom: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// label的位置，left-左边，top-上边 |
|||
labelPosition: { |
|||
type: String, |
|||
default: 'left' |
|||
}, |
|||
// label的宽度，单位rpx |
|||
labelWidth: { |
|||
type: [String, Number], |
|||
default: 90 |
|||
}, |
|||
// lable字体的对齐方式 |
|||
labelAlign: { |
|||
type: String, |
|||
default: 'left' |
|||
}, |
|||
// lable的样式，对象形式 |
|||
labelStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {} |
|||
} |
|||
}, |
|||
// 表单内所有input的inputAlign属性的值 |
|||
inputAlign: { |
|||
type: String, |
|||
default: 'left' |
|||
}, |
|||
// 表单内所有input的clearable属性的值 |
|||
clearable:{ |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}, |
|||
provide() { |
|||
return { |
|||
uForm: this |
|||
}; |
|||
}, |
|||
data() { |
|||
return { |
|||
rules: {} |
|||
}; |
|||
}, |
|||
created() { |
|||
// 存储当前form下的所有u-form-item的实例 |
|||
// 不能定义在data中，否则微信小程序会造成循环引用而报错 |
|||
this.fields = []; |
|||
}, |
|||
methods: { |
|||
setRules(rules) { |
|||
this.rules = rules; |
|||
}, |
|||
// 清空所有u-form-item组件的内容，本质上是调用了u-form-item组件中的resetField()方法 |
|||
resetFields() { |
|||
this.fields.map(field => { |
|||
field.resetField(); |
|||
}); |
|||
}, |
|||
// 校验全部数据 |
|||
validate(callback) { |
|||
return new Promise(resolve => { |
|||
// 对所有的u-form-item进行校验 |
|||
let valid = true; // 默认通过 |
|||
let count = 0; // 用于标记是否检查完毕 |
|||
let errorArr = []; // 存放错误信息 |
|||
let errorObjArr = []; // 存放错误信息对象 |
|||
this.fields.map(field => { |
|||
// 调用每一个u-form-item实例的validation的校验方法 |
|||
field.validation('', (errorMsg, errObj) => { |
|||
// 如果任意一个u-form-item校验不通过，就意味着整个表单不通过 |
|||
if (errorMsg) { |
|||
valid = false; |
|||
errorArr.push(errorMsg); |
|||
errorObjArr.push(errObj) |
|||
} |
|||
|
|||
// 当历遍了所有的u-form-item时，调用promise的then方法 |
|||
if (++count === this.fields.length) { |
|||
|
|||
resolve(valid, errorObjArr[0]); // 进入promise的then方法 |
|||
// 判断是否设置了toast的提示方式，只提示最前面的表单域的第一个错误信息 |
|||
if(this.errorType.indexOf('none') === -1 && this.errorType.indexOf('toast') >= 0 && errorArr.length) { |
|||
this.$u.toast(errorArr[0]); |
|||
} |
|||
// 调用回调方法 |
|||
if (typeof callback == 'function') callback(valid, errorObjArr[0]); |
|||
} |
|||
}); |
|||
}); |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "../../libs/css/style.components.scss"; |
|||
</style> |
|||
@ -0,0 +1,52 @@ |
|||
<template> |
|||
<u-modal v-model="show" :show-cancel-button="true" confirm-text="升级" title="发现新版本" @cancel="cancel" @confirm="confirm"> |
|||
<view class="u-update-content"> |
|||
<rich-text :nodes="content"></rich-text> |
|||
</view> |
|||
</u-modal> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
show: false, |
|||
content: ` |
|||
1. 修复badge组件的size参数无效问题<br> |
|||
2. 新增Modal模态框组件<br> |
|||
3. 新增压窗屏组件，可以在APP上以弹窗的形式遮盖导航栏和底部tabbar<br> |
|||
4. 修复键盘组件在微信小程序上遮罩无效的问题 |
|||
`, |
|||
} |
|||
}, |
|||
onReady() { |
|||
this.show = true; |
|||
}, |
|||
methods: { |
|||
cancel() { |
|||
this.closeModal(); |
|||
}, |
|||
confirm() { |
|||
this.closeModal(); |
|||
}, |
|||
closeModal() { |
|||
uni.navigateBack(); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-full-content { |
|||
background-color: #00C777; |
|||
} |
|||
|
|||
.u-update-content { |
|||
font-size: 26rpx; |
|||
color: $u-content-color; |
|||
line-height: 1.7; |
|||
padding: 30rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,54 @@ |
|||
<template> |
|||
<view class="u-gap" :style="[gapStyle]"></view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* gap 间隔槽 |
|||
* @description 该组件一般用于内容块之间的用一个灰色块隔开的场景，方便用户风格统一，减少工作量 |
|||
* @tutorial https://www.uviewui.com/components/gap.html |
|||
* @property {String} bg-color 背景颜色（默认#f3f4f6） |
|||
* @property {String Number} height 分割槽高度，单位rpx（默认30） |
|||
* @property {String Number} margin-top 与前一个组件的距离，单位rpx（默认0） |
|||
* @property {String Number} margin-bottom 与后一个组件的距离，单位rpx（0） |
|||
* @example <u-gap height="80" bg-color="#bbb"></u-gap> |
|||
*/ |
|||
export default { |
|||
name: "u-gap", |
|||
props: { |
|||
bgColor: { |
|||
type: String, |
|||
default: 'transparent ' // 背景透明 |
|||
}, |
|||
// 高度 |
|||
height: { |
|||
type: [String, Number], |
|||
default: 30 |
|||
}, |
|||
// 与上一个组件的距离 |
|||
marginTop: { |
|||
type: [String, Number], |
|||
default: 0 |
|||
}, |
|||
// 与下一个组件的距离 |
|||
marginBottom: { |
|||
type: [String, Number], |
|||
default: 0 |
|||
}, |
|||
}, |
|||
computed: { |
|||
gapStyle() { |
|||
return { |
|||
backgroundColor: this.bgColor, |
|||
height: this.height + 'rpx', |
|||
marginTop: this.marginTop + 'rpx', |
|||
marginBottom: this.marginBottom + 'rpx' |
|||
}; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
</style> |
|||
@ -0,0 +1,127 @@ |
|||
<template> |
|||
<view class="u-grid-item" :hover-class="parentData.hoverClass" |
|||
:hover-stay-time="200" @tap="click" :style="{ |
|||
background: bgColor, |
|||
width: width, |
|||
}"> |
|||
<view class="u-grid-item-box" :style="[customStyle]" :class="[parentData.border ? 'u-border-right u-border-bottom' : '']"> |
|||
<slot /> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* gridItem 提示 |
|||
* @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。搭配u-grid使用 |
|||
* @tutorial https://www.uviewui.com/components/grid.html |
|||
* @property {String} bg-color 宫格的背景颜色（默认#ffffff） |
|||
* @property {String Number} index 点击宫格时，返回的值 |
|||
* @property {Object} custom-style 自定义样式，对象形式 |
|||
* @event {Function} click 点击宫格触发 |
|||
* @example <u-grid-item></u-grid-item> |
|||
*/ |
|||
export default { |
|||
name: "u-grid-item", |
|||
emits: ["click"], |
|||
props: { |
|||
// 背景颜色 |
|||
bgColor: { |
|||
type: String, |
|||
default: '#ffffff' |
|||
}, |
|||
// 点击时返回的index |
|||
index: { |
|||
type: [Number, String], |
|||
default: '' |
|||
}, |
|||
// 自定义样式，对象形式 |
|||
customStyle: { |
|||
type: Object, |
|||
default() { |
|||
return { |
|||
padding: '30rpx 0' |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
parentData: { |
|||
hoverClass: '', // 按下去的时候，是否显示背景灰色 |
|||
col: 3, // 父组件划分的宫格数 |
|||
border: true, // 是否显示边框，根据父组件决定 |
|||
} |
|||
}; |
|||
}, |
|||
created() { |
|||
// 父组件的实例 |
|||
this.updateParentData(); |
|||
// this.parent在updateParentData()中定义 |
|||
this.parent.children.push(this); |
|||
}, |
|||
computed: { |
|||
// 每个grid-item的宽度 |
|||
width() { |
|||
return 100 / Number(this.parentData.col) + '%'; |
|||
}, |
|||
}, |
|||
methods: { |
|||
// 获取父组件的参数 |
|||
updateParentData() { |
|||
// 此方法写在mixin中 |
|||
this.getParentData('u-grid'); |
|||
}, |
|||
click() { |
|||
this.$emit('click', this.index); |
|||
this.parent && this.parent.click(this.index); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-grid-item { |
|||
box-sizing: border-box; |
|||
background: #fff; |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
position: relative; |
|||
flex-direction: column; |
|||
|
|||
/* #ifdef MP */ |
|||
position: relative; |
|||
float: left; |
|||
/* #endif */ |
|||
} |
|||
|
|||
.u-grid-item-hover { |
|||
background: #f7f7f7 !important; |
|||
} |
|||
|
|||
.u-grid-marker-box { |
|||
position: absolute; |
|||
/* #ifndef APP-NVUE */ |
|||
display: inline-flex; |
|||
/* #endif */ |
|||
line-height: 0; |
|||
} |
|||
|
|||
.u-grid-marker-wrap { |
|||
position: absolute; |
|||
} |
|||
|
|||
.u-grid-item-box { |
|||
padding: 30rpx 0; |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
flex: 1; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,109 @@ |
|||
<template> |
|||
<view class="u-grid" :class="{'u-border-top u-border-left': border}" :style="[gridStyle]"><slot /></view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* grid 宫格布局 |
|||
* @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。 |
|||
* @tutorial https://www.uviewui.com/components/grid.html |
|||
* @property {String Number} col 宫格的列数（默认3） |
|||
* @property {Boolean} border 是否显示宫格的边框（默认true） |
|||
* @property {Boolean} hover-class 点击宫格的时候，是否显示按下的灰色背景（默认false） |
|||
* @event {Function} click 点击宫格触发 |
|||
* @example <u-grid :col="3" @click="click"></u-grid> |
|||
*/ |
|||
export default { |
|||
name: 'u-grid', |
|||
emits: ["click"], |
|||
props: { |
|||
// 分成几列 |
|||
col: { |
|||
type: [Number, String], |
|||
default: 3 |
|||
}, |
|||
// 是否显示边框 |
|||
border: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 宫格对齐方式，表现为数量少的时候，靠左，居中，还是靠右 |
|||
align: { |
|||
type: String, |
|||
default: 'left' |
|||
}, |
|||
// 宫格按压时的样式类，"none"为无效果 |
|||
hoverClass: { |
|||
type: String, |
|||
default: 'u-hover-class' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
index: 0, |
|||
} |
|||
}, |
|||
watch: { |
|||
// 当父组件需要子组件需要共享的参数发生了变化，手动通知子组件 |
|||
parentData() { |
|||
if(this.children.length) { |
|||
this.children.map(child => { |
|||
// 判断子组件(u-radio)如果有updateParentData方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值) |
|||
typeof(child.updateParentData) == 'function' && child.updateParentData(); |
|||
}) |
|||
} |
|||
}, |
|||
}, |
|||
created() { |
|||
// 如果将children定义在data中，在微信小程序会造成循环引用而报错 |
|||
this.children = []; |
|||
}, |
|||
computed: { |
|||
// 计算父组件的值是否发生变化 |
|||
parentData() { |
|||
return [this.hoverClass, this.col, this.size, this.border]; |
|||
}, |
|||
// 宫格对齐方式 |
|||
gridStyle() { |
|||
let style = {}; |
|||
switch(this.align) { |
|||
case 'left': |
|||
style.justifyContent = 'flex-start'; |
|||
break; |
|||
case 'center': |
|||
style.justifyContent = 'center'; |
|||
break; |
|||
case 'right': |
|||
style.justifyContent = 'flex-end'; |
|||
break; |
|||
default: style.justifyContent = 'flex-start'; |
|||
}; |
|||
return style; |
|||
} |
|||
}, |
|||
methods: { |
|||
click(index) { |
|||
this.$emit('click', index); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-grid { |
|||
width: 100%; |
|||
/* #ifdef MP */ |
|||
position: relative; |
|||
box-sizing: border-box; |
|||
overflow: hidden; |
|||
/* #endif */ |
|||
|
|||
/* #ifndef MP */ |
|||
@include vue-flex; |
|||
flex-wrap: wrap; |
|||
align-items: center; |
|||
/* #endif */ |
|||
} |
|||
</style> |
|||
@ -0,0 +1,369 @@ |
|||
<template> |
|||
<view :style="[customStyle]" class="u-icon" @tap="click" :class="['u-icon--' + labelPos]"> |
|||
<image class="u-icon__img" v-if="isImg" :src="name" :mode="imgMode" :style="[imgStyle]"></image> |
|||
<view |
|||
v-else |
|||
class="u-icon__icon" |
|||
:class="customClass" |
|||
:style="[iconStyle]" |
|||
:hover-class="hoverClass" |
|||
@touchstart="touchstart" |
|||
> |
|||
<text |
|||
v-if="showDecimalIcon" |
|||
:style="[decimalIconStyle]" |
|||
:class="decimalIconClass" |
|||
:hover-class="hoverClass" |
|||
class="u-icon__decimal" |
|||
></text> |
|||
</view> |
|||
<!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示，微信小程序不传值默认为null，故需要增加null的判断 --> |
|||
<text |
|||
v-if="label !== '' && label !== null" |
|||
class="u-icon__label" |
|||
:style="{ |
|||
color: labelColor, |
|||
fontSize: $u.addUnit(labelSize), |
|||
marginLeft: labelPos == 'right' ? $u.addUnit(marginLeft) : 0, |
|||
marginTop: labelPos == 'bottom' ? $u.addUnit(marginTop) : 0, |
|||
marginRight: labelPos == 'left' ? $u.addUnit(marginRight) : 0, |
|||
marginBottom: labelPos == 'top' ? $u.addUnit(marginBottom) : 0 |
|||
}" |
|||
> |
|||
{{ label }} |
|||
</text> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* icon 图标 |
|||
* @description 基于字体的图标集，包含了大多数常见场景的图标。 |
|||
* @tutorial https://www.uviewui.com/components/icon.html |
|||
* @property {String} name 图标名称，见示例图标集 |
|||
* @property {String} color 图标颜色（默认inherit） |
|||
* @property {String | Number} size 图标字体大小，单位rpx（默认32） |
|||
* @property {String | Number} label-size label字体大小，单位rpx（默认28） |
|||
* @property {String} label 图标右侧的label文字（默认28） |
|||
* @property {String} label-pos label文字相对于图标的位置，只能right或bottom（默认right） |
|||
* @property {String} label-color label字体颜色（默认#606266） |
|||
* @property {Object} custom-style icon的样式，对象形式 |
|||
* @property {String} custom-prefix 自定义字体图标库时，需要写上此值 |
|||
* @property {String | Number} margin-left label在右侧时与图标的距离，单位rpx（默认6） |
|||
* @property {String | Number} margin-top label在下方时与图标的距离，单位rpx（默认6） |
|||
* @property {String | Number} margin-bottom label在上方时与图标的距离，单位rpx（默认6） |
|||
* @property {String | Number} margin-right label在左侧时与图标的距离，单位rpx（默认6） |
|||
* @property {String} label-pos label相对于图标的位置，只能right或bottom（默认right） |
|||
* @property {String} index 一个用于区分多个图标的值，点击图标时通过click事件传出 |
|||
* @property {String} hover-class 图标按下去的样式类，用法同uni的view组件的hover-class参数，详情见官网 |
|||
* @property {String} width 显示图片小图标时的宽度 |
|||
* @property {String} height 显示图片小图标时的高度 |
|||
* @property {String} top 图标在垂直方向上的定位 |
|||
* @property {String} top 图标在垂直方向上的定位 |
|||
* @property {String} top 图标在垂直方向上的定位 |
|||
* @property {Boolean} show-decimal-icon 是否为DecimalIcon |
|||
* @property {String} inactive-color 背景颜色，可接受主题色，仅Decimal时有效 |
|||
* @property {String | Number} percent 显示的百分比，仅Decimal时有效 |
|||
* @event {Function} click 点击图标时触发 |
|||
* @example <u-icon name="photo" color="#2979ff" size="28"></u-icon> |
|||
*/ |
|||
export default { |
|||
name: "u-icon", |
|||
emits: ["click", "touchstart"], |
|||
props: { |
|||
// 图标类名 |
|||
name: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
// 图标颜色，可接受主题色 |
|||
color: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
// 字体大小，单位rpx |
|||
size: { |
|||
type: [Number, String], |
|||
default: "inherit" |
|||
}, |
|||
// 是否显示粗体 |
|||
bold: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 点击图标的时候传递事件出去的index（用于区分点击了哪一个） |
|||
index: { |
|||
type: [Number, String], |
|||
default: "" |
|||
}, |
|||
// 触摸图标时的类名 |
|||
hoverClass: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
// 自定义扩展前缀，方便用户扩展自己的图标库 |
|||
customPrefix: { |
|||
type: String, |
|||
default: "uicon" |
|||
}, |
|||
// 图标右边或者下面的文字 |
|||
label: { |
|||
type: [String, Number], |
|||
default: "" |
|||
}, |
|||
// label的位置，只能右边或者下边 |
|||
labelPos: { |
|||
type: String, |
|||
default: "right" |
|||
}, |
|||
// label的大小 |
|||
labelSize: { |
|||
type: [String, Number], |
|||
default: "28" |
|||
}, |
|||
// label的颜色 |
|||
labelColor: { |
|||
type: String, |
|||
default: "#606266" |
|||
}, |
|||
// label与图标的距离(横向排列) |
|||
marginLeft: { |
|||
type: [String, Number], |
|||
default: "6" |
|||
}, |
|||
// label与图标的距离(竖向排列) |
|||
marginTop: { |
|||
type: [String, Number], |
|||
default: "6" |
|||
}, |
|||
// label与图标的距离(竖向排列) |
|||
marginRight: { |
|||
type: [String, Number], |
|||
default: "6" |
|||
}, |
|||
// label与图标的距离(竖向排列) |
|||
marginBottom: { |
|||
type: [String, Number], |
|||
default: "6" |
|||
}, |
|||
// 图片的mode |
|||
imgMode: { |
|||
type: String, |
|||
default: "widthFix" |
|||
}, |
|||
// 自定义样式 |
|||
customStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
} |
|||
}, |
|||
// 用于显示图片小图标时，图片的宽度 |
|||
width: { |
|||
type: [String, Number], |
|||
default: "" |
|||
}, |
|||
// 用于显示图片小图标时，图片的高度 |
|||
height: { |
|||
type: [String, Number], |
|||
default: "" |
|||
}, |
|||
// 用于解决某些情况下，让图标垂直居中的用途 |
|||
top: { |
|||
type: [String, Number], |
|||
default: 0 |
|||
}, |
|||
// 是否为DecimalIcon |
|||
showDecimalIcon: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 背景颜色，可接受主题色，仅Decimal时有效 |
|||
inactiveColor: { |
|||
type: String, |
|||
default: "#ececec" |
|||
}, |
|||
// 显示的百分比，仅Decimal时有效 |
|||
percent: { |
|||
type: [Number, String], |
|||
default: "50" |
|||
} |
|||
}, |
|||
computed: { |
|||
customClass() { |
|||
let classes = []; |
|||
let { customPrefix, name } = this; |
|||
let index = name.indexOf("-icon-"); |
|||
if (index > -1) { |
|||
customPrefix = name.substring(0, index + 5); |
|||
classes.push(name); |
|||
} else { |
|||
classes.push(`${customPrefix}-${name}`); |
|||
} |
|||
// uView的自定义图标类名为u-iconfont |
|||
if (customPrefix === "uicon") { |
|||
classes.push("u-iconfont"); |
|||
} else { |
|||
classes.push(customPrefix); |
|||
} |
|||
// 主题色，通过类配置 |
|||
if ( |
|||
this.showDecimalIcon && |
|||
this.inactiveColor && |
|||
this.$u.config.type.includes(this.inactiveColor) |
|||
) { |
|||
classes.push("u-icon__icon--" + this.inactiveColor); |
|||
} else if (this.color && this.$u.config.type.includes(this.color)) |
|||
classes.push("u-icon__icon--" + this.color); |
|||
// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别 |
|||
// 故需将其拆成一个字符串的形式，通过空格隔开各个类名 |
|||
//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU |
|||
classes = classes.join(" "); |
|||
//#endif |
|||
return classes; |
|||
}, |
|||
iconStyle() { |
|||
let style = {}; |
|||
style = { |
|||
fontSize: this.size == "inherit" ? "inherit" : this.$u.addUnit(this.size), |
|||
fontWeight: this.bold ? "bold" : "normal", |
|||
// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中 |
|||
top: this.$u.addUnit(this.top) |
|||
}; |
|||
// 非主题色值时，才当作颜色值 |
|||
if ( |
|||
this.showDecimalIcon && |
|||
this.inactiveColor && |
|||
!this.$u.config.type.includes(this.inactiveColor) |
|||
) { |
|||
style.color = this.inactiveColor; |
|||
} else if (this.color && !this.$u.config.type.includes(this.color)) style.color = this.color; |
|||
|
|||
return style; |
|||
}, |
|||
// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式 |
|||
isImg() { |
|||
return this.name.indexOf("/") !== -1; |
|||
}, |
|||
imgStyle() { |
|||
let style = {}; |
|||
// 如果设置width和height属性，则优先使用，否则使用size属性 |
|||
style.width = this.width ? this.$u.addUnit(this.width) : this.$u.addUnit(this.size); |
|||
style.height = this.height ? this.$u.addUnit(this.height) : this.$u.addUnit(this.size); |
|||
return style; |
|||
}, |
|||
decimalIconStyle() { |
|||
let style = {}; |
|||
style = { |
|||
fontSize: this.size == "inherit" ? "inherit" : this.$u.addUnit(this.size), |
|||
fontWeight: this.bold ? "bold" : "normal", |
|||
// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中 |
|||
top: this.$u.addUnit(this.top), |
|||
width: this.percent + "%" |
|||
}; |
|||
// 非主题色值时，才当作颜色值 |
|||
if (this.color && !this.$u.config.type.includes(this.color)) style.color = this.color; |
|||
return style; |
|||
}, |
|||
decimalIconClass() { |
|||
let classes = []; |
|||
classes.push(this.customPrefix + "-" + this.name); |
|||
// uView的自定义图标类名为u-iconfont |
|||
if (this.customPrefix == "uicon") { |
|||
classes.push("u-iconfont"); |
|||
} else { |
|||
classes.push(this.customPrefix); |
|||
} |
|||
// 主题色，通过类配置 |
|||
if (this.color && this.$u.config.type.includes(this.color)) |
|||
classes.push("u-icon__icon--" + this.color); |
|||
else classes.push("u-icon__icon--primary"); |
|||
// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别 |
|||
// 故需将其拆成一个字符串的形式，通过空格隔开各个类名 |
|||
//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU |
|||
classes = classes.join(" "); |
|||
//#endif |
|||
return classes; |
|||
} |
|||
}, |
|||
methods: { |
|||
click() { |
|||
this.$emit("click", this.index); |
|||
}, |
|||
touchstart() { |
|||
this.$emit("touchstart", this.index); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "../../libs/css/style.components.scss"; |
|||
@import "../../iconfont.css"; |
|||
|
|||
.u-icon { |
|||
display: inline-flex; |
|||
align-items: center; |
|||
|
|||
&--left { |
|||
flex-direction: row-reverse; |
|||
align-items: center; |
|||
} |
|||
|
|||
&--right { |
|||
flex-direction: row; |
|||
align-items: center; |
|||
} |
|||
|
|||
&--top { |
|||
flex-direction: column-reverse; |
|||
justify-content: center; |
|||
} |
|||
|
|||
&--bottom { |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
} |
|||
|
|||
&__icon { |
|||
position: relative; |
|||
|
|||
&--primary { |
|||
color: $u-type-primary; |
|||
} |
|||
|
|||
&--success { |
|||
color: $u-type-success; |
|||
} |
|||
|
|||
&--error { |
|||
color: $u-type-error; |
|||
} |
|||
|
|||
&--warning { |
|||
color: $u-type-warning; |
|||
} |
|||
|
|||
&--info { |
|||
color: $u-type-info; |
|||
} |
|||
} |
|||
|
|||
&__decimal { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
display: inline-block; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
&__img { |
|||
height: auto; |
|||
will-change: transform; |
|||
} |
|||
|
|||
&__label { |
|||
line-height: 1; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,269 @@ |
|||
<template> |
|||
<view class="u-image" @tap="onClick" :style="[wrapStyle, backgroundStyle]"> |
|||
<image |
|||
v-if="!isError" |
|||
:src="src" |
|||
:mode="mode" |
|||
@error="onErrorHandler" |
|||
@load="onLoadHandler" |
|||
:lazy-load="lazyLoad" |
|||
class="u-image__image" |
|||
:show-menu-by-longpress="showMenuByLongpress" |
|||
:style="{ |
|||
borderRadius: shape == 'circle' ? '50%' : $u.addUnit(borderRadius) |
|||
}" |
|||
></image> |
|||
<view |
|||
v-if="showLoading && loading" |
|||
class="u-image__loading" |
|||
:style="{ |
|||
borderRadius: shape == 'circle' ? '50%' : $u.addUnit(borderRadius), |
|||
backgroundColor: bgColor |
|||
}" |
|||
> |
|||
<slot v-if="$slots.loading" name="loading" /> |
|||
<u-icon v-else :name="loadingIcon" :width="width" :height="height"></u-icon> |
|||
</view> |
|||
<view |
|||
v-if="showError && isError && !loading" |
|||
class="u-image__error" |
|||
:style="{ |
|||
borderRadius: shape == 'circle' ? '50%' : $u.addUnit(borderRadius) |
|||
}" |
|||
> |
|||
<slot v-if="$slots.error" name="error" /> |
|||
<u-icon v-else :name="errorIcon" :width="width" :height="height"></u-icon> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* Image 图片 |
|||
* @description 此组件为uni-app的image组件的加强版，在继承了原有功能外，还支持淡入动画、加载中、加载失败提示、圆角值和形状等。 |
|||
* @tutorial https://uviewui.com/components/image.html |
|||
* @property {String} src 图片地址 |
|||
* @property {String} mode 裁剪模式，见官网说明 |
|||
* @property {String | Number} width 宽度，单位任意，如果为数值，则为rpx单位（默认100%） |
|||
* @property {String | Number} height 高度，单位任意，如果为数值，则为rpx单位（默认 auto） |
|||
* @property {String} shape 图片形状，circle-圆形，square-方形（默认square） |
|||
* @property {String | Number} border-radius 圆角值，单位任意，如果为数值，则为rpx单位（默认 0） |
|||
* @property {Boolean} lazy-load 是否懒加载，仅微信小程序、App、百度小程序、字节跳动小程序有效（默认 true） |
|||
* @property {Boolean} show-menu-by-longpress 是否开启长按图片显示识别小程序码菜单，仅微信小程序有效（默认 false） |
|||
* @property {String} loading-icon 加载中的图标，或者小图片（默认 photo） |
|||
* @property {String} error-icon 加载失败的图标，或者小图片（默认 error-circle） |
|||
* @property {Boolean} show-loading 是否显示加载中的图标或者自定义的slot（默认 true） |
|||
* @property {Boolean} show-error 是否显示加载错误的图标或者自定义的slot（默认 true） |
|||
* @property {Boolean} fade 是否需要淡入效果（默认 true） |
|||
* @property {String Number} width 传入图片路径时图片的宽度 |
|||
* @property {String Number} height 传入图片路径时图片的高度 |
|||
* @property {Boolean} webp 只支持网络资源，只对微信小程序有效（默认 false） |
|||
* @property {String | Number} duration 搭配fade参数的过渡时间，单位ms（默认 500） |
|||
* @event {Function} click 点击图片时触发 |
|||
* @event {Function} error 图片加载失败时触发 |
|||
* @event {Function} load 图片加载成功时触发 |
|||
* @example <u-image width="100%" height="300rpx" :src="src"></u-image> |
|||
*/ |
|||
export default { |
|||
name: 'u-image', |
|||
emits: ["click", "error", "load"], |
|||
props: { |
|||
// 图片地址 |
|||
src: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 裁剪模式 |
|||
mode: { |
|||
type: String, |
|||
default: 'aspectFill' |
|||
}, |
|||
// 宽度，单位任意 |
|||
width: { |
|||
type: [String, Number], |
|||
default: '100%' |
|||
}, |
|||
// 高度，单位任意 |
|||
height: { |
|||
type: [String, Number], |
|||
default: 'auto' |
|||
}, |
|||
// 图片形状，circle-圆形，square-方形 |
|||
shape: { |
|||
type: String, |
|||
default: 'square' |
|||
}, |
|||
// 圆角，单位任意 |
|||
borderRadius: { |
|||
type: [String, Number], |
|||
default: 0 |
|||
}, |
|||
// 是否懒加载，微信小程序、App、百度小程序、字节跳动小程序 |
|||
lazyLoad: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 开启长按图片显示识别微信小程序码菜单 |
|||
showMenuByLongpress: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 加载中的图标，或者小图片 |
|||
loadingIcon: { |
|||
type: String, |
|||
default: 'photo' |
|||
}, |
|||
// 加载失败的图标，或者小图片 |
|||
errorIcon: { |
|||
type: String, |
|||
default: 'error-circle' |
|||
}, |
|||
// 是否显示加载中的图标或者自定义的slot |
|||
showLoading: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否显示加载错误的图标或者自定义的slot |
|||
showError: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否需要淡入效果 |
|||
fade: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 只支持网络资源，只对微信小程序有效 |
|||
webp: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 过渡时间，单位ms |
|||
duration: { |
|||
type: [String, Number], |
|||
default: 500 |
|||
}, |
|||
// 背景颜色，用于深色页面加载图片时，为了和背景色融合 |
|||
bgColor: { |
|||
type: String, |
|||
default: '#f3f4f6' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
// 图片是否加载错误，如果是，则显示错误占位图 |
|||
isError: false, |
|||
// 初始化组件时，默认为加载中状态 |
|||
loading: true, |
|||
// 不透明度，为了实现淡入淡出的效果 |
|||
opacity: 1, |
|||
// 过渡时间，因为props的值无法修改，故需要一个中间值 |
|||
durationTime: this.duration, |
|||
// 图片加载完成时，去掉背景颜色，因为如果是png图片，就会显示灰色的背景 |
|||
backgroundStyle: {} |
|||
}; |
|||
}, |
|||
watch: { |
|||
src: { |
|||
immediate: true, |
|||
handler (n) { |
|||
if(!n) { |
|||
// 如果传入null或者''，或者false，或者undefined，标记为错误状态 |
|||
this.isError = true; |
|||
this.loading = false; |
|||
} else { |
|||
this.isError = false; |
|||
this.loading = true; |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
wrapStyle() { |
|||
let style = {}; |
|||
// 通过调用addUnit()方法，如果有单位，如百分比，px单位等，直接返回，如果是纯粹的数值，则加上rpx单位 |
|||
style.width = this.$u.addUnit(this.width); |
|||
style.height = this.$u.addUnit(this.height); |
|||
// 如果是配置了圆形，设置50%的圆角，否则按照默认的配置值 |
|||
style.borderRadius = this.shape == 'circle' ? '50%' : this.$u.addUnit(this.borderRadius); |
|||
// 如果设置圆角，必须要有hidden，否则可能圆角无效 |
|||
style.overflow = this.borderRadius > 0 ? 'hidden' : 'visible'; |
|||
if (this.fade) { |
|||
style.opacity = this.opacity; |
|||
style.transition = `opacity ${Number(this.durationTime) / 1000}s ease-in-out`; |
|||
} |
|||
return style; |
|||
} |
|||
}, |
|||
methods: { |
|||
// 点击图片 |
|||
onClick() { |
|||
this.$emit('click'); |
|||
}, |
|||
// 图片加载失败 |
|||
onErrorHandler(err) { |
|||
this.loading = false; |
|||
this.isError = true; |
|||
this.$emit('error', err); |
|||
}, |
|||
// 图片加载完成，标记loading结束 |
|||
onLoadHandler() { |
|||
this.loading = false; |
|||
this.isError = false; |
|||
this.$emit('load'); |
|||
// 如果不需要动画效果，就不执行下方代码，同时移除加载时的背景颜色 |
|||
// 否则无需fade效果时，png图片依然能看到下方的背景色 |
|||
if (!this.fade) return this.removeBgColor(); |
|||
// 原来opacity为1(不透明，是为了显示占位图)，改成0(透明，意味着该元素显示的是背景颜色，默认的灰色)，再改成1，是为了获得过渡效果 |
|||
this.opacity = 0; |
|||
// 这里设置为0，是为了图片展示到背景全透明这个过程时间为0，延时之后延时之后重新设置为duration，是为了获得背景透明(灰色) |
|||
// 到图片展示的过程中的淡入效果 |
|||
this.durationTime = 0; |
|||
// 延时50ms，否则在浏览器H5，过渡效果无效 |
|||
setTimeout(() => { |
|||
this.durationTime = this.duration; |
|||
this.opacity = 1; |
|||
setTimeout(() => { |
|||
this.removeBgColor(); |
|||
}, this.durationTime); |
|||
}, 50); |
|||
}, |
|||
// 移除图片的背景色 |
|||
removeBgColor() { |
|||
// 淡入动画过渡完成后，将背景设置为透明色，否则png图片会看到灰色的背景 |
|||
this.backgroundStyle = { |
|||
backgroundColor: 'transparent' |
|||
}; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import '../../libs/css/style.components.scss'; |
|||
|
|||
.u-image { |
|||
position: relative; |
|||
transition: opacity 0.5s ease-in-out; |
|||
|
|||
&__image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
&__loading, |
|||
&__error { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background-color: $u-bg-color; |
|||
color: $u-tips-color; |
|||
font-size: 46rpx; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,89 @@ |
|||
<template> |
|||
<!-- 支付宝小程序使用$u.getRect()获取组件的根元素尺寸，所以在外面套一个"壳" --> |
|||
<view> |
|||
<view class="u-index-anchor-wrapper" :id="$u.guid()" :style="[wrapperStyle]"> |
|||
<view class="u-index-anchor " :class="[active ? 'u-index-anchor--active' : '']" :style="[customAnchorStyle]"> |
|||
<slot v-if="useSlot" /> |
|||
<block v-else> |
|||
<text>{{ index }}</text> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* indexAnchor 索引列表锚点 |
|||
* @description 通过折叠面板收纳内容区域,搭配<u-index-anchor>使用 |
|||
* @tutorial https://www.uviewui.com/components/indexList.html#indexanchor-props |
|||
* @property {Boolean} use-slot 是否使用自定义内容的插槽（默认false） |
|||
* @property {String Number} index 索引字符，如果定义了use-slot，此参数自动失效 |
|||
* @property {Object} custStyle 自定义样式，对象形式，如"{color: 'red'}" |
|||
* @event {Function} default 锚点位置显示内容，默认为索引字符 |
|||
* @example <u-index-anchor :index="item" /> |
|||
*/ |
|||
export default { |
|||
name: "u-index-anchor", |
|||
props: { |
|||
useSlot: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
index: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
customStyle: { |
|||
type: Object, |
|||
default () { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
active: false, |
|||
wrapperStyle: {}, |
|||
anchorStyle: {} |
|||
} |
|||
}, |
|||
created() { |
|||
this.parent = false; |
|||
}, |
|||
mounted() { |
|||
this.parent = this.$u.$parent.call(this, 'u-index-list'); |
|||
if(this.parent) { |
|||
this.parent.children.push(this); |
|||
this.parent.updateData(); |
|||
} |
|||
}, |
|||
computed: { |
|||
customAnchorStyle() { |
|||
return Object.assign(this.anchorStyle, this.customStyle); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-index-anchor { |
|||
box-sizing: border-box; |
|||
padding: 14rpx 24rpx; |
|||
color: #606266; |
|||
width: 100%; |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
line-height: 1.2; |
|||
background-color: rgb(245, 245, 245); |
|||
} |
|||
|
|||
.u-index-anchor--active { |
|||
right: 0; |
|||
left: 0; |
|||
color: #2979ff; |
|||
background-color: #fff; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,315 @@ |
|||
<template> |
|||
<!-- 支付宝小程序使用$u.getRect()获取组件的根元素尺寸，所以在外面套一个"壳" --> |
|||
<view> |
|||
<view class="u-index-bar"> |
|||
<slot /> |
|||
<view v-if="showSidebar" class="u-index-bar__sidebar" @touchstart.stop.prevent="onTouchMove" @touchmove.stop.prevent="onTouchMove" |
|||
@touchend.stop.prevent="onTouchStop" @touchcancel.stop.prevent="onTouchStop"> |
|||
<view v-for="(item, index) in indexList" :key="index" class="u-index-bar__index" :style="{zIndex: zIndex + 1, color: activeAnchorIndex === index ? activeColor : ''}" |
|||
:data-index="index"> |
|||
{{ item }} |
|||
</view> |
|||
</view> |
|||
<view class="u-indexed-list-alert" v-if="touchmove && indexList[touchmoveIndex]" :style="{ |
|||
zIndex: alertZIndex |
|||
}"> |
|||
<text>{{indexList[touchmoveIndex]}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
var indexList = function() { |
|||
var indexList = []; |
|||
var charCodeOfA = 'A'.charCodeAt(0); |
|||
for (var i = 0; i < 26; i++) { |
|||
indexList.push(String.fromCharCode(charCodeOfA + i)); |
|||
} |
|||
return indexList; |
|||
}; |
|||
|
|||
/** |
|||
* indexList 索引列表 |
|||
* @description 通过折叠面板收纳内容区域,搭配<u-index-anchor>使用 |
|||
* @tutorial https://www.uviewui.com/components/indexList.html#indexanchor-props |
|||
* @property {Number String} scroll-top 当前滚动高度，自定义组件无法获得滚动条事件，所以依赖接入方传入 |
|||
* @property {Array} index-list 索引字符列表，数组（默认A-Z） |
|||
* @property {Number String} z-index 锚点吸顶时的层级（默认965） |
|||
* @property {Boolean} sticky 是否开启锚点自动吸顶（默认true） |
|||
* @property {Number String} offset-top 锚点自动吸顶时与顶部的距离（默认0） |
|||
* @property {String} highlight-color 锚点和右边索引字符高亮颜色（默认#2979ff） |
|||
* @event {Function} select 选中右边索引字符时触发 |
|||
* @example <u-index-list :scrollTop="scrollTop"></u-index-list> |
|||
*/ |
|||
export default { |
|||
name: "u-index-list", |
|||
props: { |
|||
sticky: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
zIndex: { |
|||
type: [Number, String], |
|||
default: '' |
|||
}, |
|||
scrollTop: { |
|||
type: [Number, String], |
|||
default: 0, |
|||
}, |
|||
offsetTop: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
indexList: { |
|||
type: Array, |
|||
default () { |
|||
return indexList() |
|||
} |
|||
}, |
|||
activeColor: { |
|||
type: String, |
|||
default: '#2979ff' |
|||
} |
|||
}, |
|||
created() { |
|||
// #ifdef H5 |
|||
this.stickyOffsetTop = this.offsetTop ? uni.upx2px(this.offsetTop) : 44; |
|||
// #endif |
|||
// #ifndef H5 |
|||
this.stickyOffsetTop = this.offsetTop ? uni.upx2px(this.offsetTop) : 0; |
|||
// #endif |
|||
// 只能在created生命周期定义children，如果在data定义，会因为循环引用而报错 |
|||
this.children = []; |
|||
}, |
|||
data() { |
|||
return { |
|||
activeAnchorIndex: 0, |
|||
showSidebar: true, |
|||
// children: [], |
|||
touchmove: false, |
|||
touchmoveIndex: 0, |
|||
} |
|||
}, |
|||
watch: { |
|||
scrollTop() { |
|||
this.updateData() |
|||
} |
|||
}, |
|||
computed: { |
|||
// 弹出toast的z-index值 |
|||
alertZIndex() { |
|||
return this.$u.zIndex.toast; |
|||
} |
|||
}, |
|||
methods: { |
|||
updateData() { |
|||
this.timer && clearTimeout(this.timer); |
|||
this.timer = setTimeout(() => { |
|||
this.showSidebar = !!this.children.length; |
|||
this.setRect().then(() => { |
|||
this.onScroll(); |
|||
}); |
|||
}, 0); |
|||
}, |
|||
setRect() { |
|||
return Promise.all([ |
|||
this.setAnchorsRect(), |
|||
this.setListRect(), |
|||
this.setSiderbarRect() |
|||
]); |
|||
}, |
|||
setAnchorsRect() { |
|||
return Promise.all(this.children.map((anchor, index) => anchor |
|||
.$uGetRect('.u-index-anchor-wrapper') |
|||
.then((rect) => { |
|||
Object.assign(anchor, { |
|||
height: rect.height, |
|||
top: rect.top |
|||
}); |
|||
}))); |
|||
}, |
|||
setListRect() { |
|||
return this.$uGetRect('.u-index-bar').then((rect) => { |
|||
Object.assign(this, { |
|||
height: rect.height, |
|||
top: rect.top + this.scrollTop |
|||
}); |
|||
}); |
|||
}, |
|||
setSiderbarRect() { |
|||
return this.$uGetRect('.u-index-bar__sidebar').then(rect => { |
|||
this.sidebar = { |
|||
height: rect.height, |
|||
top: rect.top |
|||
}; |
|||
}); |
|||
}, |
|||
getActiveAnchorIndex() { |
|||
const { |
|||
children |
|||
} = this; |
|||
const { |
|||
sticky |
|||
} = this; |
|||
for (let i = this.children.length - 1; i >= 0; i--) { |
|||
const preAnchorHeight = i > 0 ? children[i - 1].height : 0; |
|||
const reachTop = sticky ? preAnchorHeight : 0; |
|||
if (reachTop >= children[i].top) { |
|||
return i; |
|||
} |
|||
} |
|||
return -1; |
|||
}, |
|||
onScroll() { |
|||
const { |
|||
children = [] |
|||
} = this; |
|||
if (!children.length) { |
|||
return; |
|||
} |
|||
const { |
|||
sticky, |
|||
stickyOffsetTop, |
|||
zIndex, |
|||
scrollTop, |
|||
activeColor |
|||
} = this; |
|||
const active = this.getActiveAnchorIndex(); |
|||
this.activeAnchorIndex = active; |
|||
if (sticky) { |
|||
let isActiveAnchorSticky = false; |
|||
if (active !== -1) { |
|||
isActiveAnchorSticky = |
|||
children[active].top <= 0; |
|||
} |
|||
children.forEach((item, index) => { |
|||
if (index === active) { |
|||
let wrapperStyle = ''; |
|||
let anchorStyle = { |
|||
color: `${activeColor}` |
|||
}; |
|||
if (isActiveAnchorSticky) { |
|||
wrapperStyle = { |
|||
height: `${children[index].height}px` |
|||
}; |
|||
anchorStyle = { |
|||
position: 'fixed', |
|||
top: `${stickyOffsetTop}px`, |
|||
zIndex: `${zIndex ? zIndex : this.$u.zIndex.indexListSticky}`, |
|||
color: `${activeColor}` |
|||
}; |
|||
} |
|||
item.active = active; |
|||
item.wrapperStyle = wrapperStyle; |
|||
item.anchorStyle = anchorStyle; |
|||
} else if (index === active - 1) { |
|||
const currentAnchor = children[index]; |
|||
const currentOffsetTop = currentAnchor.top; |
|||
const targetOffsetTop = index === children.length - 1 ? |
|||
this.top : |
|||
children[index + 1].top; |
|||
const parentOffsetHeight = targetOffsetTop - currentOffsetTop; |
|||
const translateY = parentOffsetHeight - currentAnchor.height; |
|||
const anchorStyle = { |
|||
position: 'relative', |
|||
transform: `translate3d(0, ${translateY}px, 0)`, |
|||
zIndex: `${zIndex ? zIndex : this.$u.zIndex.indexListSticky}`, |
|||
color: `${activeColor}` |
|||
}; |
|||
item.active = active; |
|||
item.anchorStyle = anchorStyle; |
|||
} else { |
|||
item.active = false; |
|||
item.anchorStyle = ''; |
|||
item.wrapperStyle = ''; |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
onTouchMove(event) { |
|||
this.touchmove = true; |
|||
const sidebarLength = this.children.length; |
|||
const touch = event.touches[0]; |
|||
const itemHeight = this.sidebar.height / sidebarLength; |
|||
let clientY = 0; |
|||
clientY = touch.clientY; |
|||
let index = Math.floor((clientY - this.sidebar.top) / itemHeight); |
|||
if (index < 0) { |
|||
index = 0; |
|||
} else if (index > sidebarLength - 1) { |
|||
index = sidebarLength - 1; |
|||
} |
|||
this.touchmoveIndex = index; |
|||
this.scrollToAnchor(index); |
|||
}, |
|||
onTouchStop() { |
|||
this.touchmove = false; |
|||
this.scrollToAnchorIndex = null; |
|||
}, |
|||
scrollToAnchor(index) { |
|||
if (this.scrollToAnchorIndex === index) { |
|||
return; |
|||
} |
|||
this.scrollToAnchorIndex = index; |
|||
const anchor = this.children.find((item) => item.index === this.indexList[index]); |
|||
if (anchor) { |
|||
this.$emit('select', anchor.index); |
|||
uni.pageScrollTo({ |
|||
duration: 0, |
|||
scrollTop: anchor.top + this.scrollTop |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-index-bar { |
|||
position: relative |
|||
} |
|||
|
|||
.u-index-bar__sidebar { |
|||
position: fixed; |
|||
top: 50%; |
|||
right: 0; |
|||
@include vue-flex; |
|||
flex-direction: column; |
|||
text-align: center; |
|||
transform: translateY(-50%); |
|||
user-select: none; |
|||
z-index: 99; |
|||
} |
|||
|
|||
.u-index-bar__index { |
|||
font-weight: 500; |
|||
padding: 8rpx 18rpx; |
|||
font-size: 22rpx; |
|||
line-height: 1 |
|||
} |
|||
|
|||
.u-indexed-list-alert { |
|||
position: fixed; |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
right: 90rpx; |
|||
top: 50%; |
|||
margin-top: -60rpx; |
|||
border-radius: 24rpx; |
|||
font-size: 50rpx; |
|||
color: #fff; |
|||
background-color: rgba(0, 0, 0, 0.65); |
|||
@include vue-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 0; |
|||
z-index: 9999999; |
|||
} |
|||
|
|||
.u-indexed-list-alert text { |
|||
line-height: 50rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,460 @@ |
|||
<template> |
|||
<view |
|||
class="u-input" |
|||
:class="{ |
|||
'u-input--border': border, |
|||
'u-input--error': validateState |
|||
}" |
|||
:style="{ |
|||
padding: padding ? padding : `0 ${border ? 20 : 0}rpx`, |
|||
borderColor: borderColor, |
|||
textAlign: inputAlignCom, |
|||
backgroundColor: backgroundColor, |
|||
}" |
|||
@tap.stop="inputClick" |
|||
> |
|||
<textarea |
|||
v-if="type == 'textarea'" |
|||
class="u-input__input u-input__textarea" |
|||
:style="[getStyle]" |
|||
:value="defaultValue" |
|||
:placeholder="placeholder" |
|||
:placeholderStyle="placeholderStyle" |
|||
:disabled="disabled" |
|||
:maxlength="inputMaxlength" |
|||
:fixed="fixed" |
|||
:focus="focus" |
|||
:autoHeight="autoHeight" |
|||
:selection-end="uSelectionEnd" |
|||
:selection-start="uSelectionStart" |
|||
:cursor-spacing="getCursorSpacing" |
|||
:show-confirm-bar="showConfirmbar" |
|||
:adjust-position="adjustPosition" |
|||
@input="handleInput" |
|||
@blur="handleBlur" |
|||
@focus="onFocus" |
|||
@confirm="onConfirm" |
|||
/> |
|||
<input |
|||
v-else |
|||
class="u-input__input" |
|||
:type="type == 'password' ? 'text' : type" |
|||
:style="[getStyle]" |
|||
:value="defaultValue" |
|||
:password="type == 'password' && !showPassword" |
|||
:placeholder="placeholder" |
|||
:placeholderStyle="placeholderStyle" |
|||
:disabled="disabled || type === 'select'" |
|||
:maxlength="inputMaxlength" |
|||
:focus="focus" |
|||
:confirmType="confirmType" |
|||
:cursor-spacing="getCursorSpacing" |
|||
:selection-end="uSelectionEnd" |
|||
:selection-start="uSelectionStart" |
|||
:show-confirm-bar="showConfirmbar" |
|||
:adjust-position="adjustPosition" |
|||
@focus="onFocus" |
|||
@blur="handleBlur" |
|||
@input="handleInput" |
|||
@confirm="onConfirm" |
|||
/> |
|||
<view class="u-input__right-icon u-flex"> |
|||
<view |
|||
class="u-input__right-icon__clear u-input__right-icon__item" |
|||
@tap="onClear" |
|||
v-if="clearableCom && valueCom != '' && focused" |
|||
> |
|||
<u-icon size="32" name="close-circle-fill" color="#c0c4cc" /> |
|||
</view> |
|||
<view |
|||
class="u-input__right-icon__clear u-input__right-icon__item" |
|||
v-if="passwordIcon && type == 'password'" |
|||
> |
|||
<u-icon |
|||
size="32" |
|||
:name="!showPassword ? 'eye' : 'eye-fill'" |
|||
color="#c0c4cc" |
|||
@click="showPassword = !showPassword" |
|||
/> |
|||
</view> |
|||
<view |
|||
class="u-input__right-icon--select u-input__right-icon__item" |
|||
v-if="type == 'select'" |
|||
:class="{ |
|||
'u-input__right-icon--select--reverse': selectOpen |
|||
}" |
|||
> |
|||
<u-icon name="arrow-down-fill" size="26" color="#c0c4cc"></u-icon> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import Emitter from "../../libs/util/emitter.js"; |
|||
|
|||
/** |
|||
* input 输入框 |
|||
* @description 此组件为一个输入框，默认没有边框和样式，是专门为配合表单组件u-form而设计的，利用它可以快速实现表单验证，输入内容，下拉选择等功能。 |
|||
* @tutorial http://uviewui.com/components/input.html |
|||
* @property {String} type 模式选择，见官网说明 |
|||
* @property {Boolean} clearable 是否显示右侧的清除图标(默认true) |
|||
* @property {} v-model 用于双向绑定输入框的值 |
|||
* @property {String} input-align 输入框文字的对齐方式(默认left) |
|||
* @property {String} placeholder placeholder显示值(默认 '请输入内容') |
|||
* @property {Boolean} disabled 是否禁用输入框(默认false) |
|||
* @property {String Number} maxlength 输入框的最大可输入长度(默认140) |
|||
* @property {String Number} selection-start 光标起始位置，自动聚焦时有效，需与selection-end搭配使用（默认-1） |
|||
* @property {String Number} maxlength 光标结束位置，自动聚焦时有效，需与selection-start搭配使用（默认-1） |
|||
* @property {String Number} cursor-spacing 指定光标与键盘的距离，单位px(默认0) |
|||
* @property {String} placeholderStyle placeholder的样式，字符串形式，如"color: red;"(默认 "color: #c0c4cc;") |
|||
* @property {String} confirm-type 设置键盘右下角按钮的文字，仅在type为text时生效(默认done) |
|||
* @property {Object} custom-style 自定义输入框的样式，对象形式 |
|||
* @property {Boolean} focus 是否自动获得焦点(默认false) |
|||
* @property {Boolean} fixed 如果type为textarea，且在一个"position:fixed"的区域，需要指明为true(默认false) |
|||
* @property {Boolean} password-icon type为password时，是否显示右侧的密码查看图标(默认true) |
|||
* @property {Boolean} border 是否显示边框(默认false) |
|||
* @property {String} border-color 输入框的边框颜色(默认#dcdfe6) |
|||
* @property {Boolean} auto-height 是否自动增高输入区域，type为textarea时有效(默认true) |
|||
* @property {String Number} height 高度，单位rpx(text类型时为70，textarea时为100) |
|||
* @example <u-input v-model="value" :type="type" :border="border" /> |
|||
*/ |
|||
export default { |
|||
name: "u-input", |
|||
emits: ["update:modelValue", "input", "change", "blur", "focus", "click", "touchstart"], |
|||
mixins: [Emitter], |
|||
props: { |
|||
value: { |
|||
type: [String, Number], |
|||
default: "" |
|||
}, |
|||
modelValue: { |
|||
type: [String, Number], |
|||
default: "" |
|||
}, |
|||
// 输入框的类型，textarea，text，number |
|||
type: { |
|||
type: String, |
|||
default: "text" |
|||
}, |
|||
inputAlign: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
placeholder: { |
|||
type: String, |
|||
default: "请输入内容" |
|||
}, |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
maxlength: { |
|||
type: [Number, String], |
|||
default: 140 |
|||
}, |
|||
placeholderStyle: { |
|||
type: String, |
|||
default: "color: #c0c4cc;" |
|||
}, |
|||
confirmType: { |
|||
type: String, |
|||
default: "done" |
|||
}, |
|||
// 输入框的自定义样式 |
|||
customStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
} |
|||
}, |
|||
// 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true |
|||
fixed: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否自动获得焦点 |
|||
focus: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 密码类型时，是否显示右侧的密码图标 |
|||
passwordIcon: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// input|textarea是否显示边框 |
|||
border: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 输入框的边框颜色 |
|||
borderColor: { |
|||
type: String, |
|||
default: "#dcdfe6" |
|||
}, |
|||
autoHeight: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// type=select时，旋转右侧的图标，标识当前处于打开还是关闭select的状态 |
|||
// open-打开，close-关闭 |
|||
selectOpen: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 高度，单位rpx |
|||
height: { |
|||
type: [Number, String], |
|||
default: "" |
|||
}, |
|||
// 是否可清空 |
|||
clearable: { |
|||
type: [Boolean, String], |
|||
}, |
|||
// 指定光标与键盘的距离，单位 px |
|||
cursorSpacing: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
// 光标起始位置，自动聚焦时有效，需与selection-end搭配使用 |
|||
selectionStart: { |
|||
type: [Number, String], |
|||
default: -1 |
|||
}, |
|||
// 光标结束位置，自动聚焦时有效，需与selection-start搭配使用 |
|||
selectionEnd: { |
|||
type: [Number, String], |
|||
default: -1 |
|||
}, |
|||
// 是否自动去除两端的空格 |
|||
trim: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否显示键盘上方带有”完成“按钮那一栏 |
|||
showConfirmbar: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 弹出键盘时是否自动调节高度，uni-app默认值是true |
|||
adjustPosition: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// input的背景色 |
|||
backgroundColor: { |
|||
type: String, |
|||
}, |
|||
// input的padding |
|||
padding: { |
|||
type: String, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
defaultValue: "", |
|||
inputHeight: 70, // input的高度 |
|||
textareaHeight: 100, // textarea的高度 |
|||
validateState: false, // 当前input的验证状态，用于错误时，边框是否改为红色 |
|||
focused: false, // 当前是否处于获得焦点的状态 |
|||
showPassword: false, // 是否预览密码 |
|||
lastValue: "" ,// 用于头条小程序，判断@input中，前后的值是否发生了变化，因为头条中文下，按下键没有输入内容，也会触发@input时间 |
|||
uForm:{ |
|||
inputAlign: "", |
|||
clearable: "" |
|||
} |
|||
}; |
|||
}, |
|||
watch: { |
|||
valueCom(nVal, oVal) { |
|||
this.defaultValue = nVal; |
|||
// 当值发生变化，且为select类型时(此时input被设置为disabled，不会触发@input事件)，模拟触发@input事件 |
|||
if (nVal != oVal && this.type == "select") |
|||
this.handleInput({ |
|||
detail: { |
|||
value: nVal |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
computed: { |
|||
valueCom() { |
|||
// #ifndef VUE3 |
|||
return this.value; |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
return this.modelValue; |
|||
// #endif |
|||
}, |
|||
inputAlignCom(){ |
|||
return this.inputAlign || this.uForm.inputAlign || "left"; |
|||
}, |
|||
clearableCom(){ |
|||
if (typeof this.clearable == "boolean") return this.clearable; |
|||
if (typeof this.uForm.clearable == "boolean") return this.uForm.clearable; |
|||
return true; |
|||
}, |
|||
// 因为uniapp的input组件的maxlength组件必须要数值，这里转为数值，给用户可以传入字符串数值 |
|||
inputMaxlength() { |
|||
return Number(this.maxlength); |
|||
}, |
|||
getStyle() { |
|||
let style = {}; |
|||
// 如果没有自定义高度，就根据type为input还是textare来分配一个默认的高度 |
|||
style.minHeight = this.height |
|||
? this.height + "rpx" |
|||
: this.type == "textarea" |
|||
? this.textareaHeight + "rpx" |
|||
: this.inputHeight + "rpx"; |
|||
style = Object.assign(style, this.customStyle); |
|||
return style; |
|||
}, |
|||
// |
|||
getCursorSpacing() { |
|||
return Number(this.cursorSpacing); |
|||
}, |
|||
// 光标起始位置 |
|||
uSelectionStart() { |
|||
return String(this.selectionStart); |
|||
}, |
|||
// 光标结束位置 |
|||
uSelectionEnd() { |
|||
return String(this.selectionEnd); |
|||
} |
|||
}, |
|||
created() { |
|||
// 监听u-form-item发出的错误事件，将输入框边框变红色 |
|||
// #ifndef VUE3 |
|||
this.$on("onFormItemError", this.onFormItemError); |
|||
// #endif |
|||
this.defaultValue = this.valueCom; |
|||
}, |
|||
mounted() { |
|||
let parent = this.$u.$parent.call(this, 'u-form'); |
|||
if (parent) { |
|||
Object.keys(this.uForm).map(key => { |
|||
this.uForm[key] = parent[key]; |
|||
}); |
|||
} |
|||
}, |
|||
methods: { |
|||
/** |
|||
* change 事件 |
|||
* @param event |
|||
*/ |
|||
handleInput(event) { |
|||
let value = event.detail.value; |
|||
// 判断是否去除空格 |
|||
if (this.trim) value = this.$u.trim(value); |
|||
// vue 原生的方法 return 出去 |
|||
this.$emit("input", value); |
|||
this.$emit("update:modelValue", value); |
|||
// 当前model 赋值 |
|||
this.defaultValue = value; |
|||
// 过一个生命周期再发送事件给u-form-item，否则this.$emit('input')更新了父组件的值，但是微信小程序上 |
|||
// 尚未更新到u-form-item，导致获取的值为空，从而校验混论 |
|||
// 这里不能延时时间太短，或者使用this.$nextTick，否则在头条上，会造成混乱 |
|||
setTimeout(() => { |
|||
// 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理 |
|||
// #ifdef MP-TOUTIAO |
|||
if (this.$u.trim(value) == this.lastValue) return; |
|||
this.lastValue = value; |
|||
// #endif |
|||
// 将当前的值发送到 u-form-item 进行校验 |
|||
this.dispatch("u-form-item", "onFieldChange", value); |
|||
}, 40); |
|||
}, |
|||
/** |
|||
* blur 事件 |
|||
* @param event |
|||
*/ |
|||
handleBlur(event) { |
|||
// 最开始使用的是监听图标@touchstart事件，自从hx2.8.4后，此方法在微信小程序出错 |
|||
// 这里改为监听点击事件，手点击清除图标时，同时也发生了@blur事件，导致图标消失而无法点击，这里做一个延时 |
|||
setTimeout(() => { |
|||
this.focused = false; |
|||
}, 100); |
|||
// vue 原生的方法 return 出去 |
|||
this.$emit("blur", event.detail.value); |
|||
setTimeout(() => { |
|||
// 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理 |
|||
// #ifdef MP-TOUTIAO |
|||
if (this.$u.trim(value) == this.lastValue) return; |
|||
this.lastValue = value; |
|||
// #endif |
|||
// 将当前的值发送到 u-form-item 进行校验 |
|||
this.dispatch("u-form-item", "onFieldBlur", event.detail.value); |
|||
}, 40); |
|||
}, |
|||
onFormItemError(status) { |
|||
this.validateState = status; |
|||
}, |
|||
onFocus(event) { |
|||
this.focused = true; |
|||
this.$emit("focus"); |
|||
}, |
|||
onConfirm(e) { |
|||
this.$emit("confirm", e.detail.value); |
|||
}, |
|||
onClear(event) { |
|||
this.$emit("input", ""); |
|||
this.$emit("update:modelValue", ""); |
|||
}, |
|||
inputClick() { |
|||
this.$emit("click"); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-input { |
|||
position: relative; |
|||
flex: 1; |
|||
@include vue-flex; |
|||
|
|||
&__input { |
|||
//height: $u-form-item-height; |
|||
font-size: 28rpx; |
|||
color: $u-main-color; |
|||
flex: 1; |
|||
} |
|||
|
|||
&__textarea { |
|||
width: auto; |
|||
font-size: 28rpx; |
|||
color: $u-main-color; |
|||
padding: 10rpx 0; |
|||
line-height: normal; |
|||
flex: 1; |
|||
} |
|||
|
|||
&--border { |
|||
border-radius: 6rpx; |
|||
border-radius: 4px; |
|||
border: 1px solid $u-form-item-border-color; |
|||
} |
|||
|
|||
&--error { |
|||
border-color: $u-type-error !important; |
|||
} |
|||
|
|||
&__right-icon { |
|||
&__item { |
|||
margin-left: 10rpx; |
|||
} |
|||
|
|||
&--select { |
|||
transition: transform 0.4s; |
|||
|
|||
&--reverse { |
|||
transform: rotate(-180deg); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,285 @@ |
|||
<template> |
|||
<u-popup |
|||
class="" |
|||
:blur="blur" |
|||
:mask="mask" |
|||
:maskCloseAble="maskCloseAble" |
|||
mode="bottom" |
|||
:popup="false" |
|||
v-model="popupValue" |
|||
length="auto" |
|||
:safeAreaInsetBottom="safeAreaInsetBottom" |
|||
@close="popupClose" |
|||
:zIndex="uZIndex" |
|||
> |
|||
<slot /> |
|||
<view class="u-tooltip" v-if="tooltip"> |
|||
<view |
|||
class="u-tooltip-item u-tooltip-cancel" |
|||
hover-class="u-tooltip-cancel-hover" |
|||
@tap="onCancel" |
|||
> |
|||
{{ cancelBtn ? cancelText : "" }} |
|||
</view> |
|||
<view v-if="showTips" class="u-tooltip-item u-tooltip-tips"> |
|||
{{ |
|||
tips ? tips : mode == "number" ? "数字键盘" : mode == "card" ? "身份证键盘" : "车牌号键盘" |
|||
}} |
|||
</view> |
|||
<view |
|||
v-if="confirmBtn" |
|||
@tap="onConfirm" |
|||
class="u-tooltip-item u-tooltips-submit" |
|||
hover-class="u-tooltips-submit-hover" |
|||
> |
|||
{{ confirmBtn ? confirmText : "" }} |
|||
</view> |
|||
</view> |
|||
<block v-if="mode == 'number' || mode == 'card'"> |
|||
<u-number-keyboard |
|||
:random="random" |
|||
@backspace="backspace" |
|||
@change="change" |
|||
:mode="mode" |
|||
:dotEnabled="dotEnabled" |
|||
></u-number-keyboard> |
|||
</block> |
|||
<block v-else> |
|||
<u-car-keyboard |
|||
ref="uCarKeyboard" |
|||
:random="random" |
|||
@backspace="backspace" |
|||
@change="change" |
|||
></u-car-keyboard> |
|||
</block> |
|||
</u-popup> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* keyboard 键盘 |
|||
* @description 此为uViw自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3中模式，都有可以打乱按键顺序的选项。 |
|||
* @tutorial https://www.uviewui.com/components/keyboard.html |
|||
* @property {String} mode 键盘类型，见官网基本使用的说明（默认number） |
|||
* @property {Boolean} dot-enabled 是否显示"."按键，只在mode=number时有效（默认true） |
|||
* @property {Boolean} tooltip 是否显示键盘顶部工具条（默认true） |
|||
* @property {String} tips 工具条中间的提示文字，见上方基本使用的说明，如不需要，请传""空字符 |
|||
* @property {Boolean} cancel-btn 是否显示工具条左边的"取消"按钮（默认true） |
|||
* @property {Boolean} confirm-btn 是否显示工具条右边的"完成"按钮（默认true） |
|||
* @property {Boolean} mask 是否显示遮罩（默认true） |
|||
* @property {String} confirm-text 确认按钮的文字 |
|||
* @property {String} cancel-text 取消按钮的文字 |
|||
* @property {Number String} z-index 弹出键盘的z-index值（默认1075） |
|||
* @property {Boolean} random 是否打乱键盘按键的顺序（默认false） |
|||
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false） |
|||
* @property {Boolean} mask-close-able 是否允许点击遮罩收起键盘（默认true） |
|||
* @event {Function} change 按键被点击(不包含退格键被点击) |
|||
* @event {Function} cancel 键盘顶部工具条左边的"取消"按钮被点击 |
|||
* @event {Function} confirm 键盘顶部工具条右边的"完成"按钮被点击 |
|||
* @event {Function} backspace 键盘退格键被点击 |
|||
* @example <u-keyboard mode="number" v-model="show"></u-keyboard> |
|||
*/ |
|||
export default { |
|||
name: "u-keyboard", |
|||
emits: ["update:modelValue", "input", "change", "cancel", "confirm", "backspace"], |
|||
props: { |
|||
// 通过双向绑定控制键盘的弹出与收起 |
|||
value: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
modelValue: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 键盘的类型，number-数字键盘，card-身份证键盘，car-车牌号键盘 |
|||
mode: { |
|||
type: String, |
|||
default: "number" |
|||
}, |
|||
|
|||
// 是否显示键盘的"."符号 |
|||
dotEnabled: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否显示顶部工具条 |
|||
tooltip: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否显示工具条中间的提示 |
|||
showTips: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 工具条中间的提示文字 |
|||
tips: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
// 是否显示工具条左边的"取消"按钮 |
|||
cancelBtn: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否显示工具条右边的"完成"按钮 |
|||
confirmBtn: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否打乱键盘按键的顺序 |
|||
random: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距 |
|||
safeAreaInsetBottom: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否允许通过点击遮罩关闭键盘 |
|||
maskCloseAble: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否显示遮罩，某些时候数字键盘时，用户希望看到自己的数值，所以可能不想要遮罩 |
|||
mask: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// z-index值 |
|||
zIndex: { |
|||
type: [Number, String], |
|||
default: "" |
|||
}, |
|||
// 取消按钮的文字 |
|||
cancelText: { |
|||
type: String, |
|||
default: "取消" |
|||
}, |
|||
// 确认按钮的文字 |
|||
confirmText: { |
|||
type: String, |
|||
default: "确认" |
|||
}, |
|||
// 遮罩的模糊度 |
|||
blur: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
popupValue: false |
|||
}; |
|||
}, |
|||
watch: { |
|||
valueCom:{ |
|||
immediate: true, |
|||
handler(v1, v2) { |
|||
this.popupValue = v1; |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
valueCom() { |
|||
// #ifndef VUE3 |
|||
return this.value; |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
return this.modelValue; |
|||
// #endif |
|||
}, |
|||
uZIndex() { |
|||
return this.zIndex ? this.zIndex : this.$u.zIndex.popup; |
|||
} |
|||
}, |
|||
methods: { |
|||
change(e) { |
|||
this.$emit("change", e); |
|||
}, |
|||
// 键盘关闭 |
|||
popupClose() { |
|||
// 通过发送input这个特殊的事件名，可以修改父组件传给props的value的变量，也即双向绑定 |
|||
this.$emit("input", false); |
|||
this.$emit("update:modelValue", false); |
|||
}, |
|||
// 输入完成 |
|||
onConfirm() { |
|||
this.popupClose(); |
|||
this.$emit("confirm"); |
|||
}, |
|||
// 取消输入 |
|||
onCancel() { |
|||
this.popupClose(); |
|||
this.$emit("cancel"); |
|||
}, |
|||
// 退格键 |
|||
backspace(count) { |
|||
this.$emit("backspace", count); |
|||
}, |
|||
changeCarInputMode() { |
|||
if (this.$refs.uCarKeyboard) this.$refs.uCarKeyboard.changeCarInputMode(); |
|||
}, |
|||
updateCarInputMode(abcKey) { |
|||
if (this.$refs.uCarKeyboard) this.$refs.uCarKeyboard.updateCarInputMode(abcKey); |
|||
} |
|||
// 关闭键盘 |
|||
// close() { |
|||
// this.show = false; |
|||
// }, |
|||
// // 打开键盘 |
|||
// open() { |
|||
// this.show = true; |
|||
// } |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-keyboard { |
|||
position: relative; |
|||
z-index: 1003; |
|||
} |
|||
|
|||
.u-tooltip { |
|||
@include vue-flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.u-tooltip-item { |
|||
color: #333333; |
|||
flex: 0 0 33.333333%; |
|||
text-align: center; |
|||
padding: 20rpx 10rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.u-tooltips-submit { |
|||
text-align: right; |
|||
flex-grow: 1; |
|||
flex-wrap: 0; |
|||
padding-right: 40rpx; |
|||
color: $u-type-primary; |
|||
} |
|||
|
|||
.u-tooltip-cancel { |
|||
text-align: left; |
|||
flex-grow: 1; |
|||
flex-wrap: 0; |
|||
padding-left: 40rpx; |
|||
color: #888888; |
|||
} |
|||
|
|||
.u-tooltips-submit-hover { |
|||
color: $u-type-success; |
|||
} |
|||
|
|||
.u-tooltip-cancel-hover { |
|||
color: #333333; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,254 @@ |
|||
<template> |
|||
<view class="u-wrap" :style="{ |
|||
opacity: Number(opacity), |
|||
borderRadius: borderRadius + 'rpx', |
|||
// 因为time值需要改变,所以不直接用duration值(不能改变父组件prop传过来的值) |
|||
transition: `opacity ${time / 1000}s ease-in-out` |
|||
}" |
|||
:class="'u-lazy-item-' + elIndex"> |
|||
<view :class="'u-lazy-item-' + elIndex"> |
|||
<image :style="{borderRadius: borderRadius + 'rpx', height: imgHeight}" v-if="!isError" class="u-lazy-item" |
|||
:src="isShow ? image : loadingImg" :mode="imgMode" @load="imgLoaded" @error="loadError" @tap="clickImg"></image> |
|||
<image :style="{borderRadius: borderRadius + 'rpx', height: imgHeight}" class="u-lazy-item error" v-else :src="errorImg" |
|||
:mode="imgMode" @load="errorImgLoaded" @tap="clickImg"></image> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* lazyLoad 懒加载 |
|||
* @description 懒加载使用的场景为：页面有很多图片时，APP会同时加载所有的图片，导致页面卡顿，各个位置的图片出现前后不一致等. |
|||
* @tutorial https://www.uviewui.com/components/lazyLoad.html |
|||
* @property {String Number} index 用户自定义值，在事件触发时回调，用以区分是哪个图片 |
|||
* @property {String} image 图片路径 |
|||
* @property {String} loading-img 预加载时的占位图 |
|||
* @property {String} error-img 图片加载出错时的占位图 |
|||
* @property {String} threshold 触发加载时的位置，见上方说明，单位 rpx（默认300） |
|||
* @property {String Number} duration 图片加载成功时，淡入淡出时间，单位ms（默认） |
|||
* @property {String} effect 图片加载成功时，淡入淡出的css动画效果（默认ease-in-out） |
|||
* @property {Boolean} is-effect 图片加载成功时，是否启用淡入淡出效果（默认true） |
|||
* @property {String Number} border-radius 图片圆角值，单位rpx（默认0） |
|||
* @property {String Number} height 图片高度，注意：实际高度可能受img-mode参数影响（默认450） |
|||
* @property {String Number} mg-mode 图片的裁剪模式，详见image组件裁剪模式（默认widthFix） |
|||
* @event {Function} click 点击图片时触发 |
|||
* @event {Function} load 图片加载成功时触发 |
|||
* @event {Function} error 图片加载失败时触发 |
|||
* @example <u-lazy-load :image="image" :loading-img="loadingImg" :error-img="errorImg"></u-lazy-load> |
|||
*/ |
|||
export default { |
|||
name: 'u-lazy-load', |
|||
emits: ["click", "load", "error"], |
|||
props: { |
|||
index: { |
|||
type: [Number, String] |
|||
}, |
|||
// 要显示的图片 |
|||
image: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 图片裁剪模式 |
|||
imgMode: { |
|||
type: String, |
|||
default: 'widthFix' |
|||
}, |
|||
// 占位图片路径 |
|||
loadingImg: { |
|||
type: String, |
|||
default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUM0QjNBQjkyQUQ2MTFFQTlCNUQ4RTIzNDE5RUIxNjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUM0QjNBQkEyQUQ2MTFFQTlCNUQ4RTIzNDE5RUIxNjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QzRCM0FCNzJBRDYxMUVBOUI1RDhFMjM0MTlFQjE2NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QzRCM0FCODJBRDYxMUVBOUI1RDhFMjM0MTlFQjE2NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtRHfPcAAAAzUExURZWVldfX18PDw62trZubm9zc3Li4uKGhoebm5tLS0uHh4c3Nzaenp729vcjIyLKysuvr6141L40AAAcXSURBVHja7NzZlqpGAEBR5lG0//9rIw7IJKJi4or7PGTdtN10wr5SVAEGf/qqArsAiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAg+nmQFMi5Jis+sIniED23jSzIgLTtg2D//iYme/8QBM/9lQ+CAEhbNLM3N9hEHAThX7GPCiBfAxK1b51kD+R7QMLjXg7iCsgWIPUh7pfVozG791oeBPngm48G583uW5GkBvI+SBaM2xXDn1oqum423bX/mgF5FySc2cv93Voug9TdZotsggnkBZB2NzbhrSY5HnoG07jei8dvzsJB/c3W60SALILE46+WCztsbhPR7R2VJq0ukEcT49nyy8QhaKcRa3fYHZD4+ufqOJAcgDz8/59vtw1I3QP5K6JsOG0vm3hce4I8LQp/BaRZGJC3AAn7IKOKXbC+7EdA5vdmmVwOLksgRThqOqiH4XEGsht+peoPUE8U/jJIO5OLH4GEwUslV5G0PTBG5Uiw/Y2jyigO3l9HAHKv9PYb82LloH74dZBoBUgar+l48NsNvtD0fkez9iwrAvIYZDRCl+Xs149Hm/KZmQ+QjUCiO1ei4ru7EsgnQYrkznlQb7thCuRfAzlOAPN72427P4VA/i2Q/DKT/Ls/VR8fvIBsDZIuz7TPF6TCbnk4GJkB2RokejTjuE7/unlgCuSTIO0Cy+Plp6vDfnQlBchy8QtjSHVd3EgmK1bHLm+H6+nXYbz2DuQRSPnqoL7vvq0u70on4zvxgCyWD3b9UyDVdW24PaWaiGTnFZJwPIQAebDpIKheBIm7n124ZthMJipAlkqHO+IZkP1tbfzOJark/A7MgKyvvl60fRqkvXfhuow+t9+q00+0/yyBrK8ZngOtBzldhw2X9tvpNGty0gvkmbPeJ0Cy/r09s/stbmfo0yMWkEdjevgKyOn2t2pxv7UXoibTdCDLje9/Ww1ymqzn87dbp92242ZmMRjI8hASvwKSLq4udqN6ksw8nxXN3tszD9L8Gkg+2mFrQYql5az4tvFj5xOx4VwnSdeBtGdyPwUytxK77pBVlNHdO7OK3rh/eTPUvdutT3fO52tuHMqD4N7llv8pyOQQ//w19YVDfX27+Sfuby9/6nau4pdA8vEdOZuChEH/quHt0Jg+IRJ/5+PrHwKZXfjbDiS73Zo7mu5UkzX7uTsXe0e/7nC3ePf1O69+BUg2XDfZCqSqOu7rGVf8cHBe8zhC2b61dtUHXv0OkGo6ZL4JkpbRYXdUaFevivx2M/1GIOctNh949TtAoumQ+TpIHMX54CJu+8BDd8FkE5BqcZh/59XvAClmTvKfB0nDqIlHo3T70SftyW1eX9dXtgQJqs1f/Q6QaOa/7wmQKtxH8eiGoCRuovODIO3VxOMmruZbHrLyD7z6DSDtGyT7ew1kf9hNn07c986JTovzzem0Id9wUG+Vk/IDr34DSNR7huZJkMFT6vEhqrPx/j5cnlZML8N6/PAzh9Y99Flm5Yde/c9BquDOkvkKkMP58dA4qi9vivE8JOvGz/j8FokfPpr288+pH2ZPOZrLmeGD+7KOh6dqYWJ48ki7yUg0tz0go/fv/LLddfV3sgOLJyaGPY/zrSlh1a36Arkzoue9CyG35ze6E6/dzO2Ga0EGHqdRJIkfn9/8OEjTW8Vq91ZWh39FeehWA7Nu9ft8CpUEk1WWOyDF0OPyEU2Pnzf/bZC0P6IPzmAvu7KauQBVrgKpJ0tG2arHzX8e5Pb3PezNs/PrX+3JMyCLn9XXf37tPFHvt09WfCDDjx+yyn1/p1V11j7GnB/q3leLuVva79S/tzed+db08YpF4uOZtmz/9oXWMq6BCAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiAALELvqt/BBgACqVeUBXxcCkAAAAASUVORK5CYII=' |
|||
}, |
|||
// 加载失败的错误占位图 |
|||
errorImg: { |
|||
type: String, |
|||
default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODdDMjhENDYyQUQ2MTFFQTlDQ0VBODgxQjFFOEEyMEMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODdDMjhENDcyQUQ2MTFFQTlDQ0VBODgxQjFFOEEyMEMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4N0MyOEQ0NDJBRDYxMUVBOUNDRUE4ODFCMUU4QTIwQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4N0MyOEQ0NTJBRDYxMUVBOUNDRUE4ODFCMUU4QTIwQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhLwhikAAAAzUExURZWVldfX162trcPDw5ubm7i4uNzc3Obm5s3NzaGhoeHh4cjIyKenp9LS0r29vbKysuvr67sDMEkAAAlpSURBVHja7NzpYqMgAIVRUVHc8/5PO66R1WAbOzX97q+ZtDEpR0AWTR7kVyWhCAAhgABCAAGEAAIIAQQQAggBBBACCCAEEEAIIIAQQAgggBBAACGAAEIAAYQAQgABhAACCAEEEAIIIAQQAgggBBBACCCAEEAAIYAQQAAhgABCAAGEAAIIAYQAAggBBBACCCAEEEAIIAQQQAgggBBAACGAAEIAIYAAQgABhAACCAEEEAIIAQQQAgggBBBACCCAEEAAIYAQQAAhgABCAAGEAAIIAYQAAggBBBACCCAEEEAIIAQQQAgggBBAACGAAEIAIYAAQgABhAACCAEEEAIIAQQQAgggBBBACCCAEEAIIIAQQAAhgABCAAGEAEIAAYQAAggBBBACCCAEEAIIIAQQQAgggBBAACGAEEAAIYAAsqeX5QWHKIcs/Ptl03lfL4zDFPWfBGmSpPn+IZzSH5KkCL5B+n+oklwz6Iz//R2QzFOabzhEmiRirAmZt/bl0w/dpMbLqeeo4wEdpC7zR5WAPKziHKtO7ql+ReKvIa9BxgNaL5ZtEkpeAGIVp5jKJa09xVo9vgSSzQcszdYvmOqjQNSQ6pHK6rO1n1Xj32788miwHLaZz1Tl9i/yayDlYJ/60/+lp8GSY7OY1B8E4p55bWmfquFk22GLuUUxi78cX+m+BjL2GLkhMrV+/muS6Sfic0CEp5T1Yu2OQdTzsKV0MJV73KVjroyTffxfuv5Tf3fd6iLT9wz8YdVHgUzF2Is9/Xhi5sYJqP1w/GUpjOiHVbaI0w2L+pg3GZzvtokcgHxWDXHaiy78l3sPke01qphamT5c+dqyeAGSumdL/mkggauTam0e3L/mPEiqtzKDbl0Z1Wn8xOa4ySo8X/7TQIJnY/seEKWf12UmC72CKP9xYjr19RPT7NNA+oMO+R0gwmlotAry+C6I0f59ch8yXVQOr0BKYcXt1IUYRyCt+Ur9HGsrQKI79WY9sY9ARPKlzFOFdb41ioD8b5Bp+mqeeRKAxINkESBFGpOpKhgv9OuYpH8A8l4Qa3qp60Kl2/k+rG2sWafuuyCBafb2j4JkgZUob3nWcmicpkxEgmTLLGejTxnWSWCi8lPmsk6DlIHFJv24ojiYyYoGacwL8zXTLEAVaDI/Ybb3NIgKDSv2oXpmHkvNs+PTpMASEdlk7fOZeRk37fwJ6yGnQarQsGIfqqcvx43rTOXY6jf7uKXdRzdLDRPbjIrx1cIj3Kr4KyBFezzgUGuR5893qkOQ19fR2uVBaU+r16LphJNOiatK7PeBZK/Kb+tUn71rcQjSvARpghfH/yG/D2RetTuI3N5QrMWdP46brP7FmKZ//CGQ9At9SL01DLkzY/Vs8Z97fQZ7gelw7jHqCz+/Wile5J4g3Vc79eb5a6oLSue+Ve83gaSv2jp5PxCzjzwFUm9zw9MllSMil1kS4d2E9SaQ1xNo9wMxx0+nQNLnew/WDHvveMAHYm08mofl3TFI/8pD3Q6kMAv6DIi2jTCwRJUvNdDYrrJum9oHhusCbWALonwxBRk1vXMnEGWuT5wAmfYuVGUYpJ7fUZujCN92hvzwWlrFgxSfANKb10DxIMbShnfrynyZZV30imA7P43ArXXHbvBVkTCIuGy25AdBrHmNeBCpL214QdLp9LZarG3IMWrmW0ehtuO7F2PS09UcgqS3B7FKPhpknrStD0HGF/vQRne37LwLG8EbHT4WxN7/Fg0yD9Yr/3br4nnstA+0Il6QxzdBmg8A6a2/IRbkcK9h/uzV8zywF/oSkOyageCPglRWgcWClHnEzs9q/t/SENVXgFijlsq3VtXdCsRp4qObrLLLgjuzSq3fX89ZZW6AfxNIzF6X9FYgThN/fk093KkvHX/hbWd+DqS/FUhlf+G3gohEXzVs3g9iDluWoaW8fL73QhB34u+tIHIf19nLuF4Q98a09Eynnl56q+ePgEhnX+dbQOp6H5XnJ0ACd8dFgkwf12nTOTcEqd2pom+CFF02TIPw6dKmrLS5qOtBpo8b5quUtrwrSGbuqPkeSJqllTFHO02NPxdMrm+y5LKdWyWXjw4vA5nGEtnjuyCFyHqNYvEolzmASm3zK1Eg5zr13lhqV1tlksnVw8Pkwgri7O07AVKLJkutRYw87bPlRpBpNXE8xGb+fhBlvEGrGPLqViu5sILIx9dAmqF1705sxF4M8+R8P5dOdQwi12fMnATpjJ2JSt/POIvU9wPJEs/jduJAjLvU0yFT0i64Yb1bsVi79dA4pEy3TzoHMq2O7Re4vXm5O9+l290NpE4CU+YRIMNye2iaqbVS2AUnn2fsekthYKReVNutVedA5juttyIXrT38mOds+ps9DWhwL7GWc61/DVKPzVN9UHDarf1icU98IOU8tm6L031Iq63t1tKzj3fe/FCpO4F0/i0Z2+yvA1KeGBjqj1qYx8/zoxpKZ1Yl367I1k+sfcft/QPy9csXy/32qX1qLZsrryG5BGQaRj0vc/b7N54XXq293TCLB5HO42Fy517obW19b+qjl3CHp0fdLJcWvmdy1etESi/uAdJrs1hTaUklHuW8qSDdC3UfXVR5cnD3rAFSSqtFb7z7eapErx7rC739jCXfbK3aWiipjXo8UbmxXPa7QQq9R289j2Gr88N7Ag5AlHPRKc37pNZv0CZtX1tVMG6rm8qW1/KlCgQvcMss933ybwXZz3dReW5yce4ByZtHFIhwT9kmjxg8BzbKDUe1PB9edBJqSN7/KM1LmqyuMZ5BpeTUw1aD/uDI0relPfSHa/Wn8Pxq1BNfxy/h3IdwOJqIKumb9CHvTqMefyY82RoQAgggBBBACCCAEEAAIYAQQAAhgABCAAGEAAIIAYQAAggBBBACCCAEEEAIIAQQQAgggBBAACGAAEIAIYAAQgABhAACCAEEEAIIAQQQAgggBBBACCCAEEAIIIAQQAAhgABCAAGEAEIAAYQAAggBBBACCCAEEAIIIAQQQAgggBBAACGAEEAAIYAAQgABhAACCAEEEAIIAQQQAgggBBBACCCAEEAIIIAQQAAhgABCAAGEAEIAAYQAAggBBBACCCAEEAIIIAQQQAgggBBAACGAEEAAIYAAQgABhAACCAGEAAIIAQQQAgggBBBACCAEEEAIIIAQQAAhgABCACGAAEIAAYQAAggBBBACCAEEEAIIIAQQQAggfyL/BBgA8PgLdH0TBtkAAAAASUVORK5CYII=' |
|||
}, |
|||
// 图片进入可见区域前多少像素时，单位rpx，开始加载图片 |
|||
// 负数为图片超出屏幕底部多少距离后触发懒加载，正数为图片顶部距离屏幕底部多少距离时触发(图片还没出现在屏幕上) |
|||
threshold: { |
|||
type: [Number, String], |
|||
default: 100 |
|||
}, |
|||
// 淡入淡出动画的过渡时间 |
|||
duration: { |
|||
type: [Number, String], |
|||
default: 500 |
|||
}, |
|||
// 渡效果的速度曲线，各个之间差别不大，因为这是淡入淡出，且时间很短，不是那些变形或者移动的情况，会明显 |
|||
// linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n); |
|||
effect: { |
|||
type: String, |
|||
default: 'ease-in-out' |
|||
}, |
|||
// 是否使用过渡效果 |
|||
isEffect: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 圆角值 |
|||
borderRadius: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
// 图片高度，单位rpx |
|||
height: { |
|||
type: [Number, String], |
|||
default: '450' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
isShow: false, |
|||
opacity: 1, |
|||
time: this.duration, |
|||
loadStatus: '', // 默认是懒加载中的状态 |
|||
isError: false, // 图片加载失败 |
|||
elIndex: this.$u.guid() |
|||
} |
|||
}, |
|||
computed: { |
|||
// 将threshold从rpx转为px |
|||
getThreshold() { |
|||
// 先取绝对值，因为threshold可能是负数，最后根据this.threshold是正数或者负数，重新还原 |
|||
let thresholdPx = uni.upx2px(Math.abs(this.threshold)); |
|||
return this.threshold < 0 ? -thresholdPx : thresholdPx; |
|||
}, |
|||
// 计算图片的高度，可能为auto，带%，或者直接数值 |
|||
imgHeight() { |
|||
return this.$u.addUnit(this.height); |
|||
} |
|||
}, |
|||
created() { |
|||
// 由于一些特殊原因，不能将此变量放到data中定义 |
|||
this.observer = {}; |
|||
}, |
|||
watch: { |
|||
isShow(nVal) { |
|||
// 如果是不开启过渡效果，直接返回 |
|||
if (!this.isEffect) return; |
|||
this.time = 0; |
|||
// 原来opacity为1(不透明，是为了显示占位图)，改成0(透明，意味着该元素显示的是背景颜色，默认的白色)，再改成1，是为了获得过渡效果 |
|||
this.opacity = 0; |
|||
// 延时30ms，否则在浏览器H5，过渡效果无效 |
|||
setTimeout(() => { |
|||
this.time = this.duration; |
|||
this.opacity = 1; |
|||
}, 30) |
|||
}, |
|||
// 图片路径发生变化时，需要重新标记一些变量，否则会一直卡在某一个状态，比如isError |
|||
image(n) { |
|||
if(!n) { |
|||
// 如果传入null或者''，或者undefined，标记为错误状态 |
|||
this.isError = true; |
|||
} else { |
|||
this.init(); |
|||
this.isError = false; |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
// 用于重新初始化 |
|||
init() { |
|||
this.isError = false; |
|||
this.loadStatus = ''; |
|||
}, |
|||
// 点击图片触发的事件,loadlazy-还是懒加载中状态，loading-图片正在加载，loaded-图片加加载完成 |
|||
clickImg() { |
|||
let whichImg = ''; |
|||
// 如果isShow为false，意味着图片还没开始加载，点击的只能是最开始的占位图 |
|||
if (this.isShow == false) whichImg = 'lazyImg'; |
|||
// 如果isError为true，意味着图片加载失败，这是只剩下错误的占位图，所以点击的只能是错误占位图 |
|||
// 当然，也可以给错误的占位图元素绑定点击事件，看你喜欢~ |
|||
else if (this.isError == true) whichImg = 'errorImg'; |
|||
// 总共三张图片，除了两个占位图，剩下的只能是正常的那张图片了 |
|||
else whichImg = 'realImg'; |
|||
// 只通知当前图片的index |
|||
this.$emit('click', this.index); |
|||
}, |
|||
// 图片加载完成事件，可能是加载占位图时触发，也可能是加载真正的图片完成时触发，通过isShow区分 |
|||
imgLoaded() { |
|||
// 占位图加载完成 |
|||
if (this.loadStatus == '') { |
|||
this.loadStatus = 'lazyed'; |
|||
} |
|||
// 真正的图片加载完成 |
|||
else if (this.loadStatus == 'lazyed') { |
|||
this.loadStatus = 'loaded'; |
|||
this.$emit('load', this.index); |
|||
} |
|||
}, |
|||
// 错误的图片加载完成 |
|||
errorImgLoaded() { |
|||
this.$emit('error', this.index); |
|||
}, |
|||
// 图片加载失败 |
|||
loadError() { |
|||
this.isError = true; |
|||
}, |
|||
disconnectObserver(observerName) { |
|||
const observer = this[observerName]; |
|||
observer && observer.disconnect(); |
|||
}, |
|||
}, |
|||
// #ifndef VUE3 |
|||
// 组件销毁前，将实例从u-form的缓存中移除 |
|||
beforeDestroy() { |
|||
// 销毁页面时，可能还没触发某张很底部的懒加载图片，所以把这个事件给去掉 |
|||
//observer.disconnect(); |
|||
}, |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
beforeUnmount() { |
|||
|
|||
}, |
|||
// #endif |
|||
mounted() { |
|||
// 此uOnReachBottom事件由mixin.js发出，目的是让页面到底时，保证所有图片都进行加载，做到绝对稳定且可靠 |
|||
this.$nextTick(() => { |
|||
uni.$once('uOnReachBottom', () => { |
|||
if (!this.isShow) this.isShow = true; |
|||
}); |
|||
}) |
|||
// mounted的时候，不一定挂载了这个元素，延时30ms，否则会报错或者不报错，但是也没有效果 |
|||
setTimeout(() => { |
|||
// 这里是组件内获取布局状态，不能用uni.createIntersectionObserver，而必须用this.createIntersectionObserver |
|||
this.disconnectObserver('contentObserver'); |
|||
const contentObserver = uni.createIntersectionObserver(this); |
|||
// 要理解这里怎么计算的，请看这个： |
|||
// https://blog.csdn.net/qq_25324335/article/details/83687695 |
|||
contentObserver.relativeToViewport({ |
|||
bottom: this.getThreshold, |
|||
}).observe('.u-lazy-item-' + this.elIndex, (res) => { |
|||
if (res.intersectionRatio > 0) { |
|||
// 懒加载状态改变 |
|||
this.isShow = true; |
|||
// 如果图片已经加载，去掉监听，减少性能的消耗 |
|||
this.disconnectObserver('contentObserver'); |
|||
} |
|||
}) |
|||
this.contentObserver = contentObserver; |
|||
}, 30) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-wrap { |
|||
background-color: #eee; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.u-lazy-item { |
|||
width: 100%; |
|||
// 骗系统开启硬件加速 |
|||
transform: transition3d(0, 0, 0); |
|||
// 防止图片加载“闪一下” |
|||
will-change: transform; |
|||
/* #ifndef APP-NVUE */ |
|||
display: block; |
|||
/* #endif */ |
|||
} |
|||
</style> |
|||
@ -0,0 +1,147 @@ |
|||
<template> |
|||
<view class="u-progress" :style="{ |
|||
borderRadius: round ? '100rpx' : 0, |
|||
height: height + 'rpx', |
|||
backgroundColor: inactiveColor |
|||
}"> |
|||
<view :class="[ |
|||
type ? `u-type-${type}-bg` : '', |
|||
striped ? 'u-striped' : '', |
|||
striped && stripedActive ? 'u-striped-active' : '' |
|||
]" class="u-active" :style="[progressStyle]"> |
|||
<slot v-if="$slots.default || $slots.$default" /> |
|||
<block v-else-if="showPercent"> |
|||
{{percent + '%'}} |
|||
</block> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* lineProgress 线型进度条 |
|||
* @description 展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。 |
|||
* @tutorial https://www.uviewui.com/components/lineProgress.html |
|||
* @property {String Number} percent 进度条百分比值，为数值类型，0-100 |
|||
* @property {Boolean} round 进度条两端是否为半圆（默认true） |
|||
* @property {String} type 如设置，active-color值将会失效 |
|||
* @property {String} active-color 进度条激活部分的颜色（默认#19be6b） |
|||
* @property {String} inactive-color 进度条的底色（默认#ececec） |
|||
* @property {Boolean} show-percent 是否在进度条内部显示当前的百分比值数值（默认true） |
|||
* @property {String Number} height 进度条的高度，单位rpx（默认28） |
|||
* @property {Boolean} striped 是否显示进度条激活部分的条纹（默认false） |
|||
* @property {Boolean} striped-active 条纹是否具有动态效果（默认false） |
|||
* @example <u-line-progress :percent="70" :show-percent="true"></u-line-progress> |
|||
*/ |
|||
export default { |
|||
name: "u-line-progress", |
|||
props: { |
|||
// 两端是否显示半圆形 |
|||
round: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 主题颜色 |
|||
type: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 激活部分的颜色 |
|||
activeColor: { |
|||
type: String, |
|||
default: '#19be6b' |
|||
}, |
|||
inactiveColor: { |
|||
type: String, |
|||
default: '#ececec' |
|||
}, |
|||
// 进度百分比，数值 |
|||
percent: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
// 是否在进度条内部显示百分比的值 |
|||
showPercent: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 进度条的高度，单位rpx |
|||
height: { |
|||
type: [Number, String], |
|||
default: 28 |
|||
}, |
|||
// 是否显示条纹 |
|||
striped: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 条纹是否显示活动状态 |
|||
stripedActive: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
computed: { |
|||
progressStyle() { |
|||
let style = {}; |
|||
style.width = this.percent + '%'; |
|||
if(this.activeColor) style.backgroundColor = this.activeColor; |
|||
return style; |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-progress { |
|||
overflow: hidden; |
|||
height: 15px; |
|||
/* #ifndef APP-NVUE */ |
|||
display: inline-flex; |
|||
/* #endif */ |
|||
align-items: center; |
|||
width: 100%; |
|||
border-radius: 100rpx; |
|||
} |
|||
|
|||
.u-active { |
|||
width: 0; |
|||
height: 100%; |
|||
align-items: center; |
|||
@include vue-flex; |
|||
justify-items: flex-end; |
|||
justify-content: space-around; |
|||
font-size: 20rpx; |
|||
color: #ffffff; |
|||
transition: all 0.4s ease; |
|||
} |
|||
|
|||
.u-striped { |
|||
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); |
|||
background-size: 39px 39px; |
|||
} |
|||
|
|||
.u-striped-active { |
|||
animation: progress-stripes 2s linear infinite; |
|||
} |
|||
|
|||
@keyframes progress-stripes { |
|||
0% { |
|||
background-position: 0 0; |
|||
} |
|||
|
|||
100% { |
|||
background-position: 39px 0; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,84 @@ |
|||
<template> |
|||
<view class="u-line" :style="[lineStyle]"> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* line 线条 |
|||
* @description 此组件一般用于显示一根线条，用于分隔内容块，有横向和竖向两种模式，且能设置0.5px线条，使用也很简单 |
|||
* @tutorial https://www.uviewui.com/components/line.html |
|||
* @property {String} color 线条的颜色(默认#e4e7ed) |
|||
* @property {String} length 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带rpx单位的值等 |
|||
* @property {String} direction 线条的方向，row-横向，col-竖向(默认row) |
|||
* @property {String} border-style 线条的类型，solid-实线，dashed-方形虚线，dotted-圆点虚线(默认solid) |
|||
* @property {Boolean} hair-line 是否显示细线条(默认true) |
|||
* @property {String} margin 线条与上下左右元素的间距，字符串形式，如"30rpx" |
|||
* @example <u-line color="red"></u-line> |
|||
*/ |
|||
export default { |
|||
name: 'u-line', |
|||
props: { |
|||
color: { |
|||
type: String, |
|||
default: '#e4e7ed' |
|||
}, |
|||
// 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带rpx单位的值等 |
|||
length: { |
|||
type: String, |
|||
default: '100%' |
|||
}, |
|||
// 线条方向，col-竖向，row-横向 |
|||
direction: { |
|||
type: String, |
|||
default: 'row' |
|||
}, |
|||
// 是否显示细边框 |
|||
hairLine: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 线条与上下左右元素的间距，字符串形式，如"30rpx"、"20rpx 30rpx" |
|||
margin: { |
|||
type: String, |
|||
default: '0' |
|||
}, |
|||
// 线条的类型，solid-实线，dashed-方形虚线，dotted-圆点虚线 |
|||
borderStyle: { |
|||
type: String, |
|||
default: 'solid' |
|||
} |
|||
}, |
|||
computed: { |
|||
lineStyle() { |
|||
let style = {}; |
|||
style.margin = this.margin; |
|||
// 如果是水平线条，边框高度为1px，再通过transform缩小一半，就是0.5px了 |
|||
if(this.direction == 'row') { |
|||
// 此处采用兼容分开写，兼容nvue的写法 |
|||
style.borderBottomWidth = '1px'; |
|||
style.borderBottomStyle = this.borderStyle; |
|||
style.width = this.$u.addUnit(this.length); |
|||
if(this.hairLine) style.transform = 'scaleY(0.5)'; |
|||
} else { |
|||
// 如果是竖向线条，边框宽度为1px，再通过transform缩小一半，就是0.5px了 |
|||
style.borderLeftWidth = '1px'; |
|||
style.borderLeftStyle = this.borderStyle; |
|||
style.height = this.$u.addUnit(this.length); |
|||
if(this.hairLine) style.transform = 'scaleX(0.5)'; |
|||
} |
|||
style.borderColor = this.color; |
|||
return style; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-line { |
|||
vertical-align: middle; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,89 @@ |
|||
<template> |
|||
<text class="u-link" @tap.stop="openLink" :style="{ |
|||
color: color, |
|||
fontSize: fontSize + 'rpx', |
|||
borderBottom: underLine ? `1px solid ${lineColor ? lineColor : color}` : 'none', |
|||
paddingBottom: underLine ? '0rpx' : '0' |
|||
}"> |
|||
<slot></slot> |
|||
</text> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* link 超链接 |
|||
* @description 该组件为超链接组件，在不同平台有不同表现形式：在APP平台会通过plus环境打开内置浏览器，在小程序中把链接复制到粘贴板，同时提示信息，在H5中通过window.open打开链接。 |
|||
* @tutorial https://www.uviewui.com/components/link.html |
|||
* @property {String} color 文字颜色（默认#606266） |
|||
* @property {String Number} font-size 字体大小，单位rpx（默认28） |
|||
* @property {Boolean} under-line 是否显示下划线（默认false） |
|||
* @property {String} href 跳转的链接，要带上http(s) |
|||
* @property {String} line-color 下划线颜色，默认同color参数颜色 |
|||
* @property {String} mp-tips 各个小程序平台把链接复制到粘贴板后的提示语（默认“链接已复制，请在浏览器打开”） |
|||
* @example <u-link href="http://www.uviewui.com">蜀道难，难于上青天</u-link> |
|||
*/ |
|||
export default { |
|||
name: "u-link", |
|||
props: { |
|||
// 文字颜色 |
|||
color: { |
|||
type: String, |
|||
default: '#2979ff' |
|||
}, |
|||
// 字体大小，单位rpx |
|||
fontSize: { |
|||
type: [String, Number], |
|||
default: 28 |
|||
}, |
|||
// 是否显示下划线 |
|||
underLine: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 要跳转的链接 |
|||
href: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 小程序中复制到粘贴板的提示语 |
|||
mpTips: { |
|||
type: String, |
|||
default: '链接已复制，请在浏览器打开' |
|||
}, |
|||
// 下划线颜色 |
|||
lineColor: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
methods: { |
|||
openLink() { |
|||
// #ifdef APP-PLUS |
|||
plus.runtime.openURL(this.href) |
|||
// #endif |
|||
// #ifdef H5 |
|||
window.open(this.href) |
|||
// #endif |
|||
// #ifdef MP |
|||
uni.setClipboardData({ |
|||
data: this.href, |
|||
success: () => { |
|||
uni.hideToast(); |
|||
this.$nextTick(() => { |
|||
this.$u.toast(this.mpTips); |
|||
}) |
|||
} |
|||
}); |
|||
// #endif |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-link { |
|||
line-height: 1; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,25 @@ |
|||
<template> |
|||
<view class="u-loading-page"> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,106 @@ |
|||
<template> |
|||
<view v-if="show" class="u-loading" :class="mode == 'circle' ? 'u-loading-circle' : 'u-loading-flower'" :style="[cricleStyle]"> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* loading 加载动画 |
|||
* @description 警此组件为一个小动画，目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。 |
|||
* @tutorial https://www.uviewui.com/components/loading.html |
|||
* @property {String} mode 模式选择，见官网说明（默认circle） |
|||
* @property {String} color 动画活动区域的颜色，只对 mode = flower 模式有效（默认#c7c7c7） |
|||
* @property {String Number} size 加载图标的大小，单位rpx（默认34） |
|||
* @property {Boolean} show 是否显示动画（默认true） |
|||
* @example <u-loading mode="circle"></u-loading> |
|||
*/ |
|||
export default { |
|||
name: "u-loading", |
|||
props: { |
|||
// 动画的类型 |
|||
mode: { |
|||
type: String, |
|||
default: 'circle' |
|||
}, |
|||
// 动画的颜色 |
|||
color: { |
|||
type: String, |
|||
default: '#c7c7c7' |
|||
}, |
|||
// 加载图标的大小，单位rpx |
|||
size: { |
|||
type: [String, Number], |
|||
default: '34' |
|||
}, |
|||
// 是否显示动画 |
|||
show: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}, |
|||
computed: { |
|||
// 加载中圆圈动画的样式 |
|||
cricleStyle() { |
|||
let style = {}; |
|||
style.width = this.size + 'rpx'; |
|||
style.height = this.size + 'rpx'; |
|||
if (this.mode == 'circle') style.borderColor = `#e4e4e4 #e4e4e4 #e4e4e4 ${this.color ? this.color : '#c7c7c7'}`; |
|||
return style; |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-loading-circle { |
|||
/* #ifndef APP-NVUE */ |
|||
display: inline-flex; |
|||
/* #endif */ |
|||
vertical-align: middle; |
|||
width: 28rpx; |
|||
height: 28rpx; |
|||
background: 0 0; |
|||
border-radius: 50%; |
|||
border: 2px solid; |
|||
border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e; |
|||
animation: u-circle 1s linear infinite; |
|||
} |
|||
|
|||
.u-loading-flower { |
|||
width: 20px; |
|||
height: 20px; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
-webkit-animation: u-flower 1s steps(12) infinite; |
|||
animation: u-flower 1s steps(12) infinite; |
|||
background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat; |
|||
background-size: 100%; |
|||
} |
|||
|
|||
@keyframes u-flower { |
|||
0% { |
|||
-webkit-transform: rotate(0deg); |
|||
transform: rotate(0deg); |
|||
} |
|||
|
|||
to { |
|||
-webkit-transform: rotate(1turn); |
|||
transform: rotate(1turn); |
|||
} |
|||
} |
|||
|
|||
@keyframes u-circle { |
|||
0% { |
|||
-webkit-transform: rotate(0deg); |
|||
transform: rotate(0deg); |
|||
} |
|||
|
|||
to { |
|||
-webkit-transform: rotate(1turn); |
|||
transform: rotate(1turn); |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,204 @@ |
|||
<template> |
|||
<view class="u-load-more-wrap" :style="{ |
|||
backgroundColor: bgColor, |
|||
marginBottom: marginBottom + 'rpx', |
|||
marginTop: marginTop + 'rpx', |
|||
height: $u.addUnit(height) |
|||
}"> |
|||
<u-line color="#d4d4d4" length="50"></u-line> |
|||
<!-- 加载中和没有更多的状态才显示两边的横线 --> |
|||
<view :class="status == 'loadmore' || status == 'nomore' ? 'u-more' : ''" class="u-load-more-inner"> |
|||
<view class="u-loadmore-icon-wrap"> |
|||
<u-loading class="u-loadmore-icon" :color="iconColor" :mode="iconType == 'circle' ? 'circle' : 'flower'" :show="status == 'loading' && icon"></u-loading> |
|||
</view> |
|||
<!-- 如果没有更多的状态下，显示内容为dot（粗点），加载特定样式 --> |
|||
<view class="u-line-1" :style="[loadTextStyle]" :class="[(status == 'nomore' && isDot == true) ? 'u-dot-text' : 'u-more-text']" @tap="loadMore"> |
|||
{{ showText }} |
|||
</view> |
|||
</view> |
|||
<u-line color="#d4d4d4" length="50"></u-line> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* loadmore 加载更多 |
|||
* @description 此组件一般用于标识页面底部加载数据时的状态。 |
|||
* @tutorial https://www.uviewui.com/components/loadMore.html |
|||
* @property {String} status 组件状态（默认loadmore） |
|||
* @property {String} bg-color 组件背景颜色，在页面是非白色时会用到（默认#ffffff） |
|||
* @property {Boolean} icon 加载中时是否显示图标（默认true） |
|||
* @property {String} icon-type 加载中时的图标类型（默认circle） |
|||
* @property {String} icon-color icon-type为circle时有效，加载中的动画图标的颜色（默认#b7b7b7） |
|||
* @property {Boolean} is-dot status为nomore时，内容显示为一个"●"（默认false） |
|||
* @property {String} color 字体颜色（默认#606266） |
|||
* @property {String Number} margin-top 到上一个相邻元素的距离 |
|||
* @property {String Number} margin-bottom 到下一个相邻元素的距离 |
|||
* @property {Object} load-text 自定义显示的文字，见上方说明示例 |
|||
* @event {Function} loadmore status为loadmore时，点击组件会发出此事件 |
|||
* @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" /> |
|||
*/ |
|||
export default { |
|||
name: "u-loadmore", |
|||
emits: ["loadmore"], |
|||
props: { |
|||
// 组件背景色 |
|||
bgColor: { |
|||
type: String, |
|||
default: 'transparent' |
|||
}, |
|||
// 是否显示加载中的图标 |
|||
icon: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 字体大小 |
|||
fontSize: { |
|||
type: String, |
|||
default: '28' |
|||
}, |
|||
// 字体颜色 |
|||
color: { |
|||
type: String, |
|||
default: '#606266' |
|||
}, |
|||
// 组件状态，loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态 |
|||
status: { |
|||
type: String, |
|||
default: 'loadmore' |
|||
}, |
|||
// 加载中状态的图标，flower-花朵状图标，circle-圆圈状图标 |
|||
iconType: { |
|||
type: String, |
|||
default: 'circle' |
|||
}, |
|||
// 显示的文字 |
|||
loadText: { |
|||
type: Object, |
|||
default () { |
|||
return { |
|||
loadmore: '加载更多', |
|||
loading: '正在加载...', |
|||
nomore: '没有更多了' |
|||
} |
|||
} |
|||
}, |
|||
// 在“没有更多”状态下，是否显示粗点 |
|||
isDot: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 加载中显示圆圈动画时，动画的颜色 |
|||
iconColor: { |
|||
type: String, |
|||
default: '#b7b7b7' |
|||
}, |
|||
// 上边距 |
|||
marginTop: { |
|||
type: [String, Number], |
|||
default: 0 |
|||
}, |
|||
// 下边距 |
|||
marginBottom: { |
|||
type: [String, Number], |
|||
default: 0 |
|||
}, |
|||
// 高度，单位rpx |
|||
height: { |
|||
type: [String, Number], |
|||
default: 'auto' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
// 粗点 |
|||
dotText: "●" |
|||
} |
|||
}, |
|||
computed: { |
|||
// 加载的文字显示的样式 |
|||
loadTextStyle() { |
|||
return { |
|||
color: this.color, |
|||
fontSize: this.fontSize + 'rpx', |
|||
position: 'relative', |
|||
zIndex: 1, |
|||
backgroundColor: this.bgColor, |
|||
// 如果是加载中状态，动画和文字需要距离近一点 |
|||
} |
|||
}, |
|||
// 加载中圆圈动画的样式 |
|||
cricleStyle() { |
|||
return { |
|||
borderColor: `#e5e5e5 #e5e5e5 #e5e5e5 ${this.circleColor}` |
|||
} |
|||
}, |
|||
// 加载中花朵动画形式 |
|||
// 动画由base64图片生成，暂不支持修改 |
|||
flowerStyle() { |
|||
return { |
|||
} |
|||
}, |
|||
// 显示的提示文字 |
|||
showText() { |
|||
let text = ''; |
|||
if(this.status == 'loadmore') text = this.loadText.loadmore; |
|||
else if(this.status == 'loading') text = this.loadText.loading; |
|||
else if(this.status == 'nomore' && this.isDot) text = this.dotText; |
|||
else text = this.loadText.nomore; |
|||
return text; |
|||
} |
|||
}, |
|||
methods: { |
|||
loadMore() { |
|||
// 只有在“加载更多”的状态下才发送点击事件，内容不满一屏时无法触发底部上拉事件，所以需要点击来触发 |
|||
if(this.status == 'loadmore') this.$emit('loadmore'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
/* #ifdef MP */ |
|||
// 在mp.scss中，赋予了u-line为flex: 1，这里需要一个明确的长度，所以重置掉它 |
|||
// 在组件内部，把组件名(u-line)当做选择器，在微信开发工具会提示不合法，但不影响使用 |
|||
u-line { |
|||
flex: none; |
|||
} |
|||
/* #endif */ |
|||
|
|||
.u-load-more-wrap { |
|||
@include vue-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.u-load-more-inner { |
|||
@include vue-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 0 12rpx; |
|||
} |
|||
|
|||
.u-more { |
|||
position: relative; |
|||
@include vue-flex; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.u-dot-text { |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.u-loadmore-icon-wrap { |
|||
margin-right: 8rpx; |
|||
} |
|||
|
|||
.u-loadmore-icon { |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,137 @@ |
|||
<template> |
|||
<view class="u-mask" hover-stop-propagation :style="[maskStyle, zoomStyle, filterStyle]" @tap="click" @touchmove.stop.prevent="() => {}" :class="{ |
|||
'u-mask-zoom': zoom, |
|||
'u-mask-show': show |
|||
}"> |
|||
<slot /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* mask 遮罩 |
|||
* @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景 |
|||
* @tutorial https://www.uviewui.com/components/mask.html |
|||
* @property {Boolean} show 是否显示遮罩（默认false） |
|||
* @property {String Number} z-index z-index 层级（默认1070） |
|||
* @property {Object} custom-style 自定义样式对象，见上方说明 |
|||
* @property {String Number} duration 动画时长，单位毫秒（默认300） |
|||
* @property {Boolean} zoom 是否使用scale对遮罩进行缩放（默认true） |
|||
* @property {Boolean} mask-click-able 遮罩是否可点击，为false时点击不会发送click事件（默认true） |
|||
* @event {Function} click mask-click-able为true时，点击遮罩发送此事件 |
|||
* @example <u-mask :show="show" @click="show = false"></u-mask> |
|||
*/ |
|||
export default { |
|||
name: "u-mask", |
|||
emits: ["click"], |
|||
props: { |
|||
// 是否显示遮罩 |
|||
show: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 层级z-index |
|||
zIndex: { |
|||
type: [Number, String], |
|||
default: '' |
|||
}, |
|||
// 用户自定义样式 |
|||
customStyle: { |
|||
type: Object, |
|||
default () { |
|||
return {} |
|||
} |
|||
}, |
|||
// 遮罩的动画样式， 是否使用使用zoom进行scale进行缩放 |
|||
zoom: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 遮罩的过渡时间，单位为ms |
|||
duration: { |
|||
type: [Number, String], |
|||
default: 300 |
|||
}, |
|||
// 是否可以通过点击遮罩进行关闭 |
|||
maskClickAble: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 遮罩的模糊度 |
|||
blur: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
zoomStyle: { |
|||
transform: '' |
|||
}, |
|||
scale: 'scale(1.2, 1.2)' |
|||
} |
|||
}, |
|||
watch: { |
|||
show(n) { |
|||
if(n && this.zoom) { |
|||
// 当展示遮罩的时候，设置scale为1，达到缩小(原来为1.2)的效果 |
|||
this.zoomStyle.transform = 'scale(1, 1)'; |
|||
} else if(!n && this.zoom) { |
|||
// 当隐藏遮罩的时候，设置scale为1.2，达到放大(因为显示遮罩时已重置为1)的效果 |
|||
this.zoomStyle.transform = this.scale; |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
maskStyle() { |
|||
let style = {}; |
|||
style.backgroundColor = "rgba(0, 0, 0, 0.6)"; |
|||
if(this.show) style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.mask; |
|||
else style.zIndex = -1; |
|||
style.transition = `all ${this.duration / 1000}s ease-in-out`; |
|||
// 判断用户传递的对象是否为空，不为空就进行合并 |
|||
if (Object.keys(this.customStyle).length) style = { |
|||
...style, |
|||
...this.customStyle |
|||
}; |
|||
return style; |
|||
}, |
|||
filterStyle() { |
|||
let { blur } = this; |
|||
let style = {}; |
|||
if (blur) { |
|||
style.backdropFilter = `blur(${blur}rpx)`; |
|||
} |
|||
return style; |
|||
} |
|||
}, |
|||
methods: { |
|||
click() { |
|||
if (!this.maskClickAble) return; |
|||
this.$emit('click'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-mask { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
opacity: 0; |
|||
transition: transform 0.3s; |
|||
} |
|||
|
|||
.u-mask-show { |
|||
opacity: 1; |
|||
} |
|||
|
|||
.u-mask-zoom { |
|||
transform: scale(1.2, 1.2); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,327 @@ |
|||
<template> |
|||
<view class="u-char-box"> |
|||
<view class="u-char-flex"> |
|||
<input :disabled="disabledKeyboard" :value="valueModel" type="number" :focus="focus" :maxlength="maxlength" class="u-input" @input="getVal"/> |
|||
<view v-for="(item, index) in loopCharArr" :key="index"> |
|||
<view :class="[breathe && charArrLength == index ? 'u-breathe' : '', 'u-char-item', |
|||
charArrLength === index && mode == 'box' ? 'u-box-active' : '', |
|||
mode === 'box' ? 'u-box' : '']" :style="{ |
|||
fontWeight: bold ? 'bold' : 'normal', |
|||
fontSize: fontSize + 'rpx', |
|||
width: width + 'rpx', |
|||
height: width + 'rpx', |
|||
color: inactiveColor, |
|||
borderColor: charArrLength === index && mode == 'box' ? activeColor : inactiveColor |
|||
}"> |
|||
<view class="u-placeholder-line" :style="{ |
|||
display: charArrLength === index ? 'block' : 'none', |
|||
height: width * 0.5 +'rpx' |
|||
}" |
|||
v-if="mode !== 'middleLine'" |
|||
></view> |
|||
<view v-if="mode === 'middleLine' && charArrLength <= index" :class="[breathe && charArrLength == index ? 'u-breathe' : '', charArrLength === index ? 'u-middle-line-active' : '']" |
|||
class="u-middle-line" :style="{height: bold ? '4px' : '2px', background: charArrLength === index ? activeColor : inactiveColor}"></view> |
|||
<view v-if="mode === 'bottomLine'" :class="[breathe && charArrLength == index ? 'u-breathe' : '', charArrLength === index ? 'u-bottom-line-active' : '']" |
|||
class="u-bottom-line" :style="{height: bold ? '4px' : '2px', background: charArrLength === index ? activeColor : inactiveColor}"></view> |
|||
<block v-if="!dotFill"> {{ charArr[index] ? charArr[index] : ''}}</block> |
|||
<block v-else> |
|||
<text class="u-dot">{{ charArr[index] ? '●' : ''}}</text> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* messageInput 验证码输入框 |
|||
* @description 该组件一般用于验证用户短信验证码的场景，也可以结合uView的键盘组件使用 |
|||
* @tutorial https://www.uviewui.com/components/messageInput.html |
|||
* @property {String Number} maxlength 输入字符个数（默认4） |
|||
* @property {Boolean} dot-fill 是否用圆点填充（默认false） |
|||
* @property {String} mode 模式选择，见上方"基本使用"说明（默认box） |
|||
* @property {String Number} value 预置值 |
|||
* @property {Boolean} breathe 是否开启呼吸效果，见上方说明（默认true） |
|||
* @property {Boolean} focus 是否自动获取焦点（默认false） |
|||
* @property {Boolean} bold 字体和输入横线是否加粗（默认true） |
|||
* @property {String Number} font-size 字体大小，单位rpx（默认60） |
|||
* @property {String} active-color 当前激活输入框的样式（默认#2979ff） |
|||
* @property {String} inactive-color 非激活输入框的样式，文字颜色同此值（默认#606266） |
|||
* @property {String | Number} width 输入框宽度，单位rpx，高等于宽（默认80） |
|||
* @property {Boolean} disabled-keyboard 禁止点击输入框唤起系统键盘（默认false） |
|||
* @event {Function} change 输入内容发生改变时触发，具体见官网说明 |
|||
* @event {Function} finish 输入字符个数达maxlength值时触发，见官网说明 |
|||
* @example <u-message-input mode="bottomLine"></u-message-input> |
|||
*/ |
|||
export default { |
|||
name: "u-message-input", |
|||
emits: ["update:modelValue", "input","change", "finish"], |
|||
props: { |
|||
// 预置值 |
|||
value: { |
|||
type: [String, Number], |
|||
default: '' |
|||
}, |
|||
modelValue: { |
|||
type: [String, Number], |
|||
default: '' |
|||
}, |
|||
// 最大输入长度 |
|||
maxlength: { |
|||
type: [Number, String], |
|||
default: 4 |
|||
}, |
|||
// 是否用圆点填充 |
|||
dotFill: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 显示模式，box-盒子模式，bottomLine-横线在底部模式，middleLine-横线在中部模式 |
|||
mode: { |
|||
type: String, |
|||
default: "box" |
|||
}, |
|||
// 当前激活输入item，是否带有呼吸效果 |
|||
breathe: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否自动获取焦点 |
|||
focus: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 字体是否加粗 |
|||
bold: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 字体大小 |
|||
fontSize: { |
|||
type: [String, Number], |
|||
default: 60 |
|||
}, |
|||
// 激活样式 |
|||
activeColor: { |
|||
type: String, |
|||
default: '#2979ff' |
|||
}, |
|||
// 未激活的样式 |
|||
inactiveColor: { |
|||
type: String, |
|||
default: '#606266' |
|||
}, |
|||
// 输入框的大小，单位rpx，宽等于高 |
|||
width: { |
|||
type: [Number, String], |
|||
default: '80' |
|||
}, |
|||
// 是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true |
|||
disabledKeyboard: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
watch: { |
|||
// maxlength: { |
|||
// // 此值设置为true，会在组件加载后无需maxlength变化就会执行一次本监听函数，无需再created生命周期中处理 |
|||
// immediate: true, |
|||
// handler(val) { |
|||
// this.maxlength = Number(val); |
|||
// } |
|||
// }, |
|||
valueCom: { |
|||
immediate: true, |
|||
handler(val) { |
|||
// 转为字符串 |
|||
val = String(val); |
|||
// 超出部分截掉 |
|||
this.valueModel = val.substring(0, Number(this.maxlength)); |
|||
} |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
valueModel: "" |
|||
} |
|||
}, |
|||
computed: { |
|||
valueCom(){ |
|||
// #ifndef VUE3 |
|||
return this.value; |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
return this.modelValue; |
|||
// #endif |
|||
}, |
|||
// 是否显示呼吸灯效果 |
|||
animationClass() { |
|||
return (index) => { |
|||
if (this.breathe && this.charArr.length == index) return 'u-breathe'; |
|||
else return ''; |
|||
} |
|||
}, |
|||
// 用于显示字符 |
|||
charArr() { |
|||
return this.valueModel.split(''); |
|||
}, |
|||
charArrLength() { |
|||
return this.charArr.length; |
|||
}, |
|||
// 根据长度，循环输入框的个数，因为头条小程序数值不能用于v-for |
|||
loopCharArr() { |
|||
return new Array(Number(this.maxlength)); |
|||
} |
|||
}, |
|||
methods: { |
|||
getVal(e) { |
|||
let { |
|||
value |
|||
} = e.detail |
|||
this.valueModel = value; |
|||
// 判断长度是否超出了maxlength值，理论上不会发生，因为input组件设置了maxlength属性值 |
|||
if (String(value).length > Number(this.maxlength)) return; |
|||
// 未达到maxlength之前，发送change事件，达到后发送finish事件 |
|||
this.$emit('change', value); |
|||
this.$emit("input", value); |
|||
this.$emit("update:modelValue", value); |
|||
if (String(value).length == Number(this.maxlength)) { |
|||
this.$emit('finish', value); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
@keyframes breathe { |
|||
0% { |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
50% { |
|||
opacity: 1; |
|||
} |
|||
|
|||
100% { |
|||
opacity: 0.3; |
|||
} |
|||
} |
|||
|
|||
.u-char-box { |
|||
text-align: center; |
|||
} |
|||
|
|||
.u-char-flex { |
|||
@include vue-flex; |
|||
justify-content: center; |
|||
flex-wrap: wrap; |
|||
position: relative; |
|||
} |
|||
|
|||
.u-input { |
|||
position: absolute; |
|||
top: 0; |
|||
left: -100%; |
|||
width: 200%; |
|||
height: 100%; |
|||
text-align: left; |
|||
z-index: 9; |
|||
opacity: 0; |
|||
background: none; |
|||
} |
|||
|
|||
.u-char-item { |
|||
position: relative; |
|||
width: 90rpx; |
|||
height: 90rpx; |
|||
margin: 10rpx 10rpx; |
|||
font-size: 60rpx; |
|||
font-weight: bold; |
|||
color: $u-main-color; |
|||
line-height: 90rpx; |
|||
@include vue-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.u-middle-line { |
|||
border: none; |
|||
} |
|||
|
|||
.u-box { |
|||
box-sizing: border-box; |
|||
border: 2rpx solid #cccccc; |
|||
border-radius: 6rpx; |
|||
} |
|||
|
|||
.u-box-active { |
|||
overflow: hidden; |
|||
animation-timing-function: ease-in-out; |
|||
animation-duration: 1500ms; |
|||
animation-iteration-count: infinite; |
|||
animation-direction: alternate; |
|||
border: 2rpx solid $u-type-primary; |
|||
} |
|||
|
|||
.u-middle-line-active { |
|||
background: $u-type-primary; |
|||
} |
|||
|
|||
.u-breathe { |
|||
animation: breathe 2s infinite ease; |
|||
} |
|||
|
|||
.u-placeholder-line { |
|||
/* #ifndef APP-NVUE */ |
|||
display: none; |
|||
/* #endif */ |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%, -50%); |
|||
width: 2rpx; |
|||
height: 40rpx; |
|||
background: #333333; |
|||
animation: twinkling 1.5s infinite ease; |
|||
} |
|||
|
|||
.u-animation-breathe { |
|||
animation-name: breathe; |
|||
} |
|||
|
|||
.u-dot { |
|||
font-size: 34rpx; |
|||
line-height: 34rpx; |
|||
} |
|||
|
|||
.u-middle-line { |
|||
height: 4px; |
|||
background: #000000; |
|||
width: 80%; |
|||
position: absolute; |
|||
border-radius: 2px; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
|
|||
.u-bottom-line-active { |
|||
background: $u-type-primary; |
|||
} |
|||
|
|||
.u-bottom-line { |
|||
height: 4px; |
|||
background: #000000; |
|||
width: 80%; |
|||
position: absolute; |
|||
border-radius: 2px; |
|||
bottom: 0; |
|||
left: 50%; |
|||
transform: translate(-50%); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,339 @@ |
|||
<template> |
|||
<view> |
|||
<u-popup |
|||
:blur="blur" |
|||
:zoom="zoom" |
|||
mode="center" |
|||
:popup="false" |
|||
:z-index="uZIndex" |
|||
v-model="popupValue" |
|||
:length="width" |
|||
:mask-close-able="maskCloseAble" |
|||
:border-radius="borderRadius" |
|||
@close="popupClose" |
|||
:negative-top="negativeTop" |
|||
> |
|||
<view class="u-model"> |
|||
<view v-if="showTitle" class="u-model__title u-line-1" :style="[titleStyle]"> |
|||
{{ title }} |
|||
</view> |
|||
<view class="u-model__content"> |
|||
<view :style="[contentStyle]" v-if="$slots.default || $slots.$default"><slot /></view> |
|||
<view v-else class="u-model__content__message" :style="[contentStyle]"> |
|||
{{ content }} |
|||
</view> |
|||
</view> |
|||
<view class="u-model__footer u-border-top" v-if="showCancelButton || showConfirmButton"> |
|||
<view |
|||
v-if="showCancelButton" |
|||
:hover-stay-time="100" |
|||
hover-class="u-model__btn--hover" |
|||
class="u-model__footer__button" |
|||
:style="[cancelBtnStyle]" |
|||
@tap="cancel" |
|||
> |
|||
{{ cancelText }} |
|||
</view> |
|||
<view |
|||
v-if="showConfirmButton || $slots['confirm-button']" |
|||
:hover-stay-time="100" |
|||
:hover-class="asyncClose ? 'none' : 'u-model__btn--hover'" |
|||
class="u-model__footer__button hairline-left" |
|||
:style="[confirmBtnStyle]" |
|||
@tap="confirm" |
|||
> |
|||
<slot v-if="$slots['confirm-button']" name="confirm-button"></slot> |
|||
<block v-else> |
|||
<u-loading mode="circle" :color="confirmColor" v-if="loading"></u-loading> |
|||
<block v-else>{{ confirmText }}</block> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</u-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* modal 模态框 |
|||
* @description 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作 |
|||
* @tutorial https://www.uviewui.com/components/modal.html |
|||
* @property {Boolean} value 是否显示模态框 |
|||
* @property {String | Number} z-index 层级 |
|||
* @property {String} title 模态框标题（默认"提示"） |
|||
* @property {String | Number} width 模态框宽度（默认600） |
|||
* @property {String} content 模态框内容（默认"内容"） |
|||
* @property {Boolean} show-title 是否显示标题（默认true） |
|||
* @property {Boolean} async-close 是否异步关闭，只对确定按钮有效（默认false） |
|||
* @property {Boolean} show-confirm-button 是否显示确认按钮（默认true） |
|||
* @property {Stringr | Number} negative-top modal往上偏移的值 |
|||
* @property {Boolean} show-cancel-button 是否显示取消按钮（默认false） |
|||
* @property {Boolean} mask-close-able 是否允许点击遮罩关闭modal（默认false） |
|||
* @property {String} confirm-text 确认按钮的文字内容（默认"确认"） |
|||
* @property {String} cancel-text 取消按钮的文字内容（默认"取消"） |
|||
* @property {String} cancel-color 取消按钮的颜色（默认"#606266"） |
|||
* @property {String} confirm-color 确认按钮的文字内容（默认"#2979ff"） |
|||
* @property {String | Number} border-radius 模态框圆角值，单位rpx（默认16） |
|||
* @property {Object} title-style 自定义标题样式，对象形式 |
|||
* @property {Object} content-style 自定义内容样式，对象形式 |
|||
* @property {Object} cancel-style 自定义取消按钮样式，对象形式 |
|||
* @property {Object} confirm-style 自定义确认按钮样式，对象形式 |
|||
* @property {Boolean} zoom 是否开启缩放模式（默认true） |
|||
* @event {Function} confirm 确认按钮被点击 |
|||
* @event {Function} cancel 取消按钮被点击 |
|||
* @example <u-modal :src="title" :content="content"></u-modal> |
|||
*/ |
|||
export default { |
|||
name: "u-modal", |
|||
emits: ["update:modelValue", "input", "confirm", "cancel"], |
|||
props: { |
|||
// 是否显示Modal |
|||
value: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
modelValue: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 层级z-index |
|||
zIndex: { |
|||
type: [Number, String], |
|||
default: "" |
|||
}, |
|||
// 标题 |
|||
title: { |
|||
type: [String], |
|||
default: "提示" |
|||
}, |
|||
// 弹窗宽度，可以是数值(rpx)，百分比，auto等 |
|||
width: { |
|||
type: [Number, String], |
|||
default: 600 |
|||
}, |
|||
// 弹窗内容 |
|||
content: { |
|||
type: String, |
|||
default: "内容" |
|||
}, |
|||
// 是否显示标题 |
|||
showTitle: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否显示确认按钮 |
|||
showConfirmButton: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否显示取消按钮 |
|||
showCancelButton: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 确认文案 |
|||
confirmText: { |
|||
type: String, |
|||
default: "确认" |
|||
}, |
|||
// 取消文案 |
|||
cancelText: { |
|||
type: String, |
|||
default: "取消" |
|||
}, |
|||
// 确认按钮颜色 |
|||
confirmColor: { |
|||
type: String, |
|||
default: "#2979ff" |
|||
}, |
|||
// 取消文字颜色 |
|||
cancelColor: { |
|||
type: String, |
|||
default: "#606266" |
|||
}, |
|||
// 圆角值 |
|||
borderRadius: { |
|||
type: [Number, String], |
|||
default: 16 |
|||
}, |
|||
// 标题的样式 |
|||
titleStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
} |
|||
}, |
|||
// 内容的样式 |
|||
contentStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
} |
|||
}, |
|||
// 取消按钮的样式 |
|||
cancelStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
} |
|||
}, |
|||
// 确定按钮的样式 |
|||
confirmStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
} |
|||
}, |
|||
// 是否开启缩放效果 |
|||
zoom: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否异步关闭，只对确定按钮有效 |
|||
asyncClose: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否允许点击遮罩关闭modal |
|||
maskCloseAble: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 给一个负的margin-top，往上偏移，避免和键盘重合的情况 |
|||
negativeTop: { |
|||
type: [String, Number], |
|||
default: 0 |
|||
}, |
|||
// 遮罩的模糊度 |
|||
blur: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
loading: false, // 确认按钮是否正在加载中 |
|||
popupValue: false |
|||
}; |
|||
}, |
|||
computed: { |
|||
valueCom() { |
|||
// #ifndef VUE3 |
|||
return this.value; |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
return this.modelValue; |
|||
// #endif |
|||
}, |
|||
cancelBtnStyle() { |
|||
return Object.assign( |
|||
{ |
|||
color: this.cancelColor |
|||
}, |
|||
this.cancelStyle |
|||
); |
|||
}, |
|||
confirmBtnStyle() { |
|||
return Object.assign( |
|||
{ |
|||
color: this.confirmColor |
|||
}, |
|||
this.confirmStyle |
|||
); |
|||
}, |
|||
uZIndex() { |
|||
return this.zIndex ? this.zIndex : this.$u.zIndex.popup; |
|||
} |
|||
}, |
|||
watch: { |
|||
// 如果是异步关闭时，外部修改v-model的值为false时，重置内部的loading状态 |
|||
// 避免下次打开的时候，状态混乱 |
|||
valueCom:{ |
|||
immediate: true, |
|||
handler(n){ |
|||
if (n === true) this.loading = false; |
|||
this.popupValue = n; |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
confirm() { |
|||
// 异步关闭 |
|||
if (this.asyncClose) { |
|||
this.loading = true; |
|||
} else { |
|||
this.$emit("input", false); |
|||
this.$emit("update:modelValue", false); |
|||
} |
|||
this.$emit("confirm"); |
|||
}, |
|||
cancel() { |
|||
this.$emit("cancel"); |
|||
this.$emit("input", false); |
|||
this.$emit("update:modelValue", false); |
|||
// 目前popup弹窗关闭有一个延时操作，此处做一个延时 |
|||
// 避免确认按钮文字变成了"确定"字样，modal还没消失，造成视觉不好的效果 |
|||
setTimeout(() => { |
|||
this.loading = false; |
|||
}, 300); |
|||
}, |
|||
// 点击遮罩关闭modal，设置v-model的值为false，否则无法第二次弹起modal |
|||
popupClose() { |
|||
this.$emit("input", false); |
|||
this.$emit("update:modelValue", false); |
|||
}, |
|||
// 清除加载中的状态 |
|||
clearLoading() { |
|||
this.loading = false; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-model { |
|||
height: auto; |
|||
overflow: hidden; |
|||
font-size: 32rpx; |
|||
background-color: #fff; |
|||
|
|||
&__btn--hover { |
|||
background-color: rgb(230, 230, 230); |
|||
} |
|||
|
|||
&__title { |
|||
padding-top: 48rpx; |
|||
font-weight: 500; |
|||
text-align: center; |
|||
color: $u-main-color; |
|||
} |
|||
|
|||
&__content { |
|||
&__message { |
|||
padding: 48rpx; |
|||
font-size: 30rpx; |
|||
text-align: center; |
|||
color: $u-content-color; |
|||
} |
|||
} |
|||
|
|||
&__footer { |
|||
@include vue-flex; |
|||
|
|||
&__button { |
|||
flex: 1; |
|||
height: 100rpx; |
|||
line-height: 100rpx; |
|||
font-size: 32rpx; |
|||
box-sizing: border-box; |
|||
cursor: pointer; |
|||
text-align: center; |
|||
border-radius: 4rpx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,315 @@ |
|||
<template> |
|||
<view class=""> |
|||
<view class="u-navbar" :style="[navbarStyle]" :class="{ 'u-navbar-fixed': isFixed, 'u-border-bottom': borderBottom }"> |
|||
<view class="u-status-bar" :style="{ height: statusBarHeight + 'px' }"></view> |
|||
<view class="u-navbar-inner" :style="[navbarInnerStyle]"> |
|||
<view class="u-back-wrap" v-if="isBack" @tap="goBack"> |
|||
<view class="u-icon-wrap"> |
|||
<u-icon :name="backIconName" :color="backIconColor" :size="backIconSize"></u-icon> |
|||
</view> |
|||
<view class="u-icon-wrap u-back-text u-line-1" v-if="backText" :style="[backTextStyle]">{{ backText }}</view> |
|||
</view> |
|||
<view class="u-navbar-content-title" v-if="title" :style="[titleStyle]"> |
|||
<view |
|||
class="u-title u-line-1" |
|||
:style="{ |
|||
color: titleColor, |
|||
fontSize: titleSize + 'rpx', |
|||
fontWeight: titleBold ? 'bold' : 'normal' |
|||
}"> |
|||
{{ title }} |
|||
</view> |
|||
</view> |
|||
<view class="u-slot-content"> |
|||
<slot></slot> |
|||
</view> |
|||
<view class="u-slot-right"> |
|||
<slot name="right"></slot> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 解决fixed定位后导航栏塌陷的问题 --> |
|||
<view class="u-navbar-placeholder" v-if="isFixed && !immersive" :style="{ width: '100%', height: Number(navbarHeight) + statusBarHeight + 'px' }"></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
// 获取系统状态栏的高度 |
|||
let systemInfo = uni.getSystemInfoSync(); |
|||
let menuButtonInfo = {}; |
|||
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容) |
|||
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ |
|||
menuButtonInfo = uni.getMenuButtonBoundingClientRect(); |
|||
// #endif |
|||
/** |
|||
* navbar 自定义导航栏 |
|||
* @description 此组件一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用uniapp自带的导航栏。 |
|||
* @tutorial https://www.uviewui.com/components/navbar.html |
|||
* @property {String Number} height 导航栏高度(不包括状态栏高度在内，内部自动加上)，注意这里的单位是px（默认44） |
|||
* @property {String} back-icon-color 左边返回图标的颜色（默认#606266） |
|||
* @property {String} back-icon-name 左边返回图标的名称，只能为uView自带的图标（默认arrow-left） |
|||
* @property {String Number} back-icon-size 左边返回图标的大小，单位rpx（默认30） |
|||
* @property {String} back-text 返回图标右边的辅助提示文字 |
|||
* @property {Object} back-text-style 返回图标右边的辅助提示文字的样式，对象形式（默认{ color: '#606266' }） |
|||
* @property {String} title 导航栏标题，如设置为空字符，将会隐藏标题占位区域 |
|||
* @property {String Number} title-width 导航栏标题的最大宽度，内容超出会以省略号隐藏，单位rpx（默认250） |
|||
* @property {String} title-color 标题的颜色（默认#606266） |
|||
* @property {String Number} title-size 导航栏标题字体大小，单位rpx（默认32） |
|||
* @property {Function} custom-back 自定义返回逻辑方法 |
|||
* @property {String Number} z-index 固定在顶部时的z-index值（默认980） |
|||
* @property {Boolean} is-back 是否显示导航栏左边返回图标和辅助文字（默认true） |
|||
* @property {Object} background 导航栏背景设置，见官网说明（默认{ background: '#ffffff' }） |
|||
* @property {Boolean} is-fixed 导航栏是否固定在顶部（默认true） |
|||
* @property {Boolean} immersive 沉浸式，允许fixed定位后导航栏塌陷，仅fixed定位下生效（默认false） |
|||
* @property {Boolean} border-bottom 导航栏底部是否显示下边框，如定义了较深的背景颜色，可取消此值（默认true） |
|||
* @example <u-navbar back-text="返回" title="剑未配妥，出门已是江湖"></u-navbar> |
|||
*/ |
|||
export default { |
|||
name: "u-navbar", |
|||
props: { |
|||
// 导航栏高度，单位px，非rpx |
|||
height: { |
|||
type: [String, Number], |
|||
default: '' |
|||
}, |
|||
// 返回箭头的颜色 |
|||
backIconColor: { |
|||
type: String, |
|||
default: '#606266' |
|||
}, |
|||
// 左边返回的图标 |
|||
backIconName: { |
|||
type: String, |
|||
default: 'nav-back' |
|||
}, |
|||
// 左边返回图标的大小，rpx |
|||
backIconSize: { |
|||
type: [String, Number], |
|||
default: '44' |
|||
}, |
|||
// 返回的文字提示 |
|||
backText: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 返回的文字的 样式 |
|||
backTextStyle: { |
|||
type: Object, |
|||
default () { |
|||
return { |
|||
color: '#606266' |
|||
} |
|||
} |
|||
}, |
|||
// 导航栏标题 |
|||
title: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 标题的宽度，如果需要自定义右侧内容，且右侧内容很多时，可能需要减少这个宽度，单位rpx |
|||
titleWidth: { |
|||
type: [String, Number], |
|||
default: '250' |
|||
}, |
|||
// 标题的颜色 |
|||
titleColor: { |
|||
type: String, |
|||
default: '#606266' |
|||
}, |
|||
// 标题字体是否加粗 |
|||
titleBold: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 标题的字体大小 |
|||
titleSize: { |
|||
type: [String, Number], |
|||
default: 32 |
|||
}, |
|||
isBack: { |
|||
type: [Boolean, String], |
|||
default: true |
|||
}, |
|||
// 对象形式，因为用户可能定义一个纯色，或者线性渐变的颜色 |
|||
background: { |
|||
type: Object, |
|||
default () { |
|||
return { |
|||
background: '#ffffff' |
|||
} |
|||
} |
|||
}, |
|||
// 导航栏是否固定在顶部 |
|||
isFixed: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否沉浸式，允许fixed定位后导航栏塌陷，仅fixed定位下生效 |
|||
immersive: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否显示导航栏的下边框 |
|||
borderBottom: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
zIndex: { |
|||
type: [String, Number], |
|||
default: '' |
|||
}, |
|||
// 自定义返回逻辑 |
|||
customBack: { |
|||
type: Function, |
|||
default: null |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
menuButtonInfo: menuButtonInfo, |
|||
statusBarHeight: systemInfo.statusBarHeight |
|||
}; |
|||
}, |
|||
computed: { |
|||
// 导航栏内部盒子的样式 |
|||
navbarInnerStyle() { |
|||
let style = {}; |
|||
// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离 |
|||
style.height = this.navbarHeight + 'px'; |
|||
// // 如果是各家小程序，导航栏内部的宽度需要减少右边胶囊的宽度 |
|||
// #ifdef MP |
|||
let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left; |
|||
style.marginRight = rightButtonWidth + 'px'; |
|||
// #endif |
|||
return style; |
|||
}, |
|||
// 整个导航栏的样式 |
|||
navbarStyle() { |
|||
let style = {}; |
|||
style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.navbar; |
|||
// 合并用户传递的背景色对象 |
|||
Object.assign(style, this.background); |
|||
return style; |
|||
}, |
|||
// 导航中间的标题的样式 |
|||
titleStyle() { |
|||
let style = {}; |
|||
// #ifndef MP |
|||
style.left = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px'; |
|||
style.right = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px'; |
|||
// #endif |
|||
// #ifdef MP |
|||
// 此处是为了让标题显示区域即使在小程序有右侧胶囊的情况下也能处于屏幕的中间，是通过绝对定位实现的 |
|||
let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left; |
|||
style.left = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px'; |
|||
style.right = rightButtonWidth - (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + rightButtonWidth + |
|||
'px'; |
|||
// #endif |
|||
style.width = uni.upx2px(this.titleWidth) + 'px'; |
|||
return style; |
|||
}, |
|||
// 转换字符数值为真正的数值 |
|||
navbarHeight() { |
|||
// #ifdef APP-PLUS || H5 |
|||
return this.height ? this.height : 44; |
|||
// #endif |
|||
// #ifdef MP |
|||
// 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离) |
|||
// 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式 |
|||
// return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度 |
|||
let height = systemInfo.platform == 'ios' ? 44 : 48; |
|||
return this.height ? this.height : height; |
|||
// #endif |
|||
} |
|||
}, |
|||
created() {}, |
|||
methods: { |
|||
goBack() { |
|||
// 如果自定义了点击返回按钮的函数，则执行，否则执行返回逻辑 |
|||
if (typeof this.customBack === 'function') { |
|||
// 在微信，支付宝等环境(H5正常)，会导致父组件定义的customBack()函数体中的this变成子组件的this |
|||
// 通过bind()方法，绑定父组件的this，让this.customBack()的this为父组件的上下文 |
|||
this.customBack.bind(this.$u.$parent.call(this))(); |
|||
} else { |
|||
uni.navigateBack(); |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-navbar { |
|||
width: 100%; |
|||
} |
|||
|
|||
.u-navbar-fixed { |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
z-index: 991; |
|||
} |
|||
|
|||
.u-status-bar { |
|||
width: 100%; |
|||
} |
|||
|
|||
.u-navbar-inner { |
|||
@include vue-flex; |
|||
justify-content: space-between; |
|||
position: relative; |
|||
align-items: center; |
|||
} |
|||
|
|||
.u-back-wrap { |
|||
@include vue-flex; |
|||
align-items: center; |
|||
flex: 1; |
|||
flex-grow: 0; |
|||
padding: 14rpx 14rpx 14rpx 24rpx; |
|||
} |
|||
|
|||
.u-back-text { |
|||
padding-left: 4rpx; |
|||
font-size: 30rpx; |
|||
} |
|||
|
|||
.u-navbar-content-title { |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex: 1; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
height: 60rpx; |
|||
text-align: center; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.u-navbar-centent-slot { |
|||
flex: 1; |
|||
} |
|||
|
|||
.u-title { |
|||
line-height: 60rpx; |
|||
font-size: 32rpx; |
|||
flex: 1; |
|||
} |
|||
|
|||
.u-navbar-right { |
|||
flex: 1; |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.u-slot-content { |
|||
flex: 1; |
|||
@include vue-flex; |
|||
align-items: center; |
|||
} |
|||
</style> |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,273 @@ |
|||
<template> |
|||
<view class="u-notice-bar-wrap" v-if="isShow" :style="{ |
|||
borderRadius: borderRadius + 'rpx', |
|||
}"> |
|||
<block v-if="mode == 'horizontal' && isCircular"> |
|||
<u-row-notice |
|||
:type="type" |
|||
:color="color" |
|||
:bgColor="bgColor" |
|||
:list="list" |
|||
:volumeIcon="volumeIcon" |
|||
:moreIcon="moreIcon" |
|||
:volumeSize="volumeSize" |
|||
:closeIcon="closeIcon" |
|||
:mode="mode" |
|||
:fontSize="fontSize" |
|||
:speed="speed" |
|||
:playState="playState" |
|||
:padding="padding" |
|||
@getMore="getMore" |
|||
@close="close" |
|||
@click="click" |
|||
></u-row-notice> |
|||
</block> |
|||
<block v-if="mode == 'vertical' || (mode == 'horizontal' && !isCircular)"> |
|||
<u-column-notice |
|||
:type="type" |
|||
:color="color" |
|||
:bgColor="bgColor" |
|||
:list="list" |
|||
:volumeIcon="volumeIcon" |
|||
:moreIcon="moreIcon" |
|||
:closeIcon="closeIcon" |
|||
:mode="mode" |
|||
:volumeSize="volumeSize" |
|||
:disable-touch="disableTouch" |
|||
:fontSize="fontSize" |
|||
:duration="duration" |
|||
:playState="playState" |
|||
:padding="padding" |
|||
@getMore="getMore" |
|||
@close="close" |
|||
@click="click" |
|||
@end="end" |
|||
></u-column-notice> |
|||
</block> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
/** |
|||
* noticeBar 滚动通知 |
|||
* @description 该组件用于滚动通告场景，有多种模式可供选择 |
|||
* @tutorial https://www.uviewui.com/components/noticeBar.html |
|||
* @property {Array} list 滚动内容，数组形式，见上方说明 |
|||
* @property {String} type 显示的主题（默认warning） |
|||
* @property {Boolean} volume-icon 是否显示小喇叭图标（默认true） |
|||
* @property {Boolean} more-icon 是否显示右边的向右箭头（默认false） |
|||
* @property {Boolean} close-icon 是否显示关闭图标（默认false） |
|||
* @property {Boolean} autoplay 是否自动播放（默认true） |
|||
* @property {String} color 文字颜色 |
|||
* @property {String Number} bg-color 背景颜色 |
|||
* @property {String} mode 滚动模式（默认horizontal） |
|||
* @property {Boolean} show 是否显示（默认true） |
|||
* @property {String Number} font-size 字体大小，单位rpx（默认28） |
|||
* @property {String Number} volume-size 左边喇叭的大小（默认34） |
|||
* @property {String Number} duration 滚动周期时长，只对步进模式有效，横向衔接模式无效，单位ms（默认2000） |
|||
* @property {String Number} speed 水平滚动时的滚动速度，即每秒移动多少距离，只对水平衔接方式有效，单位rpx（默认160） |
|||
* @property {String Number} font-size 字体大小，单位rpx（默认28） |
|||
* @property {Boolean} is-circular mode为horizontal时，指明是否水平衔接滚动（默认true） |
|||
* @property {String} play-state 播放状态，play - 播放，paused - 暂停（默认play） |
|||
* @property {String Number} border-radius 通知栏圆角（默认为0） |
|||
* @property {String Number} padding 内边距，字符串，与普通的内边距css写法一直（默认"18rpx 24rpx"） |
|||
* @property {Boolean} no-list-hidden 列表为空时，是否显示组件（默认false） |
|||
* @property {Boolean} disable-touch 是否禁止通过手动滑动切换通知，只有mode = vertical，或者mode = horizontal且is-circular = false时有效（默认true） |
|||
* @event {Function} click 点击通告文字触发，只有mode = vertical，或者mode = horizontal且is-circular = false时有效 |
|||
* @event {Function} close 点击右侧关闭图标触发 |
|||
* @event {Function} getMore 点击右侧向右图标触发 |
|||
* @event {Function} end 列表的消息每次被播放一个周期时触发，只有mode = vertical，或者mode = horizontal且is-circular = false时有效 |
|||
* @example <u-notice-bar :more-icon="true" :list="list"></u-notice-bar> |
|||
*/ |
|||
export default { |
|||
name: "u-notice-bar", |
|||
emits: ["click", "close", "getMore", "end"], |
|||
props: { |
|||
// 显示的内容，数组 |
|||
list: { |
|||
type: Array, |
|||
default() { |
|||
return []; |
|||
} |
|||
}, |
|||
// 显示的主题，success|error|primary|info|warning |
|||
type: { |
|||
type: String, |
|||
default: 'warning' |
|||
}, |
|||
// 是否显示左侧的音量图标 |
|||
volumeIcon: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 音量喇叭的大小 |
|||
volumeSize: { |
|||
type: [Number, String], |
|||
default: 34 |
|||
}, |
|||
// 是否显示右侧的右箭头图标 |
|||
moreIcon: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否显示右侧的关闭图标 |
|||
closeIcon: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否自动播放 |
|||
autoplay: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 文字颜色，各图标也会使用文字颜色 |
|||
color: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 背景颜色 |
|||
bgColor: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 滚动方向，horizontal-水平滚动，vertical-垂直滚动 |
|||
mode: { |
|||
type: String, |
|||
default: 'horizontal' |
|||
}, |
|||
// 是否显示 |
|||
show: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 字体大小，单位rpx |
|||
fontSize: { |
|||
type: [Number, String], |
|||
default: 28 |
|||
}, |
|||
// 滚动一个周期的时间长，单位ms |
|||
duration: { |
|||
type: [Number, String], |
|||
default: 2000 |
|||
}, |
|||
// 水平滚动时的滚动速度，即每秒滚动多少rpx，这有利于控制文字无论多少时，都能有一个恒定的速度 |
|||
speed: { |
|||
type: [Number, String], |
|||
default: 160 |
|||
}, |
|||
// 水平滚动时，是否采用衔接形式滚动 |
|||
// 水平衔接模式，采用的是swiper组件，水平滚动 |
|||
isCircular: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 播放状态，play-播放，paused-暂停 |
|||
playState: { |
|||
type: String, |
|||
default: 'play' |
|||
}, |
|||
// 是否禁止用手滑动切换 |
|||
// 目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序 |
|||
disableTouch: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 滚动通知设置圆角 |
|||
borderRadius: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
// 通知的边距 |
|||
padding: { |
|||
type: [Number, String], |
|||
default: '18rpx 24rpx' |
|||
}, |
|||
// list列表为空时，是否显示组件 |
|||
noListHidden: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}, |
|||
computed: { |
|||
// 如果设置show为false，或者设置了noListHidden为true，且list长度又为零的话，隐藏组件 |
|||
isShow() { |
|||
if(this.show == false || (this.noListHidden == true && this.list.length == 0)) return false; |
|||
else return true; |
|||
} |
|||
}, |
|||
methods: { |
|||
// 点击通告栏 |
|||
click(index) { |
|||
this.$emit('click', index); |
|||
}, |
|||
// 点击关闭按钮 |
|||
close() { |
|||
this.$emit('close'); |
|||
}, |
|||
// 点击更多箭头按钮 |
|||
getMore() { |
|||
this.$emit('getMore'); |
|||
}, |
|||
// 滚动一个周期结束，只对垂直，或者水平步进形式有效 |
|||
end() { |
|||
this.$emit('end'); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-notice-bar-wrap { |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.u-notice-bar { |
|||
padding: 18rpx 24rpx; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.u-direction-row { |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.u-left-icon { |
|||
@include vue-flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.u-notice-box { |
|||
flex: 1; |
|||
@include vue-flex; |
|||
overflow: hidden; |
|||
margin-left: 12rpx; |
|||
} |
|||
|
|||
.u-right-icon { |
|||
margin-left: 12rpx; |
|||
@include vue-flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.u-notice-content { |
|||
line-height: 1; |
|||
white-space: nowrap; |
|||
font-size: 26rpx; |
|||
animation: u-loop-animation 10s linear infinite both; |
|||
text-align: right; |
|||
// 这一句很重要，为了能让滚动左右连接起来 |
|||
padding-left: 100%; |
|||
} |
|||
|
|||
@keyframes u-loop-animation { |
|||
0% { |
|||
transform: translate3d(0, 0, 0); |
|||
} |
|||
|
|||
100% { |
|||
transform: translate3d(-100%, 0, 0); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,476 @@ |
|||
<!-- 步进器 --> |
|||
<template> |
|||
<view class="u-numberbox"> |
|||
<view |
|||
class="u-icon-minus" |
|||
@touchstart.prevent="btnTouchStart('minus')" |
|||
@touchend.stop.prevent="clearTimer" |
|||
:class="{ 'u-icon-disabled': disabled || inputVal <= min }" |
|||
:style="{ |
|||
background: bgColor, |
|||
height: inputHeight + 'rpx', |
|||
color: color, |
|||
fontSize: size + 'rpx', |
|||
minHeight: '1.4em' |
|||
}" |
|||
> |
|||
<view :style="'font-size:' + (Number(size) + 10) + 'rpx'" class="num-btn">－</view> |
|||
</view> |
|||
<input |
|||
:disabled="disabledInput || disabled" |
|||
:cursor-spacing="getCursorSpacing" |
|||
:class="{ 'u-input-disabled': disabled }" |
|||
v-model="inputVal" |
|||
class="u-number-input" |
|||
@blur="onBlur" |
|||
type="number" |
|||
:style="{ |
|||
color: color, |
|||
fontSize: size + 'rpx', |
|||
background: bgColor, |
|||
height: inputHeight + 'rpx', |
|||
width: inputWidth + 'rpx' |
|||
}" |
|||
/> |
|||
<view |
|||
class="u-icon-plus" |
|||
@touchstart.prevent="btnTouchStart('plus')" |
|||
@touchend.stop.prevent="clearTimer" |
|||
:class="{ 'u-icon-disabled': disabled || inputVal >= max }" |
|||
:style="{ |
|||
background: bgColor, |
|||
height: inputHeight + 'rpx', |
|||
color: color, |
|||
fontSize: size + 'rpx', |
|||
minHeight: '1.4em' |
|||
}" |
|||
> |
|||
<view :style="'font-size:' + (Number(size) + 10) + 'rpx'" class="num-btn">＋</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
/** |
|||
* numberBox 步进器 |
|||
* @description 该组件一般用于商城购物选择物品数量的场景。注意：该输入框只能输入大于或等于0的整数，不支持小数输入 |
|||
* @tutorial https://www.uviewui.com/components/numberBox.html |
|||
* @property {Number} value 输入框初始值（默认1） |
|||
* @property {String} bg-color 输入框和按钮的背景颜色（默认#F2F3F5） |
|||
* @property {Number} min 用户可输入的最小值（默认0） |
|||
* @property {Number} max 用户可输入的最大值（默认99999） |
|||
* @property {Number} step 步长，每次加或减的值（默认1） |
|||
* @property {Number} stepFirst 步进值，首次增加或最后减的值(默认step值和一致） |
|||
* @property {Boolean} disabled 是否禁用操作，禁用后无法加减或手动修改输入框的值（默认false） |
|||
* @property {Boolean} disabled-input 是否禁止输入框手动输入值（默认false） |
|||
* @property {Boolean} positive-integer 是否只能输入正整数（默认true） |
|||
* @property {String | Number} size 输入框文字和按钮字体大小，单位rpx（默认26） |
|||
* @property {String} color 输入框文字和加减按钮图标的颜色（默认#323233） |
|||
* @property {String | Number} input-width 输入框宽度，单位rpx（默认80） |
|||
* @property {String | Number} input-height 输入框和按钮的高度，单位rpx（默认50） |
|||
* @property {String | Number} index 事件回调时用以区分当前发生变化的是哪个输入框 |
|||
* @property {Boolean} long-press 是否开启长按连续递增或递减(默认true) |
|||
* @property {String | Number} press-time 开启长按触发后，每触发一次需要多久，单位ms(默认250) |
|||
* @property {String | Number} cursor-spacing 指定光标于键盘的距离，避免键盘遮挡输入框，单位rpx（默认200） |
|||
* @event {Function} change 输入框内容发生变化时触发，对象形式 |
|||
* @event {Function} blur 输入框失去焦点时触发，对象形式 |
|||
* @event {Function} minus 点击减少按钮时触发(按钮可点击情况下)，对象形式 |
|||
* @event {Function} plus 点击增加按钮时触发(按钮可点击情况下)，对象形式 |
|||
* @example <u-numberbox :min="1" :max="100"></u-numberbox> |
|||
*/ |
|||
export default { |
|||
name: "u-numberbox", |
|||
emits: ["update:modelValue", "input", "change", "blur", "plus", "minus"], |
|||
props: { |
|||
// 预显示的数字 |
|||
value: { |
|||
type: Number, |
|||
default: 1 |
|||
}, |
|||
modelValue: { |
|||
type: Number, |
|||
default: 1 |
|||
}, |
|||
// 背景颜色 |
|||
bgColor: { |
|||
type: String, |
|||
default: "#F2F3F5" |
|||
}, |
|||
// 最小值 |
|||
min: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
// 最大值 |
|||
max: { |
|||
type: Number, |
|||
default: 99999 |
|||
}, |
|||
// 步进值，每次加或减的值 |
|||
step: { |
|||
type: Number, |
|||
default: 1 |
|||
}, |
|||
// 步进值，首次增加或最后减的值 |
|||
stepFirst: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
// 是否只能输入 step 的倍数 |
|||
stepStrictly: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否禁用加减操作 |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// input的字体大小，单位rpx |
|||
size: { |
|||
type: [Number, String], |
|||
default: 26 |
|||
}, |
|||
// 加减图标的颜色 |
|||
color: { |
|||
type: String, |
|||
default: "#323233" |
|||
}, |
|||
// input宽度，单位rpx |
|||
inputWidth: { |
|||
type: [Number, String], |
|||
default: 80 |
|||
}, |
|||
// input高度，单位rpx |
|||
inputHeight: { |
|||
type: [Number, String], |
|||
default: 50 |
|||
}, |
|||
// index索引，用于列表中使用，让用户知道是哪个numberbox发生了变化，一般使用for循环出来的index值即可 |
|||
index: { |
|||
type: [Number, String], |
|||
default: "" |
|||
}, |
|||
// 是否禁用输入框，与disabled作用于输入框时，为OR的关系，即想要禁用输入框，又可以加减的话 |
|||
// 设置disabled为false，disabledInput为true即可 |
|||
disabledInput: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 输入框于键盘之间的距离 |
|||
cursorSpacing: { |
|||
type: [Number, String], |
|||
default: 100 |
|||
}, |
|||
// 是否开启长按连续递增或递减 |
|||
longPress: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 开启长按触发后，每触发一次需要多久 |
|||
pressTime: { |
|||
type: [Number, String], |
|||
default: 250 |
|||
}, |
|||
// 是否只能输入大于或等于0的整数(正整数) |
|||
positiveInteger: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}, |
|||
watch: { |
|||
valueCom(v1, v2) { |
|||
// 只有value的改变是来自外部的时候，才去同步inputVal的值，否则会造成循环错误 |
|||
if (!this.changeFromInner) { |
|||
this.inputVal = v1; |
|||
// 因为inputVal变化后，会触发this.handleChange()，在其中changeFromInner会再次被设置为true， |
|||
// 造成外面修改值，也导致被认为是内部修改的混乱，这里进行this.$nextTick延时，保证在运行周期的最后处 |
|||
// 将changeFromInner设置为false |
|||
this.$nextTick(function() { |
|||
this.changeFromInner = false; |
|||
}); |
|||
} |
|||
}, |
|||
inputVal(v1, v2) { |
|||
// 为了让用户能够删除所有输入值，重新输入内容，删除所有值后，内容为空字符串 |
|||
if (v1 == "") return; |
|||
let value = 0; |
|||
// 首先判断是否数值，并且在min和max之间，如果不是，使用原来值 |
|||
let tmp = this.isNumber(v1); |
|||
if (tmp && v1 >= this.min && v1 <= this.max) value = v1; |
|||
else value = v2; |
|||
// 判断是否只能输入大于等于0的整数 |
|||
if (this.positiveInteger) { |
|||
// 小于0，或者带有小数点， |
|||
if (v1 < 0 || String(v1).indexOf(".") !== -1) { |
|||
value = v2; |
|||
// 双向绑定input的值，必须要使用$nextTick修改显示的值 |
|||
this.$nextTick(() => { |
|||
this.inputVal = v2; |
|||
}); |
|||
} |
|||
} |
|||
// 发出change事件 |
|||
this.handleChange(value, "change"); |
|||
}, |
|||
min(v1) { |
|||
if (v1 !== undefined && v1 != "" && this.valueCom < v1) { |
|||
this.$emit("input", v1); |
|||
} |
|||
}, |
|||
max(v1) { |
|||
if (v1 !== undefined && v1 != "" && this.valueCom > v1) { |
|||
this.$emit("input", v1); |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
inputVal: 1, // 输入框中的值，不能直接使用props中的value，因为应该改变props的状态 |
|||
timer: null, // 用作长按的定时器 |
|||
changeFromInner: false, // 值发生变化，是来自内部还是外部 |
|||
innerChangeTimer: null, // 内部定时器 |
|||
}; |
|||
}, |
|||
created() { |
|||
this.inputVal = Number(this.valueCom); |
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
computed: { |
|||
getCursorSpacing() { |
|||
// 先将值转为px单位，再转为数值 |
|||
return Number(uni.upx2px(this.cursorSpacing)); |
|||
}, |
|||
valueCom(){ |
|||
// #ifndef VUE3 |
|||
return this.value; |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
return this.modelValue; |
|||
// #endif |
|||
} |
|||
}, |
|||
methods: { |
|||
// 点击退格键 |
|||
btnTouchStart(callback) { |
|||
// 先执行一遍方法，否则会造成松开手时，就执行了clearTimer，导致无法实现功能 |
|||
this[callback](); |
|||
// 如果没开启长按功能，直接返回 |
|||
if (!this.longPress) return; |
|||
clearInterval(this.timer); //再次清空定时器，防止重复注册定时器 |
|||
this.timer = null; |
|||
this.timer = setInterval(() => { |
|||
// 执行加或减函数 |
|||
this[callback](); |
|||
}, this.pressTime); |
|||
}, |
|||
clearTimer() { |
|||
this.$nextTick(() => { |
|||
clearInterval(this.timer); |
|||
this.timer = null; |
|||
}); |
|||
}, |
|||
minus() { |
|||
this.computeVal("minus"); |
|||
}, |
|||
plus() { |
|||
this.computeVal("plus"); |
|||
}, |
|||
// 为了保证小数相加减出现精度溢出的问题 |
|||
calcPlus(num1, num2) { |
|||
let baseNum, baseNum1, baseNum2; |
|||
try { |
|||
baseNum1 = num1.toString().split(".")[1].length; |
|||
} catch (e) { |
|||
baseNum1 = 0; |
|||
} |
|||
try { |
|||
baseNum2 = num2.toString().split(".")[1].length; |
|||
} catch (e) { |
|||
baseNum2 = 0; |
|||
} |
|||
baseNum = Math.pow(10, Math.max(baseNum1, baseNum2)); |
|||
let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2; //精度 |
|||
return ((num1 * baseNum + num2 * baseNum) / baseNum).toFixed(precision); |
|||
}, |
|||
// 为了保证小数相加减出现精度溢出的问题 |
|||
calcMinus(num1, num2) { |
|||
let baseNum, baseNum1, baseNum2; |
|||
try { |
|||
baseNum1 = num1.toString().split(".")[1].length; |
|||
} catch (e) { |
|||
baseNum1 = 0; |
|||
} |
|||
try { |
|||
baseNum2 = num2.toString().split(".")[1].length; |
|||
} catch (e) { |
|||
baseNum2 = 0; |
|||
} |
|||
baseNum = Math.pow(10, Math.max(baseNum1, baseNum2)); |
|||
let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2; |
|||
return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision); |
|||
}, |
|||
computeVal(type) { |
|||
uni.hideKeyboard(); |
|||
if (this.disabled) return; |
|||
let value = 0; |
|||
// 新增stepFirst开始 |
|||
// 减 |
|||
if (type === "minus") { |
|||
if (this.stepFirst > 0 && this.inputVal == this.stepFirst) { |
|||
value = this.min; |
|||
} else { |
|||
value = this.calcMinus(this.inputVal, this.step); |
|||
} |
|||
} else if (type === "plus") { |
|||
if (this.stepFirst > 0 && this.inputVal < this.stepFirst) { |
|||
value = this.stepFirst; |
|||
} else { |
|||
value = this.calcPlus(this.inputVal, this.step); |
|||
} |
|||
} |
|||
if (this.stepStrictly) { |
|||
let strictly = value % this.step; |
|||
if (strictly > 0) { |
|||
value -= strictly; |
|||
} |
|||
if (this.stepFirst > 0 && value > 0 && value < this.stepFirst) { |
|||
if (type === "minus") { |
|||
value = 0; |
|||
} else if (type === "plus") { |
|||
value = this.stepFirst + (this.step - (this.stepFirst % this.step)); |
|||
} |
|||
} |
|||
} |
|||
if (value > this.max) { |
|||
value = this.max; |
|||
} else if (value < this.min) { |
|||
value = this.min; |
|||
} |
|||
// 新增stepFirst结束 |
|||
this.inputVal = value; |
|||
this.handleChange(value, type); |
|||
}, |
|||
// 处理用户手动输入的情况 |
|||
onBlur(event) { |
|||
let val = 0; |
|||
let value = event.detail.value; |
|||
// 如果为非0-9数字组成，或者其第一位数值为0，直接让其等于min值 |
|||
// 这里不直接判断是否正整数，是因为用户传递的props min值可能为0 |
|||
if (!/(^\d+$)/.test(value) || value[0] == 0) val = this.min; |
|||
val = +value; |
|||
|
|||
// 新增stepFirst开始 |
|||
if (this.stepFirst > 0 && this.inputVal < this.stepFirst && this.inputVal > 0) { |
|||
val = this.stepFirst; |
|||
} |
|||
// 新增stepFirst结束 |
|||
if (this.stepStrictly) { |
|||
let strictly = val % this.step; |
|||
if (strictly > 0) { |
|||
val -= strictly; |
|||
} |
|||
if (this.stepFirst > 0 && val > 0 && val < this.stepFirst) { |
|||
val = this.stepFirst + (this.step - (this.stepFirst % this.step)); |
|||
} |
|||
} |
|||
if (val > this.max) { |
|||
val = this.max; |
|||
} else if (val < this.min) { |
|||
val = this.min; |
|||
} |
|||
this.$nextTick(() => { |
|||
this.inputVal = val; |
|||
}); |
|||
this.handleChange(val, "blur"); |
|||
}, |
|||
handleChange(value, type) { |
|||
if (this.disabled) return; |
|||
// 清除定时器，避免造成混乱 |
|||
if (this.innerChangeTimer) { |
|||
clearTimeout(this.innerChangeTimer); |
|||
this.innerChangeTimer = null; |
|||
} |
|||
// 发出input事件，修改通过v-model绑定的值，达到双向绑定的效果 |
|||
this.changeFromInner = true; |
|||
// 一定时间内，清除changeFromInner标记，否则内部值改变后 |
|||
// 外部通过程序修改value值，将会无效 |
|||
this.innerChangeTimer = setTimeout(() => { |
|||
this.changeFromInner = false; |
|||
}, 150); |
|||
this.$emit("input", Number(value)); |
|||
this.$emit("update:modelValue", Number(value)); |
|||
this.$emit(type, { |
|||
// 转为Number类型 |
|||
value: Number(value), |
|||
index: this.index |
|||
}); |
|||
}, |
|||
/** |
|||
* 验证十进制数字 |
|||
*/ |
|||
isNumber(value) { |
|||
return /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.u-numberbox { |
|||
display: inline-flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.u-number-input { |
|||
position: relative; |
|||
text-align: center; |
|||
padding: 0; |
|||
margin: 0 6rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.u-icon-plus, |
|||
.u-icon-minus { |
|||
width: 60rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.u-icon-plus { |
|||
border-radius: 0 8rpx 8rpx 0; |
|||
} |
|||
|
|||
.u-icon-minus { |
|||
border-radius: 8rpx 0 0 8rpx; |
|||
} |
|||
|
|||
.u-icon-disabled { |
|||
color: #c8c9cc !important; |
|||
background: #f7f8fa !important; |
|||
} |
|||
|
|||
.u-input-disabled { |
|||
color: #c8c9cc !important; |
|||
background-color: #f2f3f5 !important; |
|||
} |
|||
/* #ifdef H5 */ |
|||
.num-btn { |
|||
font-weight: 550; |
|||
position: relative; |
|||
top: -4rpx; |
|||
} |
|||
/* #endif */ |
|||
/* #ifndef H5 */ |
|||
.num-btn { |
|||
font-weight: 550; |
|||
position: relative; |
|||
top: 0rpx; |
|||
} |
|||
/* #endif */ |
|||
</style> |
|||
@ -0,0 +1,170 @@ |
|||
<template> |
|||
<view class="u-keyboard" @touchmove.stop.prevent> |
|||
<view class="u-keyboard-grids"> |
|||
<view |
|||
class="u-keyboard-grids-item" |
|||
:class="[btnBgGray(index) ? 'u-bg-gray' : '', index <= 2 ? 'u-border-top' : '', index < 9 ? 'u-border-bottom' : '', (index + 1) % 3 != 0 ? 'u-border-right' : '']" |
|||
:style="[itemStyle(index)]" |
|||
v-for="(item, index) in numList" |
|||
:key="index" |
|||
:hover-class="hoverClass(index)" |
|||
:hover-stay-time="100" |
|||
@touchstart.stop="keyboardClick(item)" |
|||
> |
|||
<view class="u-keyboard-grids-btn">{{ item }}</view> |
|||
</view> |
|||
<view class="u-keyboard-grids-item u-bg-gray" hover-class="u-hover-class" :hover-stay-time="100" @touchstart.stop="backspaceClick" |
|||
@touchend="clearTimer"> |
|||
<view class="u-keyboard-back u-keyboard-grids-btn"> |
|||
<u-icon name="backspace" :size="38" :bold="true"></u-icon> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "u-number-keyboard", |
|||
emits: ["change", "backspace"], |
|||
props: { |
|||
// 键盘的类型，number-数字键盘，card-身份证键盘 |
|||
mode: { |
|||
type: String, |
|||
default: 'number' |
|||
}, |
|||
// 是否显示键盘的"."符号 |
|||
dotEnabled: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否打乱键盘按键的顺序 |
|||
random: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否开启震动 |
|||
vibrate: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
backspace: 'backspace', // 退格键内容 |
|||
dot: '.', // 点 |
|||
timer: null, // 长按多次删除的事件监听 |
|||
cardX: 'X' // 身份证的X符号 |
|||
}; |
|||
}, |
|||
computed: { |
|||
// 键盘需要显示的内容 |
|||
numList() { |
|||
let tmp = []; |
|||
if (!this.dotEnabled && this.mode == 'number') { |
|||
if (!this.random) { |
|||
return [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]; |
|||
} else { |
|||
return this.$u.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]); |
|||
} |
|||
} else if (this.dotEnabled && this.mode == 'number') { |
|||
if (!this.random) { |
|||
return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0]; |
|||
} else { |
|||
return this.$u.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0]); |
|||
} |
|||
} else if (this.mode == 'card') { |
|||
if (!this.random) { |
|||
return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0]; |
|||
} else { |
|||
return this.$u.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0]); |
|||
} |
|||
} |
|||
}, |
|||
// 按键的样式，在非乱序&&数字键盘&&不显示点按钮时，index为9时，按键占位两个空间 |
|||
itemStyle() { |
|||
return index => { |
|||
let style = {}; |
|||
if (this.mode == 'number' && !this.dotEnabled && index == 9) style.flex = '0 0 66.6666666666%'; |
|||
return style; |
|||
}; |
|||
}, |
|||
// 是否让按键显示灰色，只在非乱序&&数字键盘&&且允许点按键的时候 |
|||
btnBgGray() { |
|||
return index => { |
|||
if (!this.random && index == 9 && (this.mode != 'number' || (this.mode == 'number' && this.dotEnabled))) return true; |
|||
else return false; |
|||
}; |
|||
}, |
|||
hoverClass() { |
|||
return index => { |
|||
if (!this.random && index == 9 && (this.mode == 'number' && this.dotEnabled || this.mode == 'card')) return 'u-hover-class'; |
|||
else return 'u-keyboard-hover'; |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
// 点击退格键 |
|||
backspaceClick() { |
|||
let count = 1; |
|||
this.$emit('backspace', count); |
|||
clearInterval(this.timer); //再次清空定时器，防止重复注册定时器 |
|||
this.timer = null; |
|||
this.timer = setInterval(() => { |
|||
count++; |
|||
this.$emit('backspace', count); |
|||
}, 250); |
|||
if(this.vibrate) uni.vibrateShort(); |
|||
}, |
|||
clearTimer() { |
|||
clearInterval(this.timer); |
|||
this.timer = null; |
|||
}, |
|||
// 获取键盘显示的内容 |
|||
keyboardClick(val) { |
|||
// 允许键盘显示点模式和触发非点按键时，将内容转为数字类型 |
|||
if (this.dotEnabled && val != this.dot && val != this.cardX) val = Number(val); |
|||
this.$emit('change', val); |
|||
if(this.vibrate) uni.vibrateShort(); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-keyboard { |
|||
position: relative; |
|||
z-index: 1003; |
|||
} |
|||
|
|||
.u-keyboard-grids { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.u-keyboard-grids-item { |
|||
flex: 0 0 33.3333333333%; |
|||
text-align: center; |
|||
font-size: 50rpx; |
|||
color: #333; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
height: 110rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.u-bg-gray { |
|||
background-color: #e7e6eb; |
|||
} |
|||
|
|||
.u-keyboard-back { |
|||
font-size: 36rpx; |
|||
} |
|||
|
|||
.u-keyboard-hover { |
|||
background-color: #e7e6eb; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,100 @@ |
|||
import cfg from './config.js' |
|||
var isLetter = c => (c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z'); |
|||
|
|||
function CssHandler(tagStyle) { |
|||
var styles = Object.assign(Object.create(null), cfg.userAgentStyles); |
|||
for (var item in tagStyle) |
|||
styles[item] = (styles[item] ? styles[item] + ';' : '') + tagStyle[item]; |
|||
this.styles = styles; |
|||
} |
|||
CssHandler.prototype.getStyle = function(data) { |
|||
this.styles = new parser(data, this.styles).parse(); |
|||
} |
|||
CssHandler.prototype.match = function(name, attrs) { |
|||
var tmp, matched = (tmp = this.styles[name]) ? tmp + ';' : ''; |
|||
if (attrs.class) { |
|||
var items = attrs.class.split(' '); |
|||
for (var i = 0, item; item = items[i]; i++) |
|||
if (tmp = this.styles['.' + item]) |
|||
matched += tmp + ';'; |
|||
} |
|||
if (tmp = this.styles['#' + attrs.id]) |
|||
matched += tmp + ';'; |
|||
return matched; |
|||
} |
|||
export default CssHandler; |
|||
|
|||
function parser(data, init) { |
|||
this.data = data; |
|||
this.floor = 0; |
|||
this.i = 0; |
|||
this.list = []; |
|||
this.res = init; |
|||
this.state = this.Space; |
|||
} |
|||
parser.prototype.parse = function() { |
|||
for (var c; c = this.data[this.i]; this.i++) |
|||
this.state(c); |
|||
return this.res; |
|||
} |
|||
parser.prototype.section = function() { |
|||
return this.data.substring(this.start, this.i); |
|||
} |
|||
// 状态机
|
|||
parser.prototype.Space = function(c) { |
|||
if (c == '.' || c == '#' || isLetter(c)) { |
|||
this.start = this.i; |
|||
this.state = this.Name; |
|||
} else if (c == '/' && this.data[this.i + 1] == '*') |
|||
this.Comment(); |
|||
else if (!cfg.blankChar[c] && c != ';') |
|||
this.state = this.Ignore; |
|||
} |
|||
parser.prototype.Comment = function() { |
|||
this.i = this.data.indexOf('*/', this.i) + 1; |
|||
if (!this.i) this.i = this.data.length; |
|||
this.state = this.Space; |
|||
} |
|||
parser.prototype.Ignore = function(c) { |
|||
if (c == '{') this.floor++; |
|||
else if (c == '}' && !--this.floor) { |
|||
this.list = []; |
|||
this.state = this.Space; |
|||
} |
|||
} |
|||
parser.prototype.Name = function(c) { |
|||
if (cfg.blankChar[c]) { |
|||
this.list.push(this.section()); |
|||
this.state = this.NameSpace; |
|||
} else if (c == '{') { |
|||
this.list.push(this.section()); |
|||
this.Content(); |
|||
} else if (c == ',') { |
|||
this.list.push(this.section()); |
|||
this.Comma(); |
|||
} else if (!isLetter(c) && (c < '0' || c > '9') && c != '-' && c != '_') |
|||
this.state = this.Ignore; |
|||
} |
|||
parser.prototype.NameSpace = function(c) { |
|||
if (c == '{') this.Content(); |
|||
else if (c == ',') this.Comma(); |
|||
else if (!cfg.blankChar[c]) this.state = this.Ignore; |
|||
} |
|||
parser.prototype.Comma = function() { |
|||
while (cfg.blankChar[this.data[++this.i]]); |
|||
if (this.data[this.i] == '{') this.Content(); |
|||
else { |
|||
this.start = this.i--; |
|||
this.state = this.Name; |
|||
} |
|||
} |
|||
parser.prototype.Content = function() { |
|||
this.start = ++this.i; |
|||
if ((this.i = this.data.indexOf('}', this.i)) == -1) this.i = this.data.length; |
|||
var content = this.section(); |
|||
for (var i = 0, item; item = this.list[i++];) |
|||
if (this.res[item]) this.res[item] += ';' + content; |
|||
else this.res[item] = content; |
|||
this.list = []; |
|||
this.state = this.Space; |
|||
} |
|||
@ -0,0 +1,581 @@ |
|||
/** |
|||
* html 解析器 |
|||
* @tutorial https://github.com/jin-yufeng/Parser
|
|||
* @version 20201029 |
|||
* @author JinYufeng |
|||
* @listens MIT |
|||
*/ |
|||
import cfg from './config.js' |
|||
import CssHandler from './CssHandler.js' |
|||
|
|||
var blankChar = cfg.blankChar |
|||
var windowWidth = uni.getSystemInfoSync().windowWidth; |
|||
var emoji; |
|||
|
|||
function MpHtmlParser(data, options = {}) { |
|||
this.attrs = {}; |
|||
this.CssHandler = new CssHandler(options.tagStyle, windowWidth); |
|||
this.data = data; |
|||
this.domain = options.domain; |
|||
this.DOM = []; |
|||
this.i = this.start = this.audioNum = this.imgNum = this.videoNum = 0; |
|||
options.prot = (this.domain || '').includes('://') ? this.domain.split('://')[0] : 'http'; |
|||
this.options = options; |
|||
this.state = this.Text; |
|||
this.STACK = []; |
|||
// 工具函数
|
|||
this.bubble = () => { |
|||
for (var i = this.STACK.length, item; item = this.STACK[--i];) { |
|||
if (cfg.richOnlyTags[item.name]) return false; |
|||
item.c = 1; |
|||
} |
|||
return true; |
|||
} |
|||
this.decode = (val, amp) => { |
|||
var i = -1, |
|||
j, en; |
|||
while (1) { |
|||
if ((i = val.indexOf('&', i + 1)) == -1) break; |
|||
if ((j = val.indexOf(';', i + 2)) == -1) break; |
|||
if (val[i + 1] == '#') { |
|||
en = parseInt((val[i + 2] == 'x' ? '0' : '') + val.substring(i + 2, j)); |
|||
if (!isNaN(en)) val = val.substr(0, i) + String.fromCharCode(en) + val.substr(j + 1); |
|||
} else { |
|||
en = val.substring(i + 1, j); |
|||
if (cfg.entities[en] || en == amp) |
|||
val = val.substr(0, i) + (cfg.entities[en] || '&') + val.substr(j + 1); |
|||
} |
|||
} |
|||
return val; |
|||
} |
|||
this.getUrl = url => { |
|||
if (url[0] == '/') { |
|||
if (url[1] == '/') url = this.options.prot + ':' + url; |
|||
else if (this.domain) url = this.domain + url; |
|||
} else if (this.domain && url.indexOf('data:') != 0 && !url.includes('://')) |
|||
url = this.domain + '/' + url; |
|||
return url; |
|||
} |
|||
this.isClose = () => this.data[this.i] == '>' || (this.data[this.i] == '/' && this.data[this.i + 1] == '>'); |
|||
this.section = () => this.data.substring(this.start, this.i); |
|||
this.parent = () => this.STACK[this.STACK.length - 1]; |
|||
this.siblings = () => this.STACK.length ? this.parent().children : this.DOM; |
|||
} |
|||
MpHtmlParser.prototype.parse = function() { |
|||
if (emoji) this.data = emoji.parseEmoji(this.data); |
|||
for (var c; c = this.data[this.i]; this.i++) |
|||
this.state(c); |
|||
if (this.state == this.Text) this.setText(); |
|||
while (this.STACK.length) this.popNode(this.STACK.pop()); |
|||
return this.DOM; |
|||
} |
|||
// 设置属性
|
|||
MpHtmlParser.prototype.setAttr = function() { |
|||
var name = this.attrName.toLowerCase(), |
|||
val = this.attrVal; |
|||
if (cfg.boolAttrs[name]) this.attrs[name] = 'T'; |
|||
else if (val) { |
|||
if (name == 'src' || (name == 'data-src' && !this.attrs.src)) this.attrs.src = this.getUrl(this.decode(val, 'amp')); |
|||
else if (name == 'href' || name == 'style') this.attrs[name] = this.decode(val, 'amp'); |
|||
else if (name.substr(0, 5) != 'data-') this.attrs[name] = val; |
|||
} |
|||
this.attrVal = ''; |
|||
while (blankChar[this.data[this.i]]) this.i++; |
|||
if (this.isClose()) this.setNode(); |
|||
else { |
|||
this.start = this.i; |
|||
this.state = this.AttrName; |
|||
} |
|||
} |
|||
// 设置文本节点
|
|||
MpHtmlParser.prototype.setText = function() { |
|||
var back, text = this.section(); |
|||
if (!text) return; |
|||
text = (cfg.onText && cfg.onText(text, () => back = true)) || text; |
|||
if (back) { |
|||
this.data = this.data.substr(0, this.start) + text + this.data.substr(this.i); |
|||
let j = this.start + text.length; |
|||
for (this.i = this.start; this.i < j; this.i++) this.state(this.data[this.i]); |
|||
return; |
|||
} |
|||
if (!this.pre) { |
|||
// 合并空白符
|
|||
var flag, tmp = []; |
|||
for (let i = text.length, c; c = text[--i];) |
|||
if (!blankChar[c]) { |
|||
tmp.unshift(c); |
|||
if (!flag) flag = 1; |
|||
} else { |
|||
if (tmp[0] != ' ') tmp.unshift(' '); |
|||
if (c == '\n' && flag == void 0) flag = 0; |
|||
} |
|||
if (flag == 0) return; |
|||
text = tmp.join(''); |
|||
} |
|||
this.siblings().push({ |
|||
type: 'text', |
|||
text: this.decode(text) |
|||
}); |
|||
} |
|||
// 设置元素节点
|
|||
MpHtmlParser.prototype.setNode = function() { |
|||
var node = { |
|||
name: this.tagName.toLowerCase(), |
|||
attrs: this.attrs |
|||
}, |
|||
close = cfg.selfClosingTags[node.name]; |
|||
if (this.options.nodes.length) node.type = 'node'; |
|||
this.attrs = {}; |
|||
if (!cfg.ignoreTags[node.name]) { |
|||
// 处理属性
|
|||
var attrs = node.attrs, |
|||
style = this.CssHandler.match(node.name, attrs, node) + (attrs.style || ''), |
|||
styleObj = {}; |
|||
if (attrs.id) { |
|||
if (this.options.compress & 1) attrs.id = void 0; |
|||
else if (this.options.useAnchor) this.bubble(); |
|||
} |
|||
if ((this.options.compress & 2) && attrs.class) attrs.class = void 0; |
|||
switch (node.name) { |
|||
case 'a': |
|||
case 'ad': // #ifdef APP-PLUS
|
|||
case 'iframe': |
|||
// #endif
|
|||
this.bubble(); |
|||
break; |
|||
case 'font': |
|||
if (attrs.color) { |
|||
styleObj['color'] = attrs.color; |
|||
attrs.color = void 0; |
|||
} |
|||
if (attrs.face) { |
|||
styleObj['font-family'] = attrs.face; |
|||
attrs.face = void 0; |
|||
} |
|||
if (attrs.size) { |
|||
var size = parseInt(attrs.size); |
|||
if (size < 1) size = 1; |
|||
else if (size > 7) size = 7; |
|||
var map = ['xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large']; |
|||
styleObj['font-size'] = map[size - 1]; |
|||
attrs.size = void 0; |
|||
} |
|||
break; |
|||
case 'embed': |
|||
// #ifndef APP-PLUS
|
|||
var src = node.attrs.src || '', |
|||
type = node.attrs.type || ''; |
|||
if (type.includes('video') || src.includes('.mp4') || src.includes('.3gp') || src.includes('.m3u8')) |
|||
node.name = 'video'; |
|||
else if (type.includes('audio') || src.includes('.m4a') || src.includes('.wav') || src.includes('.mp3') || src.includes( |
|||
'.aac')) |
|||
node.name = 'audio'; |
|||
else break; |
|||
if (node.attrs.autostart) |
|||
node.attrs.autoplay = 'T'; |
|||
node.attrs.controls = 'T'; |
|||
// #endif
|
|||
// #ifdef APP-PLUS
|
|||
this.bubble(); |
|||
break; |
|||
// #endif
|
|||
case 'video': |
|||
case 'audio': |
|||
if (!attrs.id) attrs.id = node.name + (++this[`${node.name}Num`]); |
|||
else this[`${node.name}Num`]++; |
|||
if (node.name == 'video') { |
|||
if (this.videoNum > 3) |
|||
node.lazyLoad = 1; |
|||
if (attrs.width) { |
|||
styleObj.width = parseFloat(attrs.width) + (attrs.width.includes('%') ? '%' : 'px'); |
|||
attrs.width = void 0; |
|||
} |
|||
if (attrs.height) { |
|||
styleObj.height = parseFloat(attrs.height) + (attrs.height.includes('%') ? '%' : 'px'); |
|||
attrs.height = void 0; |
|||
} |
|||
} |
|||
if (!attrs.controls && !attrs.autoplay) attrs.controls = 'T'; |
|||
attrs.source = []; |
|||
if (attrs.src) { |
|||
attrs.source.push(attrs.src); |
|||
attrs.src = void 0; |
|||
} |
|||
this.bubble(); |
|||
break; |
|||
case 'td': |
|||
case 'th': |
|||
if (attrs.colspan || attrs.rowspan) |
|||
for (var k = this.STACK.length, item; item = this.STACK[--k];) |
|||
if (item.name == 'table') { |
|||
item.flag = 1; |
|||
break; |
|||
} |
|||
} |
|||
if (attrs.align) { |
|||
if (node.name == 'table') { |
|||
if (attrs.align == 'center') styleObj['margin-inline-start'] = styleObj['margin-inline-end'] = 'auto'; |
|||
else styleObj['float'] = attrs.align; |
|||
} else styleObj['text-align'] = attrs.align; |
|||
attrs.align = void 0; |
|||
} |
|||
// 压缩 style
|
|||
var styles = style.split(';'); |
|||
style = ''; |
|||
for (var i = 0, len = styles.length; i < len; i++) { |
|||
var info = styles[i].split(':'); |
|||
if (info.length < 2) continue; |
|||
let key = info[0].trim().toLowerCase(), |
|||
value = info.slice(1).join(':').trim(); |
|||
if (value[0] == '-' || value.includes('safe')) |
|||
style += `;${key}:${value}`; |
|||
else if (!styleObj[key] || value.includes('import') || !styleObj[key].includes('import')) |
|||
styleObj[key] = value; |
|||
} |
|||
if (node.name == 'img') { |
|||
if (attrs.src && !attrs.ignore) { |
|||
if (this.bubble()) |
|||
attrs.i = (this.imgNum++).toString(); |
|||
else attrs.ignore = 'T'; |
|||
} |
|||
if (attrs.ignore) { |
|||
style += ';-webkit-touch-callout:none'; |
|||
styleObj['max-width'] = '100%'; |
|||
} |
|||
var width; |
|||
if (styleObj.width) width = styleObj.width; |
|||
else if (attrs.width) width = attrs.width.includes('%') ? attrs.width : parseFloat(attrs.width) + 'px'; |
|||
if (width) { |
|||
styleObj.width = width; |
|||
attrs.width = '100%'; |
|||
if (parseInt(width) > windowWidth) { |
|||
styleObj.height = ''; |
|||
if (attrs.height) attrs.height = void 0; |
|||
} |
|||
} |
|||
if (styleObj.height) { |
|||
attrs.height = styleObj.height; |
|||
styleObj.height = ''; |
|||
} else if (attrs.height && !attrs.height.includes('%')) |
|||
attrs.height = parseFloat(attrs.height) + 'px'; |
|||
} |
|||
for (var key in styleObj) { |
|||
var value = styleObj[key]; |
|||
if (!value) continue; |
|||
if (key.includes('flex') || key == 'order' || key == 'self-align') node.c = 1; |
|||
// 填充链接
|
|||
if (value.includes('url')) { |
|||
var j = value.indexOf('('); |
|||
if (j++ != -1) { |
|||
while (value[j] == '"' || value[j] == "'" || blankChar[value[j]]) j++; |
|||
value = value.substr(0, j) + this.getUrl(value.substr(j)); |
|||
} |
|||
} |
|||
// 转换 rpx
|
|||
else if (value.includes('rpx')) |
|||
value = value.replace(/[0-9.]+\s*rpx/g, $ => parseFloat($) * windowWidth / 750 + 'px'); |
|||
else if (key == 'white-space' && value.includes('pre') && !close) |
|||
this.pre = node.pre = true; |
|||
style += `;${key}:${value}`; |
|||
} |
|||
style = style.substr(1); |
|||
if (style) attrs.style = style; |
|||
if (!close) { |
|||
node.children = []; |
|||
if (node.name == 'pre' && cfg.highlight) { |
|||
this.remove(node); |
|||
this.pre = node.pre = true; |
|||
} |
|||
this.siblings().push(node); |
|||
this.STACK.push(node); |
|||
} else if (!cfg.filter || cfg.filter(node, this) != false) |
|||
this.siblings().push(node); |
|||
} else { |
|||
if (!close) this.remove(node); |
|||
else if (node.name == 'source') { |
|||
var parent = this.parent(); |
|||
if (parent && (parent.name == 'video' || parent.name == 'audio') && node.attrs.src) |
|||
parent.attrs.source.push(node.attrs.src); |
|||
} else if (node.name == 'base' && !this.domain) this.domain = node.attrs.href; |
|||
} |
|||
if (this.data[this.i] == '/') this.i++; |
|||
this.start = this.i + 1; |
|||
this.state = this.Text; |
|||
} |
|||
// 移除标签
|
|||
MpHtmlParser.prototype.remove = function(node) { |
|||
var name = node.name, |
|||
j = this.i; |
|||
// 处理 svg
|
|||
var handleSvg = () => { |
|||
var src = this.data.substring(j, this.i + 1); |
|||
node.attrs.xmlns = 'http://www.w3.org/2000/svg'; |
|||
for (var key in node.attrs) { |
|||
if (key == 'viewbox') src = ` viewBox="${node.attrs.viewbox}"` + src; |
|||
else if (key != 'style') src = ` ${key}="${node.attrs[key]}"` + src; |
|||
} |
|||
src = '<svg' + src; |
|||
var parent = this.parent(); |
|||
if (node.attrs.width == '100%' && parent && (parent.attrs.style || '').includes('inline')) |
|||
parent.attrs.style = 'width:300px;max-width:100%;' + parent.attrs.style; |
|||
this.siblings().push({ |
|||
name: 'img', |
|||
attrs: { |
|||
src: 'data:image/svg+xml;utf8,' + src.replace(/#/g, '%23'), |
|||
style: node.attrs.style, |
|||
ignore: 'T' |
|||
} |
|||
}) |
|||
} |
|||
if (node.name == 'svg' && this.data[j] == '/') return handleSvg(this.i++); |
|||
while (1) { |
|||
if ((this.i = this.data.indexOf('</', this.i + 1)) == -1) { |
|||
if (name == 'pre' || name == 'svg') this.i = j; |
|||
else this.i = this.data.length; |
|||
return; |
|||
} |
|||
this.start = (this.i += 2); |
|||
while (!blankChar[this.data[this.i]] && !this.isClose()) this.i++; |
|||
if (this.section().toLowerCase() == name) { |
|||
// 代码块高亮
|
|||
if (name == 'pre') { |
|||
this.data = this.data.substr(0, j + 1) + cfg.highlight(this.data.substring(j + 1, this.i - 5), node.attrs) + this.data |
|||
.substr(this.i - 5); |
|||
return this.i = j; |
|||
} else if (name == 'style') |
|||
this.CssHandler.getStyle(this.data.substring(j + 1, this.i - 7)); |
|||
else if (name == 'title') |
|||
this.DOM.title = this.data.substring(j + 1, this.i - 7); |
|||
if ((this.i = this.data.indexOf('>', this.i)) == -1) this.i = this.data.length; |
|||
if (name == 'svg') handleSvg(); |
|||
return; |
|||
} |
|||
} |
|||
} |
|||
// 节点出栈处理
|
|||
MpHtmlParser.prototype.popNode = function(node) { |
|||
// 空白符处理
|
|||
if (node.pre) { |
|||
node.pre = this.pre = void 0; |
|||
for (let i = this.STACK.length; i--;) |
|||
if (this.STACK[i].pre) |
|||
this.pre = true; |
|||
} |
|||
var siblings = this.siblings(), |
|||
len = siblings.length, |
|||
childs = node.children; |
|||
if (node.name == 'head' || (cfg.filter && cfg.filter(node, this) == false)) |
|||
return siblings.pop(); |
|||
var attrs = node.attrs; |
|||
// 替换一些标签名
|
|||
if (cfg.blockTags[node.name]) node.name = 'div'; |
|||
else if (!cfg.trustTags[node.name]) node.name = 'span'; |
|||
// 处理列表
|
|||
if (node.c && (node.name == 'ul' || node.name == 'ol')) { |
|||
if ((node.attrs.style || '').includes('list-style:none')) { |
|||
for (let i = 0, child; child = childs[i++];) |
|||
if (child.name == 'li') |
|||
child.name = 'div'; |
|||
} else if (node.name == 'ul') { |
|||
var floor = 1; |
|||
for (let i = this.STACK.length; i--;) |
|||
if (this.STACK[i].name == 'ul') floor++; |
|||
if (floor != 1) |
|||
for (let i = childs.length; i--;) |
|||
childs[i].floor = floor; |
|||
} else { |
|||
for (let i = 0, num = 1, child; child = childs[i++];) |
|||
if (child.name == 'li') { |
|||
child.type = 'ol'; |
|||
child.num = ((num, type) => { |
|||
if (type == 'a') return String.fromCharCode(97 + (num - 1) % 26); |
|||
if (type == 'A') return String.fromCharCode(65 + (num - 1) % 26); |
|||
if (type == 'i' || type == 'I') { |
|||
num = (num - 1) % 99 + 1; |
|||
var one = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX'], |
|||
ten = ['X', 'XX', 'XXX', 'XL', 'L', 'LX', 'LXX', 'LXXX', 'XC'], |
|||
res = (ten[Math.floor(num / 10) - 1] || '') + (one[num % 10 - 1] || ''); |
|||
if (type == 'i') return res.toLowerCase(); |
|||
return res; |
|||
} |
|||
return num; |
|||
})(num++, attrs.type) + '.'; |
|||
} |
|||
} |
|||
} |
|||
// 处理表格
|
|||
if (node.name == 'table') { |
|||
var padding = parseFloat(attrs.cellpadding), |
|||
spacing = parseFloat(attrs.cellspacing), |
|||
border = parseFloat(attrs.border); |
|||
if (node.c) { |
|||
if (isNaN(padding)) padding = 2; |
|||
if (isNaN(spacing)) spacing = 2; |
|||
} |
|||
if (border) attrs.style = `border:${border}px solid gray;${attrs.style || ''}`; |
|||
if (node.flag && node.c) { |
|||
// 有 colspan 或 rowspan 且含有链接的表格转为 grid 布局实现
|
|||
attrs.style = `${attrs.style || ''};${spacing ? `;grid-gap:${spacing}px` : ';border-left:0;border-top:0'}`; |
|||
var row = 1, |
|||
col = 1, |
|||
colNum, |
|||
trs = [], |
|||
children = [], |
|||
map = {}; |
|||
(function f(ns) { |
|||
for (var i = 0; i < ns.length; i++) { |
|||
if (ns[i].name == 'tr') trs.push(ns[i]); |
|||
else f(ns[i].children || []); |
|||
} |
|||
})(node.children) |
|||
for (let i = 0; i < trs.length; i++) { |
|||
for (let j = 0, td; td = trs[i].children[j]; j++) { |
|||
if (td.name == 'td' || td.name == 'th') { |
|||
while (map[row + '.' + col]) col++; |
|||
var cell = { |
|||
name: 'div', |
|||
c: 1, |
|||
attrs: { |
|||
style: (td.attrs.style || '') + (border ? `;border:${border}px solid gray` + (spacing ? '' : |
|||
';border-right:0;border-bottom:0') : '') + (padding ? `;padding:${padding}px` : '') |
|||
}, |
|||
children: td.children |
|||
} |
|||
if (td.attrs.colspan) { |
|||
cell.attrs.style += ';grid-column-start:' + col + ';grid-column-end:' + (col + parseInt(td.attrs.colspan)); |
|||
if (!td.attrs.rowspan) cell.attrs.style += ';grid-row-start:' + row + ';grid-row-end:' + (row + 1); |
|||
col += parseInt(td.attrs.colspan) - 1; |
|||
} |
|||
if (td.attrs.rowspan) { |
|||
cell.attrs.style += ';grid-row-start:' + row + ';grid-row-end:' + (row + parseInt(td.attrs.rowspan)); |
|||
if (!td.attrs.colspan) cell.attrs.style += ';grid-column-start:' + col + ';grid-column-end:' + (col + 1); |
|||
for (var k = 1; k < td.attrs.rowspan; k++) map[(row + k) + '.' + col] = 1; |
|||
} |
|||
children.push(cell); |
|||
col++; |
|||
} |
|||
} |
|||
if (!colNum) { |
|||
colNum = col - 1; |
|||
attrs.style += `;grid-template-columns:repeat(${colNum},auto)` |
|||
} |
|||
col = 1; |
|||
row++; |
|||
} |
|||
node.children = children; |
|||
} else { |
|||
attrs.style = `border-spacing:${spacing}px;${attrs.style || ''}`; |
|||
if (border || padding) |
|||
(function f(ns) { |
|||
for (var i = 0, n; n = ns[i]; i++) { |
|||
if (n.name == 'th' || n.name == 'td') { |
|||
if (border) n.attrs.style = `border:${border}px solid gray;${n.attrs.style || ''}`; |
|||
if (padding) n.attrs.style = `padding:${padding}px;${n.attrs.style || ''}`; |
|||
} else f(n.children || []); |
|||
} |
|||
})(childs) |
|||
} |
|||
if (this.options.autoscroll) { |
|||
var table = Object.assign({}, node); |
|||
node.name = 'div'; |
|||
node.attrs = { |
|||
style: 'overflow:scroll' |
|||
} |
|||
node.children = [table]; |
|||
} |
|||
} |
|||
this.CssHandler.pop && this.CssHandler.pop(node); |
|||
// 自动压缩
|
|||
if (node.name == 'div' && !Object.keys(attrs).length && childs.length == 1 && childs[0].name == 'div') |
|||
siblings[len - 1] = childs[0]; |
|||
} |
|||
// 状态机
|
|||
MpHtmlParser.prototype.Text = function(c) { |
|||
if (c == '<') { |
|||
var next = this.data[this.i + 1], |
|||
isLetter = c => (c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z'); |
|||
if (isLetter(next)) { |
|||
this.setText(); |
|||
this.start = this.i + 1; |
|||
this.state = this.TagName; |
|||
} else if (next == '/') { |
|||
this.setText(); |
|||
if (isLetter(this.data[++this.i + 1])) { |
|||
this.start = this.i + 1; |
|||
this.state = this.EndTag; |
|||
} else this.Comment(); |
|||
} else if (next == '!' || next == '?') { |
|||
this.setText(); |
|||
this.Comment(); |
|||
} |
|||
} |
|||
} |
|||
MpHtmlParser.prototype.Comment = function() { |
|||
var key; |
|||
if (this.data.substring(this.i + 2, this.i + 4) == '--') key = '-->'; |
|||
else if (this.data.substring(this.i + 2, this.i + 9) == '[CDATA[') key = ']]>'; |
|||
else key = '>'; |
|||
if ((this.i = this.data.indexOf(key, this.i + 2)) == -1) this.i = this.data.length; |
|||
else this.i += key.length - 1; |
|||
this.start = this.i + 1; |
|||
this.state = this.Text; |
|||
} |
|||
MpHtmlParser.prototype.TagName = function(c) { |
|||
if (blankChar[c]) { |
|||
this.tagName = this.section(); |
|||
while (blankChar[this.data[this.i]]) this.i++; |
|||
if (this.isClose()) this.setNode(); |
|||
else { |
|||
this.start = this.i; |
|||
this.state = this.AttrName; |
|||
} |
|||
} else if (this.isClose()) { |
|||
this.tagName = this.section(); |
|||
this.setNode(); |
|||
} |
|||
} |
|||
MpHtmlParser.prototype.AttrName = function(c) { |
|||
if (c == '=' || blankChar[c] || this.isClose()) { |
|||
this.attrName = this.section(); |
|||
if (blankChar[c]) |
|||
while (blankChar[this.data[++this.i]]); |
|||
if (this.data[this.i] == '=') { |
|||
while (blankChar[this.data[++this.i]]); |
|||
this.start = this.i--; |
|||
this.state = this.AttrValue; |
|||
} else this.setAttr(); |
|||
} |
|||
} |
|||
MpHtmlParser.prototype.AttrValue = function(c) { |
|||
if (c == '"' || c == "'") { |
|||
this.start++; |
|||
if ((this.i = this.data.indexOf(c, this.i + 1)) == -1) return this.i = this.data.length; |
|||
this.attrVal = this.section(); |
|||
this.i++; |
|||
} else { |
|||
for (; !blankChar[this.data[this.i]] && !this.isClose(); this.i++); |
|||
this.attrVal = this.section(); |
|||
} |
|||
this.setAttr(); |
|||
} |
|||
MpHtmlParser.prototype.EndTag = function(c) { |
|||
if (blankChar[c] || c == '>' || c == '/') { |
|||
var name = this.section().toLowerCase(); |
|||
for (var i = this.STACK.length; i--;) |
|||
if (this.STACK[i].name == name) break; |
|||
if (i != -1) { |
|||
var node; |
|||
while ((node = this.STACK.pop()).name != name) this.popNode(node); |
|||
this.popNode(node); |
|||
} else if (name == 'p' || name == 'br') |
|||
this.siblings().push({ |
|||
name, |
|||
attrs: {} |
|||
}); |
|||
this.i = this.data.indexOf('>', this.i); |
|||
this.start = this.i + 1; |
|||
if (this.i == -1) this.i = this.data.length; |
|||
else this.state = this.Text; |
|||
} |
|||
} |
|||
export default MpHtmlParser; |
|||
@ -0,0 +1,80 @@ |
|||
/* 配置文件 */ |
|||
var cfg = { |
|||
// 出错占位图
|
|||
errorImg: null, |
|||
// 过滤器函数
|
|||
filter: null, |
|||
// 代码高亮函数
|
|||
highlight: null, |
|||
// 文本处理函数
|
|||
onText: null, |
|||
// 实体编码列表
|
|||
entities: { |
|||
quot: '"', |
|||
apos: "'", |
|||
semi: ';', |
|||
nbsp: '\xA0', |
|||
ensp: '\u2002', |
|||
emsp: '\u2003', |
|||
ndash: '–', |
|||
mdash: '—', |
|||
middot: '·', |
|||
lsquo: '‘', |
|||
rsquo: '’', |
|||
ldquo: '“', |
|||
rdquo: '”', |
|||
bull: '•', |
|||
hellip: '…' |
|||
}, |
|||
blankChar: makeMap(' ,\xA0,\t,\r,\n,\f'), |
|||
boolAttrs: makeMap('allowfullscreen,autoplay,autostart,controls,ignore,loop,muted'), |
|||
// 块级标签，将被转为 div
|
|||
blockTags: makeMap('address,article,aside,body,caption,center,cite,footer,header,html,nav,pre,section'), |
|||
// 将被移除的标签
|
|||
ignoreTags: makeMap('area,base,canvas,frame,iframe,input,link,map,meta,param,script,source,style,svg,textarea,title,track,wbr'), |
|||
// 只能被 rich-text 显示的标签
|
|||
richOnlyTags: makeMap('a,colgroup,fieldset,legend'), |
|||
// 自闭合的标签
|
|||
selfClosingTags: makeMap('area,base,br,col,circle,ellipse,embed,frame,hr,img,input,line,link,meta,param,path,polygon,rect,source,track,use,wbr'), |
|||
// 信任的标签
|
|||
trustTags: makeMap('a,abbr,ad,audio,b,blockquote,br,code,col,colgroup,dd,del,dl,dt,div,em,fieldset,h1,h2,h3,h4,h5,h6,hr,i,img,ins,label,legend,li,ol,p,q,source,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,title,ul,video'), |
|||
// 默认的标签样式
|
|||
userAgentStyles: { |
|||
address: 'font-style:italic', |
|||
big: 'display:inline;font-size:1.2em', |
|||
blockquote: 'background-color:#f6f6f6;border-left:3px solid #dbdbdb;color:#6c6c6c;padding:5px 0 5px 10px', |
|||
caption: 'display:table-caption;text-align:center', |
|||
center: 'text-align:center', |
|||
cite: 'font-style:italic', |
|||
dd: 'margin-left:40px', |
|||
mark: 'background-color:yellow', |
|||
pre: 'font-family:monospace;white-space:pre;overflow:scroll', |
|||
s: 'text-decoration:line-through', |
|||
small: 'display:inline;font-size:0.8em', |
|||
u: 'text-decoration:underline' |
|||
} |
|||
} |
|||
|
|||
function makeMap(str) { |
|||
var map = Object.create(null), |
|||
list = str.split(','); |
|||
for (var i = list.length; i--;) |
|||
map[list[i]] = true; |
|||
return map; |
|||
} |
|||
|
|||
// #ifdef MP-WEIXIN
|
|||
if (wx.canIUse('editor')) { |
|||
cfg.blockTags.pre = void 0; |
|||
cfg.ignoreTags.rp = true; |
|||
Object.assign(cfg.richOnlyTags, makeMap('bdi,bdo,caption,rt,ruby')); |
|||
Object.assign(cfg.trustTags, makeMap('bdi,bdo,caption,pre,rt,ruby')); |
|||
} |
|||
// #endif
|
|||
|
|||
// #ifdef APP-PLUS
|
|||
cfg.ignoreTags.iframe = void 0; |
|||
Object.assign(cfg.trustTags, makeMap('embed,iframe')); |
|||
// #endif
|
|||
|
|||
export default cfg; |
|||
@ -0,0 +1,537 @@ |
|||
<template> |
|||
<view :class="'interlayer '+(c||'')" :style="s"> |
|||
<block v-for="(n, i) in nodes" v-bind:key="i"> |
|||
<!--图片--> |
|||
<view v-if="n.name=='img'" :class="'_img '+n.attrs.class" :style="n.attrs.style" :data-attrs="n.attrs" @tap.stop="imgtap"> |
|||
<rich-text v-if="ctrl[i]!=0" :nodes="[{attrs:{src:loading&&(ctrl[i]||0)<2?loading:(lazyLoad&&!ctrl[i]?placeholder:(ctrl[i]==3?errorImg:n.attrs.src||'')),alt:n.attrs.alt||'',width:n.attrs.width||'',style:'-webkit-touch-callout:none;max-width:100%;display:block'+(n.attrs.height?';height:'+n.attrs.height:'')},name:'img'}]" /> |
|||
<image class="_image" :src="lazyLoad&&!ctrl[i]?placeholder:n.attrs.src" :lazy-load="lazyLoad" |
|||
:show-menu-by-longpress="!n.attrs.ignore" :data-i="i" :data-index="n.attrs.i" data-source="img" @load="loadImg" |
|||
@error="error" /> |
|||
</view> |
|||
<!--文本--> |
|||
<text v-else-if="n.type=='text'" decode>{{n.text}}</text> |
|||
<!--#ifndef MP-BAIDU--> |
|||
<text v-else-if="n.name=='br'">\n</text> |
|||
<!--#endif--> |
|||
<!--视频--> |
|||
<view v-else-if="((n.lazyLoad&&!n.attrs.autoplay)||(n.name=='video'&&!loadVideo))&&ctrl[i]==undefined" :id="n.attrs.id" |
|||
:class="'_video '+(n.attrs.class||'')" :style="n.attrs.style" :data-i="i" @tap.stop="_loadVideo" /> |
|||
<video v-else-if="n.name=='video'" :id="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :autoplay="n.attrs.autoplay||ctrl[i]==0" |
|||
:controls="n.attrs.controls" :loop="n.attrs.loop" :muted="n.attrs.muted" :poster="n.attrs.poster" :src="n.attrs.source[ctrl[i]||0]" |
|||
:unit-id="n.attrs['unit-id']" :data-id="n.attrs.id" :data-i="i" data-source="video" @error="error" @play="play" /> |
|||
<!--音频--> |
|||
<audio v-else-if="n.name=='audio'" :ref="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :author="n.attrs.author" |
|||
:autoplay="n.attrs.autoplay" :controls="n.attrs.controls" :loop="n.attrs.loop" :name="n.attrs.name" :poster="n.attrs.poster" |
|||
:src="n.attrs.source[ctrl[i]||0]" :data-i="i" :data-id="n.attrs.id" data-source="audio" @error.native="error" |
|||
@play.native="play" /> |
|||
<!--链接--> |
|||
<view v-else-if="n.name=='a'" :id="n.attrs.id" :class="'_a '+(n.attrs.class||'')" hover-class="_hover" :style="n.attrs.style" |
|||
:data-attrs="n.attrs" @tap.stop="linkpress"> |
|||
<trees class="_span" c="_span" :nodes="n.children" /> |
|||
</view> |
|||
<!--广告--> |
|||
<!--<ad v-else-if="n.name=='ad'" :class="n.attrs.class" :style="n.attrs.style" :unit-id="n.attrs['unit-id']" :appid="n.attrs.appid" :apid="n.attrs.apid" :type="n.attrs.type" :adpid="n.attrs.adpid" data-source="ad" @error="error" />--> |
|||
<!--列表--> |
|||
<view v-else-if="n.name=='li'" :id="n.attrs.id" :class="n.attrs.class" :style="(n.attrs.style||'')+';display:flex;flex-direction:row'"> |
|||
<view v-if="n.type=='ol'" class="_ol-bef">{{n.num}}</view> |
|||
<view v-else class="_ul-bef"> |
|||
<view v-if="n.floor%3==0" class="_ul-p1">█</view> |
|||
<view v-else-if="n.floor%3==2" class="_ul-p2" /> |
|||
<view v-else class="_ul-p1" style="border-radius:50%">█</view> |
|||
</view> |
|||
<trees class="_li" c="_li" :nodes="n.children" :lazyLoad="lazyLoad" :loading="loading" /> |
|||
</view> |
|||
<!--表格--> |
|||
<view v-else-if="n.name=='table'&&n.c&&n.flag" :id="n.attrs.id" :class="n.attrs.class" :style="(n.attrs.style||'')+';display:grid'"> |
|||
<trees v-for="(cell,n) in n.children" v-bind:key="n" :class="cell.attrs.class" :c="cell.attrs.class" :style="cell.attrs.style" |
|||
:s="cell.attrs.style" :nodes="cell.children" /> |
|||
</view> |
|||
<view v-else-if="n.name=='table'&&n.c" :id="n.attrs.id" :class="n.attrs.class" :style="(n.attrs.style||'')+';display:table'"> |
|||
<view v-for="(tbody, o) in n.children" v-bind:key="o" :class="tbody.attrs.class" :style="(tbody.attrs.style||'')+(tbody.name[0]=='t'?';display:table-'+(tbody.name=='tr'?'row':'row-group'):'')"> |
|||
<view v-for="(tr, p) in tbody.children" v-bind:key="p" :class="tr.attrs.class" :style="(tr.attrs.style||'')+(tr.name[0]=='t'?';display:table-'+(tr.name=='tr'?'row':'cell'):'')"> |
|||
<trees v-if="tr.name=='td'" :nodes="tr.children" /> |
|||
<trees v-else v-for="(td, q) in tr.children" v-bind:key="q" :class="td.attrs.class" :c="td.attrs.class" :style="(td.attrs.style||'')+(td.name[0]=='t'?';display:table-'+(td.name=='tr'?'row':'cell'):'')" |
|||
:s="(td.attrs.style||'')+(td.name[0]=='t'?';display:table-'+(td.name=='tr'?'row':'cell'):'')" :nodes="td.children" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!--#ifdef APP-PLUS--> |
|||
<iframe v-else-if="n.name=='iframe'" :style="n.attrs.style" :allowfullscreen="n.attrs.allowfullscreen" :frameborder="n.attrs.frameborder" |
|||
:width="n.attrs.width" :height="n.attrs.height" :src="n.attrs.src" /> |
|||
<embed v-else-if="n.name=='embed'" :style="n.attrs.style" :width="n.attrs.width" :height="n.attrs.height" :src="n.attrs.src" /> |
|||
<!--#endif--> |
|||
<!--富文本--> |
|||
<!--#ifdef MP-WEIXIN || MP-QQ || APP-PLUS--> |
|||
<rich-text v-else-if="use(n)" :id="n.attrs.id" :class="'_p __'+n.name" :nodes="[n]" /> |
|||
<!--#endif--> |
|||
<!--#ifndef MP-WEIXIN || MP-QQ || APP-PLUS--> |
|||
<rich-text v-else-if="!n.c" :id="n.attrs.id" :nodes="[n]" style="display:inline" /> |
|||
<!--#endif--> |
|||
<trees v-else :class="(n.attrs.id||'')+' _'+n.name+' '+(n.attrs.class||'')" :c="(n.attrs.id||'')+' _'+n.name+' '+(n.attrs.class||'')" |
|||
:style="n.attrs.style" :s="n.attrs.style" :nodes="n.children" :lazyLoad="lazyLoad" :loading="loading" /> |
|||
</block> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
var inline = { |
|||
abbr: 1, |
|||
b: 1, |
|||
big: 1, |
|||
code: 1, |
|||
del: 1, |
|||
em: 1, |
|||
i: 1, |
|||
ins: 1, |
|||
label: 1, |
|||
q: 1, |
|||
small: 1, |
|||
span: 1, |
|||
strong: 1, |
|||
sub: 1, |
|||
sup: 1 |
|||
} |
|||
let global = {}; |
|||
global.Parser = {}; |
|||
import trees from './trees' |
|||
import cfg from '../libs/config.js' |
|||
const errorImg = cfg.errorImg; |
|||
export default { |
|||
components: { |
|||
trees |
|||
}, |
|||
name: 'trees', |
|||
data() { |
|||
return { |
|||
ctrl: [], |
|||
placeholder: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="225"/>', |
|||
errorImg, |
|||
loadVideo: typeof plus == 'undefined', |
|||
// #ifndef MP-ALIPAY |
|||
c: '', |
|||
s: '' |
|||
// #endif |
|||
} |
|||
}, |
|||
props: { |
|||
nodes: Array, |
|||
lazyLoad: Boolean, |
|||
loading: String, |
|||
// #ifdef MP-ALIPAY |
|||
c: String, |
|||
s: String |
|||
// #endif |
|||
}, |
|||
mounted() { |
|||
for (this.top = this.$parent; this.top.$options.name != 'parser'; this.top = this.top.$parent); |
|||
this.init(); |
|||
}, |
|||
// #ifdef APP-PLUS |
|||
|
|||
// #ifndef VUE3 |
|||
// 组件销毁前，将实例从u-form的缓存中移除 |
|||
beforeDestroy() { |
|||
this.observer && this.observer.disconnect(); |
|||
}, |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
beforeUnmount() { |
|||
this.observer && this.observer.disconnect(); |
|||
}, |
|||
// #endif |
|||
|
|||
// #endif |
|||
methods: { |
|||
init() { |
|||
for (var i = this.nodes.length, n; n = this.nodes[--i];) { |
|||
if (n.name == 'img') { |
|||
this.top.imgList.setItem(n.attrs.i, n.attrs['original-src'] || n.attrs.src); |
|||
// #ifdef APP-PLUS |
|||
if (this.lazyLoad && !this.observer) { |
|||
this.observer = uni.createIntersectionObserver(this).relativeToViewport({ |
|||
top: 500, |
|||
bottom: 500 |
|||
}); |
|||
setTimeout(() => { |
|||
this.observer.observe('._img', res => { |
|||
if (res.intersectionRatio) { |
|||
for (var j = this.nodes.length; j--;) |
|||
if (this.nodes[j].name == 'img') |
|||
this.$set(this.ctrl, j, 1); |
|||
this.observer.disconnect(); |
|||
} |
|||
}) |
|||
}, 0) |
|||
} |
|||
// #endif |
|||
} else if (n.name == 'video' || n.name == 'audio') { |
|||
var ctx; |
|||
if (n.name == 'video') { |
|||
ctx = uni.createVideoContext(n.attrs.id |
|||
// #ifndef MP-BAIDU |
|||
, this |
|||
// #endif |
|||
); |
|||
} else if (this.$refs[n.attrs.id]) |
|||
ctx = this.$refs[n.attrs.id][0]; |
|||
if (ctx) { |
|||
ctx.id = n.attrs.id; |
|||
this.top.videoContexts.push(ctx); |
|||
} |
|||
} |
|||
} |
|||
// #ifdef APP-PLUS |
|||
// APP 上避免 video 错位需要延时渲染 |
|||
setTimeout(() => { |
|||
this.loadVideo = true; |
|||
}, 1000) |
|||
// #endif |
|||
}, |
|||
play(e) { |
|||
var contexts = this.top.videoContexts; |
|||
if (contexts.length > 1 && this.top.autopause) |
|||
for (var i = contexts.length; i--;) |
|||
if (contexts[i].id != e.currentTarget.dataset.id) |
|||
contexts[i].pause(); |
|||
}, |
|||
imgtap(e) { |
|||
var attrs = e.currentTarget.dataset.attrs; |
|||
if (!attrs.ignore) { |
|||
var preview = true, |
|||
data = { |
|||
id: e.target.id, |
|||
src: attrs.src, |
|||
ignore: () => preview = false |
|||
}; |
|||
global.Parser.onImgtap && global.Parser.onImgtap(data); |
|||
this.top.$emit('imgtap', data); |
|||
if (preview) { |
|||
var urls = this.top.imgList, |
|||
current = urls[attrs.i] ? parseInt(attrs.i) : (urls = [attrs.src], 0); |
|||
uni.previewImage({ |
|||
current, |
|||
urls |
|||
}) |
|||
} |
|||
} |
|||
}, |
|||
loadImg(e) { |
|||
var i = e.currentTarget.dataset.i; |
|||
if (this.lazyLoad && !this.ctrl[i]) { |
|||
// #ifdef QUICKAPP-WEBVIEW |
|||
this.$set(this.ctrl, i, 0); |
|||
this.$nextTick(function() { |
|||
// #endif |
|||
// #ifndef APP-PLUS |
|||
this.$set(this.ctrl, i, 1); |
|||
// #endif |
|||
// #ifdef QUICKAPP-WEBVIEW |
|||
}) |
|||
// #endif |
|||
} else if (this.loading && this.ctrl[i] != 2) { |
|||
// #ifdef QUICKAPP-WEBVIEW |
|||
this.$set(this.ctrl, i, 0); |
|||
this.$nextTick(function() { |
|||
// #endif |
|||
this.$set(this.ctrl, i, 2); |
|||
// #ifdef QUICKAPP-WEBVIEW |
|||
}) |
|||
// #endif |
|||
} |
|||
}, |
|||
linkpress(e) { |
|||
var jump = true, |
|||
attrs = e.currentTarget.dataset.attrs; |
|||
attrs.ignore = () => jump = false; |
|||
global.Parser.onLinkpress && global.Parser.onLinkpress(attrs); |
|||
this.top.$emit('linkpress', attrs); |
|||
if (jump) { |
|||
// #ifdef MP |
|||
if (attrs['app-id']) { |
|||
return uni.navigateToMiniProgram({ |
|||
appId: attrs['app-id'], |
|||
path: attrs.path |
|||
}) |
|||
} |
|||
// #endif |
|||
if (attrs.href) { |
|||
if (attrs.href[0] == '#') { |
|||
if (this.top.useAnchor) |
|||
this.top.navigateTo({ |
|||
id: attrs.href.substring(1) |
|||
}) |
|||
} else if (attrs.href.indexOf('http') == 0 || attrs.href.indexOf('//') == 0) { |
|||
// #ifdef APP-PLUS |
|||
plus.runtime.openWeb(attrs.href); |
|||
// #endif |
|||
// #ifndef APP-PLUS |
|||
uni.setClipboardData({ |
|||
data: attrs.href, |
|||
success: () => |
|||
uni.showToast({ |
|||
title: '链接已复制' |
|||
}) |
|||
}) |
|||
// #endif |
|||
} else |
|||
uni.navigateTo({ |
|||
url: attrs.href, |
|||
fail() { |
|||
uni.switchTab({ |
|||
url: attrs.href, |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
}, |
|||
error(e) { |
|||
var target = e.currentTarget, |
|||
source = target.dataset.source, |
|||
i = target.dataset.i; |
|||
if (source == 'video' || source == 'audio') { |
|||
// 加载其他 source |
|||
var index = this.ctrl[i] ? this.ctrl[i].i + 1 : 1; |
|||
if (index < this.nodes[i].attrs.source.length) |
|||
this.$set(this.ctrl, i, index); |
|||
if (e.detail.__args__) |
|||
e.detail = e.detail.__args__[0]; |
|||
} else if (errorImg && source == 'img') { |
|||
this.top.imgList.setItem(target.dataset.index, errorImg); |
|||
this.$set(this.ctrl, i, 3); |
|||
} |
|||
this.top && this.top.$emit('error', { |
|||
source, |
|||
target, |
|||
errMsg: e.detail.errMsg |
|||
}); |
|||
}, |
|||
_loadVideo(e) { |
|||
this.$set(this.ctrl, e.target.dataset.i, 0); |
|||
}, |
|||
use(item) { |
|||
return !item.c && !inline[item.name] && (item.attrs.style || '').indexOf('display:inline') == -1 |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
/* 在这里引入自定义样式 */ |
|||
|
|||
/* 链接和图片效果 */ |
|||
._a { |
|||
display: inline; |
|||
padding: 1.5px 0 1.5px 0; |
|||
color: #366092; |
|||
word-break: break-all; |
|||
} |
|||
|
|||
._hover { |
|||
text-decoration: underline; |
|||
opacity: 0.7; |
|||
} |
|||
|
|||
._img { |
|||
display: inline-block; |
|||
max-width: 100%; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
/* #ifdef MP-WEIXIN */ |
|||
:host { |
|||
display: inline; |
|||
} |
|||
|
|||
/* #endif */ |
|||
|
|||
/* #ifndef MP-ALIPAY || APP-PLUS */ |
|||
.interlayer { |
|||
display: inherit; |
|||
flex-direction: inherit; |
|||
flex-wrap: inherit; |
|||
align-content: inherit; |
|||
align-items: inherit; |
|||
justify-content: inherit; |
|||
width: 100%; |
|||
white-space: inherit; |
|||
} |
|||
|
|||
/* #endif */ |
|||
|
|||
._b, |
|||
._strong { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
/* #ifndef MP-ALIPAY */ |
|||
._blockquote, |
|||
._div, |
|||
._p, |
|||
._ol, |
|||
._ul, |
|||
._li { |
|||
display: block; |
|||
} |
|||
|
|||
/* #endif */ |
|||
|
|||
._code { |
|||
font-family: monospace; |
|||
} |
|||
|
|||
._del { |
|||
text-decoration: line-through; |
|||
} |
|||
|
|||
._em, |
|||
._i { |
|||
font-style: italic; |
|||
} |
|||
|
|||
._h1 { |
|||
font-size: 2em; |
|||
} |
|||
|
|||
._h2 { |
|||
font-size: 1.5em; |
|||
} |
|||
|
|||
._h3 { |
|||
font-size: 1.17em; |
|||
} |
|||
|
|||
._h5 { |
|||
font-size: 0.83em; |
|||
} |
|||
|
|||
._h6 { |
|||
font-size: 0.67em; |
|||
} |
|||
|
|||
._h1, |
|||
._h2, |
|||
._h3, |
|||
._h4, |
|||
._h5, |
|||
._h6 { |
|||
display: block; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
._image { |
|||
display: block; |
|||
width: 100%; |
|||
height: 360px; |
|||
margin-top: -360px; |
|||
opacity: 0; |
|||
} |
|||
|
|||
._ins { |
|||
text-decoration: underline; |
|||
} |
|||
|
|||
._li { |
|||
flex: 1; |
|||
width: 0; |
|||
} |
|||
|
|||
._ol-bef { |
|||
width: 36px; |
|||
margin-right: 5px; |
|||
text-align: right; |
|||
} |
|||
|
|||
._ul-bef { |
|||
display: block; |
|||
margin: 0 12px 0 23px; |
|||
line-height: normal; |
|||
} |
|||
|
|||
._ol-bef, |
|||
._ul-bef { |
|||
flex: none; |
|||
user-select: none; |
|||
} |
|||
|
|||
._ul-p1 { |
|||
display: inline-block; |
|||
width: 0.3em; |
|||
height: 0.3em; |
|||
overflow: hidden; |
|||
line-height: 0.3em; |
|||
} |
|||
|
|||
._ul-p2 { |
|||
display: inline-block; |
|||
width: 0.23em; |
|||
height: 0.23em; |
|||
border: 0.05em solid black; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
._q::before { |
|||
content: '"'; |
|||
} |
|||
|
|||
._q::after { |
|||
content: '"'; |
|||
} |
|||
|
|||
._sub { |
|||
font-size: smaller; |
|||
vertical-align: sub; |
|||
} |
|||
|
|||
._sup { |
|||
font-size: smaller; |
|||
vertical-align: super; |
|||
} |
|||
|
|||
/* #ifdef MP-ALIPAY || APP-PLUS || QUICKAPP-WEBVIEW */ |
|||
._abbr, |
|||
._b, |
|||
._code, |
|||
._del, |
|||
._em, |
|||
._i, |
|||
._ins, |
|||
._label, |
|||
._q, |
|||
._span, |
|||
._strong, |
|||
._sub, |
|||
._sup { |
|||
display: inline; |
|||
} |
|||
|
|||
/* #endif */ |
|||
|
|||
/* #ifdef MP-WEIXIN || MP-QQ */ |
|||
.__bdo, |
|||
.__bdi, |
|||
.__ruby, |
|||
.__rt { |
|||
display: inline-block; |
|||
} |
|||
|
|||
/* #endif */ |
|||
._video { |
|||
position: relative; |
|||
display: inline-block; |
|||
width: 300px; |
|||
height: 225px; |
|||
background-color: black; |
|||
} |
|||
|
|||
._video::after { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
margin: -15px 0 0 -15px; |
|||
content: ''; |
|||
border-color: transparent transparent transparent white; |
|||
border-style: solid; |
|||
border-width: 15px 0 15px 30px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,676 @@ |
|||
<template> |
|||
<view> |
|||
<slot v-if="!nodes.length" /> |
|||
<!--#ifdef APP-PLUS-NVUE--> |
|||
<web-view id="_top" ref="web" :style="'margin-top:-2px;height:'+height+'px'" @onPostMessage="_message" /> |
|||
<!--#endif--> |
|||
<!--#ifndef APP-PLUS-NVUE--> |
|||
<view id="_top" :style="showAm+(selectable?';user-select:text;-webkit-user-select:text':'')"> |
|||
<!--#ifdef H5 || MP-360--> |
|||
<div :id="'rtf'+uid"></div> |
|||
<!--#endif--> |
|||
<!--#ifndef H5 || MP-360--> |
|||
<trees :nodes="nodes" :lazyLoad="lazyLoad" :loading="loadingImg" /> |
|||
<!--#endif--> |
|||
</view> |
|||
<!--#endif--> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
var search; |
|||
// #ifndef H5 || APP-PLUS-NVUE || MP-360 |
|||
import trees from './libs/trees'; |
|||
import Parser from './libs/MpHtmlParser.js' |
|||
var cache = {}; |
|||
// #ifdef MP-WEIXIN || MP-TOUTIAO |
|||
var fs = uni.getFileSystemManager ? uni.getFileSystemManager() : null; |
|||
// #endif |
|||
var dom; |
|||
// 计算 cache 的 key |
|||
function hash(str) { |
|||
for (var i = str.length, val = 5381; i--;) |
|||
val += (val << 5) + str.charCodeAt(i); |
|||
return val; |
|||
} |
|||
// #endif |
|||
// #ifdef H5 || APP-PLUS-NVUE || MP-360 |
|||
import cfg from './libs/config.js' |
|||
var { |
|||
windowWidth, |
|||
platform |
|||
} = uni.getSystemInfoSync() |
|||
// #endif |
|||
// #ifdef APP-PLUS-NVUE |
|||
var weexDom = weex.requireModule('dom'); |
|||
// #endif |
|||
/** |
|||
* Parser 富文本组件 |
|||
* @tutorial https://github.com/jin-yufeng/Parser |
|||
* @property {String} html 富文本数据 |
|||
* @property {Boolean} autopause 是否在播放一个视频时自动暂停其他视频 |
|||
* @property {Boolean} autoscroll 是否自动给所有表格添加一个滚动层 |
|||
* @property {Boolean} autosetTitle 是否自动将 title 标签中的内容设置到页面标题 |
|||
* @property {Number} compress 压缩等级 |
|||
* @property {String} domain 图片、视频等链接的主域名 |
|||
* @property {Boolean} lazyLoad 是否开启图片懒加载 |
|||
* @property {String} loadingImg 图片加载完成前的占位图 |
|||
* @property {Boolean} selectable 是否开启长按复制 |
|||
* @property {Object} tagStyle 标签的默认样式 |
|||
* @property {Boolean} showWithAnimation 是否使用渐显动画 |
|||
* @property {Boolean} useAnchor 是否使用锚点 |
|||
* @property {Boolean} useCache 是否缓存解析结果 |
|||
* @event {Function} parse 解析完成事件 |
|||
* @event {Function} load dom 加载完成事件 |
|||
* @event {Function} ready 所有图片加载完毕事件 |
|||
* @event {Function} error 错误事件 |
|||
* @event {Function} imgtap 图片点击事件 |
|||
* @event {Function} linkpress 链接点击事件 |
|||
* @author JinYufeng |
|||
* @version 20201029 |
|||
* @listens MIT |
|||
*/ |
|||
export default { |
|||
name: 'parser', |
|||
emits: ["parse", "load", "ready", "error", "imgtap", "linkpress"], |
|||
data() { |
|||
return { |
|||
// #ifdef H5 || MP-360 |
|||
uid: this._uid, |
|||
// #endif |
|||
// #ifdef APP-PLUS-NVUE |
|||
height: 1, |
|||
// #endif |
|||
// #ifndef APP-PLUS-NVUE |
|||
showAm: '', |
|||
// #endif |
|||
nodes: [] |
|||
} |
|||
}, |
|||
// #ifndef H5 || APP-PLUS-NVUE || MP-360 |
|||
components: { |
|||
trees |
|||
}, |
|||
// #endif |
|||
props: { |
|||
html: String, |
|||
autopause: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
preview: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
autoscroll: Boolean, |
|||
autosetTitle: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// #ifndef H5 || APP-PLUS-NVUE || MP-360 |
|||
compress: Number, |
|||
loadingImg: String, |
|||
useCache: Boolean, |
|||
// #endif |
|||
domain: String, |
|||
lazyLoad: Boolean, |
|||
selectable: Boolean, |
|||
tagStyle: Object, |
|||
showWithAnimation: Boolean, |
|||
useAnchor: Boolean |
|||
}, |
|||
watch: { |
|||
html(html) { |
|||
this.setContent(html); |
|||
} |
|||
}, |
|||
created() { |
|||
// 图片数组 |
|||
this.imgList = []; |
|||
this.imgList.each = function(f) { |
|||
for (var i = 0, len = this.length; i < len; i++) |
|||
this.setItem(i, f(this[i], i, this)); |
|||
} |
|||
this.imgList.setItem = function(i, src) { |
|||
if (i == void 0 || !src) return; |
|||
// #ifndef MP-ALIPAY || APP-PLUS |
|||
// 去重 |
|||
if (src.indexOf('http') == 0 && this.includes(src)) { |
|||
var newSrc = src.split('://')[0]; |
|||
for (var j = newSrc.length, c; c = src[j]; j++) { |
|||
if (c == '/' && src[j - 1] != '/' && src[j + 1] != '/') break; |
|||
newSrc += Math.random() > 0.5 ? c.toUpperCase() : c; |
|||
} |
|||
newSrc += src.substr(j); |
|||
return this[i] = newSrc; |
|||
} |
|||
// #endif |
|||
this[i] = src; |
|||
// 暂存 data src |
|||
if (src.includes('data:image')) { |
|||
var filePath, info = src.match(/data:image\/(\S+?);(\S+?),(.+)/); |
|||
if (!info) return; |
|||
// #ifdef MP-WEIXIN || MP-TOUTIAO |
|||
filePath = `${wx.env.USER_DATA_PATH}/${Date.now()}.${info[1]}`; |
|||
fs && fs.writeFile({ |
|||
filePath, |
|||
data: info[3], |
|||
encoding: info[2], |
|||
success: () => this[i] = filePath |
|||
}) |
|||
// #endif |
|||
// #ifdef APP-PLUS |
|||
filePath = `_doc/parser_tmp/${Date.now()}.${info[1]}`; |
|||
var bitmap = new plus.nativeObj.Bitmap(); |
|||
bitmap.loadBase64Data(src, () => { |
|||
bitmap.save(filePath, {}, () => { |
|||
bitmap.clear() |
|||
this[i] = filePath; |
|||
}) |
|||
}) |
|||
// #endif |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
// #ifdef H5 || MP-360 |
|||
this.document = document.getElementById('rtf' + this._uid); |
|||
// #endif |
|||
// #ifndef H5 || APP-PLUS-NVUE || MP-360 |
|||
if (dom) this.document = new dom(this); |
|||
// #endif |
|||
if (search) this.search = args => search(this, args); |
|||
// #ifdef APP-PLUS-NVUE |
|||
this.document = this.$refs.web; |
|||
setTimeout(() => { |
|||
// #endif |
|||
if (this.html) this.setContent(this.html); |
|||
// #ifdef APP-PLUS-NVUE |
|||
}, 30) |
|||
// #endif |
|||
}, |
|||
// #ifndef VUE3 |
|||
beforeDestroy() { |
|||
// #ifdef H5 || MP-360 |
|||
if (this._observer) this._observer.disconnect(); |
|||
// #endif |
|||
this.imgList.each(src => { |
|||
// #ifdef APP-PLUS |
|||
if (src && src.includes('_doc')) { |
|||
plus.io.resolveLocalFileSystemURL(src, entry => { |
|||
entry.remove(); |
|||
}); |
|||
} |
|||
// #endif |
|||
// #ifdef MP-WEIXIN || MP-TOUTIAO |
|||
if (src && src.includes(uni.env.USER_DATA_PATH)) |
|||
fs && fs.unlink({ |
|||
filePath: src |
|||
}) |
|||
// #endif |
|||
}) |
|||
clearInterval(this._timer); |
|||
}, |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
beforeUnmount() { |
|||
// #ifdef H5 || MP-360 |
|||
if (this._observer) this._observer.disconnect(); |
|||
// #endif |
|||
this.imgList.each(src => { |
|||
// #ifdef APP-PLUS |
|||
if (src && src.includes('_doc')) { |
|||
plus.io.resolveLocalFileSystemURL(src, entry => { |
|||
entry.remove(); |
|||
}); |
|||
} |
|||
// #endif |
|||
// #ifdef MP-WEIXIN || MP-TOUTIAO |
|||
if (src && src.includes(uni.env.USER_DATA_PATH)) |
|||
fs && fs.unlink({ |
|||
filePath: src |
|||
}) |
|||
// #endif |
|||
}) |
|||
clearInterval(this._timer); |
|||
}, |
|||
// #endif |
|||
methods: { |
|||
// 设置富文本内容 |
|||
setContent(html, append) { |
|||
// #ifdef APP-PLUS-NVUE |
|||
if (!html) |
|||
return this.height = 1; |
|||
if (append) |
|||
this.$refs.web.evalJs("var b=document.createElement('div');b.innerHTML='" + html.replace(/'/g, "\\'") + |
|||
"';document.getElementById('parser').appendChild(b)"); |
|||
else { |
|||
html = |
|||
'<meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><style>html,body{width:100%;height:100%;overflow:hidden}body{margin:0}</style><base href="' + |
|||
this.domain + '"><div id="parser"' + (this.selectable ? '>' : ' style="user-select:none">') + this._handleHtml(html).replace(/\n/g, '\\n') + |
|||
'</div><script>"use strict";function e(e){if(window.__dcloud_weex_postMessage||window.__dcloud_weex_){var t={data:[e]};window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessage(t):window.__dcloud_weex_.postMessage(JSON.stringify(t))}}document.body.onclick=function(){e({action:"click"})},' + |
|||
(this.showWithAnimation ? 'document.body.style.animation="_show .5s",' : '') + |
|||
'setTimeout(function(){e({action:"load",text:document.body.innerText,height:document.getElementById("parser").scrollHeight})},50);\x3c/script>'; |
|||
if (platform == 'android') html = html.replace(/%/g, '%25'); |
|||
this.$refs.web.evalJs("document.write('" + html.replace(/'/g, "\\'") + "');document.close()"); |
|||
} |
|||
this.$refs.web.evalJs( |
|||
'var t=document.getElementsByTagName("title");t.length&&e({action:"getTitle",title:t[0].innerText});for(var o,n=document.getElementsByTagName("style"),r=1;o=n[r++];)o.innerHTML=o.innerHTML.replace(/body/g,"#parser");for(var a,c=document.getElementsByTagName("img"),s=[],i=0==c.length,d=0,l=0,g=0;a=c[l];l++)parseInt(a.style.width||a.getAttribute("width"))>' + |
|||
windowWidth + '&&(a.style.height="auto"),a.onload=function(){++d==c.length&&(i=!0)},a.onerror=function(){++d==c.length&&(i=!0),' + (cfg.errorImg ? 'this.src="' + cfg.errorImg + '",' : '') + |
|||
'e({action:"error",source:"img",target:this})},a.hasAttribute("ignore")||"A"==a.parentElement.nodeName||(a.i=g++,s.push(a.getAttribute("original-src")||a.src||a.getAttribute("data-src")),a.onclick=function(t){t.stopPropagation(),e({action:"preview",img:{i:this.i,src:this.src}})});e({action:"getImgList",imgList:s});for(var u,m=document.getElementsByTagName("a"),f=0;u=m[f];f++)u.onclick=function(m){m.stopPropagation();var t,o=this.getAttribute("href");if("#"==o[0]){var n=document.getElementById(o.substr(1));n&&(t=n.offsetTop)}return e({action:"linkpress",href:o,offset:t}),!1};for(var h,y=document.getElementsByTagName("video"),v=0;h=y[v];v++)h.style.maxWidth="100%",h.onerror=function(){e({action:"error",source:"video",target:this})}' + |
|||
(this.autopause ? ',h.onplay=function(){for(var e,t=0;e=y[t];t++)e!=this&&e.pause()}' : '') + |
|||
';for(var _,p=document.getElementsByTagName("audio"),w=0;_=p[w];w++)_.onerror=function(){e({action:"error",source:"audio",target:this})};' + |
|||
(this.autoscroll ? 'for(var T,E=document.getElementsByTagName("table"),B=0;T=E[B];B++){var N=document.createElement("div");N.style.overflow="scroll",T.parentNode.replaceChild(N,T),N.appendChild(T)}' : '') + |
|||
'var x=document.getElementById("parser");clearInterval(window.timer),window.timer=setInterval(function(){i&&clearInterval(window.timer),e({action:"ready",ready:i,height:x.scrollHeight})},350)' |
|||
) |
|||
this.nodes = [1]; |
|||
// #endif |
|||
// #ifdef H5 || MP-360 |
|||
if (!html) { |
|||
if (this.rtf && !append) this.rtf.parentNode.removeChild(this.rtf); |
|||
return; |
|||
} |
|||
var div = document.createElement('div'); |
|||
if (!append) { |
|||
if (this.rtf) this.rtf.parentNode.removeChild(this.rtf); |
|||
this.rtf = div; |
|||
} else { |
|||
if (!this.rtf) this.rtf = div; |
|||
else this.rtf.appendChild(div); |
|||
} |
|||
div.innerHTML = this._handleHtml(html, append); |
|||
for (var styles = this.rtf.getElementsByTagName('style'), i = 0, style; style = styles[i++];) { |
|||
style.innerHTML = style.innerHTML.replace(/body/g, '#rtf' + this._uid); |
|||
style.setAttribute('scoped', 'true'); |
|||
} |
|||
// 懒加载 |
|||
if (!this._observer && this.lazyLoad && IntersectionObserver) { |
|||
this._observer = new IntersectionObserver(changes => { |
|||
for (let item, i = 0; item = changes[i++];) { |
|||
if (item.isIntersecting) { |
|||
item.target.src = item.target.getAttribute('data-src'); |
|||
item.target.removeAttribute('data-src'); |
|||
this._observer.unobserve(item.target); |
|||
} |
|||
} |
|||
}, { |
|||
rootMargin: '500px 0px 500px 0px' |
|||
}) |
|||
} |
|||
var _ts = this; |
|||
// 获取标题 |
|||
var title = this.rtf.getElementsByTagName('title'); |
|||
if (title.length && this.autosetTitle) |
|||
uni.setNavigationBarTitle({ |
|||
title: title[0].innerText |
|||
}) |
|||
// 填充 domain |
|||
var fill = target => { |
|||
var src = target.getAttribute('src'); |
|||
if (this.domain && src) { |
|||
if (src[0] == '/') { |
|||
if (src[1] == '/') |
|||
target.src = (this.domain.includes('://') ? this.domain.split('://')[0] : '') + ':' + src; |
|||
else target.src = this.domain + src; |
|||
} else if (!src.includes('://') && src.indexOf('data:') != 0) target.src = this.domain + '/' + src; |
|||
} |
|||
} |
|||
// 图片处理 |
|||
this.imgList.length = 0; |
|||
var imgs = this.rtf.getElementsByTagName('img'); |
|||
for (let i = 0, j = 0, img; img = imgs[i]; i++) { |
|||
if (parseInt(img.style.width || img.getAttribute('width')) > windowWidth) |
|||
img.style.height = 'auto'; |
|||
fill(img); |
|||
if (!img.hasAttribute('ignore') && img.parentElement.nodeName != 'A') { |
|||
img.i = j++; |
|||
_ts.imgList.push(img.getAttribute('original-src') || img.src || img.getAttribute('data-src')); |
|||
img.onclick = function(e) { |
|||
e.stopPropagation(); |
|||
var preview = _ts.preview; |
|||
this.ignore = () => preview = false; |
|||
_ts.$emit('imgtap', this); |
|||
if (preview) { |
|||
uni.previewImage({ |
|||
current: this.i, |
|||
urls: _ts.imgList |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
img.onerror = function() { |
|||
if (cfg.errorImg) |
|||
_ts.imgList[this.i] = this.src = cfg.errorImg; |
|||
_ts.$emit('error', { |
|||
source: 'img', |
|||
target: this |
|||
}); |
|||
} |
|||
if (_ts.lazyLoad && this._observer && img.src && img.i != 0) { |
|||
img.setAttribute('data-src', img.src); |
|||
img.removeAttribute('src'); |
|||
this._observer.observe(img); |
|||
} |
|||
} |
|||
// 链接处理 |
|||
var links = this.rtf.getElementsByTagName('a'); |
|||
for (var link of links) { |
|||
link.onclick = function(e) { |
|||
e.stopPropagation(); |
|||
var jump = true, |
|||
href = this.getAttribute('href'); |
|||
_ts.$emit('linkpress', { |
|||
href, |
|||
ignore: () => jump = false |
|||
}); |
|||
if (jump && href) { |
|||
if (href[0] == '#') { |
|||
if (_ts.useAnchor) { |
|||
_ts.navigateTo({ |
|||
id: href.substr(1) |
|||
}) |
|||
} |
|||
} else if (href.indexOf('http') == 0 || href.indexOf('//') == 0) |
|||
return true; |
|||
else |
|||
uni.navigateTo({ |
|||
url: href |
|||
}) |
|||
} |
|||
return false; |
|||
} |
|||
} |
|||
// 视频处理 |
|||
var videos = this.rtf.getElementsByTagName('video'); |
|||
_ts.videoContexts = videos; |
|||
for (let video, i = 0; video = videos[i++];) { |
|||
fill(video); |
|||
video.style.maxWidth = '100%'; |
|||
video.onerror = function() { |
|||
_ts.$emit('error', { |
|||
source: 'video', |
|||
target: this |
|||
}); |
|||
} |
|||
video.onplay = function() { |
|||
if (_ts.autopause) |
|||
for (let item, i = 0; item = _ts.videoContexts[i++];) |
|||
if (item != this) item.pause(); |
|||
} |
|||
} |
|||
// 音频处理 |
|||
var audios = this.rtf.getElementsByTagName('audio'); |
|||
for (var audio of audios) { |
|||
fill(audio); |
|||
audio.onerror = function() { |
|||
_ts.$emit('error', { |
|||
source: 'audio', |
|||
target: this |
|||
}); |
|||
} |
|||
} |
|||
// 表格处理 |
|||
if (this.autoscroll) { |
|||
var tables = this.rtf.getElementsByTagName('table'); |
|||
for (var table of tables) { |
|||
let div = document.createElement('div'); |
|||
div.style.overflow = 'scroll'; |
|||
table.parentNode.replaceChild(div, table); |
|||
div.appendChild(table); |
|||
} |
|||
} |
|||
if (!append) this.document.appendChild(this.rtf); |
|||
this.$nextTick(() => { |
|||
this.nodes = [1]; |
|||
this.$emit('load'); |
|||
}); |
|||
setTimeout(() => this.showAm = '', 500); |
|||
// #endif |
|||
// #ifndef APP-PLUS-NVUE |
|||
// #ifndef H5 || MP-360 |
|||
var nodes; |
|||
if (!html) return this.nodes = []; |
|||
var parser = new Parser(html, this); |
|||
// 缓存读取 |
|||
if (this.useCache) { |
|||
var hashVal = hash(html); |
|||
if (cache[hashVal]) |
|||
nodes = cache[hashVal]; |
|||
else { |
|||
nodes = parser.parse(); |
|||
cache[hashVal] = nodes; |
|||
} |
|||
} else nodes = parser.parse(); |
|||
this.$emit('parse', nodes); |
|||
if (append) this.nodes = this.nodes.concat(nodes); |
|||
else this.nodes = nodes; |
|||
if (nodes.length && nodes.title && this.autosetTitle) |
|||
uni.setNavigationBarTitle({ |
|||
title: nodes.title |
|||
}) |
|||
if (this.imgList) this.imgList.length = 0; |
|||
this.videoContexts = []; |
|||
this.$nextTick(() => { |
|||
(function f(cs) { |
|||
for (var i = cs.length; i--;) { |
|||
if (cs[i].top) { |
|||
cs[i].controls = []; |
|||
cs[i].init(); |
|||
f(cs[i].$children); |
|||
} |
|||
} |
|||
})(this.$children) |
|||
this.$emit('load'); |
|||
}) |
|||
// #endif |
|||
var height; |
|||
clearInterval(this._timer); |
|||
this._timer = setInterval(() => { |
|||
// #ifdef H5 || MP-360 |
|||
this.rect = this.rtf.getBoundingClientRect(); |
|||
// #endif |
|||
// #ifndef H5 || MP-360 |
|||
uni.createSelectorQuery().in(this) |
|||
.select('#_top').boundingClientRect().exec(res => { |
|||
if (!res) return; |
|||
this.rect = res[0]; |
|||
// #endif |
|||
if (this.rect.height == height) { |
|||
this.$emit('ready', this.rect) |
|||
clearInterval(this._timer); |
|||
} |
|||
height = this.rect.height; |
|||
// #ifndef H5 || MP-360 |
|||
}); |
|||
// #endif |
|||
}, 350); |
|||
if (this.showWithAnimation && !append) this.showAm = 'animation:_show .5s'; |
|||
// #endif |
|||
}, |
|||
// 获取文本内容 |
|||
getText(ns = this.nodes) { |
|||
var txt = ''; |
|||
// #ifdef APP-PLUS-NVUE |
|||
txt = this._text; |
|||
// #endif |
|||
// #ifdef H5 || MP-360 |
|||
txt = this.rtf.innerText; |
|||
// #endif |
|||
// #ifndef H5 || APP-PLUS-NVUE || MP-360 |
|||
for (var i = 0, n; n = ns[i++];) { |
|||
if (n.type == 'text') txt += n.text.replace(/ /g, '\u00A0').replace(/</g, '<').replace(/>/g, '>') |
|||
.replace(/&/g, '&'); |
|||
else if (n.type == 'br') txt += '\n'; |
|||
else { |
|||
// 块级标签前后加换行 |
|||
var block = n.name == 'p' || n.name == 'div' || n.name == 'tr' || n.name == 'li' || (n.name[0] == 'h' && n.name[1] > |
|||
'0' && n.name[1] < '7'); |
|||
if (block && txt && txt[txt.length - 1] != '\n') txt += '\n'; |
|||
if (n.children) txt += this.getText(n.children); |
|||
if (block && txt[txt.length - 1] != '\n') txt += '\n'; |
|||
else if (n.name == 'td' || n.name == 'th') txt += '\t'; |
|||
} |
|||
} |
|||
// #endif |
|||
return txt; |
|||
}, |
|||
// 锚点跳转 |
|||
in (obj) { |
|||
if (obj.page && obj.selector && obj.scrollTop) this._in = obj; |
|||
}, |
|||
navigateTo(obj) { |
|||
if (!this.useAnchor) return obj.fail && obj.fail('Anchor is disabled'); |
|||
// #ifdef APP-PLUS-NVUE |
|||
if (!obj.id) |
|||
weexDom.scrollToElement(this.$refs.web); |
|||
else |
|||
this.$refs.web.evalJs('var pos=document.getElementById("' + obj.id + |
|||
'");if(pos)post({action:"linkpress",href:"#",offset:pos.offsetTop+' + (obj.offset || 0) + '})'); |
|||
obj.success && obj.success(); |
|||
// #endif |
|||
// #ifndef APP-PLUS-NVUE |
|||
var d = ' '; |
|||
// #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO |
|||
d = '>>>'; |
|||
// #endif |
|||
var selector = uni.createSelectorQuery().in(this._in ? this._in.page : this).select((this._in ? this._in.selector : |
|||
'#_top') + (obj.id ? `${d}#${obj.id},${this._in?this._in.selector:'#_top'}${d}.${obj.id}` : '')).boundingClientRect(); |
|||
if (this._in) selector.select(this._in.selector).scrollOffset().select(this._in.selector).boundingClientRect(); |
|||
else selector.selectViewport().scrollOffset(); |
|||
selector.exec(res => { |
|||
if (!res[0]) return obj.fail && obj.fail('Label not found') |
|||
var scrollTop = res[1].scrollTop + res[0].top - (res[2] ? res[2].top : 0) + (obj.offset || 0); |
|||
if (this._in) this._in.page[this._in.scrollTop] = scrollTop; |
|||
else uni.pageScrollTo({ |
|||
scrollTop, |
|||
duration: 300 |
|||
}) |
|||
obj.success && obj.success(); |
|||
}) |
|||
// #endif |
|||
}, |
|||
// 获取视频对象 |
|||
getVideoContext(id) { |
|||
// #ifndef APP-PLUS-NVUE |
|||
if (!id) return this.videoContexts; |
|||
else |
|||
for (var i = this.videoContexts.length; i--;) |
|||
if (this.videoContexts[i].id == id) return this.videoContexts[i]; |
|||
// #endif |
|||
}, |
|||
// #ifdef H5 || APP-PLUS-NVUE || MP-360 |
|||
_handleHtml(html, append) { |
|||
if (!append) { |
|||
// 处理 tag-style 和 userAgentStyles |
|||
var style = '<style>@keyframes _show{0%{opacity:0}100%{opacity:1}}img{max-width:100%}'; |
|||
for (var item in cfg.userAgentStyles) |
|||
style += `${item}{${cfg.userAgentStyles[item]}}`; |
|||
for (item in this.tagStyle) |
|||
style += `${item}{${this.tagStyle[item]}}`; |
|||
style += '</style>'; |
|||
html = style + html; |
|||
} |
|||
// 处理 rpx |
|||
if (html.includes('rpx')) |
|||
html = html.replace(/[0-9.]+\s*rpx/g, $ => (parseFloat($) * windowWidth / 750) + 'px'); |
|||
return html; |
|||
}, |
|||
// #endif |
|||
// #ifdef APP-PLUS-NVUE |
|||
_message(e) { |
|||
// 接收 web-view 消息 |
|||
var d = e.detail.data[0]; |
|||
switch (d.action) { |
|||
case 'load': |
|||
this.$emit('load'); |
|||
this.height = d.height; |
|||
this._text = d.text; |
|||
break; |
|||
case 'getTitle': |
|||
if (this.autosetTitle) |
|||
uni.setNavigationBarTitle({ |
|||
title: d.title |
|||
}) |
|||
break; |
|||
case 'getImgList': |
|||
this.imgList.length = 0; |
|||
for (var i = d.imgList.length; i--;) |
|||
this.imgList.setItem(i, d.imgList[i]); |
|||
break; |
|||
case 'preview': |
|||
var preview = true; |
|||
d.img.ignore = () => preview = false; |
|||
this.$emit('imgtap', d.img); |
|||
if (preview) |
|||
uni.previewImage({ |
|||
current: d.img.i, |
|||
urls: this.imgList |
|||
}) |
|||
break; |
|||
case 'linkpress': |
|||
var jump = true, |
|||
href = d.href; |
|||
this.$emit('linkpress', { |
|||
href, |
|||
ignore: () => jump = false |
|||
}) |
|||
if (jump && href) { |
|||
if (href[0] == '#') { |
|||
if (this.useAnchor) |
|||
weexDom.scrollToElement(this.$refs.web, { |
|||
offset: d.offset |
|||
}) |
|||
} else if (href.includes('://')) |
|||
plus.runtime.openWeb(href); |
|||
else |
|||
uni.navigateTo({ |
|||
url: href |
|||
}) |
|||
} |
|||
break; |
|||
case 'error': |
|||
if (d.source == 'img' && cfg.errorImg) |
|||
this.imgList.setItem(d.target.i, cfg.errorImg); |
|||
this.$emit('error', { |
|||
source: d.source, |
|||
target: d.target |
|||
}) |
|||
break; |
|||
case 'ready': |
|||
this.height = d.height; |
|||
if (d.ready) uni.createSelectorQuery().in(this).select('#_top').boundingClientRect().exec(res => { |
|||
this.rect = res[0]; |
|||
this.$emit('ready', res[0]); |
|||
}) |
|||
break; |
|||
case 'click': |
|||
this.$emit('click'); |
|||
this.$emit('tap'); |
|||
} |
|||
}, |
|||
// #endif |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
@keyframes _show { |
|||
0% { |
|||
opacity: 0; |
|||
} |
|||
|
|||
100% { |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
/* #ifdef MP-WEIXIN */ |
|||
:host { |
|||
display: block; |
|||
overflow: auto; |
|||
-webkit-overflow-scrolling: touch; |
|||
} |
|||
|
|||
/* #endif */ |
|||
</style> |
|||
@ -0,0 +1,895 @@ |
|||
<!-- 选择器 --> |
|||
<template> |
|||
<u-popup |
|||
:maskCloseAble="maskCloseAble" |
|||
mode="bottom" |
|||
:popup="false" |
|||
v-model="popupValue" |
|||
length="auto" |
|||
:safeAreaInsetBottom="safeAreaInsetBottom" |
|||
@close="close" |
|||
:z-index="uZIndex" |
|||
:blur="blur" |
|||
> |
|||
<view class="u-datetime-picker"> |
|||
<view class="u-picker-header" @touchmove.stop.prevent=""> |
|||
<view |
|||
class="u-btn-picker u-btn-picker--tips" |
|||
:style="{ color: cancelColor }" |
|||
hover-class="u-opacity" |
|||
:hover-stay-time="150" |
|||
@click="getResult('cancel')" |
|||
> |
|||
{{ cancelText }} |
|||
</view> |
|||
<view class="u-picker__title">{{ title }}</view> |
|||
<view |
|||
class="u-btn-picker u-btn-picker--primary" |
|||
:style="{ color: moving ? cancelColor : confirmColor }" |
|||
hover-class="u-opacity" |
|||
:hover-stay-time="150" |
|||
@touchmove.stop="" |
|||
@click.stop="getResult('confirm')" |
|||
> |
|||
{{ confirmText }} |
|||
</view> |
|||
</view> |
|||
<view class="u-picker-body"> |
|||
<picker-view |
|||
v-if="mode == 'region'" |
|||
:value="valueArr" |
|||
@change="change" |
|||
class="u-picker-view" |
|||
@pickstart="pickstart" |
|||
@pickend="pickend" |
|||
> |
|||
<picker-view-column v-if="!reset && params.province"> |
|||
<view class="u-column-item" v-for="(item, index) in provinces" :key="index"> |
|||
<view class="u-line-1">{{ item.name }}</view> |
|||
</view> |
|||
</picker-view-column> |
|||
<picker-view-column v-if="!reset && params.city"> |
|||
<view class="u-column-item" v-for="(item, index) in citys" :key="index"> |
|||
<view class="u-line-1">{{ item.name }}</view> |
|||
</view> |
|||
</picker-view-column> |
|||
<picker-view-column v-if="!reset && params.area"> |
|||
<view class="u-column-item" v-for="(item, index) in areas" :key="index"> |
|||
<view class="u-line-1">{{ item.name }}</view> |
|||
</view> |
|||
</picker-view-column> |
|||
</picker-view> |
|||
<picker-view |
|||
v-else-if="mode == 'time'" |
|||
:value="valueArr" |
|||
@change="change" |
|||
class="u-picker-view" |
|||
@pickstart="pickstart" |
|||
@pickend="pickend" |
|||
> |
|||
<picker-view-column v-if="!reset && params.year"> |
|||
<view class="u-column-item" v-for="(item, index) in years" :key="index"> |
|||
{{ item }} |
|||
<text class="u-text" v-if="showTimeTag">年</text> |
|||
</view> |
|||
</picker-view-column> |
|||
<picker-view-column v-if="!reset && params.month"> |
|||
<view class="u-column-item" v-for="(item, index) in months" :key="index"> |
|||
{{ formatNumber(item) }} |
|||
<text class="u-text" v-if="showTimeTag">月</text> |
|||
</view> |
|||
</picker-view-column> |
|||
<picker-view-column v-if="!reset && params.day"> |
|||
<view class="u-column-item" v-for="(item, index) in days" :key="index"> |
|||
{{ formatNumber(item) }} |
|||
<text class="u-text" v-if="showTimeTag">日</text> |
|||
</view> |
|||
</picker-view-column> |
|||
<picker-view-column v-if="!reset && params.hour"> |
|||
<view class="u-column-item" v-for="(item, index) in hours" :key="index"> |
|||
{{ formatNumber(item) }} |
|||
<text class="u-text" v-if="showTimeTag">时</text> |
|||
</view> |
|||
</picker-view-column> |
|||
<picker-view-column v-if="!reset && params.minute"> |
|||
<view class="u-column-item" v-for="(item, index) in minutes" :key="index"> |
|||
{{ formatNumber(item) }} |
|||
<text class="u-text" v-if="showTimeTag">分</text> |
|||
</view> |
|||
</picker-view-column> |
|||
<picker-view-column v-if="!reset && params.second"> |
|||
<view class="u-column-item" v-for="(item, index) in seconds" :key="index"> |
|||
{{ formatNumber(item) }} |
|||
<text class="u-text" v-if="showTimeTag">秒</text> |
|||
</view> |
|||
</picker-view-column> |
|||
</picker-view> |
|||
<picker-view |
|||
v-else-if="mode == 'selector'" |
|||
:value="valueArr" |
|||
@change="change" |
|||
class="u-picker-view" |
|||
@pickstart="pickstart" |
|||
@pickend="pickend" |
|||
> |
|||
<picker-view-column v-if="!reset"> |
|||
<view class="u-column-item" v-for="(item, index) in range" :key="index"> |
|||
<view class="u-line-1">{{ getItemValue(item, "selector") }}</view> |
|||
</view> |
|||
</picker-view-column> |
|||
</picker-view> |
|||
<picker-view |
|||
v-else-if="mode == 'multiSelector'" |
|||
:value="valueArr" |
|||
@change="change" |
|||
class="u-picker-view" |
|||
@pickstart="pickstart" |
|||
@pickend="pickend" |
|||
> |
|||
<picker-view-column v-if="!reset" v-for="(item, index) in range" :key="index"> |
|||
<view class="u-column-item" v-for="(item1, index1) in item" :key="index1"> |
|||
<view class="u-line-1">{{ getItemValue(item1, "multiSelector") }}</view> |
|||
</view> |
|||
</picker-view-column> |
|||
</picker-view> |
|||
</view> |
|||
</view> |
|||
</u-popup> |
|||
</template> |
|||
|
|||
<script> |
|||
import provinces from "../../libs/address/provinces.json"; |
|||
import citys from "../../libs/address/citys.json"; |
|||
import areas from "../../libs/address/areas.json"; |
|||
/** |
|||
* picker picker弹出选择器 |
|||
* @description 此选择器有两种弹出模式：一是时间模式，可以配置年，日，月，时，分，秒参数 二是地区模式，可以配置省，市，区参数 |
|||
* @tutorial https://www.uviewui.com/components/picker.html |
|||
* @property {Object} params 需要显示的参数，见官网说明 |
|||
* @property {String} mode 模式选择，region-地区类型，time-时间类型（默认time） |
|||
* @property {String Number} start-year 可选的开始年份，mode=time时有效（默认1950） |
|||
* @property {String Number} end-year 可选的结束年份，mode=time时有效（默认2050） |
|||
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false） |
|||
* @property {Boolean} show-time-tag 时间模式时，是否显示后面的年月日中文提示 |
|||
* @property {String} cancel-color 取消按钮的颜色（默认#606266） |
|||
* @property {String} confirm-color 确认按钮的颜色（默认#2979ff） |
|||
* @property {String} default-time 默认选中的时间，mode=time时有效 |
|||
* @property {String} confirm-text 确认按钮的文字 |
|||
* @property {String} cancel-text 取消按钮的文字 |
|||
* @property {String} default-region 默认选中的地区，中文形式，mode=region时有效 |
|||
* @property {String} default-code 默认选中的地区，编号形式，mode=region时有效 |
|||
* @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true） |
|||
* @property {String Number} z-index 弹出时的z-index值（默认1075） |
|||
* @property {Array} default-selector 数组形式，其中每一项表示选择了range对应项中的第几个 |
|||
* @property {Array} range 自定义选择的数据，mode=selector或mode=multiSelector时有效 |
|||
* @property {String} range-key 当range参数的元素为对象时，指定Object中的哪个key的值作为选择器显示内容 |
|||
* @event {Function} confirm 点击确定按钮，返回当前选择的值 |
|||
* @event {Function} cancel 点击取消按钮，返回当前选择的值 |
|||
* @example <u-picker v-model="show" mode="time"></u-picker> |
|||
*/ |
|||
export default { |
|||
name: "u-picker", |
|||
emits: ["update:modelValue", "input", "confirm", "cancel"], |
|||
props: { |
|||
// 通过双向绑定控制组件的弹出与收起 |
|||
value: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
modelValue: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// picker中需要显示的参数 |
|||
params: { |
|||
type: Object, |
|||
default() { |
|||
return { |
|||
year: true, |
|||
month: true, |
|||
day: true, |
|||
hour: false, |
|||
minute: false, |
|||
second: false, |
|||
province: true, |
|||
city: true, |
|||
area: true, |
|||
timestamp: true |
|||
}; |
|||
} |
|||
}, |
|||
// 当mode=selector或者mode=multiSelector时，提供的数组 |
|||
range: { |
|||
type: Array, |
|||
default() { |
|||
return []; |
|||
} |
|||
}, |
|||
// 当mode=selector或者mode=multiSelector时，提供的默认选中的下标 |
|||
defaultSelector: { |
|||
type: Array, |
|||
default() { |
|||
return [0]; |
|||
} |
|||
}, |
|||
// 当 range 是一个 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 |
|||
rangeKey: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
// 模式选择，region-地区类型，time-时间类型，selector-单列模式，multiSelector-多列模式 |
|||
mode: { |
|||
type: String, |
|||
default: "time" |
|||
}, |
|||
// 年份开始时间 |
|||
startYear: { |
|||
type: [String, Number], |
|||
default: 1950 |
|||
}, |
|||
// 年份结束时间 |
|||
endYear: { |
|||
type: [String, Number], |
|||
default: 2050 |
|||
}, |
|||
// "取消"按钮的颜色 |
|||
cancelColor: { |
|||
type: String, |
|||
default: "#606266" |
|||
}, |
|||
// "确定"按钮的颜色 |
|||
confirmColor: { |
|||
type: String, |
|||
default: "#2979ff" |
|||
}, |
|||
// 默认显示的时间，2025-07-02 || 2025-07-02 13:01:00 || 2025/07/02 |
|||
defaultTime: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
// 默认显示的地区，可传类似["河北省", "秦皇岛市", "北戴河区"] |
|||
defaultRegion: { |
|||
type: Array, |
|||
default() { |
|||
return []; |
|||
} |
|||
}, |
|||
// 时间模式时，是否显示后面的年月日中文提示 |
|||
showTimeTag: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 默认显示地区的编码，defaultRegion和areaCode同时存在，areaCode优先，可传类似["13", "1303", "130304"] |
|||
areaCode: { |
|||
type: Array, |
|||
default() { |
|||
return []; |
|||
} |
|||
}, |
|||
safeAreaInsetBottom: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否允许通过点击遮罩关闭Picker |
|||
maskCloseAble: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 弹出的z-index值 |
|||
zIndex: { |
|||
type: [String, Number], |
|||
default: 0 |
|||
}, |
|||
// 顶部标题 |
|||
title: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
// 取消按钮的文字 |
|||
cancelText: { |
|||
type: String, |
|||
default: "取消" |
|||
}, |
|||
// 确认按钮的文字 |
|||
confirmText: { |
|||
type: String, |
|||
default: "确认" |
|||
}, |
|||
// 遮罩的模糊度 |
|||
blur: { |
|||
type: [String, Number], |
|||
default: 0 |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
popupValue: false, |
|||
years: [], |
|||
months: [], |
|||
days: [], |
|||
hours: [], |
|||
minutes: [], |
|||
seconds: [], |
|||
year: 0, |
|||
month: 0, |
|||
day: 0, |
|||
hour: 0, |
|||
minute: 0, |
|||
second: 0, |
|||
reset: false, |
|||
startDate: "", |
|||
endDate: "", |
|||
valueArr: [], |
|||
provinces: provinces, |
|||
citys: citys[0], |
|||
areas: areas[0][0], |
|||
province: 0, |
|||
city: 0, |
|||
area: 0, |
|||
moving: false // 列是否还在滑动中，微信小程序如果在滑动中就点确定，结果可能不准确 |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.init(); |
|||
}, |
|||
computed: { |
|||
valueCom() { |
|||
// #ifndef VUE3 |
|||
return this.value; |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
return this.modelValue; |
|||
// #endif |
|||
}, |
|||
propsChange() { |
|||
// 引用这几个变量，是为了监听其变化 |
|||
return `${this.mode}-${this.defaultTime}-${this.startYear}-${this.endYear}-${ |
|||
this.defaultRegion |
|||
}-${this.areaCode}`; |
|||
}, |
|||
regionChange() { |
|||
// 引用这几个变量，是为了监听其变化 |
|||
return `${this.province}-${this.city}`; |
|||
}, |
|||
yearAndMonth() { |
|||
return `${this.year}-${this.month}`; |
|||
}, |
|||
uZIndex() { |
|||
// 如果用户有传递z-index值，优先使用 |
|||
return this.zIndex ? this.zIndex : this.$u.zIndex.popup; |
|||
} |
|||
}, |
|||
watch: { |
|||
propsChange() { |
|||
this.reset = true; |
|||
setTimeout(() => this.init(), 10); |
|||
}, |
|||
// 如果地区发生变化，为了让picker联动起来，必须重置this.citys和this.areas |
|||
regionChange(val) { |
|||
this.citys = citys[this.province]; |
|||
this.areas = areas[this.province][this.city]; |
|||
}, |
|||
// watch监听月份的变化，实时变更日的天数，因为不同月份，天数不一样 |
|||
// 一个月可能有30，31天，甚至闰年2月的29天，平年2月28天 |
|||
yearAndMonth(val) { |
|||
if (this.params.year) this.setDays(); |
|||
}, |
|||
// 微信和QQ小程序由于一些奇怪的原因(故同时对所有平台均初始化一遍)，需要重新初始化才能显示正确的值 |
|||
valueCom:{ |
|||
immediate: true, |
|||
handler(n){ |
|||
if (n) { |
|||
this.reset = true; |
|||
setTimeout(() => this.init(), 10); |
|||
} |
|||
this.popupValue = n; |
|||
} |
|||
}, |
|||
}, |
|||
methods: { |
|||
// 标识滑动开始，只有微信小程序才有这样的事件 |
|||
pickstart() { |
|||
// #ifdef MP-WEIXIN |
|||
this.moving = true; |
|||
// #endif |
|||
}, |
|||
// 标识滑动结束 |
|||
pickend() { |
|||
// #ifdef MP-WEIXIN |
|||
this.moving = false; |
|||
// #endif |
|||
}, |
|||
// 对单列和多列形式的判断是否有传入变量的情况 |
|||
getItemValue(item, mode) { |
|||
// 目前(2020-05-25)uni-app对微信小程序编译有错误，导致v-if为false中的内容也执行，错误导致 |
|||
// 单列模式或者多列模式中的getItemValue同时被执行，故在这里再加一层判断 |
|||
if (this.mode == mode) { |
|||
return typeof item == "object" ? item[this.rangeKey] : item; |
|||
} |
|||
}, |
|||
// 小于10前面补0，用于月份，日期，时分秒等 |
|||
formatNumber(num) { |
|||
return +num < 10 ? "0" + num : String(num); |
|||
}, |
|||
// 生成递进的数组 |
|||
generateArray: function(start, end) { |
|||
// 转为数值格式，否则用户给end-year等传递字符串值时，下面的end+1会导致字符串拼接，而不是相加 |
|||
start = Number(start); |
|||
end = Number(end); |
|||
end = end > start ? end : start; |
|||
// 生成数组，获取其中的索引，并剪出来 |
|||
return [...Array(end + 1).keys()].slice(start); |
|||
}, |
|||
getIndex: function(arr, val) { |
|||
let index = arr.indexOf(val); |
|||
// 如果index为-1(即找不到index值)，~(-1)=-(-1)-1=0，导致条件不成立 |
|||
return ~index ? index : 0; |
|||
}, |
|||
//日期时间处理 |
|||
initTimeValue() { |
|||
// 格式化时间，在IE浏览器(uni不存在此情况)，无法识别日期间的"-"间隔符号 |
|||
let fdate = this.defaultTime.replace(/\-/g, "/"); |
|||
fdate = fdate && fdate.indexOf("/") == -1 ? `2020/01/01 ${fdate}` : fdate; |
|||
let time = null; |
|||
if (fdate) time = new Date(fdate); |
|||
else time = new Date(); |
|||
// 获取年日月时分秒 |
|||
this.year = time.getFullYear(); |
|||
this.month = Number(time.getMonth()) + 1; |
|||
this.day = time.getDate(); |
|||
this.hour = time.getHours(); |
|||
this.minute = time.getMinutes(); |
|||
this.second = time.getSeconds(); |
|||
}, |
|||
init() { |
|||
this.valueArr = []; |
|||
this.reset = false; |
|||
if (this.mode == "time") { |
|||
this.initTimeValue(); |
|||
if (this.params.year) { |
|||
this.valueArr.push(0); |
|||
this.setYears(); |
|||
} |
|||
if (this.params.month) { |
|||
this.valueArr.push(0); |
|||
this.setMonths(); |
|||
} |
|||
if (this.params.day) { |
|||
this.valueArr.push(0); |
|||
this.setDays(); |
|||
} |
|||
if (this.params.hour) { |
|||
this.valueArr.push(0); |
|||
this.setHours(); |
|||
} |
|||
if (this.params.minute) { |
|||
this.valueArr.push(0); |
|||
this.setMinutes(); |
|||
} |
|||
if (this.params.second) { |
|||
this.valueArr.push(0); |
|||
this.setSeconds(); |
|||
} |
|||
} else if (this.mode == "region") { |
|||
if (this.params.province) { |
|||
this.valueArr.push(0); |
|||
this.setProvinces(); |
|||
} |
|||
if (this.params.city) { |
|||
this.valueArr.push(0); |
|||
this.setCitys(); |
|||
} |
|||
if (this.params.area) { |
|||
this.valueArr.push(0); |
|||
this.setAreas(); |
|||
} |
|||
} else if (this.mode == "selector") { |
|||
this.valueArr = this.defaultSelector; |
|||
} else if (this.mode == "multiSelector") { |
|||
this.valueArr = this.defaultSelector; |
|||
this.multiSelectorValue = this.defaultSelector; |
|||
} |
|||
this.$forceUpdate(); |
|||
}, |
|||
// 设置picker的某一列值 |
|||
setYears() { |
|||
// 获取年份集合 |
|||
this.years = this.generateArray(this.startYear, this.endYear); |
|||
// 设置this.valueArr某一项的值，是为了让picker预选中某一个值 |
|||
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.years, this.year)); |
|||
}, |
|||
setMonths() { |
|||
this.months = this.generateArray(1, 12); |
|||
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.months, this.month)); |
|||
}, |
|||
setDays() { |
|||
let totalDays = new Date(this.year, this.month, 0).getDate(); |
|||
this.days = this.generateArray(1, totalDays); |
|||
let index = 0; |
|||
// 这里不能使用类似setMonths()中的this.valueArr.splice(this.valueArr.length - 1, xxx)做法 |
|||
// 因为this.month和this.year变化时，会触发watch中的this.setDays()，导致this.valueArr.length计算有误 |
|||
if (this.params.year && this.params.month) index = 2; |
|||
else if (this.params.month) index = 1; |
|||
else if (this.params.year) index = 1; |
|||
else index = 0; |
|||
// 当月份变化时，会导致日期的天数也会变化，如果原来选的天数大于变化后的天数，则重置为变化后的最大值 |
|||
// 比如原来选中3月31日，调整为2月后，日期变为最大29，这时如果day值继续为31显然不合理，于是将其置为29(picker-column从1开始) |
|||
if (this.day > this.days.length) this.day = this.days.length; |
|||
this.valueArr.splice(index, 1, this.getIndex(this.days, this.day)); |
|||
}, |
|||
setHours() { |
|||
this.hours = this.generateArray(0, 23); |
|||
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.hours, this.hour)); |
|||
}, |
|||
setMinutes() { |
|||
this.minutes = this.generateArray(0, 59); |
|||
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.minutes, this.minute)); |
|||
}, |
|||
setSeconds() { |
|||
this.seconds = this.generateArray(0, 59); |
|||
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.seconds, this.second)); |
|||
}, |
|||
setProvinces() { |
|||
// 判断是否需要province参数 |
|||
if (!this.params.province) return; |
|||
let tmp = ""; |
|||
let useCode = false; |
|||
// 如果同时配置了defaultRegion和areaCode，优先使用areaCode参数 |
|||
if (this.areaCode.length) { |
|||
tmp = this.areaCode[0]; |
|||
useCode = true; |
|||
} else if (this.defaultRegion.length) tmp = this.defaultRegion[0]; |
|||
else tmp = 0; |
|||
// 历遍省份数组匹配 |
|||
provinces.map((v, k) => { |
|||
if (useCode ? v.code == tmp : v.name == tmp) { |
|||
tmp = k; |
|||
} |
|||
}); |
|||
this.province = tmp; |
|||
this.provinces = provinces; |
|||
// 设置默认省份的值 |
|||
this.valueArr.splice(0, 1, this.province); |
|||
}, |
|||
setCitys() { |
|||
if (!this.params.city) return; |
|||
let tmp = ""; |
|||
let useCode = false; |
|||
if (this.areaCode.length) { |
|||
tmp = this.areaCode[1]; |
|||
useCode = true; |
|||
} else if (this.defaultRegion.length) tmp = this.defaultRegion[1]; |
|||
else tmp = 0; |
|||
citys[this.province].map((v, k) => { |
|||
if (useCode ? v.code == tmp : v.name == tmp) { |
|||
tmp = k; |
|||
} |
|||
}); |
|||
this.city = tmp; |
|||
this.citys = citys[this.province]; |
|||
this.valueArr.splice(1, 1, this.city); |
|||
}, |
|||
setAreas() { |
|||
if (!this.params.area) return; |
|||
let tmp = ""; |
|||
let useCode = false; |
|||
if (this.areaCode.length) { |
|||
tmp = this.areaCode[2]; |
|||
useCode = true; |
|||
} else if (this.defaultRegion.length) tmp = this.defaultRegion[2]; |
|||
else tmp = 0; |
|||
areas[this.province][this.city].map((v, k) => { |
|||
if (useCode ? v.code == tmp : v.name == tmp) { |
|||
tmp = k; |
|||
} |
|||
}); |
|||
this.area = tmp; |
|||
this.areas = areas[this.province][this.city]; |
|||
this.valueArr.splice(2, 1, this.area); |
|||
}, |
|||
close() { |
|||
this.$emit("input", false); |
|||
this.$emit("update:modelValue", false); |
|||
}, |
|||
// 用户更改picker的列选项 |
|||
change(e) { |
|||
this.valueArr = e.detail.value; |
|||
let i = 0; |
|||
if (this.mode == "time") { |
|||
// 这里使用i++，是因为this.valueArr数组的长度是不确定长度的，它根据this.params的值来配置长度 |
|||
// 进入if规则，i会加1，保证了能获取准确的值 |
|||
if (this.params.year) this.year = this.years[this.valueArr[i++]]; |
|||
if (this.params.month) this.month = this.months[this.valueArr[i++]]; |
|||
if (this.params.day) this.day = this.days[this.valueArr[i++]]; |
|||
if (this.params.hour) this.hour = this.hours[this.valueArr[i++]]; |
|||
if (this.params.minute) this.minute = this.minutes[this.valueArr[i++]]; |
|||
if (this.params.second) this.second = this.seconds[this.valueArr[i++]]; |
|||
} else if (this.mode == "region") { |
|||
if (this.params.province) this.province = this.valueArr[i++]; |
|||
if (this.params.city) this.city = this.valueArr[i++]; |
|||
if (this.params.area) this.area = this.valueArr[i++]; |
|||
} else if (this.mode == "multiSelector") { |
|||
let index = null; |
|||
// 对比前后两个数组，寻找变更的是哪一列，如果某一个元素不同，即可判定该列发生了变化 |
|||
this.defaultSelector.map((val, idx) => { |
|||
if (val != e.detail.value[idx]) index = idx; |
|||
}); |
|||
// 为了让用户对多列变化时，对动态设置其他列的变更 |
|||
if (index != null) { |
|||
this.$emit("columnchange", { |
|||
column: index, |
|||
index: e.detail.value[index] |
|||
}); |
|||
} |
|||
} |
|||
}, |
|||
// 用户点击确定按钮 |
|||
getResult(event = null) { |
|||
// #ifdef MP-WEIXIN |
|||
if (this.moving) return; |
|||
// #endif |
|||
let result = {}; |
|||
// 只返回用户在this.params中配置了为true的字段 |
|||
if (this.mode == "time") { |
|||
if (this.params.year) result.year = this.formatNumber(this.year || 0); |
|||
if (this.params.month) result.month = this.formatNumber(this.month || 0); |
|||
if (this.params.day) result.day = this.formatNumber(this.day || 0); |
|||
if (this.params.hour) result.hour = this.formatNumber(this.hour || 0); |
|||
if (this.params.minute) result.minute = this.formatNumber(this.minute || 0); |
|||
if (this.params.second) result.second = this.formatNumber(this.second || 0); |
|||
if (this.params.timestamp) result.timestamp = this.getTimestamp(); |
|||
} else if (this.mode == "region") { |
|||
if (this.params.province) result.province = provinces[this.province]; |
|||
if (this.params.city) result.city = citys[this.province][this.city]; |
|||
if (this.params.area) result.area = areas[this.province][this.city][this.area]; |
|||
} else if (this.mode == "selector") { |
|||
result = this.valueArr; |
|||
} else if (this.mode == "multiSelector") { |
|||
result = this.valueArr; |
|||
} |
|||
if (event) this.$emit(event, result); |
|||
this.close(); |
|||
}, |
|||
// 获取时间戳 |
|||
getTimestamp() { |
|||
// yyyy-mm-dd为安卓写法，不支持iOS，需要使用"/"分隔，才能二者兼容 |
|||
let time = |
|||
this.year + |
|||
"/" + |
|||
this.month + |
|||
"/" + |
|||
this.day + |
|||
" " + |
|||
this.hour + |
|||
":" + |
|||
this.minute + |
|||
":" + |
|||
this.second; |
|||
return new Date(time).getTime() / 1000; |
|||
}, |
|||
// 获得数据源 |
|||
getDateSource() { |
|||
return { |
|||
provinces, |
|||
citys, |
|||
areas |
|||
}; |
|||
}, |
|||
// 智能识别省市区 |
|||
regionDiscern(addressText){ |
|||
// 街道地址 |
|||
let address = ""; |
|||
// 省 |
|||
let province = {}; |
|||
// 市 |
|||
let city = {}; |
|||
// 区 |
|||
let area = {}; |
|||
if (!addressText) return { code: -1, msg: "地址文本不能为空" }; |
|||
addressText.trim(); // 去除前后空格 |
|||
// 省 |
|||
// 1.先找出省份，通过匹配前面两个字(中国34个省份中，前面两个字不会重复) |
|||
let firstTwoKey = addressText.substring(0, 2); //字符串开始的两个字符 |
|||
// 所在省的下标 |
|||
let provinceIndex = -1; |
|||
|
|||
for (let i = 0; i < provinces.length; i++) { |
|||
let { code, name } = provinces[i]; |
|||
if (name.indexOf(firstTwoKey) == 0) { |
|||
province = { code, name }; |
|||
provinceIndex = i; |
|||
break; |
|||
} |
|||
} |
|||
if (provinceIndex == -1) return { code: -1, msg: `省份【${firstTwoKey}】没有找到，请输入正确的地址` }; |
|||
|
|||
// 获取市 |
|||
let citysArr = citys[provinceIndex]; |
|||
// 所在市的下标 |
|||
let cityIndex = -1; |
|||
|
|||
for (let i = 0; i < citysArr.length; i++) { |
|||
let { name, code } = citysArr[i]; |
|||
// 除去最后一个 市 字 |
|||
let cityName = name.substr(0, name.length - 1); |
|||
// 用城市的名字去匹配 addressText 地址 |
|||
if (addressText.indexOf(cityName) > -1) { |
|||
city = { code, name }; |
|||
cityIndex = i; |
|||
break; |
|||
} |
|||
} |
|||
if (cityIndex == -1) return { code: -1, msg: `地级市没有找到，请输入正确的地址` }; |
|||
|
|||
// 区 |
|||
let areasArr = areas[provinceIndex][cityIndex]; |
|||
// 所在区的下标 |
|||
let areaIndex = -1; |
|||
|
|||
for (let i = 0; i < areasArr.length; i++) { |
|||
let { code, name } = areasArr[i]; |
|||
// 区名(县名)一般为3个字，如江干区，有可能会简写成 江干 |
|||
// 区名(县名)为2个字时，不会简写，如蓉县 |
|||
let reg = name; |
|||
if (name.length > 2) reg += `|${name.substr(0, name.length - 1)}`; |
|||
// 查找地址中是否存在该区名 |
|||
let areaRegExp = new RegExp(reg); |
|||
|
|||
if (addressText.search(areaRegExp) > -1) { |
|||
area = { code, name }; |
|||
// 详情地址 |
|||
address = addressText.replace(new RegExp(reg), "{{~}}").split("{{~}}")[1]; |
|||
areaIndex = i; |
|||
break; |
|||
} |
|||
} |
|||
if (areaIndex == -1) return { code: -1, msg: "县级市没有找到，请输入正确的地址" }; |
|||
let formatted_address = `${province.name}${city.name}${area.name}${address}`; |
|||
let res = { |
|||
code: 0, |
|||
msg: "ok", |
|||
data: { |
|||
province, // 省 |
|||
city, // 市 |
|||
area, // 区 |
|||
address, // 街道地址 |
|||
formatted_address, // 完整格式化地址 |
|||
} |
|||
}; |
|||
return res; |
|||
}, |
|||
|
|||
// 智能识别收货信息 |
|||
addressDiscern(text) { |
|||
// 收货人姓名 |
|||
let name = ""; |
|||
// 收货人手机 |
|||
let mobile = ""; |
|||
// 街道地址 |
|||
let address = ""; |
|||
// 省 |
|||
let province = {}; |
|||
// 市 |
|||
let city = {}; |
|||
// 区 |
|||
let area = {}; |
|||
|
|||
if (!text) return { code: -1, msg: "地址文本不能为空" }; |
|||
//let newText = text.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,' '); |
|||
let textArr = text.split(/[^\u4e00-\u9fa5a-zA-Z0-9+-（）()]+/g).filter(v => v.length); |
|||
if (textArr.length != 3) return { code: -1, msg: "地址格式不正确，请按姓名 手机号 收货地址格式。" }; |
|||
// 获取姓名和手机号 |
|||
let temp; |
|||
let addressText; // 地址原文 |
|||
for (let [k, v] of textArr.entries()) { |
|||
if (/^1[3,4,5,6,7,8,9][0-9]{9}$/.test(v)) { |
|||
mobile = v; |
|||
continue; |
|||
} |
|||
//记录第一次出现的字符串 |
|||
if (!temp) { |
|||
temp = v; |
|||
continue; |
|||
} |
|||
// 当前字符串的长度和之前字符串的长度的对比，进而确定姓名和地址信息 |
|||
temp.length > v.length? ((addressText = temp), (name = v)): ((addressText = v), (name = temp)); |
|||
} |
|||
let positionRes = this.regionDiscern(addressText); |
|||
if (positionRes.code !== 0) return positionRes; |
|||
|
|||
let res = { |
|||
code: 0, |
|||
msg: "ok", |
|||
data: { |
|||
name, // 姓名 |
|||
mobile, // 手机号 |
|||
position: positionRes.data, // 省市区街道信息 |
|||
} |
|||
}; |
|||
return res; |
|||
} |
|||
|
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.u-datetime-picker { |
|||
position: relative; |
|||
z-index: 999; |
|||
} |
|||
|
|||
.u-picker-view { |
|||
height: 100%; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.u-picker-header { |
|||
width: 100%; |
|||
height: 90rpx; |
|||
padding: 0 40rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
font-size: 30rpx; |
|||
background: #fff; |
|||
position: relative; |
|||
} |
|||
|
|||
.u-picker-header::after { |
|||
content: ""; |
|||
position: absolute; |
|||
border-bottom: 1rpx solid #eaeef1; |
|||
-webkit-transform: scaleY(0.5); |
|||
transform: scaleY(0.5); |
|||
bottom: 0; |
|||
right: 0; |
|||
left: 0; |
|||
} |
|||
|
|||
.u-picker__title { |
|||
color: $u-content-color; |
|||
} |
|||
|
|||
.u-picker-body { |
|||
width: 100%; |
|||
height: 500rpx; |
|||
overflow: hidden; |
|||
background-color: #fff; |
|||
} |
|||
|
|||
.u-column-item { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 32rpx; |
|||
color: $u-main-color; |
|||
padding: 0 8rpx; |
|||
} |
|||
|
|||
.u-text { |
|||
font-size: 24rpx; |
|||
padding-left: 8rpx; |
|||
} |
|||
|
|||
.u-btn-picker { |
|||
padding: 16rpx; |
|||
box-sizing: border-box; |
|||
text-align: center; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
.u-opacity { |
|||
opacity: 0.5; |
|||
} |
|||
|
|||
.u-btn-picker--primary { |
|||
color: $u-type-primary; |
|||
} |
|||
|
|||
.u-btn-picker--tips { |
|||
color: $u-tips-color; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,480 @@ |
|||
<template> |
|||
<view v-if="visibleSync" :style="[customStyle, { |
|||
zIndex: uZindex - 1 |
|||
}]" class="u-drawer" hover-stop-propagation> |
|||
<u-mask :blur="blur" :duration="duration" :custom-style="maskCustomStyle" :maskClickAble="maskCloseAble" :z-index="uZindex - 2" :show="showDrawer && mask" @click="maskClick"></u-mask> |
|||
<!-- 移除 @tap.stop.prevent --> |
|||
<view |
|||
class="u-drawer-content" |
|||
@tap="modeCenterClose(mode)" |
|||
:class="[ |
|||
safeAreaInsetBottom ? 'safe-area-inset-bottom' : '', |
|||
'u-drawer-' + mode, |
|||
showDrawer ? 'u-drawer-content-visible' : '', |
|||
zoom && mode == 'center' ? 'u-animation-zoom' : '' |
|||
]" |
|||
@touchmove.stop.prevent |
|||
:style="[style]" |
|||
> |
|||
<view class="u-mode-center-box" @tap.stop.prevent @touchmove.stop.prevent v-if="mode == 'center'" :style="[centerStyle]"> |
|||
<u-icon |
|||
@click="close" |
|||
v-if="closeable" |
|||
class="u-close" |
|||
:class="['u-close--' + closeIconPos]" |
|||
:name="closeIcon" |
|||
:color="closeIconColor" |
|||
:size="closeIconSize" |
|||
></u-icon> |
|||
<scroll-view class="u-drawer__scroll-view" scroll-y="true"> |
|||
<slot></slot> |
|||
</scroll-view> |
|||
</view> |
|||
<scroll-view class="u-drawer__scroll-view" scroll-y="true" v-else> |
|||
<slot></slot> |
|||
</scroll-view> |
|||
<view @tap="close" class="u-close" :class="['u-close--' + closeIconPos]"> |
|||
<u-icon |
|||
v-if="mode != 'center' && closeable" |
|||
:name="closeIcon" |
|||
:color="closeIconColor" |
|||
:size="closeIconSize" |
|||
></u-icon> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* popup 弹窗 |
|||
* @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义 |
|||
* @tutorial https://www.uviewui.com/components/popup.html |
|||
* @property {String} mode 弹出方向（默认left） |
|||
* @property {Boolean} mask 是否显示遮罩（默认true） |
|||
* @property {Stringr | Number} length mode=left | 见官网说明（默认auto） |
|||
* @property {Boolean} zoom 是否开启缩放动画，只在mode为center时有效（默认true） |
|||
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false） |
|||
* @property {Boolean} mask-close-able 点击遮罩是否可以关闭弹出层（默认true） |
|||
* @property {Object} custom-style 用户自定义样式 |
|||
* @property {Stringr | Number} negative-top 中部弹出时，往上偏移的值 |
|||
* @property {Numberr | String} border-radius 弹窗圆角值（默认0） |
|||
* @property {Numberr | String} z-index 弹出内容的z-index值（默认1075） |
|||
* @property {Boolean} closeable 是否显示关闭图标（默认false） |
|||
* @property {String} close-icon 关闭图标的名称，只能uView的内置图标 |
|||
* @property {String} close-icon-pos 自定义关闭图标位置（默认top-right） |
|||
* @property {String} close-icon-color 关闭图标的颜色（默认#909399） |
|||
* @property {Number | String} close-icon-size 关闭图标的大小，单位rpx（默认30） |
|||
* @event {Function} open 弹出层打开 |
|||
* @event {Function} close 弹出层收起 |
|||
* @example <u-popup v-model="show"><view>出淤泥而不染，濯清涟而不妖</view></u-popup> |
|||
*/ |
|||
export default { |
|||
name: 'u-popup', |
|||
emits: ["update:modelValue", "input", "open", "close"], |
|||
props: { |
|||
value: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
modelValue: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
/** |
|||
* 显示状态 |
|||
*/ |
|||
show: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
/** |
|||
* 弹出方向，left|right|top|bottom|center |
|||
*/ |
|||
mode: { |
|||
type: String, |
|||
default: 'left' |
|||
}, |
|||
/** |
|||
* 是否显示遮罩 |
|||
*/ |
|||
mask: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 抽屉的宽度(mode=left|right)，或者高度(mode=top|bottom)，单位rpx，或者"auto" |
|||
// 或者百分比"50%"，表示由内容撑开高度或者宽度 |
|||
length: { |
|||
type: [Number, String], |
|||
default: 'auto' |
|||
}, |
|||
// 是否开启缩放动画，只在mode=center时有效 |
|||
zoom: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距 |
|||
safeAreaInsetBottom: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否可以通过点击遮罩进行关闭 |
|||
maskCloseAble: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 用户自定义样式 |
|||
customStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
} |
|||
}, |
|||
// 此为内部参数，不在文档对外使用，为了解决Picker和keyboard等融合了弹窗的组件 |
|||
// 对v-model双向绑定多层调用造成报错不能修改props值的问题 |
|||
popup: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 显示显示弹窗的圆角，单位rpx |
|||
borderRadius: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
zIndex: { |
|||
type: [Number, String], |
|||
default: '' |
|||
}, |
|||
// 是否显示关闭图标 |
|||
closeable: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 关闭图标的名称，只能uView的内置图标 |
|||
closeIcon: { |
|||
type: String, |
|||
default: 'close' |
|||
}, |
|||
// 自定义关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角 |
|||
closeIconPos: { |
|||
type: String, |
|||
default: 'top-right' |
|||
}, |
|||
// 关闭图标的颜色 |
|||
closeIconColor: { |
|||
type: String, |
|||
default: '#909399' |
|||
}, |
|||
// 关闭图标的大小，单位rpx |
|||
closeIconSize: { |
|||
type: [String, Number], |
|||
default: '30' |
|||
}, |
|||
// 宽度，只对左，右，中部弹出时起作用，单位rpx，或者"auto" |
|||
// 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数 |
|||
width: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 高度，只对上，下，中部弹出时起作用，单位rpx，或者"auto" |
|||
// 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数 |
|||
height: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 给一个负的margin-top，往上偏移，避免和键盘重合的情况，仅在mode=center时有效 |
|||
negativeTop: { |
|||
type: [String, Number], |
|||
default: 0 |
|||
}, |
|||
// 遮罩的样式，一般用于修改遮罩的透明度 |
|||
maskCustomStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {} |
|||
} |
|||
}, |
|||
// 遮罩打开或收起的动画过渡时间，单位ms |
|||
duration: { |
|||
type: [String, Number], |
|||
default: 250 |
|||
}, |
|||
// 遮罩的模糊度 |
|||
blur: { |
|||
type: [String, Number], |
|||
default: 0 |
|||
}, |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
visibleSync: false, |
|||
showDrawer: false, |
|||
timer: null, |
|||
closeFromInner: false, // value的值改变，是发生在内部还是外部 |
|||
}; |
|||
}, |
|||
computed: { |
|||
valueCom(){ |
|||
// #ifndef VUE3 |
|||
return this.value; |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
return this.modelValue; |
|||
// #endif |
|||
}, |
|||
// 根据mode的位置，设定其弹窗的宽度(mode = left|right)，或者高度(mode = top|bottom) |
|||
style() { |
|||
let style = {}; |
|||
// 如果是左边或者上边弹出时，需要给translate设置为负值，用于隐藏 |
|||
if (this.mode == 'left' || this.mode == 'right') { |
|||
style = { |
|||
width: this.width ? this.getUnitValue(this.width) : this.getUnitValue(this.length), |
|||
height: '100%', |
|||
transform: `translate3D(${this.mode == 'left' ? '-100%' : '100%'},0px,0px)` |
|||
}; |
|||
} else if (this.mode == 'top' || this.mode == 'bottom') { |
|||
style = { |
|||
width: '100%', |
|||
height: this.height ? this.getUnitValue(this.height) : this.getUnitValue(this.length), |
|||
transform: `translate3D(0px,${this.mode == 'top' ? '-100%' : '100%'},0px)` |
|||
}; |
|||
} |
|||
style.zIndex = this.uZindex; |
|||
// 如果用户设置了borderRadius值，添加弹窗的圆角 |
|||
if (this.borderRadius) { |
|||
switch (this.mode) { |
|||
case 'left': |
|||
style.borderRadius = `0 ${this.borderRadius}rpx ${this.borderRadius}rpx 0`; |
|||
break; |
|||
case 'top': |
|||
style.borderRadius = `0 0 ${this.borderRadius}rpx ${this.borderRadius}rpx`; |
|||
break; |
|||
case 'right': |
|||
style.borderRadius = `${this.borderRadius}rpx 0 0 ${this.borderRadius}rpx`; |
|||
break; |
|||
case 'bottom': |
|||
style.borderRadius = `${this.borderRadius}rpx ${this.borderRadius}rpx 0 0`; |
|||
break; |
|||
default: |
|||
} |
|||
// 不加可能圆角无效 |
|||
style.overflow = 'hidden'; |
|||
} |
|||
if(this.duration) style.transition = `all ${this.duration / 1000}s linear`; |
|||
return style; |
|||
}, |
|||
// 中部弹窗的特有样式 |
|||
centerStyle() { |
|||
let style = {}; |
|||
style.width = this.width ? this.getUnitValue(this.width) : this.getUnitValue(this.length); |
|||
// 中部弹出的模式，如果没有设置高度，就用auto值，由内容撑开高度 |
|||
style.height = this.height ? this.getUnitValue(this.height) : 'auto'; |
|||
style.zIndex = this.uZindex; |
|||
style.marginTop = `-${this.$u.addUnit(this.negativeTop)}`; |
|||
if (this.borderRadius) { |
|||
style.borderRadius = `${this.borderRadius}rpx`; |
|||
// 不加可能圆角无效 |
|||
style.overflow = 'hidden'; |
|||
} |
|||
return style; |
|||
}, |
|||
// 计算整理后的z-index值 |
|||
uZindex() { |
|||
return this.zIndex ? this.zIndex : this.$u.zIndex.popup; |
|||
} |
|||
}, |
|||
watch: { |
|||
valueCom:{ |
|||
immediate: true, |
|||
handler(val){ |
|||
if (val) { |
|||
this.open(); |
|||
} else if(!this.closeFromInner) { |
|||
this.close(); |
|||
} |
|||
this.closeFromInner = false; |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
// 组件渲染完成时，检查value是否为true，如果是，弹出popup |
|||
this.valueCom && this.open(); |
|||
}, |
|||
methods: { |
|||
// 判断传入的值，是否带有单位，如果没有，就默认用rpx单位 |
|||
getUnitValue(val) { |
|||
if(/(%|px|rpx|auto)$/.test(val)) return val; |
|||
else return val + 'rpx' |
|||
}, |
|||
// 遮罩被点击 |
|||
maskClick() { |
|||
this.close(); |
|||
}, |
|||
close() { |
|||
// 标记关闭是内部发生的，否则修改了value值，导致watch中对value检测，导致再执行一遍close |
|||
// 造成@close事件触发两次 |
|||
this.closeFromInner = true; |
|||
this.change('showDrawer', 'visibleSync', false); |
|||
}, |
|||
// 中部弹出时，需要.u-drawer-content将居中内容，此元素会铺满屏幕，点击需要关闭弹窗 |
|||
// 让其只在mode=center时起作用 |
|||
modeCenterClose(mode) { |
|||
if (mode != 'center' || !this.maskCloseAble) return; |
|||
this.close(); |
|||
}, |
|||
open() { |
|||
this.change('visibleSync', 'showDrawer', true); |
|||
}, |
|||
// 此处的原理是，关闭时先通过动画隐藏弹窗和遮罩，再移除整个组件 |
|||
// 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用 |
|||
change(param1, param2, status) { |
|||
// 如果this.popup为false，意味着为picker，actionsheet等组件调用了popup组件 |
|||
if (this.popup == true) { |
|||
this.$emit('input', status); |
|||
this.$emit("update:modelValue", status); |
|||
} |
|||
this[param1] = status; |
|||
if(status) { |
|||
// #ifdef H5 || MP |
|||
this.timer = setTimeout(() => { |
|||
this[param2] = status; |
|||
this.$emit(status ? 'open' : 'close'); |
|||
}, 50); |
|||
// #endif |
|||
// #ifndef H5 || MP |
|||
this.$nextTick(() => { |
|||
this[param2] = status; |
|||
this.$emit(status ? 'open' : 'close'); |
|||
}) |
|||
// #endif |
|||
} else { |
|||
this.timer = setTimeout(() => { |
|||
this[param2] = status; |
|||
this.$emit(status ? 'open' : 'close'); |
|||
}, this.duration); |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-drawer { |
|||
/* #ifndef APP-NVUE */ |
|||
display: block; |
|||
/* #endif */ |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.u-drawer-content { |
|||
/* #ifndef APP-NVUE */ |
|||
display: block; |
|||
/* #endif */ |
|||
position: absolute; |
|||
z-index: 1003; |
|||
transition: all 0.25s linear; |
|||
} |
|||
|
|||
.u-drawer__scroll-view { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.u-drawer-left { |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
.u-drawer-right { |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
.u-drawer-top { |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
.u-drawer-bottom { |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
.u-drawer-center { |
|||
@include vue-flex; |
|||
flex-direction: column; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
justify-content: center; |
|||
align-items: center; |
|||
opacity: 0; |
|||
z-index: 99999; |
|||
} |
|||
|
|||
.u-mode-center-box { |
|||
min-width: 100rpx; |
|||
min-height: 100rpx; |
|||
/* #ifndef APP-NVUE */ |
|||
display: block; |
|||
/* #endif */ |
|||
position: relative; |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
.u-drawer-content-visible.u-drawer-center { |
|||
transform: scale(1); |
|||
opacity: 1; |
|||
} |
|||
|
|||
.u-animation-zoom { |
|||
transform: scale(1.15); |
|||
} |
|||
|
|||
.u-drawer-content-visible { |
|||
transform: translate3D(0px, 0px, 0px) !important; |
|||
} |
|||
|
|||
.u-close { |
|||
position: absolute; |
|||
z-index: 3; |
|||
} |
|||
|
|||
.u-close--top-left { |
|||
top: 30rpx; |
|||
left: 30rpx; |
|||
} |
|||
|
|||
.u-close--top-right { |
|||
top: 30rpx; |
|||
right: 30rpx; |
|||
} |
|||
|
|||
.u-close--bottom-left { |
|||
bottom: 30rpx; |
|||
left: 30rpx; |
|||
} |
|||
|
|||
.u-close--bottom-right { |
|||
right: 30rpx; |
|||
bottom: 30rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,176 @@ |
|||
<template> |
|||
<view class="u-radio-group u-clearfix" :class="uFromData.inputAlign == 'right' ? 'flex-end' : ''"> |
|||
<slot></slot> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import Emitter from "../../libs/util/emitter.js"; |
|||
/** |
|||
* radioRroup 单选框父组件 |
|||
* @description 单选框用于有一个选择，用户只能选择其中一个的场景。搭配u-radio使用 |
|||
* @tutorial https://www.uviewui.com/components/radio.html |
|||
* @property {Boolean} disabled 是否禁用所有radio（默认false） |
|||
* @property {String Number} size 组件整体的大小，单位rpx（默认40） |
|||
* @property {String} active-color 选中时的颜色，应用到所有子Radio组件（默认#2979ff） |
|||
* @property {String Number} icon-size 图标大小，单位rpx（默认20） |
|||
* @property {String} shape 外观形状，shape-方形，circle-圆形(默认circle) |
|||
* @property {Boolean} label-disabled 是否禁止点击文本操作checkbox(默认false) |
|||
* @property {String} width 宽度，需带单位 |
|||
* @property {Boolean} wrap 是否每个radio都换行（默认false） |
|||
* @event {Function} change 任一个radio状态发生变化时触发 |
|||
* @example <u-radio-group v-model="value"></u-radio-group> |
|||
*/ |
|||
export default { |
|||
name: "u-radio-group", |
|||
emits: ["update:modelValue", "input", "change"], |
|||
mixins: [Emitter], |
|||
props: { |
|||
// 匹配某一个radio组件，如果某个radio的name值等于此值，那么这个radio就被会选中 |
|||
value: { |
|||
type: [String, Number], |
|||
default: "" |
|||
}, |
|||
modelValue: { |
|||
type: [String, Number], |
|||
default: "" |
|||
}, |
|||
// 是否禁用所有单选框 |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 选中状态下的颜色 |
|||
activeColor: { |
|||
type: String, |
|||
default: "#2979ff" |
|||
}, |
|||
// 组件的整体大小 |
|||
size: { |
|||
type: [String, Number], |
|||
default: 34 |
|||
}, |
|||
// 是否禁止点击提示语选中复选框 |
|||
labelDisabled: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 形状，square为方形，circle为圆型 |
|||
shape: { |
|||
type: String, |
|||
default: "circle" |
|||
}, |
|||
// 图标的大小，单位rpx |
|||
iconSize: { |
|||
type: [String, Number], |
|||
default: 20 |
|||
}, |
|||
// 每个checkbox占u-checkbox-group的宽度 |
|||
width: { |
|||
type: [String, Number], |
|||
default: "auto" |
|||
}, |
|||
// 是否每个checkbox都换行 |
|||
wrap: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
uFromData: { |
|||
inputAlign: "left" |
|||
} |
|||
}; |
|||
}, |
|||
created() { |
|||
// 如果将children定义在data中，在微信小程序会造成循环引用而报错 |
|||
this.children = []; |
|||
}, |
|||
mounted() { |
|||
// 支付宝、头条小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环应用 |
|||
let parent = this.$u.$parent.call(this, "u-form"); |
|||
if (parent) { |
|||
Object.keys(this.uFromData).map(key => { |
|||
this.uFromData[key] = parent[key]; |
|||
}); |
|||
} |
|||
}, |
|||
watch: { |
|||
// 当父组件需要子组件需要共享的参数发生了变化，手动通知子组件 |
|||
parentData() { |
|||
if (this.children.length) { |
|||
this.children.map(child => { |
|||
// 判断子组件(u-radio)如果有updateParentData方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值) |
|||
typeof child.updateParentData == "function" && child.updateParentData(); |
|||
}); |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
valueCom() { |
|||
// #ifndef VUE3 |
|||
return this.value; |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
return this.modelValue; |
|||
// #endif |
|||
}, |
|||
// 这里computed的变量，都是子组件u-radio需要用到的，由于头条小程序的兼容性差异，子组件无法实时监听父组件参数的变化 |
|||
// 所以需要手动通知子组件，这里返回一个parentData变量，供watch监听，在其中去通知每一个子组件重新从父组件(u-radio-group) |
|||
// 拉取父组件新的变化后的参数 |
|||
parentData() { |
|||
return [ |
|||
this.value, |
|||
this.disabled, |
|||
this.activeColor, |
|||
this.size, |
|||
this.labelDisabled, |
|||
this.shape, |
|||
this.iconSize, |
|||
this.width, |
|||
this.wrap |
|||
]; |
|||
} |
|||
}, |
|||
methods: { |
|||
// 该方法有子组件radio调用，当一个radio被选中的时候，给父组件设置value值(props传递的value) |
|||
setValue(val) { |
|||
// 通过子组件传递过来的val值(此被选中的子组件内部已将parentValue设置等于val的值)，将其他 |
|||
// u-radio设置未选中的状态 |
|||
this.children.map(child => { |
|||
if (child.parentData.value != val) child.parentData.value = ""; |
|||
}); |
|||
// 通过emit事件，设置父组件通过v-model双向绑定的值 |
|||
this.$emit("input", val); |
|||
this.$emit("update:modelValue", val); |
|||
this.$emit("change", val); |
|||
// 等待下一个周期再执行，因为this.$emit('input')作用于父组件，再反馈到子组件内部，需要时间 |
|||
// 由于头条小程序执行迟钝，故需要用几十毫秒的延时 |
|||
setTimeout(() => { |
|||
// 将当前的值发送到 u-form-item 进行校验 |
|||
this.dispatch("u-form-item", "onFieldChange", val); |
|||
}, 60); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-radio-group { |
|||
/* #ifndef MP || APP-NVUE */ |
|||
display: inline-flex; |
|||
flex-wrap: wrap; |
|||
/* #endif */ |
|||
} |
|||
.u-radio-group.flex-end { |
|||
/* #ifndef APP-NVUE */ |
|||
display: inline-flex; |
|||
justify-content: flex-end; |
|||
flex-wrap: wrap; |
|||
/* #endif */ |
|||
} |
|||
</style> |
|||
@ -0,0 +1,276 @@ |
|||
<template> |
|||
<view class="u-radio" :style="[radioStyle]"> |
|||
<view class="u-radio__icon-wrap" @tap="toggle" :class="[iconClass]" :style="[iconStyle]"> |
|||
<u-icon |
|||
class="u-radio__icon-wrap__icon" |
|||
name="checkbox-mark" |
|||
:size="elIconSize" |
|||
:color="iconColor" |
|||
/> |
|||
</view> |
|||
<view class="u-radio__label" @tap="onClickLabel" :style="{ fontSize: $u.addUnit(labelSize) }"> |
|||
<slot /> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* radio 单选框 |
|||
* @description 单选框用于有一个选择，用户只能选择其中一个的场景。搭配u-radio-group使用 |
|||
* @tutorial https://www.uviewui.com/components/radio.html |
|||
* @property {String Number} icon-size 图标大小，单位rpx（默认24） |
|||
* @property {String Number} label-size label字体大小，单位rpx（默认28） |
|||
* @property {String Number} name radio组件的标示符 |
|||
* @property {String} shape 形状，见上方说明（默认circle） |
|||
* @property {Boolean} disabled 是否禁用（默认false） |
|||
* @property {Boolean} label-disabled 点击文本是否可以操作radio（默认true） |
|||
* @property {String} active-color 选中时的颜色，如设置parent的active-color将失效 |
|||
* @event {Function} change 某个radio状态发生变化时触发(选中状态) |
|||
* @example <u-radio :label-disabled="false">门掩黄昏，无计留春住</u-radio> |
|||
*/ |
|||
export default { |
|||
name: "u-radio", |
|||
emits: ["change"], |
|||
props: { |
|||
// radio的名称 |
|||
name: { |
|||
type: [String, Number], |
|||
default: "" |
|||
}, |
|||
// 组件的整体大小 |
|||
size: { |
|||
type: [String, Number], |
|||
default: 34 |
|||
}, |
|||
// 形状，square为方形，circle为原型 |
|||
shape: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
// 是否禁用 |
|||
disabled: { |
|||
type: [String, Boolean], |
|||
default: "" |
|||
}, |
|||
// 是否禁止点击提示语选中复选框 |
|||
labelDisabled: { |
|||
type: [String, Boolean], |
|||
default: "" |
|||
}, |
|||
// 选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值 |
|||
activeColor: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
// 图标的大小，单位rpx |
|||
iconSize: { |
|||
type: [String, Number], |
|||
default: "" |
|||
}, |
|||
// label的字体大小，rpx单位 |
|||
labelSize: { |
|||
type: [String, Number], |
|||
default: "" |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
// 父组件的默认值，因为头条小程序不支持在computed中使用this.parent.shape的形式 |
|||
// 故只能使用如此方法 |
|||
parentData: { |
|||
iconSize: null, |
|||
labelDisabled: null, |
|||
disabled: null, |
|||
shape: null, |
|||
activeColor: null, |
|||
size: null, |
|||
width: null, |
|||
height: null, |
|||
value: null, |
|||
wrap: null |
|||
} |
|||
}; |
|||
}, |
|||
created() { |
|||
this.parent = false; |
|||
// 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用 |
|||
this.updateParentData(); |
|||
this.parent.children.push(this); |
|||
}, |
|||
computed: { |
|||
// 是否禁用，如果父组件u-raios-group禁用的话，将会忽略子组件的配置 |
|||
elDisabled() { |
|||
return this.disabled !== ""? this.disabled: this.parentData.disabled !== null? this.parentData.disabled: false; |
|||
}, |
|||
// 是否禁用label点击 |
|||
elLabelDisabled() { |
|||
return this.labelDisabled !== ""? this.labelDisabled: this.parentData.labelDisabled !== null? this.parentData.labelDisabled: false; |
|||
}, |
|||
// 组件尺寸，对应size的值，默认值为34rpx |
|||
elSize() { |
|||
return this.size ? this.size : this.parentData.size ? this.parentData.size : 34; |
|||
}, |
|||
// 组件的勾选图标的尺寸，默认20 |
|||
elIconSize() { |
|||
return this.iconSize? this.iconSize: this.parentData.iconSize? this.parentData.iconSize: 20; |
|||
}, |
|||
// 组件选中激活时的颜色 |
|||
elActiveColor() { |
|||
return this.activeColor? this.activeColor: this.parentData.activeColor? this.parentData.activeColor: "primary"; |
|||
}, |
|||
// 组件的形状 |
|||
elShape() { |
|||
return this.shape ? this.shape : this.parentData.shape ? this.parentData.shape : "circle"; |
|||
}, |
|||
// 设置radio的状态，要求radio的name等于parent的value时才为选中状态 |
|||
iconStyle() { |
|||
let style = {}; |
|||
if (this.elActiveColor && this.parentData.value === this.name && !this.elDisabled) { |
|||
style.borderColor = this.elActiveColor; |
|||
style.backgroundColor = this.elActiveColor; |
|||
} |
|||
style.width = this.$u.addUnit(this.elSize); |
|||
style.height = this.$u.addUnit(this.elSize); |
|||
return style; |
|||
}, |
|||
iconColor() { |
|||
return this.name === this.parentData.value ? "#ffffff" : "transparent"; |
|||
}, |
|||
iconClass() { |
|||
let classes = []; |
|||
classes.push("u-radio__icon-wrap--" + this.elShape); |
|||
if (this.name === this.parentData.value) classes.push("u-radio__icon-wrap--checked"); |
|||
if (this.elDisabled) classes.push("u-radio__icon-wrap--disabled"); |
|||
if (this.name === this.parentData.value && this.elDisabled) |
|||
classes.push("u-radio__icon-wrap--disabled--checked"); |
|||
// 支付宝小程序无法动态绑定一个数组类名，否则解析出来的结果会带有","，而导致失效 |
|||
return classes.join(" "); |
|||
}, |
|||
radioStyle() { |
|||
let style = {}; |
|||
if (this.parentData.width) { |
|||
style.width = this.$u.addUnit(this.parentData.width); |
|||
// #ifdef MP |
|||
// 各家小程序因为它们特殊的编译结构，使用float布局 |
|||
style.float = "left"; |
|||
// #endif |
|||
// #ifndef MP |
|||
// H5和APP使用flex布局 |
|||
style.flex = `0 0 ${this.$u.addUnit(this.parentData.width)}`; |
|||
// #endif |
|||
} |
|||
if (this.parentData.wrap) { |
|||
style.width = "100%"; |
|||
// #ifndef MP |
|||
// H5和APP使用flex布局，将宽度设置100%，即可自动换行 |
|||
style.flex = "0 0 100%"; |
|||
// #endif |
|||
} |
|||
return style; |
|||
} |
|||
}, |
|||
methods: { |
|||
updateParentData() { |
|||
this.getParentData("u-radio-group"); |
|||
}, |
|||
onClickLabel() { |
|||
if (!this.elLabelDisabled && !this.elDisabled) { |
|||
this.setRadioCheckedStatus(); |
|||
} |
|||
}, |
|||
toggle() { |
|||
if (!this.elDisabled) { |
|||
this.setRadioCheckedStatus(); |
|||
} |
|||
}, |
|||
emitEvent() { |
|||
// u-radio的name不等于父组件的v-model的值时(意味着未选中)，才发出事件，避免多次点击触发事件 |
|||
if (this.parentData.value != this.name) this.$emit("change", this.name); |
|||
}, |
|||
// 改变组件选中状态 |
|||
// 这里的改变的依据是，更改本组件的parentData.value值为本组件的name值，同时通过父组件遍历所有u-radio实例 |
|||
// 将本组件外的其他u-radio的parentData.value都设置为空(由computed计算后，都被取消选中状态)，因而只剩下一个为选中状态 |
|||
setRadioCheckedStatus() { |
|||
this.emitEvent(); |
|||
if (this.parent) { |
|||
this.parent.setValue(this.name); |
|||
this.parentData.value = this.name; |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-radio { |
|||
/* #ifndef APP-NVUE */ |
|||
display: inline-flex; |
|||
/* #endif */ |
|||
align-items: center; |
|||
overflow: hidden; |
|||
user-select: none; |
|||
line-height: 1.8; |
|||
|
|||
&__icon-wrap { |
|||
color: $u-content-color; |
|||
@include vue-flex; |
|||
flex: none; |
|||
align-items: center; |
|||
justify-content: center; |
|||
box-sizing: border-box; |
|||
width: 42rpx; |
|||
height: 42rpx; |
|||
color: transparent; |
|||
text-align: center; |
|||
transition-property: color, border-color, background-color; |
|||
font-size: 20px; |
|||
border: 1px solid #c8c9cc; |
|||
transition-duration: 0.2s; |
|||
|
|||
/* #ifdef MP-TOUTIAO */ |
|||
// 头条小程序兼容性问题，需要设置行高为0，否则图标偏下 |
|||
&__icon { |
|||
line-height: 0; |
|||
} |
|||
/* #endif */ |
|||
|
|||
&--circle { |
|||
border-radius: 100%; |
|||
} |
|||
|
|||
&--square { |
|||
border-radius: 3px; |
|||
} |
|||
|
|||
&--checked { |
|||
color: #fff; |
|||
background-color: #2979ff; |
|||
border-color: #2979ff; |
|||
} |
|||
|
|||
&--disabled { |
|||
background-color: #ebedf0; |
|||
border-color: #c8c9cc; |
|||
} |
|||
|
|||
&--disabled--checked { |
|||
color: #c8c9cc !important; |
|||
} |
|||
} |
|||
|
|||
&__label { |
|||
word-wrap: break-word; |
|||
margin-left: 10rpx; |
|||
margin-right: 24rpx; |
|||
color: $u-content-color; |
|||
font-size: 30rpx; |
|||
|
|||
&--disabled { |
|||
color: #c8c9cc; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,293 @@ |
|||
<template> |
|||
<view class="u-rate" :id="elId" @touchmove.stop.prevent="touchMove"> |
|||
<view class="u-star-wrap" v-for="(item, index) in count" :key="index" :class="[elClass]"> |
|||
<u-icon |
|||
:name="activeIndex > index ? elActiveIcon : inactiveIcon" |
|||
@click="click(index + 1, $event)" |
|||
:color="activeIndex > index ? elActiveColor : inactiveColor" |
|||
:custom-style="{ |
|||
fontSize: size + 'rpx', |
|||
padding: `0 ${gutter / 2 + 'rpx'}` |
|||
}" |
|||
:custom-prefix="customPrefix" |
|||
:show-decimal-icon="showDecimalIcon(index)" |
|||
:percent="decimal" |
|||
:inactive-color="inactiveColor" |
|||
></u-icon> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script>/** |
|||
* rate 评分 |
|||
* @description 该组件一般用于满意度调查，星型评分的场景 |
|||
* @tutorial https://www.uviewui.com/components/rate.html |
|||
* @property {String Number} count 最多可选的星星数量（默认5） |
|||
* @property {String Number} current 默认选中的星星数量（默认0） |
|||
* @property {Boolean} disabled 是否禁止用户操作（默认false） |
|||
* @property {String Number} size 星星的大小，单位rpx（默认32） |
|||
* @property {String} inactive-color 未选中星星的颜色（默认#b2b2b2） |
|||
* @property {String} active-color 选中的星星颜色（默认#FA3534） |
|||
* @property {String} active-icon 选中时的图标名，只能为uView的内置图标（默认star-fill） |
|||
* @property {String} inactive-icon 未选中时的图标名，只能为uView的内置图标（默认star） |
|||
* @property {String} gutter 星星之间的距离（默认10） |
|||
* @property {String Number} min-count 最少选中星星的个数（默认0） |
|||
* @property {Boolean} allow-half 是否允许半星选择（默认false） |
|||
* @event {Function} change 选中的星星发生变化时触发 |
|||
* @example <u-rate :count="count" :current="2"></u-rate> |
|||
*/ |
|||
|
|||
export default { |
|||
name: 'u-rate', |
|||
emits: ["update:modelValue", "input", "change"], |
|||
props: { |
|||
// 用于v-model双向绑定选中的星星数量 |
|||
// 1.4.5版新增 |
|||
value: { |
|||
type: [Number, String], |
|||
default: -1 |
|||
}, |
|||
modelValue: { |
|||
type: [Number, String], |
|||
default: -1 |
|||
}, |
|||
// 要显示的星星数量 |
|||
count: { |
|||
type: [Number, String], |
|||
default: 5 |
|||
}, |
|||
// 当前需要默认选中的星星(选中的个数) |
|||
// 1.4.5后通过value双向绑定，不再建议使用此参数 |
|||
current: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
// 是否不可选中 |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 星星的大小，单位rpx |
|||
size: { |
|||
type: [Number, String], |
|||
default: 32 |
|||
}, |
|||
// 未选中时的颜色 |
|||
inactiveColor: { |
|||
type: String, |
|||
default: '#b2b2b2' |
|||
}, |
|||
// 选中的颜色 |
|||
activeColor: { |
|||
type: String, |
|||
default: '#FA3534' |
|||
}, |
|||
// 星星之间的间距，单位rpx |
|||
gutter: { |
|||
type: [Number, String], |
|||
default: 10 |
|||
}, |
|||
// 最少能选择的星星个数 |
|||
minCount: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
// 是否允许半星(功能尚未实现) |
|||
allowHalf: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 选中时的图标(星星) |
|||
activeIcon: { |
|||
type: String, |
|||
default: 'star-fill' |
|||
}, |
|||
// 未选中时的图标(星星) |
|||
inactiveIcon: { |
|||
type: String, |
|||
default: 'star' |
|||
}, |
|||
// 自定义扩展前缀，方便用户扩展自己的图标库 |
|||
customPrefix: { |
|||
type: String, |
|||
default: 'uicon' |
|||
}, |
|||
colors: { |
|||
type: Array, |
|||
default() { |
|||
return [] |
|||
} |
|||
}, |
|||
icons: { |
|||
type: Array, |
|||
default() { |
|||
return [] |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
// 生成一个唯一id，否则一个页面多个评分组件，会造成冲突 |
|||
elId: this.$u.guid(), |
|||
elClass: this.$u.guid(), |
|||
starBoxLeft: 0, // 评分盒子左边到屏幕左边的距离，用于滑动选择时计算距离 |
|||
// 当前激活的星星的index，如果存在value，优先使用value，因为它可以双向绑定(1.4.5新增) |
|||
activeIndex: 0, |
|||
starWidth: 0, // 每个星星的宽度 |
|||
starWidthArr: [] //每个星星最右边到组件盒子最左边的距离 |
|||
} |
|||
}, |
|||
created() { |
|||
this.activeIndex = this.valueCom != -1 ? this.valueCom : this.current; |
|||
}, |
|||
watch: { |
|||
current(val) { |
|||
this.activeIndex = val |
|||
}, |
|||
valueCom(val) { |
|||
this.activeIndex = val |
|||
} |
|||
}, |
|||
computed: { |
|||
valueCom() { |
|||
// #ifndef VUE3 |
|||
return this.value; |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
return this.modelValue; |
|||
// #endif |
|||
}, |
|||
decimal() { |
|||
if (this.disabled) { |
|||
return this.activeIndex * 100 % 100 |
|||
} else if (this.allowHalf) { |
|||
return 50 |
|||
} |
|||
}, |
|||
elActiveIcon() { |
|||
const len = this.icons.length |
|||
// 此处规则类似于下方的elActiveColor参数，都是根据一定的规则，显示不同的图标 |
|||
// 结果可能如此：icons参数传递了3个图标，当选中两个时，用第一个图标，4个时，用第二个图标 |
|||
// 第三个时，用第三个图标作为激活的图标 |
|||
if (len && len <= this.count) { |
|||
const step = Math.round(this.activeIndex / Math.round(this.count / len)) |
|||
if (step < 1) return this.icons[0] |
|||
if (step > len) return this.icons[len - 1] |
|||
return this.icons[step - 1] |
|||
} |
|||
return this.activeIcon |
|||
}, |
|||
elActiveColor() { |
|||
const len = this.colors.length |
|||
// 如果有设置colors参数(此参数用于将图标分段，比如一共5颗星，colors传3个颜色值，那么根据一定的规则，2颗星可能为第一个颜色 |
|||
// 4颗星为第二个颜色值，5颗星为第三个颜色值) |
|||
if (len && len <= this.count) { |
|||
const step = Math.round(this.activeIndex / Math.round(this.count / len)) |
|||
if (step < 1) return this.colors[0] |
|||
if (step > len) return this.colors[len - 1] |
|||
return this.colors[step - 1] |
|||
} |
|||
return this.activeColor |
|||
} |
|||
}, |
|||
methods: { |
|||
// 获取评分组件盒子的布局信息 |
|||
getElRectById() { |
|||
// uView封装的获取节点的方法，详见文档 |
|||
this.$uGetRect('#' + this.elId).then(res => { |
|||
this.starBoxLeft = res.left |
|||
}) |
|||
}, |
|||
// 获取单个星星的尺寸 |
|||
getElRectByClass() { |
|||
// uView封装的获取节点的方法，详见文档 |
|||
this.$uGetRect('.' + this.elClass).then(res => { |
|||
this.starWidth = res.width |
|||
// 把每个星星右边到组件盒子左边的距离放入数组中 |
|||
for (let i = 0; i < this.count; i++) { |
|||
this.starWidthArr[i] = (i + 1) * this.starWidth |
|||
} |
|||
}) |
|||
}, |
|||
// 手指滑动 |
|||
touchMove(e) { |
|||
if (this.disabled) { |
|||
return |
|||
} |
|||
if (!e.changedTouches[0]) { |
|||
return |
|||
} |
|||
const movePageX = e.changedTouches[0].pageX |
|||
// 滑动点相对于评分盒子左边的距离 |
|||
const distance = movePageX - this.starBoxLeft |
|||
|
|||
// 如果滑动到了评分盒子的左边界，就设置为0星 |
|||
if (distance <= 0) { |
|||
this.activeIndex = 0 |
|||
} |
|||
// 滑动的距离，相当于多少颗星星 |
|||
let index = Math.ceil(distance / this.starWidth) |
|||
this.activeIndex = index > this.count ? this.count : index |
|||
// 对最少颗星星的限制 |
|||
if (this.activeIndex < this.minCount) this.activeIndex = this.minCount |
|||
this.emitEvent() |
|||
}, |
|||
// 通过点击，直接选中 |
|||
click(index, e) { |
|||
if (this.disabled) { |
|||
return |
|||
} |
|||
// 半星选择，尚未实现 |
|||
if (this.allowHalf) { |
|||
} |
|||
// 对第一个星星特殊处理，只有一个的时候，点击可以取消，否则无法作0星评价 |
|||
if (index == 1) { |
|||
if (this.activeIndex == 1) { |
|||
this.activeIndex = 0 |
|||
} else { |
|||
this.activeIndex = 1 |
|||
} |
|||
} else { |
|||
this.activeIndex = index |
|||
} |
|||
// 对最少颗星星的限制 |
|||
if (this.activeIndex < this.minCount) this.activeIndex = this.minCount |
|||
this.emitEvent() |
|||
}, |
|||
// 发出事件 |
|||
emitEvent() { |
|||
// 发出change事件 |
|||
this.$emit('change', this.activeIndex) |
|||
// 同时修改双向绑定的value的值 |
|||
if (this.valueCom != -1) { |
|||
this.$emit('input', this.activeIndex) |
|||
this.$emit("update:modelValue", this.activeIndex); |
|||
} |
|||
}, |
|||
showDecimalIcon(index) { |
|||
return this.disabled && parseInt(this.activeIndex) === index |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.getElRectById() |
|||
this.getElRectByClass() |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-rate { |
|||
display: -webkit-inline-flex; |
|||
display: inline-flex; |
|||
align-items: center; |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
.u-icon { |
|||
box-sizing: border-box; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,180 @@ |
|||
<template> |
|||
<view class=""> |
|||
<view class="u-content" :class="[elId]" :style="{ |
|||
height: isLongContent && !showMore ? showHeight + 'rpx' : 'auto', |
|||
textIndent: textIndent |
|||
}"> |
|||
<slot></slot> |
|||
</view> |
|||
<view @tap="toggleReadMore" v-if="isLongContent" class="u-content__showmore-wrap" |
|||
:class="{ 'u-content__show-more': showMore }" |
|||
:style="[innerShadowStyle]"> |
|||
<text class="u-content__showmore-wrap__readmore-btn" :style="{ |
|||
fontSize: fontSize + 'rpx', |
|||
color: color |
|||
}"> |
|||
{{ showMore ? openText : closeText }} |
|||
</text> |
|||
<view class="u-content__showmore-wrap__readmore-btn__icon u-flex"> |
|||
<u-icon :color="color" :size="fontSize" :name="showMore ? 'arrow-up' : 'arrow-down'"></u-icon> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* readMore 阅读更多 |
|||
* @description 该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。 |
|||
* @tutorial https://www.uviewui.com/components/readMore.html |
|||
* @property {String Number} show-height 内容超出此高度才会显示展开全文按钮，单位rpx（默认400） |
|||
* @property {Boolean} toggle 展开后是否显示收起按钮（默认false） |
|||
* @property {String} close-text 关闭时的提示文字（默认“展开阅读全文”） |
|||
* @property {String Number} font-size 提示文字的大小，单位rpx（默认28） |
|||
* @property {String} text-indent 段落首行缩进的字符个数（默认2em） |
|||
* @property {String} open-text 展开时的提示文字（默认“收起”） |
|||
* @property {String} color 提示文字的颜色（默认#2979ff） |
|||
* @example <u-read-more><rich-text :nodes="content"></rich-text></u-read-more> |
|||
*/ |
|||
export default { |
|||
name: "u-read-more", |
|||
emits: ["open", "close"], |
|||
props: { |
|||
// 默认的显示占位高度，单位为rpx |
|||
showHeight: { |
|||
type: [Number, String], |
|||
default: 400 |
|||
}, |
|||
// 展开后是否显示"收起"按钮 |
|||
toggle: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 关闭时的提示文字 |
|||
closeText: { |
|||
type: String, |
|||
default: '展开阅读全文' |
|||
}, |
|||
// 展开时的提示文字 |
|||
openText: { |
|||
type: String, |
|||
default: '收起' |
|||
}, |
|||
// 提示的文字颜色 |
|||
color: { |
|||
type: String, |
|||
default: '#2979ff' |
|||
}, |
|||
// 提示文字的大小 |
|||
fontSize: { |
|||
type: [String, Number], |
|||
default: 28 |
|||
}, |
|||
// 是否显示阴影 |
|||
shadowStyle: { |
|||
type: Object, |
|||
default () { |
|||
return { |
|||
backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)", |
|||
paddingTop: "300rpx", |
|||
marginTop: "-300rpx" |
|||
} |
|||
} |
|||
}, |
|||
// 段落首行缩进的字符个数 |
|||
textIndent: { |
|||
type: String, |
|||
default: '2em' |
|||
}, |
|||
// open和close事件时，将此参数返回在回调参数中 |
|||
index: { |
|||
type: [Number, String], |
|||
default: '' |
|||
} |
|||
}, |
|||
watch: { |
|||
paramsChange(val) { |
|||
this.init(); |
|||
} |
|||
}, |
|||
computed: { |
|||
paramsChange() { |
|||
return `${this.toggle}-${this.showHeight}`; |
|||
}, |
|||
// 展开后无需阴影，收起时才需要阴影样式 |
|||
innerShadowStyle() { |
|||
if (this.showMore) return {}; |
|||
else return this.shadowStyle |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
isLongContent: false, // 是否需要隐藏一部分内容 |
|||
showMore: false, // 当前隐藏与显示的状态，true-显示，false-收起 |
|||
elId: this.$u.guid(), // 生成唯一class |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.init(); |
|||
}) |
|||
}, |
|||
methods: { |
|||
init() { |
|||
this.$uGetRect('.' + this.elId).then(res => { |
|||
// 判断高度，如果真实内容高度大于占位高度，则显示收起与展开的控制按钮 |
|||
if (res.height > uni.upx2px(this.showHeight)) { |
|||
this.isLongContent = true; |
|||
this.showMore = false; |
|||
} |
|||
}) |
|||
}, |
|||
// 展开或者收起 |
|||
toggleReadMore() { |
|||
this.showMore = !this.showMore; |
|||
// 如果toggle为false，隐藏"收起"部分的内容 |
|||
if (this.toggle == false) this.isLongContent = false; |
|||
// 发出打开或者收齐的事件 |
|||
this.$emit(this.showMore ? 'open' : 'close', this.index); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-content { |
|||
font-size: 30rpx; |
|||
color: $u-content-color; |
|||
line-height: 1.8; |
|||
text-align: left; |
|||
overflow: hidden; |
|||
|
|||
&__show-more { |
|||
padding-top: 0; |
|||
background: none; |
|||
margin-top: 20rpx; |
|||
} |
|||
|
|||
&__showmore-wrap { |
|||
position: relative; |
|||
width: 100%; |
|||
padding-bottom: 26rpx; |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
&__readmore-btn { |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
line-height: 1; |
|||
|
|||
&__icon { |
|||
margin-left: 14rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,270 @@ |
|||
<template> |
|||
<view |
|||
v-if="show" |
|||
class="u-notice-bar" |
|||
:style="{ |
|||
background: computeBgColor, |
|||
padding: padding |
|||
}" |
|||
:class="[ |
|||
type ? `u-type-${type}-light-bg` : '' |
|||
]" |
|||
> |
|||
<view class="u-direction-row"> |
|||
<view class="u-icon-wrap"> |
|||
<u-icon class="u-left-icon" v-if="volumeIcon" name="volume-fill" :size="volumeSize" :color="computeColor"></u-icon> |
|||
</view> |
|||
<view class="u-notice-box" id="u-notice-box"> |
|||
<view |
|||
class="u-notice-content" |
|||
id="u-notice-content" |
|||
:style="{ |
|||
animationDuration: animationDuration, |
|||
animationPlayState: animationPlayState, |
|||
}" |
|||
> |
|||
<text class="u-notice-text" @tap="click" :style="[textStyle]" |
|||
:class="['u-type-' + type]">{{showText}}</text> |
|||
</view> |
|||
</view> |
|||
<view class="u-icon-wrap"> |
|||
<u-icon @click="getMore" class="u-right-icon" v-if="moreIcon" name="arrow-right" :size="26" :color="computeColor"></u-icon> |
|||
<u-icon @click="close" class="u-right-icon" v-if="closeIcon" name="close" :size="24" :color="computeColor"></u-icon> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
emits: ["close", "getMore"], |
|||
props: { |
|||
// 显示的内容，数组 |
|||
list: { |
|||
type: Array, |
|||
default() { |
|||
return []; |
|||
} |
|||
}, |
|||
// 显示的主题，success|error|primary|info|warning|none |
|||
// none主题默认为透明背景，黑色(contentColor)字体 |
|||
type: { |
|||
type: String, |
|||
default: 'warning' |
|||
}, |
|||
// 是否显示左侧的音量图标 |
|||
volumeIcon: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否显示右侧的右箭头图标 |
|||
moreIcon: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否显示右侧的关闭图标 |
|||
closeIcon: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否自动播放 |
|||
autoplay: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 文字颜色，各图标也会使用文字颜色 |
|||
color: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 背景颜色 |
|||
bgColor: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 是否显示 |
|||
show: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 字体大小，单位rpx |
|||
fontSize: { |
|||
type: [Number, String], |
|||
default: 26 |
|||
}, |
|||
// 音量喇叭的大小 |
|||
volumeSize: { |
|||
type: [Number, String], |
|||
default: 34 |
|||
}, |
|||
// 水平滚动时的滚动速度，即每秒滚动多少rpx，这有利于控制文字无论多少时，都能有一个恒定的速度 |
|||
speed: { |
|||
type: [Number, String], |
|||
default: 160 |
|||
}, |
|||
// 播放状态，play-播放，paused-暂停 |
|||
playState: { |
|||
type: String, |
|||
default: 'play' |
|||
}, |
|||
// 通知的边距 |
|||
padding: { |
|||
type: [Number, String], |
|||
default: '18rpx 24rpx' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
textWidth: 0, // 滚动的文字宽度 |
|||
boxWidth: 0, // 供文字滚动的父盒子的宽度，和前者一起为了计算滚动速度 |
|||
animationDuration: '10s', // 动画执行时间 |
|||
animationPlayState: 'paused', // 动画的开始和结束执行 |
|||
showText: '' // 显示的文本 |
|||
}; |
|||
}, |
|||
watch: { |
|||
list: { |
|||
immediate: true, |
|||
handler(val) { |
|||
this.showText = val.join('，'); |
|||
this.$nextTick(() => { |
|||
this.initSize(); |
|||
}); |
|||
} |
|||
}, |
|||
playState(val) { |
|||
if(val == 'play') this.animationPlayState = 'running'; |
|||
else this.animationPlayState = 'paused'; |
|||
}, |
|||
speed(val) { |
|||
this.initSize(); |
|||
} |
|||
}, |
|||
computed: { |
|||
// 计算字体颜色，如果没有自定义的，就用uview主题颜色 |
|||
computeColor() { |
|||
if (this.color) return this.color; |
|||
// 如果是无主题，就默认使用content-color |
|||
else if(this.type == 'none') return '#606266'; |
|||
else return this.type; |
|||
}, |
|||
// 文字内容的样式 |
|||
textStyle() { |
|||
let style = {}; |
|||
if (this.color) style.color = this.color; |
|||
else if(this.type == 'none') style.color = '#606266'; |
|||
style.fontSize = this.fontSize + 'rpx'; |
|||
return style; |
|||
}, |
|||
// 计算背景颜色 |
|||
computeBgColor() { |
|||
if (this.bgColor) return this.bgColor; |
|||
else if(this.type == 'none') return 'transparent'; |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initSize(); |
|||
}); |
|||
}, |
|||
methods: { |
|||
initSize() { |
|||
let query = [], |
|||
boxWidth = 0, |
|||
textWidth = 0; |
|||
let textQuery = new Promise((resolve, reject) => { |
|||
uni.createSelectorQuery() |
|||
.in(this) |
|||
.select(`#u-notice-content`) |
|||
.boundingClientRect() |
|||
.exec(ret => { |
|||
this.textWidth = ret[0].width; |
|||
resolve(); |
|||
}); |
|||
}); |
|||
query.push(textQuery); |
|||
Promise.all(query).then(() => { |
|||
// 根据t=s/v(时间=路程/速度)，这里为何不需要加上#u-notice-box的宽度，因为中设置了.u-notice-content样式中设置了padding-left: 100% |
|||
// 恰巧计算出来的结果中已经包含了#u-notice-box的宽度 |
|||
this.animationDuration = `${this.textWidth / uni.upx2px(this.speed)}s`; |
|||
// 这里必须这样开始动画，否则在APP上动画速度不会改变(HX版本2.4.6，IOS13) |
|||
this.animationPlayState = 'paused'; |
|||
setTimeout(() => { |
|||
if(this.playState == 'play' && this.autoplay) this.animationPlayState = 'running'; |
|||
}, 10); |
|||
}); |
|||
}, |
|||
// 点击通告栏 |
|||
click(index) { |
|||
this.$emit('click'); |
|||
}, |
|||
// 点击关闭按钮 |
|||
close() { |
|||
this.$emit('close'); |
|||
}, |
|||
// 点击更多箭头按钮 |
|||
getMore() { |
|||
this.$emit('getMore'); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-notice-bar { |
|||
padding: 18rpx 24rpx; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.u-direction-row { |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.u-left-icon { |
|||
/* #ifndef APP-NVUE */ |
|||
display: inline-flex; |
|||
/* #endif */ |
|||
align-items: center; |
|||
} |
|||
|
|||
.u-notice-box { |
|||
flex: 1; |
|||
@include vue-flex; |
|||
overflow: hidden; |
|||
margin-left: 12rpx; |
|||
} |
|||
|
|||
.u-right-icon { |
|||
margin-left: 12rpx; |
|||
display: inline-flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.u-notice-content { |
|||
animation: u-loop-animation 10s linear infinite both; |
|||
text-align: right; |
|||
// 这一句很重要，为了能让滚动左右连接起来 |
|||
padding-left: 100%; |
|||
@include vue-flex; |
|||
flex-wrap: nowrap; |
|||
} |
|||
|
|||
.u-notice-text { |
|||
font-size: 26rpx; |
|||
word-break: keep-all; |
|||
white-space: nowrap |
|||
} |
|||
|
|||
@keyframes u-loop-animation { |
|||
0% { |
|||
transform: translate3d(0, 0, 0); |
|||
} |
|||
|
|||
100% { |
|||
transform: translate3d(-100%, 0, 0); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,85 @@ |
|||
<template> |
|||
<view class="u-row" :style="{ |
|||
alignItems: uAlignItem, |
|||
justifyContent: uJustify |
|||
}" |
|||
@tap="click" |
|||
> |
|||
<slot /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* row 行布局 |
|||
* @description 通过基础的 12 分栏，迅速简便地创建布局。 |
|||
* @tutorial https://www.uviewui.com/components/layout.html#row-props |
|||
* @property {String Number} gutter 栅格间隔，左右各为此值的一半，单位rpx（默认0） |
|||
* @property {String} justify 水平排列方式(微信小程序暂不支持)默认（start(或flex-start)） |
|||
* @property {String} align 垂直排列方式（默认center） |
|||
* @example <u-row gutter="16"></u-row> |
|||
*/ |
|||
export default { |
|||
name: "u-row", |
|||
emits: ["click"], |
|||
props: { |
|||
// 给col添加间距，左右边距各占一半 |
|||
gutter: { |
|||
type: [String, Number], |
|||
default: 20 |
|||
}, |
|||
// 水平排列方式，可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`) |
|||
justify: { |
|||
type: String, |
|||
default: 'start' |
|||
}, |
|||
// 垂直对齐方式，可选值为top、center、bottom |
|||
align: { |
|||
type: String, |
|||
default: 'center' |
|||
}, |
|||
// 是否阻止事件传播 |
|||
stop: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}, |
|||
computed: { |
|||
uJustify() { |
|||
if (this.justify == 'end' || this.justify == 'start') return 'flex-' + this.justify; |
|||
else if (this.justify == 'around' || this.justify == 'between') return 'space-' + this.justify; |
|||
else return this.justify; |
|||
}, |
|||
uAlignItem() { |
|||
if (this.align == 'top') return 'flex-start'; |
|||
if (this.align == 'bottom') return 'flex-end'; |
|||
else return this.align; |
|||
} |
|||
}, |
|||
methods: { |
|||
click(e) { |
|||
this.$emit('click',e); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-row { |
|||
// 由于微信小程序编译后奇怪的页面结构，只能使用float布局实现，flex无法实现 |
|||
/* #ifndef MP-WEIXIN || MP-QQ || MP-TOUTIAO */ |
|||
@include vue-flex; |
|||
/* #endif */ |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.u-row:after { |
|||
/* #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO */ |
|||
display: table; |
|||
clear: both; |
|||
content: ""; |
|||
/* #endif */ |
|||
} |
|||
</style> |
|||
@ -0,0 +1,357 @@ |
|||
<template> |
|||
<view class="u-search" @tap="clickHandler" :style="{ |
|||
margin: margin, |
|||
}"> |
|||
<view |
|||
class="u-content" |
|||
:style="{ |
|||
backgroundColor: bgColor, |
|||
borderRadius: shape == 'round' ? '100rpx' : '10rpx', |
|||
border: borderStyle, |
|||
height: height + 'rpx' |
|||
}" |
|||
> |
|||
<view class="u-icon-wrap"> |
|||
<u-icon class="u-clear-icon" :size="30" :name="searchIcon" :color="searchIconColor ? searchIconColor : color"></u-icon> |
|||
</view> |
|||
<input |
|||
confirm-type="search" |
|||
@blur="blur" |
|||
:value="valueCom" |
|||
@confirm="search" |
|||
@input="inputChange" |
|||
:disabled="disabled" |
|||
@focus="getFocus" |
|||
:focus="focus" |
|||
:maxlength="maxlength" |
|||
placeholder-class="u-placeholder-class" |
|||
:placeholder="placeholder" |
|||
:placeholder-style="`color: ${placeholderColor}`" |
|||
class="u-input" |
|||
type="text" |
|||
:style="[{ |
|||
textAlign: inputAlign, |
|||
color: color, |
|||
backgroundColor: bgColor, |
|||
}, inputStyle]" |
|||
/> |
|||
<view class="u-close-wrap" v-if="keyword && clearabled && focused" @tap="clear"> |
|||
<u-icon class="u-clear-icon" name="close-circle-fill" size="34" color="#c0c4cc"></u-icon> |
|||
</view> |
|||
</view> |
|||
<view :style="[actionStyle]" class="u-action" |
|||
:class="[showActionBtn || show ? 'u-action-active' : '']" |
|||
@tap.stop.prevent="custom" |
|||
>{{ actionText }}</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* search 搜索框 |
|||
* @description 搜索组件，集成了常见搜索框所需功能，用户可以一键引入，开箱即用。 |
|||
* @tutorial https://www.uviewui.com/components/search.html |
|||
* @property {String} shape 搜索框形状，round-圆形，square-方形（默认round） |
|||
* @property {String} bg-color 搜索框背景颜色（默认#f2f2f2） |
|||
* @property {String} border-color 边框颜色，配置了颜色，才会有边框 |
|||
* @property {String} placeholder 占位文字内容（默认“请输入关键字”） |
|||
* @property {Boolean} clearabled 是否启用清除控件（默认true） |
|||
* @property {Boolean} focus 是否自动获得焦点（默认false） |
|||
* @property {Boolean} show-action 是否显示右侧控件（默认true） |
|||
* @property {String} action-text 右侧控件文字（默认“搜索”） |
|||
* @property {Object} action-style 右侧控件的样式，对象形式 |
|||
* @property {String} input-align 输入框内容水平对齐方式（默认left） |
|||
* @property {Object} input-style 自定义输入框样式，对象形式 |
|||
* @property {Boolean} disabled 是否启用输入框（默认false） |
|||
* @property {String} search-icon-color 搜索图标的颜色，默认同输入框字体颜色 |
|||
* @property {String} color 输入框字体颜色（默认#606266） |
|||
* @property {String} placeholder-color placeholder的颜色（默认#909399） |
|||
* @property {String} search-icon 输入框左边的图标，可以为uView图标名称或图片路径 |
|||
* @property {String} margin 组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30rpx" |
|||
* @property {Boolean} animation 是否开启动画，见上方说明（默认false） |
|||
* @property {String} value 输入框初始值 |
|||
* @property {String | Number} maxlength 输入框最大能输入的长度，-1为不限制长度 |
|||
* @property {Boolean} input-style input输入框的样式，可以定义文字颜色，大小等，对象形式 |
|||
* @property {String | Number} height 输入框高度，单位rpx（默认64） |
|||
* @event {Function} change 输入框内容发生变化时触发 |
|||
* @event {Function} search 用户确定搜索时触发，用户按回车键，或者手机键盘右下角的"搜索"键时触发 |
|||
* @event {Function} custom 用户点击右侧控件时触发 |
|||
* @event {Function} clear 用户点击清除按钮时触发 |
|||
* @example <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search> |
|||
*/ |
|||
export default { |
|||
name: "u-search", |
|||
emits: ["update:modelValue", "input", "change", "search", "custom", "clear", "focus", "blur"], |
|||
props: { |
|||
// 输入框的初始化内容 |
|||
value: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
modelValue: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 搜索框形状，round-圆形，square-方形 |
|||
shape: { |
|||
type: String, |
|||
default: 'round' |
|||
}, |
|||
// 搜索框背景色，默认值#f2f2f2 |
|||
bgColor: { |
|||
type: String, |
|||
default: '#f2f2f2' |
|||
}, |
|||
// 占位提示文字 |
|||
placeholder: { |
|||
type: String, |
|||
default: '请输入关键字' |
|||
}, |
|||
// 是否启用清除控件 |
|||
clearabled: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否自动聚焦 |
|||
focus: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否在搜索框右侧显示取消按钮 |
|||
showAction: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 右边控件的样式 |
|||
actionStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
} |
|||
}, |
|||
// 取消按钮文字 |
|||
actionText: { |
|||
type: String, |
|||
default: '搜索' |
|||
}, |
|||
// 输入框内容对齐方式，可选值为 left|center|right |
|||
inputAlign: { |
|||
type: String, |
|||
default: 'left' |
|||
}, |
|||
// 是否启用输入框 |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 开启showAction时，是否在input获取焦点时才显示 |
|||
animation: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 边框颜色，只要配置了颜色，才会有边框 |
|||
borderColor: { |
|||
type: String, |
|||
default: 'none' |
|||
}, |
|||
// 搜索框高度，单位rpx |
|||
height: { |
|||
type: [Number, String], |
|||
default: 64 |
|||
}, |
|||
// input输入框的样式，可以定义文字颜色，大小等，对象形式 |
|||
inputStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {} |
|||
} |
|||
}, |
|||
// 输入框最大能输入的长度，-1为不限制长度(来自uniapp文档) |
|||
maxlength: { |
|||
type: [Number, String], |
|||
default: '-1' |
|||
}, |
|||
// 搜索图标的颜色，默认同输入框字体颜色 |
|||
searchIconColor: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 输入框字体颜色 |
|||
color: { |
|||
type: String, |
|||
default: '#606266' |
|||
}, |
|||
// placeholder的颜色 |
|||
placeholderColor: { |
|||
type: String, |
|||
default: '#909399' |
|||
}, |
|||
// 组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30rpx"、"30rpx 20rpx"等写法 |
|||
margin: { |
|||
type: String, |
|||
default: '0' |
|||
}, |
|||
// 左边输入框的图标，可以为uView图标名称或图片路径 |
|||
searchIcon: { |
|||
type: String, |
|||
default: 'search' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
keyword: '', |
|||
showClear: false, // 是否显示右边的清除图标 |
|||
show: false, |
|||
// 标记input当前状态是否处于聚焦中，如果是，才会显示右侧的清除控件 |
|||
focused: this.focus |
|||
// 绑定输入框的值 |
|||
// inputValue: this.value |
|||
}; |
|||
}, |
|||
watch: { |
|||
keyword(nVal) { |
|||
// 双向绑定值，让v-model绑定的值双向变化 |
|||
this.$emit('input', nVal); |
|||
this.$emit("update:modelValue", nVal); |
|||
// 触发change事件，事件效果和v-model双向绑定的效果一样，让用户多一个选择 |
|||
this.$emit('change', nVal); |
|||
}, |
|||
valueCom: { |
|||
immediate: true, |
|||
handler(nVal) { |
|||
this.keyword = nVal; |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
valueCom() { |
|||
// #ifndef VUE3 |
|||
return this.value; |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
return this.modelValue; |
|||
// #endif |
|||
}, |
|||
showActionBtn() { |
|||
if (!this.animation && this.showAction) return true; |
|||
else return false; |
|||
}, |
|||
// 样式，根据用户传入的颜色值生成，如果不传入，默认为none |
|||
borderStyle() { |
|||
if (this.borderColor) return `1px solid ${this.borderColor}`; |
|||
else return 'none'; |
|||
}, |
|||
}, |
|||
methods: { |
|||
// 目前HX2.6.9 v-model双向绑定无效，故监听input事件获取输入框内容的变化 |
|||
inputChange(e) { |
|||
this.keyword = e.detail.value; |
|||
}, |
|||
// 清空输入 |
|||
// 也可以作为用户通过this.$refs形式调用清空输入框内容 |
|||
clear() { |
|||
this.keyword = ''; |
|||
// 延后发出事件，避免在父组件监听clear事件时，value为更新前的值(不为空) |
|||
this.$nextTick(() => { |
|||
this.$emit('clear'); |
|||
}) |
|||
}, |
|||
// 确定搜索 |
|||
search(e) { |
|||
this.$emit('search', e.detail.value); |
|||
try{ |
|||
// 收起键盘 |
|||
uni.hideKeyboard(); |
|||
}catch(e){} |
|||
}, |
|||
// 点击右边自定义按钮的事件 |
|||
custom() { |
|||
this.$emit('custom', this.keyword); |
|||
try{ |
|||
// 收起键盘 |
|||
uni.hideKeyboard(); |
|||
}catch(e){} |
|||
}, |
|||
// 获取焦点 |
|||
getFocus() { |
|||
this.focused = true; |
|||
// 开启右侧搜索按钮展开的动画效果 |
|||
if (this.animation && this.showAction) this.show = true; |
|||
this.$emit('focus', this.keyword); |
|||
}, |
|||
// 失去焦点 |
|||
blur() { |
|||
// 最开始使用的是监听图标@touchstart事件，自从hx2.8.4后，此方法在微信小程序出错 |
|||
// 这里改为监听点击事件，手点击清除图标时，同时也发生了@blur事件，导致图标消失而无法点击，这里做一个延时 |
|||
setTimeout(() => { |
|||
this.focused = false; |
|||
}, 100) |
|||
this.show = false; |
|||
this.$emit('blur', this.keyword); |
|||
}, |
|||
// 点击搜索框，只有disabled=true时才发出事件，因为禁止了输入，意味着是想跳转真正的搜索页 |
|||
clickHandler() { |
|||
if(this.disabled) this.$emit('click'); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-search { |
|||
@include vue-flex; |
|||
align-items: center; |
|||
flex: 1; |
|||
} |
|||
|
|||
.u-content { |
|||
@include vue-flex; |
|||
align-items: center; |
|||
padding: 0 18rpx; |
|||
flex: 1; |
|||
} |
|||
|
|||
.u-clear-icon { |
|||
@include vue-flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.u-input { |
|||
flex: 1; |
|||
font-size: 28rpx; |
|||
line-height: 1; |
|||
margin: 0 10rpx; |
|||
color: $u-tips-color; |
|||
} |
|||
|
|||
.u-close-wrap { |
|||
width: 40rpx; |
|||
height: 100%; |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.u-placeholder-class { |
|||
color: $u-tips-color; |
|||
} |
|||
|
|||
.u-action { |
|||
font-size: 28rpx; |
|||
color: $u-main-color; |
|||
width: 0; |
|||
overflow: hidden; |
|||
transition: all 0.3s; |
|||
white-space: nowrap; |
|||
text-align: center; |
|||
} |
|||
|
|||
.u-action-active { |
|||
width: 80rpx; |
|||
margin-left: 10rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,155 @@ |
|||
<template> |
|||
<view class="u-section"> |
|||
<view class="u-section__title" :style="{ |
|||
fontWeight: bold ? 'bold' : 'normal', |
|||
color: color, |
|||
fontSize: fontSize + 'rpx', |
|||
paddingLeft: showLine ? (fontSize * 0.7) + 'rpx' : 0 |
|||
}" :class="{ |
|||
'u-section--line': showLine |
|||
}"> |
|||
<view class="u-section__title__icon-wrap u-flex" :style="[lineStyle]" v-if="showLine"> |
|||
<u-icon top="0" name="column-line" :size="fontSize * 1.25" bold :color="lineColor ? lineColor : color"></u-icon> |
|||
</view> |
|||
<text class="u-flex u-section__title__text">{{title}}</text> |
|||
</view> |
|||
<view class="u-section__right-info" v-if="right || $slots.right" :style="{ |
|||
color: subColor |
|||
}" @tap="rightClick"> |
|||
<slot name="right" v-if="$slots.right" /> |
|||
<block v-else> |
|||
{{subTitle}} |
|||
<view class="u-section__right-info__icon-arrow u-flex" v-if="arrow"> |
|||
<u-icon name="arrow-right" size="24" :color="subColor"></u-icon> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* section 查看更多 |
|||
* @description 该组件一般用于分类信息有很多，但是限于篇幅只能列出一部分，让用户通过"查看更多"获得更多信息的场景，实际效果见演示。 |
|||
* @tutorial https://www.uviewui.com/components/section.html |
|||
* @property {String} title 左边主标题 |
|||
* @property {String} sub-title 右边副标题（默认更多） |
|||
* @property {Boolean} right 是否显示右边的内容（默认true） |
|||
* @property {Boolean} showLine 是否显示左边的竖条（默认true） |
|||
* @property {Boolean} arrow 是否显示右边箭头（默认true） |
|||
* @property {String Number} font-size 主标题的字体大小（默认28） |
|||
* @property {Boolean} bold 主标题是否加粗（默认true） |
|||
* @property {String} color 主标题颜色（默认#303133） |
|||
* @event {Function} click 组件右侧的内容被点击时触发，用于跳转"更多" |
|||
* @example <u-section title="今日热门" :right="false"></u-section> |
|||
*/ |
|||
export default { |
|||
emits: ["click"], |
|||
name: "u-section", |
|||
props: { |
|||
// 标题信息 |
|||
title: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 右边副标题内容 |
|||
subTitle: { |
|||
type: String, |
|||
default: '更多' |
|||
}, |
|||
// 是否显示右边的内容 |
|||
right: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
fontSize: { |
|||
type: [Number, String], |
|||
default: 28 |
|||
}, |
|||
// 主标题是否加粗 |
|||
bold: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 主标题的颜色 |
|||
color: { |
|||
type: String, |
|||
default: '#303133' |
|||
}, |
|||
// 右边副标题的颜色 |
|||
subColor: { |
|||
type: String, |
|||
default: '#909399' |
|||
}, |
|||
// 是否显示左边的竖条 |
|||
showLine: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 左边竖线的颜色 |
|||
lineColor: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 是否显示右边箭头 |
|||
arrow: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
}, |
|||
computed: { |
|||
// 左边竖条的样式 |
|||
lineStyle() { |
|||
// 由于安卓和iOS的，需要稍微调整绝对定位的top值，才能让左边的竖线和右边的文字垂直居中 |
|||
return { |
|||
// 由于竖线为字体图标，具有比实际线宽更宽的宽度，所以也需要根据字体打下动态调整 |
|||
left: -(Number(this.fontSize) * 0.9) + 'rpx', |
|||
top: -(Number(this.fontSize) * (this.$u.os() == 'ios' ? 0.14 : 0.15)) + 'rpx', |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
rightClick() { |
|||
this.$emit('click'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-section { |
|||
@include vue-flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
width: 100%; |
|||
|
|||
&__title { |
|||
position: relative; |
|||
font-size: 28rpx; |
|||
padding-left: 20rpx; |
|||
@include vue-flex; |
|||
align-items: center; |
|||
|
|||
&__icon-wrap { |
|||
position: absolute; |
|||
} |
|||
|
|||
&__text { |
|||
line-height: 1; |
|||
} |
|||
} |
|||
|
|||
&__right-info { |
|||
color: $u-tips-color; |
|||
font-size: 26rpx; |
|||
@include vue-flex; |
|||
align-items: center; |
|||
|
|||
&__icon-arrow { |
|||
margin-left: 6rpx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,437 @@ |
|||
<template> |
|||
<view class="u-select"> |
|||
<!-- <view class="u-select__action" :class="{ |
|||
'u-select--border': border |
|||
}" @tap.stop="selectHandler"> |
|||
<view class="u-select__action__icon" :class="{ |
|||
'u-select__action__icon--reverse': value == true |
|||
}"> |
|||
<u-icon name="arrow-down-fill" size="26" color="#c0c4cc"></u-icon> |
|||
</view> |
|||
</view> --> |
|||
<u-popup :blur="blur" :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="popupValue" length="auto" :safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex"> |
|||
<view class="u-select"> |
|||
<view class="u-select__header" @touchmove.stop.prevent=""> |
|||
<view |
|||
class="u-select__header__cancel u-select__header__btn" |
|||
:style="{ color: cancelColor }" |
|||
hover-class="u-hover-class" |
|||
:hover-stay-time="150" |
|||
@tap="getResult('cancel')" |
|||
> |
|||
{{cancelText}} |
|||
</view> |
|||
<view class="u-select__header__title"> |
|||
{{title}} |
|||
</view> |
|||
<view |
|||
class="u-select__header__confirm u-select__header__btn" |
|||
:style="{ color: moving ? cancelColor : confirmColor }" |
|||
hover-class="u-hover-class" |
|||
:hover-stay-time="150" |
|||
@touchmove.stop="" |
|||
@tap.stop="getResult('confirm')" |
|||
> |
|||
{{confirmText}} |
|||
</view> |
|||
</view> |
|||
<view class="u-select__body"> |
|||
<picker-view @change="columnChange" class="u-select__body__picker-view" :value="defaultSelector" @pickstart="pickstart" @pickend="pickend"> |
|||
<picker-view-column v-for="(item, index) in columnData" :key="index"> |
|||
<view class="u-select__body__picker-view__item" v-for="(item1, index1) in item" :key="index1"> |
|||
<view class="u-line-1">{{ item1[labelName] }}</view> |
|||
</view> |
|||
</picker-view-column> |
|||
</picker-view> |
|||
</view> |
|||
</view> |
|||
</u-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* select 列选择器 |
|||
* @description 此选择器用于单列，多列，多列联动的选择场景。(从1.3.0版本起，不建议使用Picker组件的单列和多列模式，Select组件是专门为列选择而构造的组件，更简单易用。) |
|||
* @tutorial http://uviewui.com/components/select.html |
|||
* @property {String} mode 模式选择，"single-column"-单列模式，"mutil-column"-多列模式，"mutil-column-auto"-多列联动模式 |
|||
* @property {Array} list 列数据，数组形式，见官网说明 |
|||
* @property {Boolean} v-model 布尔值变量，用于控制选择器的弹出与收起 |
|||
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false) |
|||
* @property {String} cancel-color 取消按钮的颜色（默认#606266） |
|||
* @property {String} confirm-color 确认按钮的颜色(默认#2979ff) |
|||
* @property {String} confirm-text 确认按钮的文字 |
|||
* @property {String} cancel-text 取消按钮的文字 |
|||
* @property {String} default-value 提供的默认选中的下标，见官网说明 |
|||
* @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker(默认true) |
|||
* @property {String Number} z-index 弹出时的z-index值(默认10075) |
|||
* @property {String} value-name 自定义list数据的value属性名 1.3.6 |
|||
* @property {String} label-name 自定义list数据的label属性名 1.3.6 |
|||
* @property {String} child-name 自定义list数据的children属性名，只对多列联动模式有效 1.3.7 |
|||
* @event {Function} confirm 点击确定按钮，返回当前选择的值 |
|||
* @example <u-select v-model="show" :list="list"></u-select> |
|||
*/ |
|||
|
|||
export default { |
|||
emits: ["update:modelValue", "input", "confirm"], |
|||
props: { |
|||
// 通过双向绑定控制组件的弹出与收起 |
|||
value: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
modelValue: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 列数据 |
|||
list: { |
|||
type: Array, |
|||
default() { |
|||
return []; |
|||
} |
|||
}, |
|||
// 是否显示边框 |
|||
border: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// "取消"按钮的颜色 |
|||
cancelColor: { |
|||
type: String, |
|||
default: '#606266' |
|||
}, |
|||
// "确定"按钮的颜色 |
|||
confirmColor: { |
|||
type: String, |
|||
default: '#2979ff' |
|||
}, |
|||
// 弹出的z-index值 |
|||
zIndex: { |
|||
type: [String, Number], |
|||
default: 0 |
|||
}, |
|||
safeAreaInsetBottom: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否允许通过点击遮罩关闭Picker |
|||
maskCloseAble: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 提供的默认选中的下标 |
|||
defaultValue: { |
|||
type: Array, |
|||
default() { |
|||
return [0]; |
|||
} |
|||
}, |
|||
// 模式选择，single-column-单列，mutil-column-多列，mutil-column-auto-多列联动 |
|||
mode: { |
|||
type: String, |
|||
default: 'single-column' |
|||
}, |
|||
// 自定义value属性名 |
|||
valueName: { |
|||
type: String, |
|||
default: 'value' |
|||
}, |
|||
// 自定义label属性名 |
|||
labelName: { |
|||
type: String, |
|||
default: 'label' |
|||
}, |
|||
// 自定义多列联动模式的children属性名 |
|||
childName: { |
|||
type: String, |
|||
default: 'children' |
|||
}, |
|||
// 顶部标题 |
|||
title: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 取消按钮的文字 |
|||
cancelText: { |
|||
type: String, |
|||
default: '取消' |
|||
}, |
|||
// 确认按钮的文字 |
|||
confirmText: { |
|||
type: String, |
|||
default: '确认' |
|||
}, |
|||
// 遮罩的模糊度 |
|||
blur: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
popupValue: false, |
|||
// 用于列改变时，保存当前的索引，下一次变化时比较得出是哪一列发生了变化 |
|||
defaultSelector: [0], |
|||
// picker-view的数据 |
|||
columnData: [], |
|||
// 每次队列发生变化时，保存选择的结果 |
|||
selectValue: [], |
|||
// 上一次列变化时的index |
|||
lastSelectIndex: [], |
|||
// 列数 |
|||
columnNum: 0, |
|||
// 列是否还在滑动中，微信小程序如果在滑动中就点确定，结果可能不准确 |
|||
moving: false |
|||
}; |
|||
}, |
|||
watch: { |
|||
// 在select弹起的时候，重新初始化所有数据 |
|||
value: { |
|||
immediate: true, |
|||
handler(val) { |
|||
if(val) setTimeout(() => this.init(), 10); |
|||
this.popupValue = val; |
|||
} |
|||
}, |
|||
modelValue: { |
|||
immediate: true, |
|||
handler(val) { |
|||
if(val) setTimeout(() => this.init(), 10); |
|||
this.popupValue = val; |
|||
} |
|||
}, |
|||
}, |
|||
computed: { |
|||
uZIndex() { |
|||
// 如果用户有传递z-index值，优先使用 |
|||
return this.zIndex ? this.zIndex : this.$u.zIndex.popup; |
|||
}, |
|||
}, |
|||
methods: { |
|||
// 标识滑动开始，只有微信小程序才有这样的事件 |
|||
pickstart() { |
|||
// #ifdef MP-WEIXIN |
|||
this.moving = true; |
|||
// #endif |
|||
}, |
|||
// 标识滑动结束 |
|||
pickend() { |
|||
// #ifdef MP-WEIXIN |
|||
this.moving = false; |
|||
// #endif |
|||
}, |
|||
init() { |
|||
this.setColumnNum(); |
|||
this.setDefaultSelector(); |
|||
this.setColumnData(); |
|||
this.setSelectValue(); |
|||
}, |
|||
// 获取默认选中列下标 |
|||
setDefaultSelector() { |
|||
// 如果没有传入默认选中的值，生成长度为columnNum，用0填充的数组 |
|||
this.defaultSelector = this.defaultValue.length == this.columnNum ? this.defaultValue : Array(this.columnNum).fill(0); |
|||
this.lastSelectIndex = this.$u.deepClone(this.defaultSelector); |
|||
}, |
|||
// 计算列数 |
|||
setColumnNum() { |
|||
// 单列的列数为1 |
|||
if(this.mode == 'single-column') this.columnNum = 1; |
|||
// 多列时，this.list数组长度就是列数 |
|||
else if(this.mode == 'mutil-column') this.columnNum = this.list.length; |
|||
// 多列联动时，通过历遍this.list的第一个元素，得出有多少列 |
|||
else if(this.mode == 'mutil-column-auto') { |
|||
let num = 1; |
|||
let column = this.list; |
|||
// 只要有元素并且第一个元素有children属性，继续历遍 |
|||
while(column[0][this.childName]) { |
|||
column = column[0] ? column[0][this.childName] : {}; |
|||
num ++; |
|||
} |
|||
this.columnNum = num; |
|||
} |
|||
}, |
|||
// 获取需要展示在picker中的列数据 |
|||
setColumnData() { |
|||
let data = []; |
|||
this.selectValue = []; |
|||
if(this.mode == 'mutil-column-auto') { |
|||
// 获得所有数据中的第一个元素 |
|||
let column = this.list[this.defaultSelector.length ? this.defaultSelector[0] : 0]; |
|||
// 通过循环所有的列数，再根据设定列的数组，得出当前需要渲染的整个列数组 |
|||
for (let i = 0; i < this.columnNum; i++) { |
|||
// 第一列默认为整个list数组 |
|||
if (i == 0) { |
|||
data[i] = this.list; |
|||
column = column[this.childName]; |
|||
} else { |
|||
// 大于第一列时，判断是否有默认选中的，如果没有就用该列的第一项 |
|||
data[i] = column; |
|||
column = column[this.defaultSelector[i]][this.childName]; |
|||
} |
|||
} |
|||
} else if(this.mode == 'single-column') { |
|||
data[0] = this.list; |
|||
} else { |
|||
data = this.list; |
|||
} |
|||
this.columnData = data; |
|||
}, |
|||
// 获取默认选中的值，如果没有设置defaultValue，就默认选中每列的第一个 |
|||
setSelectValue() { |
|||
let tmp = null; |
|||
for(let i = 0; i < this.columnNum; i++) { |
|||
tmp = this.columnData[i][this.defaultSelector[i]]; |
|||
let data = { |
|||
value: tmp ? tmp[this.valueName] : null, |
|||
label: tmp ? tmp[this.labelName] : null |
|||
}; |
|||
// 判断是否存在额外的参数，如果存在，就返回 |
|||
if(tmp && tmp.extra) data.extra = tmp.extra; |
|||
this.selectValue.push(data) |
|||
} |
|||
}, |
|||
// 列选项 |
|||
columnChange(e) { |
|||
let index = null; |
|||
let columnIndex = e.detail.value; |
|||
// 由于后面是需要push进数组的，所以需要先清空数组 |
|||
this.selectValue = []; |
|||
if(this.mode == 'mutil-column-auto') { |
|||
// 对比前后两个数组，寻找变更的是哪一列，如果某一个元素不同，即可判定该列发生了变化 |
|||
this.lastSelectIndex.map((val, idx) => { |
|||
if (val != columnIndex[idx]) index = idx; |
|||
}); |
|||
this.defaultSelector = columnIndex; |
|||
for (let i = index + 1; i < this.columnNum; i++) { |
|||
// 当前变化列的下一列的数据，需要获取上一列的数据，同时需要指定是上一列的第几个的children，再往后的 |
|||
// 默认是队列的第一个为默认选项 |
|||
this.columnData[i] = this.columnData[i - 1][i - 1 == index ? columnIndex[index] : 0][this.childName]; |
|||
// 改变的列之后的所有列，默认选中第一个 |
|||
this.defaultSelector[i] = 0; |
|||
} |
|||
// 在历遍的过程中，可能由于上一步修改this.columnData，导致产生连锁反应，程序触发columnChange，会有多次调用 |
|||
// 只有在最后一次数据稳定后的结果是正确的，此前的历遍中，可能会产生undefined，故需要判断 |
|||
columnIndex.map((item, index) => { |
|||
let data = this.columnData[index][columnIndex[index]]; |
|||
let tmp = { |
|||
value: data ? data[this.valueName] : null, |
|||
label: data ? data[this.labelName] : null, |
|||
}; |
|||
// 判断是否有需要额外携带的参数 |
|||
if(data && data.extra !== undefined) tmp.extra = data.extra; |
|||
this.selectValue.push(tmp); |
|||
|
|||
}) |
|||
// 保存这一次的结果，用于下次列发生变化时作比较 |
|||
this.lastSelectIndex = columnIndex; |
|||
} else if(this.mode == 'single-column') { |
|||
let data = this.columnData[0][columnIndex[0]]; |
|||
// 初始默认选中值 |
|||
let tmp = { |
|||
value: data ? data[this.valueName] : null, |
|||
label: data ? data[this.labelName] : null, |
|||
}; |
|||
// 判断是否有需要额外携带的参数 |
|||
if(data && data.extra !== undefined) tmp.extra = data.extra; |
|||
this.selectValue.push(tmp); |
|||
} else if(this.mode == 'mutil-column') { |
|||
// 初始默认选中值 |
|||
columnIndex.map((item, index) => { |
|||
let data = this.columnData[index][columnIndex[index]]; |
|||
// 初始默认选中值 |
|||
let tmp = { |
|||
value: data ? data[this.valueName] : null, |
|||
label: data ? data[this.labelName] : null, |
|||
}; |
|||
// 判断是否有需要额外携带的参数 |
|||
if(data && data.extra !== undefined) tmp.extra = data.extra; |
|||
this.selectValue.push(tmp); |
|||
}) |
|||
} |
|||
}, |
|||
close() { |
|||
this.$emit('input', false); |
|||
this.$emit("update:modelValue", false); |
|||
}, |
|||
// 点击确定或者取消 |
|||
getResult(event = null) { |
|||
// #ifdef MP-WEIXIN |
|||
if (this.moving) return; |
|||
// #endif |
|||
if (event) this.$emit(event, this.selectValue); |
|||
this.close(); |
|||
}, |
|||
selectHandler() { |
|||
this.$emit('click'); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-select { |
|||
|
|||
&__action { |
|||
position: relative; |
|||
line-height: $u-form-item-height; |
|||
height: $u-form-item-height; |
|||
|
|||
&__icon { |
|||
position: absolute; |
|||
right: 20rpx; |
|||
top: 50%; |
|||
transition: transform .4s; |
|||
transform: translateY(-50%); |
|||
z-index: 1; |
|||
|
|||
&--reverse { |
|||
transform: rotate(-180deg) translateY(50%); |
|||
} |
|||
} |
|||
} |
|||
|
|||
&__hader { |
|||
&__title { |
|||
color: $u-content-color; |
|||
} |
|||
} |
|||
|
|||
&--border { |
|||
border-radius: 6rpx; |
|||
border-radius: 4px; |
|||
border: 1px solid $u-form-item-border-color; |
|||
} |
|||
|
|||
&__header { |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
height: 80rpx; |
|||
padding: 0 40rpx; |
|||
} |
|||
|
|||
&__body { |
|||
width: 100%; |
|||
height: 500rpx; |
|||
overflow: hidden; |
|||
background-color: #fff; |
|||
|
|||
&__picker-view { |
|||
height: 100%; |
|||
box-sizing: border-box; |
|||
|
|||
&__item { |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 32rpx; |
|||
color: $u-main-color; |
|||
padding: 0 8rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,199 @@ |
|||
<template> |
|||
<view v-if="loading" :style="{ |
|||
width: windowWinth + 'px', |
|||
height: windowHeight + 'px', |
|||
backgroundColor: bgColor, |
|||
position: 'absolute', |
|||
left: left + 'px', |
|||
top: top + 'px', |
|||
zIndex: 9998, |
|||
overflow: 'hidden' |
|||
}" |
|||
@touchmove.stop.prevent> |
|||
<view v-for="(item, index) in RectNodes" :key="$u.guid()" :class="[animation ? 'skeleton-fade' : '']" :style="{ |
|||
width: item.width + 'px', |
|||
height: item.height + 'px', |
|||
backgroundColor: elColor, |
|||
position: 'absolute', |
|||
left: (item.left - left) + 'px', |
|||
top: (item.top - top) + 'px' |
|||
}"></view> |
|||
<view v-for="(item, index) in circleNodes" :key="$u.guid()" :class="animation ? 'skeleton-fade' : ''" :style="{ |
|||
width: item.width + 'px', |
|||
height: item.height + 'px', |
|||
backgroundColor: elColor, |
|||
borderRadius: item.width/2 + 'px', |
|||
position: 'absolute', |
|||
left: (item.left - left) + 'px', |
|||
top: (item.top - top) + 'px' |
|||
}"></view> |
|||
<view v-for="(item, index) in filletNodes" :key="$u.guid()" :class="animation ? 'skeleton-fade' : ''" :style="{ |
|||
width: item.width + 'px', |
|||
height: item.height + 'px', |
|||
backgroundColor: elColor, |
|||
borderRadius: borderRadius + 'rpx', |
|||
position: 'absolute', |
|||
left: (item.left - left) + 'px', |
|||
top: (item.top - top) + 'px' |
|||
}"></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* skeleton 骨架屏 |
|||
* @description 骨架屏一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。 |
|||
* @tutorial https://www.uviewui.com/components/skeleton.html |
|||
* @property {String} el-color 骨架块状元素的背景颜色（默认#e5e5e5） |
|||
* @property {String} bg-color 骨架组件背景颜色（默认#ffffff） |
|||
* @property {Boolean} animation 骨架块是否显示动画效果（默认false） |
|||
* @property {String Number} border-radius u-skeleton-fillet类名元素，对应的骨架块的圆角大小，单位rpx（默认10） |
|||
* @property {Boolean} loading 是否显示骨架组件，请求完成后，将此值设置为false（默认true） |
|||
* @example <u-skeleton :loading="true" :animation="true"></u-skeleton> |
|||
*/ |
|||
export default { |
|||
name: "u-skeleton", |
|||
props: { |
|||
// 需要渲染的元素背景颜色，十六进制或者rgb等都可以 |
|||
elColor: { |
|||
type: String, |
|||
default: '#e5e5e5' |
|||
}, |
|||
// 整个骨架屏页面的背景颜色 |
|||
bgColor: { |
|||
type: String, |
|||
default: '#ffffff' |
|||
}, |
|||
// 是否显示加载动画 |
|||
animation: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 圆角值，只对类名为u-skeleton-fillet的元素生效，为数值，不带单位 |
|||
borderRadius: { |
|||
type: [String, Number], |
|||
default: "10" |
|||
}, |
|||
// 是否显示骨架，true-显示，false-隐藏 |
|||
loading: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
windowWinth: 750, // 骨架屏宽度 |
|||
windowHeight: 1500, // 骨架屏高度 |
|||
filletNodes: [], // 圆角元素 |
|||
circleNodes: [], // 圆形元素 |
|||
RectNodes: [], // 矩形元素 |
|||
top: 0, |
|||
left: 0, |
|||
} |
|||
}, |
|||
methods: { |
|||
// 查询各节点的信息 |
|||
selecterQueryInfo() { |
|||
// 获取整个父组件容器的高度，当做骨架屏的高度 |
|||
// 在微信小程序中，如果把骨架屏放入组件中使用的话，需要调in(this)上下文为父组件才有效 |
|||
let query = ''; |
|||
// #ifdef MP-WEIXIN |
|||
query = uni.createSelectorQuery().in(this.$parent); |
|||
// #endif |
|||
// #ifndef MP-WEIXIN |
|||
query = uni.createSelectorQuery() |
|||
// #endif |
|||
query.selectAll('.u-skeleton').boundingClientRect().exec((res) => { |
|||
this.windowHeight = res[0][0].height; |
|||
this.windowWinth = res[0][0].width; |
|||
this.top = res[0][0].bottom - res[0][0].height; |
|||
this.left = res[0][0].left; |
|||
}); |
|||
// 矩形骨架元素 |
|||
this.getRectEls(); |
|||
// 圆形骨架元素 |
|||
this.getCircleEls(); |
|||
// 圆角骨架元素 |
|||
this.getFilletEls(); |
|||
}, |
|||
// 矩形元素列表 |
|||
getRectEls() { |
|||
let query = ''; |
|||
// 在微信小程序中，如果把骨架屏放入组件中使用的话，需要调in(this)上下文为父组件才有效 |
|||
// #ifdef MP-WEIXIN |
|||
query = uni.createSelectorQuery().in(this.$parent); |
|||
// #endif |
|||
// #ifndef MP-WEIXIN |
|||
query = uni.createSelectorQuery() |
|||
// #endif |
|||
query.selectAll('.u-skeleton-rect').boundingClientRect().exec((res) => { |
|||
this.RectNodes = res[0]; |
|||
}); |
|||
}, |
|||
// 圆角元素列表 |
|||
getFilletEls() { |
|||
let query = ''; |
|||
// 在微信小程序中，如果把骨架屏放入组件中使用的话，需要调in(this)上下文为父组件才有效 |
|||
// #ifdef MP-WEIXIN |
|||
query = uni.createSelectorQuery().in(this.$parent); |
|||
// #endif |
|||
// #ifndef MP-WEIXIN |
|||
query = uni.createSelectorQuery() |
|||
// #endif |
|||
query.selectAll('.u-skeleton-fillet').boundingClientRect().exec((res) => { |
|||
this.filletNodes = res[0]; |
|||
}); |
|||
}, |
|||
// 圆形元素列表 |
|||
getCircleEls() { |
|||
let query = ''; |
|||
// 在微信小程序中，如果把骨架屏放入组件中使用的话，需要调in(this)上下文为父组件才有效 |
|||
// #ifdef MP-WEIXIN |
|||
query = uni.createSelectorQuery().in(this.$parent); |
|||
// #endif |
|||
// #ifndef MP-WEIXIN |
|||
query = uni.createSelectorQuery() |
|||
// #endif |
|||
query.selectAll('.u-skeleton-circle').boundingClientRect().exec((res) => { |
|||
this.circleNodes = res[0]; |
|||
}); |
|||
} |
|||
}, |
|||
// 组件被挂载 |
|||
mounted() { |
|||
// 获取系统信息 |
|||
let systemInfo = uni.getSystemInfoSync(); |
|||
this.windowHeight = systemInfo.windowHeight; |
|||
this.windowWinth = systemInfo.windowWidth; |
|||
this.selecterQueryInfo(); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.skeleton-fade { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: rgb(194, 207, 214); |
|||
animation-duration: 1.5s; |
|||
animation-name: blink; |
|||
animation-timing-function: ease-in-out; |
|||
animation-iteration-count: infinite; |
|||
} |
|||
|
|||
@keyframes blink { |
|||
0% { |
|||
opacity: 1; |
|||
} |
|||
|
|||
50% { |
|||
opacity: 0.4; |
|||
} |
|||
|
|||
100% { |
|||
opacity: 1; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,290 @@ |
|||
<template> |
|||
<view |
|||
class="u-slider" |
|||
@tap="onClick" |
|||
:class="[disabled ? 'u-slider--disabled' : '']" |
|||
:style="{ |
|||
backgroundColor: inactiveColor |
|||
}" |
|||
> |
|||
<view |
|||
class="u-slider__gap" |
|||
:style="[ |
|||
barStyle, |
|||
{ |
|||
height: height + 'rpx', |
|||
backgroundColor: activeColor |
|||
} |
|||
]" |
|||
> |
|||
<view |
|||
class="u-slider__button-wrap" |
|||
@touchstart="onTouchStart" |
|||
@touchmove="onTouchMove" |
|||
@touchend="onTouchEnd" |
|||
@touchcancel="onTouchEnd" |
|||
> |
|||
<slot v-if="$slots.default || $slots.$default" /> |
|||
<view |
|||
v-else |
|||
class="u-slider__button" |
|||
:style="[ |
|||
blockStyle, |
|||
{ |
|||
height: blockWidth + 'rpx', |
|||
width: blockWidth + 'rpx', |
|||
backgroundColor: blockColor |
|||
} |
|||
]" |
|||
></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* slider 滑块选择器 |
|||
* @tutorial https://uviewui.com/components/slider.html |
|||
* @property {Number | String} value 滑块默认值（默认0） |
|||
* @property {Number | String} min 最小值（默认0） |
|||
* @property {Number | String} max 最大值（默认100） |
|||
* @property {Number | String} step 步长（默认1） |
|||
* @property {Number | String} blockWidth 滑块宽度，高等于宽（30） |
|||
* @property {Number | String} height 滑块条高度，单位rpx（默认6） |
|||
* @property {String} inactiveColor 底部条背景颜色（默认#c0c4cc） |
|||
* @property {String} activeColor 底部选择部分的背景颜色（默认#2979ff） |
|||
* @property {String} blockColor 滑块颜色（默认#ffffff） |
|||
* @property {Object} blockStyle 给滑块自定义样式，对象形式 |
|||
* @property {Boolean} disabled 是否禁用滑块(默认为false) |
|||
* @event {Function} start 滑动触发 |
|||
* @event {Function} moving 正在滑动中 |
|||
* @event {Function} end 滑动结束 |
|||
* @example <u-slider v-model="value" /> |
|||
*/ |
|||
export default { |
|||
name: "u-slider", |
|||
emits: ["update:modelValue", "input", "start", "moving", "end"], |
|||
props: { |
|||
// 当前进度百分比值，范围0-100 |
|||
value: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
modelValue: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
// 是否禁用滑块 |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 滑块宽度，高等于宽，单位rpx |
|||
blockWidth: { |
|||
type: [Number, String], |
|||
default: 30 |
|||
}, |
|||
// 最小值 |
|||
min: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
// 最大值 |
|||
max: { |
|||
type: [Number, String], |
|||
default: 100 |
|||
}, |
|||
// 步进值 |
|||
step: { |
|||
type: [Number, String], |
|||
default: 1 |
|||
}, |
|||
// 滑块条高度，单位rpx |
|||
height: { |
|||
type: [Number, String], |
|||
default: 6 |
|||
}, |
|||
// 进度条的激活部分颜色 |
|||
activeColor: { |
|||
type: String, |
|||
default: "#2979ff" |
|||
}, |
|||
// 进度条的背景颜色 |
|||
inactiveColor: { |
|||
type: String, |
|||
default: "#c0c4cc" |
|||
}, |
|||
// 滑块的背景颜色 |
|||
blockColor: { |
|||
type: String, |
|||
default: "#ffffff" |
|||
}, |
|||
// 用户对滑块的自定义颜色 |
|||
blockStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
startX: 0, |
|||
status: "end", |
|||
newValue: 0, |
|||
distanceX: 0, |
|||
startValue: 0, |
|||
barStyle: {}, |
|||
sliderRect: { |
|||
left: 0, |
|||
width: 0 |
|||
} |
|||
}; |
|||
}, |
|||
watch: { |
|||
valueCom(n) { |
|||
// 只有在非滑动状态时，才可以通过value更新滑块值，这里监听，是为了让用户触发 |
|||
if (this.status == "end") this.updateValue(this.valueCom, false); |
|||
} |
|||
}, |
|||
created() { |
|||
this.updateValue(this.valueCom, false); |
|||
}, |
|||
mounted() { |
|||
// 获取滑块条的尺寸信息 |
|||
this.$uGetRect(".u-slider").then(rect => { |
|||
this.sliderRect = rect; |
|||
}); |
|||
}, |
|||
computed: { |
|||
valueCom() { |
|||
// #ifndef VUE3 |
|||
return this.value; |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
return this.modelValue; |
|||
// #endif |
|||
} |
|||
}, |
|||
methods: { |
|||
onTouchStart(event) { |
|||
if (this.disabled) return; |
|||
this.startX = 0; |
|||
// 触摸点集 |
|||
let touches = event.touches[0]; |
|||
// 触摸点到屏幕左边的距离 |
|||
this.startX = touches.clientX; |
|||
// 此处的this.value虽为props值，但是通过$emit('input')进行了修改 |
|||
this.startValue = this.format(this.valueCom); |
|||
// 标示当前的状态为开始触摸滑动 |
|||
this.status = "start"; |
|||
}, |
|||
onTouchMove(event) { |
|||
if (this.disabled) return; |
|||
// 连续触摸的过程会一直触发本方法，但只有手指触发且移动了才被认为是拖动了，才发出事件 |
|||
// 触摸后第一次移动已经将status设置为moving状态，故触摸第二次移动不会触发本事件 |
|||
if (this.status == "start") this.$emit("start"); |
|||
let touches = event.touches[0]; |
|||
// 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值 |
|||
this.distanceX = touches.clientX - this.sliderRect.left; |
|||
// 获得移动距离对整个滑块的百分比值，此为带有多位小数的值，不能用此更新视图 |
|||
// 否则造成通信阻塞，需要每改变一个step值时修改一次视图 |
|||
this.newValue = (this.distanceX / this.sliderRect.width) * 100; |
|||
this.status = "moving"; |
|||
// 发出moving事件 |
|||
this.$emit("moving"); |
|||
this.updateValue(this.newValue, true); |
|||
}, |
|||
onTouchEnd() { |
|||
if (this.disabled) return; |
|||
if (this.status === "moving") { |
|||
this.updateValue(this.newValue, false); |
|||
this.$emit("end"); |
|||
} |
|||
this.status = "end"; |
|||
}, |
|||
updateValue(value, drag) { |
|||
// 去掉小数部分，同时也是对step步进的处理 |
|||
const width = this.format(value); |
|||
// 不允许滑动的值超过max最大值，百分比也不能超过100 |
|||
if (width > this.max || width > 100) return; |
|||
// 设置移动的百分比值 |
|||
let barStyle = { |
|||
width: width + "%" |
|||
}; |
|||
// 移动期间无需过渡动画 |
|||
if (drag == true) { |
|||
barStyle.transition = "none"; |
|||
} else { |
|||
// 非移动期间，删掉对过渡为空的声明，让css中的声明起效 |
|||
delete barStyle.transition; |
|||
} |
|||
// 修改value值 |
|||
this.$emit("input", width); |
|||
this.$emit("update:modelValue", width); |
|||
this.barStyle = barStyle; |
|||
}, |
|||
format(value) { |
|||
// 将小数变成整数，为了减少对视图的更新，造成视图层与逻辑层的阻塞 |
|||
return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step; |
|||
}, |
|||
onClick(event) { |
|||
if (this.disabled) return; |
|||
// 直接点击滑块的情况，计算方式与onTouchMove方法相同 |
|||
const value = ((event.detail.x - this.sliderRect.left) / this.sliderRect.width) * 100; |
|||
this.updateValue(value, false); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-slider { |
|||
position: relative; |
|||
border-radius: 999px; |
|||
border-radius: 999px; |
|||
background-color: #ebedf0; |
|||
} |
|||
|
|||
.u-slider:before { |
|||
position: absolute; |
|||
right: 0; |
|||
left: 0; |
|||
content: ""; |
|||
top: -8px; |
|||
bottom: -8px; |
|||
z-index: -1; |
|||
} |
|||
|
|||
.u-slider__gap { |
|||
position: relative; |
|||
border-radius: inherit; |
|||
transition: width 0.2s; |
|||
transition: width 0.2s; |
|||
background-color: #1989fa; |
|||
} |
|||
|
|||
.u-slider__button { |
|||
width: 24px; |
|||
height: 24px; |
|||
border-radius: 50%; |
|||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); |
|||
background-color: #fff; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.u-slider__button-wrap { |
|||
position: absolute; |
|||
top: 50%; |
|||
right: 0; |
|||
transform: translate3d(50%, -50%, 0); |
|||
} |
|||
|
|||
.u-slider--disabled { |
|||
opacity: 0.5; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,200 @@ |
|||
<template> |
|||
<view class=""> |
|||
<view |
|||
class="u-steps" |
|||
:style="{ |
|||
flexDirection: direction |
|||
}" |
|||
> |
|||
<view class="u-steps__item" |
|||
:class="['u-steps__item--' + direction]" |
|||
v-for="(item, index) in list" :key="index" |
|||
> |
|||
<view |
|||
class="u-steps__item__num" |
|||
v-if="mode == 'number'" |
|||
:style="{ |
|||
backgroundColor: current < index ? 'transparent' : activeColor, |
|||
borderColor: current < index ? unActiveColor : activeColor |
|||
}" |
|||
> |
|||
<text v-if="current < index" :style="{ |
|||
color: current < index ? unActiveColor : activeColor, |
|||
}"> |
|||
{{ index + 1 }} |
|||
</text> |
|||
<u-icon v-else size="22" color="#ffffff" :name="icon"></u-icon> |
|||
</view> |
|||
<view class="u-steps__item__dot" v-if="mode == 'dot'" :style="{ |
|||
backgroundColor: index <= current ? activeColor : unActiveColor |
|||
}"></view> |
|||
<text class="u-line-1" :style="{ |
|||
color: index <= current ? activeColor : unActiveColor, |
|||
}" :class="['u-steps__item__text--' + direction]"> |
|||
{{ item.name }} |
|||
</text> |
|||
<view class="u-steps__item__line" :class="['u-steps__item__line--' + mode]" v-if="index < list.length - 1"> |
|||
<u-line :direction="direction" length="100%" :hair-line="false" :color="unActiveColor"></u-line> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* steps 步骤条 |
|||
* @description 该组件一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。 |
|||
* @tutorial https://www.uviewui.com/components/steps.html |
|||
* @property {String} mode 设置模式（默认dot） |
|||
* @property {Array} list 数轴条数据，数组。具体见上方示例 |
|||
* @property {String} type type主题（默认primary） |
|||
* @property {String} direction row-横向，column-竖向（默认row） |
|||
* @property {Number String} current 设置当前处于第几步 |
|||
* @property {String} active-color 已完成步骤的激活颜色，如设置，type值会失效 |
|||
* @property {String} un-active-color 未激活的颜色，用于表示未完成步骤的颜色（默认#606266） |
|||
* @example <u-steps :list="numList" active-color="#fa3534"></u-steps> |
|||
*/ |
|||
export default { |
|||
name: 'u-steps', |
|||
props: { |
|||
// 步骤条的类型，dot|number |
|||
mode: { |
|||
type: String, |
|||
default: 'dot' |
|||
}, |
|||
// 步骤条的数据 |
|||
list: { |
|||
type: Array, |
|||
default() { |
|||
return []; |
|||
} |
|||
}, |
|||
// 主题类型, primary|success|info|warning|error |
|||
type: { |
|||
type: String, |
|||
default: 'primary' |
|||
}, |
|||
// 当前哪一步是激活的 |
|||
current: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
// 激活步骤的颜色 |
|||
activeColor: { |
|||
type: String, |
|||
default: '#2979ff' |
|||
}, |
|||
// 未激活的颜色 |
|||
unActiveColor: { |
|||
type: String, |
|||
default: '#909399' |
|||
}, |
|||
// 自定义图标 |
|||
icon: { |
|||
type: String, |
|||
default: 'checkmark' |
|||
}, |
|||
// step的排列方向，row-横向，column-竖向 |
|||
direction: { |
|||
type: String, |
|||
default: 'row' |
|||
} |
|||
}, |
|||
data() { |
|||
return {}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import '../../libs/css/style.components.scss'; |
|||
|
|||
$u-steps-item-number-width: 44rpx; |
|||
$u-steps-item-dot-width: 20rpx; |
|||
|
|||
.u-steps { |
|||
@include vue-flex; |
|||
|
|||
.u-steps__item { |
|||
flex: 1; |
|||
text-align: center; |
|||
position: relative; |
|||
min-width: 100rpx; |
|||
font-size: 26rpx; |
|||
color: #8799a3; |
|||
@include vue-flex; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
|
|||
&--row { |
|||
@include vue-flex; |
|||
flex-direction: column; |
|||
|
|||
.u-steps__item__line { |
|||
position: absolute; |
|||
z-index: 0; |
|||
left: 75%; |
|||
width: 50%; |
|||
|
|||
&--dot { |
|||
top: calc(#{$u-steps-item-dot-width} / 2); |
|||
} |
|||
|
|||
&--number { |
|||
top: calc(#{$u-steps-item-number-width} / 2); |
|||
} |
|||
} |
|||
} |
|||
|
|||
&--column { |
|||
@include vue-flex; |
|||
flex-direction: row; |
|||
justify-content: flex-start; |
|||
min-height: 120rpx; |
|||
|
|||
.u-steps__item__line { |
|||
position: absolute; |
|||
z-index: 0; |
|||
height: 50%; |
|||
top: 75%; |
|||
|
|||
&--dot { |
|||
left: calc(#{$u-steps-item-dot-width} / 2); |
|||
} |
|||
|
|||
&--number { |
|||
left: calc(#{$u-steps-item-number-width} / 2); |
|||
} |
|||
} |
|||
} |
|||
|
|||
&__num { |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: $u-steps-item-number-width; |
|||
height: $u-steps-item-number-width; |
|||
border: 1px solid #8799a3; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
&__dot { |
|||
width: $u-steps-item-dot-width; |
|||
height: $u-steps-item-dot-width; |
|||
@include vue-flex; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
&__text--row { |
|||
margin-top: 14rpx; |
|||
} |
|||
|
|||
&__text--column { |
|||
margin-left: 14rpx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,166 @@ |
|||
<template> |
|||
<view class=""> |
|||
<view class="u-sticky-wrap" :class="[elClass]" :style="{ |
|||
height: fixed ? height + 'px' : 'auto', |
|||
backgroundColor: bgColor |
|||
}"> |
|||
<view class="u-sticky" :style="{ |
|||
position: fixed ? 'fixed' : 'static', |
|||
top: stickyTop + 'px', |
|||
left: left + 'px', |
|||
width: width == 'auto' ? 'auto' : width + 'px', |
|||
zIndex: uZIndex |
|||
}"> |
|||
<slot></slot> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* sticky 吸顶 |
|||
* @description 该组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。 |
|||
* @tutorial https://www.uviewui.com/components/sticky.html |
|||
* @property {String Number} offset-top 吸顶时与顶部的距离，单位rpx（默认0） |
|||
* @property {String Number} index 自定义标识，用于区分是哪一个组件 |
|||
* @property {Boolean} enable 是否开启吸顶功能（默认true） |
|||
* @property {String} bg-color 组件背景颜色（默认#ffffff） |
|||
* @property {String Number} z-index 吸顶时的z-index值（默认970） |
|||
* @property {String Number} h5-nav-height 导航栏高度，自定义导航栏时(无导航栏时需设置为0)，需要传入此值，单位px（默认44） |
|||
* @event {Function} fixed 组件吸顶时触发 |
|||
* @event {Function} unfixed 组件取消吸顶时触发 |
|||
* @example <u-sticky offset-top="200"><view>塞下秋来风景异，衡阳雁去无留意</view></u-sticky> |
|||
*/ |
|||
export default { |
|||
name: "u-sticky", |
|||
emits: ["fixed", "unfixed"], |
|||
props: { |
|||
// 吸顶容器到顶部某个距离的时候，进行吸顶，在H5平台，NavigationBar为44px |
|||
offsetTop: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
//列表中的索引值 |
|||
index: { |
|||
type: [Number, String], |
|||
default: '' |
|||
}, |
|||
// 是否开启吸顶功能 |
|||
enable: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// h5顶部导航栏的高度 |
|||
h5NavHeight: { |
|||
type: [Number, String], |
|||
default: 44 |
|||
}, |
|||
// 吸顶区域的背景颜色 |
|||
bgColor: { |
|||
type: String, |
|||
default: '#ffffff' |
|||
}, |
|||
// z-index值 |
|||
zIndex: { |
|||
type: [Number, String], |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
fixed: false, |
|||
height: 'auto', |
|||
stickyTop: 0, |
|||
elClass: this.$u.guid(), |
|||
left: 0, |
|||
width: 'auto', |
|||
}; |
|||
}, |
|||
watch: { |
|||
offsetTop(val) { |
|||
this.initObserver(); |
|||
}, |
|||
enable(val) { |
|||
if (val == false) { |
|||
this.fixed = false; |
|||
this.disconnectObserver('contentObserver'); |
|||
} else { |
|||
this.initObserver(); |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
uZIndex() { |
|||
return this.zIndex ? this.zIndex : this.$u.zIndex.sticky; |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.initObserver(); |
|||
}, |
|||
methods: { |
|||
initObserver() { |
|||
if (!this.enable) return; |
|||
// #ifdef H5 |
|||
this.stickyTop = this.offsetTop != 0 ? uni.upx2px(this.offsetTop) + this.h5NavHeight : this.h5NavHeight; |
|||
// #endif |
|||
// #ifndef H5 |
|||
this.stickyTop = this.offsetTop != 0 ? uni.upx2px(this.offsetTop) : 0; |
|||
// #endif |
|||
|
|||
this.disconnectObserver('contentObserver'); |
|||
this.$uGetRect('.' + this.elClass).then((res) => { |
|||
this.height = res.height; |
|||
this.left = res.left; |
|||
this.width = res.width; |
|||
this.$nextTick(() => { |
|||
this.observeContent(); |
|||
}); |
|||
}); |
|||
}, |
|||
observeContent() { |
|||
this.disconnectObserver('contentObserver'); |
|||
const contentObserver = uni.createIntersectionObserver(this,{ |
|||
thresholds: [0.95, 0.98, 1] |
|||
}); |
|||
contentObserver.relativeToViewport({ |
|||
top: -this.stickyTop |
|||
}); |
|||
contentObserver.observe('.' + this.elClass, res => { |
|||
if (!this.enable) return; |
|||
this.setFixed(res.boundingClientRect.top); |
|||
}); |
|||
this.contentObserver = contentObserver; |
|||
}, |
|||
setFixed(top) { |
|||
const fixed = top < this.stickyTop; |
|||
if (fixed) this.$emit('fixed', this.index); |
|||
else if(this.fixed) this.$emit('unfixed', this.index); |
|||
this.fixed = fixed; |
|||
}, |
|||
disconnectObserver(observerName) { |
|||
const observer = this[observerName]; |
|||
observer && observer.disconnect(); |
|||
}, |
|||
}, |
|||
// #ifndef VUE3 |
|||
beforeDestroy() { |
|||
this.disconnectObserver('contentObserver'); |
|||
}, |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
beforeUnmount() { |
|||
this.disconnectObserver('contentObserver'); |
|||
}, |
|||
// #endif |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-sticky { |
|||
z-index: 9999999999; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,404 @@ |
|||
<template> |
|||
<view class="u-subsection" :style="[subsectionStyle]"> |
|||
<view class="u-item u-line-1" :style="[itemStyle(index)]" @tap="click(index)" :class="[noBorderRight(index), 'u-item-' + index]" |
|||
v-for="(item, index) in listInfo" :key="index"> |
|||
<view :style="[textStyle(index)]" class="u-item-text u-line-1">{{ item.name }}</view> |
|||
<u-badge v-if="item.num > 0" :count="item.num" :offset="offset" size="mini"></u-badge> |
|||
</view> |
|||
<view class="u-item-bg" :style="[itemBarStyle]"></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* subsection 分段器 |
|||
* @description 该分段器一般用于用户从几个选项中选择某一个的场景 |
|||
* @tutorial https://www.uviewui.com/components/subsection.html |
|||
* @property {Array} list 选项的数组，形式见上方"基本使用" |
|||
* @property {String Number} current 初始化时默认选中的选项索引值（默认0） |
|||
* @property {String} active-color 激活时的颜色，mode为subsection时固定为白色（默认#303133） |
|||
* @property {String} inactive-color 未激活时字体的颜色，mode为subsection时无效（默认#606266） |
|||
* @property {String} mode 模式选择，见官网"模式选择"说明（默认button） |
|||
* @property {String Number} font-size 字体大小，单位rpx（默认28） |
|||
* @property {String Number} height 组件高度，单位rpx（默认70） |
|||
* @property {Boolean} animation 是否开启动画效果，见上方说明（默认true） |
|||
* @property {Boolean} bold 激活选项的字体是否加粗（默认true） |
|||
* @property {String} bg-color 组件背景颜色，mode为button时有效（默认#eeeeef） |
|||
* @property {String} button-color 按钮背景颜色，mode为button时有效（默认#ffffff） |
|||
* @event {Function} change 分段器选项发生改变时触发 |
|||
* @example <u-subsection active-color="#ff9900"></u-subsection> |
|||
*/ |
|||
export default { |
|||
name: "u-subsection", |
|||
emits: ["change","update:modelValue", "input"], |
|||
props: { |
|||
// tab的数据 |
|||
list: { |
|||
type: Array, |
|||
default () { |
|||
return []; |
|||
} |
|||
}, |
|||
value: { |
|||
type: [String, Number], |
|||
default: 0 |
|||
}, |
|||
modelValue: { |
|||
type: [String, Number], |
|||
default: 0 |
|||
}, |
|||
// 当前活动的tab的index |
|||
current: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
// 激活的颜色 |
|||
activeColor: { |
|||
type: String, |
|||
default: '#303133' |
|||
}, |
|||
// 未激活的颜色 |
|||
inactiveColor: { |
|||
type: String, |
|||
default: '#606266' |
|||
}, |
|||
// 模式选择，mode=button为按钮形式，mode=subsection时为分段模式 |
|||
mode: { |
|||
type: String, |
|||
default: 'button' |
|||
}, |
|||
// 字体大小，单位rpx |
|||
fontSize: { |
|||
type: [Number, String], |
|||
default: 28 |
|||
}, |
|||
// 是否开启动画效果 |
|||
animation: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 组件的高度，单位rpx |
|||
height: { |
|||
type: [Number, String], |
|||
default: 70 |
|||
}, |
|||
// 激活tab的字体是否加粗 |
|||
bold: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// mode=button时，组件背景颜色 |
|||
bgColor: { |
|||
type: String, |
|||
default: '#eeeeef' |
|||
}, |
|||
// mode = button时，滑块背景颜色 |
|||
buttonColor: { |
|||
type: String, |
|||
default: '#ffffff' |
|||
}, |
|||
// 在切换分段器的时候，是否让设备震一下 |
|||
vibrateShort: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
offset: { |
|||
type: Array, |
|||
default: function(){ |
|||
return [0,0] |
|||
} |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
itemBgStyle: { |
|||
width: 0, |
|||
left: 0, |
|||
backgroundColor: '#ffffff', |
|||
height: '100%', |
|||
transition: '' |
|||
}, |
|||
currentIndex: this.current, |
|||
buttonPadding: 3, // mode = button 时，组件的内边距 |
|||
borderRadius: 5, // 圆角值 |
|||
firstTimeVibrateShort: true ,// 组件初始化时，会触发current变化，此时不应震动 |
|||
listInfo:[] |
|||
}; |
|||
}, |
|||
watch: { |
|||
valueCom: { |
|||
immediate: true, |
|||
handler(nVal) { |
|||
if (nVal) { |
|||
this.currentIndex = nVal; |
|||
this.changeSectionStatus(nVal); |
|||
} |
|||
} |
|||
}, |
|||
current: { |
|||
immediate: true, |
|||
handler(nVal) { |
|||
if (nVal) { |
|||
this.currentIndex = nVal; |
|||
this.changeSectionStatus(nVal); |
|||
} |
|||
} |
|||
}, |
|||
list: { |
|||
deep:true, |
|||
handler(nVal=[]) { |
|||
this.listInfoFn(); |
|||
setTimeout(() => { |
|||
this.getTabsInfo(); |
|||
}, 10); |
|||
} |
|||
}, |
|||
|
|||
}, |
|||
computed: { |
|||
valueCom() { |
|||
// #ifndef VUE3 |
|||
return this.value; |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
return this.modelValue; |
|||
// #endif |
|||
}, |
|||
// 设置mode=subsection时，滑块特有的样式 |
|||
noBorderRight() { |
|||
return index => { |
|||
if (this.mode != 'subsection') return; |
|||
let classs = ''; |
|||
// 不显示右边的边框 |
|||
if (index < this.list.length - 1) classs += ' u-none-border-right'; |
|||
// 显示整个组件的左右边圆角 |
|||
if (index == 0) classs += ' u-item-first'; |
|||
if (index == this.list.length - 1) classs += ' u-item-last'; |
|||
return classs; |
|||
}; |
|||
}, |
|||
// 文字的样式 |
|||
textStyle() { |
|||
return index => { |
|||
let style = {}; |
|||
// 设置字体颜色 |
|||
if (this.mode == 'subsection') { |
|||
if (index == this.currentIndex) { |
|||
style.color = '#ffffff'; |
|||
} else { |
|||
style.color = this.activeColor; |
|||
} |
|||
} else { |
|||
if (index == this.currentIndex) { |
|||
style.color = this.activeColor; |
|||
} else { |
|||
style.color = this.inactiveColor; |
|||
} |
|||
} |
|||
// 字体加粗 |
|||
if (index == this.currentIndex && this.bold) style.fontWeight = 'bold'; |
|||
// 文字大小 |
|||
style.fontSize = this.fontSize + 'rpx'; |
|||
return style; |
|||
}; |
|||
}, |
|||
// 每个分段器item的样式 |
|||
itemStyle() { |
|||
return index => { |
|||
let style = {}; |
|||
if (this.mode == 'subsection') { |
|||
// 设置border的样式 |
|||
style.borderColor = this.activeColor; |
|||
style.borderWidth = '1px'; |
|||
style.borderStyle = 'solid'; |
|||
} |
|||
return style; |
|||
}; |
|||
}, |
|||
// mode=button时，外层view的样式 |
|||
subsectionStyle() { |
|||
let style = {}; |
|||
style.height = uni.upx2px(this.height) + 'px'; |
|||
if (this.mode == 'button') { |
|||
style.backgroundColor = this.bgColor; |
|||
style.padding = `${this.buttonPadding}px`; |
|||
style.borderRadius = `${this.borderRadius}px`; |
|||
} |
|||
return style; |
|||
}, |
|||
// 滑块的样式 |
|||
itemBarStyle() { |
|||
let style = {}; |
|||
style.backgroundColor = this.activeColor; |
|||
style.zIndex = 1; |
|||
if (this.mode == 'button') { |
|||
style.backgroundColor = this.buttonColor; |
|||
style.borderRadius = `${this.borderRadius}px`; |
|||
style.bottom = `${this.buttonPadding}px`; |
|||
style.height = uni.upx2px(this.height) - this.buttonPadding * 2 + 'px'; |
|||
style.zIndex = 0; |
|||
} |
|||
return Object.assign(this.itemBgStyle, style); |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.listInfoFn(); |
|||
setTimeout(() => { |
|||
this.getTabsInfo(); |
|||
}, 10); |
|||
}, |
|||
methods: { |
|||
listInfoFn(){ |
|||
let { list =[] } = this; |
|||
this.listInfo = this.list.map((val, index) => { |
|||
if (typeof val != 'object') { |
|||
let obj = { |
|||
width: 0, |
|||
name: val, |
|||
}; |
|||
return obj; |
|||
} else { |
|||
return val; |
|||
} |
|||
}); |
|||
return this.listInfo; |
|||
}, |
|||
// 改变滑块的样式 |
|||
changeSectionStatus(nVal) { |
|||
if (this.mode == 'subsection') { |
|||
// 根据滑块在最左边和最右边时，显示左边和右边的圆角 |
|||
if (nVal == this.list.length - 1) { |
|||
this.itemBgStyle.borderRadius = `0 ${this.buttonPadding}px ${this.buttonPadding}px 0`; |
|||
} |
|||
if (nVal == 0) { |
|||
this.itemBgStyle.borderRadius = `${this.buttonPadding}px 0 0 ${this.buttonPadding}px`; |
|||
} |
|||
if (nVal > 0 && nVal < this.list.length - 1) { |
|||
this.itemBgStyle.borderRadius = '0'; |
|||
} |
|||
} |
|||
// 更新滑块的位置 |
|||
setTimeout(() => { |
|||
this.itemBgLeft(); |
|||
}, 10); |
|||
if (this.vibrateShort && !this.firstTimeVibrateShort) { |
|||
// 使手机产生短促震动，微信小程序有效，APP(HX 2.6.8)和H5无效 |
|||
// #ifndef H5 |
|||
uni.vibrateShort(); |
|||
// #endif |
|||
} |
|||
// 第一次过后，设置firstTimeVibrateShort为false，让其下一次可以震动(如果允许震动的话) |
|||
this.firstTimeVibrateShort = false; |
|||
}, |
|||
click(index) { |
|||
// 不允许点击当前激活选项 |
|||
if (index == this.currentIndex) return; |
|||
this.currentIndex = index; |
|||
this.changeSectionStatus(index); |
|||
this.$emit('change', Number(index)); |
|||
this.$emit("input", Number(index)); |
|||
this.$emit("update:modelValue", Number(index)); |
|||
}, |
|||
// 获取各个tab的节点信息 |
|||
getTabsInfo() { |
|||
let view = uni.createSelectorQuery().in(this); |
|||
for (let i = 0; i < this.list.length; i++) { |
|||
view.select('.u-item-' + i).boundingClientRect(); |
|||
} |
|||
view.exec(res => { |
|||
if (!res.length) { |
|||
setTimeout(() => { |
|||
this.getTabsInfo(); |
|||
return; |
|||
}, 10); |
|||
} |
|||
// 将分段器每个item的宽度，放入listInfo数组 |
|||
res.map((val, index) => { |
|||
this.listInfo[index].width = val.width; |
|||
}); |
|||
// 初始化滑块的宽度 |
|||
if (this.mode == 'subsection') { |
|||
this.itemBgStyle.width = this.listInfo[0].width + 'px'; |
|||
} else if (this.mode == 'button') { |
|||
this.itemBgStyle.width = this.listInfo[0].width + 'px'; |
|||
} |
|||
// 初始化滑块的位置 |
|||
this.itemBgLeft(); |
|||
}); |
|||
}, |
|||
itemBgLeft() { |
|||
// 根据是否开启动画效果， |
|||
if (this.animation) { |
|||
this.itemBgStyle.transition = 'all 0.35s'; |
|||
} else { |
|||
this.itemBgStyle.transition = 'all 0s'; |
|||
} |
|||
let left = 0; |
|||
// 计算当前活跃item到组件左边的距离 |
|||
this.listInfo.map((val, index) => { |
|||
if (index < this.currentIndex) left += val.width; |
|||
}); |
|||
// 根据mode不同模式，计算滑块需要移动的距离 |
|||
if (this.mode == 'subsection') { |
|||
this.itemBgStyle.left = left + 'px'; |
|||
} else if (this.mode == 'button') { |
|||
this.itemBgStyle.left = left + this.buttonPadding + 'px'; |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-subsection { |
|||
@include vue-flex; |
|||
align-items: center; |
|||
overflow: hidden; |
|||
position: relative; |
|||
} |
|||
|
|||
.u-item { |
|||
flex: 1; |
|||
text-align: center; |
|||
font-size: 26rpx; |
|||
height: 100%; |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: $u-main-color; |
|||
padding: 0 6rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.u-item-bg { |
|||
background-color: $u-type-primary; |
|||
position: absolute; |
|||
z-index: -1; |
|||
} |
|||
|
|||
.u-none-border-right { |
|||
border-right: none !important; |
|||
} |
|||
|
|||
.u-item-first { |
|||
border-top-left-radius: 8rpx; |
|||
border-bottom-left-radius: 8rpx; |
|||
} |
|||
|
|||
.u-item-last { |
|||
border-top-right-radius: 8rpx; |
|||
border-bottom-right-radius: 8rpx; |
|||
} |
|||
|
|||
.u-item-text { |
|||
transition: all 0.35s; |
|||
color: $u-main-color; |
|||
@include vue-flex; |
|||
align-items: center; |
|||
position: relative; |
|||
z-index: 3; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,256 @@ |
|||
<template> |
|||
<view class=""> |
|||
<movable-area class="u-swipe-action" :style="{ backgroundColor: bgColor }"> |
|||
<movable-view |
|||
class="u-swipe-view" |
|||
@change="change" |
|||
@touchend="touchend" |
|||
@touchstart="touchstart" |
|||
direction="horizontal" |
|||
:disabled="disabled" |
|||
:x="moveX" |
|||
:style="{ |
|||
width: movableViewWidth ? movableViewWidth : '100%' |
|||
}" |
|||
> |
|||
<view |
|||
class="u-swipe-content" |
|||
@tap.stop="contentClick" |
|||
> |
|||
<slot></slot> |
|||
</view> |
|||
<view class="u-swipe-del" v-if="showBtn" @tap.stop="btnClick(index)" :style="[btnStyle(item.style)]" v-for="(item, index) in options" :key="index"> |
|||
<view class="u-btn-text">{{ item.text }}</view> |
|||
</view> |
|||
</movable-view> |
|||
</movable-area> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* swipeAction 左滑单元格 |
|||
* @description 该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作。 |
|||
* @tutorial https://www.uviewui.com/components/swipeAction.html |
|||
* @property {String} bg-color 整个组件背景颜色（默认#ffffff） |
|||
* @property {Array} options 数组形式，可以配置背景颜色和文字 |
|||
* @property {String Number} index 标识符，点击时候用于区分点击了哪一个，用v-for循环时的index即可 |
|||
* @property {String Number} btn-width 按钮宽度，单位rpx（默认180） |
|||
* @property {Boolean} disabled 是否禁止某个swipeAction滑动（默认false） |
|||
* @property {Boolean} show 打开或者关闭某个组件（默认false） |
|||
* @event {Function} click 点击组件时触发 |
|||
* @event {Function} close 组件触发关闭状态时 |
|||
* @event {Function} content-click 点击内容时触发 |
|||
* @event {Function} open 组件触发打开状态时 |
|||
* @example <u-swipe-action btn-text="收藏">...</u-swipe-action> |
|||
*/ |
|||
export default { |
|||
name: 'u-swipe-action', |
|||
emits: ["click", "content-click", "open", "close"], |
|||
props: { |
|||
// index值，用于得知点击删除的是哪个按钮 |
|||
index: { |
|||
type: [Number, String], |
|||
default: '' |
|||
}, |
|||
// 滑动按钮的宽度，单位为rpx |
|||
btnWidth: { |
|||
type: [String, Number], |
|||
default: 180 |
|||
}, |
|||
// 是否禁止某个action滑动 |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 打开或者关闭组件 |
|||
show: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 组件背景颜色 |
|||
bgColor: { |
|||
type: String, |
|||
default: '#ffffff' |
|||
}, |
|||
// 是否使手机发生短促震动，目前只在iOS的微信小程序有效(2020-05-06) |
|||
vibrateShort: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 按钮操作参数 |
|||
options: { |
|||
type: Array, |
|||
default() { |
|||
return []; |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
show: { |
|||
immediate: true, |
|||
handler(nVal, oVal) { |
|||
if (nVal) { |
|||
this.open(); |
|||
} else { |
|||
this.close(); |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
moveX: 0, // movable-view元素在x轴上需要移动的目标移动距离，用于展开或收起滑动的按钮 |
|||
scrollX: 0, // movable-view移动过程中产生的change事件中的x轴移动值 |
|||
status: false, // 滑动的状态，表示当前是展开还是关闭按钮的状态 |
|||
movableAreaWidth: 0, // 滑动区域 |
|||
elId: this.$u.guid(), // id，用于通知另外组件关闭时的识别 |
|||
showBtn: false, // 刚开始渲染视图时不显示右边的按钮，避免视图闪动 |
|||
}; |
|||
}, |
|||
computed: { |
|||
movableViewWidth() { |
|||
return this.movableAreaWidth + this.allBtnWidth + 'px'; |
|||
}, |
|||
innerBtnWidth() { |
|||
return uni.upx2px(this.btnWidth); |
|||
}, |
|||
allBtnWidth() { |
|||
return uni.upx2px(this.btnWidth) * this.options.length; |
|||
}, |
|||
btnStyle() { |
|||
return style => { |
|||
let css = {}; |
|||
style.width = this.btnWidth + 'rpx'; |
|||
return style; |
|||
}; |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.getActionRect(); |
|||
}, |
|||
methods: { |
|||
// 点击按钮 |
|||
btnClick(index) { |
|||
this.status = false; |
|||
// this.index为点击的几个组件，index为点击某个组件的第几个按钮(options数组的索引) |
|||
this.$emit('click', this.index, index); |
|||
}, |
|||
// movable-view元素移动事件 |
|||
change(e) { |
|||
this.scrollX = e.detail.x; |
|||
}, |
|||
// 关闭按钮状态 |
|||
close() { |
|||
this.moveX = 0; |
|||
this.status = false; |
|||
}, |
|||
// 打开按钮的状态 |
|||
open() { |
|||
if (this.disabled) return; |
|||
this.moveX = -this.allBtnWidth; |
|||
this.status = true; |
|||
}, |
|||
// 用户手指离开movable-view元素，停止触摸 |
|||
touchend() { |
|||
this.moveX = this.scrollX; |
|||
// 停止触摸时候，判断当前是展开还是关闭状态 |
|||
// 关闭状态 |
|||
// 这一步很重要，需要先给this.moveX一个变化的随机值，否则因为前后设置的为同一个值 |
|||
// props单向数据流的原因，导致movable-view元素不会发生变化，切记，详见文档： |
|||
// https://uniapp.dcloud.io/use?id=%e5%b8%b8%e8%a7%81%e9%97%ae%e9%a2%98 |
|||
this.$nextTick(function() { |
|||
if (this.status == false) { |
|||
// 关闭状态左滑，产生的x轴位移为负值，也就是说滑动的距离大于按钮的四分之一宽度，自动展开按钮 |
|||
if (this.scrollX <= -this.allBtnWidth / 4) { |
|||
this.moveX = -this.allBtnWidth; // 按钮宽度的负值，即为展开状态movable-view元素左滑的距离 |
|||
this.status = true; // 标志当前为展开状态 |
|||
this.emitOpenEvent(); |
|||
// 产生震动效果 |
|||
if (this.vibrateShort) uni.vibrateShort(); |
|||
} else { |
|||
this.moveX = 0; // 如果距离没有按钮宽度的四分之一，自动收起 |
|||
this.status = false; |
|||
this.emitCloseEvent(); |
|||
} |
|||
} else { |
|||
// 如果在打开的状态下，右滑动的距离X轴偏移超过按钮的四分之一(负值反过来的四分之三)，自动收起按钮 |
|||
if (this.scrollX > (-this.allBtnWidth * 3) / 4) { |
|||
this.moveX = 0; |
|||
this.$nextTick(() => { |
|||
this.moveX = 101; |
|||
}); |
|||
this.status = false; |
|||
this.emitCloseEvent(); |
|||
} else { |
|||
this.moveX = -this.allBtnWidth; |
|||
this.status = true; |
|||
this.emitOpenEvent(); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
emitOpenEvent() { |
|||
this.$emit('open', this.index); |
|||
}, |
|||
emitCloseEvent() { |
|||
this.$emit('close', this.index); |
|||
}, |
|||
// 开始触摸 |
|||
touchstart() {}, |
|||
getActionRect() { |
|||
this.$uGetRect('.u-swipe-action').then(res => { |
|||
this.movableAreaWidth = res.width; |
|||
// 等视图更新完后，再显示右边的可滑动按钮，防止这些按钮会"闪一下" |
|||
this.$nextTick(() => { |
|||
this.showBtn = true; |
|||
}) |
|||
}); |
|||
}, |
|||
// 点击内容触发事件 |
|||
contentClick() { |
|||
// 点击内容时，如果当前为打开状态，收起组件 |
|||
if (this.status == true) { |
|||
this.status = 'close'; |
|||
this.moveX = 0; |
|||
} |
|||
this.$emit('content-click', this.index); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-swipe-action { |
|||
width: auto; |
|||
height: initial; |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.u-swipe-view { |
|||
@include vue-flex; |
|||
height: initial; |
|||
position: relative; |
|||
/* 这一句很关键，覆盖默认的绝对定位 */ |
|||
} |
|||
|
|||
.u-swipe-content { |
|||
flex: 1; |
|||
} |
|||
|
|||
.u-swipe-del { |
|||
position: relative; |
|||
font-size: 30rpx; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.u-btn-text { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,341 @@ |
|||
<template> |
|||
<view class="u-swiper-wrap" :style="{ |
|||
borderRadius: `${borderRadius}rpx` |
|||
}"> |
|||
<swiper :current="elCurrent" @change="change" @animationfinish="animationfinish" :interval="interval" :circular="circular" :duration="duration" :autoplay="autoplay" |
|||
:previous-margin="effect3d ? effect3dPreviousMargin + 'rpx' : '0'" :next-margin="effect3d ? effect3dPreviousMargin + 'rpx' : '0'" |
|||
:style="{ |
|||
height: height + 'rpx', |
|||
backgroundColor: bgColor |
|||
}"> |
|||
<swiper-item class="u-swiper-item" v-for="(item, index) in list" :key="index"> |
|||
<view class="u-list-image-wrap" @tap.stop.prevent="listClick(index)" :class="[uCurrent != index ? 'u-list-scale' : '']" :style="{ |
|||
borderRadius: `${borderRadius}rpx`, |
|||
transform: effect3d && uCurrent != index ? 'scaleY(0.9)' : 'scaleY(1)', |
|||
margin: effect3d && uCurrent != index ? '0 20rpx' : 0, |
|||
}"> |
|||
<image class="u-swiper-image" :src="item[name] || item" :mode="imgMode"></image> |
|||
<view v-if="title && item.title" class="u-swiper-title u-line-1" :style="[{ |
|||
'padding-bottom': titlePaddingBottom |
|||
}, titleStyle]"> |
|||
{{ item.title }} |
|||
</view> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
<view class="u-swiper-indicator" :style="{ |
|||
top: indicatorPos == 'topLeft' || indicatorPos == 'topCenter' || indicatorPos == 'topRight' ? '12rpx' : 'auto', |
|||
bottom: indicatorPos == 'bottomLeft' || indicatorPos == 'bottomCenter' || indicatorPos == 'bottomRight' ? '12rpx' : 'auto', |
|||
justifyContent: justifyContent, |
|||
padding: `0 ${effect3d ? '74rpx' : '24rpx'}` |
|||
}"> |
|||
<block v-if="mode == 'rect'"> |
|||
<view class="u-indicator-item-rect" :class="{ 'u-indicator-item-rect-active': index == uCurrent }" v-for="(item, index) in list" |
|||
:key="index"></view> |
|||
</block> |
|||
<block v-if="mode == 'dot'"> |
|||
<view class="u-indicator-item-dot" :class="{ 'u-indicator-item-dot-active': index == uCurrent }" v-for="(item, index) in list" |
|||
:key="index"></view> |
|||
</block> |
|||
<block v-if="mode == 'round'"> |
|||
<view class="u-indicator-item-round" :class="{ 'u-indicator-item-round-active': index == uCurrent }" v-for="(item, index) in list" |
|||
:key="index"></view> |
|||
</block> |
|||
<block v-if="mode == 'number'"> |
|||
<view class="u-indicator-item-number">{{ uCurrent + 1 }}/{{ list.length }}</view> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* swiper 轮播图 |
|||
* @description 该组件一般用于导航轮播，广告展示等场景,可开箱即用 |
|||
* @tutorial https://www.uviewui.com/components/swiper.html |
|||
* @property {Array} list 轮播图数据，见官网"基本使用"说明 |
|||
* @property {Boolean} title 是否显示标题文字，需要配合list参数，见官网说明（默认false） |
|||
* @property {String} mode 指示器模式，见官网说明（默认round） |
|||
* @property {String Number} height 轮播图组件高度，单位rpx（默认250） |
|||
* @property {String} indicator-pos 指示器的位置（默认bottomCenter） |
|||
* @property {Boolean} effect3d 是否开启3D效果（默认false） |
|||
* @property {Boolean} autoplay 是否自动播放（默认true） |
|||
* @property {String Number} interval 自动轮播时间间隔，单位ms（默认2500） |
|||
* @property {Boolean} circular 是否衔接播放，见官网说明（默认true） |
|||
* @property {String} bg-color 背景颜色（默认#f3f4f6） |
|||
* @property {String Number} border-radius 轮播图圆角值，单位rpx（默认8） |
|||
* @property {Object} title-style 自定义标题样式 |
|||
* @property {String Number} effect3d-previous-margin mode = true模式的情况下，激活项与前后项之间的距离，单位rpx（默认50） |
|||
* @property {String} img-mode 图片的裁剪模式，详见image组件裁剪模式（默认aspectFill） |
|||
* @event {Function} click 点击轮播图时触发 |
|||
* @example <u-swiper :list="list" mode="dot" indicator-pos="bottomRight"></u-swiper> |
|||
*/ |
|||
export default { |
|||
name: "u-swiper", |
|||
emits: ["click", "change"], |
|||
props: { |
|||
// 轮播图的数据,格式如：[{image: 'xxxx', title: 'xxxx'}，{image: 'yyyy', title: 'yyyy'}]，其中title字段可选 |
|||
list: { |
|||
type: Array, |
|||
default () { |
|||
return []; |
|||
} |
|||
}, |
|||
// 是否显示title标题 |
|||
title: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 用户自定义的指示器的样式 |
|||
indicator: { |
|||
type: Object, |
|||
default () { |
|||
return {}; |
|||
} |
|||
}, |
|||
// 圆角值 |
|||
borderRadius: { |
|||
type: [Number, String], |
|||
default: 8 |
|||
}, |
|||
// 隔多久自动切换 |
|||
interval: { |
|||
type: [String, Number], |
|||
default: 3000 |
|||
}, |
|||
// 指示器的模式，rect|dot|number|round |
|||
mode: { |
|||
type: String, |
|||
default: 'round' |
|||
}, |
|||
// list的高度，单位rpx |
|||
height: { |
|||
type: [Number, String], |
|||
default: 250 |
|||
}, |
|||
// 指示器的位置，topLeft|topCenter|topRight|bottomLeft|bottomCenter|bottomRight |
|||
indicatorPos: { |
|||
type: String, |
|||
default: 'bottomCenter' |
|||
}, |
|||
// 是否开启缩放效果 |
|||
effect3d: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 3D模式的情况下，激活item与前后item之间的距离，单位rpx |
|||
effect3dPreviousMargin: { |
|||
type: [Number, String], |
|||
default: 50 |
|||
}, |
|||
// 是否自动播放 |
|||
autoplay: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 自动轮播时间间隔，单位ms |
|||
duration: { |
|||
type: [Number, String], |
|||
default: 500 |
|||
}, |
|||
// 是否衔接滑动，即到最后一张时接着滑动，是否自动切换到第一张 |
|||
circular: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 图片的裁剪模式 |
|||
imgMode: { |
|||
type: String, |
|||
default: 'aspectFill' |
|||
}, |
|||
// 从list数组中读取的图片的属性名 |
|||
name: { |
|||
type: String, |
|||
default: 'image' |
|||
}, |
|||
// 背景颜色 |
|||
bgColor: { |
|||
type: String, |
|||
default: '#f3f4f6' |
|||
}, |
|||
// 初始化时，默认显示第几项 |
|||
current: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
// 标题的样式，对象形式 |
|||
titleStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
// 如果外部的list发生变化，判断长度是否被修改，如果前后长度不一致，重置uCurrent值，避免溢出 |
|||
list(nVal, oVal) { |
|||
if(nVal.length !== oVal.length) this.uCurrent = 0; |
|||
}, |
|||
// 监听外部current的变化，实时修改内部依赖于此测uCurrent值，如果更新了current，而不是更新uCurrent， |
|||
// 就会错乱，因为指示器是依赖于uCurrent的 |
|||
current(n) { |
|||
this.uCurrent = n; |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
uCurrent: this.current // 当前活跃的swiper-item的index |
|||
}; |
|||
}, |
|||
computed: { |
|||
justifyContent() { |
|||
if (this.indicatorPos == 'topLeft' || this.indicatorPos == 'bottomLeft') return 'flex-start'; |
|||
if (this.indicatorPos == 'topCenter' || this.indicatorPos == 'bottomCenter') return 'center'; |
|||
if (this.indicatorPos == 'topRight' || this.indicatorPos == 'bottomRight') return 'flex-end'; |
|||
}, |
|||
titlePaddingBottom() { |
|||
let tmp = 0; |
|||
if (this.mode == 'none') return '12rpx'; |
|||
if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPos) >= 0 && this.mode == 'number') { |
|||
tmp = '60rpx'; |
|||
} else if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPos) >= 0 && this.mode != 'number') { |
|||
tmp = '40rpx'; |
|||
} else { |
|||
tmp = '12rpx'; |
|||
} |
|||
return tmp; |
|||
}, |
|||
// 因为uni的swiper组件的current参数只接受Number类型，这里做一个转换 |
|||
elCurrent() { |
|||
return Number(this.current); |
|||
} |
|||
}, |
|||
methods: { |
|||
listClick(index) { |
|||
this.$emit('click', index); |
|||
}, |
|||
change(e) { |
|||
let current = e.detail.current; |
|||
this.uCurrent = current; |
|||
// 发出change事件，表示当前自动切换的index，从0开始 |
|||
this.$emit('change', current); |
|||
}, |
|||
// 头条小程序不支持animationfinish事件，改由change事件 |
|||
// 暂不监听此事件，因为不再给swiper绑定uCurrent属性 |
|||
animationfinish(e) { |
|||
// #ifndef MP-TOUTIAO |
|||
// this.uCurrent = e.detail.current; |
|||
// #endif |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-swiper-wrap { |
|||
position: relative; |
|||
overflow: hidden; |
|||
transform: translateY(0); |
|||
} |
|||
|
|||
.u-swiper-image { |
|||
width: 100%; |
|||
will-change: transform; |
|||
height: 100%; |
|||
/* #ifndef APP-NVUE */ |
|||
display: block; |
|||
/* #endif */ |
|||
/* #ifdef H5 */ |
|||
pointer-events: none; |
|||
/* #endif */ |
|||
} |
|||
|
|||
.u-swiper-indicator { |
|||
padding: 0 24rpx; |
|||
position: absolute; |
|||
@include vue-flex; |
|||
width: 100%; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.u-indicator-item-rect { |
|||
width: 26rpx; |
|||
height: 8rpx; |
|||
margin: 0 6rpx; |
|||
transition: all 0.5s; |
|||
background-color: rgba(0, 0, 0, 0.3); |
|||
} |
|||
|
|||
.u-indicator-item-rect-active { |
|||
background-color: rgba(255, 255, 255, 0.8); |
|||
} |
|||
|
|||
.u-indicator-item-dot { |
|||
width: 14rpx; |
|||
height: 14rpx; |
|||
margin: 0 6rpx; |
|||
border-radius: 20rpx; |
|||
transition: all 0.5s; |
|||
background-color: rgba(0, 0, 0, 0.3); |
|||
} |
|||
|
|||
.u-indicator-item-dot-active { |
|||
background-color: rgba(255, 255, 255, 0.8); |
|||
} |
|||
|
|||
.u-indicator-item-round { |
|||
width: 14rpx; |
|||
height: 14rpx; |
|||
margin: 0 6rpx; |
|||
border-radius: 20rpx; |
|||
transition: all 0.5s; |
|||
background-color: rgba(0, 0, 0, 0.3); |
|||
} |
|||
|
|||
.u-indicator-item-round-active { |
|||
width: 34rpx; |
|||
background-color: rgba(255, 255, 255, 0.8); |
|||
} |
|||
|
|||
.u-indicator-item-number { |
|||
padding: 6rpx 16rpx; |
|||
line-height: 1; |
|||
background-color: rgba(0, 0, 0, 0.3); |
|||
border-radius: 100rpx; |
|||
font-size: 26rpx; |
|||
color: rgba(255, 255, 255, 0.8); |
|||
} |
|||
|
|||
.u-list-scale { |
|||
transform-origin: center center; |
|||
} |
|||
|
|||
.u-list-image-wrap { |
|||
width: 100%; |
|||
height: 100%; |
|||
flex: 1; |
|||
transition: all 0.5s; |
|||
overflow: hidden; |
|||
box-sizing: content-box; |
|||
position: relative; |
|||
} |
|||
|
|||
.u-swiper-title { |
|||
position: absolute; |
|||
background-color: rgba(0, 0, 0, 0.3); |
|||
bottom: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
font-size: 28rpx; |
|||
padding: 12rpx 24rpx; |
|||
color: rgba(255, 255, 255, 0.9); |
|||
} |
|||
|
|||
.u-swiper-item { |
|||
@include vue-flex; |
|||
overflow: hidden; |
|||
align-items: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,191 @@ |
|||
<template> |
|||
<view |
|||
class="u-switch" |
|||
:class="[valueCom == true ? 'u-switch--on' : '', disabled ? 'u-switch--disabled' : '']" |
|||
@tap="onClick" |
|||
:style="[switchStyle]" |
|||
> |
|||
<view |
|||
class="u-switch__node node-class" |
|||
:style="{ |
|||
width: $u.addUnit(size), |
|||
height: $u.addUnit(size) |
|||
}" |
|||
> |
|||
<u-loading |
|||
:show="loading" |
|||
class="u-switch__loading" |
|||
:size="size * 0.6" |
|||
:color="loadingColor" |
|||
/> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* switch 开关选择器 |
|||
* @description 选择开关一般用于只有两个选择，且只能选其一的场景。 |
|||
* @tutorial https://www.uviewui.com/components/switch.html |
|||
* @property {Boolean} loading 是否处于加载中（默认false） |
|||
* @property {Boolean} disabled 是否禁用（默认false） |
|||
* @property {String Number} size 开关尺寸，单位rpx（默认50） |
|||
* @property {String} active-color 打开时的背景色（默认#2979ff） |
|||
* @property {Boolean} inactive-color 关闭时的背景色（默认#ffffff） |
|||
* @property {Boolean | Number | String} active-value 打开选择器时通过change事件发出的值（默认true） |
|||
* @property {Boolean | Number | String} inactive-value 关闭选择器时通过change事件发出的值（默认false） |
|||
* @event {Function} change 在switch打开或关闭时触发 |
|||
* @example <u-switch v-model="checked" active-color="red" inactive-color="#eee"></u-switch> |
|||
*/ |
|||
export default { |
|||
name: "u-switch", |
|||
emits: ["update:modelValue", "input", "change"], |
|||
props: { |
|||
// 通过v-model双向绑定的值 |
|||
value: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
modelValue: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否为加载中状态 |
|||
loading: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否为禁用装填 |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 开关尺寸，单位rpx |
|||
size: { |
|||
type: [Number, String], |
|||
default: 50 |
|||
}, |
|||
// 打开时的背景颜色 |
|||
activeColor: { |
|||
type: String, |
|||
default: "#2979ff" |
|||
}, |
|||
// 关闭时的背景颜色 |
|||
inactiveColor: { |
|||
type: String, |
|||
default: "#ffffff" |
|||
}, |
|||
// 是否使手机发生短促震动，目前只在iOS的微信小程序有效(2020-05-06) |
|||
vibrateShort: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 打开选择器时的值 |
|||
activeValue: { |
|||
type: [Number, String, Boolean], |
|||
default: true |
|||
}, |
|||
// 关闭选择器时的值 |
|||
inactiveValue: { |
|||
type: [Number, String, Boolean], |
|||
default: false |
|||
} |
|||
}, |
|||
data() { |
|||
return {}; |
|||
}, |
|||
computed: { |
|||
valueCom() { |
|||
// #ifndef VUE3 |
|||
return this.value; |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
return this.modelValue; |
|||
// #endif |
|||
}, |
|||
switchStyle() { |
|||
let style = {}; |
|||
style.fontSize = this.size + "rpx"; |
|||
style.backgroundColor = this.valueCom ? this.activeColor : this.inactiveColor; |
|||
return style; |
|||
}, |
|||
loadingColor() { |
|||
return this.valueCom ? this.activeColor : null; |
|||
} |
|||
}, |
|||
methods: { |
|||
onClick() { |
|||
if (!this.disabled && !this.loading) { |
|||
// 使手机产生短促震动，微信小程序有效，APP(HX 2.6.8)和H5无效 |
|||
if (this.vibrateShort) uni.vibrateShort(); |
|||
this.$emit("input", !this.valueCom); |
|||
this.$emit("update:modelValue", !this.valueCom); |
|||
// 放到下一个生命周期，因为双向绑定的value修改父组件状态需要时间，且是异步的 |
|||
this.$nextTick(() => { |
|||
this.$emit("change", this.valueCom ? this.activeValue : this.inactiveValue); |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-switch { |
|||
position: relative; |
|||
/* #ifndef APP-NVUE */ |
|||
display: inline-block; |
|||
/* #endif */ |
|||
box-sizing: initial; |
|||
width: 2em; |
|||
height: 1em; |
|||
background-color: #fff; |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
border-radius: 1em; |
|||
transition: background-color 0.3s; |
|||
font-size: 50rpx; |
|||
} |
|||
|
|||
.u-switch__node { |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
border-radius: 100%; |
|||
z-index: 1; |
|||
background-color: #fff; |
|||
background-color: #fff; |
|||
box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), |
|||
0 3px 3px 0 rgba(0, 0, 0, 0.05); |
|||
box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), |
|||
0 3px 3px 0 rgba(0, 0, 0, 0.05); |
|||
transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05); |
|||
transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05), |
|||
-webkit-transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05); |
|||
transition: transform cubic-bezier(0.3, 1.05, 0.4, 1.05); |
|||
transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05); |
|||
} |
|||
|
|||
.u-switch__loading { |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.u-switch--on { |
|||
background-color: #1989fa; |
|||
} |
|||
|
|||
.u-switch--on .u-switch__node { |
|||
transform: translateX(100%); |
|||
} |
|||
|
|||
.u-switch--disabled { |
|||
opacity: 0.4; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,373 @@ |
|||
<template> |
|||
<view v-if="show" class="u-tabbar" @touchmove.stop.prevent="() => {}"> |
|||
<view |
|||
class="u-tabbar__content safe-area-inset-bottom" |
|||
:style="{ |
|||
height: $u.addUnit(height), |
|||
backgroundColor: bgColor |
|||
}" |
|||
:class="{ |
|||
'u-border-top': borderTop |
|||
}" |
|||
> |
|||
<view |
|||
class="u-tabbar__content__item" |
|||
v-for="(item, index) in list" |
|||
:key="index" |
|||
:class="{ |
|||
'u-tabbar__content__circle': midButton && item.midButton |
|||
}" |
|||
@tap.stop="clickHandler(index)" |
|||
:style="{ |
|||
backgroundColor: bgColor |
|||
}" |
|||
> |
|||
<view |
|||
:class="[ |
|||
midButton && item.midButton |
|||
? 'u-tabbar__content__circle__button' |
|||
: 'u-tabbar__content__item__button' |
|||
]" |
|||
> |
|||
<u-icon |
|||
:size="midButton && item.midButton ? midButtonSize : iconSize" |
|||
:name="elIconPath(index)" |
|||
img-mode="scaleToFill" |
|||
:color="elColor(index)" |
|||
:custom-prefix="item.customIcon ? 'custom-icon' : 'uicon'" |
|||
></u-icon> |
|||
<u-badge |
|||
:count="item.count" |
|||
:is-dot="item.isDot" |
|||
v-if="item.count" |
|||
:offset="[-2, getOffsetRight(item.count, item.isDot)]" |
|||
></u-badge> |
|||
</view> |
|||
<view |
|||
class="u-tabbar__content__item__text" |
|||
:style="{ |
|||
color: elColor(index) |
|||
}" |
|||
> |
|||
<text class="u-line-1">{{ item.text }}</text> |
|||
</view> |
|||
</view> |
|||
<view |
|||
v-if="midButton" |
|||
class="u-tabbar__content__circle__border" |
|||
:class="{ |
|||
'u-border': borderTop |
|||
}" |
|||
:style="{ |
|||
backgroundColor: bgColor, |
|||
left: midButtonLeft |
|||
}" |
|||
></view> |
|||
</view> |
|||
<!-- 这里加上一个48rpx的高度,是为了增高有凸起按钮时的防塌陷高度(也即按钮凸出来部分的高度) --> |
|||
<view |
|||
class="u-fixed-placeholder safe-area-inset-bottom" |
|||
:style="{ |
|||
height: `calc(${$u.addUnit(height)} + ${midButton ? 48 : 0}rpx)` |
|||
}" |
|||
></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
emits: ["update:modelValue", "input", "change"], |
|||
props: { |
|||
// 通过v-model绑定current值 |
|||
value: { |
|||
type: [String, Number], |
|||
default: 0 |
|||
}, |
|||
modelValue: { |
|||
type: [String, Number], |
|||
default: 0 |
|||
}, |
|||
// 显示与否 |
|||
show: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 整个tabbar的背景颜色 |
|||
bgColor: { |
|||
type: String, |
|||
default: "#ffffff" |
|||
}, |
|||
// tabbar的高度，默认50px，单位任意，如果为数值，则为rpx单位 |
|||
height: { |
|||
type: [String, Number], |
|||
default: "50px" |
|||
}, |
|||
// 非凸起图标的大小，单位任意，数值默认rpx |
|||
iconSize: { |
|||
type: [String, Number], |
|||
default: 40 |
|||
}, |
|||
// 凸起的图标的大小，单位任意，数值默认rpx |
|||
midButtonSize: { |
|||
type: [String, Number], |
|||
default: 90 |
|||
}, |
|||
// 激活时的演示，包括字体图标，提示文字等的演示 |
|||
activeColor: { |
|||
type: String, |
|||
default: "#303133" |
|||
}, |
|||
// 未激活时的颜色 |
|||
inactiveColor: { |
|||
type: String, |
|||
default: "#606266" |
|||
}, |
|||
// 是否显示中部的凸起按钮 |
|||
midButton: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 配置参数 |
|||
list: { |
|||
type: Array, |
|||
default() { |
|||
return []; |
|||
} |
|||
}, |
|||
// 切换前的回调 |
|||
beforeSwitch: { |
|||
type: Function, |
|||
default: null |
|||
}, |
|||
// 是否显示顶部的横线 |
|||
borderTop: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否隐藏原生tabbar |
|||
hideTabBar: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
// 由于安卓太菜了，通过css居中凸起按钮的外层元素有误差，故通过js计算将其居中 |
|||
midButtonLeft: "50%", |
|||
pageUrl: "" // 当前页面URL |
|||
}; |
|||
}, |
|||
created() { |
|||
// 是否隐藏原生tabbar |
|||
if (this.hideTabBar) uni.hideTabBar(); |
|||
// 获取引入了u-tabbar页面的路由地址，该地址没有路径前面的"/" |
|||
let pages = getCurrentPages(); |
|||
// 页面栈中的最后一个即为项为当前页面，route属性为页面路径 |
|||
this.pageUrl = pages[pages.length - 1].route; |
|||
}, |
|||
computed: { |
|||
valueCom() { |
|||
// #ifndef VUE3 |
|||
return this.value; |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
return this.modelValue; |
|||
// #endif |
|||
}, |
|||
elIconPath() { |
|||
return index => { |
|||
// 历遍u-tabbar的每一项item时，判断是否传入了pagePath参数，如果传入了 |
|||
// 和data中的pageUrl参数对比，如果相等，即可判断当前的item对应当前的tabbar页面，设置高亮图标 |
|||
// 采用这个方法，可以无需使用v-model绑定的value值 |
|||
let pagePath = this.list[index].pagePath; |
|||
// 如果定义了pagePath属性，意味着使用系统自带tabbar方案，否则使用一个页面用几个组件模拟tabbar页面的方案 |
|||
// 这两个方案对处理tabbar item的激活与否方式不一样 |
|||
if (pagePath) { |
|||
if (pagePath == this.pageUrl || pagePath == "/" + this.pageUrl) { |
|||
return this.list[index].selectedIconPath; |
|||
} else { |
|||
return this.list[index].iconPath; |
|||
} |
|||
} else { |
|||
// 普通方案中，索引等于v-model值时，即为激活项 |
|||
return index == this.valueCom |
|||
? this.list[index].selectedIconPath |
|||
: this.list[index].iconPath; |
|||
} |
|||
}; |
|||
}, |
|||
elColor() { |
|||
return index => { |
|||
// 判断方法同理于elIconPath |
|||
let pagePath = this.list[index].pagePath; |
|||
if (pagePath) { |
|||
if (pagePath == this.pageUrl || pagePath == "/" + this.pageUrl) return this.activeColor; |
|||
else return this.inactiveColor; |
|||
} else { |
|||
return index == this.valueCom ? this.activeColor : this.inactiveColor; |
|||
} |
|||
}; |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.midButton && this.getMidButtonLeft(); |
|||
}, |
|||
methods: { |
|||
async clickHandler(index) { |
|||
if (this.beforeSwitch && typeof this.beforeSwitch === "function") { |
|||
// 执行回调，同时传入索引当作参数 |
|||
// 在微信，支付宝等环境(H5正常)，会导致父组件定义的customBack()函数体中的this变成子组件的this |
|||
// 通过bind()方法，绑定父组件的this，让this.customBack()的this为父组件的上下文 |
|||
let beforeSwitch = this.beforeSwitch.bind(this.$u.$parent.call(this))(index); |
|||
// 判断是否返回了promise |
|||
if (!!beforeSwitch && typeof beforeSwitch.then === "function") { |
|||
await beforeSwitch |
|||
.then(res => { |
|||
// promise返回成功， |
|||
this.switchTab(index); |
|||
}) |
|||
.catch(err => {}); |
|||
} else if (beforeSwitch === true) { |
|||
// 如果返回true |
|||
this.switchTab(index); |
|||
} |
|||
} else { |
|||
this.switchTab(index); |
|||
} |
|||
}, |
|||
// 切换tab |
|||
switchTab(index) { |
|||
// 发出事件和修改v-model绑定的值 |
|||
this.$emit("change", index); |
|||
// 如果有配置pagePath属性，使用uni.switchTab进行跳转 |
|||
if (this.list[index].pagePath) { |
|||
uni.switchTab({ |
|||
url: this.list[index].pagePath |
|||
}); |
|||
} else { |
|||
// 如果配置了papgePath属性，将不会双向绑定v-model传入的value值 |
|||
// 因为这个模式下，不再需要v-model绑定的value值了，而是通过getCurrentPages()适配 |
|||
this.$emit("input", index); |
|||
this.$emit("update:modelValue", index); |
|||
} |
|||
}, |
|||
// 计算角标的right值 |
|||
getOffsetRight(count, isDot) { |
|||
// 点类型，count大于9(两位数)，分别设置不同的right值，避免位置太挤 |
|||
if (isDot) { |
|||
return -20; |
|||
} else if (count > 9) { |
|||
return -40; |
|||
} else { |
|||
return -30; |
|||
} |
|||
}, |
|||
// 获取凸起按钮外层元素的left值，让其水平居中 |
|||
getMidButtonLeft() { |
|||
let windowWidth = this.$u.sys().windowWidth; |
|||
// 由于安卓中css计算left: 50%的结果不准确，故用js计算 |
|||
this.midButtonLeft = windowWidth / 2 + "px"; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "../../libs/css/style.components.scss"; |
|||
.u-fixed-placeholder { |
|||
/* #ifndef APP-NVUE */ |
|||
box-sizing: content-box; |
|||
/* #endif */ |
|||
} |
|||
|
|||
.u-tabbar { |
|||
&__content { |
|||
@include vue-flex; |
|||
align-items: center; |
|||
position: relative; |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
z-index: 998; |
|||
/* #ifndef APP-NVUE */ |
|||
box-sizing: content-box; |
|||
/* #endif */ |
|||
|
|||
&__circle__border { |
|||
border-radius: 100%; |
|||
width: 110rpx; |
|||
height: 110rpx; |
|||
top: -48rpx; |
|||
position: absolute; |
|||
z-index: 4; |
|||
background-color: #ffffff; |
|||
// 由于安卓的无能，导致只有3个tabbar item时，此css计算方式有误差 |
|||
// 故使用js计算的形式来定位，此处不注释，是因为js计算有延后，避免出现位置闪动 |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
|
|||
&:after { |
|||
border-radius: 100px; |
|||
} |
|||
} |
|||
|
|||
&__item { |
|||
flex: 1; |
|||
justify-content: center; |
|||
height: 100%; |
|||
padding: 12rpx 0; |
|||
@include vue-flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
position: relative; |
|||
|
|||
&__button { |
|||
position: absolute; |
|||
top: 14rpx; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
} |
|||
|
|||
&__text { |
|||
color: $u-content-color; |
|||
font-size: 26rpx; |
|||
line-height: 28rpx; |
|||
position: absolute; |
|||
bottom: 14rpx; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
width: 100%; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
&__circle { |
|||
position: relative; |
|||
@include vue-flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
z-index: 10; |
|||
/* #ifndef APP-NVUE */ |
|||
height: calc(100% - 1px); |
|||
/* #endif */ |
|||
|
|||
&__button { |
|||
width: 90rpx; |
|||
height: 90rpx; |
|||
border-radius: 100%; |
|||
@include vue-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: absolute; |
|||
background-color: #ffffff; |
|||
top: -40rpx; |
|||
left: 50%; |
|||
z-index: 6; |
|||
transform: translateX(-50%); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,85 @@ |
|||
<template> |
|||
<view class="u-table" :style="[tableStyle]"> |
|||
<slot /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* table 表格 |
|||
* @description 表格组件一般用于展示大量结构化数据的场景 |
|||
* @tutorial https://www.uviewui.com/components/table.html |
|||
* @property {String} border-color 表格边框的颜色（默认#e4e7ed） |
|||
* @property {String} bg-color 表格的背景颜色（默认#ffffff） |
|||
* @property {String} align 单元格的内容对齐方式，作用类似css的text-align（默认center） |
|||
* @property {String} padding 单元格的内边距，同css的padding写法（默认10rpx 0） |
|||
* @property {String Number} font-size 单元格字体大小，单位rpx（默认28） |
|||
* @property {String} color 单元格字体颜色（默认#606266） |
|||
* @property {Object} th-style th单元格的样式，对象形式(将th所需参数放在table组件，是为了避免每一个th组件要写一遍） |
|||
* @event {Function} click 点击组件时触发 |
|||
* @event {Function} close 点击关闭按钮时触发 |
|||
* @example <u-table></u-table> |
|||
*/ |
|||
export default { |
|||
name: "u-table", |
|||
emits: ["click", "close"], |
|||
props: { |
|||
borderColor: { |
|||
type: String, |
|||
default: '#e4e7ed' |
|||
}, |
|||
align: { |
|||
type: String, |
|||
default: 'center' |
|||
}, |
|||
// td的内边距 |
|||
padding: { |
|||
type: String, |
|||
default: '10rpx 6rpx' |
|||
}, |
|||
// 字体大小 |
|||
fontSize: { |
|||
type: [String, Number], |
|||
default: 28 |
|||
}, |
|||
// 字体颜色 |
|||
color: { |
|||
type: String, |
|||
default: '#606266' |
|||
}, |
|||
// th的自定义样式 |
|||
thStyle: { |
|||
type: Object, |
|||
default () { |
|||
return {} |
|||
} |
|||
}, |
|||
// table的背景颜色 |
|||
bgColor: { |
|||
type: String, |
|||
default: '#ffffff' |
|||
} |
|||
}, |
|||
data() { |
|||
return {} |
|||
}, |
|||
computed: { |
|||
tableStyle() { |
|||
let style = {}; |
|||
style.borderLeft = `solid 1px ${this.borderColor}`; |
|||
style.borderTop = `solid 1px ${this.borderColor}`; |
|||
style.backgroundColor = this.bgColor;; |
|||
return style; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-table { |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,489 @@ |
|||
<template> |
|||
<view class="u-tabs" :style="{ |
|||
zIndex: zIndex, |
|||
background: bgColor |
|||
}"> |
|||
<scroll-view scroll-x class="u-scroll-view" :scroll-left="scrollLeft" scroll-with-animation :style="{ zIndex: zIndex + 1 }"> |
|||
<view class="u-tabs-scroll-box" :class="{'u-tabs-scroll-flex': !isScroll}"> |
|||
<view class="u-tabs-item" :style="[tabItemStyle(index)]" |
|||
v-for="(item, index) in getTabs" :key="index" :class="[preId + index]" @tap="emit(index)"> |
|||
<u-badge :count="item[count] || item['count'] || 0" :offset="offset" size="mini"></u-badge> |
|||
{{ item[name] || item['name']}} |
|||
</view> |
|||
<view v-if="showBar" class="u-scroll-bar" :style="[tabBarStyle]"></view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import colorGradient from '../../libs/function/colorGradient'; |
|||
let color = colorGradient; |
|||
const { windowWidth } = uni.getSystemInfoSync(); |
|||
const preId = 'UEl_'; |
|||
|
|||
/** |
|||
* tabsSwiper 全屏选项卡 |
|||
* @description 该组件内部实现主要依托于uniapp的scroll-view和swiper组件，主要特色是切换过程中，tabsSwiper文字的颜色可以渐变，底部滑块可以 跟随式滑动，活动tab滚动居中等。应用场景可以用于需要左右切换页面，比如商城的订单中心(待收货-待付款-待评价-已退货)等应用场景。 |
|||
* @tutorial https://www.uviewui.com/components/tabsSwiper.html |
|||
* @property {Boolean} is-scroll tabs是否可以左右拖动（默认true） |
|||
* @property {Array} list 标签数组，元素为对象，如[{name: '推荐'}] |
|||
* @property {String Number} current 指定哪个tab为激活状态（默认0） |
|||
* @property {String Number} height 导航栏的高度，单位rpx（默认80） |
|||
* @property {String Number} font-size tab文字大小，单位rpx（默认30） |
|||
* @property {String Number} swiper-width tabs组件外部swiper的宽度，默认为屏幕宽度，单位rpx（默认750） |
|||
* @property {String} active-color 滑块和激活tab文字的颜色（默认#2979ff） |
|||
* @property {String} inactive-color tabs文字颜色（默认#303133） |
|||
* @property {String Number} bar-width 滑块宽度，单位rpx（默认40） |
|||
* @property {String Number} bar-height 滑块高度，单位rpx（默认6） |
|||
* @property {Object} bar-style 底部滑块的样式，对象形式 |
|||
* @property {Object} active-item-style 活动tabs item的样式，对象形式 |
|||
* @property {Boolean} show-bar 是否显示底部的滑块（默认true） |
|||
* @property {String Number} gutter 单个tab标签的左右内边距之和，单位rpx（默认40） |
|||
* @property {String} bg-color tabs导航栏的背景颜色（默认#ffffff） |
|||
* @property {String} name 组件内部读取的list参数中的属性名，见官网说明（默认name） |
|||
* @property {String} count 组件内部读取的list参数中的属性名（badge徽标数），同name属性的使用，见官网说明（默认count） |
|||
* @property {Array} offset 设置badge徽标数的位置偏移，格式为 [x, y]，也即设置的为top和right的值，单位rpx（默认[5, 20]） |
|||
* @property {Boolean} bold 激活选项的字体是否加粗（默认true） |
|||
* @event {Function} change 点击标签时触发 |
|||
* @example <u-tabs-swiper ref="tabs" :list="list" :is-scroll="false"></u-tabs-swiper> |
|||
*/ |
|||
export default { |
|||
name: "u-tabs-swiper", |
|||
emits: ["update:modelValue", "input", "change"], |
|||
props: { |
|||
// 导航菜单是否需要滚动，如只有2或者3个的时候，就不需要滚动了，此时使用flex平分tab的宽度 |
|||
isScroll: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
//需循环的标签列表 |
|||
list: { |
|||
type: Array, |
|||
default () { |
|||
return []; |
|||
} |
|||
}, |
|||
// 当前活动tab的索引 |
|||
current: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
// 导航栏的高度和行高，单位rpx |
|||
height: { |
|||
type: [Number, String], |
|||
default: 80 |
|||
}, |
|||
// 字体大小，单位rpx |
|||
fontSize: { |
|||
type: [Number, String], |
|||
default: 30 |
|||
}, |
|||
// 过渡动画时长, 单位s |
|||
// duration: { |
|||
// type: [Number, String], |
|||
// default: 0.5 |
|||
// }, |
|||
swiperWidth: { |
|||
//line3生效, 外部swiper的宽度, 单位rpx |
|||
type: [String, Number], |
|||
default: 750 |
|||
}, |
|||
// 选中项的主题颜色 |
|||
activeColor: { |
|||
type: String, |
|||
default: '#2979ff' |
|||
}, |
|||
// 未选中项的颜色 |
|||
inactiveColor: { |
|||
type: String, |
|||
default: '#303133' |
|||
}, |
|||
// 菜单底部移动的bar的宽度，单位rpx |
|||
barWidth: { |
|||
type: [Number, String], |
|||
default: 40 |
|||
}, |
|||
// 移动bar的高度 |
|||
barHeight: { |
|||
type: [Number, String], |
|||
default: 6 |
|||
}, |
|||
// 单个tab的左或右内边距（各占一半），单位rpx |
|||
gutter: { |
|||
type: [Number, String], |
|||
default: 40 |
|||
}, |
|||
// 如果是绝对定位，添加z-index值 |
|||
zIndex: { |
|||
type: [Number, String], |
|||
default: 1 |
|||
}, |
|||
// 导航栏的背景颜色 |
|||
bgColor: { |
|||
type: String, |
|||
default: '#ffffff' |
|||
}, |
|||
//滚动至中心目标类型 |
|||
autoCenterMode: { |
|||
type: String, |
|||
default: 'window' |
|||
}, |
|||
// 读取传入的数组对象的属性(tab名称) |
|||
name: { |
|||
type: String, |
|||
default: 'name' |
|||
}, |
|||
// 读取传入的数组对象的属性(徽标数) |
|||
count: { |
|||
type: String, |
|||
default: 'count' |
|||
}, |
|||
// 徽标数位置偏移 |
|||
offset: { |
|||
type: Array, |
|||
default: () => { |
|||
return [5, 20] |
|||
} |
|||
}, |
|||
// 活动tab字体是否加粗 |
|||
bold: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 当前活动tab item的样式 |
|||
activeItemStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {} |
|||
} |
|||
}, |
|||
// 是否显示底部的滑块 |
|||
showBar: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 底部滑块的自定义样式 |
|||
barStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
scrollLeft: 0, // 滚动scroll-view的左边滚动距离 |
|||
tabQueryInfo: [], // 存放对tab菜单查询后的节点信息 |
|||
windowWidth: 0, // 屏幕宽度，单位为px |
|||
//scrollBarLeft: 0, // 移动bar需要通过translateX()移动的距离 |
|||
animationFinishCurrent: this.current, |
|||
componentsWidth: 0, |
|||
line3AddDx: 0, |
|||
line3Dx: 0, |
|||
preId, |
|||
sW: 0, |
|||
tabsInfo: [], |
|||
colorGradientArr: [], |
|||
colorStep: 100 // 两个颜色之间的渐变等分 |
|||
}; |
|||
}, |
|||
computed: { |
|||
// 获取当前活跃的current值 |
|||
getCurrent() { |
|||
const current = Number(this.current); |
|||
// 判断是否超出边界 |
|||
if (current > this.getTabs.length - 1) { |
|||
return this.getTabs.length - 1; |
|||
} |
|||
if (current < 0) return 0; |
|||
return current; |
|||
}, |
|||
getTabs() { |
|||
return this.list; |
|||
}, |
|||
// 滑块需要移动的距离 |
|||
scrollBarLeft() { |
|||
return Number(this.line3Dx) + Number(this.line3AddDx); |
|||
}, |
|||
// 滑块的宽度转为px单位 |
|||
barWidthPx() { |
|||
return uni.upx2px(this.barWidth); |
|||
}, |
|||
// tab的样式 |
|||
tabItemStyle() { |
|||
return (index) => { |
|||
let style = { |
|||
height: this.height + 'rpx', |
|||
lineHeight: this.height + 'rpx', |
|||
padding: `0 ${this.gutter / 2}rpx`, |
|||
color: this.tabsInfo.length > 0 ? (this.tabsInfo[index] ? this.tabsInfo[index].color : this.activeColor) : this.inactiveColor, |
|||
fontSize: this.fontSize + 'rpx', |
|||
zIndex: this.zIndex + 2, |
|||
fontWeight: (index == this.getCurrent && this.bold) ? 'bold' : 'normal' |
|||
}; |
|||
if(index == this.getCurrent) { |
|||
// 给选中的tab item添加外部自定义的样式 |
|||
style = Object.assign(style, this.activeItemStyle); |
|||
} |
|||
return style; |
|||
} |
|||
}, |
|||
// 底部滑块的样式 |
|||
tabBarStyle() { |
|||
let style = { |
|||
width: this.barWidthPx + 'px', |
|||
height: this.barHeight + 'rpx', |
|||
borderRadius: '100px', |
|||
backgroundColor: this.activeColor, |
|||
left: this.scrollBarLeft + 'px' |
|||
}; |
|||
return Object.assign(style, this.barStyle); |
|||
} |
|||
}, |
|||
watch: { |
|||
current(n, o) { |
|||
this.change(n); |
|||
this.setFinishCurrent(n); |
|||
}, |
|||
list() { |
|||
this.$nextTick(() => { |
|||
this.init(); |
|||
}) |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.init(); |
|||
}, |
|||
methods: { |
|||
async init() { |
|||
this.countPx(); |
|||
await this.getTabsInfo(); |
|||
this.countLine3Dx(); |
|||
this.getQuery(() => { |
|||
this.setScrollViewToCenter(); |
|||
}); |
|||
// 颜色渐变过程数组 |
|||
this.colorGradientArr = color.colorGradient(this.inactiveColor, this.activeColor, this.colorStep); |
|||
}, |
|||
// 获取各个tab的节点信息 |
|||
getTabsInfo() { |
|||
return new Promise((resolve, reject) => { |
|||
let view = uni.createSelectorQuery().in(this); |
|||
for (let i = 0; i < this.list.length; i++) { |
|||
view.select('.' + preId + i).boundingClientRect(); |
|||
} |
|||
view.exec(res => { |
|||
const arr = []; |
|||
for (let i = 0; i < res.length; i++) { |
|||
// 给每个tab添加其文字颜色属性 |
|||
res[i].color = this.inactiveColor; |
|||
// 当前tab直接赋予activeColor |
|||
if (i == this.getCurrent) res[i].color = this.activeColor; |
|||
arr.push(res[i]); |
|||
} |
|||
this.tabsInfo = arr; |
|||
resolve(); |
|||
}); |
|||
}) |
|||
}, |
|||
// 当swiper滑动结束，计算滑块最终要停留的位置 |
|||
countLine3Dx() { |
|||
const tab = this.tabsInfo[this.animationFinishCurrent]; |
|||
// 让滑块中心点和当前tab中心重合 |
|||
if (tab) this.line3Dx = tab.left + tab.width / 2 - this.barWidthPx / 2 - this.tabsInfo[0].left; |
|||
}, |
|||
countPx() { |
|||
// swiper宽度由rpx转为px单位，因为dx等，都是px单位 |
|||
this.sW = uni.upx2px(Number(this.swiperWidth)); |
|||
}, |
|||
emit(index) { |
|||
this.$emit('change', index); |
|||
}, |
|||
change() { |
|||
this.setScrollViewToCenter(); |
|||
}, |
|||
getQuery(cb) { |
|||
try { |
|||
let view = uni.createSelectorQuery().in(this).select('.u-tabs'); |
|||
view.fields({ |
|||
size: true |
|||
}, |
|||
data => { |
|||
if (data) { |
|||
this.componentsWidth = data.width; |
|||
if (cb && typeof cb === 'function') cb(data); |
|||
} else { |
|||
this.getQuery(cb); |
|||
} |
|||
} |
|||
).exec(); |
|||
} catch (e) { |
|||
this.componentsWidth = windowWidth; |
|||
} |
|||
}, |
|||
// 把活动tab移动到屏幕中心点 |
|||
setScrollViewToCenter() { |
|||
let tab; |
|||
tab = this.tabsInfo[this.animationFinishCurrent]; |
|||
if (tab) { |
|||
let tabCenter = tab.left + tab.width / 2; |
|||
let fatherWidth; |
|||
// 活动tab移动到中心时，以屏幕还是tab组件为宽度为基准 |
|||
if (this.autoCenterMode === 'window') { |
|||
fatherWidth = windowWidth; |
|||
} else { |
|||
fatherWidth = this.componentsWidth; |
|||
} |
|||
this.scrollLeft = tabCenter - fatherWidth / 2; |
|||
} |
|||
}, |
|||
setDx(dx) { |
|||
let nextTabIndex = dx > 0 ? this.animationFinishCurrent + 1 : this.animationFinishCurrent - 1; |
|||
// 判断索引是否超出边界 |
|||
nextTabIndex = nextTabIndex <= 0 ? 0 : nextTabIndex; |
|||
nextTabIndex = nextTabIndex >= this.list.length ? this.list.length - 1 : nextTabIndex; |
|||
const tab = this.tabsInfo[nextTabIndex]; |
|||
// 当前tab中心点x轴坐标 |
|||
let nowTab = this.tabsInfo[this.animationFinishCurrent]; |
|||
let nowTabX = nowTab.left + nowTab.width / 2; |
|||
// 下一个tab |
|||
let nextTab = this.tabsInfo[nextTabIndex]; |
|||
let nextTabX = nextTab.left + nextTab.width / 2; |
|||
// 两个tab之间的距离，因为下一个tab可能在当前tab的左边或者右边，取绝对值即可 |
|||
let distanceX = Math.abs(nextTabX - nowTabX); |
|||
this.line3AddDx = (dx / this.sW) * distanceX; |
|||
this.setTabColor(this.animationFinishCurrent, nextTabIndex, dx); |
|||
}, |
|||
// 设置tab的颜色 |
|||
setTabColor(nowTabIndex, nextTabIndex, dx) { |
|||
let colorIndex = Math.abs(Math.ceil((dx / this.sW) * 100)); |
|||
let colorLength = this.colorGradientArr.length; |
|||
// 处理超出索引边界的情况 |
|||
colorIndex = colorIndex >= colorLength ? colorLength - 1 : colorIndex <= 0 ? 0 : colorIndex; |
|||
// 设置下一个tab的颜色 |
|||
this.tabsInfo[nextTabIndex].color = this.colorGradientArr[colorIndex]; |
|||
// 设置当前tab的颜色 |
|||
this.tabsInfo[nowTabIndex].color = this.colorGradientArr[colorLength - 1 - colorIndex]; |
|||
}, |
|||
// swiper结束滑动 |
|||
setFinishCurrent(current) { |
|||
// 如果滑动的索引不一致，修改tab颜色变化，因为可能会有直接点击tab的情况 |
|||
this.tabsInfo.map((val, index) => { |
|||
if (current == index) val.color = this.activeColor; |
|||
else val.color = this.inactiveColor; |
|||
return val; |
|||
}); |
|||
this.line3AddDx = 0; |
|||
this.animationFinishCurrent = current; |
|||
this.countLine3Dx(); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
view, |
|||
scroll-view { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.u-tabs { |
|||
width: 100%; |
|||
transition-property: background-color, color; |
|||
} |
|||
|
|||
/* #ifndef APP-NVUE */ |
|||
::-webkit-scrollbar, |
|||
::-webkit-scrollbar, |
|||
::-webkit-scrollbar { |
|||
display: none; |
|||
width: 0 !important; |
|||
height: 0 !important; |
|||
-webkit-appearance: none; |
|||
background: transparent; |
|||
} |
|||
/* #endif */ |
|||
|
|||
/* #ifdef H5 */ |
|||
// 通过样式穿透，隐藏H5下，scroll-view下的滚动条 |
|||
scroll-view ::v-deep ::-webkit-scrollbar { |
|||
display: none; |
|||
width: 0 !important; |
|||
height: 0 !important; |
|||
-webkit-appearance: none; |
|||
background: transparent; |
|||
} |
|||
|
|||
/* #endif */ |
|||
|
|||
.u-scroll-view { |
|||
width: 100%; |
|||
white-space: nowrap; |
|||
position: relative; |
|||
} |
|||
|
|||
.u-tabs-scroll-box { |
|||
position: relative; |
|||
} |
|||
|
|||
.u-tabs-scroll-flex { |
|||
@include vue-flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.u-tabs-scroll-flex .u-tabs-item { |
|||
flex: 1; |
|||
} |
|||
|
|||
.u-tabs-item { |
|||
position: relative; |
|||
display: inline-block; |
|||
text-align: center; |
|||
transition-property: background-color, color, font-weight; |
|||
} |
|||
|
|||
.content { |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.boxStyle { |
|||
pointer-events: none; |
|||
position: absolute; |
|||
transition-property: all; |
|||
} |
|||
|
|||
.boxStyle2 { |
|||
pointer-events: none; |
|||
position: absolute; |
|||
bottom: 0; |
|||
transition-property: all; |
|||
transform: translateY(-100%); |
|||
} |
|||
|
|||
.itemBackgroundBox { |
|||
pointer-events: none; |
|||
position: absolute; |
|||
top: 0; |
|||
transition-property: left, background-color; |
|||
@include vue-flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.itemBackground { |
|||
height: 100%; |
|||
width: 100%; |
|||
transition-property: all; |
|||
} |
|||
|
|||
.u-scroll-bar { |
|||
position: absolute; |
|||
bottom: 4rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,399 @@ |
|||
<template> |
|||
<view class="u-tabs" :style="{ |
|||
background: bgColor |
|||
}"> |
|||
<!-- $u.getRect()对组件根节点无效，因为写了.in(this)，故这里获取内层接点尺寸 --> |
|||
<view :id="id"> |
|||
<scroll-view scroll-x class="u-scroll-view" :scroll-left="scrollLeft" scroll-with-animation> |
|||
<view class="u-scroll-box" :id="id" :class="{'u-tabs-scroll-flex': !isScroll}"> |
|||
<view class="u-tab-item u-line-1" :id="'u-tab-item-' + index" v-for="(item, index) in list" :key="index" @tap="clickTab(index)" |
|||
:style="[tabItemStyle(index)]"> |
|||
<u-badge :count="item[count] || item['count'] || 0" :offset="offset" size="mini"></u-badge> |
|||
{{ item[name] || item['name']}} |
|||
</view> |
|||
<view v-if="showBar" class="u-tab-bar" :style="[tabBarStyle]"></view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* tabs 标签 |
|||
* @description 该组件，是一个tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。 |
|||
* @tutorial https://www.uviewui.com/components/tabs.html |
|||
* @property {Boolean} is-scroll tabs是否可以左右拖动（默认true） |
|||
* @property {Array} list 标签数组，元素为对象，如[{name: '推荐'}] |
|||
* @property {String Number} current 指定哪个tab为激活状态（默认0） |
|||
* @property {String Number} height 导航栏的高度，单位rpx（默认80） |
|||
* @property {String Number} font-size tab文字大小，单位rpx（默认30） |
|||
* @property {String Number} duration 滑块移动一次所需的时间，单位秒（默认0.5） |
|||
* @property {String} active-color 滑块和激活tab文字的颜色（默认#2979ff） |
|||
* @property {String} inactive-color tabs文字颜色（默认#303133） |
|||
* @property {String Number} bar-width 滑块宽度，单位rpx（默认40） |
|||
* @property {Object} active-item-style 活动tabs item的样式，对象形式 |
|||
* @property {Object} bar-style 底部滑块的样式，对象形式 |
|||
* @property {Boolean} show-bar 是否显示底部的滑块（默认true） |
|||
* @property {String Number} bar-height 滑块高度，单位rpx（默认6） |
|||
* @property {String Number} item-width 标签的宽度（默认auto） |
|||
* @property {String Number} gutter 单个tab标签的左右内边距之和，单位rpx（默认40） |
|||
* @property {String} bg-color tabs导航栏的背景颜色（默认#ffffff） |
|||
* @property {String} name 组件内部读取的list参数中的属性名（tab名称），见官网说明（默认name） |
|||
* @property {String} count 组件内部读取的list参数中的属性名（badge徽标数），同name属性的使用，见官网说明（默认count） |
|||
* @property {Array} offset 设置badge徽标数的位置偏移，格式为 [x, y]，也即设置的为top和right的值，单位rpx（默认[5, 20]） |
|||
* @property {Boolean} bold 激活选项的字体是否加粗（默认true） |
|||
* @event {Function} change 点击标签时触发 |
|||
* @example <u-tabs ref="tabs" :list="list" :is-scroll="false"></u-tabs> |
|||
*/ |
|||
export default { |
|||
name: "u-tabs", |
|||
emits: ["update:modelValue", "input", "change"], |
|||
props: { |
|||
// 通过双向绑定控制组件的弹出与收起 |
|||
value: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
modelValue: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
// 当前活动tab的索引（请使用 v-model="current" 代替 :current="current" @change="change" 其他不变） |
|||
current: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
// 导航菜单是否需要滚动，如只有2或者3个的时候，就不需要滚动了，此时使用flex平分tab的宽度 |
|||
isScroll: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
//需循环的标签列表 |
|||
list: { |
|||
type: Array, |
|||
default () { |
|||
return []; |
|||
} |
|||
}, |
|||
// 导航栏的高度和行高 |
|||
height: { |
|||
type: [String, Number], |
|||
default: 80 |
|||
}, |
|||
// 字体大小 |
|||
fontSize: { |
|||
type: [String, Number], |
|||
default: 30 |
|||
}, |
|||
// 过渡动画时长, 单位ms |
|||
duration: { |
|||
type: [String, Number], |
|||
default: 0.5 |
|||
}, |
|||
// 选中项的主题颜色 |
|||
activeColor: { |
|||
type: String, |
|||
default: '#2979ff' |
|||
}, |
|||
// 未选中项的颜色 |
|||
inactiveColor: { |
|||
type: String, |
|||
default: '#303133' |
|||
}, |
|||
// 菜单底部移动的bar的宽度，单位rpx |
|||
barWidth: { |
|||
type: [String, Number], |
|||
default: 40 |
|||
}, |
|||
// 移动bar的高度 |
|||
barHeight: { |
|||
type: [String, Number], |
|||
default: 6 |
|||
}, |
|||
// 单个tab的左或有内边距（左右相同） |
|||
gutter: { |
|||
type: [String, Number], |
|||
default: 30 |
|||
}, |
|||
// 导航栏的背景颜色 |
|||
bgColor: { |
|||
type: String, |
|||
default: '#ffffff' |
|||
}, |
|||
// 读取传入的数组对象的属性(tab名称) |
|||
name: { |
|||
type: String, |
|||
default: 'name' |
|||
}, |
|||
// 读取传入的数组对象的属性(徽标数) |
|||
count: { |
|||
type: String, |
|||
default: 'count' |
|||
}, |
|||
// 徽标数位置偏移 |
|||
offset: { |
|||
type: Array, |
|||
default: () => { |
|||
return [5, 20] |
|||
} |
|||
}, |
|||
// 活动tab字体是否加粗 |
|||
bold: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 当前活动tab item的样式 |
|||
activeItemStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {} |
|||
} |
|||
}, |
|||
// 是否显示底部的滑块 |
|||
showBar: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 底部滑块的自定义样式 |
|||
barStyle: { |
|||
type: Object, |
|||
default() { |
|||
return {} |
|||
} |
|||
}, |
|||
// 标签的宽度 |
|||
itemWidth: { |
|||
type: [Number, String], |
|||
default: 'auto' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
scrollLeft: 0, // 滚动scroll-view的左边滚动距离 |
|||
tabQueryInfo: [], // 存放对tab菜单查询后的节点信息 |
|||
componentWidth: 0, // 屏幕宽度，单位为px |
|||
scrollBarLeft: 0, // 移动bar需要通过translateX()移动的距离 |
|||
parentLeft: 0, // 父元素(tabs组件)到屏幕左边的距离 |
|||
id: this.$u.guid(), // id值 |
|||
currentIndex: this.current, |
|||
barFirstTimeMove: true, // 滑块第一次移动时(页面刚生成时)，无需动画，否则给人怪异的感觉 |
|||
}; |
|||
}, |
|||
watch: { |
|||
// 监听tab的变化，重新计算tab菜单的布局信息，因为实际使用中菜单可能是通过 |
|||
// 后台获取的（如新闻app顶部的菜单），获取返回需要一定时间，所以list变化时，重新获取布局信息 |
|||
list(n, o) { |
|||
// list变动时，重制内部索引，否则可能导致超出数组边界的情况 |
|||
if(n.length !== o.length) this.currentIndex = 0; |
|||
// 用$nextTick等待视图更新完毕后再计算tab的局部信息，否则可能因为tab还没生成就获取，就会有问题 |
|||
this.$nextTick(() => { |
|||
this.init(); |
|||
}); |
|||
}, |
|||
current: { |
|||
immediate: true, |
|||
handler(nVal, oVal) { |
|||
// 视图更新后再执行移动操作 |
|||
this.$nextTick(() => { |
|||
this.currentIndex = nVal; |
|||
this.scrollByIndex(); |
|||
}); |
|||
} |
|||
}, |
|||
valueCom: { |
|||
immediate: true, |
|||
handler(nVal, oVal) { |
|||
// 视图更新后再执行移动操作 |
|||
this.$nextTick(() => { |
|||
this.currentIndex = nVal; |
|||
this.scrollByIndex(); |
|||
}); |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
valueCom() { |
|||
// #ifndef VUE3 |
|||
return this.value; |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
return this.modelValue; |
|||
// #endif |
|||
}, |
|||
// 移动bar的样式 |
|||
tabBarStyle() { |
|||
let style = { |
|||
width: this.barWidth + 'rpx', |
|||
transform: `translate(${this.scrollBarLeft}px, -100%)`, |
|||
// 滑块在页面渲染后第一次滑动时，无需动画效果 |
|||
'transition-duration': `${this.barFirstTimeMove ? 0 : this.duration }s`, |
|||
'background-color': this.activeColor, |
|||
height: this.barHeight + 'rpx', |
|||
// 设置一个很大的值，它会自动取能用的最大值，不用高度的一半，是因为高度可能是单数，会有小数出现 |
|||
'border-radius': `${this.barHeight / 2}px` |
|||
}; |
|||
Object.assign(style, this.barStyle); |
|||
return style; |
|||
}, |
|||
// tab的样式 |
|||
tabItemStyle() { |
|||
return (index) => { |
|||
let style = { |
|||
height: this.height + 'rpx', |
|||
'line-height': this.height + 'rpx', |
|||
'font-size': this.fontSize + 'rpx', |
|||
'transition-duration': `${this.duration}s`, |
|||
padding: this.isScroll ? `0 ${this.gutter}rpx` : '', |
|||
flex: this.isScroll ? 'auto' : '1', |
|||
width: this.$u.addUnit(this.itemWidth) |
|||
}; |
|||
// 字体加粗 |
|||
if (index == this.currentIndex && this.bold) style.fontWeight = 'bold'; |
|||
if (index == this.currentIndex) { |
|||
style.color = this.activeColor; |
|||
// 给选中的tab item添加外部自定义的样式 |
|||
style = Object.assign(style, this.activeItemStyle); |
|||
} else { |
|||
style.color = this.inactiveColor; |
|||
} |
|||
return style; |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
// 设置一个init方法，方便多处调用 |
|||
async init() { |
|||
// 获取tabs组件的尺寸信息 |
|||
let tabRect = await this.$uGetRect('#' + this.id); |
|||
// tabs组件距离屏幕左边的宽度 |
|||
this.parentLeft = tabRect.left; |
|||
// tabs组件的宽度 |
|||
this.componentWidth = tabRect.width; |
|||
this.getTabRect(); |
|||
}, |
|||
// 点击某一个tab菜单 |
|||
clickTab(index) { |
|||
// 点击当前活动tab，不触发事件 |
|||
if(index == this.currentIndex) return ; |
|||
// 发送事件给父组件 |
|||
this.$emit('change', index); |
|||
this.$emit('input', index); |
|||
this.$emit("update:modelValue", index); |
|||
}, |
|||
// 查询tab的布局信息 |
|||
getTabRect() { |
|||
// 创建节点查询 |
|||
let query = uni.createSelectorQuery().in(this); |
|||
// 历遍所有tab，这里是执行了查询，最终使用exec()会一次性返回查询的数组结果 |
|||
for (let i = 0; i < this.list.length; i++) { |
|||
// 只要size和rect两个参数 |
|||
query.select(`#u-tab-item-${i}`).fields({ |
|||
size: true, |
|||
rect: true |
|||
}); |
|||
} |
|||
// 执行查询，一次性获取多个结果 |
|||
query.exec( |
|||
function(res) { |
|||
this.tabQueryInfo = res; |
|||
// 初始化滚动条和移动bar的位置 |
|||
this.scrollByIndex(); |
|||
}.bind(this) |
|||
); |
|||
}, |
|||
// 滚动scroll-view，让活动的tab处于屏幕的中间位置 |
|||
scrollByIndex() { |
|||
// 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息 |
|||
let tabInfo = this.tabQueryInfo[this.currentIndex]; |
|||
if (!tabInfo) return; |
|||
// 活动tab的宽度 |
|||
let tabWidth = tabInfo.width; |
|||
// 活动item的左边到tabs组件左边的距离，用item的left减去tabs的left |
|||
let offsetLeft = tabInfo.left - this.parentLeft; |
|||
// 将活动的tabs-item移动到屏幕正中间，实际上是对scroll-view的移动 |
|||
let scrollLeft = offsetLeft - (this.componentWidth - tabWidth) / 2; |
|||
this.scrollLeft = scrollLeft < 0 ? 0 : scrollLeft; |
|||
// 当前活动item的中点点到左边的距离减去滑块宽度的一半，即可得到滑块所需的移动距离 |
|||
let left = tabInfo.left + tabInfo.width / 2 - this.parentLeft; |
|||
// 计算当前活跃item到组件左边的距离 |
|||
this.scrollBarLeft = left - uni.upx2px(this.barWidth) / 2; |
|||
// 第一次移动滑块的时候，barFirstTimeMove为true，放到延时中将其设置false |
|||
// 延时是因为scrollBarLeft作用于computed计算时，需要一个过程需，否则导致出错 |
|||
if(this.barFirstTimeMove == true) { |
|||
setTimeout(() => { |
|||
this.barFirstTimeMove = false; |
|||
}, 100) |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.init(); |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
view, |
|||
scroll-view { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
/* #ifndef APP-NVUE */ |
|||
::-webkit-scrollbar, |
|||
::-webkit-scrollbar, |
|||
::-webkit-scrollbar { |
|||
display: none; |
|||
width: 0 !important; |
|||
height: 0 !important; |
|||
-webkit-appearance: none; |
|||
background: transparent; |
|||
} |
|||
/* #endif */ |
|||
|
|||
.u-scroll-box { |
|||
position: relative; |
|||
/* #ifdef MP-TOUTIAO */ |
|||
white-space: nowrap; |
|||
/* #endif */ |
|||
} |
|||
|
|||
/* #ifdef H5 */ |
|||
// 通过样式穿透，隐藏H5下，scroll-view下的滚动条 |
|||
scroll-view ::v-deep ::-webkit-scrollbar { |
|||
display: none; |
|||
width: 0 !important; |
|||
height: 0 !important; |
|||
-webkit-appearance: none; |
|||
background: transparent; |
|||
} |
|||
/* #endif */ |
|||
|
|||
.u-scroll-view { |
|||
width: 100%; |
|||
white-space: nowrap; |
|||
position: relative; |
|||
} |
|||
|
|||
.u-tab-item { |
|||
position: relative; |
|||
/* #ifndef APP-NVUE */ |
|||
display: inline-block; |
|||
/* #endif */ |
|||
text-align: center; |
|||
transition-property: background-color, color; |
|||
} |
|||
|
|||
.u-tab-bar { |
|||
position: absolute; |
|||
bottom: 0; |
|||
} |
|||
|
|||
.u-tabs-scroll-flex { |
|||
@include vue-flex; |
|||
justify-content: space-between; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,295 @@ |
|||
<template> |
|||
<view v-if="show" :class="[ |
|||
disabled ? 'u-disabled' : '', |
|||
'u-size-' + size, |
|||
'u-shape-' + shape, |
|||
'u-mode-' + mode + '-' + type |
|||
]" |
|||
class="u-tag" :style="[customStyle]" @tap="clickTag"> |
|||
{{text}} |
|||
<view class="u-icon-wrap" @tap.stop> |
|||
<u-icon @click="close" size="22" v-if="closeable" :color="closeIconColor" |
|||
name="close" class="u-close-icon" :style="[iconStyle]"></u-icon> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* tag 提示 |
|||
* @description 该组件一般用于标记和选择 |
|||
* @tutorial https://www.uviewui.com/components/tag.html |
|||
* @property {String} type 主题类型（默认primary） |
|||
* @property {String} size 标签大小（默认default） |
|||
* @property {String} shape 标签形状（默认square） |
|||
* @property {String} text 标签的文字内容 |
|||
* @property {String} bg-color 自定义标签的背景颜色 |
|||
* @property {String} border-color 标签的边框颜色 |
|||
* @property {String} close-color 关闭按钮的颜色 |
|||
* @property {String Number} index 点击标签时，会通过click事件返回该值 |
|||
* @property {String} mode 模式选择，见官网说明（默认light） |
|||
* @property {Boolean} closeable 是否可关闭，设置为true，文字右边会出现一个关闭图标（默认false） |
|||
* @property {Boolean} show 标签显示与否（默认true） |
|||
* @event {Function} click 点击标签触发 |
|||
* @event {Function} close closeable为true时，点击标签关闭按钮触发 |
|||
* @example <u-tag text="雪月夜" type="success" /> |
|||
*/ |
|||
export default { |
|||
name: 'u-tag', |
|||
emits: ["click", "close"], |
|||
// 是否禁用这个标签，禁用的话，会屏蔽点击事件 |
|||
props: { |
|||
// 标签类型info、primary、success、warning、error |
|||
type: { |
|||
type: String, |
|||
default: 'primary' |
|||
}, |
|||
disabled: { |
|||
type: [Boolean, String], |
|||
default: false |
|||
}, |
|||
// 标签的大小，分为default（默认），mini（较小） |
|||
size: { |
|||
type: String, |
|||
default: 'default' |
|||
}, |
|||
// tag的形状，circle（两边半圆形）, square（方形，带圆角），circleLeft（左边是半圆），circleRight（右边是半圆） |
|||
shape: { |
|||
type: String, |
|||
default: 'square' |
|||
}, |
|||
// 标签文字 |
|||
text: { |
|||
type: [String, Number], |
|||
default: '' |
|||
}, |
|||
// 背景颜色，默认为空字符串，即不处理 |
|||
bgColor: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 标签字体颜色，默认为空字符串，即不处理 |
|||
color: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 镂空形式标签的边框颜色 |
|||
borderColor: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 关闭按钮图标的颜色 |
|||
closeColor: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 点击时返回的索引值，用于区分例遍的数组哪个元素被点击了 |
|||
index: { |
|||
type: [Number, String], |
|||
default: '' |
|||
}, |
|||
// 模式选择，dark|light|plain |
|||
mode: { |
|||
type: String, |
|||
default: 'light' |
|||
}, |
|||
// 是否可关闭 |
|||
closeable: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否显示 |
|||
show: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
computed: { |
|||
customStyle() { |
|||
let style = {}; |
|||
// 文字颜色（如果有此值，会覆盖type值的颜色） |
|||
if(this.color) style.color = this.color; |
|||
// tag的背景颜色（如果有此值，会覆盖type值的颜色） |
|||
if(this.bgColor) style.backgroundColor = this.bgColor; |
|||
// 如果是镂空型tag，没有传递边框颜色（borderColor）的话，使用文字的颜色（color属性） |
|||
if(this.mode == 'plain' && this.color && !this.borderColor) style.borderColor = this.color; |
|||
else style.borderColor = this.borderColor; |
|||
return style; |
|||
}, |
|||
iconStyle() { |
|||
if(!this.closeable) return ; |
|||
let style = {}; |
|||
if(this.size == 'mini') style.fontSize = '20rpx'; |
|||
else style.fontSize = '22rpx'; |
|||
if(this.mode == 'plain' || this.mode == 'light') style.color = this.type; |
|||
else if(this.mode == 'dark') style.color = "#ffffff"; |
|||
if(this.closeColor) style.color = this.closeColor; |
|||
return style; |
|||
}, |
|||
// 关闭图标的颜色 |
|||
closeIconColor() { |
|||
// 如果定义了关闭图标的颜色，就用此值，否则用字体颜色的值 |
|||
// 如果上面的二者都没有，如果是dark深色模式，图标就为白色 |
|||
// 最后如果上面的三者都不合适，就返回type值给图标获取颜色 |
|||
let color = ''; |
|||
if(this.closeColor) return this.closeColor; |
|||
else if(this.color) return this.color; |
|||
else if(this.mode == 'dark') return '#ffffff'; |
|||
else return this.type; |
|||
} |
|||
}, |
|||
methods: { |
|||
// 标签被点击 |
|||
clickTag() { |
|||
// 如果是disabled状态，不发送点击事件 |
|||
if(this.disabled) return ; |
|||
this.$emit('click', this.index); |
|||
}, |
|||
// 点击标签关闭按钮 |
|||
close() { |
|||
this.$emit('close', this.index); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-tag { |
|||
box-sizing: border-box; |
|||
align-items: center; |
|||
border-radius: 6rpx; |
|||
/* #ifndef APP-NVUE */ |
|||
display: inline-block; |
|||
/* #endif */ |
|||
line-height: 1; |
|||
} |
|||
|
|||
.u-size-default { |
|||
font-size: 22rpx; |
|||
padding: 12rpx 22rpx; |
|||
} |
|||
|
|||
.u-size-mini { |
|||
font-size: 20rpx; |
|||
padding: 6rpx 12rpx; |
|||
} |
|||
|
|||
.u-mode-light-primary { |
|||
background-color: $u-type-primary-light; |
|||
color: $u-type-primary; |
|||
border: 1px solid $u-type-primary-disabled; |
|||
} |
|||
|
|||
.u-mode-light-success { |
|||
background-color: $u-type-success-light; |
|||
color: $u-type-success; |
|||
border: 1px solid $u-type-success-disabled; |
|||
} |
|||
|
|||
.u-mode-light-error { |
|||
background-color: $u-type-error-light; |
|||
color: $u-type-error; |
|||
border: 1px solid $u-type-error-disabled; |
|||
} |
|||
|
|||
.u-mode-light-warning { |
|||
background-color: $u-type-warning-light; |
|||
color: $u-type-warning; |
|||
border: 1px solid $u-type-warning-disabled; |
|||
} |
|||
|
|||
.u-mode-light-info { |
|||
background-color: $u-type-info-light; |
|||
color: $u-type-info; |
|||
border: 1px solid $u-type-info-disabled; |
|||
} |
|||
|
|||
.u-mode-dark-primary { |
|||
background-color: $u-type-primary; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.u-mode-dark-success { |
|||
background-color: $u-type-success; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.u-mode-dark-error { |
|||
background-color: $u-type-error; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.u-mode-dark-warning { |
|||
background-color: $u-type-warning; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.u-mode-dark-info { |
|||
background-color: $u-type-info; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.u-mode-plain-primary { |
|||
background-color: #FFFFFF; |
|||
color: $u-type-primary; |
|||
border: 1px solid $u-type-primary; |
|||
} |
|||
|
|||
.u-mode-plain-success { |
|||
background-color: #FFFFFF; |
|||
color: $u-type-success; |
|||
border: 1px solid $u-type-success; |
|||
} |
|||
|
|||
.u-mode-plain-error { |
|||
background-color: #FFFFFF; |
|||
color: $u-type-error; |
|||
border: 1px solid $u-type-error; |
|||
} |
|||
|
|||
.u-mode-plain-warning { |
|||
background-color: #FFFFFF; |
|||
color: $u-type-warning; |
|||
border: 1px solid $u-type-warning; |
|||
} |
|||
|
|||
.u-mode-plain-info { |
|||
background-color: #FFFFFF; |
|||
color: $u-type-info; |
|||
border: 1px solid $u-type-info; |
|||
} |
|||
|
|||
.u-disabled { |
|||
opacity: 0.55; |
|||
} |
|||
|
|||
.u-shape-circle { |
|||
border-radius: 100rpx; |
|||
} |
|||
|
|||
.u-shape-circleRight { |
|||
border-radius: 0 100rpx 100rpx 0; |
|||
} |
|||
|
|||
.u-shape-circleLeft { |
|||
border-radius: 100rpx 0 0 100rpx; |
|||
} |
|||
|
|||
.u-close-icon { |
|||
margin-left: 14rpx; |
|||
font-size: 22rpx; |
|||
color: $u-type-success; |
|||
} |
|||
|
|||
.u-icon-wrap { |
|||
display: inline-flex; |
|||
transform: scale(0.86); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,66 @@ |
|||
<template> |
|||
<view class="u-td" :style="[tdStyle]"> |
|||
<slot></slot> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* td td单元格 |
|||
* @description 表格组件一般用于展示大量结构化数据的场景（搭配u-table使用） |
|||
* @tutorial https://www.uviewui.com/components/table.html#td-props |
|||
* @property {String Number} width 单元格宽度百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比，单元格宽度默认为均分tr的长度（默认auto） |
|||
* @example <u-td>二年级</u-td> |
|||
*/ |
|||
export default { |
|||
name: "u-td", |
|||
props: { |
|||
// 宽度，百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比 |
|||
width: { |
|||
type: [Number, String], |
|||
default: 'auto' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
tdStyle: { |
|||
|
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
this.parent = false; |
|||
}, |
|||
mounted() { |
|||
this.parent = this.$u.$parent.call(this, 'u-table'); |
|||
if (this.parent) { |
|||
// 将父组件的相关参数，合并到本组件 |
|||
let style = {}; |
|||
if (this.width != "auto") style.flex = `0 0 ${this.width}`; |
|||
style.textAlign = this.parent.align; |
|||
style.fontSize = this.parent.fontSize + 'rpx'; |
|||
style.padding = this.parent.padding; |
|||
style.borderBottom = `solid 1px ${this.parent.borderColor}`; |
|||
style.borderRight = `solid 1px ${this.parent.borderColor}`; |
|||
style.color = this.parent.color; |
|||
this.tdStyle = style; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-td { |
|||
@include vue-flex; |
|||
flex-direction: column; |
|||
flex: 1; |
|||
justify-content: center; |
|||
font-size: 28rpx; |
|||
color: $u-content-color; |
|||
align-self: stretch; |
|||
box-sizing: border-box; |
|||
height: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,62 @@ |
|||
<template> |
|||
<view class="u-th" :style="[thStyle]"> |
|||
<slot></slot> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* th th单元格 |
|||
* @description 表格组件一般用于展示大量结构化数据的场景（搭配u-table使用） |
|||
* @tutorial https://www.uviewui.com/components/table.html#td-props |
|||
* @property {String Number} width 标题单元格宽度百分比或者具体带单位的值，如30%，200rpx等，一般使用百分比，单元格宽度默认为均分tr的长度 |
|||
* @example 暂无示例 |
|||
*/ |
|||
export default { |
|||
name: "u-th", |
|||
props: { |
|||
// 宽度，百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比 |
|||
width: { |
|||
type: [Number, String], |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
thStyle: {} |
|||
} |
|||
}, |
|||
created() { |
|||
this.parent = false; |
|||
}, |
|||
mounted() { |
|||
this.parent = this.$u.$parent.call(this, 'u-table'); |
|||
if (this.parent) { |
|||
// 将父组件的相关参数，合并到本组件 |
|||
let style = {}; |
|||
if (this.width) style.flex = `0 0 ${this.width}`; |
|||
style.textAlign = this.parent.align; |
|||
style.padding = this.parent.padding; |
|||
style.borderBottom = `solid 1px ${this.parent.borderColor}`; |
|||
style.borderRight = `solid 1px ${this.parent.borderColor}`; |
|||
Object.assign(style, this.parent.thStyle); |
|||
this.thStyle = style; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-th { |
|||
@include vue-flex; |
|||
flex-direction: column; |
|||
flex: 1; |
|||
justify-content: center; |
|||
font-size: 28rpx; |
|||
color: $u-main-color; |
|||
font-weight: bold; |
|||
background-color: rgb(245, 246, 248); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,83 @@ |
|||
<template> |
|||
<view class="u-time-axis-item"> |
|||
<slot name="content" /> |
|||
<view class="u-time-axis-node" :style="[nodeStyle]"> |
|||
<slot name="node"> |
|||
<view class="u-dot"> |
|||
</view> |
|||
</slot> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* timeLineItem 时间轴Item |
|||
* @description 时间轴组件一般用于物流信息展示，各种跟时间相关的记录等场景。(搭配u-time-line使用) |
|||
* @tutorial https://www.uviewui.com/components/timeLine.html |
|||
* @property {String} bg-color 左边节点的背景颜色，一般通过slot内容自定义背景颜色即可（默认#ffffff） |
|||
* @property {String Number} node-top 节点左边图标绝对定位的top值，单位rpx |
|||
* @example <u-time-line-item node-top="2">...</u-time-line-item> |
|||
*/ |
|||
export default { |
|||
name: "u-time-line-item", |
|||
props: { |
|||
// 节点的背景颜色 |
|||
bgColor: { |
|||
type: String, |
|||
default: "#ffffff" |
|||
}, |
|||
// 节点左边图标绝对定位的top值 |
|||
nodeTop: { |
|||
type: [String, Number], |
|||
default: "" |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
computed: { |
|||
nodeStyle() { |
|||
let style = { |
|||
backgroundColor: this.bgColor, |
|||
}; |
|||
if (this.nodeTop != "") style.top = this.nodeTop + 'rpx'; |
|||
return style; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-time-axis-item { |
|||
@include vue-flex; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
position: relative; |
|||
margin-bottom: 32rpx; |
|||
} |
|||
|
|||
.u-time-axis-node { |
|||
position: absolute; |
|||
top: 12rpx; |
|||
left: -40rpx; |
|||
transform-origin: 0; |
|||
transform: translateX(-50%); |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
z-index: 1; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.u-dot { |
|||
height: 16rpx; |
|||
width: 16rpx; |
|||
border-radius: 100rpx; |
|||
background: #ddd; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,43 @@ |
|||
<template> |
|||
<view class="u-time-axis"> |
|||
<slot /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* timeLine 时间轴 |
|||
* @description 时间轴组件一般用于物流信息展示，各种跟时间相关的记录等场景。 |
|||
* @tutorial https://www.uviewui.com/components/timeLine.html |
|||
* @example <u-time-line></u-time-line> |
|||
*/ |
|||
export default { |
|||
name: "u-time-line", |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-time-axis { |
|||
padding-left: 40rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.u-time-axis::before { |
|||
content: " "; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 12rpx; |
|||
width: 1px; |
|||
bottom: 0; |
|||
border-left: 1px solid #ddd; |
|||
transform-origin: 0 0; |
|||
transform: scaleX(0.5); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,220 @@ |
|||
<template> |
|||
<view class="u-toast" :class="[isShow ? 'u-show' : '', 'u-type-' + tmpConfig.type, 'u-position-' + tmpConfig.position]" :style="{ |
|||
zIndex: uZIndex |
|||
}"> |
|||
<view class="u-icon-wrap"> |
|||
<u-icon v-if="tmpConfig.icon" class="u-icon" :name="iconName" :size="30" :color="tmpConfig.type"></u-icon> |
|||
</view> |
|||
<text class="u-text">{{tmpConfig.title}}</text> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* toast 消息提示 |
|||
* @description 此组件表现形式类似uni的uni.showToastAPI，但也有不同的地方。 |
|||
* @tutorial https://www.uviewui.com/components/toast.html |
|||
* @property {String} z-index toast展示时的z-index值 |
|||
* @event {Function} show 显示toast，如需一进入页面就显示toast，请在onReady生命周期调用 |
|||
* @example <u-toast ref="uToast" /> |
|||
*/ |
|||
export default { |
|||
name: "u-toast", |
|||
props: { |
|||
// z-index值 |
|||
zIndex: { |
|||
type: [Number, String], |
|||
default: '' |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
isShow: false, |
|||
timer: null, // 定时器 |
|||
config: { |
|||
params: {}, // URL跳转的参数，对象 |
|||
title: '', // 显示文本 |
|||
type: '', // 主题类型，primary，success，error，warning，black |
|||
duration: 2000, // 显示的时间，毫秒 |
|||
isTab: false, // 是否跳转tab页面 |
|||
url: '', // toast消失后是否跳转页面，有则跳转，优先级高于back参数 |
|||
icon: true, // 显示的图标 |
|||
position: 'center', // toast出现的位置 |
|||
callback: null, // 执行完后的回调函数 |
|||
back: false, // 结束toast是否自动返回上一页 |
|||
}, |
|||
tmpConfig: {}, // 将用户配置和内置配置合并后的临时配置变量 |
|||
}; |
|||
}, |
|||
computed: { |
|||
iconName() { |
|||
// 只有不为none，并且type为error|warning|success|info时候，才显示图标 |
|||
if (['error', 'warning', 'success', 'info'].indexOf(this.tmpConfig.type) >= 0 && this.tmpConfig.icon) { |
|||
let icon = this.$u.type2icon(this.tmpConfig.type); |
|||
return icon; |
|||
} |
|||
}, |
|||
uZIndex() { |
|||
// 显示toast时候，如果用户有传递z-index值，有限使用 |
|||
return this.isShow ? (this.zIndex ? this.zIndex : this.$u.zIndex.toast) : '999999'; |
|||
} |
|||
}, |
|||
methods: { |
|||
// 显示toast组件，由父组件通过this.$refs.xxx.show(options)形式调用 |
|||
show(options) { |
|||
// 不降结果合并到this.config变量，避免多次条用u-toast，前后的配置造成混论 |
|||
this.tmpConfig = this.$u.deepMerge(this.config, options); |
|||
if (this.timer) { |
|||
// 清除定时器 |
|||
clearTimeout(this.timer); |
|||
this.timer = null; |
|||
} |
|||
this.isShow = true; |
|||
this.timer = setTimeout(() => { |
|||
// 倒计时结束，清除定时器，隐藏toast组件 |
|||
this.isShow = false; |
|||
clearTimeout(this.timer); |
|||
this.timer = null; |
|||
// 判断是否存在callback方法，如果存在就执行 |
|||
typeof(this.tmpConfig.callback) === 'function' && this.tmpConfig.callback(); |
|||
this.timeEnd(); |
|||
}, this.tmpConfig.duration); |
|||
}, |
|||
// 隐藏toast组件，由父组件通过this.$refs.xxx.hide()形式调用 |
|||
hide() { |
|||
this.isShow = false; |
|||
if (this.timer) { |
|||
// 清除定时器 |
|||
clearTimeout(this.timer); |
|||
this.timer = null; |
|||
} |
|||
}, |
|||
// 倒计时结束之后，进行的一些操作 |
|||
timeEnd() { |
|||
// 如果带有url值，根据isTab为true或者false进行跳转 |
|||
if (this.tmpConfig.url) { |
|||
// 如果url没有"/"开头，添加上，因为uni的路由跳转需要"/"开头 |
|||
if (this.tmpConfig.url[0] != '/') this.tmpConfig.url = '/' + this.tmpConfig.url; |
|||
// 判断是否有传递显式的参数 |
|||
if (Object.keys(this.tmpConfig.params).length) { |
|||
// 判断用户传递的url中，是否带有参数 |
|||
// 使用正则匹配，主要依据是判断是否有"/","?","="等，如“/page/index/index?name=mary" |
|||
// 如果有params参数，转换后无需带上"?" |
|||
let query = ''; |
|||
if (/.*\/.*\?.*=.*/.test(this.tmpConfig.url)) { |
|||
// object对象转为get类型的参数 |
|||
query = this.$u.queryParams(this.tmpConfig.params, false); |
|||
this.tmpConfig.url = this.tmpConfig.url + "&" + query; |
|||
} else { |
|||
query = this.$u.queryParams(this.tmpConfig.params); |
|||
this.tmpConfig.url += query; |
|||
} |
|||
} |
|||
// 如果是跳转tab页面，就使用uni.switchTab |
|||
if (this.tmpConfig.isTab) { |
|||
uni.switchTab({ |
|||
url: this.tmpConfig.url |
|||
}); |
|||
} else { |
|||
uni.navigateTo({ |
|||
url: this.tmpConfig.url |
|||
}); |
|||
} |
|||
} else if(this.tmpConfig.back) { |
|||
// 回退到上一页 |
|||
this.$u.route({ |
|||
type: 'back' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-toast { |
|||
position: fixed; |
|||
z-index: -1; |
|||
transition: opacity 0.3s; |
|||
text-align: center; |
|||
color: #fff; |
|||
border-radius: 8rpx; |
|||
background: #585858; |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 28rpx; |
|||
opacity: 0; |
|||
pointer-events: none; |
|||
padding: 18rpx 40rpx; |
|||
} |
|||
|
|||
.u-toast.u-show { |
|||
opacity: 1; |
|||
} |
|||
|
|||
.u-icon { |
|||
margin-right: 10rpx; |
|||
@include vue-flex; |
|||
align-items: center; |
|||
line-height: normal; |
|||
} |
|||
|
|||
.u-position-center { |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%,-50%); |
|||
/* #ifndef APP-NVUE */ |
|||
max-width: 70%; |
|||
/* #endif */ |
|||
} |
|||
|
|||
.u-position-top { |
|||
left: 50%; |
|||
top: 20%; |
|||
transform: translate(-50%,-50%); |
|||
} |
|||
|
|||
.u-position-bottom { |
|||
left: 50%; |
|||
bottom: 20%; |
|||
transform: translate(-50%,-50%); |
|||
} |
|||
|
|||
.u-type-primary { |
|||
color: $u-type-primary; |
|||
background-color: $u-type-primary-light; |
|||
border: 1px solid rgb(215, 234, 254); |
|||
} |
|||
|
|||
.u-type-success { |
|||
color: $u-type-success; |
|||
background-color: $u-type-success-light; |
|||
border: 1px solid #BEF5C8; |
|||
} |
|||
|
|||
.u-type-error { |
|||
color: $u-type-error; |
|||
background-color: $u-type-error-light; |
|||
border: 1px solid #fde2e2; |
|||
} |
|||
|
|||
.u-type-warning { |
|||
color: $u-type-warning; |
|||
background-color: $u-type-warning-light; |
|||
border: 1px solid #faecd8; |
|||
} |
|||
|
|||
.u-type-info { |
|||
color: $u-type-info; |
|||
background-color: $u-type-info-light; |
|||
border: 1px solid #ebeef5; |
|||
} |
|||
|
|||
.u-type-default { |
|||
color: #fff; |
|||
background-color: #585858; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,121 @@ |
|||
<template> |
|||
<view class="u-tips" :class="['u-' + type, isShow ? 'u-tip-show' : '']" :style="{ |
|||
top: navbarHeight + 'px', |
|||
zIndex: uZIndex |
|||
}">{{ title }}</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* topTips 顶部提示 |
|||
* @description 该组件一般用于页面顶部向下滑出一个提示，尔后自动收起的场景。 |
|||
* @tutorial https://www.uviewui.com/components/topTips.html |
|||
* @property {String Number} navbar-height 导航栏高度(包含状态栏高度在内)，单位PX |
|||
* @property {String Number} z-index z-index值（默认975） |
|||
* @example <u-top-tips ref="uTips"></u-top-tips> |
|||
*/ |
|||
export default { |
|||
name: "u-top-tips", |
|||
props: { |
|||
// 导航栏高度，用于提示的初始化 |
|||
navbarHeight: { |
|||
type: [Number, String], |
|||
// #ifndef H5 |
|||
default: 0, |
|||
// #endif |
|||
// #ifdef H5 |
|||
default: 44, |
|||
// #endif |
|||
}, |
|||
// z-index值 |
|||
zIndex: { |
|||
type: [Number, String], |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
timer: null, // 定时器 |
|||
isShow: false, // 是否显示消息组件 |
|||
title: '', // 组件中显示的消息内容 |
|||
type: 'primary', // 消息的类型（颜色不同），primary，success，error，warning，info |
|||
duration: 2000, // 组件显示的时间，单位为毫秒 |
|||
}; |
|||
}, |
|||
computed: { |
|||
uZIndex() { |
|||
return this.zIndex ? this.zIndex : this.$u.zIndex.topTips; |
|||
} |
|||
}, |
|||
methods: { |
|||
show(config = {}) { |
|||
// 先清除定时器（可能是上一次定义的，需要清除了再开始新的） |
|||
clearTimeout(this.timer); |
|||
// 时间，内容，类型主题(type)等参数 |
|||
if (config.duration) this.duration = config.duration; |
|||
if (config.type) this.type = config.type; |
|||
this.title = config.title; |
|||
this.isShow = true; |
|||
// 倒计时 |
|||
this.timer = setTimeout(() => { |
|||
this.isShow = false; |
|||
clearTimeout(this.timer); |
|||
this.timer = null; |
|||
}, this.duration); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
view { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
// 顶部弹出类型样式 |
|||
.u-tips { |
|||
width: 100%; |
|||
position: fixed; |
|||
z-index: 1; |
|||
padding: 20rpx 30rpx; |
|||
color: #FFFFFF; |
|||
font-size: 28rpx; |
|||
left: 0; |
|||
right: 0; |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
opacity: 0; |
|||
// 此处为最核心点，translateY(-100%)意味着将其从Y轴隐藏（隐藏到顶部(h5)或者说导航栏(app)下面） |
|||
transform: translateY(-100%); |
|||
transition: all 0.35s linear; |
|||
} |
|||
|
|||
.u-tip-show { |
|||
transform: translateY(0); |
|||
opacity: 1; |
|||
z-index: 99; |
|||
} |
|||
|
|||
.u-primary { |
|||
background: $u-type-primary; |
|||
} |
|||
|
|||
.u-success { |
|||
background: $u-type-success; |
|||
} |
|||
|
|||
.u-warning { |
|||
background: $u-type-warning; |
|||
} |
|||
|
|||
.u-error { |
|||
background: $u-type-error; |
|||
} |
|||
|
|||
.u-info { |
|||
background: $u-type-info; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,25 @@ |
|||
<template> |
|||
<view class="u-tr"> |
|||
<slot></slot> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* tr 表格行标签 |
|||
* @description 表格组件一般用于展示大量结构化数据的场景（搭配<u-table>使用） |
|||
* @tutorial https://www.uviewui.com/components/table.html |
|||
* @example <u-tr></u-tr> |
|||
*/ |
|||
export default { |
|||
name: "u-tr", |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-tr { |
|||
@include vue-flex; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,728 @@ |
|||
<template> |
|||
<view class="u-upload" v-if="!disabled"> |
|||
<view |
|||
v-if="showUploadList" |
|||
class="u-list-item u-preview-wrap" |
|||
v-for="(item, index) in lists" |
|||
:key="index" |
|||
:style="{ |
|||
width: $u.addUnit(width), |
|||
height: $u.addUnit(height) |
|||
}" |
|||
> |
|||
<view |
|||
v-if="deletable" |
|||
class="u-delete-icon" |
|||
@tap.stop="deleteItem(index)" |
|||
:style="{ |
|||
background: delBgColor |
|||
}" |
|||
> |
|||
<u-icon class="u-icon" :name="delIcon" size="20" :color="delColor"></u-icon> |
|||
</view> |
|||
<!-- <view |
|||
v-if="item.progress >= 100" |
|||
class="u-success-icon" |
|||
> |
|||
<u-icon class="u-icon" :name="successIcon" size="20" :color="successColor"></u-icon> |
|||
</view> --> |
|||
<u-line-progress |
|||
v-if="showProgress && item.progress > 0 && item.progress != 100 && !item.error" |
|||
:show-percent="false" |
|||
height="16" |
|||
class="u-progress" |
|||
:percent="item.progress" |
|||
></u-line-progress> |
|||
<view @tap.stop="retry(index)" v-if="item.error" class="u-error-btn">点击重试</view> |
|||
<image @tap.stop="doPreviewImage(item.url || item.path, index)" class="u-preview-image" v-if="!item.isImage" :src="item.url || item.path" :mode="imageMode"></image> |
|||
</view> |
|||
<slot name="file" :file="lists"></slot> |
|||
<view style="display: inline-block;" @tap="selectFile" v-if="maxCount > lists.length"> |
|||
<slot name="addBtn"></slot> |
|||
<view |
|||
v-if="!customBtn" |
|||
class="u-list-item u-add-wrap" |
|||
hover-class="u-add-wrap__hover" |
|||
hover-stay-time="150" |
|||
:style="{ |
|||
width: $u.addUnit(width), |
|||
height: $u.addUnit(height) |
|||
}" |
|||
> |
|||
<u-icon name="plus" class="u-add-btn" size="40"></u-icon> |
|||
<view class="u-add-tips">{{ uploadText }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* upload 图片上传 |
|||
* @description 该组件用于上传图片场景 |
|||
* @tutorial https://www.uviewui.com/components/upload.html |
|||
* @property {String} action 服务器上传地址 |
|||
* @property {String Number} max-count 最大选择图片的数量（默认99） |
|||
* @property {Boolean} custom-btn 如果需要自定义选择图片的按钮，设置为true（默认false） |
|||
* @property {Boolean} show-progress 是否显示进度条（默认true） |
|||
* @property {Boolean} disabled 是否启用(显示/移仓)组件（默认false） |
|||
* @property {String} image-mode 预览图片等显示模式，可选值为uni的image的mode属性值（默认aspectFill） |
|||
* @property {String} del-icon 右上角删除图标名称，只能为uView内置图标 |
|||
* @property {String} del-bg-color 右上角关闭按钮的背景颜色 |
|||
* @property {String | Number} index 在各个回调事件中的最后一个参数返回，用于区别是哪一个组件的事件 |
|||
* @property {String} del-color 右上角关闭按钮图标的颜色 |
|||
* @property {Object} header 上传携带的头信息，对象形式 |
|||
* @property {Object} form-data 上传额外携带的参数 |
|||
* @property {String} name 上传文件的字段名，供后端获取使用（默认file） |
|||
* @property {Array<String>} size-type original 原图，compressed 压缩图，默认二者都有（默认['original', 'compressed']） |
|||
* @property {Array<String>} source-type 选择图片的来源，album-从相册选图，camera-使用相机，默认二者都有（默认['album', 'camera']） |
|||
* @property {Boolean} preview-full-image 是否可以通过uni.previewImage预览已选择的图片（默认true） |
|||
* @property {Boolean} multiple 是否开启图片多选，部分安卓机型不支持（默认true） |
|||
* @property {Boolean} deletable 是否显示删除图片的按钮（默认true） |
|||
* @property {String Number} max-size 选择单个文件的最大大小，单位B(byte)，默认不限制（默认Number.MAX_VALUE） |
|||
* @property {Array<Object>} file-list 默认显示的图片列表，数组元素为对象，必须提供url属性 |
|||
* @property {Boolean} upload-text 选择图片按钮的提示文字（默认“选择图片”） |
|||
* @property {Boolean} auto-upload 选择完图片是否自动上传，见上方说明（默认true） |
|||
* @property {Boolean} show-tips 特殊情况下是否自动提示toast，见上方说明（默认true） |
|||
* @property {Boolean} show-upload-list 是否显示组件内部的图片预览（默认true） |
|||
* @event {Function} on-oversize 图片大小超出最大允许大小 |
|||
* @event {Function} on-preview 全屏预览图片时触发 |
|||
* @event {Function} on-remove 移除图片时触发 |
|||
* @event {Function} on-success 图片上传成功时触发 |
|||
* @event {Function} on-change 图片上传后，无论成功或者失败都会触发 |
|||
* @event {Function} on-error 图片上传失败时触发 |
|||
* @event {Function} on-progress 图片上传过程中的进度变化过程触发 |
|||
* @event {Function} on-uploaded 所有图片上传完毕触发 |
|||
* @event {Function} on-choose-complete 每次选择图片后触发，只是让外部可以得知每次选择后，内部的文件列表 |
|||
* @event {Function} on-list-change 当内部文件列表被加入文件、移除文件，或手动调用clear方法时触发 |
|||
* @event {Function} on-choose-fail 选择文件出错时触发，比如选择文件时取消了操作，只在微信和APP有效 |
|||
* @example <u-upload :action="action" :file-list="fileList" ></u-upload> |
|||
*/ |
|||
export default { |
|||
name: "u-upload", |
|||
emits: ["update:file-list", "on-oversize", "on-list-change", "on-preview", "on-remove", "on-success", "on-change", "on-error", "on-progress", "on-uploaded", "on-choose-complete", "on-choose-fail"], |
|||
props: { |
|||
//是否显示组件自带的图片预览功能 |
|||
showUploadList: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 后端地址 |
|||
action: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
// 最大上传数量 |
|||
maxCount: { |
|||
type: [String, Number], |
|||
default: 52 |
|||
}, |
|||
// 是否显示进度条 |
|||
showProgress: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否启用 |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 预览上传的图片时的裁剪模式，和image组件mode属性一致 |
|||
imageMode: { |
|||
type: String, |
|||
default: "aspectFill" |
|||
}, |
|||
// 头部信息 |
|||
header: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
} |
|||
}, |
|||
// 额外携带的参数 |
|||
formData: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
} |
|||
}, |
|||
// 上传的文件字段名 |
|||
name: { |
|||
type: String, |
|||
default: "file" |
|||
}, |
|||
// 所选的图片的尺寸, 可选值为original compressed |
|||
sizeType: { |
|||
type: Array, |
|||
default() { |
|||
return ["original", "compressed"]; |
|||
} |
|||
}, |
|||
sourceType: { |
|||
type: Array, |
|||
default() { |
|||
return ["album", "camera"]; |
|||
} |
|||
}, |
|||
// 是否在点击预览图后展示全屏图片预览 |
|||
previewFullImage: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否开启图片多选，部分安卓机型不支持 |
|||
multiple: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否展示删除按钮 |
|||
deletable: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 文件大小限制，单位为byte |
|||
maxSize: { |
|||
type: [String, Number], |
|||
default: Number.MAX_VALUE |
|||
}, |
|||
// 显示已上传的文件列表 |
|||
fileList: { |
|||
type: Array, |
|||
default() { |
|||
return []; |
|||
} |
|||
}, |
|||
// 上传区域的提示文字 |
|||
uploadText: { |
|||
type: String, |
|||
default: "选择图片" |
|||
}, |
|||
// 是否自动上传 |
|||
autoUpload: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否显示toast消息提示 |
|||
showTips: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否通过slot自定义传入选择图标的按钮 |
|||
customBtn: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 内部预览图片区域和选择图片按钮的区域宽度 |
|||
width: { |
|||
type: [String, Number], |
|||
default: 200 |
|||
}, |
|||
// 内部预览图片区域和选择图片按钮的区域高度 |
|||
height: { |
|||
type: [String, Number], |
|||
default: 200 |
|||
}, |
|||
// 右上角关闭按钮的背景颜色 |
|||
delBgColor: { |
|||
type: String, |
|||
default: "#fa3534" |
|||
}, |
|||
// 右上角关闭按钮的叉号图标的颜色 |
|||
delColor: { |
|||
type: String, |
|||
default: "#ffffff" |
|||
}, |
|||
// 右上角删除图标名称，只能为uView内置图标 |
|||
delIcon: { |
|||
type: String, |
|||
default: "close" |
|||
}, |
|||
// 右下角成功图标名称，只能为uView内置图标 |
|||
successIcon: { |
|||
type: String, |
|||
default: "checkbox-mark" |
|||
}, |
|||
// 右下角成功的叉号图标的颜色 |
|||
successColor: { |
|||
type: String, |
|||
default: "#ffffff" |
|||
}, |
|||
// 如果上传后的返回值为json字符串，是否自动转json |
|||
toJson: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 上传前的钩子，每个文件上传前都会执行 |
|||
beforeUpload: { |
|||
type: Function, |
|||
default: null |
|||
}, |
|||
// 移除文件前的钩子 |
|||
beforeRemove: { |
|||
type: Function, |
|||
default: null |
|||
}, |
|||
// 允许上传的图片后缀 |
|||
limitType: { |
|||
type: Array, |
|||
default() { |
|||
// 支付宝小程序真机选择图片的后缀为"image" |
|||
// https://opendocs.alipay.com/mini/api/media-image |
|||
return ["png", "jpg", "jpeg", "webp", "gif", "image"]; |
|||
} |
|||
}, |
|||
// 在各个回调事件中的最后一个参数返回，用于区别是哪一个组件的事件 |
|||
index: { |
|||
type: [Number, String], |
|||
default: "" |
|||
} |
|||
}, |
|||
mounted() {}, |
|||
data() { |
|||
return { |
|||
lists: [], |
|||
isInCount: true, |
|||
uploading: false |
|||
}; |
|||
}, |
|||
watch: { |
|||
fileList: { |
|||
immediate: true, |
|||
handler(val) { |
|||
let that = this; |
|||
let lists = JSON.parse(JSON.stringify(that.lists)); |
|||
val.map(value => { |
|||
// 首先检查内部是否已经添加过这张图片，因为外部绑定了一个对象给fileList的话(对象引用)，进行修改外部fileList |
|||
// 时，会触发watch，导致重新把原来的图片再次添加到this.lists |
|||
// 数组的some方法意思是，只要数组元素有任意一个元素条件符合，就返回true，而另一个数组的every方法的意思是数组所有元素都符合条件才返回true |
|||
let tmp = lists.some(val => { |
|||
return val.url == value.url; |
|||
}); |
|||
// 如果内部没有这个图片(tmp为false)，则添加到内部 |
|||
if (!tmp) { |
|||
lists.push({ url: value.url, error: false, progress: 100 }); |
|||
} |
|||
}); |
|||
that.lists = JSON.parse(JSON.stringify(lists)); |
|||
} |
|||
}, |
|||
// 监听lists的变化，发出事件 |
|||
lists: { |
|||
deep: true, |
|||
handler(n) { |
|||
this.$emit("update:file-list", n); |
|||
this.$emit("on-list-change", n, this.index); |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
// 清除列表 |
|||
clear() { |
|||
this.lists = []; |
|||
}, |
|||
// 重新上传队列中上传失败的所有文件 |
|||
reUpload() { |
|||
this.uploadFile(); |
|||
}, |
|||
// 选择图片 |
|||
selectFile() { |
|||
let that = this; |
|||
if (that.disabled) return; |
|||
const { name = "", maxCount, multiple, maxSize, sizeType, camera, compressed, maxDuration, sourceType } = that; |
|||
let chooseFile = null; |
|||
let lists = JSON.parse(JSON.stringify(that.lists)); |
|||
const newMaxCount = maxCount - lists.length; |
|||
// 设置为只选择图片的时候使用 chooseImage 来实现 |
|||
chooseFile = new Promise((resolve, reject) => { |
|||
uni.chooseImage({ |
|||
count: multiple ? (newMaxCount > 9 ? 9 : newMaxCount) : 1, |
|||
sourceType: sourceType, |
|||
sizeType, |
|||
success: resolve, |
|||
fail: reject |
|||
}); |
|||
}); |
|||
chooseFile |
|||
.then(res => { |
|||
let file = null; |
|||
let listOldLength = that.lists.length; |
|||
res.tempFiles.map((val, index) => { |
|||
// 检查文件后缀是否允许，如果不在that.limitType内，就会返回false |
|||
if (!that.checkFileExt(val)) return; |
|||
|
|||
// 如果是非多选，index大于等于1或者超出最大限制数量时，不处理 |
|||
if (!multiple && index >= 1) return; |
|||
if (val.size > maxSize) { |
|||
that.$emit("on-oversize", val, that.lists, that.index); |
|||
that.showToast("超出允许的文件大小"); |
|||
} else { |
|||
if (maxCount <= lists.length) { |
|||
that.$emit("on-exceed", val, that.lists, that.index); |
|||
that.showToast("超出最大允许的文件个数"); |
|||
return; |
|||
} |
|||
lists.push({ |
|||
url: val.path, |
|||
progress: 0, |
|||
error: false, |
|||
file: val |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
// 这样实现深拷贝会导致在H5中file为空对象 |
|||
// that.lists = JSON.parse(JSON.stringify(lists)); |
|||
this.deepClone(lists, that.lists); |
|||
// 每次图片选择完，抛出一个事件，并将当前内部选择的图片数组抛出去 |
|||
that.$emit("on-choose-complete", that.lists, that.index); |
|||
if (that.autoUpload) that.uploadFile(listOldLength); |
|||
}) |
|||
.catch(error => { |
|||
that.$emit("on-choose-fail", error); |
|||
}); |
|||
}, |
|||
// 提示用户消息 |
|||
showToast(message, force = false) { |
|||
if (this.showTips || force) { |
|||
uni.showToast({ |
|||
title: message, |
|||
icon: "none" |
|||
}); |
|||
} |
|||
}, |
|||
// 该方法供用户通过ref调用，手动上传 |
|||
upload() { |
|||
this.uploadFile(); |
|||
}, |
|||
// 对失败的图片重新上传 |
|||
retry(index) { |
|||
this.lists[index].progress = 0; |
|||
this.lists[index].error = false; |
|||
this.lists[index].response = null; |
|||
uni.showLoading({ |
|||
title: "重新上传" |
|||
}); |
|||
this.uploadFile(index); |
|||
}, |
|||
// 上传图片 |
|||
async uploadFile(index = 0) { |
|||
if (this.disabled) return; |
|||
if (this.uploading) return; |
|||
// 全部上传完成 |
|||
if (index >= this.lists.length) { |
|||
this.$emit("on-uploaded", this.lists, this.index); |
|||
return; |
|||
} |
|||
// 检查是否是已上传或者正在上传中 |
|||
if (this.lists[index].progress == 100) { |
|||
if (this.autoUpload == false) this.uploadFile(index + 1); |
|||
return; |
|||
} |
|||
// 执行before-upload钩子 |
|||
if (this.beforeUpload && typeof this.beforeUpload === "function") { |
|||
// 执行回调，同时传入索引和文件列表当作参数 |
|||
// 在微信，支付宝等环境(H5正常)，会导致父组件定义的customBack()函数体中的this变成子组件的this |
|||
// 通过bind()方法，绑定父组件的this，让this.customBack()的this为父组件的上下文 |
|||
// 因为upload组件可能会被嵌套在其他组件内，比如u-form，这时this.$parent其实为u-form的this， |
|||
// 非页面的this，所以这里需要往上历遍，一直寻找到最顶端的$parent，这里用了this.$u.$parent.call(this) |
|||
// 明白意思即可，无需纠结this.$u.$parent.call(this)的细节 |
|||
let beforeResponse = this.beforeUpload.bind(this.$u.$parent.call(this))(index, this.lists); |
|||
// 判断是否返回了promise |
|||
if (!!beforeResponse && typeof beforeResponse.then === "function") { |
|||
await beforeResponse |
|||
.then(res => { |
|||
// promise返回成功，不进行动作，继续上传 |
|||
}) |
|||
.catch(err => { |
|||
// 进入catch回调的话，继续下一张 |
|||
return this.uploadFile(index + 1); |
|||
}); |
|||
} else if (beforeResponse === false) { |
|||
// 如果返回false，继续下一张图片的上传 |
|||
return this.uploadFile(index + 1); |
|||
} else { |
|||
// 此处为返回"true"的情形，这里不写代码，就跳过此处，继续执行当前的上传逻辑 |
|||
} |
|||
} |
|||
// 检查上传地址 |
|||
if (!this.action) { |
|||
this.showToast("请配置上传地址", true); |
|||
return; |
|||
} |
|||
this.lists[index].error = false; |
|||
this.uploading = true; |
|||
// 创建上传对象 |
|||
const task = uni.uploadFile({ |
|||
url: this.action, |
|||
filePath: this.lists[index].url, |
|||
name: this.name, |
|||
formData: this.formData, |
|||
header: this.header, |
|||
// #ifdef MP-ALIPAY |
|||
fileType:'image', |
|||
// #endif |
|||
success: res => { |
|||
// 判断是否json字符串，将其转为json格式 |
|||
let data = this.toJson && this.$u.test.jsonString(res.data) ? JSON.parse(res.data) : res.data; |
|||
if (![200, 201, 204].includes(res.statusCode)) { |
|||
this.uploadError(index, data); |
|||
} else { |
|||
// 上传成功 |
|||
this.lists[index].response = data; |
|||
this.lists[index].progress = 100; |
|||
this.lists[index].error = false; |
|||
this.$emit("on-success", data, index, this.lists, this.index); |
|||
} |
|||
}, |
|||
fail: e => { |
|||
this.uploadError(index, e); |
|||
}, |
|||
complete: res => { |
|||
uni.hideLoading(); |
|||
this.uploading = false; |
|||
this.uploadFile(index + 1); |
|||
this.$emit("on-change", res, index, this.lists, this.index); |
|||
} |
|||
}); |
|||
task.onProgressUpdate(res => { |
|||
if (res.progress > 0) { |
|||
this.lists[index].progress = res.progress; |
|||
this.$emit("on-progress", res, index, this.lists, this.index); |
|||
} |
|||
}); |
|||
}, |
|||
// 上传失败 |
|||
uploadError(index, err) { |
|||
this.lists[index].progress = 0; |
|||
this.lists[index].error = true; |
|||
this.lists[index].response = null; |
|||
this.$emit("on-error", err, index, this.lists, this.index); |
|||
this.showToast("上传失败，请重试"); |
|||
}, |
|||
// 删除一个图片 |
|||
deleteItem(index) { |
|||
uni.showModal({ |
|||
title: "提示", |
|||
content: "您确定要删除此项吗？", |
|||
success: async res => { |
|||
if (res.confirm) { |
|||
// 先检查是否有定义before-remove移除前钩子 |
|||
// 执行before-remove钩子 |
|||
if (this.beforeRemove && typeof this.beforeRemove === "function") { |
|||
// 此处钩子执行 原理同before-remove参数，见上方注释 |
|||
let beforeResponse = this.beforeRemove.bind(this.$u.$parent.call(this))(index, this.lists); |
|||
// 判断是否返回了promise |
|||
if (!!beforeResponse && typeof beforeResponse.then === "function") { |
|||
await beforeResponse |
|||
.then(res => { |
|||
// promise返回成功，不进行动作，继续上传 |
|||
this.handlerDeleteItem(index); |
|||
}) |
|||
.catch(err => { |
|||
// 如果进入promise的reject，终止删除操作 |
|||
this.showToast("已终止移除"); |
|||
}); |
|||
} else if (beforeResponse === false) { |
|||
// 返回false，终止删除 |
|||
this.showToast("已终止移除"); |
|||
} else { |
|||
// 如果返回true，执行删除操作 |
|||
this.handlerDeleteItem(index); |
|||
} |
|||
} else { |
|||
// 如果不存在before-remove钩子， |
|||
this.handlerDeleteItem(index); |
|||
} |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
// 执行移除图片的动作，上方代码只是判断是否可以移除 |
|||
handlerDeleteItem(index) { |
|||
// 如果文件正在上传中，终止上传任务，进度在0 < progress < 100则意味着正在上传 |
|||
if (this.lists[index].progress < 100 && this.lists[index].progress > 0) { |
|||
typeof this.lists[index].uploadTask != 'undefined' && this.lists[index].uploadTask.abort(); |
|||
} |
|||
this.lists.splice(index, 1); |
|||
this.$forceUpdate(); |
|||
this.$emit("on-remove", index, this.lists, this.index); |
|||
//this.showToast('移除成功'); |
|||
}, |
|||
// 用户通过ref手动的形式，移除一张图片 |
|||
remove(index) { |
|||
// 判断索引的合法范围 |
|||
if (index >= 0 && index < this.lists.length) { |
|||
this.lists.splice(index, 1); |
|||
this.$emit('on-list-change', this.lists, this.index); |
|||
} |
|||
}, |
|||
// 预览图片 |
|||
doPreviewImage(url, index) { |
|||
if (!this.previewFullImage) { |
|||
this.$emit("on-preview", url, this.lists, this.index); |
|||
return; |
|||
} |
|||
const images = this.lists.map(item => item.url || item.path); |
|||
uni.previewImage({ |
|||
urls: images, |
|||
current: url, |
|||
success: () => { |
|||
this.$emit("on-preview", url, this.lists, this.index); |
|||
}, |
|||
fail: () => { |
|||
uni.showToast({ |
|||
title: "预览图片失败", |
|||
icon: "none" |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
// 判断文件后缀是否允许 |
|||
checkFileExt(file) { |
|||
// 检查是否在允许的后缀中 |
|||
let noArrowExt = false; |
|||
// 获取后缀名 |
|||
let fileExt = ""; |
|||
const reg = /.+\./; |
|||
// 如果是H5，需要从name中判断 |
|||
// #ifdef H5 |
|||
fileExt = file.name.replace(reg, "").toLowerCase(); |
|||
// #endif |
|||
// 非H5，需要从path中读取后缀 |
|||
// #ifndef H5 |
|||
fileExt = file.path.replace(reg, "").toLowerCase(); |
|||
// #endif |
|||
// 使用数组的some方法，只要符合limitType中的一个，就返回true |
|||
noArrowExt = this.limitType.some(ext => { |
|||
// 转为小写 |
|||
return ext.toLowerCase() === fileExt; |
|||
}); |
|||
if (!noArrowExt) this.showToast(`不允许选择${fileExt}格式的文件`); |
|||
return noArrowExt; |
|||
}, |
|||
// 深拷贝 |
|||
deepClone(obj, newObj) { |
|||
for (let k in obj) { |
|||
const value = obj[k]; |
|||
|
|||
if (Array.isArray(value)) { |
|||
newObj[k] = []; |
|||
this.deepClone(value, newObj[k]); |
|||
} else if (value !== null && typeof value === "object") { |
|||
newObj[k] = {}; |
|||
this.deepClone(value, newObj[k]); |
|||
} else { |
|||
newObj[k] = value; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-upload { |
|||
@include vue-flex; |
|||
flex-wrap: wrap; |
|||
align-items: center; |
|||
} |
|||
|
|||
.u-list-item { |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
overflow: hidden; |
|||
margin: 10rpx; |
|||
background: rgb(244, 245, 246); |
|||
position: relative; |
|||
border-radius: 10rpx; |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.u-preview-wrap { |
|||
border: 1px solid rgb(235, 236, 238); |
|||
} |
|||
|
|||
.u-add-wrap { |
|||
flex-direction: column; |
|||
color: $u-content-color; |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
.u-add-tips { |
|||
margin-top: 20rpx; |
|||
line-height: 40rpx; |
|||
} |
|||
|
|||
.u-add-wrap__hover { |
|||
background-color: rgb(235, 236, 238); |
|||
} |
|||
|
|||
.u-preview-image { |
|||
display: block; |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 10rpx; |
|||
} |
|||
|
|||
.u-delete-icon { |
|||
position: absolute; |
|||
top: 6rpx; |
|||
right: 6rpx; |
|||
z-index: 10; |
|||
background-color: $u-type-error; |
|||
border-radius: 100rpx; |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.u-icon { |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.u-success-icon { |
|||
position: absolute; |
|||
bottom: 6rpx; |
|||
right: 6rpx; |
|||
z-index: 10; |
|||
background-color: #5ac725; |
|||
border-radius: 100rpx; |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
@include vue-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.u-progress { |
|||
position: absolute; |
|||
bottom: 10rpx; |
|||
left: 8rpx; |
|||
right: 8rpx; |
|||
z-index: 9; |
|||
width: auto; |
|||
} |
|||
|
|||
.u-error-btn { |
|||
color: #ffffff; |
|||
background-color: $u-type-error; |
|||
font-size: 20rpx; |
|||
padding: 4px 0; |
|||
text-align: center; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
z-index: 9; |
|||
line-height: 1; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,175 @@ |
|||
<template> |
|||
<view class="u-code-wrap"> |
|||
<!-- 此组件功能由js完成，无需写html逻辑 --> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* verificationCode 验证码输入框 |
|||
* @description 考虑到用户实际发送验证码的场景，可能是一个按钮，也可能是一段文字，提示语各有不同，所以本组件 不提供界面显示，只提供提示语，由用户将提示语嵌入到具体的场景 |
|||
* @tutorial https://www.uviewui.com/components/verificationCode.html |
|||
* @property {Number String} seconds 倒计时所需的秒数（默认60） |
|||
* @property {String} start-text 开始前的提示语，见官网说明（默认获取验证码） |
|||
* @property {String} change-text 倒计时期间的提示语，必须带有字母"x"，见官网说明（默认X秒重新获取） |
|||
* @property {String} end-text 倒计结束的提示语，见官网说明（默认重新获取） |
|||
* @property {Boolean} keep-running 是否在H5刷新或各端返回再进入时继续倒计时（默认false） |
|||
* @event {Function} change 倒计时期间，每秒触发一次 |
|||
* @event {Function} start 开始倒计时触发 |
|||
* @event {Function} end 结束倒计时触发 |
|||
* @example <u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" |
|||
*/ |
|||
export default { |
|||
name: "u-verification-code", |
|||
emits: ["start", "end", "change"], |
|||
props: { |
|||
// 倒计时总秒数 |
|||
seconds: { |
|||
type: [String, Number], |
|||
default: 60 |
|||
}, |
|||
// 尚未开始时提示 |
|||
startText: { |
|||
type: String, |
|||
default: '获取验证码' |
|||
}, |
|||
// 正在倒计时中的提示 |
|||
changeText: { |
|||
type: String, |
|||
default: 'X秒重新获取' |
|||
}, |
|||
// 倒计时结束时的提示 |
|||
endText: { |
|||
type: String, |
|||
default: '重新获取' |
|||
}, |
|||
// 是否在H5刷新或各端返回再进入时继续倒计时 |
|||
keepRunning: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 为了区分多个页面，或者一个页面多个倒计时组件本地存储的继续倒计时变了 |
|||
uniqueKey: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
secNum: this.seconds, |
|||
timer: null, |
|||
canGetCode: true, // 是否可以执行验证码操作 |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.checkKeepRunning(); |
|||
}, |
|||
watch: { |
|||
seconds: { |
|||
immediate: true, |
|||
handler(n) { |
|||
this.secNum = n; |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
checkKeepRunning() { |
|||
// 获取上一次退出页面(H5还包括刷新)时的时间戳，如果没有上次的保存，此值可能为空 |
|||
let lastTimestamp = Number(uni.getStorageSync(this.uniqueKey + '_$uCountDownTimestamp')); |
|||
if(!lastTimestamp) return this.changeEvent(this.startText); |
|||
// 当前秒的时间戳 |
|||
let nowTimestamp = Math.floor((+ new Date()) / 1000); |
|||
// 判断当前的时间戳，是否小于上一次的本该按设定结束，却提前结束的时间戳 |
|||
if(this.keepRunning && lastTimestamp && lastTimestamp > nowTimestamp) { |
|||
// 剩余尚未执行完的倒计秒数 |
|||
this.secNum = lastTimestamp - nowTimestamp; |
|||
// 清除本地保存的变量 |
|||
uni.removeStorageSync(this.uniqueKey + '_$uCountDownTimestamp'); |
|||
// 开始倒计时 |
|||
this.start(); |
|||
} else { |
|||
// 如果不存在需要继续上一次的倒计时，执行正常的逻辑 |
|||
this.changeEvent(this.startText); |
|||
} |
|||
}, |
|||
// 开始倒计时 |
|||
start() { |
|||
// 防止快速点击获取验证码的按钮而导致内部产生多个定时器导致混乱 |
|||
if(this.timer) { |
|||
clearInterval(this.timer); |
|||
this.timer = null; |
|||
} |
|||
this.$emit('start'); |
|||
this.canGetCode = false; |
|||
// 这里放这句，是为了一开始时就提示，否则要等setInterval的1秒后才会有提示 |
|||
this.changeEvent(this.changeText.replace(/x|X/, this.secNum)); |
|||
this.setTimeToStorage(); |
|||
this.timer = setInterval(() => { |
|||
if (--this.secNum) { |
|||
// 用当前倒计时的秒数替换提示字符串中的"x"字母 |
|||
this.changeEvent(this.changeText.replace(/x|X/, this.secNum)); |
|||
} else { |
|||
clearInterval(this.timer); |
|||
this.timer = null; |
|||
this.changeEvent(this.endText); |
|||
this.secNum = this.seconds; |
|||
this.$emit('end'); |
|||
this.canGetCode = true; |
|||
} |
|||
}, 1000); |
|||
}, |
|||
// 重置，可以让用户再次获取验证码 |
|||
reset() { |
|||
this.canGetCode = true; |
|||
clearInterval(this.timer); |
|||
this.secNum = this.seconds; |
|||
this.changeEvent(this.endText); |
|||
}, |
|||
changeEvent(text) { |
|||
this.$emit('change', text); |
|||
}, |
|||
// 保存时间戳，为了防止倒计时尚未结束，H5刷新或者各端的右上角返回上一页再进来 |
|||
setTimeToStorage() { |
|||
if(!this.keepRunning || !this.timer) return; |
|||
// 记录当前的时间戳，为了下次进入页面，如果还在倒计时内的话，继续倒计时 |
|||
// 倒计时尚未结束，结果大于0；倒计时已经开始，就会小于初始值，如果等于初始值，说明没有开始倒计时，无需处理 |
|||
if(this.secNum > 0 && this.secNum <= this.seconds) { |
|||
// 获取当前时间戳(+ new Date()为特殊写法)，除以1000变成秒，再去除小数部分 |
|||
let nowTimestamp = Math.floor((+ new Date()) / 1000); |
|||
// 将本该结束时候的时间戳保存起来 => 当前时间戳 + 剩余的秒数 |
|||
uni.setStorage({ |
|||
key: this.uniqueKey + '_$uCountDownTimestamp', |
|||
data: nowTimestamp + Number(this.secNum) |
|||
}) |
|||
} |
|||
} |
|||
}, |
|||
// 组件销毁的时候，清除定时器，否则定时器会继续存在，系统不会自动清除 |
|||
// #ifndef VUE3 |
|||
beforeDestroy() { |
|||
this.setTimeToStorage(); |
|||
clearTimeout(this.timer); |
|||
this.timer = null; |
|||
}, |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
beforeUnmount() { |
|||
this.setTimeToStorage(); |
|||
clearTimeout(this.timer); |
|||
this.timer = null; |
|||
}, |
|||
// #endif |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
|
|||
.u-code-wrap { |
|||
width: 0; |
|||
height: 0; |
|||
position: fixed; |
|||
z-index: -1; |
|||
} |
|||
</style> |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue