提交 180fbc2e 编写于 作者: I iotjin

update JhComponents

上级 5090f8e0
// 底部输入弹框
// 输入弹框
/*
使用方法 :
1. usingComponents 添加
"JhBottomInputPop": "../../JhComponents/JhBottomInputPop/JhBottomInputPop",
2. wxml 添加组件
<JhBottomInputPop isShow='{{showBottomInputPop}' title="标题" maxLength='50' placeholder='请输入(不超过50字)' bindonConfirm='confirm'>
</JhBottomInputPop>
3.点击事件
//点击选择器的 确定
confirm(e){
console.log('用户点击确定,输入框内容为' + (e.detail ? (':' + e.detail) : '空'))
},
*/
Component({
/**
* 组件的属性列表
*/
properties: {
isShow: {
type: Boolean,
value: false
},
title: {
type: String,
value: '添加'
},
okText: {
type: String,
value: '确定'
},
placeholder: {
type: String,
value: '请输入'
},
maxLength: {
type: Number,
value: 20
},
},
lifetimes: {
attached: function () {
// 页面创建时执行
// console.info('---JhBottomInputPop loaded!---')
},
detached: function () {
// 页面销毁时执行
// console.info('---JhBottomInputPop unloaded!---')
},
},
/**
* 组件的初始数据
*/
data: {
textFieldText: '',
currentLength: 0,
focus: false,
},
/**
* 组件的方法列表
*/
methods: {
//显示PopView
showPopView: function () {
this.setData({
isShow: true
});
},
//隐藏PopView
hiddePopView: function () {
this.setData({
isShow: false
});
},
//将要弹出popView
willShowPopView: function (e) {},
//输入改变
inputChange: function (e) {
var textFieldText = e.detail.value; //输入的内容
var value = e.detail.value.length; //输入内容的长度
var currentLength = value; //剩余字数
// console.log('输入的内容 :' + textFieldText);
this.setData({
textFieldText: textFieldText,
currentLength: currentLength
})
},
//点击确定
onConfirm: function (e) {
var inputText = this.data.textFieldText
this.hiddePopView()
this.triggerEvent('onConfirm', inputText);
}
}
})
\ No newline at end of file
{
"component": true,
"usingComponents": {
"van-popup": "@vant/weapp/popup/index",
"van-nav-bar": "@vant/weapp/nav-bar/index"
}
}
\ No newline at end of file
<van-popup position="bottom" custom-style="height: 50%;" show="{{isShow}}" bind:close="hiddePopView">
<view class="nav">
<van-icon class="back" color="#C8C8C8" name="arrow-left" size="25px" bind:click="hiddePopView" />
<view class="title">{{title}}</view>
<view class="okBtn" bindtap="onConfirm">{{okText}}</view>
</view>
<textarea class="textarea-bg"
maxlength='{{maxLength}}'
value="{{textFieldText}}"
placeholder="{{placeholder}}"
bindinput="inputChange"
show-confirm-bar=""
cursor-spacing="50"
focus ="{{focus}}"
>
<view class='word'>{{currentLength}}/{{maxLength}}</view>
</textarea>
</van-popup>
.nav{
display: flex;
height: 100rpx;
background: white;
}
.back{
flex: 1;
padding-left: 5rpx;
padding-right: 20rpx;
}
.title{
flex: 8;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.okBtn{
flex: 1;
padding-left: 20rpx;
padding-right: 20rpx;
display: flex;
align-items: center;
color: rgb(50, 50, 50);
font-size: 16px;
}
.textarea-bg {
background: #fff;
padding: 30rpx;
width: 90%;
}
.word {
position: absolute;
bottom: 30rpx;
right: 30rpx;
}
\ No newline at end of file
// 输入弹框
/*
使用方法 :
1. usingComponents 添加
"JhDialog": "../../JhComponents/JhDialog/JhDialog"
2. wxml 添加组件
<JhDialog isShowDialog='{{isShowDialog}}' bind:onConfirm="onConfirm">
</JhDialog>
3.点击事件
//点击选择器的 确定
onConfirm(event) {
},
*/
Component({
/**
* 组件的属性列表
*/
properties: {
isShowDialog: {
type: Boolean,
value: false
},
},
lifetimes: {
attached: function () {
// 页面创建时执行
// console.info('---JhDialog loaded!---')
},
detached: function () {
// 页面销毁时执行
// console.info('---JhDialog unloaded!---')
},
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
//显示PopView
showDialog: function () {
this.setData({
isShowDialog: true
});
},
//隐藏Dialog
hiddenDialog: function () {
this.setData({
isShowDialog: false
});
},
//将要弹出popView
willShowPopView: function (event) {},
}
})
<van-popup show="{{ isShowDialog }}" bind:close="hiddenDialog" round="true">
</van-popup>
\ No newline at end of file
/* 下拉菜单组件 JhDropDownMenu
默认展示array 的第0个item。设置index 展示指定item,
设置hintText,优先展示提示文字,提示文字默认不显示
*/
Component({
/**
* 组件的属性列表
*/
externalClasses: ['menu-bg', 'menu-content','menu-list'], //不能使用小驼峰命名,只能用 -或 _
properties: {
array: { //模型数组
type: Array,
},
index: { //选中索引,默认0
type: Number,
value: 0
},
hintText: { //提示文字,默认''
type: String,
value: "",
},
width: { //菜单的宽度,默认'80px'
type: String,
value: "80px",
},
bgColor: { //背景颜色,默认'white'
type: String,
value: "white",
},
maskColor: { //蒙版背景颜色,默认'white'
type: String,
value: "transparent",
},
},
/**
* 组件的初始数据
*/
data: {
isShow: false, //初始option不显示
selectText: '',
animationData: {}, //右边箭头的动画
listView_x:'',
listView_y:'',
listView_w:'',
},
lifetimes: {
attached: function () {
this.setData({
selectText: this.properties.hintText.length > 0 ? this.properties.hintText : this.properties.array[this.properties.index].text
})
// wx.createSelectorQuery().select('#menuBgView').boundingClientRect(function (rect) {
// console.log(rect.width)
// // rect.id // 节点的ID
// // rect.dataset // 节点的dataset
// // rect.left // 节点的左边界坐标
// // rect.right // 节点的右边界坐标
// // rect.top // 节点的上边界坐标
// // rect.bottom // 节点的下边界坐标
// // rect.width // 节点的宽度
// // rect.height // 节点的高度
// }).exec()
var that = this;
this.createSelectorQuery().select('#menuBgView').boundingClientRect(function (rect) {
// console.log(rect)
that.setData({
listView_x: rect.left + 'px',
listView_y: rect.top + 32 + 'px',
listView_w: rect.width +'px',
})
}).exec();
// 页面创建时执行
console.info('---JhDropDownMenu loaded!---')
},
detached: function () {
// 页面销毁时执行
console.info('---JhDropDownMenu unloaded!---')
},
},
/**
* 组件的方法列表
*/
methods: {
//option的显示与否
clickMenu: function(e) {
// console.log(e)
// // console.log(e.currentTarget.offsetLeft)
// // console.log(e.currentTarget.offsetTop)
// var that = this;
// this.createSelectorQuery().select('#menuBgView').boundingClientRect(function (rect) {
// // console.log(rect)
// that.setData({
// // listView_x: e.currentTarget.offsetLeft + 'px',
// // listView_y: e.currentTarget.offsetTop + 32 + 'px',
// listView_x: rect.left + 'px',
// listView_y: rect.top + 32 + 'px',
// listView_w: rect.width + 'px',
// })
// }).exec();
var nowShow = this.data.isShow; //获取当前option显示的状态
//创建动画
var animation = wx.createAnimation({
timingFunction: "ease"
})
this.animation = animation;
if (nowShow) {
animation.rotate(0).step();
this.setData({
animationData: animation.export()
})
} else {
animation.rotate(180).step();
this.setData({
animationData: animation.export()
})
}
this.setData({
isShow: !nowShow
})
},
//点击某一行item 设置内容
clickItem: function(e) {
var arr = this.properties.array; //当前option的数据是引入组件的页面传过来的,所以这里获取数据只有通过this.properties
var id = e.target.dataset.index; //当前点击的索引
var selText = arr[id].text; //当前点击的内容
//再次执行动画,注意这里一定,一定,一定是this.animation来使用动画
this.animation.rotate(0).step();
this.setData({
isShow: false,
selectText: selText,
animationData: this.animation.export()
})
var selItem = {
id: id,
text: selText
}
this.triggerEvent('clickItem', selItem)
},
clickMaskHidden: function() {
//再次执行动画,注意这里一定,一定,一定是this.animation来使用动画
this.animation.rotate(0).step();
this.setData({
isShow: false,
animationData: this.animation.export()
})
},
}
})
\ No newline at end of file
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
<view class="menuBgView menu-bg" id="menuBgView" style="width:{{width}}">
<view class='menuContent menu-content' bindtap='clickMenu' style="background:{{bgColor}}">
<view class='selectText'>{{selectText}}</view>
<image src='ic_arrow_down.png' class='arrowImg' animation="{{animationData}}"></image>
</view>
</view>
<view class='itemList-Mask' wx:if="{{isShow}}" bindtap='clickMaskHidden'style="background:{{maskColor}}">
<view class='itemList menu-list'style=";left:{{listView_x}};top:{{listView_y}}; width:{{listView_w}};">
<view wx:for="{{array}}" data-index="{{index}}" wx:key='index' class='item' bindtap='clickItem'>{{item.text}}</view>
</view>
</view>
\ No newline at end of file
.menuBgView{
width: 80px;
}
.menuContent{
border: 1px solid #e2e2e2;
background: white;
font-size: 15px;
position: relative;
height: 30px;
line-height: 30px;
}
.arrowImg {
position: absolute;
right: 5px;
top: 7.5px;
width: 16px;
height: 15px;
transition: all 0.3s ease;
}
.selectText {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 20px 0 6px;
font-size: 14px;
}
.itemList {
background: white;
position: absolute;
border: 1px solid #e2e2e2;
border-top: none;
box-sizing: border-box;
z-index: 3;
max-height: 120px;
overflow: auto;
width: 80px;
}
.item {
height: 30px;
line-height: 30px;
border-top: 1px solid #e2e2e2;
padding: 0 6px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
}
.item:first-child {
border-top: none;
}
.itemList-Mask{
/* position: absolute; */
position:fixed;
left: 0;
top: 0;
bottom: 0;
right:0;
width: 100%;
height: 100%;
/* background: rgba(0, 0, 0, .5); */
z-index: 5;
}
\ No newline at end of file
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
// JhComponents/JhTextListView/JhTextListView.js
/*
使用方法 :
1. usingComponents 添加
"JhTextListView": "../../../JhComponents/JhTextListView/JhTextListView"
2. wxml 添加组件
<JhTextListView listDataArr='{{dataArr}}' bind:clickCell="clickCell">
</JhTextListView>
3.点击事件
clickCell:function(e){
console.log(e.detail);
let text = e.detail.title;
if(text=='退出'){
wx.navigateTo({
url: url
})
}
}
4.数据格式
dataArr: [{
'title': 'title1',
'info': 'info1',
'url': '../url',
},
{
'title': 'title2',
'info': 'info2',
'url': '../url',
}
],
*/
Component({
/**
* 组件的属性列表
*/
properties: {
listDataArr: {
type: Array,
},
},
/**
* 组件的初始数据
*/
data: {
},
lifetimes: {
attached: function () {
}
},
/**
* 组件的方法列表
*/
methods: {
clickCell: function (event) {
var data = event.currentTarget.dataset.model;
this.triggerEvent('clickCell', data);
}
}
})
\ No newline at end of file
{
"component": true,
"usingComponents": {
"van-cell": "@vant/weapp/cell/index"
}
}
\ No newline at end of file