20 changed files with 749 additions and 566 deletions
@ -1,89 +1,93 @@ |
|||||||
export default { |
export default { |
||||||
props: { |
props: { |
||||||
// 是否展示modal
|
// 是否展示modal
|
||||||
show: { |
show: { |
||||||
type: Boolean, |
type: Boolean, |
||||||
default: uni.$u.props.modal.show |
default: uni.$u.props.modal.show |
||||||
}, |
}, |
||||||
// 标题
|
// 标题
|
||||||
title: { |
title: { |
||||||
type: [String], |
type: [String], |
||||||
default: uni.$u.props.modal.title |
default: uni.$u.props.modal.title |
||||||
}, |
}, |
||||||
// 弹窗内容
|
// 弹窗内容
|
||||||
content: { |
content: { |
||||||
type: String, |
type: String, |
||||||
default: uni.$u.props.modal.content |
default: uni.$u.props.modal.content |
||||||
}, |
}, |
||||||
// 确认文案
|
// 确认文案
|
||||||
confirmText: { |
confirmText: { |
||||||
type: String, |
type: String, |
||||||
default: uni.$u.props.modal.confirmText |
default: uni.$u.props.modal.confirmText |
||||||
}, |
}, |
||||||
// 取消文案
|
// 取消文案
|
||||||
cancelText: { |
cancelText: { |
||||||
type: String, |
type: String, |
||||||
default: uni.$u.props.modal.cancelText |
default: uni.$u.props.modal.cancelText |
||||||
}, |
}, |
||||||
// 是否显示确认按钮
|
// 是否显示确认按钮
|
||||||
showConfirmButton: { |
showConfirmButton: { |
||||||
type: Boolean, |
type: Boolean, |
||||||
default: uni.$u.props.modal.showConfirmButton |
default: uni.$u.props.modal.showConfirmButton |
||||||
}, |
}, |
||||||
// 是否显示取消按钮
|
// 是否显示取消按钮
|
||||||
showCancelButton: { |
showCancelButton: { |
||||||
type: Boolean, |
type: Boolean, |
||||||
default: uni.$u.props.modal.showCancelButton |
default: uni.$u.props.modal.showCancelButton |
||||||
}, |
}, |
||||||
// 确认按钮颜色
|
// 确认按钮颜色
|
||||||
confirmColor: { |
confirmColor: { |
||||||
type: String, |
type: String, |
||||||
default: uni.$u.props.modal.confirmColor |
default: uni.$u.props.modal.confirmColor |
||||||
}, |
}, |
||||||
// 取消文字颜色
|
// 取消文字颜色
|
||||||
cancelColor: { |
cancelColor: { |
||||||
type: String, |
type: String, |
||||||
default: uni.$u.props.modal.cancelColor |
default: uni.$u.props.modal.cancelColor |
||||||
}, |
}, |
||||||
// 对调确认和取消的位置
|
// 对调确认和取消的位置
|
||||||
buttonReverse: { |
buttonReverse: { |
||||||
type: Boolean, |
type: Boolean, |
||||||
default: uni.$u.props.modal.buttonReverse |
default: uni.$u.props.modal.buttonReverse |
||||||
}, |
}, |
||||||
// 是否开启缩放效果
|
// 是否开启缩放效果
|
||||||
zoom: { |
zoom: { |
||||||
type: Boolean, |
type: Boolean, |
||||||
default: uni.$u.props.modal.zoom |
default: uni.$u.props.modal.zoom |
||||||
}, |
}, |
||||||
// 是否异步关闭，只对确定按钮有效
|
// 是否异步关闭，只对确定按钮有效
|
||||||
asyncClose: { |
asyncClose: { |
||||||
type: Boolean, |
type: Boolean, |
||||||
default: uni.$u.props.modal.asyncClose |
default: uni.$u.props.modal.asyncClose |
||||||
}, |
}, |
||||||
// 是否允许点击遮罩关闭modal
|
// 是否允许点击遮罩关闭modal
|
||||||
closeOnClickOverlay: { |
closeOnClickOverlay: { |
||||||
type: Boolean, |
type: Boolean, |
||||||
default: uni.$u.props.modal.closeOnClickOverlay |
default: uni.$u.props.modal.closeOnClickOverlay |
||||||
}, |
}, |
||||||
// 给一个负的margin-top，往上偏移，避免和键盘重合的情况
|
// 给一个负的margin-top，往上偏移，避免和键盘重合的情况
|
||||||
negativeTop: { |
negativeTop: { |
||||||
type: [String, Number], |
type: [String, Number], |
||||||
default: uni.$u.props.modal.negativeTop |
default: uni.$u.props.modal.negativeTop |
||||||
}, |
}, |
||||||
// modal宽度，不支持百分比，可以数值，px，rpx单位
|
// modal宽度，不支持百分比，可以数值，px，rpx单位
|
||||||
width: { |
width: { |
||||||
type: [String, Number], |
type: [String, Number], |
||||||
default: uni.$u.props.modal.width |
default: uni.$u.props.modal.width |
||||||
}, |
}, |
||||||
// 确认按钮的样式，circle-圆形，square-方形，如设置，将不会显示取消按钮
|
// 确认按钮的样式，circle-圆形，square-方形，如设置，将不会显示取消按钮
|
||||||
confirmButtonShape: { |
confirmButtonShape: { |
||||||
type: String, |
type: String, |
||||||
default: uni.$u.props.modal.confirmButtonShape |
default: uni.$u.props.modal.confirmButtonShape |
||||||
}, |
}, |
||||||
|
borderRadius: { |
||||||
|
type: String, |
||||||
|
default: '6px' |
||||||
|
}, |
||||||
// 弹窗动画过度时间
|
// 弹窗动画过度时间
|
||||||
duration:{ |
duration: { |
||||||
type:String | Number, |
type: String | Number, |
||||||
default: uni.$u.props.modal.duration |
default: uni.$u.props.modal.duration |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
@ -1,228 +1,237 @@ |
|||||||
<template> |
<template> |
||||||
<u-popup |
<u-popup |
||||||
mode="center" |
mode="center" |
||||||
:zoom="zoom" |
:zoom="zoom" |
||||||
:show="show" |
:show="show" |
||||||
:customStyle="{ |
:customStyle="{ |
||||||
borderRadius: '6px', |
borderRadius: borderRadius, |
||||||
overflow: 'hidden', |
overflow: 'hidden', |
||||||
marginTop: `-${$u.addUnit(negativeTop)}` |
marginTop: `-${$u.addUnit(negativeTop)}` |
||||||
}" |
}" |
||||||
:closeOnClickOverlay="closeOnClickOverlay" |
:closeOnClickOverlay="closeOnClickOverlay" |
||||||
:safeAreaInsetBottom="false" |
:safeAreaInsetBottom="false" |
||||||
:duration="duration" |
:duration="duration" |
||||||
@click="clickHandler" |
@click="clickHandler" |
||||||
> |
> |
||||||
<view |
<view |
||||||
class="u-modal" |
class="u-modal" |
||||||
:style="{ |
:style="{ |
||||||
width: $u.addUnit(width), |
width: $u.addUnit(width) |
||||||
}" |
}" |
||||||
> |
> |
||||||
<text |
<text class="u-modal__title" v-if="title">{{ title }}</text> |
||||||
class="u-modal__title" |
<view |
||||||
v-if="title" |
class="u-modal__content" |
||||||
>{{ title }}</text> |
:style="{ |
||||||
<view |
paddingTop: `${title ? 12 : 25}px` |
||||||
class="u-modal__content" |
}" |
||||||
:style="{ |
> |
||||||
paddingTop: `${title ? 12 : 25}px` |
<slot> |
||||||
}" |
<text class="u-modal__content__text">{{ content }}</text> |
||||||
> |
</slot> |
||||||
<slot> |
</view> |
||||||
<text class="u-modal__content__text">{{ content }}</text> |
<view |
||||||
</slot> |
class="u-modal__button-group--confirm-button" |
||||||
</view> |
v-if="$slots.confirmButton" |
||||||
<view |
> |
||||||
class="u-modal__button-group--confirm-button" |
<slot name="confirmButton"></slot> |
||||||
v-if="$slots.confirmButton" |
</view> |
||||||
> |
<template v-else> |
||||||
<slot name="confirmButton"></slot> |
<u-line></u-line> |
||||||
</view> |
<view |
||||||
<template v-else> |
class="u-modal__button-group" |
||||||
<u-line></u-line> |
:style="{ |
||||||
<view |
flexDirection: buttonReverse ? 'row-reverse' : 'row' |
||||||
class="u-modal__button-group" |
}" |
||||||
:style="{ |
> |
||||||
flexDirection: buttonReverse ? 'row-reverse' : 'row' |
<view |
||||||
}" |
class="u-modal__button-group__wrapper u-modal__button-group__wrapper--cancel" |
||||||
> |
:hover-stay-time="150" |
||||||
<view |
hover-class="u-modal__button-group__wrapper--hover" |
||||||
class="u-modal__button-group__wrapper u-modal__button-group__wrapper--cancel" |
:class="[ |
||||||
:hover-stay-time="150" |
showCancelButton && |
||||||
hover-class="u-modal__button-group__wrapper--hover" |
!showConfirmButton && |
||||||
:class="[showCancelButton && !showConfirmButton && 'u-modal__button-group__wrapper--only-cancel']" |
'u-modal__button-group__wrapper--only-cancel' |
||||||
v-if="showCancelButton" |
]" |
||||||
@tap="cancelHandler" |
v-if="showCancelButton" |
||||||
> |
@tap="cancelHandler" |
||||||
<text |
> |
||||||
class="u-modal__button-group__wrapper__text" |
<text |
||||||
:style="{ |
class="u-modal__button-group__wrapper__text" |
||||||
color: cancelColor |
:style="{ |
||||||
}" |
color: cancelColor |
||||||
>{{ cancelText }}</text> |
}" |
||||||
</view> |
> |
||||||
<u-line |
{{ cancelText }} |
||||||
direction="column" |
</text> |
||||||
v-if="showConfirmButton && showCancelButton" |
</view> |
||||||
></u-line> |
<u-line |
||||||
<view |
direction="column" |
||||||
class="u-modal__button-group__wrapper u-modal__button-group__wrapper--confirm" |
v-if="showConfirmButton && showCancelButton" |
||||||
:hover-stay-time="150" |
></u-line> |
||||||
hover-class="u-modal__button-group__wrapper--hover" |
<view |
||||||
:class="[!showCancelButton && showConfirmButton && 'u-modal__button-group__wrapper--only-confirm']" |
class="u-modal__button-group__wrapper u-modal__button-group__wrapper--confirm" |
||||||
v-if="showConfirmButton" |
:hover-stay-time="150" |
||||||
@tap="confirmHandler" |
hover-class="u-modal__button-group__wrapper--hover" |
||||||
> |
:class="[ |
||||||
<u-loading-icon v-if="loading"></u-loading-icon> |
!showCancelButton && |
||||||
<text |
showConfirmButton && |
||||||
v-else |
'u-modal__button-group__wrapper--only-confirm' |
||||||
class="u-modal__button-group__wrapper__text" |
]" |
||||||
:style="{ |
v-if="showConfirmButton" |
||||||
color: confirmColor |
@tap="confirmHandler" |
||||||
}" |
> |
||||||
>{{ confirmText }}</text> |
<u-loading-icon v-if="loading"></u-loading-icon> |
||||||
</view> |
<text |
||||||
</view> |
v-else |
||||||
</template> |
class="u-modal__button-group__wrapper__text" |
||||||
</view> |
:style="{ |
||||||
</u-popup> |
color: confirmColor |
||||||
|
}" |
||||||
|
> |
||||||
|
{{ confirmText }} |
||||||
|
</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
</view> |
||||||
|
</u-popup> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
import props from './props.js'; |
import props from './props.js' |
||||||
/** |
/** |
||||||
* Modal 模态框 |
* Modal 模态框 |
||||||
* @description 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作。 |
* @description 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作。 |
||||||
* @tutorial https://www.uviewui.com/components/modul.html |
* @tutorial https://www.uviewui.com/components/modul.html |
||||||
* @property {Boolean} show 是否显示模态框，请赋值给show （默认 false ） |
* @property {Boolean} show 是否显示模态框，请赋值给show （默认 false ） |
||||||
* @property {String} title 标题内容 |
* @property {String} title 标题内容 |
||||||
* @property {String} content 模态框内容，如传入slot内容，则此参数无效 |
* @property {String} content 模态框内容，如传入slot内容，则此参数无效 |
||||||
* @property {String} confirmText 确认按钮的文字 （默认 '确认' ） |
* @property {String} confirmText 确认按钮的文字 （默认 '确认' ） |
||||||
* @property {String} cancelText 取消按钮的文字 （默认 '取消' ） |
* @property {String} cancelText 取消按钮的文字 （默认 '取消' ） |
||||||
* @property {Boolean} showConfirmButton 是否显示确认按钮 （默认 true ） |
* @property {Boolean} showConfirmButton 是否显示确认按钮 （默认 true ） |
||||||
* @property {Boolean} showCancelButton 是否显示取消按钮 （默认 false ） |
* @property {Boolean} showCancelButton 是否显示取消按钮 （默认 false ） |
||||||
* @property {String} confirmColor 确认按钮的颜色 （默认 '#2979ff' ） |
* @property {String} confirmColor 确认按钮的颜色 （默认 '#2979ff' ） |
||||||
* @property {String} cancelColor 取消按钮的颜色 （默认 '#606266' ） |
* @property {String} cancelColor 取消按钮的颜色 （默认 '#606266' ） |
||||||
* @property {Number} duration 弹窗动画过度时间 （默认 400 ） |
* @property {Number} duration 弹窗动画过度时间 （默认 400 ） |
||||||
* @property {Boolean} buttonReverse 对调确认和取消的位置 （默认 false ） |
* @property {Boolean} buttonReverse 对调确认和取消的位置 （默认 false ） |
||||||
* @property {Boolean} zoom 是否开启缩放模式 （默认 true ） |
* @property {Boolean} zoom 是否开启缩放模式 （默认 true ） |
||||||
* @property {Boolean} asyncClose 是否异步关闭，只对确定按钮有效，见上方说明 （默认 false ） |
* @property {Boolean} asyncClose 是否异步关闭，只对确定按钮有效，见上方说明 （默认 false ） |
||||||
* @property {Boolean} closeOnClickOverlay 是否允许点击遮罩关闭Modal （默认 false ） |
* @property {Boolean} closeOnClickOverlay 是否允许点击遮罩关闭Modal （默认 false ） |
||||||
* @property {String | Number} negativeTop 往上偏移的值，给一个负的margin-top，往上偏移，避免和键盘重合的情况，单位任意，数值则默认为px单位 （默认 0 ） |
* @property {String | Number} negativeTop 往上偏移的值，给一个负的margin-top，往上偏移，避免和键盘重合的情况，单位任意，数值则默认为px单位 （默认 0 ） |
||||||
* @property {String | Number} width modal宽度，不支持百分比，可以数值，px，rpx单位 （默认 '650rpx' ） |
* @property {String | Number} width modal宽度，不支持百分比，可以数值，px，rpx单位 （默认 '650rpx' ） |
||||||
* @property {String} confirmButtonShape 确认按钮的样式,如设置，将不会显示取消按钮 |
* @property {String} confirmButtonShape 确认按钮的样式,如设置，将不会显示取消按钮 |
||||||
* @event {Function} confirm 点击确认按钮时触发 |
* @event {Function} confirm 点击确认按钮时触发 |
||||||
* @event {Function} cancel 点击取消按钮时触发 |
* @event {Function} cancel 点击取消按钮时触发 |
||||||
* @event {Function} close 点击遮罩关闭出发，closeOnClickOverlay为true有效 |
* @event {Function} close 点击遮罩关闭出发，closeOnClickOverlay为true有效 |
||||||
* @example <u-modal :show="true" title="title" content="content"></u-modal> |
* @example <u-modal :show="true" title="title" content="content"></u-modal> |
||||||
*/ |
*/ |
||||||
export default { |
export default { |
||||||
name: 'u-modal', |
name: 'u-modal', |
||||||
mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
||||||
data() { |
data() { |
||||||
return { |
return { |
||||||
loading: false |
loading: false |
||||||
} |
} |
||||||
}, |
}, |
||||||
watch: { |
watch: { |
||||||
show(n) { |
show(n) { |
||||||
// 为了避免第一次打开modal，又使用了异步关闭的loading |
// 为了避免第一次打开modal，又使用了异步关闭的loading |
||||||
// 第二次打开modal时，loading依然存在的情况 |
// 第二次打开modal时，loading依然存在的情况 |
||||||
if (n && this.loading) this.loading = false |
if (n && this.loading) this.loading = false |
||||||
} |
} |
||||||
}, |
}, |
||||||
methods: { |
methods: { |
||||||
// 点击确定按钮 |
// 点击确定按钮 |
||||||
confirmHandler() { |
confirmHandler() { |
||||||
// 如果配置了异步关闭，将按钮值为loading状态 |
// 如果配置了异步关闭，将按钮值为loading状态 |
||||||
if (this.asyncClose) { |
if (this.asyncClose) { |
||||||
this.loading = true; |
this.loading = true |
||||||
} |
} |
||||||
this.$emit('confirm') |
this.$emit('confirm') |
||||||
}, |
}, |
||||||
// 点击取消按钮 |
// 点击取消按钮 |
||||||
cancelHandler() { |
cancelHandler() { |
||||||
this.$emit('cancel') |
this.$emit('cancel') |
||||||
}, |
}, |
||||||
// 点击遮罩 |
// 点击遮罩 |
||||||
// 从原理上来说，modal的遮罩点击，并不是真的点击到了遮罩 |
// 从原理上来说，modal的遮罩点击，并不是真的点击到了遮罩 |
||||||
// 因为modal依赖于popup的中部弹窗类型，中部弹窗比较特殊，虽然有遮罩，但是为了让弹窗内容能flex居中 |
// 因为modal依赖于popup的中部弹窗类型，中部弹窗比较特殊，虽然有遮罩，但是为了让弹窗内容能flex居中 |
||||||
// 多了一个透明的遮罩，此透明的遮罩会覆盖在灰色的遮罩上，所以实际上是点击不到灰色遮罩的，popup内部在 |
// 多了一个透明的遮罩，此透明的遮罩会覆盖在灰色的遮罩上，所以实际上是点击不到灰色遮罩的，popup内部在 |
||||||
// 透明遮罩的子元素做了.stop处理，所以点击内容区，也不会导致误触发 |
// 透明遮罩的子元素做了.stop处理，所以点击内容区，也不会导致误触发 |
||||||
clickHandler() { |
clickHandler() { |
||||||
if (this.closeOnClickOverlay) { |
if (this.closeOnClickOverlay) { |
||||||
this.$emit('close') |
this.$emit('close') |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||||
@import "../../libs/css/components.scss"; |
@import '../../libs/css/components.scss'; |
||||||
$u-modal-border-radius: 6px; |
$u-modal-border-radius: 6px; |
||||||
|
|
||||||
.u-modal { |
.u-modal { |
||||||
width: 650rpx; |
width: 650rpx; |
||||||
border-radius: $u-modal-border-radius; |
border-radius: $u-modal-border-radius; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
|
|
||||||
&__title { |
&__title { |
||||||
font-size: 16px; |
font-size: 16px; |
||||||
font-weight: bold; |
font-weight: bold; |
||||||
color: $u-content-color; |
color: $u-content-color; |
||||||
text-align: center; |
text-align: center; |
||||||
padding-top: 25px; |
padding-top: 25px; |
||||||
} |
} |
||||||
|
|
||||||
&__content { |
&__content { |
||||||
padding: 12px 25px 25px 25px; |
padding: 12px 25px 25px 25px; |
||||||
@include flex; |
@include flex; |
||||||
justify-content: center; |
justify-content: center; |
||||||
|
|
||||||
&__text { |
&__text { |
||||||
font-size: 15px; |
font-size: 15px; |
||||||
color: $u-content-color; |
color: $u-content-color; |
||||||
flex: 1; |
flex: 1; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
&__button-group { |
&__button-group { |
||||||
@include flex; |
@include flex; |
||||||
|
|
||||||
&--confirm-button { |
&--confirm-button { |
||||||
flex-direction: column; |
flex-direction: column; |
||||||
padding: 0px 25px 15px 25px; |
padding: 0px 25px 15px 25px; |
||||||
} |
} |
||||||
|
|
||||||
&__wrapper { |
&__wrapper { |
||||||
flex: 1; |
flex: 1; |
||||||
@include flex; |
@include flex; |
||||||
justify-content: center; |
justify-content: center; |
||||||
align-items: center; |
align-items: center; |
||||||
height: 48px; |
height: 48px; |
||||||
|
|
||||||
&--confirm, |
&--confirm, |
||||||
&--only-cancel { |
&--only-cancel { |
||||||
border-bottom-right-radius: $u-modal-border-radius; |
border-bottom-right-radius: $u-modal-border-radius; |
||||||
} |
} |
||||||
|
|
||||||
&--cancel, |
&--cancel, |
||||||
&--only-confirm { |
&--only-confirm { |
||||||
border-bottom-left-radius: $u-modal-border-radius; |
border-bottom-left-radius: $u-modal-border-radius; |
||||||
} |
} |
||||||
|
|
||||||
&--hover { |
&--hover { |
||||||
background-color: $u-bg-color; |
background-color: $u-bg-color; |
||||||
} |
} |
||||||
|
|
||||||
&__text { |
&__text { |
||||||
color: $u-content-color; |
color: $u-content-color; |
||||||
font-size: 16px; |
font-size: 16px; |
||||||
text-align: center; |
text-align: center; |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
</style> |
</style> |
||||||
|
|||||||
@ -1,97 +1,105 @@ |
|||||||
import { VantComponent } from '../common/component'; |
import { |
||||||
import { canIUseModel } from '../common/version'; |
VantComponent |
||||||
|
} from '../common/component'; |
||||||
|
import { |
||||||
|
canIUseModel |
||||||
|
} from '../common/version'; |
||||||
VantComponent({ |
VantComponent({ |
||||||
field: true, |
field: true, |
||||||
classes: ['field-class', 'input-class', 'cancel-class'], |
classes: ['field-class', 'input-class', 'cancel-class'], |
||||||
props: { |
props: { |
||||||
value: { |
value: { |
||||||
type: String, |
type: String, |
||||||
value: '', |
value: '', |
||||||
}, |
}, |
||||||
label: String, |
label: String, |
||||||
focus: Boolean, |
focus: Boolean, |
||||||
error: Boolean, |
error: Boolean, |
||||||
disabled: Boolean, |
disabled: Boolean, |
||||||
readonly: Boolean, |
readonly: Boolean, |
||||||
inputAlign: String, |
inputAlign: String, |
||||||
showAction: Boolean, |
showAction: Boolean, |
||||||
useActionSlot: Boolean, |
useActionSlot: Boolean, |
||||||
useLeftIconSlot: Boolean, |
useLeftIconSlot: Boolean, |
||||||
useRightIconSlot: Boolean, |
useRightIconSlot: Boolean, |
||||||
leftIcon: { |
leftIcon: { |
||||||
type: String, |
type: String, |
||||||
value: 'search', |
value: 'search', |
||||||
}, |
}, |
||||||
rightIcon: String, |
rightIcon: String, |
||||||
placeholder: String, |
placeholder: String, |
||||||
placeholderStyle: String, |
placeholderStyle: String, |
||||||
actionText: { |
actionText: { |
||||||
type: String, |
type: String, |
||||||
value: '取消', |
value: '取消', |
||||||
}, |
}, |
||||||
background: { |
background: { |
||||||
type: String, |
type: String, |
||||||
value: '#ffffff', |
value: '#ffffff', |
||||||
}, |
}, |
||||||
maxlength: { |
maxlength: { |
||||||
type: Number, |
type: Number, |
||||||
value: -1, |
value: -1, |
||||||
}, |
}, |
||||||
shape: { |
shape: { |
||||||
type: String, |
type: String, |
||||||
value: 'square', |
value: 'square', |
||||||
}, |
}, |
||||||
clearable: { |
clearable: { |
||||||
type: Boolean, |
type: Boolean, |
||||||
value: true, |
value: true, |
||||||
}, |
}, |
||||||
clearTrigger: { |
clearTrigger: { |
||||||
type: String, |
type: String, |
||||||
value: 'focus', |
value: 'focus', |
||||||
}, |
}, |
||||||
clearIcon: { |
clearIcon: { |
||||||
type: String, |
type: String, |
||||||
value: 'clear', |
value: 'clear', |
||||||
}, |
}, |
||||||
cursorSpacing: { |
cursorSpacing: { |
||||||
type: Number, |
type: Number, |
||||||
value: 0, |
value: 0, |
||||||
}, |
}, |
||||||
}, |
}, |
||||||
methods: { |
methods: { |
||||||
onChange(event) { |
onChange(event) { |
||||||
if (canIUseModel()) { |
if (canIUseModel()) { |
||||||
this.setData({ value: event.detail }); |
this.setData({ |
||||||
} |
value: event.detail |
||||||
this.$emit('change', event.detail); |
}); |
||||||
}, |
} |
||||||
onCancel() { |
this.$emit('change', event.detail); |
||||||
/** |
}, |
||||||
* 修复修改输入框值时，输入框失焦和赋值同时触发，赋值失效 |
onCancel() { |
||||||
* https://github.com/youzan/vant-weapp/issues/1768
|
/** |
||||||
*/ |
* 修复修改输入框值时，输入框失焦和赋值同时触发，赋值失效 |
||||||
setTimeout(() => { |
* https://github.com/youzan/vant-weapp/issues/1768
|
||||||
if (canIUseModel()) { |
*/ |
||||||
this.setData({ value: '' }); |
setTimeout(() => { |
||||||
} |
if (canIUseModel()) { |
||||||
this.$emit('cancel'); |
this.setData({ |
||||||
this.$emit('change', ''); |
value: '' |
||||||
}, 200); |
}); |
||||||
}, |
} |
||||||
onSearch(event) { |
this.$emit('cancel'); |
||||||
this.$emit('search', event.detail); |
this.$emit('change', ''); |
||||||
}, |
}, 200); |
||||||
onFocus(event) { |
}, |
||||||
this.$emit('focus', event.detail); |
onSearch(event) { |
||||||
}, |
this.$emit('search', event.detail); |
||||||
onBlur(event) { |
}, |
||||||
this.$emit('blur', event.detail); |
onFocus(event) { |
||||||
}, |
this.$emit('focus', event.detail); |
||||||
onClear(event) { |
}, |
||||||
this.$emit('clear', event.detail); |
onBlur(event) { |
||||||
}, |
this.$emit('blur', event.detail); |
||||||
onClickInput(event) { |
}, |
||||||
this.$emit('click-input', event.detail); |
onClear(event) { |
||||||
}, |
this.$emit('clear', event.detail); |
||||||
}, |
}, |
||||||
|
onClickInput(event) { |
||||||
|
this.$emit('click-input', event.detail); |
||||||
|
}, |
||||||
|
}, |
||||||
}); |
}); |
||||||
@ -1 +1,53 @@ |
|||||||
@import '../common/index.wxss';.van-search{align-items:center;box-sizing:border-box;display:flex;padding:var(--search-padding,10px 12px)}.van-search__content{background-color:var(--search-background-color,#f7f8fa);border-radius:2px;display:flex;flex:1;padding-left:var(--padding-sm,12px)}.van-search__content--round{border-radius:999px}.van-search__label{color:var(--search-label-color,#323233);font-size:var(--search-label-font-size,14px);line-height:var(--search-input-height,34px);padding:var(--search-label-padding,0 5px)}.van-search__field{flex:1}.van-search__field__left-icon{color:var(--search-left-icon-color,#969799)}.van-search--withaction{padding-right:0}.van-search__action{color:var(--search-action-text-color,#323233);font-size:var(--search-action-font-size,14px);line-height:var(--search-input-height,34px)}.van-search__action--hover{background-color:#f2f3f5}.van-search__action-button{padding:var(--search-action-padding,0 8px)} |
@import '../common/index.wxss'; |
||||||
|
|
||||||
|
.van-search { |
||||||
|
align-items: center; |
||||||
|
box-sizing: border-box; |
||||||
|
display: flex; |
||||||
|
padding: var(--search-padding, 10px 12px) |
||||||
|
} |
||||||
|
|
||||||
|
.van-search__content { |
||||||
|
background-color: var(--search-background-color, #f7f8fa); |
||||||
|
border-radius: 2px; |
||||||
|
display: flex; |
||||||
|
flex: 1; |
||||||
|
padding-left: var(--padding-sm, 12px) |
||||||
|
} |
||||||
|
|
||||||
|
.van-search__content--round { |
||||||
|
border-radius: 999px |
||||||
|
} |
||||||
|
|
||||||
|
.van-search__label { |
||||||
|
color: var(--search-label-color, #323233); |
||||||
|
font-size: var(--search-label-font-size, 14px); |
||||||
|
line-height: var(--search-input-height, 34px); |
||||||
|
padding: var(--search-label-padding, 0 5px) |
||||||
|
} |
||||||
|
|
||||||
|
.van-search__field { |
||||||
|
flex: 1 |
||||||
|
} |
||||||
|
|
||||||
|
.van-search__field__left-icon { |
||||||
|
color: var(--search-left-icon-color, #969799) |
||||||
|
} |
||||||
|
|
||||||
|
.van-search--withaction { |
||||||
|
padding-right: 0 |
||||||
|
} |
||||||
|
|
||||||
|
.van-search__action { |
||||||
|
color: var(--search-action-text-color, #323233); |
||||||
|
font-size: var(--search-action-font-size, 14px); |
||||||
|
line-height: var(--search-input-height, 34px) |
||||||
|
} |
||||||
|
|
||||||
|
.van-search__action--hover { |
||||||
|
background-color: #f2f3f5 |
||||||
|
} |
||||||
|
|
||||||
|
.van-search__action-button { |
||||||
|
padding: var(--search-action-padding, 0 8px) |
||||||
|
} |
||||||
Loading…
Reference in new issue