小程序的 iview Weapp 组件库的使用

iview 这个 UI 框架想必大家都很熟了，这个搞 Vue 框架的基本素养。下面来看看小程序版的。

商城小程序必备的数字输入框。

在 .json 中引入组件

在 .wxml 中引入

下面是运行的效果，总的来看还是不错的。

还有个常用的动作面板。

从底部d出的模态框，提供和当前场景相关的 2 个以上的 *** 作动作，也支持提供标题和描述。内置固定的展示样式、不支持特别灵活的修改。

在 .json 中引入组件

在 .wxml 中引入组件

这个动作面板和微信小程序原生的动作面板有啥视觉的区别，一起来看看：

总的来讲 iview 还比较好看的。

更多用法去参考： https://weapp.iviewui.com/

另外有赞出品的 vant 框架小程序版，使用方法去看 小程序如何使用 npm 工具

先将 iview weapp 的 dist文件夹复制到项目的 static/iview 下（ 这个步骤就不赘述了，不懂的可以留言 ）。

在项目 ( app部分 ) 的 app.vue 中加入：

在页面 ( page部分 ) 的文件夹下新建 main.json 文件，写入：

在页面文件夹的 index.vue 文件里写入：

移动端（h5页，小标题）

PC端

移动端：Vant ,Cube-UI , NutUI

PC端:    element-ui  (饿了么)，Ant Design of Vue（蚂蚁），iView（个人）

小程序：uniapp

学习组件库的基本方法是查文档，遇到困难时提 issue

1.首先通过命令： npm i element-ui -S 安装  -S为生产环境依赖，上线时也要一起打包发布

2.到main.js中引入并注册  注意：此时不仅要引入组件还要引入样式，写法固定可以直接到官网上面复制粘贴

3.剩下的就是用哪个组件直接参考组件文档 cv 使用即可，按照要求修改成自己想要的样式。

1.数据源由table组件的data属性来指定（不需要我们自己用v-for指令来循环）

2.data，决定表格的数据。其中的包含行列内容数据的属性是一个数组，数组中的每一个元素是一个对象，一个对象就表示一行。

3.列，决定表格结构。 列由el-table-column决定，列的数据就是数组中每一个对象（行）中的数据，将对象的属性赋给prop属性用来更改列的展示内容，下面有三个属性需要掌握：

①label：决定当前列显示出的标题

②prop：决定当前列数据的来源。对于表格来说， 它的数据是一个数组，每一个元素是一个对象，这里的prop值就是这个对象中的属性名

prop="date"。 这里的prop就是用来从每一个对象中取出属性名为date的 属性值。

③width: 用来设置列的宽度。如果不设置，它会自适应。

data中的数据就是  列  所需要携带的属性，行中有列

当我们想要渲染一些自定义的内容，例如图片， *** 作按钮时，就需要在对应列中，使用 template  标签包裹我们的自定义渲染内容，这时用的就是自定义插槽的机制

要自定义内容：1. 删除prop属性   2.用 插槽

例：想要将数字转换成对应代表的男女

---