【增加】Dall3 增加图片尺寸选择
This commit is contained in:
parent
9460c264eb
commit
5232a2bf3f
@ -49,6 +49,22 @@
|
|||||||
</div>
|
</div>
|
||||||
</el-space>
|
</el-space>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="image-size">
|
||||||
|
<div>
|
||||||
|
<el-text tag="b">尺寸</el-text>
|
||||||
|
</div>
|
||||||
|
<el-space wrap class="size-list">
|
||||||
|
<div class="size-item"
|
||||||
|
v-for="imageSize in imageSizeList"
|
||||||
|
:key="imageSize.key"
|
||||||
|
@click="handlerSizeClick(imageSize)">
|
||||||
|
<div :class="selectImageSize === imageSize ? 'size-wrapper selectImageSize' : 'size-wrapper'">
|
||||||
|
<div :style="imageSize.style"></div>
|
||||||
|
</div>
|
||||||
|
<div class="size-font">{{ imageSize.key }}</div>
|
||||||
|
</div>
|
||||||
|
</el-space>
|
||||||
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@ -60,12 +76,18 @@ interface ImageModelVO {
|
|||||||
image: string
|
image: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// image 大小
|
||||||
|
interface ImageSizeVO {
|
||||||
|
key: string
|
||||||
|
style: string,
|
||||||
|
}
|
||||||
|
|
||||||
// 定义属性
|
// 定义属性
|
||||||
const prompt = ref<string>('') // 提示词
|
const prompt = ref<string>('') // 提示词
|
||||||
const selectHotWord = ref<string>('') // 选中的热词
|
const selectHotWord = ref<string>('') // 选中的热词
|
||||||
const hotWords = ref<string[]>(['中国旗袍', '古装美女', '卡通头像', '机甲战士', '童话小屋', '中国长城']) // 热词
|
const hotWords = ref<string[]>(['中国旗袍', '古装美女', '卡通头像', '机甲战士', '童话小屋', '中国长城']) // 热词
|
||||||
const selectModel = ref<any>() // 选中的热词
|
const selectModel = ref<any>() // 选中的热词
|
||||||
const models = ref<[ImageModelVO]>([
|
const models = ref<ImageModelVO[]>([
|
||||||
{
|
{
|
||||||
key: 'qinxi',
|
key: 'qinxi',
|
||||||
name: '清晰',
|
name: '清晰',
|
||||||
@ -78,6 +100,21 @@ const models = ref<[ImageModelVO]>([
|
|||||||
},
|
},
|
||||||
]) // 模型
|
]) // 模型
|
||||||
|
|
||||||
|
const selectImageSize = ref<ImageSizeVO>({} as ImageSizeVO) // 选中 size
|
||||||
|
const imageSizeList = ref<ImageSizeVO[]>([
|
||||||
|
{
|
||||||
|
key: '1:1',
|
||||||
|
style: 'width: 30px; height: 30px;background-color: #dcdcdc;',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '3:5',
|
||||||
|
style: 'width: 30px; height: 50px;background-color: #dcdcdc;',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '5:3',
|
||||||
|
style: 'width: 50px; height: 30px;background-color: #dcdcdc;',
|
||||||
|
}
|
||||||
|
]) // size
|
||||||
|
|
||||||
// 定义 Props
|
// 定义 Props
|
||||||
const props = defineProps({})
|
const props = defineProps({})
|
||||||
@ -99,13 +136,24 @@ const handlerHotWordClick = async (hotWord: string) => {
|
|||||||
* 模型 - click
|
* 模型 - click
|
||||||
*/
|
*/
|
||||||
const handlerModelClick = async (model: ImageModelVO) => {
|
const handlerModelClick = async (model: ImageModelVO) => {
|
||||||
if (selectModel.value === model.key) {
|
if (selectModel.value === model) {
|
||||||
selectModel.value = ''
|
selectModel.value = {} as ImageModelVO
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
selectModel.value = model
|
selectModel.value = model
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* size - click
|
||||||
|
*/
|
||||||
|
const handlerSizeClick = async (imageSize: ImageSizeVO) => {
|
||||||
|
if (selectImageSize.value === imageSize) {
|
||||||
|
selectImageSize.value = {} as ImageSizeVO
|
||||||
|
return
|
||||||
|
}
|
||||||
|
selectImageSize.value = imageSize
|
||||||
|
console.log(imageSize)
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@ -155,9 +203,50 @@ const handlerModelClick = async (model: ImageModelVO) => {
|
|||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
// 比例
|
|
||||||
|
|
||||||
|
|
||||||
|
// 尺寸
|
||||||
|
.image-size {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 30px;
|
||||||
|
|
||||||
|
.size-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
|
.size-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.size-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 7px;
|
||||||
|
padding: 4px;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.size-font {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #3e3e3e;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectImageSize {
|
||||||
|
border: 1px solid #1293ff !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user