更新记录

0.1.5(2022-07-02)

完善文档

0.1.4(2022-07-02)

修改说明文档

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

qisi-data-select 数据选择器

组件名:qisi-data-select 代码块: qDataSelect

  • 修复:官方组件异步加载数据不显示的问题
  • 新增:change事件增加第二个参数返回选中的对象数据,方便调用
  • 新增:valueField、textField属性,用来处理服务器返回不是value、text格式的数据
  • 新增:width属性,用以显示不同宽度的选择器
  • 优化:下拉列表中选择中的选项显示特殊的样式方便区分 ::: tip 组件名:qisi-data-select

代码块: uDataSelect

点击下载&安装 :::

当选项过多时,使用下拉菜单展示并选择内容

介绍

本组件要解决问题包括:

  1. 数据绑定型组件:给本组件绑定一个 data,会自动渲染一组候选内容。再以往,开发者需要编写不少代码实现类似功能
  2. 自动的表单校验:组件绑定了 data,且符合uni-forms组件的表单校验规范,搭配使用会自动实现表单校验

在 uniCloud 开发中,DB Schema中配置了 enum 枚举等类型后,在 web 控制台的自动生成表单功能中,会自动生成qisi-data-select组件并绑定好 data

注意事项 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。

  • 组件需要依赖 sass 插件 ,请自行手动安装
  • 本组件为数据驱动,目的是快速投入使用,只可通过 style 覆盖有限样式,不支持自定义更多样式
  • 如使用过程中有任何问题,或者您对 uni-ui 有一些好的建议,欢迎加入 uni-ui 交流群:871950839
  • 组件支持 nvue ,需要在 manifest.json > app-plus 节点下配置 "nvueStyleCompiler" : "uni-app"
  • 如组件显示有问题 ,请升级 HBuilderXv3.1.0 以上

安装方式

本组件符合easycom规范,HBuilderX 2.5.5起,只需将本组件导入项目,在页面template中即可直接使用,无需在页面中import和注册components

基本用法

设置 localdata 属性后,组件会通过数据渲染出对应的内容

<template>
  <view>
    <qisi-data-select
      v-model="value"
      :localdata="range"
      @change="change"
    ></qisi-data-select>
  </view>
</template>
export default {
  data() {
    return {
      value: 0,
      range: [
        { value: 0, text: "篮球" },
        { value: 1, text: "足球" },
        { value: 2, text: "游泳" },
      ],
    };
  },
  methods: {
    change(e,item) {
      console.log("e:", e);
      console.log("item:", item); // 返回被选中的数据的完整对象数据
    },
  },
};

非标数据用法[区别于官方的地方]

<template>
  <view>
    <qisi-data-select
      v-model="value"
      :localdata="range"
      :valueField="id"
      :textField="name"
      @change="change"
    ></qisi-data-select>
  </view>
</template>
export default {
  data() {
    return {
      value: 0,
      range: [
        { id: 0, name: "篮球" },
        { id: 1, name: "足球" },
        { id: 2, name: "游泳" },
      ],
    };
  },
  methods: {
    change(e,item) {
      console.log("e:", e);
      console.log("item:", item); // 返回被选中的数据的完整对象数据
    },
  },
};

云端数据示例

<template>
  <view>
    <!-- 云端数据 -->
    <qisi-data-select
      collection="opendb-app-list"
      field="appid as value, name as text"
      label="应用选择"
      v-model="appid"
      :clear="false"
    />
  </view>
</template>

API

DataSelect Props

属性名 类型 可选值 默认值 说明
value/v-model String/Number - - 默认值,multiple=true 时为 Array 类型,否则为 String 或 Number 类型
localdata Array - - 本地渲染数据,
clear Boolean - - 是否可以清空已选项
label String 左侧标题
placeholder String - 请选择 输入框的提示文字
emptyText String - 暂无数据 没有数据时显示的文字 ,本地数据无效
newvalueField String - value localdata对应的value字段名称
newtextField String - text localdata对应的text字段名称
newwidth Number - 310 组件宽度

DataCom Props

更多 DataCom 支持的属性参考更多

Localdata Options

localdata 属性的格式为数组,数组内每项是对象,需要严格遵循如下格式

属性名 说明
text 显示文本
value 选中后的值
disable 是否禁用

DataSelect Events

事件名 事件说明 返回参数
@change 选中状态改变时触发事件 value,item

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问