jsp中引入ElementUI

客官°小女子只卖身不卖艺 2023-06-29 05:39 50阅读 0赞

Jsp中引入ElementUI得用js引入的方式了，要引入的资源：  
[https://download.csdn.net/download/weixin\_42884584/12095182][https_download.csdn.net_download_weixin_42884584_12095182]  
下面是jsp中引入弹出框：

<%@ page contentType="text/html;charset=utf-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    
    <link rel="stylesheet"	href="./css/element.css">
    
    <script src="./js/vue.js"></script>
    
    <script src="./js/element.js"></script>
    </head>
    <body>
    	<div id="app">
    		
    		<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的
    		Dialog</el-button>
    
    		<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
    		<el-form :model="form"> <el-form-item label="活动名称"
    			:label-width="formLabelWidth"> <el-input
    			v-model="form.name" autocomplete="off"></el-input> </el-form-item> <el-form-item
    			label="活动区域" :label-width="formLabelWidth"> <el-select
    			v-model="form.region" placeholder="请选择活动区域"> <el-option
    			label="区域一" value="shanghai"></el-option> <el-option label="区域二"
    			value="beijing"></el-option> </el-select> </el-form-item> </el-form>
    		<div slot="footer" class="dialog-footer">
    			<el-button @click="dialogFormVisible = false">取 消</el-button>
    			<el-button type="primary" @click="dialogFormVisible = false">确定</el-button>
    		</div>
    		</el-dialog>
    	</div>
    </body>
    <script>
    var Main = { 
    	    data() { 
    	      return { 
    	        dialogTableVisible: false,
    	        dialogFormVisible: false,
    	        form: { 
    	          name: '',
    	          region: '',
    	          date1: '',
    	          date2: '',
    	          delivery: false,
    	          type: [],
    	          resource: '',
    	          desc: ''
    	        },
    	        formLabelWidth: '120px'
    	      };
    	    }
    	  };
    	var Ctor = Vue.extend(Main)
    	new Ctor().$mount('#app')
    </script>
    </html>

[https_download.csdn.net_download_weixin_42884584_12095182]: https://download.csdn.net/download/weixin_42884584/12095182