You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.2 KiB
Vue
50 lines
1.2 KiB
Vue
<template>
|
|
<base-container>
|
|
<h2 class="pt-5 pb-5">tui-image-editor使用教程</h2>
|
|
<el-button
|
|
type="primary"
|
|
style="width: 200px"
|
|
@click="openImageEditor"
|
|
>点击打开图片标注
|
|
</el-button>
|
|
<imageEditor
|
|
v-if="showImageEditor"
|
|
@close="showImageEditor = false"
|
|
:imgList="imgList"
|
|
/>
|
|
</base-container>
|
|
</template>
|
|
|
|
<script setup lang="jsx">
|
|
import { ref } from 'vue';
|
|
import ImageEditor from './components/image-editor.vue';
|
|
|
|
defineOptions({
|
|
name: 'TuiImageEditor',
|
|
});
|
|
|
|
const showImageEditor = ref(false);
|
|
const imgList = ref([
|
|
{
|
|
path: 'http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
|
|
name: '1',
|
|
},
|
|
{
|
|
path: 'http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024',
|
|
name: '2',
|
|
},
|
|
{
|
|
path: 'http://gips2.baidu.com/it/u=207216414,2485641185&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=720',
|
|
name: '3',
|
|
},
|
|
{
|
|
path: '/absRes/tuiImageEditor/img/test.jpg',
|
|
name: '3',
|
|
},
|
|
]);
|
|
|
|
const openImageEditor = () => {
|
|
showImageEditor.value = true;
|
|
};
|
|
</script>
|