一、简介
iviewui是基于Vue.js的一套UI框架，用于快速开发WEB类型的应用。iviewui的定位是简洁、易用、高效。 其中“ 简洁“ 的设计风格让iview在保持美观的同时，保证了其易用性；“易用”主要体现在它的API和文档十分友好和丰富，在使用中能够大大提高开发效率；“高效”则主要体现在iview的文件体积小，具有很高的性能。
二、常用组件
1. button
button组件用于添加一个基本的按钮。iviewui提供了多种不同样式的按钮，如默认、主要、信息、警告、危险等。
示例代码：
2. modal(对话框)
modal用于弹出一段提示语、或者进行一些交互操作等。如在用户进行某些操作时给出确认提示、向用户要求输入、在页面上动态展示某些信息或进行一些复杂交互等。
示例代码：
请确认是否修改当前信息？
<script>
export default {
data() {
return {
visible: false
}
},
methods: {
showModal() {
this.visible = true
}
}
}
</script>
3. table(表格)
table用于数据展示。iviewui的table组件提供了表头排序、滚动加载、多选等功能，对于数据展示十分方便。可以看下面的代码示例：
示例代码：
<script>
export default {
data() {
return {
columns: [
{title: '姓名', key: 'name'},
{title: '年龄', key: 'age'},
{title: '地址', key: 'address'}
],
data: [
{name: 'Tom', age: 18, address: '北京市海淀区'},
{name: 'Jerry', age: 22, address: '上海市浦东新区'},
{name: 'Lucy', age: 20, address: '深圳市罗湖区'}
]
}
}
}
</script>
三、其他部分
1. 图标
iview提供了一些非常漂亮的图标，可以通过引入icon组件来使用它们。
示例代码：
2. 表单
iview的表单部分包括了更多的组件，比如input、radio、checkbox、select、cascader、slider、datepicker、timepicker、rate、upload等等，使用起来都非常简单和方便。
示例代码：
<Input v-model="form.username">
<Input type="password" v-model="form.password">
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
}
},
methods: {
handleSubmit() {
this.$refs.formRef.validate(valid => {
if (valid) {
console.log('表单验证通过')
} else {
console.log('表单验证失败')
}
})
},
handleReset() {
this.$refs.formRef.resetFields()
}
}
}
</script>
3. 标签页
iview的标签页非常方便，可以用于展示多个页面的信息以及进行切换。使用Tabs组件，可以轻松地完成标签页的效果。
示例代码：
选项一的内容
选项二的内容
选项三的内容
<script>
export default {
data() {
return {
activeName: '1'
}
}
}
</script>
四、总结
iviewui是为优化Vue.js项目开发体验而生的UI框架，它的设计简洁，易用性强，同时也保证了高效性。通过本文的介绍，我们了解到了iviewui提交的多个组件，比如按钮、弹窗、表单、表格、标签页等。总之，iviewui是一个非常好的Vue.js UI框架，在Vue.js项目的开发过程中，使用iviewui可以提升开发效率、节约时间成本。