uni-data-picker修改成自定义样式

这些是uni-data-pickerview组件vue文件中定义好的，尝试修改没有成功，就直接修改文件了。直接使用uni-data-picker组件，会先显示请选择区域的下拉框，再显示选择区域；我这里需要第二种样式，所以需要使用uni-data-picker组件的插槽用法。7:修改样式后完整uni-data-pickerview组件vue文件。想使用uni-data-picker，并修改成自己自定

黎小小咩~

5928人浏览 · 2023-07-19 15:50:54

黎小小咩~ · 2023-07-19 15:50:54 发布

想使用uni-data-picker，并修改成自己自定义的颜色和样式。

1：修改样式前后样式对比

图1为原本样式，图2，3为修改后的样式

2：两种使用方法

直接使用uni-data-picker组件，会先显示请选择区域的下拉框，再显示选择区域；

直接使用后样式：

<uni-data-picker placeholder="请选择班级" popup-title="请选择所在地区" :localdata="dataTree" v-model="classes" @change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
</uni-data-picker>

使用插槽后样式：

我这里需要第二种样式，所以需要使用uni-data-picker组件的插槽用法

3：uni-data-picker初引入

首先在插件市场通过HBuilderX导入该组件，然后加入以下代码；

如果需要使用本地数据，需要加入属性:localdata="cityData"；

如果需要实现数据双绑，需要加入属性v-model="formItems[2].value"；

<uni-data-picker v-slot:default="{data, error, options}" :localdata="cityData" v-model="formItems[2].value" popup-title="请选择所在地区">
  <view v-if="error" class="error">
    <text>{{error}}</text>
  </view>
  <view v-else-if="data.length" class="selected">
    <view v-for="(item,index) in data" :key="index" class="selected-item">
      <text>{{item.text}}</text>
    </view>
  </view>
  <view v-else>
    <text>请选择</text>
  </view>
</uni-data-picker>

4：引入本地数据：

import cityData from "@/data/city-china.json";

....
data() {
			return {
				cityData,
			}
		},

5：修改初始化"请选择"样式并加入图标

插槽以下处加入class样式，并加入uni-icons即可

<uni-data-picker class="data-picker" :localdata="cityData" v-model="formItems[2].value"
	v-slot:default="{data, error, options}" popup-title="所在地区" placeholder="选择市">
	<view v-if="error" class="error">
		<text>{{error}}</text>
	</view>
	<view v-else-if="data.length" class="selected">
		<view v-for="(item,index) in data" :key="index" class="selected-item">
		    <text>{{item.text}}</text>
		</view>
	</view>
	<view v-else class="active-region">
		<text>请选择</text>
		<uni-icons type="forward"></uni-icons>
	</view>
</uni-data-picker>

$fontColor2: #808080;

.data-picker {
    //data-picker必须和父级元素长度一直才能占满整个容器
	width: 70%;

		.selected {
			// 修改选择完成后省市区横向显示（类名为uni-data-pickerview组件vue文件中定义）
			display: flex;
			font-size: 16px;
			
			// 修改选择完成后省市区间隔距离
			.selected-item {
				padding-right: 10px;
			}
		}

	.active-region {
			font-size: 16px;
			color: $fontColor2;
			display: flex;
			justify-content: space-between;
	}
}

6:修改选择区域样式

请选择--》修改为对应“选择省”“选择市”“选择区”
选择省的下边框颜色，padding和省市区padding

这些是uni-data-pickerview组件vue文件中定义好的，尝试修改没有成功，就直接修改文件了

<!--自定义： 改写字体样式 -->
            <!-- <text>{{item.text || ''}}</text> -->
			<!-- 从请选择修改为请选择省，市，区 -->
            <text v-if="index===0" class="active-resion">{{item.value!==null?item.text : '选择省'}}</text>
            <text v-else-if="index===1" class="active-resion">{{item.value!==null?item.text : '选择市'}}</text>
            <text v-else class="active-resion">{{item.value!==null?item.text : '选择区'}}</text>

	// 自定义颜色
	// $uni-primary: #007aff !default;
	$uni-primary: #bc2840 !default;

...
	.selected-item-active {
		// 自定义border大小
		// border-bottom: 2px solid $uni-primary;
		border-bottom: 4px solid $uni-primary;
		// 自定义请选择字体样式
		.active-resion{
			color: $uni-primary;
			font-size: 15px;
		}
	}

...
  .item {
	  // 自定义修改
    // padding: 12px 15px;

	font-size: 15px;
    padding: 0px 15px;
    /* border-bottom: 1px solid #f0f0f0; */
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    justify-content: space-between;
  }

7:修改样式后完整uni-data-pickerview组件vue文件

<template>
  <view class="uni-data-pickerview">
    <scroll-view v-if="!isCloudDataList" class="selected-area" scroll-x="true">
      <view class="selected-list">
          <view 
            class="selected-item"
            v-for="(item,index) in selected"
            :key="index"
            :class="{
              'selected-item-active':index == selectedIndex
            }"
            @click="handleSelect(index)"
          >
		  <!--自定义： 改写字体样式 -->
            <!-- <text>{{item.text || ''}}</text> -->
			<!-- 从请选择修改为请选择省，市，区 -->
            <text v-if="index===0" class="active-resion">{{item.value!==null?item.text : '选择省'}}</text>
            <text v-else-if="index===1" class="active-resion">{{item.value!==null?item.text : '选择市'}}</text>
            <text v-else class="active-resion">{{item.value!==null?item.text : '选择区'}}</text>
          </view>
      </view>
    </scroll-view>
    <view class="tab-c">
      <scroll-view class="list" :scroll-y="true">
        <view class="item" :class="{'is-disabled': !!item.disable}" v-for="(item, j) in dataList[selectedIndex]" :key="j"
          @click="handleNodeClick(item, selectedIndex, j)">
          <text class="item-text">{{item[map.text]}}</text>
          <view class="check" v-if="selected.length > selectedIndex && item[map.value] == selected[selectedIndex].value"></view>
        </view>
      </scroll-view>

      <view class="loading-cover" v-if="loading">
        <uni-load-more class="load-more" :contentText="loadMore" status="loading"></uni-load-more>
      </view>
      <view class="error-message" v-if="errorMessage">
        <text class="error-text">{{errorMessage}}</text>
      </view>
    </view>
  </view>
</template>

<script>
  import dataPicker from "./uni-data-picker.js"

  /**
   * DataPickerview
   * @description uni-data-pickerview
   * @tutorial https://ext.dcloud.net.cn/plugin?id=3796
   * @property {Array} localdata 本地数据，参考
   * @property {Boolean} step-searh = [true|false] 是否分布查询
   * @value true 启用分布查询，仅查询当前选中节点
   * @value false 关闭分布查询，一次查询出所有数据
   * @property {String|DBFieldString} self-field 分布查询当前字段名称
   * @property {String|DBFieldString} parent-field 分布查询父字段名称
   * @property {String|DBCollectionString} collection 表名
   * @property {String|DBFieldString} field 查询字段，多个字段用 `,` 分割
   * @property {String} orderby 排序字段及正序倒叙设置
   * @property {String|JQLString} where 查询条件
   */
  export default {
    name: 'UniDataPickerView',
    emits: ['nodeclick', 'change', 'datachange', 'update:modelValue'],
    mixins: [dataPicker],
    props: {
      managedMode: {
        type: Boolean,
        default: false
      },
      ellipsis: {
        type: Boolean,
        default: true
      }
    },
    created() {
      if (!this.managedMode) {
        this.$nextTick(() => {
          this.loadData();
        })
      }
    },
    methods: {
      onPropsChange() {
        this._treeData = [];
        this.selectedIndex = 0;
        this.$nextTick(() => {
          this.loadData();
        })
      },
      handleSelect(index) {
        this.selectedIndex = index;
      },
      handleNodeClick(item, i, j) {
        if (item.disable) {
          return;
        }

        const node = this.dataList[i][j];
        const text = node[this.map.text];
        const value = node[this.map.value];

        if (i < this.selected.length - 1) {
          this.selected.splice(i, this.selected.length - i)
          this.selected.push({
            text,
            value
          })
        } else if (i === this.selected.length - 1) {
          this.selected.splice(i, 1, {
            text,
            value
          })
        }

        if (node.isleaf) {
          this.onSelectedChange(node, node.isleaf)
          return
        }

        const {
          isleaf,
          hasNodes
        } = this._updateBindData()

        // 本地数据
        if (this.isLocalData) {
          this.onSelectedChange(node, (!hasNodes || isleaf))
        } else if (this.isCloudDataList) { // Cloud 数据 (单列)
          this.onSelectedChange(node, true)
        } else if (this.isCloudDataTree) { // Cloud 数据 (树形)
          if (isleaf) {
            this.onSelectedChange(node, node.isleaf)
          } else if (!hasNodes) { // 请求一次服务器以确定是否为叶子节点
            this.loadCloudDataNode((data) => {
              if (!data.length) {
                node.isleaf = true
              } else {
                this._treeData.push(...data)
                this._updateBindData(node)
              }
              this.onSelectedChange(node, node.isleaf)
            })
          }
        }
      },
      updateData(data) {
        this._treeData = data.treeData
        this.selected = data.selected
        if (!this._treeData.length) {
          this.loadData()
        } else {
          //this.selected = data.selected
          this._updateBindData()
        }
      },
      onDataChange() {
        this.$emit('datachange');
      },
      onSelectedChange(node, isleaf) {
        if (isleaf) {
          this._dispatchEvent()
        }

        if (node) {
          this.$emit('nodeclick', node)
        }
      },
      _dispatchEvent() {
        this.$emit('change', this.selected.slice(0))
      }
    }
  }
</script>

<style lang="scss">
	// 自定义颜色
	// $uni-primary: #007aff !default;
	$uni-primary: #bc2840 !default;

	.uni-data-pickerview {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		overflow: hidden;
		height: 100%;
	}

  .error-text {
    color: #DD524D;
  }

  .loading-cover {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, .5);
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    align-items: center;
    z-index: 1001;
  }

  .load-more {
    /* #ifndef APP-NVUE */
    margin: auto;
    /* #endif */
  }

  .error-message {
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 15px;
    opacity: .9;
    z-index: 102;
  }

  /* #ifdef APP-NVUE */
  .selected-area {
    width: 750rpx;
  }
  /* #endif */

  .selected-list {
    /* #ifndef APP-NVUE */
    display: flex;
    flex-wrap: nowrap;
    /* #endif */
    flex-direction: row;
    padding: 0 5px;
    border-bottom: 1px solid #f8f8f8;
  }

  .selected-item {
    margin-left: 10px;
    margin-right: 10px;
	// 自定义padding
    padding: 12px 0;
    padding: 0px 0;
    text-align: center;
    /* #ifndef APP-NVUE */
    white-space: nowrap;
    /* #endif */
  }

  .selected-item-text-overflow {
    width: 168px;
    /* fix nvue */
    overflow: hidden;
    /* #ifndef APP-NVUE */
    width: 6em;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    /* #endif */
  }

	.selected-item-active {
		// 自定义border大小
		// border-bottom: 2px solid $uni-primary;
		border-bottom: 4px solid $uni-primary;
		// 自定义请选择字体样式
		.active-resion{
			color: $uni-primary;
			font-size: 15px;
		}
	}

	.selected-item-text {
		color: $uni-primary;
	}

  .tab-c {
    position: relative;
    flex: 1;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    overflow: hidden;
  }

  .list {
    flex: 1;
  }

  .item {
	  // 自定义修改
    // padding: 12px 15px;
	font-size: 15px;
    padding: 0px 15px;
    /* border-bottom: 1px solid #f0f0f0; */
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    justify-content: space-between;
  }

  .is-disabled {
    opacity: .5;
  }

  .item-text {
    /* flex: 1; */
    color: #333333;
  }

  .item-text-overflow {
    width: 280px;
    /* fix nvue */
    overflow: hidden;
    /* #ifndef APP-NVUE */
    width: 20em;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    /* #endif */
  }

	.check {
		margin-right: 5px;
		border: 2px solid $uni-primary;
		border-left: 0;
		border-top: 0;
		height: 12px;
		width: 6px;
		transform-origin: center;
		/* #ifndef APP-NVUE */
		transition: all 0.3s;
		/* #endif */
		transform: rotate(45deg);
	}
</style>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^