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官網(wǎng)拉取組件使用
<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">結(jié)束日期</span>
<el-date-picker
v-model="value2"
type="date"
placeholder="選擇日期">
</el-date-picker>
</div>
</div>
3.初始Vue對象及屬性文章來源：http://www.zghlxwxcb.cn/news/detail-520255.html
<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>
4.效果
文章來源地址http://www.zghlxwxcb.cn/news/detail-520255.html
到了這里，關(guān)于JSP頁面如何引入element-ui詳細講解使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
