JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-05-07 02:51:10 +08:00
Code Issues Projects Releases Wiki Activity

fix(editor): ui-select样式优化

Browse Source
This commit is contained in:
roymondchen 2022-05-13 20:13:32 +08:00 committed by jia000
parent 2731609526
commit 27a1ff8527
1 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/editor/src/fields/UISelect.vue
View File

@ -1,16 +1,20 @@
<template> <template>
<div class="m-fields-ui-select" v-if="uiSelectMode" @click="cancelHandler"> <div class="m-fields-ui-select" v-if="uiSelectMode" @click="cancelHandler">
<i class="el-icon-delete" style="color: rgb(221, 75, 57)">取消</i> <el-button type="danger" :icon="Delete" text style="padding: 0">取消</el-button>
</div> </div>
<div class="m-fields-ui-select" v-else @click="startSelect"> <div class="m-fields-ui-select" v-else @click="startSelect" style="display: flex">
<i class="el-icon-thumb"></i> <el-tooltip content="清除">
<span>{{ val ? toName + '_' + val : '点击此处选择' }}</span> <el-button v-if="val" style="padding: 0" type="danger" :icon="Close" text @click.stop="deleteHandler"></el-button>
<i class="el-icon-delete" @click.stop="deleteHandler" v-if="val"></i> </el-tooltip>
<el-tooltip :content="val ? toName + '_' + val : '点击此处选择'">
<el-button text style="padding: 0; margin: 0">{{ val ? toName + '_' + val : '点击此处选择' }}</el-button>
</el-tooltip>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, inject, ref } from 'vue'; import { computed, defineComponent, inject, markRaw, ref } from 'vue';
import { Close, Delete, Pointer } from '@element-plus/icons';
import { FormState } from '@tmagic/form'; import { FormState } from '@tmagic/form';
@ -60,6 +64,10 @@ export default defineComponent({
}; };
return { return {
Delete: markRaw(Delete),
Pointer: markRaw(Pointer),
Close: markRaw(Close),
val, val,
uiSelectMode, uiSelectMode,
toName: computed(() => { toName: computed(() => {