IView入门练习~CDN模式全局加载JS

时间:2022-12-03 07:40:30

关于 iView

iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。

特性

  • 高质量、功能丰富
  • 友好的 API ,*灵活地使用空间
  • 细致、漂亮的 UI
  • 事无巨细的文档
  • 可自定义主题

以上内容乃是摘抄官网介绍,懒的写,以下代码以记录最近学习的一些问题解决,IViewUI入门练习~CDN模式全局加载JS,值得注意的地方是,由于CDN模式与NPM 安装模式,在HTML中写入还是有一定的区别的,例如写一个日期控件:

//CDN模式加载
<Row style="margin-left:300px">
  <i-col span="12">
  </i-col>
  <i-col span="12">
    <date-picker style="left:0px" type="daterange" placement="bottom-start" placeholder="选择日期"></date-picker>
  </i-col>
</Row>
//NPM模式安装
<Row style="margin-left:300px">
  <Col span="12">
  </Col>
  <Col span="12">
    <DatePicker style="left:0px" type="daterange" placement="bottom-start" placeholder="选择日期"></DatePicker>
  </Col>
</Row>

可以看出,明显的区别:DatePicker在CDN的模式下要用横杠 一 分开的,在HTML中是不能识别字符的大小写特性。官网也有介绍,但是由于我们平时都是直接找对应的组件,而且在组件中也没有专门写CDN模式的注意地方,挺头疼的,以下是部分的区别:

在非 template/render 模式下(例如使用 CDN 引用时),组件名要分隔,例如 DatePicker 必须要写成 date-picker

以下组件,在非 template/render 模式下,需要加前缀 i-

  • Button: i-button
  • Col: i-col
  • Table: i-table
  • Input: i-input
  • Form: i-form
  • Menu: i-menu
  • Select: i-select
  • Option: i-option
  • Progress: i-progress

以下组件,在所有模式下,必须加前缀 i-

  • Switch: i-switch
  • Circle: i-circle

官网传送带https://www.iviewui.com/docs/guide/start

以下内容做为记录学习,给初学者的一个捷径。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iview example</title>
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
<style type="text/css">
.ivu-select-dropdown{
left:0px
}
</style>
</head>
<body>
<div id="app">
<Tabs value="name1">
<Tab-pane label="我是" name="name1">你好<br />
<i-button @click="show">Click me!</i-button>
<Modal v-model="visible" title="Welcome">欢迎使用 iView</Modal>
</Tab-pane>
<Tab-pane label="博主" name="name2" style="height:300px">
<Row :gutter="16">
<i-Col span="6">
<div style="background-color:red">col-6</div>
</i-Col>
<i-Col span="6">
<div style="background-color:black">col-6</div>
</i-Col>
<i-Col span="6">
<div style="background-color:blue">col-6</div>
</i-Col>
<i-Col span="6">
<div style="background-color:green">col-6</div>
</i-Col>
</Row>
<Auto-Complete
v-model="value2"
@on-search="handleSearch2"
placeholder="input here"
style="width:200px">
<Option v-for="item in data2" :value="item" :key="item">{{ item }}</Option>
</Auto-Complete>
</Tab-pane>
<Tab-pane label="秋意正寒" name="name3">秋意正寒
<Slider v-model="value3" range></Slider>
<Row style="margin-left:300px">
<i-col span="12"> </i-col>
<i-col span="12">
<date-picker style="left:0px" type="daterange" placement="bottom-start" placeholder="选择日期"></date-picker>
</i-col>
</Row>
</Tab-pane>
</Tabs>
</div>
<script >
new Vue({
el: '#app',
data: {
visible: false,
value3: [20, 50],
value2: '',
data2: []
},
methods: {
show: function () {
this.visible = true;
},
handleSearch2 (value) {
this.data2 = !value || value.indexOf('@') >= 0 ? [] : [
value + '@qq.com',
value + '@sina.com',
value + '@163.com'
];
}
}
})
</script>
</body>
</html>

推荐一个网友的总结使用,对于组件的理解比较全面一些,传送门http://blog.csdn.net/u012123026/article/details/72460470

结束~