Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 3944651f 编写于 作者: D DCloud_LXH
浏览文件
操作

chore: button、input-data.vue

上级 20d084de
隐藏空白更改
内联 并排
Showing with 116 addition and 107 deletion
components/input-data/input-data.vue
浏览文件 @ 3944651f
<script lang="uts">
export default {
name: "input-data",
props: {
title: {
type: String,
required: true
},
type: {
type: String,
required: true
},
defaultValue: {
type: String,
required: true,
default: ''
}
},
data() {
return {
inputClearValue: '' as any,
showClearIcon: false,
inputType: 'text'
}
},
created() {
switch (this.type) {
case 'number':
this.inputType = 'number'
break;
}
this.inputClearValue = this.getValue(this.defaultValue)
},
methods: {
input: function (event : InputEvent) {
// @ts-ignore
this.inputClearValue = event.detail.value
if ((this.inputClearValue as string).length > 0) {
this.showClearIcon = true
} else {
this.showClearIcon = false
}
export default {
name: "input-data",
props: {
title: {
type: String,
required: true
},
type: {
type: String,
required: true
},
defaultValue: {
type: String,
required: true,
default: ''
}
},
data() {
return {
inputClearValue: '' as any,
showClearIcon: false,
inputType: 'text'
}
},
created() {
switch (this.type) {
case 'number':
this.inputType = 'number'
break;
}
this.inputClearValue = this.getValue(this.defaultValue)
},
methods: {
input: function (event : InputEvent) {
// @ts-ignore
this.inputClearValue = event.detail.value
if ((this.inputClearValue as string).length > 0) {
this.showClearIcon = true
} else {
this.showClearIcon = false
}
this.$emit('confirm', this.getValue(this.inputClearValue))
},
clearIcon: function () {
this.inputClearValue = ''
this.showClearIcon = false
},
// @ts-ignore
confirm(e : InputConfirmEvent) {
// this.$emit('confirm', this.getValue(e.detail.value))
},
blur() {
this.showClearIcon = false
},
focus() {
let inputValue = this.inputClearValue
if (typeof inputValue !== 'string') {
inputValue = inputValue.toString()
}
if ((inputValue as string).length > 0) {
this.showClearIcon = true
} else {
this.showClearIcon = false
}
},
getValue(value : any) : any {
switch (this.type) {
case 'number':
return parseFloat(value as string)
}
this.$emit('confirm', this.getValue(this.inputClearValue))
},
clearIcon: function () {
this.inputClearValue = ''
this.showClearIcon = false
this.$emit('confirm', this.getValue(this.inputClearValue))
},
// @ts-ignore
confirm(e : InputConfirmEvent) {
// this.$emit('confirm', this.getValue(e.detail.value))
},
blur() {
this.showClearIcon = false
},
focus() {
let inputValue = this.inputClearValue
if (typeof inputValue !== 'string') {
inputValue = inputValue.toString()
}
if ((inputValue as string).length > 0) {
this.showClearIcon = true
} else {
this.showClearIcon = false
}
},
getValue(value : any) : any {
switch (this.type) {
case 'number':
return parseFloat(value as string)
}
return value
}
}
}
return value
}
}
}
</script>
<template>
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> {{title}} </text>
</view>
</view>
<view class="uni-input-wrapper input-wrapper">
<input class="uni-input" :type="inputType" :value="inputClearValue" :placeholder="title" @input="input"
@confirm="confirm" @blur="blur" @focus="focus"/>
<image class="input-wrapper_image" src="/static/icons/clear.png" v-if="showClearIcon" @click="clearIcon">
</image>
</view>
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> {{title}} </text>
</view>
</view>
<view class="uni-input-wrapper input-wrapper">
<input class="uni-input" :type="inputType" :value="inputClearValue" :placeholder="title" @input="input"
@confirm="confirm" @blur="blur" @focus="focus" />
<image class="input-wrapper_image" src="/static/icons/clear.png" v-if="showClearIcon" @click="clearIcon">
</image>
</view>
</template>
<style>
.input-wrapper {
border: 1px solid rgba(0, 0, 0, .08);
justify-content: center;
padding: 0;
margin: 0 20rpx;
background-color: #FFF;
}
.uni-input-wrapper {
padding: 8px 13px;
margin: 10rpx 0;
flex-direction: row;
flex-wrap: nowrap;
background-color: #ffffff;
}
.input-wrapper_image {
width: 22px;
height: 22px;
align-self: center;
margin-right: 10rpx;
}
.input-wrapper {
border: 1px solid rgba(0, 0, 0, .08);
flex-direction: row;
justify-content: center;
padding: 0;
margin: 0 20rpx;
}
.input-wrapper_image {
width: 22px;
height: 22px;
align-self: center;
margin-right: 10rpx;
}
</style>
pages/component/button/button.uvue
浏览文件 @ 3944651f
......@@ -37,18 +37,18 @@
</script>
<template>
<view class="main">
<button :disabled="disabled_boolean" :size="size_enum[size_enum_current].name"
:type="type_enum[type_enum_current].name" :plain="plain_boolean" @click="button_click"
@touchstart="button_touchstart" @touchmove="button_touchmove" @touchcancel="button_touchcancel"
@touchend="button_touchend" @tap="button_tap" @longpress="button_longpress" class="btn"
:style="default_style ? style : ''" :hover-class="default_style ? 'is-hover' : 'button-hover'">
{{ text }}
</button>
</view>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view class="main">
<button :disabled="disabled_boolean" :size="size_enum[size_enum_current].name"
:type="type_enum[type_enum_current].name" :plain="plain_boolean" @click="button_click"
@touchstart="button_touchstart" @touchmove="button_touchmove" @touchcancel="button_touchcancel"
@touchend="button_touchend" @tap="button_tap" @longpress="button_longpress" class="btn"
:style="default_style ? style : ''" :hover-class="default_style ? 'is-hover' : 'button-hover'">
{{ text }}
</button>
</view>
<view class="content">
<boolean-data :defaultValue="false" title="按钮是否镂空，背景色透明" @change="change_plain_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或