From 87ae4312bc4a5674833d7e97a1cc211c099fda9e Mon Sep 17 00:00:00 2001
From: whycq <10027870+whycq@user.noreply.gitee.com>
Date: 星期一, 25 九月 2023 15:42:52 +0800
Subject: [PATCH] #
---
components/z-input/z-input.vue | 116 ++++++++++++++++++++++++++++++++++++++
pages.json | 6 ++
pages/component/demo.vue | 26 ++++++++
3 files changed, 148 insertions(+), 0 deletions(-)
diff --git a/components/z-input/z-input.vue b/components/z-input/z-input.vue
new file mode 100644
index 0000000..2d1da6c
--- /dev/null
+++ b/components/z-input/z-input.vue
@@ -0,0 +1,116 @@
+<template>
+ <view>
+ <view class="main">
+ <view class="inner1">{{desc}}</view>
+ <view class="put inner2">
+ <input class="p-input" type="text" :placeholder="placeholder" @input="input" v-model="val">
+ <uni-icons class="p-icon" type="closeempty" size="16" color="#707070" v-if="val.length" @click="clear"></uni-icons>
+ </view>
+ <view class="inner3" v-show="btn">
+ <button class="m-btn" size="mini">{{btnName}}</button>
+ </view>
+ </view>
+ </view>
+</template>
+
+<script>
+ export default {
+ name:"z-input",
+ props: {
+ desc: {
+ type: String,
+ default: ''
+ },
+ btn: {
+ type: Boolean,
+ default: false
+ },
+ btnName: {
+ type: String,
+ default: 'button'
+ },
+ placeholder: {
+ type: String,
+ default: '璇疯緭鍏�'
+ },
+ value: {
+ type: [String, Number],
+ default: ''
+ },
+ },
+ watch: {
+ value(val) {
+ console.log(val);
+ this.val = val
+ },
+ },
+ created() {
+ this.val = this.value
+ },
+ data() {
+ return {
+ val:'',
+ };
+ },
+ methods: {
+ input() {
+ this.$emit('input',this.val);
+ },
+ clear() {
+ this.val = ''
+ this.input()
+ }
+ }
+ }
+</script>
+
+<style scoped>
+ .main {
+ display: flex;
+ align-items: center;
+ min-height: 70rpx;
+ background-color: #FFF;
+ /* border-bottom: 1px solid darkgray; */
+ }
+ .put {
+ display: flex;
+ flex-shrink: 0;
+ }
+
+ .inner1 {
+ width: 120rpx;
+ padding-left: 8px;
+ font-weight: 700;
+ font-family:'Helvetica Neue';
+ }
+ .inner2 {
+ background-color: aliceblue;
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ .p-input {
+ flex:1;
+ padding-left: 8px;
+ }
+ .p-icon {
+ margin-left: 8px;
+ margin-right: 8px;
+ }
+ .inner3 {
+ width: 200rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ .m-btn {
+ background-color: #3c9cff;
+ color: #FFF;
+ }
+ .m-btn:active {
+ background-color: #55bbff;
+ color: #FFF;
+ }
+
+</style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 7653942..cf18f40 100644
--- a/pages.json
+++ b/pages.json
@@ -1,6 +1,12 @@
{
"pages": [ //pages鏁扮粍涓涓�椤硅〃绀哄簲鐢ㄥ惎鍔ㄩ〉锛屽弬鑰冿細https://uniapp.dcloud.io/collocation/pages
{
+ "path": "pages/component/demo",
+ "style": {
+ "navigationBarTitleText": "娴嬭瘯"
+ }
+ },
+ {
"path": "pages/LoginDemo/LoginDemo",
"style": {
"navigationBarTitleText": "鐧诲綍"
diff --git a/pages/component/demo.vue b/pages/component/demo.vue
new file mode 100644
index 0000000..ab32d87
--- /dev/null
+++ b/pages/component/demo.vue
@@ -0,0 +1,26 @@
+<template>
+ <view>
+ <z-input v-for="it in zInputList" :desc="it.desc" :btn="it.btn" :btn-name="it.btnName" v-model="it.val"></z-input>
+ <view>杈撳叆妗�1</view>
+ <view>{{zInputList[0].val}}</view>
+ <view>杈撳叆妗�2</view>
+ <view>{{zInputList[1].val}}</view>
+ </view>
+</template>
+
+<script>
+ export default {
+ data() {
+ return {
+ zInputList: [
+ {name: 'yyy',desc: '鎵樼洏鐮�',val: 'a'},
+ {name: 'yyy',desc: '鐗╂枡鐮�',btn: true,btnName: '鎻愬彇',placeholder: '',val: 8}
+ ],
+
+ }
+ }
+ }
+</script>
+
+<style>
+</style>
\ No newline at end of file
--
Gitblit v1.9.1