提交 f6ceab9b authored 作者: 杨斌基's avatar 杨斌基

fix(uview-ui): 在 macOS 上 easycom 不识别出这些组件,导致 Vue 报错组件未注册

上级 6fe0ee09
MIT License
Copyright (c) 2020 www.uviewui.com
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
MIT License
Copyright (c) 2020 www.uviewui.com
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
\ No newline at end of file
<template>
<uvForm
ref="uForm"
:model="model"
:rules="rules"
:errorType="errorType"
:borderBottom="borderBottom"
:labelPosition="labelPosition"
:labelWidth="labelWidth"
:labelAlign="labelAlign"
:labelStyle="labelStyle"
:customStyle="customStyle"
>
<slot />
</uvForm>
</template>
<script>
/**
* 此组件存在的理由是,在nvue下,u-form被uni-app官方占用了,u-form在nvue中相当于form组件
* 所以在nvue下,取名为u--form,内部其实还是u-form.vue,只不过做一层中转
*/
import uvForm from '../u-form/u-form.vue';
<template>
<uvForm
ref="uForm"
:model="model"
:rules="rules"
:errorType="errorType"
:borderBottom="borderBottom"
:labelPosition="labelPosition"
:labelWidth="labelWidth"
:labelAlign="labelAlign"
:labelStyle="labelStyle"
:customStyle="customStyle"
>
<slot />
</uvForm>
</template>
<script>
/**
* 此组件存在的理由是,在nvue下,u-form被uni-app官方占用了,u-form在nvue中相当于form组件
* 所以在nvue下,取名为u--form,内部其实还是u-form.vue,只不过做一层中转
*/
import uvForm from '../u-form/u-form.vue';
import props from '../u-form/props.js'
export default {
// #ifdef MP-WEIXIN
name: 'u-form',
// #endif
// #ifndef MP-WEIXIN
name: 'u--form',
// #endif
mixins: [uni.$u.mpMixin, props, uni.$u.mixin],
components: {
uvForm
},
created() {
this.children = []
},
export default {
// #ifdef MP-WEIXIN
name: 'u-form',
// #endif
// #ifndef MP-WEIXIN
name: 'u--form',
// #endif
mixins: [uni.$u.mpMixin, props, uni.$u.mixin],
components: {
uvForm
},
created() {
this.children = []
},
methods: {
// 手动设置校验的规则,如果规则中有函数的话,微信小程序中会过滤掉,所以只能手动调用设置规则
setRules(rules) {
this.$refs.uForm.setRules(rules)
},
validate() {
/**
* 在微信小程序中,通过this.$parent拿到的父组件是u--form,而不是其内嵌的u-form
* 导致在u-form组件中,拿不到对应的children数组,从而校验无效,所以这里每次调用u-form组件中的
* 对应方法的时候,在小程序中都先将u--form的children赋值给u-form中的children
*/
// #ifdef MP-WEIXIN
this.setMpData()
// #endif
return this.$refs.uForm.validate()
},
validateField(value, callback) {
// #ifdef MP-WEIXIN
this.setMpData()
// #endif
return this.$refs.uForm.validateField(value, callback)
},
resetFields() {
// #ifdef MP-WEIXIN
this.setMpData()
// #endif
return this.$refs.uForm.resetFields()
},
clearValidate(props) {
// #ifdef MP-WEIXIN
this.setMpData()
// #endif
return this.$refs.uForm.clearValidate(props)
},
setMpData() {
this.$refs.uForm.children = this.children
}
},
}
</script>
},
validate() {
/**
* 在微信小程序中,通过this.$parent拿到的父组件是u--form,而不是其内嵌的u-form
* 导致在u-form组件中,拿不到对应的children数组,从而校验无效,所以这里每次调用u-form组件中的
* 对应方法的时候,在小程序中都先将u--form的children赋值给u-form中的children
*/
// #ifdef MP-WEIXIN
this.setMpData()
// #endif
return this.$refs.uForm.validate()
},
validateField(value, callback) {
// #ifdef MP-WEIXIN
this.setMpData()
// #endif
return this.$refs.uForm.validateField(value, callback)
},
resetFields() {
// #ifdef MP-WEIXIN
this.setMpData()
// #endif
return this.$refs.uForm.resetFields()
},
clearValidate(props) {
// #ifdef MP-WEIXIN
this.setMpData()
// #endif
return this.$refs.uForm.clearValidate(props)
},
setMpData() {
this.$refs.uForm.children = this.children
}
},
}
</script>
<template>
<uvImage
:src="src"
:mode="mode"
:width="width"
:height="height"
:shape="shape"
:radius="radius"
:lazyLoad="lazyLoad"
:showMenuByLongpress="showMenuByLongpress"
:loadingIcon="loadingIcon"
:errorIcon="errorIcon"
:showLoading="showLoading"
:showError="showError"
:fade="fade"
:webp="webp"
:duration="duration"
:bgColor="bgColor"
:customStyle="customStyle"
@click="$emit('click')"
@error="$emit('error')"
@load="$emit('load')"
<template>
<uvImage
:src="src"
:mode="mode"
:width="width"
:height="height"
:shape="shape"
:radius="radius"
:lazyLoad="lazyLoad"
:showMenuByLongpress="showMenuByLongpress"
:loadingIcon="loadingIcon"
:errorIcon="errorIcon"
:showLoading="showLoading"
:showError="showError"
:fade="fade"
:webp="webp"
:duration="duration"
:bgColor="bgColor"
:customStyle="customStyle"
@click="$emit('click')"
@error="$emit('error')"
@load="$emit('load')"
>
<template v-slot:loading>
<slot name="loading"></slot>
......@@ -27,21 +27,21 @@
<template v-slot:error>
<slot name="error"></slot>
</template>
</uvImage>
</template>
<script>
/**
* 此组件存在的理由是,在nvue下,u-image被uni-app官方占用了,u-image在nvue中相当于image组件
* 所以在nvue下,取名为u--image,内部其实还是u-iamge.vue,只不过做一层中转
*/
import uvImage from '../u-image/u-image.vue';
import props from '../u-image/props.js';
export default {
name: 'u--image',
mixins: [uni.$u.mpMixin, props, uni.$u.mixin],
components: {
uvImage
},
}
</uvImage>
</template>
<script>
/**
* 此组件存在的理由是,在nvue下,u-image被uni-app官方占用了,u-image在nvue中相当于image组件
* 所以在nvue下,取名为u--image,内部其实还是u-iamge.vue,只不过做一层中转
*/
import uvImage from '../u-image/u-image.vue';
import props from '../u-image/props.js';
export default {
name: 'u--image',
mixins: [uni.$u.mpMixin, props, uni.$u.mixin],
components: {
uvImage
},
}
</script>
\ No newline at end of file
<template>
<uvInput
:value="value"
:type="type"
:fixed="fixed"
:disabled="disabled"
:disabledColor="disabledColor"
:clearable="clearable"
:password="password"
:maxlength="maxlength"
:placeholder="placeholder"
:placeholderClass="placeholderClass"
:placeholderStyle="placeholderStyle"
:showWordLimit="showWordLimit"
:confirmType="confirmType"
:confirmHold="confirmHold"
:holdKeyboard="holdKeyboard"
:focus="focus"
:autoBlur="autoBlur"
:disableDefaultPadding="disableDefaultPadding"
:cursor="cursor"
:cursorSpacing="cursorSpacing"
:selectionStart="selectionStart"
:selectionEnd="selectionEnd"
:adjustPosition="adjustPosition"
:inputAlign="inputAlign"
:fontSize="fontSize"
:color="color"
:prefixIcon="prefixIcon"
:suffixIcon="suffixIcon"
:suffixIconStyle="suffixIconStyle"
:prefixIconStyle="prefixIconStyle"
:border="border"
:readonly="readonly"
:shape="shape"
:customStyle="customStyle"
:formatter="formatter"
:ignoreCompositionEvent="ignoreCompositionEvent"
@focus="$emit('focus')"
@blur="e => $emit('blur', e)"
@keyboardheightchange="$emit('keyboardheightchange')"
@change="e => $emit('change', e)"
@input="e => $emit('input', e)"
@confirm="e => $emit('confirm', e)"
@clear="$emit('clear')"
@click="$emit('click')"
>
<!-- #ifdef MP -->
<slot name="prefix"></slot>
<slot name="suffix"></slot>
<!-- #endif -->
<!-- #ifndef MP -->
<slot name="prefix" slot="prefix"></slot>
<slot name="suffix" slot="suffix"></slot>
<!-- #endif -->
</uvInput>
</template>
<script>
/**
* 此组件存在的理由是,在nvue下,u-input被uni-app官方占用了,u-input在nvue中相当于input组件
* 所以在nvue下,取名为u--input,内部其实还是u-input.vue,只不过做一层中转
*/
import uvInput from '../u-input/u-input.vue';
import props from '../u-input/props.js'
export default {
name: 'u--input',
mixins: [uni.$u.mpMixin, props, uni.$u.mixin],
components: {
uvInput
},
}
<template>
<uvInput
:value="value"
:type="type"
:fixed="fixed"
:disabled="disabled"
:disabledColor="disabledColor"
:clearable="clearable"
:password="password"
:maxlength="maxlength"
:placeholder="placeholder"
:placeholderClass="placeholderClass"
:placeholderStyle="placeholderStyle"
:showWordLimit="showWordLimit"
:confirmType="confirmType"
:confirmHold="confirmHold"
:holdKeyboard="holdKeyboard"
:focus="focus"
:autoBlur="autoBlur"
:disableDefaultPadding="disableDefaultPadding"
:cursor="cursor"
:cursorSpacing="cursorSpacing"
:selectionStart="selectionStart"
:selectionEnd="selectionEnd"
:adjustPosition="adjustPosition"
:inputAlign="inputAlign"
:fontSize="fontSize"
:color="color"
:prefixIcon="prefixIcon"
:suffixIcon="suffixIcon"
:suffixIconStyle="suffixIconStyle"
:prefixIconStyle="prefixIconStyle"
:border="border"
:readonly="readonly"
:shape="shape"
:customStyle="customStyle"
:formatter="formatter"
:ignoreCompositionEvent="ignoreCompositionEvent"
@focus="$emit('focus')"
@blur="e => $emit('blur', e)"
@keyboardheightchange="$emit('keyboardheightchange')"
@change="e => $emit('change', e)"
@input="e => $emit('input', e)"
@confirm="e => $emit('confirm', e)"
@clear="$emit('clear')"
@click="$emit('click')"
>
<!-- #ifdef MP -->
<slot name="prefix"></slot>
<slot name="suffix"></slot>
<!-- #endif -->
<!-- #ifndef MP -->
<slot name="prefix" slot="prefix"></slot>
<slot name="suffix" slot="suffix"></slot>
<!-- #endif -->
</uvInput>
</template>
<script>
/**
* 此组件存在的理由是,在nvue下,u-input被uni-app官方占用了,u-input在nvue中相当于input组件
* 所以在nvue下,取名为u--input,内部其实还是u-input.vue,只不过做一层中转
*/
import uvInput from '../u-input/u-input.vue';
import props from '../u-input/props.js'
export default {
name: 'u--input',
mixins: [uni.$u.mpMixin, props, uni.$u.mixin],
components: {
uvInput
},
}
</script>
\ No newline at end of file
<template>
<uvText
:type="type"
:show="show"
:text="text"
:prefixIcon="prefixIcon"
:suffixIcon="suffixIcon"
:mode="mode"
:href="href"
:format="format"
:call="call"
:openType="openType"
:bold="bold"
:block="block"
:lines="lines"
:color="color"
:decoration="decoration"
:size="size"
:iconStyle="iconStyle"
:margin="margin"
:lineHeight="lineHeight"
:align="align"
:wordWrap="wordWrap"
:customStyle="customStyle"
@click="$emit('click')"
></uvText>
</template>
<script>
/**
* 此组件存在的理由是,在nvue下,u-text被uni-app官方占用了,u-text在nvue中相当于input组件
* 所以在nvue下,取名为u--input,内部其实还是u-text.vue,只不过做一层中转
* 不使用v-bind="$attrs",而是分开独立写传参,是因为微信小程序不支持此写法
*/
import uvText from "../u-text/u-text.vue";
import props from "../u-text/props.js";
export default {
name: "u--text",
mixins: [uni.$u.mpMixin, props, uni.$u.mixin],
components: {
uvText,
},
};
</script>
<template>
<uvText
:type="type"
:show="show"
:text="text"
:prefixIcon="prefixIcon"
:suffixIcon="suffixIcon"
:mode="mode"
:href="href"
:format="format"
:call="call"
:openType="openType"
:bold="bold"
:block="block"
:lines="lines"
:color="color"
:decoration="decoration"
:size="size"
:iconStyle="iconStyle"
:margin="margin"
:lineHeight="lineHeight"
:align="align"
:wordWrap="wordWrap"
:customStyle="customStyle"
@click="$emit('click')"
></uvText>
</template>
<script>
/**
* 此组件存在的理由是,在nvue下,u-text被uni-app官方占用了,u-text在nvue中相当于input组件
* 所以在nvue下,取名为u--input,内部其实还是u-text.vue,只不过做一层中转
* 不使用v-bind="$attrs",而是分开独立写传参,是因为微信小程序不支持此写法
*/
import uvText from "../u-text/u-text.vue";
import props from "../u-text/props.js";
export default {
name: "u--text",
mixins: [uni.$u.mpMixin, props, uni.$u.mixin],
components: {
uvText,
},
};
</script>
<template>
<uvTextarea
:value="value"
:placeholder="placeholder"
:height="height"
:confirmType="confirmType"
:disabled="disabled"
:count="count"
:focus="focus"
:autoHeight="autoHeight"
:fixed="fixed"
:cursorSpacing="cursorSpacing"
:cursor="cursor"
:showConfirmBar="showConfirmBar"
:selectionStart="selectionStart"
:selectionEnd="selectionEnd"
:adjustPosition="adjustPosition"
:disableDefaultPadding="disableDefaultPadding"
:holdKeyboard="holdKeyboard"
:maxlength="maxlength"
:border="border"
:customStyle="customStyle"
:formatter="formatter"
:ignoreCompositionEvent="ignoreCompositionEvent"
@focus="e => $emit('focus')"
@blur="e => $emit('blur')"
@linechange="e => $emit('linechange', e)"
@confirm="e => $emit('confirm')"
@input="e => $emit('input', e)"
@keyboardheightchange="e => $emit('keyboardheightchange')"
></uvTextarea>
</template>
<script>
/**
* 此组件存在的理由是,在nvue下,u--textarea被uni-app官方占用了,u-textarea在nvue中相当于textarea组件
* 所以在nvue下,取名为u--textarea,内部其实还是u-textarea.vue,只不过做一层中转
*/
import uvTextarea from '../u-textarea/u-textarea.vue';
import props from '../u-textarea/props.js'
export default {
name: 'u--textarea',
mixins: [uni.$u.mpMixin, props, uni.$u.mixin],
components: {
uvTextarea
},
}
</script>
<template>
<uvTextarea
:value="value"
:placeholder="placeholder"
:height="height"
:confirmType="confirmType"
:disabled="disabled"
:count="count"
:focus="focus"
:autoHeight="autoHeight"
:fixed="fixed"
:cursorSpacing="cursorSpacing"
:cursor="cursor"
:showConfirmBar="showConfirmBar"
:selectionStart="selectionStart"
:selectionEnd="selectionEnd"
:adjustPosition="adjustPosition"
:disableDefaultPadding="disableDefaultPadding"
:holdKeyboard="holdKeyboard"
:maxlength="maxlength"
:border="border"
:customStyle="customStyle"
:formatter="formatter"
:ignoreCompositionEvent="ignoreCompositionEvent"
@focus="e => $emit('focus')"
@blur="e => $emit('blur')"
@linechange="e => $emit('linechange', e)"
@confirm="e => $emit('confirm')"
@input="e => $emit('input', e)"
@keyboardheightchange="e => $emit('keyboardheightchange')"
></uvTextarea>
</template>
<script>
/**
* 此组件存在的理由是,在nvue下,u--textarea被uni-app官方占用了,u-textarea在nvue中相当于textarea组件
* 所以在nvue下,取名为u--textarea,内部其实还是u-textarea.vue,只不过做一层中转
*/
import uvTextarea from '../u-textarea/u-textarea.vue';
import props from '../u-textarea/props.js'
export default {
name: 'u--textarea',
mixins: [uni.$u.mpMixin, props, uni.$u.mixin],
components: {
uvTextarea
},
}
</script>
export default {
props: {
// 显示文字
title: {
type: String,
default: uni.$u.props.alert.title
},
// 主题,success/warning/info/error
type: {
type: String,
default: uni.$u.props.alert.type
},
// 辅助性文字
description: {
type: String,
default: uni.$u.props.alert.description
},
// 是否可关闭
closable: {
type: Boolean,
default: uni.$u.props.alert.closable
},
// 是否显示图标
showIcon: {
type: Boolean,
default: uni.$u.props.alert.showIcon
},
// 浅或深色调,light-浅色,dark-深色
effect: {
type: String,
default: uni.$u.props.alert.effect
},
// 文字是否居中
center: {
type: Boolean,
default: uni.$u.props.alert.center
},
// 字体大小
fontSize: {
type: [String, Number],
default: uni.$u.props.alert.fontSize
}
}
}
export default {
props: {
// 显示文字
title: {
type: String,
default: uni.$u.props.alert.title
},
// 主题,success/warning/info/error
type: {
type: String,
default: uni.$u.props.alert.type
},
// 辅助性文字
description: {
type: String,
default: uni.$u.props.alert.description
},
// 是否可关闭
closable: {
type: Boolean,
default: uni.$u.props.alert.closable
},
// 是否显示图标
showIcon: {
type: Boolean,
default: uni.$u.props.alert.showIcon
},
// 浅或深色调,light-浅色,dark-深色
effect: {
type: String,
default: uni.$u.props.alert.effect
},
// 文字是否居中
center: {
type: Boolean,
default: uni.$u.props.alert.center
},
// 字体大小
fontSize: {
type: [String, Number],
default: uni.$u.props.alert.fontSize
}
}
}
$u-button-active-opacity:0.75 !default;
$u-button-loading-text-margin-left:4px !default;
$u-button-text-color: #FFFFFF !default;
$u-button-text-plain-error-color:$u-error !default;
$u-button-text-plain-warning-color:$u-warning !default;
$u-button-text-plain-success-color:$u-success !default;
$u-button-text-plain-info-color:$u-info !default;
$u-button-text-plain-primary-color:$u-primary !default;
.u-button {
&--active {
opacity: $u-button-active-opacity;
}
&--active--plain {
background-color: rgb(217, 217, 217);
}
&__loading-text {
margin-left:$u-button-loading-text-margin-left;
}
&__text,
&__loading-text {
color:$u-button-text-color;
}
&__text--plain--error {
color:$u-button-text-plain-error-color;
}
&__text--plain--warning {
color:$u-button-text-plain-warning-color;
}
&__text--plain--success{
color:$u-button-text-plain-success-color;
}
&__text--plain--info {
color:$u-button-text-plain-info-color;
}
&__text--plain--primary {
color:$u-button-text-plain-primary-color;
}
$u-button-active-opacity:0.75 !default;
$u-button-loading-text-margin-left:4px !default;
$u-button-text-color: #FFFFFF !default;
$u-button-text-plain-error-color:$u-error !default;
$u-button-text-plain-warning-color:$u-warning !default;
$u-button-text-plain-success-color:$u-success !default;
$u-button-text-plain-info-color:$u-info !default;
$u-button-text-plain-primary-color:$u-primary !default;
.u-button {
&--active {
opacity: $u-button-active-opacity;
}
&--active--plain {
background-color: rgb(217, 217, 217);
}
&__loading-text {
margin-left:$u-button-loading-text-margin-left;
}
&__text,
&__loading-text {
color:$u-button-text-color;
}
&__text--plain--error {
color:$u-button-text-plain-error-color;
}
&__text--plain--warning {
color:$u-button-text-plain-warning-color;
}
&__text--plain--success{
color:$u-button-text-plain-success-color;
}
&__text--plain--info {
color:$u-button-text-plain-info-color;
}
&__text--plain--primary {
color:$u-button-text-plain-primary-color;
}
}
\ No newline at end of file
// nvue下hover-class无效
$u-button-before-top:50% !default;
$u-button-before-left:50% !default;
$u-button-before-width:100% !default;
$u-button-before-height:100% !default;
$u-button-before-transform:translate(-50%, -50%) !default;
$u-button-before-opacity:0 !default;
$u-button-before-background-color:#000 !default;
$u-button-before-border-color:#000 !default;
$u-button-active-before-opacity:.15 !default;
$u-button-icon-margin-left:4px !default;
$u-button-plain-u-button-info-color:$u-info;
$u-button-plain-u-button-success-color:$u-success;
$u-button-plain-u-button-error-color:$u-error;
$u-button-plain-u-button-warning-color:$u-error;
// nvue下hover-class无效
$u-button-before-top:50% !default;
$u-button-before-left:50% !default;
$u-button-before-width:100% !default;
$u-button-before-height:100% !default;
$u-button-before-transform:translate(-50%, -50%) !default;
$u-button-before-opacity:0 !default;
$u-button-before-background-color:#000 !default;
$u-button-before-border-color:#000 !default;
$u-button-active-before-opacity:.15 !default;
$u-button-icon-margin-left:4px !default;
$u-button-plain-u-button-info-color:$u-info;
$u-button-plain-u-button-success-color:$u-success;
$u-button-plain-u-button-error-color:$u-error;
$u-button-plain-u-button-warning-color:$u-error;
.u-button {
width: 100%;
......@@ -21,60 +21,60 @@ $u-button-plain-u-button-warning-color:$u-error;
white-space: nowrap;
line-height: 1;
}
&:before {
position: absolute;
top:$u-button-before-top;
left:$u-button-before-left;
width:$u-button-before-width;
height:$u-button-before-height;
border: inherit;
border-radius: inherit;
transform:$u-button-before-transform;
opacity:$u-button-before-opacity;
content: " ";
background-color:$u-button-before-background-color;
border-color:$u-button-before-border-color;
}
&--active {
&:before {
opacity: .15
}
}
&__icon+&__text:not(:empty),
&__loading-text {
margin-left:$u-button-icon-margin-left;
}
&--plain {
&.u-button--primary {
color: $u-primary;
}
}
&--plain {
&.u-button--info {
color:$u-button-plain-u-button-info-color;
}
}
&--plain {
&.u-button--success {
color:$u-button-plain-u-button-success-color;
}
}
&--plain {
&.u-button--error {
color:$u-button-plain-u-button-error-color;
}
}
&--plain {
&.u-button--warning {
color:$u-button-plain-u-button-warning-color;
}
}
}
&:before {
position: absolute;
top:$u-button-before-top;
left:$u-button-before-left;
width:$u-button-before-width;
height:$u-button-before-height;
border: inherit;
border-radius: inherit;
transform:$u-button-before-transform;
opacity:$u-button-before-opacity;
content: " ";
background-color:$u-button-before-background-color;
border-color:$u-button-before-border-color;
}
&--active {
&:before {
opacity: .15
}
}
&__icon+&__text:not(:empty),
&__loading-text {
margin-left:$u-button-icon-margin-left;
}
&--plain {
&.u-button--primary {
color: $u-primary;
}
}
&--plain {
&.u-button--info {
color:$u-button-plain-u-button-info-color;
}
}
&--plain {
&.u-button--success {
color:$u-button-plain-u-button-success-color;
}
}
&--plain {
&.u-button--error {
color:$u-button-plain-u-button-error-color;
}
}
&--plain {
&.u-button--warning {
color:$u-button-plain-u-button-warning-color;
}
}
}
<template>
<view class="u-calendar-header u-border-bottom">
<text
class="u-calendar-header__title"
v-if="showTitle"
>{{ title }}</text>
<text
class="u-calendar-header__subtitle"
v-if="showSubtitle"
>{{ subtitle }}</text>
<view class="u-calendar-header__weekdays">
<text class="u-calendar-header__weekdays__weekday"></text>
<text class="u-calendar-header__weekdays__weekday"></text>
<text class="u-calendar-header__weekdays__weekday"></text>
<text class="u-calendar-header__weekdays__weekday"></text>
<text class="u-calendar-header__weekdays__weekday"></text>
<text class="u-calendar-header__weekdays__weekday"></text>
<text class="u-calendar-header__weekdays__weekday"></text>
</view>
</view>
</template>
<script>
export default {
name: 'u-calendar-header',
mixins: [uni.$u.mpMixin, uni.$u.mixin],
props: {
// 标题
title: {
type: String,
default: ''
},
// 副标题
subtitle: {
type: String,
default: ''
},
// 是否显示标题
showTitle: {
type: Boolean,
default: true
},
// 是否显示副标题
showSubtitle: {
type: Boolean,
default: true
},
},
data() {
return {
}
},
methods: {
name() {
}
},
}
</script>
<style lang="scss" scoped>
@import "../../libs/css/components.scss";
.u-calendar-header {
padding-bottom: 4px;
&__title {
font-size: 16px;
color: $u-main-color;
text-align: center;
height: 42px;
line-height: 42px;
font-weight: bold;
}
&__subtitle {
font-size: 14px;
color: $u-main-color;
height: 40px;
text-align: center;
line-height: 40px;
font-weight: bold;
}
&__weekdays {
@include flex;
justify-content: space-between;
&__weekday {
font-size: 13px;
color: $u-main-color;
line-height: 30px;
flex: 1;
text-align: center;
}
}
}
</style>
<template>
<view class="u-calendar-header u-border-bottom">
<text
class="u-calendar-header__title"
v-if="showTitle"
>{{ title }}</text>
<text
class="u-calendar-header__subtitle"
v-if="showSubtitle"
>{{ subtitle }}</text>
<view class="u-calendar-header__weekdays">
<text class="u-calendar-header__weekdays__weekday"></text>
<text class="u-calendar-header__weekdays__weekday"></text>
<text class="u-calendar-header__weekdays__weekday"></text>
<text class="u-calendar-header__weekdays__weekday"></text>
<text class="u-calendar-header__weekdays__weekday"></text>
<text class="u-calendar-header__weekdays__weekday"></text>
<text class="u-calendar-header__weekdays__weekday"></text>
</view>
</view>
</template>
<script>
export default {
name: 'u-calendar-header',
mixins: [uni.$u.mpMixin, uni.$u.mixin],
props: {
// 标题
title: {
type: String,
default: ''
},
// 副标题
subtitle: {
type: String,
default: ''
},
// 是否显示标题
showTitle: {
type: Boolean,
default: true
},
// 是否显示副标题
showSubtitle: {
type: Boolean,
default: true
},
},
data() {
return {
}
},
methods: {
name() {
}
},
}
</script>
<style lang="scss" scoped>
@import "../../libs/css/components.scss";
.u-calendar-header {
padding-bottom: 4px;
&__title {
font-size: 16px;
color: $u-main-color;
text-align: center;
height: 42px;
line-height: 42px;
font-weight: bold;
}
&__subtitle {
font-size: 14px;
color: $u-main-color;
height: 40px;
text-align: center;
line-height: 40px;
font-weight: bold;
}
&__weekdays {
@include flex;
justify-content: space-between;
&__weekday {
font-size: 13px;
color: $u-main-color;
line-height: 30px;
flex: 1;
text-align: center;
}
}
}
</style>
export default {
methods: {
// 设置月份数据
setMonth() {
// 月初是周几
const day = dayjs(this.date).date(1).day()
const start = day == 0 ? 6 : day - 1
// 本月天数
const days = dayjs(this.date).endOf('month').format('D')
// 上个月天数
const prevDays = dayjs(this.date).endOf('month').subtract(1, 'month').format('D')
// 日期数据
const arr = []
// 清空表格
this.month = []
// 添加上月数据
arr.push(
...new Array(start).fill(1).map((e, i) => {
const day = prevDays - start + i + 1
return {
value: day,
disabled: true,
date: dayjs(this.date).subtract(1, 'month').date(day).format('YYYY-MM-DD')
}
})
)
// 添加本月数据
arr.push(
...new Array(days - 0).fill(1).map((e, i) => {
const day = i + 1
return {
value: day,
date: dayjs(this.date).date(day).format('YYYY-MM-DD')
}
})
)
// 添加下个月
arr.push(
...new Array(42 - days - start).fill(1).map((e, i) => {
const day = i + 1
return {
value: day,
disabled: true,
date: dayjs(this.date).add(1, 'month').date(day).format('YYYY-MM-DD')
}
})
)
// 分割数组
for (let n = 0; n < arr.length; n += 7) {
this.month.push(
arr.slice(n, n + 7).map((e, i) => {
e.index = i + n
// 自定义信息
const custom = this.customList.find((c) => c.date == e.date)
// 农历
if (this.lunar) {
const {
IDayCn,
IMonthCn
} = this.getLunar(e.date)
e.lunar = IDayCn == '初一' ? IMonthCn : IDayCn
}
return {
...e,
...custom
}
})
)
}
}
}
}
export default {
methods: {
// 设置月份数据
setMonth() {
// 月初是周几
const day = dayjs(this.date).date(1).day()
const start = day == 0 ? 6 : day - 1
// 本月天数
const days = dayjs(this.date).endOf('month').format('D')
// 上个月天数
const prevDays = dayjs(this.date).endOf('month').subtract(1, 'month').format('D')
// 日期数据
const arr = []
// 清空表格
this.month = []
// 添加上月数据
arr.push(
...new Array(start).fill(1).map((e, i) => {
const day = prevDays - start + i + 1
return {
value: day,
disabled: true,
date: dayjs(this.date).subtract(1, 'month').date(day).format('YYYY-MM-DD')
}
})
)
// 添加本月数据
arr.push(
...new Array(days - 0).fill(1).map((e, i) => {
const day = i + 1
return {
value: day,
date: dayjs(this.date).date(day).format('YYYY-MM-DD')
}
})
)
// 添加下个月
arr.push(
...new Array(42 - days - start).fill(1).map((e, i) => {
const day = i + 1
return {
value: day,
disabled: true,
date: dayjs(this.date).add(1, 'month').date(day).format('YYYY-MM-DD')
}
})
)
// 分割数组
for (let n = 0; n < arr.length; n += 7) {
this.month.push(
arr.slice(n, n + 7).map((e, i) => {
e.index = i + n
// 自定义信息
const custom = this.customList.find((c) => c.date == e.date)
// 农历
if (this.lunar) {
const {
IDayCn,
IMonthCn
} = this.getLunar(e.date)
e.lunar = IDayCn == '初一' ? IMonthCn : IDayCn
}
return {
...e,
...custom
}
})
)
}
}
}
}
<template>
<view class="u-count-down">
<slot>
<text class="u-count-down__text">{{ formattedTime }}</text>
</slot>
</view>
</template>
<script>
import props from './props.js';
import {
isSameSecond,
parseFormat,
parseTimeData
} from './utils';
/**
* u-count-down 倒计时
* @description 该组件一般使用于某个活动的截止时间上,通过数字的变化,给用户明确的时间感受,提示用户进行某一个行为操作。
* @tutorial https://uviewui.com/components/countDown.html
* @property {String | Number} time 倒计时时长,单位ms (默认 0 )
* @property {String} format 时间格式,DD-日,HH-时,mm-分,ss-秒,SSS-毫秒 (默认 'HH:mm:ss' )
* @property {Boolean} autoStart 是否自动开始倒计时 (默认 true )
* @property {Boolean} millisecond 是否展示毫秒倒计时 (默认 false )
* @event {Function} finish 倒计时结束时触发
* @event {Function} change 倒计时变化时触发
* @event {Function} start 开始倒计时
* @event {Function} pause 暂停倒计时
* @event {Function} reset 重设倒计时,若 auto-start 为 true,重设后会自动开始倒计时
* @example <u-count-down :time="time"></u-count-down>
*/
export default {
name: 'u-count-down',
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
data() {
return {
timer: null,
// 各单位(天,时,分等)剩余时间
timeData: parseTimeData(0),
// 格式化后的时间,如"03:23:21"
formattedTime: '0',
// 倒计时是否正在进行中
runing: false,
endTime: 0, // 结束的毫秒时间戳
remainTime: 0, // 剩余的毫秒时间
}
},
watch: {
time(n) {
this.reset()
}
},
mounted() {
this.init()
},
methods: {
init() {
this.reset()
},
// 开始倒计时
start() {
if (this.runing) return
// 标识为进行中
this.runing = true
// 结束时间戳 = 此刻时间戳 + 剩余的时间
this.endTime = Date.now() + this.remainTime
this.toTick()
},
// 根据是否展示毫秒,执行不同操作函数
toTick() {
if (this.millisecond) {
this.microTick()
} else {
this.macroTick()
}
},
macroTick() {
this.clearTimeout()
// 每隔一定时间,更新一遍定时器的值
// 同时此定时器的作用也能带来毫秒级的更新
this.timer = setTimeout(() => {
// 获取剩余时间
const remain = this.getRemainTime()
// 重设剩余时间
if (!isSameSecond(remain, this.remainTime) || remain === 0) {
this.setRemainTime(remain)
}
// 如果剩余时间不为0,则继续检查更新倒计时
if (this.remainTime !== 0) {
this.macroTick()
}
}, 30)
},
microTick() {
this.clearTimeout()
this.timer = setTimeout(() => {
this.setRemainTime(this.getRemainTime())
if (this.remainTime !== 0) {
this.microTick()
}
}, 50)
},
// 获取剩余的时间
getRemainTime() {
// 取最大值,防止出现小于0的剩余时间值
return Math.max(this.endTime - Date.now(), 0)
},
// 设置剩余的时间
setRemainTime(remain) {
this.remainTime = remain
// 根据剩余的毫秒时间,得出该有天,小时,分钟等的值,返回一个对象
const timeData = parseTimeData(remain)
this.$emit('change', timeData)
// 得出格式化后的时间
this.formattedTime = parseFormat(this.format, timeData)
// 如果时间已到,停止倒计时
if (remain <= 0) {
this.pause()
this.$emit('finish')
}
},
// 重置倒计时
reset() {
this.pause()
this.remainTime = this.time
this.setRemainTime(this.remainTime)
if (this.autoStart) {
this.start()
}
},
// 暂停倒计时
pause() {
this.runing = false;
this.clearTimeout()
},
// 清空定时器
clearTimeout() {
clearTimeout(this.timer)
this.timer = null
}
},
beforeDestroy() {
this.clearTimeout()
}
}
</script>
<style
lang="scss"
scoped
>
@import "../../libs/css/components.scss";
$u-count-down-text-color:$u-content-color !default;
$u-count-down-text-font-size:15px !default;
$u-count-down-text-line-height:22px !default;
.u-count-down {
&__text {
color: $u-count-down-text-color;
font-size: $u-count-down-text-font-size;
line-height: $u-count-down-text-line-height;
}
}
<template>
<view class="u-count-down">
<slot>
<text class="u-count-down__text">{{ formattedTime }}</text>
</slot>
</view>
</template>
<script>
import props from './props.js';
import {
isSameSecond,
parseFormat,
parseTimeData
} from './utils';
/**
* u-count-down 倒计时
* @description 该组件一般使用于某个活动的截止时间上,通过数字的变化,给用户明确的时间感受,提示用户进行某一个行为操作。
* @tutorial https://uviewui.com/components/countDown.html
* @property {String | Number} time 倒计时时长,单位ms (默认 0 )
* @property {String} format 时间格式,DD-日,HH-时,mm-分,ss-秒,SSS-毫秒 (默认 'HH:mm:ss' )
* @property {Boolean} autoStart 是否自动开始倒计时 (默认 true )
* @property {Boolean} millisecond 是否展示毫秒倒计时 (默认 false )
* @event {Function} finish 倒计时结束时触发
* @event {Function} change 倒计时变化时触发
* @event {Function} start 开始倒计时
* @event {Function} pause 暂停倒计时
* @event {Function} reset 重设倒计时,若 auto-start 为 true,重设后会自动开始倒计时
* @example <u-count-down :time="time"></u-count-down>
*/
export default {
name: 'u-count-down',
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
data() {
return {
timer: null,
// 各单位(天,时,分等)剩余时间
timeData: parseTimeData(0),
// 格式化后的时间,如"03:23:21"
formattedTime: '0',
// 倒计时是否正在进行中
runing: false,
endTime: 0, // 结束的毫秒时间戳
remainTime: 0, // 剩余的毫秒时间
}
},
watch: {
time(n) {
this.reset()
}
},
mounted() {
this.init()
},
methods: {
init() {
this.reset()
},
// 开始倒计时
start() {
if (this.runing) return
// 标识为进行中
this.runing = true
// 结束时间戳 = 此刻时间戳 + 剩余的时间
this.endTime = Date.now() + this.remainTime
this.toTick()
},
// 根据是否展示毫秒,执行不同操作函数
toTick() {
if (this.millisecond) {
this.microTick()
} else {
this.macroTick()
}
},
macroTick() {
this.clearTimeout()
// 每隔一定时间,更新一遍定时器的值
// 同时此定时器的作用也能带来毫秒级的更新
this.timer = setTimeout(() => {
// 获取剩余时间
const remain = this.getRemainTime()
// 重设剩余时间
if (!isSameSecond(remain, this.remainTime) || remain === 0) {
this.setRemainTime(remain)
}
// 如果剩余时间不为0,则继续检查更新倒计时
if (this.remainTime !== 0) {
this.macroTick()
}
}, 30)
},
microTick() {
this.clearTimeout()
this.timer = setTimeout(() => {
this.setRemainTime(this.getRemainTime())
if (this.remainTime !== 0) {
this.microTick()
}
}, 50)
},
// 获取剩余的时间
getRemainTime() {
// 取最大值,防止出现小于0的剩余时间值
return Math.max(this.endTime - Date.now(), 0)
},
// 设置剩余的时间
setRemainTime(remain) {
this.remainTime = remain
// 根据剩余的毫秒时间,得出该有天,小时,分钟等的值,返回一个对象
const timeData = parseTimeData(remain)
this.$emit('change', timeData)
// 得出格式化后的时间
this.formattedTime = parseFormat(this.format, timeData)
// 如果时间已到,停止倒计时
if (remain <= 0) {
this.pause()
this.$emit('finish')
}
},
// 重置倒计时
reset() {
this.pause()
this.remainTime = this.time
this.setRemainTime(this.remainTime)
if (this.autoStart) {
this.start()
}
},
// 暂停倒计时
pause() {
this.runing = false;
this.clearTimeout()
},
// 清空定时器
clearTimeout() {
clearTimeout(this.timer)
this.timer = null
}
},
beforeDestroy() {
this.clearTimeout()
}
}
</script>
<style
lang="scss"
scoped
>
@import "../../libs/css/components.scss";
$u-count-down-text-color:$u-content-color !default;
$u-count-down-text-font-size:15px !default;
$u-count-down-text-line-height:22px !default;
.u-count-down {
&__text {
color: $u-count-down-text-color;
font-size: $u-count-down-text-font-size;
line-height: $u-count-down-text-line-height;
}
}
</style>
// 补0,如1 -> 01
function padZero(num, targetLength = 2) {
let str = `${num}`
while (str.length < targetLength) {
str = `0${str}`
}
return str
}
const SECOND = 1000
const MINUTE = 60 * SECOND
const HOUR = 60 * MINUTE
const DAY = 24 * HOUR
export function parseTimeData(time) {
const days = Math.floor(time / DAY)
const hours = Math.floor((time % DAY) / HOUR)
const minutes = Math.floor((time % HOUR) / MINUTE)
const seconds = Math.floor((time % MINUTE) / SECOND)
const milliseconds = Math.floor(time % SECOND)
return {
days,
hours,
minutes,
seconds,
milliseconds
}
}
export function parseFormat(format, timeData) {
let {
days,
hours,
minutes,
seconds,
milliseconds
} = timeData
// 如果格式化字符串中不存在DD(天),则将天的时间转为小时中去
if (format.indexOf('DD') === -1) {
hours += days * 24
} else {
// 对天补0
format = format.replace('DD', padZero(days))
}
// 其他同理于DD的格式化处理方式
if (format.indexOf('HH') === -1) {
minutes += hours * 60
} else {
format = format.replace('HH', padZero(hours))
}
if (format.indexOf('mm') === -1) {
seconds += minutes * 60
} else {
format = format.replace('mm', padZero(minutes))
}
if (format.indexOf('ss') === -1) {
milliseconds += seconds * 1000
} else {
format = format.replace('ss', padZero(seconds))
}
return format.replace('SSS', padZero(milliseconds, 3))
}
export function isSameSecond(time1, time2) {
return Math.floor(time1 / 1000) === Math.floor(time2 / 1000)
}
// 补0,如1 -> 01
function padZero(num, targetLength = 2) {
let str = `${num}`
while (str.length < targetLength) {
str = `0${str}`
}
return str
}
const SECOND = 1000
const MINUTE = 60 * SECOND
const HOUR = 60 * MINUTE
const DAY = 24 * HOUR
export function parseTimeData(time) {
const days = Math.floor(time / DAY)
const hours = Math.floor((time % DAY) / HOUR)
const minutes = Math.floor((time % HOUR) / MINUTE)
const seconds = Math.floor((time % MINUTE) / SECOND)
const milliseconds = Math.floor(time % SECOND)
return {
days,
hours,
minutes,
seconds,
milliseconds
}
}
export function parseFormat(format, timeData) {
let {
days,
hours,
minutes,
seconds,
milliseconds
} = timeData
// 如果格式化字符串中不存在DD(天),则将天的时间转为小时中去
if (format.indexOf('DD') === -1) {
hours += days * 24
} else {
// 对天补0
format = format.replace('DD', padZero(days))
}
// 其他同理于DD的格式化处理方式
if (format.indexOf('HH') === -1) {
minutes += hours * 60
} else {
format = format.replace('HH', padZero(hours))
}
if (format.indexOf('mm') === -1) {
seconds += minutes * 60
} else {
format = format.replace('mm', padZero(minutes))
}
if (format.indexOf('ss') === -1) {
milliseconds += seconds * 1000
} else {
format = format.replace('ss', padZero(seconds))
}
return format.replace('SSS', padZero(milliseconds, 3))
}
export function isSameSecond(time1, time2) {
return Math.floor(time1 / 1000) === Math.floor(time2 / 1000)
}
export default {
props: {
// 当前选中项的value值
value: {
type: [Number, String, Array],
default: ''
},
// 菜单项标题
title: {
type: [String, Number],
default: ''
},
// 选项数据,如果传入了默认slot,此参数无效
options: {
type: Array,
default() {
return []
}
},
// 是否禁用此菜单项
disabled: {
type: Boolean,
default: false
},
// 下拉弹窗的高度
height: {
type: [Number, String],
default: 'auto'
},
// 点击遮罩是否可以收起弹窗
closeOnClickOverlay: {
type: Boolean,
default: true
}
}
export default {
props: {
// 当前选中项的value值
value: {
type: [Number, String, Array],
default: ''
},
// 菜单项标题
title: {
type: [String, Number],
default: ''
},
// 选项数据,如果传入了默认slot,此参数无效
options: {
type: Array,
default() {
return []
}
},
// 是否禁用此菜单项
disabled: {
type: Boolean,
default: false
},
// 下拉弹窗的高度
height: {
type: [Number, String],
default: 'auto'
},
// 点击遮罩是否可以收起弹窗
closeOnClickOverlay: {
type: Boolean,
default: true
}
}
}
<template>
<view class="u-drawdown">
<view
class="u-dropdown__menu"
:style="{
height: $u.addUnit(height)
}"
ref="u-dropdown__menu"
>
<view
class="u-dropdown__menu__item"
v-for="(item, index) in menuList"
:key="index"
@tap.stop="clickHandler(item, index)"
>
<view class="u-dropdown__menu__item__content">
<text
class="u-dropdown__menu__item__content__text"
:style="[index === current ? activeStyle : inactiveStyle]"
>{{item.title}}</text>
<view
class="u-dropdown__menu__item__content__arrow"
:class="[index === current && 'u-dropdown__menu__item__content__arrow--rotate']"
>
<u-icon
:name="menuIcon"
:size="$u.addUnit(menuIconSize)"
></u-icon>
</view>
</view>
</view>
</view>
<view class="u-dropdown__content">
<slot />
</view>
</view>
</template>
<script>
import props from './props.js';
/**
* Dropdown
* @description
* @tutorial url
* @property {String}
* @event {Function}
* @example
*/
export default {
name: 'u-dropdown',
mixins: [uni.$u.mixin, props],
data() {
return {
// �˵�����
menuList: [],
current: 0
}
},
computed: {
},
created() {
// �������������(u-dropdown-item)��this��������data������������������΢��С��������ѭ�����ö�����
this.children = [];
},
methods: {
clickHandler(item, index) {
this.children.map(child => {
if(child.title === item.title) {
// this.queryRect('u-dropdown__menu').then(size => {
child.$emit('click')
child.setContentAnimate(child.show ? 0 : 300)
child.show = !child.show
// })
} else {
child.show = false
child.setContentAnimate(0)
}
})
},
// ��ȡ��ǩ�ijߴ�λ��
queryRect(el) {
// #ifndef APP-NVUE
// $uGetRectΪuView�Դ��Ľڵ��ѯ�򻯷���������ĵ����ܣ�https://www.uviewui.com/js/getRect.html
// ����ڲ�һ����this.$uGetRect�������Ϊthis.$u.getRect�����߹���һ�£����Ʋ�ͬ
return new Promise(resolve => {
this.$uGetRect(`.${el}`).then(size => {
resolve(size)
})
})
// #endif
// #ifdef APP-NVUE
// nvue�£�ʹ��domģ���ѯԪ�ظ߶�
// ����һ��promise���õ��ô˷�����������ʹ��then�ص�
return new Promise(resolve => {
dom.getComponentRect(this.$refs[el], res => {
resolve(res.size)
})
})
// #endif
},
},
}
</script>
<style lang="scss">
@import '../../libs/css/components.scss';
.u-dropdown {
&__menu {
@include flex;
&__item {
flex: 1;
@include flex;
justify-content: center;
&__content {
@include flex;
align-items: center;
}
}
}
}
</style>
<template>
<view class="u-drawdown">
<view
class="u-dropdown__menu"
:style="{
height: $u.addUnit(height)
}"
ref="u-dropdown__menu"
>
<view
class="u-dropdown__menu__item"
v-for="(item, index) in menuList"
:key="index"
@tap.stop="clickHandler(item, index)"
>
<view class="u-dropdown__menu__item__content">
<text
class="u-dropdown__menu__item__content__text"
:style="[index === current ? activeStyle : inactiveStyle]"
>{{item.title}}</text>
<view
class="u-dropdown__menu__item__content__arrow"
:class="[index === current && 'u-dropdown__menu__item__content__arrow--rotate']"
>
<u-icon
:name="menuIcon"
:size="$u.addUnit(menuIconSize)"
></u-icon>
</view>
</view>
</view>
</view>
<view class="u-dropdown__content">
<slot />
</view>
</view>
</template>
<script>
import props from './props.js';
/**
* Dropdown
* @description
* @tutorial url
* @property {String}
* @event {Function}
* @example
*/
export default {
name: 'u-dropdown',
mixins: [uni.$u.mixin, props],
data() {
return {
// �˵�����
menuList: [],
current: 0
}
},
computed: {
},
created() {
// �������������(u-dropdown-item)��this��������data������������������΢��С��������ѭ�����ö�����
this.children = [];
},
methods: {
clickHandler(item, index) {
this.children.map(child => {
if(child.title === item.title) {
// this.queryRect('u-dropdown__menu').then(size => {
child.$emit('click')
child.setContentAnimate(child.show ? 0 : 300)
child.show = !child.show
// })
} else {
child.show = false
child.setContentAnimate(0)
}
})
},
// ��ȡ��ǩ�ijߴ�λ��
queryRect(el) {
// #ifndef APP-NVUE
// $uGetRectΪuView�Դ��Ľڵ��ѯ�򻯷���������ĵ����ܣ�https://www.uviewui.com/js/getRect.html
// ����ڲ�һ����this.$uGetRect�������Ϊthis.$u.getRect�����߹���һ�£����Ʋ�ͬ
return new Promise(resolve => {
this.$uGetRect(`.${el}`).then(size => {
resolve(size)
})
})
// #endif
// #ifdef APP-NVUE
// nvue�£�ʹ��domģ���ѯԪ�ظ߶�
// ����һ��promise���õ��ô˷�����������ʹ��then�ص�
return new Promise(resolve => {
dom.getComponentRect(this.$refs[el], res => {
resolve(res.size)
})
})
// #endif
},
},
}
</script>
<style lang="scss">
@import '../../libs/css/components.scss';
.u-dropdown {
&__menu {
@include flex;
&__item {
flex: 1;
@include flex;
justify-content: center;
&__content {
@include flex;
align-items: center;
}
}
}
}
</style>
export default {
props: {
export default {
props: {
// 标题选中时的样式
activeStyle: {
type: [String, Object],
......@@ -60,6 +60,6 @@ export default {
menuIconSize: {
type: [Number, String],
default: 14
}
}
}
}
}
<template>
<view class="u-drawdown">
<view
class="u-dropdown__menu"
:style="{
height: $u.addUnit(height)
}"
ref="u-dropdown__menu"
>
<view
class="u-dropdown__menu__item"
v-for="(item, index) in menuList"
:key="index"
@tap.stop="clickHandler(item, index)"
>
<view class="u-dropdown__menu__item__content">
<text
class="u-dropdown__menu__item__content__text"
:style="[index === current ? activeStyle : inactiveStyle]"
>{{item.title}}</text>
<view
class="u-dropdown__menu__item__content__arrow"
:class="[index === current && 'u-dropdown__menu__item__content__arrow--rotate']"
>
<u-icon
:name="menuIcon"
:size="$u.addUnit(menuIconSize)"
></u-icon>
</view>
</view>
</view>
</view>
<view class="u-dropdown__content">
<slot />
</view>
</view>
</template>
<script>
import props from './props.js';
/**
* Dropdown
* @description
* @tutorial url
* @property {String}
* @event {Function}
* @example
*/
export default {
name: 'u-dropdown',
mixins: [uni.$u.mixin, props],
data() {
return {
// �˵�����
menuList: [],
current: 0
}
},
computed: {
},
created() {
// �������������(u-dropdown-item)��this��������data������������������΢��С��������ѭ�����ö�����
this.children = [];
},
methods: {
clickHandler(item, index) {
this.children.map(child => {
if(child.title === item.title) {
// this.queryRect('u-dropdown__menu').then(size => {
child.$emit('click')
child.setContentAnimate(child.show ? 0 : 300)
child.show = !child.show
// })
} else {
child.show = false
child.setContentAnimate(0)
}
})
},
// ��ȡ��ǩ�ijߴ�λ��
queryRect(el) {
// #ifndef APP-NVUE
// $uGetRectΪuView�Դ��Ľڵ��ѯ�򻯷���������ĵ����ܣ�https://www.uviewui.com/js/getRect.html
// ����ڲ�һ����this.$uGetRect�������Ϊthis.$u.getRect�����߹���һ�£����Ʋ�ͬ
return new Promise(resolve => {
this.$uGetRect(`.${el}`).then(size => {
resolve(size)
})
})
// #endif
// #ifdef APP-NVUE
// nvue�£�ʹ��domģ���ѯԪ�ظ߶�
// ����һ��promise���õ��ô˷�����������ʹ��then�ص�
return new Promise(resolve => {
dom.getComponentRect(this.$refs[el], res => {
resolve(res.size)
})
})
// #endif
},
},
}
</script>
<style lang="scss">
@import '../../libs/css/components.scss';
.u-dropdown {
&__menu {
@include flex;
&__item {
flex: 1;
@include flex;
justify-content: center;
&__content {
@include flex;
align-items: center;
}
}
}
}
</style>
<template>
<view class="u-drawdown">
<view
class="u-dropdown__menu"
:style="{
height: $u.addUnit(height)
}"
ref="u-dropdown__menu"
>
<view
class="u-dropdown__menu__item"
v-for="(item, index) in menuList"
:key="index"
@tap.stop="clickHandler(item, index)"
>
<view class="u-dropdown__menu__item__content">
<text
class="u-dropdown__menu__item__content__text"
:style="[index === current ? activeStyle : inactiveStyle]"
>{{item.title}}</text>
<view
class="u-dropdown__menu__item__content__arrow"
:class="[index === current && 'u-dropdown__menu__item__content__arrow--rotate']"
>
<u-icon
:name="menuIcon"
:size="$u.addUnit(menuIconSize)"
></u-icon>
</view>
</view>
</view>
</view>
<view class="u-dropdown__content">
<slot />
</view>
</view>
</template>
<script>
import props from './props.js';
/**
* Dropdown
* @description
* @tutorial url
* @property {String}
* @event {Function}
* @example
*/
export default {
name: 'u-dropdown',
mixins: [uni.$u.mixin, props],
data() {
return {
// �˵�����
menuList: [],
current: 0
}
},
computed: {
},
created() {
// �������������(u-dropdown-item)��this��������data������������������΢��С��������ѭ�����ö�����
this.children = [];
},
methods: {
clickHandler(item, index) {
this.children.map(child => {
if(child.title === item.title) {
// this.queryRect('u-dropdown__menu').then(size => {
child.$emit('click')
child.setContentAnimate(child.show ? 0 : 300)
child.show = !child.show
// })
} else {
child.show = false
child.setContentAnimate(0)
}
})
},
// ��ȡ��ǩ�ijߴ�λ��
queryRect(el) {
// #ifndef APP-NVUE
// $uGetRectΪuView�Դ��Ľڵ��ѯ�򻯷���������ĵ����ܣ�https://www.uviewui.com/js/getRect.html
// ����ڲ�һ����this.$uGetRect�������Ϊthis.$u.getRect�����߹���һ�£����Ʋ�ͬ
return new Promise(resolve => {
this.$uGetRect(`.${el}`).then(size => {
resolve(size)
})
})
// #endif
// #ifdef APP-NVUE
// nvue�£�ʹ��domģ���ѯԪ�ظ߶�
// ����һ��promise���õ��ô˷�����������ʹ��then�ص�
return new Promise(resolve => {
dom.getComponentRect(this.$refs[el], res => {
resolve(res.size)
})
})
// #endif
},
},
}
</script>
<style lang="scss">
@import '../../libs/css/components.scss';
.u-dropdown {
&__menu {
@include flex;
&__item {
flex: 1;
@include flex;
justify-content: center;
&__content {
@include flex;
align-items: center;
}
}
}
}
</style>
export default {
props: {
// 图片地址
src: {
type: String,
default: uni.$u.props.image.src
},
// 裁剪模式
mode: {
type: String,
default: uni.$u.props.image.mode
},
// 宽度,单位任意
width: {
type: [String, Number],
default: uni.$u.props.image.width
},
// 高度,单位任意
height: {
type: [String, Number],
default: uni.$u.props.image.height
},
// 图片形状,circle-圆形,square-方形
shape: {
type: String,
default: uni.$u.props.image.shape
},
// 圆角,单位任意
radius: {
type: [String, Number],
default: uni.$u.props.image.radius
},
// 是否懒加载,微信小程序、App、百度小程序、字节跳动小程序
lazyLoad: {
type: Boolean,
default: uni.$u.props.image.lazyLoad
},
// 开启长按图片显示识别微信小程序码菜单
showMenuByLongpress: {
type: Boolean,
default: uni.$u.props.image.showMenuByLongpress
},
// 加载中的图标,或者小图片
loadingIcon: {
type: String,
default: uni.$u.props.image.loadingIcon
},
// 加载失败的图标,或者小图片
errorIcon: {
type: String,
default: uni.$u.props.image.errorIcon
},
// 是否显示加载中的图标或者自定义的slot
showLoading: {
type: Boolean,
default: uni.$u.props.image.showLoading
},
// 是否显示加载错误的图标或者自定义的slot
showError: {
type: Boolean,
default: uni.$u.props.image.showError
},
// 是否需要淡入效果
fade: {
type: Boolean,
default: uni.$u.props.image.fade
},
// 只支持网络资源,只对微信小程序有效
webp: {
type: Boolean,
default: uni.$u.props.image.webp
},
// 过渡时间,单位ms
duration: {
type: [String, Number],
default: uni.$u.props.image.duration
},
// 背景颜色,用于深色页面加载图片时,为了和背景色融合
bgColor: {
type: String,
default: uni.$u.props.image.bgColor
}
}
export default {
props: {
// 图片地址
src: {
type: String,
default: uni.$u.props.image.src
},
// 裁剪模式
mode: {
type: String,
default: uni.$u.props.image.mode
},
// 宽度,单位任意
width: {
type: [String, Number],
default: uni.$u.props.image.width
},
// 高度,单位任意
height: {
type: [String, Number],
default: uni.$u.props.image.height
},
// 图片形状,circle-圆形,square-方形
shape: {
type: String,
default: uni.$u.props.image.shape
},
// 圆角,单位任意
radius: {
type: [String, Number],
default: uni.$u.props.image.radius
},
// 是否懒加载,微信小程序、App、百度小程序、字节跳动小程序
lazyLoad: {
type: Boolean,
default: uni.$u.props.image.lazyLoad
},
// 开启长按图片显示识别微信小程序码菜单
showMenuByLongpress: {
type: Boolean,
default: uni.$u.props.image.showMenuByLongpress
},
// 加载中的图标,或者小图片
loadingIcon: {
type: String,
default: uni.$u.props.image.loadingIcon
},
// 加载失败的图标,或者小图片
errorIcon: {
type: String,
default: uni.$u.props.image.errorIcon
},
// 是否显示加载中的图标或者自定义的slot
showLoading: {
type: Boolean,
default: uni.$u.props.image.showLoading
},
// 是否显示加载错误的图标或者自定义的slot
showError: {
type: Boolean,
default: uni.$u.props.image.showError
},
// 是否需要淡入效果
fade: {
type: Boolean,
default: uni.$u.props.image.fade
},
// 只支持网络资源,只对微信小程序有效
webp: {
type: Boolean,
default: uni.$u.props.image.webp
},
// 过渡时间,单位ms
duration: {
type: [String, Number],
default: uni.$u.props.image.duration
},
// 背景颜色,用于深色页面加载图片时,为了和背景色融合
bgColor: {
type: String,
default: uni.$u.props.image.bgColor
}
}
}
export default {
props: {
// 是否显示组件
show: {
type: Boolean,
default: uni.$u.props.loadingIcon.show
},
// 颜色
color: {
type: String,
default: uni.$u.props.loadingIcon.color
},
// 提示文字颜色
textColor: {
type: String,
default: uni.$u.props.loadingIcon.textColor
},
// 文字和图标是否垂直排列
vertical: {
type: Boolean,
default: uni.$u.props.loadingIcon.vertical
},
// 模式选择,circle-圆形,spinner-花朵形,semicircle-半圆形
mode: {
type: String,
default: uni.$u.props.loadingIcon.mode
},
// 图标大小,单位默认px
size: {
type: [String, Number],
default: uni.$u.props.loadingIcon.size
},
// 文字大小
textSize: {
type: [String, Number],
default: uni.$u.props.loadingIcon.textSize
},
// 文字内容
text: {
type: [String, Number],
default: uni.$u.props.loadingIcon.text
},
// 动画模式
timingFunction: {
type: String,
default: uni.$u.props.loadingIcon.timingFunction
},
// 动画执行周期时间
duration: {
type: [String, Number],
default: uni.$u.props.loadingIcon.duration
},
// mode=circle时的暗边颜色
inactiveColor: {
type: String,
default: uni.$u.props.loadingIcon.inactiveColor
}
}
export default {
props: {
// 是否显示组件
show: {
type: Boolean,
default: uni.$u.props.loadingIcon.show
},
// 颜色
color: {
type: String,
default: uni.$u.props.loadingIcon.color
},
// 提示文字颜色
textColor: {
type: String,
default: uni.$u.props.loadingIcon.textColor
},
// 文字和图标是否垂直排列
vertical: {
type: Boolean,
default: uni.$u.props.loadingIcon.vertical
},
// 模式选择,circle-圆形,spinner-花朵形,semicircle-半圆形
mode: {
type: String,
default: uni.$u.props.loadingIcon.mode
},
// 图标大小,单位默认px
size: {
type: [String, Number],
default: uni.$u.props.loadingIcon.size
},
// 文字大小
textSize: {
type: [String, Number],
default: uni.$u.props.loadingIcon.textSize
},
// 文字内容
text: {
type: [String, Number],
default: uni.$u.props.loadingIcon.text
},
// 动画模式
timingFunction: {
type: String,
default: uni.$u.props.loadingIcon.timingFunction
},
// 动画执行周期时间
duration: {
type: [String, Number],
default: uni.$u.props.loadingIcon.duration
},
// mode=circle时的暗边颜色
inactiveColor: {
type: String,
default: uni.$u.props.loadingIcon.inactiveColor
}
}
}
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论