如何在 html 项目中引入并使用 vue.js、element-ui

  • A+
所属分类:Web前端
摘要

以 CameraRelation 这个模块为例:一、在html中引用vue.js、element-ui的css、element-ui的js

以 CameraRelation 这个模块为例:

一、在html中引用vue.js、element-ui的css、element-ui的js

在index.html中添加:

如何在 html 项目中引入并使用 vue.js、element-ui如何在 html 项目中引入并使用 vue.js、element-ui

<link type="text/css" rel="stylesheet" href="build/element-ui/index.css"> <script type="text/javascript" src="build/vue/vue.js"></script> <script type="text/javascript" src="build/element-ui/index.js"></script>

View Code

二、编写模块的html

cameraRelation.html代码:

如何在 html 项目中引入并使用 vue.js、element-ui如何在 html 项目中引入并使用 vue.js、element-ui

<html>  <head>     <style type="text/css" scoped>         .rightContainer {             line-height: 38px;         }     </style> </head>  <body>     <div id="cameraRelation">         <el-dialog title="摄像机设备关联模型" :visible.sync="dialogVisible" width="1300px" :before-close="handleClose"             :close-on-press-escape="false" :close-on-click-modal="false">              <el-row :gutter="20">                 <el-col :span="6" class="rightContainer">                     <span>模型ID:</span>                     <span>{{modelIds}}</span>                 </el-col>                 <el-col :span="12" class="rightContainer">                     <span>模型名称:</span>                     <span>{{modelNames}}</span>                 </el-col>                 <el-col :span="4">                     <el-input placeholder="请输入内容" v-model="input" clearable>                     </el-input>                 </el-col>                 <el-col :span="2">                     <el-button type="primary" @click="search()">查询</el-button>                 </el-col>             </el-row>              <el-row>                 <el-table ref="singleTable" :data="tableData" highlight-current-row                     @current-change="handleCurrentChange" style="width: 100%" height="400">                     <el-table-column type="index" width="50">                     </el-table-column>                     <el-table-column property="id" label="ID" width="400">                     </el-table-column>                     <el-table-column property="name" label="摄像机名称">                     </el-table-column>                     <el-table-column property="modelId" label="关联模型ID集合" width="200">                     </el-table-column>                     <el-table-column property="modelName" label="关联模型名称集合" width="200">                     </el-table-column>                 </el-table>                 <!--                 <div style="margin-top: 20px">                     <el-button @click="setCurrent(tableData[1])">选中第二行</el-button>                     <el-button @click="setCurrent()">取消选择</el-button>                 </div>                  -->             </el-row>              <span slot="footer" class="dialog-footer">                 <el-button type="primary" @click="deleteRelation">删除关联</el-button>                 <el-button type="primary" @click="ok">关 联</el-button>             </span>          </el-dialog>     </div> </body>  </html>

View Code

三、编写模块的js

CameraRelation.js代码:

如何在 html 项目中引入并使用 vue.js、element-ui如何在 html 项目中引入并使用 vue.js、element-ui

/**  * 平台摄像机关联模型  */  import { API } from '../js.my/API.js'; import { Msg } from '../js.my/Msg.js';  let CameraRelation = function () {      let api = new API();     let msg = new Msg();      let vue = new Vue({         el: "#cameraRelation",         created() {          },         data() {             return {                 dialogVisible: false,                 input: '',                 modelIds: '',                 modelNames: '',                 tableData: [{                     id: '',                     name: '',                     modelId: '',                     modelName: ''                 }],                 currentRow: null             };         },         methods: {             handleClose(done) {                 done();             },             ok() {                 if (this.currentRow) {                     msg.confirm("确定关联?", "提示", () => {                         let data = {                             id: this.currentRow.id,                             name: this.currentRow.name,                             model_id: this.modelIds,                             model_name: this.modelNames                         }                          api.updatePtCameraInfo(data, () => {                             this.search();                             msg.show("模型关联摄像机设备成功");                         });                     });                 } else {                     msg.show("请点击选择一条数据");                 }             },             deleteRelation() {                 if (this.currentRow) {                     msg.confirm("确定删除该摄像机设备的模型关联?", "提示", () => {                         let data = {                             id: this.currentRow.id,                             name: this.currentRow.name,                             model_id: '',                             model_name: ''                         }                          api.updatePtCameraInfo(data, () => {                             this.search();                             msg.show("摄像机设备删除模型关联成功");                         });                     });                 } else {                     msg.show("请点击选择一条数据");                 }             },             show(modelIds, modelNames) {                 this.modelIds = modelIds;                 this.modelNames = modelNames;                 this.dialogVisible = true;                 this.search();             },             search() {                 api.getPtCameraList(this.input.trim(), data => {                     this.tableData = data;                 });             },             setCurrent(row) {                 this.$refs.singleTable.setCurrentRow(row);             },             handleCurrentChange(val) {                 this.currentRow = val;             }         }     });      this.show = vue.show;  }  CameraRelation.prototype.constructor = CameraRelation;  export { CameraRelation }

View Code

CameraRelation.js代码中使用了Vue

四、在项目的html文件中加载模块的html

在index.html中添加(用到了jquery):

如何在 html 项目中引入并使用 vue.js、element-ui如何在 html 项目中引入并使用 vue.js、element-ui

<div id="cameraRelation-container"> </div> <script type="text/javascript">     $("#cameraRelation-container").load("./html/cameraRelation.html"); </script>

View Code

五、index.html中引用show.js

show.js是和index.html对应的业务功能的主模块

如何在 html 项目中引入并使用 vue.js、element-ui如何在 html 项目中引入并使用 vue.js、element-ui

<script type="module" src="./js/show.js"></script>

View Code

五、在show.js文件中引入并使用CameraRelation模块:

Ray2.js模块用于在三维场景中拾取三维模型,然后使用对话框模块CameraRelation.js显示编辑界面

如何在 html 项目中引入并使用 vue.js、element-ui如何在 html 项目中引入并使用 vue.js、element-ui

import { CameraRelation } from '../js.my/CameraRelation.js'; import { Ray2 } from '../js.my/Ray2.js';   let cameraRelation; let ray2;   //平台摄像机关联模型 let rayCallback = function (result) {     if (result.length > 0) {         let modelIds = "";         let modelNames = "";          let pos = result[0].name.lastIndexOf('_');         let namePre = result[0].name.substr(0, pos);          objects.all.map(obj => {             if (obj.name.indexOf(namePre) >= 0) {                 modelIds += obj.id + ",";                 modelNames += obj.name + ",";             }         });          if (!cameraRelation) {             cameraRelation = new CameraRelation();         }          cameraRelation.show(modelIds, modelNames);     } } $("#ray-start").on("click", function (event) {     if (!ray2) {         ray2 = new Ray2();         ray2.config(objects, camera, scene, "GV", rayCallback);         ray2.start();     } else {         ray2.start();     }     msg.show("请点击选择摄像机模型"); }); $("#ray-stop").on("click", function (event) {     if (ray2) {         ray2.stop();         msg.show("摄像机关联模型操作结束");     } });

View Code

效果图:

如何在 html 项目中引入并使用 vue.js、element-ui