90 lines
1.4 KiB
Vue
90 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<view class="share-actions">
|
||
|
|
<view v-if="showSave" class="action-btn save-btn" @click="handleSave">
|
||
|
|
<text class="btn-text">{{ saveText }}</text>
|
||
|
|
</view>
|
||
|
|
<button
|
||
|
|
v-if="showShare"
|
||
|
|
class="action-btn share-btn"
|
||
|
|
open-type="share"
|
||
|
|
>
|
||
|
|
<text class="btn-text">{{ shareText }}</text>
|
||
|
|
</button>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { defineProps, defineEmits } from 'vue'
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
// 是否显示保存按钮
|
||
|
|
showSave: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
// 是否显示分享按钮
|
||
|
|
showShare: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
// 保存按钮文字
|
||
|
|
saveText: {
|
||
|
|
type: String,
|
||
|
|
default: '保存图片'
|
||
|
|
},
|
||
|
|
// 分享按钮文字
|
||
|
|
shareText: {
|
||
|
|
type: String,
|
||
|
|
default: '分享微信'
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const emit = defineEmits(['save', 'share'])
|
||
|
|
|
||
|
|
function handleSave() {
|
||
|
|
emit('save')
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.share-actions {
|
||
|
|
display: flex;
|
||
|
|
gap: 20rpx;
|
||
|
|
padding: 0 30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.action-btn {
|
||
|
|
flex: 1;
|
||
|
|
height: 80rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
border-radius: 12rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.save-btn {
|
||
|
|
border: 2rpx solid #0074ff;
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.save-btn .btn-text {
|
||
|
|
color: #0074ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.share-btn {
|
||
|
|
background: #0074ff;
|
||
|
|
border: none;
|
||
|
|
padding: 0;
|
||
|
|
line-height: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
.share-btn::after {
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.share-btn .btn-text {
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
</style>
|