From d1448cb0ef10f358bb7bddb4e1ec268515e0b787 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 11:46:57 +0800
Subject: [PATCH] 项目初始化
---
uni_modules/uview-ui/components/u-button/u-button.vue | 490 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 490 insertions(+), 0 deletions(-)
diff --git a/uni_modules/uview-ui/components/u-button/u-button.vue b/uni_modules/uview-ui/components/u-button/u-button.vue
new file mode 100644
index 0000000..29001b0
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-button/u-button.vue
@@ -0,0 +1,490 @@
+<template>
+ <!-- #ifndef APP-NVUE -->
+ <button
+ :hover-start-time="Number(hoverStartTime)"
+ :hover-stay-time="Number(hoverStayTime)"
+ :form-type="formType"
+ :open-type="openType"
+ :app-parameter="appParameter"
+ :hover-stop-propagation="hoverStopPropagation"
+ :send-message-title="sendMessageTitle"
+ :send-message-path="sendMessagePath"
+ :lang="lang"
+ :data-name="dataName"
+ :session-from="sessionFrom"
+ :send-message-img="sendMessageImg"
+ :show-message-card="showMessageCard"
+ @getphonenumber="getphonenumber"
+ @getuserinfo="getuserinfo"
+ @error="error"
+ @opensetting="opensetting"
+ @launchapp="launchapp"
+ :hover-class="!disabled && !loading ? 'u-button--active' : ''"
+ class="u-button u-reset-button"
+ :style="[baseColor, $u.addStyle(customStyle)]"
+ @tap="clickHandler"
+ :class="bemClass"
+ >
+ <template v-if="loading">
+ <u-loading-icon
+ :mode="loadingMode"
+ :size="textSize * 1.15"
+ :color="loadingColor"
+ ></u-loading-icon>
+ <text
+ class="u-button__loading-text"
+ :style="[{ fontSize: textSize + 'px' }]"
+ >{{ loadingText || text }}</text
+ >
+ </template>
+ <template v-else>
+ <u-icon
+ v-if="icon"
+ :name="icon"
+ :color="iconColorCom"
+ :size="textSize * 1.35"
+ :customStyle="{ marginRight: '2px' }"
+ ></u-icon>
+ <slot>
+ <text
+ class="u-button__text"
+ :style="[{ fontSize: textSize + 'px' }]"
+ >{{ text }}</text
+ >
+ </slot>
+ </template>
+ </button>
+ <!-- #endif -->
+
+ <!-- #ifdef APP-NVUE -->
+ <view
+ :hover-start-time="Number(hoverStartTime)"
+ :hover-stay-time="Number(hoverStayTime)"
+ class="u-button"
+ :hover-class="
+ !disabled && !loading && !color && (plain || type === 'info')
+ ? 'u-button--active--plain'
+ : !disabled && !loading && !plain
+ ? 'u-button--active'
+ : ''
+ "
+ @tap="clickHandler"
+ :class="bemClass"
+ :style="[baseColor, $u.addStyle(customStyle)]"
+ >
+ <template v-if="loading">
+ <u-loading-icon
+ :mode="loadingMode"
+ :size="textSize * 1.15"
+ :color="loadingColor"
+ ></u-loading-icon>
+ <text
+ class="u-button__loading-text"
+ :style="[nvueTextStyle]"
+ :class="[plain && `u-button__text--plain--${type}`]"
+ >{{ loadingText || text }}</text
+ >
+ </template>
+ <template v-else>
+ <u-icon
+ v-if="icon"
+ :name="icon"
+ :color="iconColorCom"
+ :size="textSize * 1.35"
+ ></u-icon>
+ <text
+ class="u-button__text"
+ :style="[
+ {
+ marginLeft: icon ? '2px' : 0,
+ },
+ nvueTextStyle,
+ ]"
+ :class="[plain && `u-button__text--plain--${type}`]"
+ >{{ text }}</text
+ >
+ </template>
+ </view>
+ <!-- #endif -->
+</template>
+
+<script>
+import button from "../../libs/mixin/button.js";
+import openType from "../../libs/mixin/openType.js";
+import props from "./props.js";
+/**
+ * button 鎸夐挳
+ * @description Button 鎸夐挳
+ * @tutorial https://www.uviewui.com/components/button.html
+ *
+ * @property {Boolean} hairline 鏄惁鏄剧ず鎸夐挳鐨勭粏杈规 (榛樿 true )
+ * @property {String} type 鎸夐挳鐨勯缃牱寮忥紝info锛宲rimary锛宔rror锛寃arning锛宻uccess (榛樿 'info' )
+ * @property {String} size 鎸夐挳灏哄锛宭arge锛宯ormal锛宮ini 锛堥粯璁� normal锛�
+ * @property {String} shape 鎸夐挳褰㈢姸锛宑ircle锛堜袱杈逛负鍗婂渾锛夛紝square锛堝甫鍦嗚锛� 锛堥粯璁� 'square' 锛�
+ * @property {Boolean} plain 鎸夐挳鏄惁闀傜┖锛岃儗鏅壊閫忔槑 锛堥粯璁� false锛�
+ * @property {Boolean} disabled 鏄惁绂佺敤 锛堥粯璁� false锛�
+ * @property {Boolean} loading 鎸夐挳鍚嶇О鍓嶆槸鍚﹀甫 loading 鍥炬爣(App-nvue 骞冲彴锛屽湪 ios 涓婁负闆姳锛孉ndroid涓婁负鍦嗗湀) 锛堥粯璁� false锛�
+ * @property {String | Number} loadingText 鍔犺浇涓彁绀烘枃瀛�
+ * @property {String} loadingMode 鍔犺浇鐘舵�佸浘鏍囩被鍨� 锛堥粯璁� 'spinner' 锛�
+ * @property {String | Number} loadingSize 鍔犺浇鍥炬爣澶у皬 锛堥粯璁� 15 锛�
+ * @property {String} openType 寮�鏀捐兘鍔涳紝鍏蜂綋璇风湅uniapp绋冲畾鍏充簬button缁勪欢閮ㄥ垎璇存槑
+ * @property {String} formType 鐢ㄤ簬 <form> 缁勪欢锛岀偣鍑诲垎鍒細瑙﹀彂 <form> 缁勪欢鐨� submit/reset 浜嬩欢
+ * @property {String} appParameter 鎵撳紑 APP 鏃讹紝鍚� APP 浼犻�掔殑鍙傛暟锛宱pen-type=launchApp鏃舵湁鏁� 锛堟敞锛氬彧寰俊灏忕▼搴忋�丵Q灏忕▼搴忔湁鏁堬級
+ * @property {Boolean} hoverStopPropagation 鎸囧畾鏄惁闃绘鏈妭鐐圭殑绁栧厛鑺傜偣鍑虹幇鐐瑰嚮鎬侊紝寰俊灏忕▼搴忔湁鏁堬紙榛樿 true 锛�
+ * @property {String} lang 鎸囧畾杩斿洖鐢ㄦ埛淇℃伅鐨勮瑷�锛寊h_CN 绠�浣撲腑鏂囷紝zh_TW 绻佷綋涓枃锛宔n 鑻辨枃锛堥粯璁� en 锛�
+ * @property {String} sessionFrom 浼氳瘽鏉ユ簮锛宱penType="contact"鏃舵湁鏁�
+ * @property {String} sendMessageTitle 浼氳瘽鍐呮秷鎭崱鐗囨爣棰橈紝openType="contact"鏃舵湁鏁�
+ * @property {String} sendMessagePath 浼氳瘽鍐呮秷鎭崱鐗囩偣鍑昏烦杞皬绋嬪簭璺緞锛宱penType="contact"鏃舵湁鏁�
+ * @property {String} sendMessageImg 浼氳瘽鍐呮秷鎭崱鐗囧浘鐗囷紝openType="contact"鏃舵湁鏁�
+ * @property {Boolean} showMessageCard 鏄惁鏄剧ず浼氳瘽鍐呮秷鎭崱鐗囷紝璁剧疆姝ゅ弬鏁颁负 true锛岀敤鎴疯繘鍏ュ鏈嶄細璇濅細鍦ㄥ彸涓嬭鏄剧ず"鍙兘瑕佸彂閫佺殑灏忕▼搴�"鎻愮ず锛岀敤鎴风偣鍑诲悗鍙互蹇�熷彂閫佸皬绋嬪簭娑堟伅锛宱penType="contact"鏃舵湁鏁堬紙榛樿false锛�
+ * @property {String} dataName 棰濆浼犲弬鍙傛暟锛岀敤浜庡皬绋嬪簭鐨刣ata-xxx灞炴�э紝閫氳繃target.dataset.name鑾峰彇
+ * @property {String | Number} throttleTime 鑺傛祦锛屼竴瀹氭椂闂村唴鍙兘瑙﹀彂涓�娆� 锛堥粯璁� 0 )
+ * @property {String | Number} hoverStartTime 鎸変綇鍚庡涔呭嚭鐜扮偣鍑绘�侊紝鍗曚綅姣 锛堥粯璁� 0 )
+ * @property {String | Number} hoverStayTime 鎵嬫寚鏉惧紑鍚庣偣鍑绘�佷繚鐣欐椂闂达紝鍗曚綅姣 锛堥粯璁� 200 )
+ * @property {String | Number} text 鎸夐挳鏂囧瓧锛屼箣鎵�浠ラ�氳繃props浼犲叆锛屾槸鍥犱负slot浼犲叆鐨勮瘽锛堟敞锛歯vue涓棤娉曟帶鍒舵枃瀛楃殑鏍峰紡锛�
+ * @property {String} icon 鎸夐挳鍥炬爣
+ * @property {String} iconColor 鎸夐挳鍥炬爣棰滆壊
+ * @property {String} color 鎸夐挳棰滆壊锛屾敮鎸佷紶鍏inear-gradient娓愬彉鑹�
+ * @property {Object} customStyle 瀹氫箟闇�瑕佺敤鍒扮殑澶栭儴鏍峰紡
+ *
+ * @event {Function} click 闈炵姝㈠苟涓旈潪鍔犺浇涓紝鎵嶈兘鐐瑰嚮
+ * @event {Function} getphonenumber open-type="getPhoneNumber"鏃舵湁鏁�
+ * @event {Function} getuserinfo 鐢ㄦ埛鐐瑰嚮璇ユ寜閽椂锛屼細杩斿洖鑾峰彇鍒扮殑鐢ㄦ埛淇℃伅锛屼粠杩斿洖鍙傛暟鐨刣etail涓幏鍙栧埌鐨勫�煎悓uni.getUserInfo
+ * @event {Function} error 褰撲娇鐢ㄥ紑鏀捐兘鍔涙椂锛屽彂鐢熼敊璇殑鍥炶皟
+ * @event {Function} opensetting 鍦ㄦ墦寮�鎺堟潈璁剧疆椤靛苟鍏抽棴鍚庡洖璋�
+ * @event {Function} launchapp 鎵撳紑 APP 鎴愬姛鐨勫洖璋�
+ * @example <u-button>鏈堣惤</u-button>
+ */
+export default {
+ name: "u-button",
+ // #ifdef MP
+ mixins: [uni.$u.mpMixin, uni.$u.mixin, button, openType, props],
+ // #endif
+ // #ifndef MP
+ mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+ // #endif
+ data() {
+ return {};
+ },
+ computed: {
+ // 鐢熸垚bem椋庢牸鐨勭被鍚�
+ bemClass() {
+ // this.bem涓轰竴涓猚omputed鍙橀噺锛屽湪mixin涓�
+ if (!this.color) {
+ return this.bem(
+ "button",
+ ["type", "shape", "size"],
+ ["disabled", "plain", "hairline"]
+ );
+ } else {
+ // 鐢变簬nvue鐨勫師鍥狅紝鍦ㄦ湁color鍙傛暟鏃讹紝涓嶉渶瑕佷紶鍏ype锛屽惁鍒欎細鐢熸垚type鐩稿叧鐨勭被鍨嬶紝褰卞搷鏈�缁堢殑鏍峰紡
+ return this.bem(
+ "button",
+ ["shape", "size"],
+ ["disabled", "plain", "hairline"]
+ );
+ }
+ },
+ loadingColor() {
+ if (this.plain) {
+ // 濡傛灉鏈夎缃甤olor鍊硷紝鍒欑敤color鍊硷紝鍚﹀垯浣跨敤type涓婚棰滆壊
+ return this.color
+ ? this.color
+ : uni.$u.config.color[`u-${this.type}`];
+ }
+ if (this.type === "info") {
+ return "#c9c9c9";
+ }
+ return "rgb(200, 200, 200)";
+ },
+ iconColorCom() {
+ // 濡傛灉鏄晜绌虹姸鎬侊紝璁剧疆浜哻olor灏辩敤color鍊硷紝鍚﹀垯浣跨敤涓婚棰滆壊锛�
+ // u-icon鐨刢olor鑳芥帴鍙椾竴涓富棰橀鑹茬殑鍊�
+ if (this.iconColor) return this.iconColor;
+ if (this.plain) {
+ return this.color ? this.color : this.type;
+ } else {
+ return this.type === "info" ? "#000000" : "#ffffff";
+ }
+ },
+ baseColor() {
+ let style = {};
+ if (this.color) {
+ // 閽堝鑷畾涔変簡color棰滆壊鐨勬儏鍐碉紝闀傜┖鐘舵�佷笅锛屽氨鏄敤鑷畾涔夌殑棰滆壊
+ style.color = this.plain ? this.color : "white";
+ if (!this.plain) {
+ // 闈為晜绌猴紝鑳屾櫙鑹蹭娇鐢ㄨ嚜瀹氫箟鐨勯鑹�
+ style["background-color"] = this.color;
+ }
+ if (this.color.indexOf("gradient") !== -1) {
+ // 濡傛灉鑷畾涔夌殑棰滆壊涓烘笎鍙樿壊锛屼笉鏄剧ず杈规锛屼互鍙婇�氳繃backgroundImage璁剧疆娓愬彉鑹�
+ // weex鏂囨。璇存槑鍙互鍐檅orderWidth鐨勫舰寮忥紝涓轰粈涔堣繖閲岄渶瑕佸垎寮�鍐欙紵
+ // 鍥犱负weex鏄樋閲屽反宸翠负浜嗛儴闂ㄤ笟缁╄�冩牳鑰屽仛鐨勪綘鎳傜殑涓滆タ锛屾墍浠ラ渶瑕佽繖涔堝啓鎵嶆湁鏁�
+ style.borderTopWidth = 0;
+ style.borderRightWidth = 0;
+ style.borderBottomWidth = 0;
+ style.borderLeftWidth = 0;
+ if (!this.plain) {
+ style.backgroundImage = this.color;
+ }
+ } else {
+ // 闈炴笎鍙樿壊锛屽垯璁剧疆杈规鐩稿叧鐨勫睘鎬�
+ style.borderColor = this.color;
+ style.borderWidth = "1px";
+ style.borderStyle = "solid";
+ }
+ }
+ return style;
+ },
+ // nvue鐗堟湰鎸夐挳鐨勫瓧浣撲笉浼氱户鎵跨埗缁勪欢鐨勯鑹诧紝闇�瑕佸姣忎竴涓猼ext缁勪欢杩涜鍗曠嫭鐨勮缃�
+ nvueTextStyle() {
+ let style = {};
+ // 閽堝鑷畾涔変簡color棰滆壊鐨勬儏鍐碉紝闀傜┖鐘舵�佷笅锛屽氨鏄敤鑷畾涔夌殑棰滆壊
+ if (this.type === "info") {
+ style.color = "#323233";
+ }
+ if (this.color) {
+ style.color = this.plain ? this.color : "white";
+ }
+ style.fontSize = this.textSize + "px";
+ return style;
+ },
+ // 瀛椾綋澶у皬
+ textSize() {
+ let fontSize = 14,
+ { size } = this;
+ if (size === "large") fontSize = 16;
+ if (size === "normal") fontSize = 14;
+ if (size === "small") fontSize = 12;
+ if (size === "mini") fontSize = 10;
+ return fontSize;
+ },
+ },
+ methods: {
+ clickHandler() {
+ // 闈炵姝㈠苟涓旈潪鍔犺浇涓紝鎵嶈兘鐐瑰嚮
+ if (!this.disabled && !this.loading) {
+ // 杩涜鑺傛祦鎺у埗锛屾瘡this.throttle姣鍐咃紝鍙湪寮�濮嬪鎵ц
+ uni.$u.throttle(() => {
+ this.$emit("click");
+ }, this.throttleTime);
+ }
+ },
+ // 涓嬮潰涓哄鎺niapp瀹樻柟鎸夐挳寮�鏀捐兘鍔涗簨浠跺洖璋冪殑瀵规帴
+ getphonenumber(res) {
+ this.$emit("getphonenumber", res);
+ },
+ getuserinfo(res) {
+ this.$emit("getuserinfo", res);
+ },
+ error(res) {
+ this.$emit("error", res);
+ },
+ opensetting(res) {
+ this.$emit("opensetting", res);
+ },
+ launchapp(res) {
+ this.$emit("launchapp", res);
+ },
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/components.scss";
+
+/* #ifndef APP-NVUE */
+@import "./vue.scss";
+/* #endif */
+
+/* #ifdef APP-NVUE */
+@import "./nvue.scss";
+/* #endif */
+
+$u-button-u-button-height: 40px !default;
+$u-button-text-font-size: 15px !default;
+$u-button-loading-text-font-size: 15px !default;
+$u-button-loading-text-margin-left: 4px !default;
+$u-button-large-width: 100% !default;
+$u-button-large-height: 50px !default;
+$u-button-normal-padding: 0 12px !default;
+$u-button-large-padding: 0 15px !default;
+$u-button-normal-font-size: 14px !default;
+$u-button-small-min-width: 60px !default;
+$u-button-small-height: 30px !default;
+$u-button-small-padding: 0px 8px !default;
+$u-button-mini-padding: 0px 8px !default;
+$u-button-small-font-size: 12px !default;
+$u-button-mini-height: 22px !default;
+$u-button-mini-font-size: 10px !default;
+$u-button-mini-min-width: 50px !default;
+$u-button-disabled-opacity: 0.5 !default;
+$u-button-info-color: #323233 !default;
+$u-button-info-background-color: #fff !default;
+$u-button-info-border-color: #ebedf0 !default;
+$u-button-info-border-width: 1px !default;
+$u-button-info-border-style: solid !default;
+$u-button-success-color: #fff !default;
+$u-button-success-background-color: $u-success !default;
+$u-button-success-border-color: $u-button-success-background-color !default;
+$u-button-success-border-width: 1px !default;
+$u-button-success-border-style: solid !default;
+$u-button-primary-color: #fff !default;
+$u-button-primary-background-color: $u-primary !default;
+$u-button-primary-border-color: $u-button-primary-background-color !default;
+$u-button-primary-border-width: 1px !default;
+$u-button-primary-border-style: solid !default;
+$u-button-error-color: #fff !default;
+$u-button-error-background-color: $u-error !default;
+$u-button-error-border-color: $u-button-error-background-color !default;
+$u-button-error-border-width: 1px !default;
+$u-button-error-border-style: solid !default;
+$u-button-warning-color: #fff !default;
+$u-button-warning-background-color: $u-warning !default;
+$u-button-warning-border-color: $u-button-warning-background-color !default;
+$u-button-warning-border-width: 1px !default;
+$u-button-warning-border-style: solid !default;
+$u-button-block-width: 100% !default;
+$u-button-circle-border-top-right-radius: 100px !default;
+$u-button-circle-border-top-left-radius: 100px !default;
+$u-button-circle-border-bottom-left-radius: 100px !default;
+$u-button-circle-border-bottom-right-radius: 100px !default;
+$u-button-square-border-top-right-radius: 3px !default;
+$u-button-square-border-top-left-radius: 3px !default;
+$u-button-square-border-bottom-left-radius: 3px !default;
+$u-button-square-border-bottom-right-radius: 3px !default;
+$u-button-icon-min-width: 1em !default;
+$u-button-plain-background-color: #fff !default;
+$u-button-hairline-border-width: 0.5px !default;
+
+.u-button {
+ height: $u-button-u-button-height;
+ position: relative;
+ align-items: center;
+ justify-content: center;
+ @include flex;
+ /* #ifndef APP-NVUE */
+ box-sizing: border-box;
+ /* #endif */
+ flex-direction: row;
+
+ &__text {
+ font-size: $u-button-text-font-size;
+ }
+
+ &__loading-text {
+ font-size: $u-button-loading-text-font-size;
+ margin-left: $u-button-loading-text-margin-left;
+ }
+
+ &--large {
+ /* #ifndef APP-NVUE */
+ width: $u-button-large-width;
+ /* #endif */
+ height: $u-button-large-height;
+ padding: $u-button-large-padding;
+ }
+
+ &--normal {
+ padding: $u-button-normal-padding;
+ font-size: $u-button-normal-font-size;
+ }
+
+ &--small {
+ /* #ifndef APP-NVUE */
+ min-width: $u-button-small-min-width;
+ /* #endif */
+ height: $u-button-small-height;
+ padding: $u-button-small-padding;
+ font-size: $u-button-small-font-size;
+ }
+
+ &--mini {
+ height: $u-button-mini-height;
+ font-size: $u-button-mini-font-size;
+ /* #ifndef APP-NVUE */
+ min-width: $u-button-mini-min-width;
+ /* #endif */
+ padding: $u-button-mini-padding;
+ }
+
+ &--disabled {
+ opacity: $u-button-disabled-opacity;
+ }
+
+ &--info {
+ color: $u-button-info-color;
+ background-color: $u-button-info-background-color;
+ border-color: $u-button-info-border-color;
+ border-width: $u-button-info-border-width;
+ border-style: $u-button-info-border-style;
+ }
+
+ &--success {
+ color: $u-button-success-color;
+ background-color: $u-button-success-background-color;
+ border-color: $u-button-success-border-color;
+ border-width: $u-button-success-border-width;
+ border-style: $u-button-success-border-style;
+ }
+
+ &--primary {
+ color: $u-button-primary-color;
+ background-color: $u-button-primary-background-color;
+ border-color: $u-button-primary-border-color;
+ border-width: $u-button-primary-border-width;
+ border-style: $u-button-primary-border-style;
+ }
+
+ &--error {
+ color: $u-button-error-color;
+ background-color: $u-button-error-background-color;
+ border-color: $u-button-error-border-color;
+ border-width: $u-button-error-border-width;
+ border-style: $u-button-error-border-style;
+ }
+
+ &--warning {
+ color: $u-button-warning-color;
+ background-color: $u-button-warning-background-color;
+ border-color: $u-button-warning-border-color;
+ border-width: $u-button-warning-border-width;
+ border-style: $u-button-warning-border-style;
+ }
+
+ &--block {
+ @include flex;
+ width: $u-button-block-width;
+ }
+
+ &--circle {
+ border-top-right-radius: $u-button-circle-border-top-right-radius;
+ border-top-left-radius: $u-button-circle-border-top-left-radius;
+ border-bottom-left-radius: $u-button-circle-border-bottom-left-radius;
+ border-bottom-right-radius: $u-button-circle-border-bottom-right-radius;
+ }
+
+ &--square {
+ border-bottom-left-radius: $u-button-square-border-top-right-radius;
+ border-bottom-right-radius: $u-button-square-border-top-left-radius;
+ border-top-left-radius: $u-button-square-border-bottom-left-radius;
+ border-top-right-radius: $u-button-square-border-bottom-right-radius;
+ }
+
+ &__icon {
+ /* #ifndef APP-NVUE */
+ min-width: $u-button-icon-min-width;
+ line-height: inherit !important;
+ vertical-align: top;
+ /* #endif */
+ }
+
+ &--plain {
+ background-color: $u-button-plain-background-color;
+ }
+
+ &--hairline {
+ border-width: $u-button-hairline-border-width !important;
+ }
+}
+</style>
--
Gitblit v1.9.3