xukeqig-miniprogram-ui v1.0.1

⭐️xukeqing-miniprogram-ui

⭐️ 不要下载，一个小练习 ⭐️

下载组件

步骤 1：安装到项目根目录下 cnpm i xukeqing-miniprogram-ui -S

步骤 2：构建 npm 包 （将 node_modules 变成公共组件直接用 开发工具左上角工具菜单 -》 构建 npm 包 开发工具右上角详情菜单 -》 本地设置 -》 使用 npm 模块（注：现在已经更新不需要配置了）

使用组件

xxx.json

{ "usingComponents": { "qf-button": "qf-miniprogram-ui/button/button", "qf-dashboard": "qf-miniprogram-ui/dashboard/dashboard", "qf-popup": "qf-miniprogram-ui/popup/popup" } }

xxx.wxml

<qf-dashboard min="0" max="100" val="{{val}}" width="750" height="400" colors="{{myColors}}"

>

点击显示弹出层

xxx.js

xxx.js

Page({ handleClick() { console.log('handleClick') },

handleRandom() { const max = 100 const min = 0 this.setData({ val: Math.floor(Math.random() * (max - min + 1) - 1) }) },

handlePopup() { this.popup.showPopup() },

onReady() { // 获得 popup 组件 this.popup = this.selectComponent('#popup') },

// 取消事件 _error() { console.log('你点击了取消') this.popup.hidePopup() }, // 确认事件 _success() { console.log('你点击了确定') this.popup.hidePopup() },

data: { val: 30, myColors: { percent: 50, color: '#67C23A' }, { percent: 80, color: '#E6A23C' }, { percent: 100, color: '#F56C6C' } }, })