完整代码
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=1000, initial-scale=1.0">
7 <title>模型管理</title>
8 <!-- Import style -->
9 <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
10 <!-- Import Vue 3 -->
11 <script src="//unpkg.com/vue@3"></script>
12 <!-- Import component library -->
13 <script src="//unpkg.com/element-plus"></script>
14 <script src="//unpkg.com/@element-plus/icons-vue"></script>
15 </head>
16
17 <body>
18 <div id="app">
19 <div class="container">
20 <el-form :model="form" label-width="80px" label-position="left">
21 <el-text class="mx-1" size="large">模型管理 - </el-text>
22 <el-text class="b" size="large">新增模型</el-text>
23 <el-form-item label="模型标题" style="margin-top: 30px;">
24 <el-input v-model="form.name" size="large" placeholder="请输入模型标题" />
25 </el-form-item>
26 <el-form-item label="备注">
27 <el-input v-model="form.desc" type="textarea" rows="5" placeholder="请输入模型标题" />
28 </el-form-item>
29 <el-form-item label="模型地址">
30 <el-input v-model="form.name" size="large" placeholder="请输入模型标题" />
31 </el-form-item>
32 <el-form-item label="模型动作">
33 <el-input v-model="form.name" size="large" placeholder="请输入模型标题" />
34 </el-form-item>
35 <el-form-item label="封面">
36 <el-upload v-model:file-list="fileList" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
37 list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
38 <el-icon>
39 <Plus />
40 </el-icon>
41 </el-upload>
42 <el-dialog v-model="dialogVisible">
43 <img w-full :src="dialogImageUrl" alt="Preview Image" />
44 </el-dialog>
45 </el-form-item>
46 <el-form-item>
47 <el-button type="primary" @click="">提交</el-button>
48 <el-button>取消</el-button>
49 </el-form-item>
50 </el-form>
51 </div>
52 </div>
53
54 <script>
55 const { createApp, ref } = Vue
56 const App = {
57 setup() {
58 const form = ref({
59 name: '',
60 desc: '',
61 })
62 const dialogImageUrl = ref('');
63 const dialogVisible = ref(false);
64 const disabled = ref(false);
65 const fileList = ref([]);
66 const handleRemove = (file) => {
67 console.log(file)
68 }
69 const handlePictureCardPreview = (file) => {
70 dialogImageUrl.value = file.url
71 dialogVisible.value = true
72 }
73 const handleDownload = (file) => {
74 console.log(file)
75 }
76 return {
77 form,
78 dialogImageUrl,
79 dialogVisible,
80 disabled,
81 fileList,
82 handleRemove,
83 handlePictureCardPreview,
84 handleDownload
85 }
86 }
87 }
88
89 const app = createApp(App);
90 app.component('Plus', ElementPlusIconsVue.Plus)
91 app.use(ElementPlus);
92 app.mount("#app");
93 </script>
94
95 <style>
96 * {
97 margin: 0;
98 padding: 0;
99 list-style: none;
100 }
101
102 #app {
103 width: 1000px;
104 height: 650px;
105 margin: 30px auto;
106 border: 2px solid #cccccc;
107 }
108
109 .container {
110 width: 600px;
111 margin: 50px auto;
112 }
113
114 .b {
115 font-weight: 600;
116 }
117
118 .el-input {
119 --el-input-width: 220px;
120 }
121 </style>
122 </body>
123
124 </html>
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=1000, initial-scale=1.0"> <title>模型管理</title> <!-- Import style --> <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /> <!-- Import Vue 3 --> <script src="//unpkg.com/vue@3"></script> <!-- Import component library --> <script src="//unpkg.com/element-plus"></script> <script src="//unpkg.com/@element-plus/icons-vue"></script> </head>
<body> <div id="app"> <div class="container"> <el-form :model="form" label-width="80px" label-position="left"> <el-text class="mx-1" size="large">模型管理 - </el-text> <el-text class="b" size="large">新增模型</el-text> <el-form-item label="模型标题" style="margin-top: 30px;"> <el-input v-model="form.name" size="large" placeholder="请输入模型标题" /> </el-form-item> <el-form-item label="备注"> <el-input v-model="form.desc" type="textarea" rows="5" placeholder="请输入模型标题" /> </el-form-item> <el-form-item label="模型地址"> <el-input v-model="form.name" size="large" placeholder="请输入模型标题" /> </el-form-item> <el-form-item label="模型动作"> <el-input v-model="form.name" size="large" placeholder="请输入模型标题" /> </el-form-item> <el-form-item label="封面"> <el-upload v-model:file-list="fileList" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"> <el-icon> <Plus /> </el-icon> </el-upload> <el-dialog v-model="dialogVisible"> <img w-full :src="dialogImageUrl" alt="Preview Image" /> </el-dialog> </el-form-item> <el-form-item> <el-button type="primary" @click="">提交</el-button> <el-button>取消</el-button> </el-form-item> </el-form> </div> </div>
<script> const { createApp, ref } =Vue constApp= { setup() { constform=ref({ name:'', desc:'', }) constdialogImageUrl=ref(''); constdialogVisible=ref(false); constdisabled=ref(false); constfileList=ref([]); consthandleRemove= (file) => { console.log(file) } consthandlePictureCardPreview= (file) => { dialogImageUrl.value=file.url dialogVisible.value=true } consthandleDownload= (file) => { console.log(file) } return { form, dialogImageUrl, dialogVisible, disabled, fileList, handleRemove, handlePictureCardPreview, handleDownload } } }
constapp=createApp(App); app.component('Plus', ElementPlusIconsVue.Plus) app.use(ElementPlus); app.mount("#app"); </script>
<style> * { margin: 0; padding: 0; list-style: none; }
#app { width: 1000px; height: 650px; margin: 30pxauto; border: 2pxsolid#cccccc; }
.container { width: 600px; margin: 50pxauto; }
.b { font-weight: 600; }
.el-input { --el-input-width: 220px; } </style> </body>
</html> 标签：ElementPlus,const,margin,cdn,width,file,Vue3,ref,app From： https://www.cnblogs.com/wzhqueeen/p/18051474