first commit

This commit is contained in:
编码猿
2024-09-27 01:32:49 +08:00
commit 28ebe05a64
7399 changed files with 1174529 additions and 0 deletions

View File

@@ -0,0 +1 @@
6d36e860-b392-49d7-8cf9-02a673b48f90

View File

@@ -0,0 +1,141 @@
import baseComponent from '../helpers/baseComponent'
import classNames from '../helpers/classNames'
baseComponent({
properties: {
prefixCls: {
type: String,
value: 'wux-button',
},
type: {
type: String,
value: 'stable',
},
clear: {
type: Boolean,
value: false,
},
block: {
type: Boolean,
value: false,
},
full: {
type: Boolean,
value: false,
},
outline: {
type: Boolean,
value: false,
},
bordered: {
type: Boolean,
value: true,
},
size: {
type: String,
value: 'default',
},
disabled: {
type: Boolean,
value: false,
},
loading: {
type: Boolean,
value: false,
},
formType: {
type: String,
value: '',
},
openType: {
type: String,
value: '',
},
hoverClass: {
type: String,
value: 'default',
},
hoverStopPropagation: {
type: Boolean,
value: false,
},
hoverStartTime: {
type: Number,
value: 20,
},
hoverStayTime: {
type: Number,
value: 70,
},
lang: {
type: String,
value: 'en',
},
sessionFrom: {
type: String,
value: '',
},
sendMessageTitle: {
type: String,
value: '',
},
sendMessagePath: {
type: String,
value: '',
},
sendMessageImg: {
type: String,
value: '',
},
showMessageCard: {
type: Boolean,
value: false,
},
appParameter: {
type: String,
value: '',
},
},
computed: {
classes: ['prefixCls, hoverClass, type, size, block, full, clear, outline, bordered, disabled', function(prefixCls, hoverClass, type, size, block, full, clear, outline, bordered, disabled) {
const wrap = classNames(prefixCls, {
[`${prefixCls}--${type}`]: type,
[`${prefixCls}--${size}`]: size,
[`${prefixCls}--block`]: block,
[`${prefixCls}--full`]: full,
[`${prefixCls}--clear`]: clear,
[`${prefixCls}--outline`]: outline,
[`${prefixCls}--bordered`]: bordered,
[`${prefixCls}--disabled`]: disabled,
})
const hover = hoverClass && hoverClass !== 'default' ? hoverClass : `${prefixCls}--hover`
return {
wrap,
hover,
}
}],
},
methods: {
onTap() {
if (!this.data.disabled && !this.data.loading) {
this.triggerEvent('click')
}
},
bindgetuserinfo(e) {
this.triggerEvent('getuserinfo', e.detail)
},
bindcontact(e) {
this.triggerEvent('contact', e.detail)
},
bindgetphonenumber(e) {
this.triggerEvent('getphonenumber', e.detail)
},
bindopensetting(e) {
this.triggerEvent('opensetting', e.detail)
},
onError(e) {
this.triggerEvent('error', e.detail)
},
},
})

View File

@@ -0,0 +1,3 @@
{
"component": true
}

View File

@@ -0,0 +1,26 @@
<button
class="wux-class {{ classes.wrap }}"
disabled="{{ disabled }}"
loading="{{ loading }}"
form-type="{{ formType }}"
open-type="{{ openType }}"
hover-class="wux-hover-class {{ !disabled ? classes.hover : 'none' }}"
hover-stop-propagation="{{ hoverStopPropagation }}"
hover-start-time="{{ hoverStartTime }}"
hover-stay-time="{{ hoverStayTime }}"
lang="{{ lang }}"
bindgetuserinfo="bindgetuserinfo"
session-from="{{ sessionFrom }}"
send-message-title="{{ sendMessageTitle }}"
send-message-path="{{ sendMessagePath }}"
send-message-img="{{ sendMessageImg }}"
show-message-card="{{ showMessageCard }}"
bindcontact="bindcontact"
bindgetphonenumber="bindgetphonenumber"
app-parameter="{{ appParameter }}"
binderror="onError"
bindopensetting="bindopensetting"
bindtap="onTap"
>
<slot></slot>
</button>

View File

@@ -0,0 +1,371 @@
.wux-button {
padding: 0;
border-radius: 0;
color: inherit!important;
background: 0 0!important;
font-size: inherit;
font-weight: 400;
line-height: inherit;
text-align: inherit;
text-decoration: none;
overflow: visible;
min-height: 0!important;
width: auto!important;
-webkit-tap-highlight-color: transparent;
position: relative;
display: inline-block;
box-sizing: border-box;
margin: 0;
padding: 0 24rpx;
min-width: 104rpx;
min-height: 88rpx!important;
border: none;
border-radius: 8rpx;
vertical-align: middle;
text-align: center;
text-overflow: ellipsis;
font-size: 32rpx;
line-height: 84rpx;
cursor: pointer
}
.wux-button::after {
display: block;
position: static;
top: auto;
left: auto;
width: auto;
height: auto;
border: none;
border-radius: 0;
transform: none;
transform-origin: 0 0
}
.wux-button::after {
content: " ";
width: 100%;
height: 100%;
position: absolute;
top: -12rpx;
right: -12rpx;
bottom: -12rpx;
left: -12rpx;
border: none;
transform: none;
transform-origin: 0 0;
box-sizing: border-box;
border-radius: 0
}
.wux-button--bordered {
border: 2rpx solid transparent
}
.wux-button--disabled {
opacity: .4!important
}
.wux-button--small {
padding: 4rpx 8rpx 2rpx;
min-width: 56rpx;
min-height: 60rpx!important;
font-size: 24rpx;
line-height: 52rpx
}
.wux-button--large {
padding: 0 32rpx;
min-width: 136rpx;
min-height: 118rpx!important;
font-size: 40rpx;
line-height: 106rpx
}
.wux-button--block,
.wux-button--full {
width: 100%!important;
margin-top: 20rpx;
margin-bottom: 20rpx
}
.wux-button--block {
display: block;
clear: both
}
.wux-button--block::after {
clear: both
}
.wux-button--full {
display: block;
margin-right: 0!important;
margin-left: 0!important;
border-right-width: 0;
border-left-width: 0;
border-radius: 0
}
.wux-button--outline.wux-button--hover {
color: #fff!important
}
.wux-button--light,
.wux-button--light--disabled {
border-color: transparent!important;
background-color: #fff!important;
color: #444!important
}
.wux-button--light.wux-button--hover {
background-color: #e6e6e6!important;
color: #444!important
}
.wux-button--light.wux-button--outline,
.wux-button--light.wux-button--outline.wux-button--disabled {
border-color: #fff!important;
background-color: transparent!important;
color: #fff!important
}
.wux-button--light.wux-button--outline.wux-button--hover {
background-color: #fff!important;
color: #fff!important
}
.wux-button--light.wux-button--clear,
.wux-button--light.wux-button--clear.wux-button--disabled {
background-color: transparent!important;
color: #e6e6e6!important
}
.wux-button--light.wux-button--clear.wux-button--hover {
opacity: .3!important
}
.wux-button--stable,
.wux-button--stable--disabled {
border-color: transparent!important;
background-color: #f8f8f8!important;
color: #444!important
}
.wux-button--stable.wux-button--hover {
background-color: #dfdfdf!important;
color: #444!important
}
.wux-button--stable.wux-button--outline,
.wux-button--stable.wux-button--outline.wux-button--disabled {
border-color: #f8f8f8!important;
background-color: transparent!important;
color: #f8f8f8!important
}
.wux-button--stable.wux-button--outline.wux-button--hover {
background-color: #f8f8f8!important;
color: #fff!important
}
.wux-button--stable.wux-button--clear,
.wux-button--stable.wux-button--clear.wux-button--disabled {
background-color: transparent!important;
color: #dfdfdf!important
}
.wux-button--stable.wux-button--clear.wux-button--hover {
opacity: .3!important
}
.wux-button--positive,
.wux-button--positive--disabled {
border-color: transparent!important;
background-color: #387ef5!important;
color: #fff!important
}
.wux-button--positive.wux-button--hover {
background-color: #0c60ee!important;
color: #fff!important
}
.wux-button--positive.wux-button--outline,
.wux-button--positive.wux-button--outline.wux-button--disabled {
border-color: #387ef5!important;
background-color: transparent!important;
color: #387ef5!important
}
.wux-button--positive.wux-button--outline.wux-button--hover {
background-color: #387ef5!important;
color: #fff!important
}
.wux-button--positive.wux-button--clear,
.wux-button--positive.wux-button--clear.wux-button--disabled {
background-color: transparent!important;
color: #0c60ee!important
}
.wux-button--positive.wux-button--clear.wux-button--hover {
opacity: .3!important
}
.wux-button--calm,
.wux-button--calm--disabled {
border-color: transparent!important;
background-color: #11c1f3!important;
color: #fff!important
}
.wux-button--calm.wux-button--hover {
background-color: #0a9dc7!important;
color: #fff!important
}
.wux-button--calm.wux-button--outline,
.wux-button--calm.wux-button--outline.wux-button--disabled {
border-color: #11c1f3!important;
background-color: transparent!important;
color: #11c1f3!important
}
.wux-button--calm.wux-button--outline.wux-button--hover {
background-color: #11c1f3!important;
color: #fff!important
}
.wux-button--calm.wux-button--clear,
.wux-button--calm.wux-button--clear.wux-button--disabled {
background-color: transparent!important;
color: #0a9dc7!important
}
.wux-button--calm.wux-button--clear.wux-button--hover {
opacity: .3!important
}
.wux-button--assertive,
.wux-button--assertive--disabled {
border-color: transparent!important;
background-color: #ef473a!important;
color: #fff!important
}
.wux-button--assertive.wux-button--hover {
background-color: #e42112!important;
color: #fff!important
}
.wux-button--assertive.wux-button--outline,
.wux-button--assertive.wux-button--outline.wux-button--disabled {
border-color: #ef473a!important;
background-color: transparent!important;
color: #ef473a!important
}
.wux-button--assertive.wux-button--outline.wux-button--hover {
background-color: #ef473a!important;
color: #fff!important
}
.wux-button--assertive.wux-button--clear,
.wux-button--assertive.wux-button--clear.wux-button--disabled {
background-color: transparent!important;
color: #e42112!important
}
.wux-button--assertive.wux-button--clear.wux-button--hover {
opacity: .3!important
}
.wux-button--balanced,
.wux-button--balanced--disabled {
border-color: transparent!important;
background-color: #33cd5f!important;
color: #fff!important
}
.wux-button--balanced.wux-button--hover {
background-color: #28a54c!important;
color: #fff!important
}
.wux-button--balanced.wux-button--outline,
.wux-button--balanced.wux-button--outline.wux-button--disabled {
border-color: #33cd5f!important;
background-color: transparent!important;
color: #33cd5f!important
}
.wux-button--balanced.wux-button--outline.wux-button--hover {
background-color: #33cd5f!important;
color: #fff!important
}
.wux-button--balanced.wux-button--clear,
.wux-button--balanced.wux-button--clear.wux-button--disabled {
background-color: transparent!important;
color: #28a54c!important
}
.wux-button--balanced.wux-button--clear.wux-button--hover {
opacity: .3!important
}
.wux-button--energized,
.wux-button--energized--disabled {
border-color: transparent!important;
background-color: #ffc900!important;
color: #fff!important
}
.wux-button--energized.wux-button--hover {
background-color: #cca100!important;
color: #fff!important
}
.wux-button--energized.wux-button--outline,
.wux-button--energized.wux-button--outline.wux-button--disabled {
border-color: #ffc900!important;
background-color: transparent!important;
color: #ffc900!important
}
.wux-button--energized.wux-button--outline.wux-button--hover {
background-color: #ffc900!important;
color: #fff!important
}
.wux-button--energized.wux-button--clear,
.wux-button--energized.wux-button--clear.wux-button--disabled {
background-color: transparent!important;
color: #cca100!important
}
.wux-button--energized.wux-button--clear.wux-button--hover {
opacity: .3!important
}
.wux-button--royal,
.wux-button--royal--disabled {
border-color: transparent!important;
background-color: #886aea!important;
color: #fff!important
}
.wux-button--royal.wux-button--hover {
background-color: #643de4!important;
color: #fff!important
}
.wux-button--royal.wux-button--outline,
.wux-button--royal.wux-button--outline.wux-button--disabled {
border-color: #886aea!important;
background-color: transparent!important;
color: #886aea!important
}
.wux-button--royal.wux-button--outline.wux-button--hover {
background-color: #886aea!important;
color: #fff!important
}
.wux-button--royal.wux-button--clear,
.wux-button--royal.wux-button--clear.wux-button--disabled {
background-color: transparent!important;
color: #643de4!important
}
.wux-button--royal.wux-button--clear.wux-button--hover {
opacity: .3!important
}
.wux-button--dark,
.wux-button--dark--disabled {
border-color: transparent!important;
background-color: #444!important;
color: #fff!important
}
.wux-button--dark.wux-button--hover {
background-color: #2b2b2b!important;
color: #fff!important
}
.wux-button--dark.wux-button--outline,
.wux-button--dark.wux-button--outline.wux-button--disabled {
border-color: #444!important;
background-color: transparent!important;
color: #444!important
}
.wux-button--dark.wux-button--outline.wux-button--hover {
background-color: #444!important;
color: #fff!important
}
.wux-button--dark.wux-button--clear,
.wux-button--dark.wux-button--clear.wux-button--disabled {
background-color: transparent!important;
color: #2b2b2b!important
}
.wux-button--dark.wux-button--clear.wux-button--hover {
opacity: .3!important
}
.wux-button--light.wux-button--outline {
border-color: #ddd!important;
background-color: transparent!important;
color: #ddd!important
}
.wux-button--light.wux-button--outline.wux-button--hover {
background-color: #ddd!important;
color: #fff!important
}
.wux-button--stable.wux-button--outline {
border-color: #b2b2b2!important;
background-color: transparent!important;
color: #b2b2b2!important
}
.wux-button--stable.wux-button--outline.wux-button--hover {
background-color: #b2b2b2!important;
color: #fff!important
}