uniapp圆环(环形、圆形)进度条的多端完美解决方案、（下拉选择框）

产品出的原型图，找了很多ui啥的，都不能很好的解决，要么在app上显示异常，要么在h5上显示异常。然后毅然决然的决定手撸一个，最后也是完美解决
1、圆环进度条

话不多说，直接上代码（已经上传到npm）

npm install uni-circle-progress

// main.js引入
import CircleProgress from 'uni-circle-progress';
Vue.use(CircleProgress);

直接在页面使用

<circle-progress
:percentage="75"
diameter="200"
line-width="12"
canvas-id="myCanvas"
/>

以下是app显示效果

 以下是h5显示效果

 小程序上没有测试，不过小程序和app一样都没有实体dom，显示效果应该类似

 

插件地址：https://www.npmjs.com/package/uni-circle-progress?activeTab=readme

2、下拉选择框：https://www.npmjs.com/package/uni-multi-select

npm install uni-multi-select

 

// main.js
import UniMultiSelect from 'uni-multi-select'
Vue.use(UniMultiSelect)

// 页面使用
<template>
  <view>
    <uni-multi-select
      v-model="selectedValues"
      :localdata="options"
      multiple
      label="选择项"
      placeholder="请选择"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedValues: [],
      options: [
        { text: '选项1', value: '1' },
        { text: '选项2', value: '2' },
        { text: '选项3', value: '3', disable: true },
        { text: '选项4', value: '4' },
        { text: '选项5', value: '5' }
      ]
    }
  }
}
</script>

Props 参数说明：

v-model / value
类型：Array/String/Number
默认值：-
说明：绑定的值，多选时为数组，单选时为字符串或数字

localdata
类型：Array
默认值：[]
说明：选项数据数组，格式示例：[{text:'显示文本', value:'值', disable: false}]

multiple
类型：Boolean
默认值：false
说明：是否开启多选模式

label
类型：String
默认值：''
说明：左侧显示的标签文本

placeholder
类型：String
默认值：'请选择'
说明：未选择时的占位提示文本

emptyTips
类型：String
默认值：'无选项'
说明：当没有数据时显示的提示文本

clear
类型：Boolean
默认值：true
说明：是否显示清空按钮

disabled
类型：Boolean
默认值：false
说明：是否禁用整个组件

filterable
类型：Boolean
默认值：false
说明：是否开启搜索过滤功能

collapseTags
类型：Boolean
默认值：false
说明：多选时是否折叠显示标签

collapseTagsNum
类型：Number
默认值：1
说明：折叠标签时显示的最大标签数量

dataKey
类型：String
默认值：'text'
说明：指定选项文本对应的字段名

dataValue
类型：String
默认值：'value'
说明：指定选项值对应的字段名

format
类型：String
默认值：''
说明：自定义显示格式，如"{label}-{text}"

defItem
类型：Number
默认值：0
说明：默认选中项的索引(从1开始)

Events 事件说明：

@change
说明：当选中项发生变化时触发
回调参数：当前选中的值(多选时为数组，单选时为单个值)

@input
说明：配合v-model使用的事件
回调参数：当前选中的值

主要功能特性：
支持单选/多选模式切换
支持选项搜索过滤
多选时支持标签折叠显示
支持自定义选项显示格式
支持禁用整个组件或单个选项
支持设置默认选中项
提供清空已选功能
支持CSS变量自定义样式
完美兼容H5/小程序/APP多端