IView入門練習~CDN模式全局加載JS

時間 2019-11-17

原文原文鏈接

關於 iView

iView 是一套基於 Vue.js 的開源 UI 組件庫，主要服務於 PC 界面的中後臺產品。javascript

特性

高質量、功能豐富
友好的 API ，自由靈活地使用空間
細緻、漂亮的 UI
事無鉅細的文檔
可自定義主題

以上內容乃是摘抄官網介紹，懶的寫，如下代碼以記錄最近學習的一些問題解決，IViewUI入門練習~CDN模式全局加載JS，值得注意的地方是，因爲CDN模式與NPM 安裝模式，在HTML中寫入仍是有必定的區別的，例如寫一個日期控件：css

//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模式的注意地方，挺頭疼的，如下是部分的區別：html

在非 template/render 模式下（例如使用 CDN 引用時），組件名要分隔，例如 DatePicker 必需要寫成 date-picker。vue

如下組件，在非 template/render 模式下，須要加前綴 i-：java

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-：app

Switch: i-switch
Circle: i-circle

官網傳送帶https://www.iviewui.com/docs/guide/startiview

如下內容作爲記錄學習，給初學者的一個捷徑。ide

<!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>