本地引入Vue+ElementUI 组件【记录】

本文讲解在jsp中引入Vue+ElementUI 日期控件。

① 引入必要的js和css

<!--引入 element-ui 的样式，-->
<link rel="stylesheet" href="vue/index.css">
<!-- 必须先引入vue，  后使用element-ui -->
<script src="vue/vue.js"></script>
<!-- 引入element 的组件库-->
<script src="vue/index.js"></script> 

② html代码

 <div style="width:100%"> 
		 <div id="app" style = "margin:120px calc(50% - 304px / 2); " >
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span>时间</span>
					<el-button style="float: right; padding: 3px 0" type="text"><i class="el-icon-share"></i></el-button>
				</div> 
				<el-date-picker 
				  v-model="ruleForm.dateValue"
				  type="date"
				  format="yyyy-MM-dd"
				  value-format="yyyy-MM-dd"
				  @change="go"
				  placeholder="选择日期">
				</el-date-picker>
			</el-card> 
		  </div>  
  </div>

③ script代码

<script>
    new Vue({
      el: '#app',
      data: {
		ruleForm: { dateValue: "" },
	  },
	  methods:{
		go (){
			console.info((this.ruleForm.dateValue+"").replace(/-/g,""))
		}
	  },
	  //计算属性
	  computed: {
		timeDefault() {
		  var date = new Date();
		  var s1 = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate()-1);
		  return s1;
		}
	  }, 
	  mounted() {
		// 初始化查询，默认为前一天
		this.ruleForm.dateValue = this.timeDefault;
	  }
	}) 
	
  </script>

---

以上代码渲染结果会出现缺少图标的问题，图标位置出现方框

方法：

      在ElementUI官方网站下载两个字体

element-icons.woff

element-icons.ttf

然后在index.css同级目录新建fonts文件夹，将两个字体文件放入文件夹即可。

---

正常结果如下：

---

谢谢！