style：模具类型-字段调整、添加复制按钮
parent
7b5b45d8f8
commit
38ab4c77b2
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<view class="copy-btn" :class="sizeClass" @click.stop="handleCopy">
|
||||
<text :class="iconClass">📋</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
content: {
|
||||
type: [String, Number],
|
||||
required: true,
|
||||
default: ''
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'small',
|
||||
validator: (value) => ['small', 'medium', 'large'].includes(value)
|
||||
},
|
||||
successMessage: {
|
||||
type: String,
|
||||
default: '复制成功'
|
||||
},
|
||||
failMessage: {
|
||||
type: String,
|
||||
default: '复制失败'
|
||||
},
|
||||
emptyMessage: {
|
||||
type: String,
|
||||
default: '没有可复制的内容'
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['copy', 'error'])
|
||||
|
||||
const sizeClass = computed(() => {
|
||||
return `copy-btn-${props.size}`
|
||||
})
|
||||
|
||||
const iconClass = computed(() => {
|
||||
return `copy-icon-${props.size}`
|
||||
})
|
||||
|
||||
function handleCopy() {
|
||||
const content = String(props.content || '').trim()
|
||||
|
||||
if (!content) {
|
||||
uni.showToast({ title: props.emptyMessage, icon: 'none' })
|
||||
emit('error', { type: 'empty', content: props.content })
|
||||
return
|
||||
}
|
||||
|
||||
uni.setClipboardData({
|
||||
data: content,
|
||||
success: () => {
|
||||
uni.showToast({ title: props.successMessage, icon: 'success' })
|
||||
emit('copy', { content })
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.showToast({ title: props.failMessage, icon: 'none' })
|
||||
emit('error', { type: 'fail', error: err, content: props.content })
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.copy-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
border-radius: 8rpx;
|
||||
background: rgba(26, 58, 92, 0.08);
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:active {
|
||||
background: rgba(26, 58, 92, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.copy-btn-small {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
.copy-btn-medium {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
}
|
||||
|
||||
.copy-btn-large {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
|
||||
.copy-icon-small {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.copy-icon-medium {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.copy-icon-large {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue