JSP页面如何引入element-ui详细讲解使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了JSP页面如何引入element-ui详细讲解使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.引入css, js

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2.element-ui官网拉取组件使用
jsp引入elementui,笔记,环境配置,小程序

<div id="app">
 <!--日期组件-->
   <div style="margin-left: 20px"  class="block">
              <span class="demonstration">开始日期</span>
               <el-date-picker
             v-model="value1"
               type="date"
               placeholder="选择日期">
               </el-date-picker>
             </div>
             <div  style="margin: 18px 23px"  class="block">
              <span class="demonstration">结束日期</span>
               <el-date-picker
               v-model="value2"
               type="date"
               placeholder="选择日期">
               </el-date-picker>
             </div>
  </div>

3.初始Vue对象及属性

<script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false,
         pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '' 
        }
      }
    })
  </script>