ElementPlus+Vue3使用cdn方式编写页面及引入图标

完整代码

  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>
posted @ 2024-03-04 11:28  编程小妹  阅读(2176)  评论(0)    收藏  举报