第一次提交
This commit is contained in:
@fawn-nine
2
uni_modules/z-prompt/changelog.md
Normal file
2
uni_modules/z-prompt/changelog.md
Normal file
@@ -0,0 +1,2 @@
|
||||
## 1.0.0（2021-05-12）
|
||||
1. 支持uni_modules
|
||||
193
uni_modules/z-prompt/components/z-prompt/z-prompt.vue
Normal file
193
uni_modules/z-prompt/components/z-prompt/z-prompt.vue
Normal file
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="popupClick" @click="onPopupShow()"><slot></slot></view>
|
||||
<view class="popupMask" v-if="popupShow" @click="onPopupHide"></view>
|
||||
<view class="popupContentBox" v-if="popupShow">
|
||||
<view class="close" @click="onPopupHide">×</view>
|
||||
<view class="title">{{ popupConfig.title }}</view>
|
||||
<view class="popupContent">
|
||||
<view class="introduce">{{ popupConfig.tips }}</view>
|
||||
<input
|
||||
class="input"
|
||||
:type="popupConfig.inputType"
|
||||
adjust-position="true"
|
||||
:password="popupConfig.password"
|
||||
v-model="popupInput"
|
||||
:placeholder="popupConfig.placeholder"
|
||||
:maxlength="popupConfig.maxlength"
|
||||
focus="true"
|
||||
placeholder-style="color:#999"
|
||||
:confirm-type="popupConfig.confirmType"
|
||||
/>
|
||||
</view>
|
||||
<view class="popupBut">
|
||||
<button @click="onConfirm">{{ popupConfig.confirmText }}</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: function() {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
popupConfig: {
|
||||
title: '操作',
|
||||
tips: "请输入",
|
||||
confirmText: '确认',
|
||||
placeholder: '',
|
||||
password: false,
|
||||
inputType: 'text',
|
||||
maxlength: 140,
|
||||
confirmType: "done"
|
||||
},
|
||||
popupInput: '',
|
||||
popupShow: false
|
||||
};
|
||||
},
|
||||
//第一次加载
|
||||
created() {
|
||||
if(this.value){
|
||||
this.popupInput = this.value;
|
||||
}
|
||||
if(this.options && typeof(this.options) == "object"){
|
||||
this.popupConfig = Object.assign(this.popupConfig, this.options);
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
value(val){
|
||||
this.popupInput = val;
|
||||
},
|
||||
options(val){
|
||||
if(val && typeof(val) == "object"){
|
||||
this.popupConfig = Object.assign(this.popupConfig, val);
|
||||
}
|
||||
}
|
||||
},
|
||||
//方法
|
||||
methods: {
|
||||
//打开弹窗
|
||||
onPopupShow(value,options) {
|
||||
if(value){
|
||||
this.popupInput = value;
|
||||
}
|
||||
if(options && typeof(options) == "object"){
|
||||
this.popupConfig = Object.assign(this.popupConfig, options);
|
||||
}
|
||||
this.popupShow = true;
|
||||
},
|
||||
//关闭弹窗
|
||||
onPopupHide() {
|
||||
this.popupShow = false;
|
||||
},
|
||||
onConfirm() {
|
||||
if (this.popupInput == '') {
|
||||
uni.showToast({
|
||||
title: '请输入',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.$emit('confirm', {
|
||||
close:() => {
|
||||
this.popupShow = false;
|
||||
},
|
||||
value: this.popupInput
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/style/mixin.scss';
|
||||
.popupMask {
|
||||
position: fixed;
|
||||
top: 0upx;
|
||||
left: 0upx;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 510;
|
||||
animation: popupMask 0.4s;
|
||||
}
|
||||
.popupContentBox {
|
||||
position: fixed;
|
||||
top: 30%;
|
||||
left: 10%;
|
||||
width: 80%;
|
||||
transform: translateY(-50%);
|
||||
background-color: #fff;
|
||||
z-index: 511;
|
||||
animation: popupContentBox 0.4s;
|
||||
}
|
||||
.popupContentBox .close {
|
||||
position: absolute;
|
||||
top: 10upx;
|
||||
right: 15upx;
|
||||
color: #999;
|
||||
font-size: 42upx;
|
||||
line-height: 40upx;
|
||||
}
|
||||
.popupContentBox .title {
|
||||
text-align: center;
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
font-size: 34upx;
|
||||
color: #666;
|
||||
}
|
||||
.popupContentBox .popupContent {
|
||||
padding: 30upx 40upx;
|
||||
}
|
||||
.popupContentBox .popupContent .input {
|
||||
width: 100%;
|
||||
border-radius: 10upx;
|
||||
border: 1px solid #eee;
|
||||
height: 80upx;
|
||||
font-size: 30upx;
|
||||
padding: 0 20upx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.popupContentBox .popupContent .introduce {
|
||||
font-size: 28upx;
|
||||
color: #999;
|
||||
padding-bottom: 10upx;
|
||||
}
|
||||
.popupContentBox .popupBut {
|
||||
padding: 20upx 20upx 20upx 20upx;
|
||||
}
|
||||
.popupContentBox .popupBut button {
|
||||
background-color:$themeColor;
|
||||
color: #fff;
|
||||
}
|
||||
@keyframes popupMask {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes popupContentBox {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-60%);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
77
uni_modules/z-prompt/package.json
Normal file
77
uni_modules/z-prompt/package.json
Normal file
@@ -0,0 +1,77 @@
|
||||
{
|
||||
"id": "z-prompt",
|
||||
"displayName": "弹出输入框",
|
||||
"version": "1.0.0",
|
||||
"description": "弹出输入框",
|
||||
"keywords": [
|
||||
"弹出输入框",
|
||||
"输入框"
|
||||
],
|
||||
"repository": "https://github.com/zhouwei1994/uni-app-demo",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.0.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": "465081029"
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
65
uni_modules/z-prompt/readme.md
Normal file
65
uni_modules/z-prompt/readme.md
Normal file
@@ -0,0 +1,65 @@
|
||||
# 弹出输入框
|
||||
|
||||
弹出输入框
|
||||
|
||||
| `QQ交流群(607391225)` | `微信交流群（加我好友备注"进群"）` |
|
||||
| ----------------------------|--------------------------- |
|
||||
|||
|
||||
| QQ群号：607391225 |微信号：zhou0612wei|
|
||||
|
||||
### [点击跳转-5年的web前端开源的uni-app快速开发模板-下载看文档](https://ext.dcloud.net.cn/plugin?id=2009)
|
||||
|
||||
### 案例一
|
||||
```
|
||||
<z-prompt v-model="true" @change="onChange"></z-prompt>
|
||||
// js
|
||||
methods: {
|
||||
onChange(e){
|
||||
if(/^1\d{10}$/.test(e.value)){
|
||||
uni.showToast({
|
||||
title: '请输入正确的手机',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
e.close();
|
||||
}
|
||||
},
|
||||
```
|
||||
### 案例二
|
||||
```
|
||||
<z-prompt @change="onChange">
|
||||
<button>打开</button>
|
||||
</z-prompt>
|
||||
// js
|
||||
methods: {
|
||||
onChange(e){
|
||||
if(/^1\d{10}$/.test(e.value)){
|
||||
uni.showToast({
|
||||
title: '请输入正确的手机',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
e.close();
|
||||
}
|
||||
},
|
||||
```
|
||||
|
||||
### 属性
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| ----------------------------|--------------- | ------------- | ---------------------------------------------------|
|
||||
| value | Boolean | false | 控制弹窗是否打开 |
|
||||
| options | Object | 有 | 弹窗配置参数 请看下面options属性 |
|
||||
|
||||
### options属性
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| ----------------------------|--------------- | ------------- | ---------------------------------------------------|
|
||||
| title | String | 操作 | 弹窗标题 |
|
||||
| tips | String | 请输入 | 输入框上面的提示 |
|
||||
| confirmText | String | 请输入 | 确认按钮的弹窗 |
|
||||
| placeholder | String | | 输入框的提示 |
|
||||
| password | Boolean | false | 是否密码输入框 |
|
||||
| inputType | String | text | 输入框类型 |
|
||||
| maxlength | Number | 140 | 输入框最大可输入长度 |
|
||||
| confirmType | String | done | 键盘提交按钮配置（值请参考官方） |
|
||||
Reference in New Issue
Block a user