iview的使用
iview官網(wǎng) ：https://www.iviewui.com/components/checkbox
引入js文件及css文件：
<script src="https://vuejs.org/js/vue.min.js"></script>
<link rel="stylesheet" >
<script src="https://unpkg.com/iview/dist/iview.min.js"></script>
<body>
<div id="app">
<Row>
<i-col span="12">
<Steps :current="3">
<Step title="已完成" icon="ios-person" content="這里是該步驟的描述信息"></Step>
<Step title="進(jìn)行中" content="這里是該步驟的描述信息"></Step>
<Step title="待進(jìn)行" content="這里是該步驟的描述信息"></Step>
<Step title="待進(jìn)行" content="這里是該步驟的描述信息"></Step>
</Steps>
</i-col>
<i-col span="12">
<Tabs value="name1">
<Tab-Pane label="macOS" icon="logo-apple">標(biāo)簽一的內(nèi)容</Tab-Pane>
<Tab-Pane label="Windows" icon="logo-windows">標(biāo)簽二的內(nèi)容</Tab-Pane>
</Tabs>
<i-button @click="show">Click me!</i-button>
<i-button type="primary" @click="open(false)">Open notice</i-button>
<i-button @click="open(true)">Open notice(only title)</i-button>
</i-col>
<Modal v-model="visible" title="Welcome">歡迎使用 iView</Modal>
</Row>
</div>
<script>
var ve=new Vue({
el: '#app',
data: {
visible: false,
theme1: 'light'
},
methods: {
show: function() {
this.visible = true;
}
}
}
})
</script>
</body>
上邊寫了一個步驟條的例子
在iview中非template中各控件的代碼有些差別
Col要加前綴i-col
Table---i-table
Buttom---i-button
些許控件改小寫具體見官網(wǎng)的js寫法
總結(jié)
- 上一篇： uni-app 点击查看全部，再点击隐藏
- 下一篇： 山形依旧枕寒流（第一版主网山形依旧枕寒流