bugfix: 剪切组件顶部来源按钮样式
This commit is contained in:
@@ -27,7 +27,7 @@
|
||||
</div>
|
||||
<div
|
||||
class="origin-item product"
|
||||
:class="{ selected: currentOrigin === 'mainProducImage' }"
|
||||
:class="{ selected: currentOrigin === 'mainProductImage' }"
|
||||
@click="handleChangeOrigin('mainProductImage')"
|
||||
>
|
||||
{{ $t("Seller.mainProductImage") }}
|
||||
@@ -79,14 +79,12 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed } from "vue"
|
||||
import ImageClip from "./image-clip.vue"
|
||||
import { useI18n } from "vue-i18n"
|
||||
const { t } = useI18n()
|
||||
import { ref, reactive, computed } from "vue"
|
||||
import ImageClip from "./image-clip.vue"
|
||||
import { useI18n } from "vue-i18n"
|
||||
const { t } = useI18n()
|
||||
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
default: ""
|
||||
@@ -95,9 +93,9 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const tips = computed(() => {
|
||||
const tips = computed(() => {
|
||||
if (props.type === "cover") {
|
||||
return t("Seller.imageClipCoverTip")
|
||||
}
|
||||
@@ -110,9 +108,9 @@ const tips = computed(() => {
|
||||
if (props.type === "apparel") {
|
||||
return t("Seller.imageClipApparelTip")
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const data = reactive({
|
||||
const data = reactive({
|
||||
url: "",
|
||||
title: "Crop Image",
|
||||
preview_url: "",
|
||||
@@ -120,17 +118,17 @@ const data = reactive({
|
||||
isPreview: true,
|
||||
callback: null,
|
||||
isProduct: false // 是否商品编辑
|
||||
})
|
||||
})
|
||||
|
||||
const currentOrigin = ref("sketch")
|
||||
const coverOrigin = ref([])
|
||||
const handleChangeOrigin = (type) => {
|
||||
const currentOrigin = ref("sketch")
|
||||
const coverOrigin = ref([])
|
||||
const handleChangeOrigin = (type) => {
|
||||
currentOrigin.value = type
|
||||
data.url = coverOrigin.value.filter((el) => el.type === type)[0].url
|
||||
}
|
||||
}
|
||||
|
||||
const show = ref(false)
|
||||
const open = (url, callback, options, origin) => {
|
||||
const show = ref(false)
|
||||
const open = (url, callback, options, origin) => {
|
||||
if (!props.isProduct) {
|
||||
if (!url || !callback) return
|
||||
}
|
||||
@@ -149,27 +147,27 @@ const open = (url, callback, options, origin) => {
|
||||
data.url = origin[0].url
|
||||
}
|
||||
show.value = true
|
||||
}
|
||||
const onCancel = () => {
|
||||
}
|
||||
const onCancel = () => {
|
||||
show.value = false
|
||||
}
|
||||
const imageClipRef = ref(null)
|
||||
const onSubmit = () => {
|
||||
}
|
||||
const imageClipRef = ref(null)
|
||||
const onSubmit = () => {
|
||||
imageClipRef.value.getCropBlob().then((blob) => {
|
||||
if (data.callback) data.callback(blobToFile(blob, "image.png"))
|
||||
onCancel()
|
||||
})
|
||||
}
|
||||
// 将blob转换为file对象
|
||||
const blobToFile = (blob, fileName) => {
|
||||
}
|
||||
// 将blob转换为file对象
|
||||
const blobToFile = (blob, fileName) => {
|
||||
return new File([blob], fileName, { type: blob.type })
|
||||
}
|
||||
defineExpose({
|
||||
}
|
||||
defineExpose({
|
||||
open
|
||||
})
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.image-clip-dialog-box {
|
||||
.image-clip-dialog-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
@@ -332,5 +330,5 @@ defineExpose({
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user