BehaviorsUI

Appearance

DataPopup 数据操作器 ​

基本使用 ​

html
<be-data-popup v-model:visible="visible" title="标题" theme="#4a68cc">
  <view>内容</view>
</be-data-popup>
ts
import { ref } from 'vue';

const visible = ref(false);

场景-列表筛选 ​

html
<be-data-popup
  v-model:visible="visible"
  title="筛选"
  theme="#4a68cc"
  @clear="onClear"
  @confirm="onConfirm"
>
  <view class="data-popup-content">
    <view class="section">
      <view class="section-title">类型1</view>
      <view class="section-content">
        <FilterRadio v-model="filterData.type1" :options="typeOptions"></FilterRadio>
      </view>
    </view>
    <view class="section">
      <view class="section-title">类型2</view>
      <view class="section-content">
        <FilterRadio v-model="filterData.type2" :options="typeOptions"></FilterRadio>
      </view>
    </view>
  </view>
</be-data-popup>
ts
import { reactive, ref } from 'vue';

const visible = ref(false);

const filterData = reactive({
  type1: undefined,
  type2: undefined
});

const typeOptions = ref([
  { title: '选项1', value: 1 },
  { title: '选项2', value: 2 },
  { title: '选项3', value: 3 }
]);

const onClear = () => {
  filterData.type1 = undefined;
  filterData.type2 = undefined;
};

const onConfirm = () => {
  console.log('点击确定按钮');
};
scss
.data-popup-content {
  padding: 0rpx 30rpx 10px;

  .section {
    width: 100%;

    .section-title {
      width: 100%;
      padding: 10px 0px;
    }

    .section-content {
      width: 100%;
    }
  }
}

INFO

FilterRadio 组件是基于 Radio 封装的单选器，这里不提供代码，只用于演示。

API ​

Props ​

属性名说明类型默认值
visible(v-model)是否打开弹出层booleanfalse
height弹出层高度css height-
title标题string-
confirmText自定义确定按钮文字string确定
clearText自定义清空按钮文字string清空
maskCloseAble点击遮罩是否关闭弹出层booleantrue
actionCloseAble点击确定或清空按钮后是否关闭弹出层booleantrue
theme主题色css color#4a68cc

Events ​

事件名称说明回调参数
close弹出层关闭-
confirm点击确定按钮-
clear点击清空按钮-