iview / iview-mpvue

一套高质量的微信小程序 UI 组件库

iView

A high quality UI Toolkit built on Vue.js.

Docs

3.x | 2.x | 1.x

Features

• Dozens of useful and beautiful components.
• Friendly API. It's made for people with any skill level.
• Extensive documentation and demos.
• It is quite beautiful.
• Supports both Vue.js 2 and Vue.js 1.

Who's using iView

• TalkingData 腾云天下
• Alibaba 阿里巴巴
• Baidu 百度
• Tencent 腾讯
• Toutiao 今日头条
• JD 京东
• DiDi 滴滴
• Meituan 美团
• Sina 新浪
• iFLYTEK 科大讯飞
• LY 同程艺龙

If your company or products use iView, welcome to click here to leave a message.

Install

We provide an iView plugin for Vue CLI 3, which you can use to quickly build an iView-based project.

We also provide a starter kit iview-project for you.

Install iView

Using npm:

npm install iview --save

Using a script tag for global use:

<script type="text/javascript" src="iview.min.js"></script>
<link rel="stylesheet" href="dist/styles/iview.css">

You can find more info on the website.

Usage

<template>
    <Slider v-model="value" range />
</template>
<script>
    export default {
        data () {
            return {
                value: [20, 50]
            }
        }
    }
</script>

Using css via import:

import 'iview/dist/styles/iview.css';

Compatibility

• Supports Vue.js 2.x
• Supports Vue.js 1.x - visit 1.0 docs
• Supports SSR
• Supports Nuxt.js
• Supports TypeScript
• Supports Electron
• Most components and features support IE9 and above browsers, some components and features do not support IE

Community

If you want to contribute or have questions or bugs to report:

Questions: Find other users at the Gitter chat or post on StackOverflow using [iview-ui] tag
Bugs: File a issue here - please provide a example so we can help you better
Contribute: Contact us in Gitter chat, WeChat or via mail to [email protected]. PRs welcome!

Major Contributors

Name	Avatar	Name	Avatar	Name	Avatar
Aresn		jingsam		rijn
lcx960324		GITleonine1989		huixisheng
Sergio Crisostomo		lison16		Xotic750
huanghong1125		yangdan8

Ecosystem Links

• iView Developer
• iView Run
• iView-Admin
• iView-Loader
• iView-Plugin
• iView-Area
• iView-Editor

License

MIT

Copyright (c) 2016-present, TalkingData

iview-mpvue's Issues

按照官方文档引入modal组件, 没有效果

aaaa

这是一个无标题的对话框

<script> import iModal from 'iview-mpvue/dist/components/modal/modal' import 'iview-mpvue/dist/components/modal/style/css' export default { data () { return { visible2: false, } }, components: { 'i-modal': iModal, }, mounted() { }, methods: { handleOpen2() { console.log('123') this.visible2 = true }, handleClose2() { this.visible2 = false }, }, } </script> <style> .index-wrapper { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow-y: auto; background-color: #F7F8FA; } </style>

List列表的Cell slot没有效果嘛

List列表的Cell slot没有效果嘛，icon和switch都出不来

盼了好久，这下舒服多了。感谢大家！

基于iview/mpvue 剩余的组件大概什么时候能出来？

大佬们，你们开发的iview-mpvue组件已经有19个，其余的类似model这些组件大概什么时候能完成？有没一个计划？

解析失败

官方的example，pages/index/index.vue，增加一个data={a:'aaa'}，
然后在页面上增加变量a的输出，如下：

<template>
  <div>
    L: {{a}}
    <scoll-view></scoll-view>
    <i-panel title="布局">
      L: {{a}}
      <i-cell-group>
        L: {{a}}

结果是前俩个都可以显示a的值aaa，但是第三个无法显示

i-row嵌套问题

Vue页面代码

<template>
  <i-row>
    <i-row>1</i-row>
    <i-row>2</i-row>
  </i-row>
</template>

<script>
  import iRow from 'iview-mpvue/dist/components/row/row'
  import iCol from 'iview-mpvue/dist/components/col/col'

  export default {
    components: {
      'i-row': iRow,
      'i-col': iCol
    }
  }
</script>

<style>
</style>

微信开发者工具控制台

VM3859:1 ./modules/iview-mpvue/dist/components/row/row.vue.wxml
./modules/iview-mpvue/dist/components/row/row.vue.wxml:-1:-1:-1: Template `./modules/iview-mpvue/dist/components/row/row.vue.wxml:33c54a79` is being called recursively, will be stop.

问题

1. 有点不知所以的报错。可能写多了PC版的,,,转到小程序就不能这么嵌套写！？

双花括号数据绑定失效

<div v-for="(row, index) in logs" :key="index" class="log-item"> <i-card :title="row" extra="extra"> <p slot="content">{{row}}</p> <p slot="footer">footer</p> </i-card> </div>
这样书写时，content中的绑定内容row无法显示，同时还发现在i-col组件中使用双花括号无法绑定数据：
<div v-for="(row, index) in cols" :key="index"> <i-col :span="row.span" i-class="col-class">{{row.content}}</i-col> </div>