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