123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154 |
- <template>
- <view
- class="mix-btn-content"
- :class="{
- disabled: loading || disabled || dead,
- }"
- :style="[
- {marginTop: marginTop}
- ]"
- @click="confirm"
- >
- <image v-if="loading" class="loading-icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAE3UlEQVRoQ82Z7ZEQNwyGrQoCFQQqgFRAqCBcBSEVQCqAqyBJBTkqACoAKsilAo4KQioQ8+zIO16tvbaWM4P/7lrSq2/JkiYeVX2SUnpmLP4SkTez2MkswgbitaN/MQvMTCBo/xcH5IOI/DxDeWEgqvq0cJfLloZV9X1K6VEEiKo+NNpvo5YLAYm4SxSIqt5JKf2TUrqXUvosIncjlosCqbnLTUrpJxH5XDI+AeRlSumF0Qi7YBTIn4VblXLjYgiynggQVcUKWAOrcB6LCK45fKJAYPixQh1rYBWss5wgELIbqZrzSkSIw9AJATEBW1Z5IyIXUSCqShZ7Z/f+Tyk9LBUyiuYMEMyP5n+oMFldYtQiqopLka04OxedBsSsgun/rjC5EZH7o65lqTzT+WTW2CSN00CKtgKCtBXVoGtoHL6/iciVql6llH51glAflliwdEu85QBf7vUEt8SQvPttXMv5a6YJcUy+BrIJUvp2yX9JnQ1apeuVsdZNtwacvi1nx02744GUubwUDuvAGAutpm9ofRXKwOQMdJWta0L9VzAg4123rKGqWBbZyJr5/C4iyLQcD+R5SumPA/NilZci8qpwDx/43cbQ3COncZQD390xRVAkfX8G/+elUj0Q/JWYeNDxVf5BI9cmFFpHW6vWB3ydTEWq3cWFWQyF+nrywRS5i9tq+rVsgtlqKbaUsav9HiD/XVWxABbKSYBfqC9YoJkMmnXEtIJf5sGoJlM3SEeBWOdLhS/jgOuXxKfv5TzdbkE010ETviWH1m0C8YnmrVlhky1biukCyRct8AD0Y0Hs1lzL6hf0yYpPpzaNlqlyYL+PMht1szP/DVvkDPFveWcBYnHg24mWHPRTSx35no5YtqADjZxmEYsQqf1rsYJSy/R7RJaO4BIgrbbkUCYRmeKWqkrrMgoiy7gA6bUlNUCfRMTn+681xnJfVdFwr7PwvC4AAnqWCrU6UROOKvtkZsayVD+qGGL2ZnUPA5QntRYR1jTNLnWU84z/pvj5DEF7NMNArKmjraZ1oAM+NZp6wcwjyFb/nnHbYSCWFmmtyyBfR9eexnrf3ZBGzKKkoT4L2l0gB8MN92c2jdCnNGym0pZCjtp4NM9scLQsO72+aRRDBKcclHMQrssscthN7IAUQ74fbkrerG4gfusPN8afoc63TEyFKK661amNumz9WmmYGsKQ4/e8xA7AYUJr300AqsodVkMIVxt3SSjw8fWtutWJLB92A79VYt/ibLYb1suxh1rrj1sV7fbGpelt7IZHOQdxh9XSSnMECAM/brQrhJUlGzKsQFz7s8aT3Su3L4eLa/sfi+dnhw2fXdZy7Uo3Dip7LVzvXnYtt43cZLhKs9p9SrBxI7t1ex3Uy/XO5MSRb/83a88OEHo8rJxdhonzcUSG8t9uHWkRVlWSQrk429WUIyAWX34ZPrT/rcl0CkjjLXHnGj0gBqZ8NK0+441Y6SwQ1p1lq1IN1kEgfhl+qsiGgVSCtPnKNALErFI+QRym43CL0mghCNDyTYPfmhoMAMG6BH5uTcLviCGLVBYVh69Mo0BqhTW6EwgBMYb5rb078gaBlC8B4a46DMTAEKDXvZ4qAiS7Mu3L1MFqJAVWpr4ytYa1HOF5yiKjDFq91uj9yH9TgZgbLiPB7O3LF2dInShyDo35AAAAAElFTkSuQmCC"></image>
- <text v-if="icon" class="mix-icon" :class="icon" :style="{fontSize: iconSize + 'rpx'}"></text>
- <text class="mix-text">{{ text }}</text>
- </view>
- </template>
- <script>
- /**
- * 按钮组件
- * @prop text 按钮显示文字
- * @prop icon 按钮图标
- * @prop iconSize 按钮显示文字
- * @prop isConfirm 点击后是否处理loading状态
- * @prop disabled 按钮禁用
- * @prop marginTop 按钮上边距
- */
- let stopTimer = null;
- export default {
- name: 'MixButton',
- data() {
- return {
- dead: false,
- loading: false
- };
- },
- props: {
- text: {
- type: String,
- default: '提交'
- },
- icon: {
- type: String,
- default: ''
- },
- iconSize: {
- type: Number,
- default: 32
- },
- isConfirm: {
- type: Boolean,
- default: true
- },
- disabled: {
- type: Boolean,
- default: false
- },
- marginTop: {
- type: String,
- default: '0rpx'
- }
- },
- methods: {
- stop(){
- if(stopTimer){
- clearTimeout(stopTimer);
- stopTimer = null;
- }
- this.loading = false;
- },
- death(){
- this.loading = false;
- this.dead = true;
- },
- confirm(){
- if(this.dead){
- return;
- }
- if(this.loading || this.disabled){
- return;
- }
- if(this.isConfirm){
- this.loading = true;
-
- stopTimer = setTimeout(()=>{
- this.loading = false;
- clearTimeout(stopTimer);
- stopTimer = null;
- }, 10000)
- }
- this.$emit('onConfirm');
- }
- }
- }
- </script>
- <style scoped lang='scss'>
- .mix-btn-content{
- display: flex;
- align-items: center;
- justify-content: center;
- width: 610rpx;
- height: 88rpx;
- margin: 0 auto;
- font-size: 32rpx;
- color: #fff;
- border-radius: 100rpx;
- background-color: $base-color;
- position: relative;
-
- &:after{
- content: '';
- position: absolute;
- left: 50%;
- top: 25%;
- transform: translateX(-50%);
- width: 85%;
- height: 85%;
- background: linear-gradient(131deg, rgba(255,115,138,1) 0%, rgba(255,83,111,1) 100%);
- border-radius: 100rpx;
- opacity: 0.4;
- filter:blur(10rpx);
- }
- &.disabled {
- opacity: .65;
- }
- .mix-text{
- position: relative;
- z-index: 1;
- }
- .mix-icon{
- position: relative;
- z-index: 1;
- margin-right: 8rpx;
- }
- .loading-icon{
- width: 34rpx;
- height: 34rpx;
- transform-origin:50% 50%;
- margin-right: 16rpx;
- animation: rotate 2s linear infinite;
- position: relative;
- z-index: 1;
- }
- }
- @keyframes rotate{
- from {
- transform:rotate(0deg)
- }
- to {
- transform:rotate(360deg)
- }
- }
- </style>
|