dorado css js css文件,js文件

最新推荐文章于 2021-02-01 02:19:33 发布

puspos

最新推荐文章于 2021-02-01 02:19:33 发布

阅读量394

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/puspos/article/details/111635626

本文介绍了在Dorado项目中如何导入和使用CSS与JS文件，包括在不同位置导入CSS和JS的影响，本地与远程文件的导入方法，以及在使用Vue和Element-UI时的注意事项。强调了CSS应放在head尾部加载，JS放于组件下方以提高加载速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意

dorado中不用拖拽的方式创建控件时，不能使用dorado自带的css，如果想使用dorado相关的css，查看具体的css样式，添加到Demo.view.xml相关的Deom.css中；或将dorado的css文件导入

位置

css导入放在head尾部，提前加载样式，给客户一个好的体验视觉
js导入尽量放在尾部，即组件下面，缓解浏览器的压力，增强网页加载速度，也可放在head

正常项目

导入css文件

head中

link 是 html 加载前引用，import 是 html 加载后引用

<head>
  <meta charset="UTF-8">
  <!-- 方法1 -->
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" type="text/css" href="style.css">
  <!-- 方法2 -->
  <style type="text/css">
      @import url(https://unpkg.com/element-ui/lib/theme-chalk/index.css);
      @import url("style.css"); 
  </style>
</head>

css文件中

 @import url("https://unpkg.com/element-ui/lib/theme-chalk/index.css");

导入js文件

head中

<head>
<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="http://localhost:8080/test/js/random1.js"></script>
</head>

js文件中

//方法1
var script = document.createElement('script');
script.setAttribute('type','text/javascript');
script.setAttribute('src',url);
document.getElementsByTagName('head')[0].appendChild(script);

import './test'

dorado

跟Demo.view.xml同个文件夹下的Demo.css和Demo.js不用加载

导入本地css文件

不能使用js设置styleSheetFile，必须在view属性框中设置styleSheetFile的属性
view的属性styleSheetFile
如果在webContent下，直接/css/a.css
如果在src下，直接com.xx.a.css

导入远程css文件

link比@import快。

实际测试可用的有

js中

//@Bind view.onCreate
//方法1 
!function(){
var link = document.createElement('link');
	link.setAttribute('type','text/css');
	link.setAttribute("rel","stylesheet");
	link.setAttribute("charset","UTF-8");
	link.setAttribute('href',"https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css");
	document.getElementsByTagName('head')[0].appendChild(link);
	}
//jquery
$("head").append('<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">');

Demo.view.xml对应的Demo.css文件中添加，极快又方便

 @import url("https://unpkg.com/element-ui/lib/theme-chalk/index.css");

htmlContainer的Content中写，速度太慢

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

导入本地js文件

view的属性javaScriptFile
如果在webContent下，直接/js/a.js
如果在src下，直接com.xx.a.js

导入远程js

//jquery方式+js方式
var script = $("<script type='text/javascript' src='https://unpkg.com/vue/dist/vue.js'><\/script>")[0];
$("body")[0].appendChild(script);
//js方式
var script2 = document.createElement('script');
script2..type='text/javascript';
script2.src="https://unpkg.com/vue/dist/vue.js";
document.getElementsByTagName('body')[0].appendChild(script);

//jquery方式1【有转义：\/】，在darado中不好使
$("body").prepend("<script type='text/javascript' src='https://unpkg.com/vue/dist/vue.js'><\/script>");
//jquery方式2 在dorado中不好使
$("<script>",{
	type:"text/javascript",
	src:"https://unpkg.com/vue/dist/vue.js",
}).prependTo("body");

使用vue element-ui

由于vue中使用了es6，而dorado7适配的eclipse版本太低，不能安装enide2015来解决es6问题，所以只能使用远程文件，不能使用本地文件。

1 WebContent/WEB-INF/dorado-home/w3c-html4-template.html，是所有该项目的view视图都会加载的模板，所以直接在其中添加vue.js和element-ui的css和js文件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE8">
#outputPageHeader()
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body scroll="no" style="margin:0px; overflow:hidden">
	<label id="doradoView" style="display:none" />
#outputPageFooter()
#outputException()
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</html>

2 使用htmlContainer，在content中添加html代码·

<div id="app">
<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>
</div>

3 在该htmlContainer的onReady事件上添加js代码

new Vue({
  el: '#app',//vue范围，el为id选择器
  data: function() {
    return { visible: false }
  }
});

4 如果只是使用element-ui的css，不用<el-row>，<el-button>等tag，可直接使用，不用第4步