使用uniapp 帮我封装一个时间选择器

好的，以下是使用uniapp封装时间选择器的代码示例：

<template>
<view>
<picker mode="time" @change="onTimeChange">
<view class="picker">
{{ time }}
</view>
</picker>
</view>
</template>

<script>
export default {
data() {
return {
time: '请选择时间'
}
},
methods: {
onTimeChange(e) {
this.time = e.detail.value
}
}
}
</script>

在这个示例中，我们使用了uniapp提供的picker组件来实现时间选择器的功能。我们设置了picker的mode为time，表示选择的是时间。当用户选择时间后，我们通过onTimeChange方法将选择的时间赋值给time变量，并在页面上展示出来。

相关问题

uniapp封装一个城市选择器

好的，以下是基于uniapp的城市选择器封装代码：

1. 在components文件夹下新建一个CityPicker文件夹，里面新建CityPicker.vue文件：

<template>
  <div class="city-picker">
    <van-picker
      :columns="columns"
      @change="onChange"
      @confirm="onConfirm"
      @cancel="onCancel"
    >
      <template #title>
        <div class="city-picker-header">
          <van-icon name="arrow-left" size="20" @click="onCancel" />
          <span class="city-picker-title">{{title}}</span>
        </div>
      </template>
    </van-picker>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  props: {
    title: {
      type: String,
      default: '选择城市'
    },
    visible: {
      type: Boolean,
      default: false
    },
    value: {
      type: Array,
      default() {
        return [null, null, null];
      }
    }
  },
  computed: mapState({
    cityData: state => state.city.cityData
  }),
  data() {
    return {
      columns: [
        {
          values: []
        },
        {
          values: []
        },
        {
          values: []
        }
      ],
      currentProvince: '',
      currentCity: '',
      currentDistrict: ''
    };
  },
  methods: {
    initColumns() {
      const { columns } = this;
      const provinceList = Object.keys(this.cityData);
      const province = this.currentProvince || provinceList[0];
      const city = this.currentCity || Object.keys(this.cityData[province])[0];
      const district = this.currentDistrict || this.cityData[province][city][0];
      columns[0].values = provinceList;
      columns[1].values = Object.keys(this.cityData[province]);
      columns[2].values = this.cityData[province][city];
      columns.forEach(column => {
        column.defaultIndex = 0;
      });
      this.currentProvince = province;
      this.currentCity = city;
      this.currentDistrict = district;
    },
    onChange(picker, value) {
      const { cityData, columns } = this;
      const province = columns[0].values[value[0]];
      const city = columns[1].values[value[1]];
      const district = columns[2].values[value[2]];
      if (cityData[province][city].indexOf(district) === -1) {
        columns[2].values = cityData[province][city];
      }
    },
    onConfirm() {
      this.$emit('input', [
        this.currentProvince,
        this.currentCity,
        this.currentDistrict
      ]);
      this.$emit('confirm', [
        this.currentProvince,
        this.currentCity,
        this.currentDistrict
      ]);
    },
    onCancel() {
      this.$emit('cancel');
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.initColumns();
      }
    },
    columns: {
      deep: true,
      handler(val) {
        const { cityData } = this;
        const province = val[0].values[val[0].defaultIndex];
        const city = val[1].values[val[1].defaultIndex];
        const district = val[2].values[val[2].defaultIndex];
        if (cityData[province][city].indexOf(district) === -1) {
          val[2].values = cityData[province][city];
          this.currentDistrict = cityData[province][city][0];
        }
        this.currentProvince = province;
        this.currentCity = city;
        this.currentDistrict = district;
      }
    }
  }
};
</script>

<style scoped>
.city-picker {
  height: 300px;
  overflow: hidden;
}

.city-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.city-picker-title {
  font-weight: bold;
  font-size: 16px;
}
</style>

2. 在store文件夹下新建一个city.js文件，里面写入城市数据：

export default {
  state: {
    cityData: {
      北京市: {
        北京市: [
          '东城区',
          '西城区',
          '崇文区',
          '宣武区',
          '朝阳区',
          '丰台区',
          '石景山区',
          '海淀区',
          '门头沟区',
          '房山区',
          '通州区',
          '顺义区',
          '昌平区',
          '大兴区',
          '怀柔区',
          '平谷区',
          '密云县',
          '延庆县'
        ]
      },
      天津市: {
        天津市: [
          '和平区',
          '河东区',
          '河西区',
          '南开区',
          '河北区',
          '红桥区',
          '塘沽区',
          '汉沽区',
          '大港区',
          '东丽区',
          '西青区',
          '津南区',
          '北辰区',
          '武清区',
          '宝坻区',
          '宁河县',
          '静海县',
          '蓟县'
        ]
      },
      河北省: {
        石家庄市: [
          '长安区',
          '桥东区',
          '桥西区',
          '新华区',
          '井陉矿区',
          '裕华区',
          '井陉县',
          '正定县',
          '栾城县',
          '行唐县',
          '灵寿县',
          '高邑县',
          '深泽县',
          '赞皇县',
          '无极县',
          '平山县',
          '元氏县',
          '赵县',
          '辛集市',
          '藁城市',
          '晋州市',
          '新乐市',
          '鹿泉市'
        ],
        唐山市: [
          '路南区',
          '路北区',
          '古冶区',
          '开平区',
          '丰南区',
          '丰润区',
          '滦县',
          '滦南县',
          '乐亭县',
          '迁西县',
          '玉田县',
          '唐海县',
          '遵化市',
          '迁安市'
        ],
        秦皇岛市: [
          '海港区',
          '山海关区',
          '北戴河区',
          '青龙满族自治县',
          '昌黎县',
          '抚宁县',
          '卢龙县'
        ]
      },
      山西省: {
        太原市: [
          '小店区',
          '迎泽区',
          '杏花岭区',
          '尖草坪区',
          '万柏林区',
          '晋源区',
          '清徐县',
          '阳曲县',
          '娄烦县',
          '古交市'
        ],
        大同市: [
          '城区',
          '矿区',
          '南郊区',
          '新荣区',
          '阳高县',
          '天镇县',
          '广灵县',
          '灵丘县',
          '浑源县',
          '左云县',
          '大同县'
        ],
        阳泉市: ['城区', '矿区', '郊区', '平定县', '盂县']
      }
    }
  }
};

3. 在pages文件夹下新建一个Index.vue文件，在里面调用CityPicker组件：

<template>
  <div class="container">
    <van-field
      v-model="value"
      label="城市"
      placeholder="请选择城市"
      readonly
      @click="showPicker"
    />
    <city-picker
      :visible.sync="show"
      :value.sync="value"
      @confirm="onConfirm"
      @cancel="onCancel"
    />
  </div>
</template>

<script>
import CityPicker from '@/components/CityPicker/CityPicker';
export default {
  components: {
    CityPicker
  },
  data() {
    return {
      show: false,
      value: [null, null, null]
    };
  },
  methods: {
    showPicker() {
      this.show = true;
    },
    onConfirm(value) {
      this.value = value;
      this.show = false;
    },
    onCancel() {
      this.show = false;
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}
</style>

这样一个封装好的城市选择器组件就完成了。可以根据自己的需要进行样式和功能的调整。

uniapp使用uview 二次封装多列多选选择器

好的，下面是一个使用 uview-ui 多列选择器组件进行二次封装的示例：

<template>
  <view>
    <u-popup v-model="showPicker" position="bottom" :overlay="true">
      <view>
        <u-picker-view :value="selectedValues" @change="onPickerChange">
          <u-picker-view-column v-for="(column, index) in columns" :key="index">
            <view v-for="(item, i) in column" :key="i">
              <u-checkbox v-model="item.checked">
                {{ item.label }}
              </u-checkbox>
            </view>
          </u-picker-view-column>
        </u-picker-view>
        <u-button type="primary" @click="confirm">确定</u-button>
      </view>
    </u-popup>
    <u-input :value="selectedLabels.join(',')" @click="showPicker = true" disabled></u-input>
  </view>
</template>

<script>
  export default {
    props: {
      columns: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        showPicker: false,
        selectedValues: [],
        selectedLabels: []
      }
    },
    mounted() {
      this.initSelectedValues()
    },
    methods: {
      initSelectedValues() {
        this.selectedValues = this.columns.map(column => {
          return column.findIndex(item => item.checked)
        })
        this.updateSelectedLabels()
      },
      onPickerChange(e) {
        this.selectedValues = e.detail.value
        this.updateSelectedLabels()
      },
      updateSelectedLabels() {
        this.selectedLabels = this.selectedValues.map((value, index) => {
          return this.columns[index][value].label
        })
      },
      confirm() {
        this.showPicker = false
        this.$emit('change', this.selectedLabels)
      }
    }
  }
</script>

在这个示例中，我们使用了 u-popup、u-picker-view、u-picker-view-column 和 u-checkbox 组件来构建一个多列联动多选选择器。它接收一个 columns 数组作为参数，每个元素代表一列数据，每个元素包含 label 和 checked 两个属性，分别表示选项的文本和是否被选中。通过 u-checkbox 组件来实现多选功能。

组件内部使用了 selectedValues 数组来存储每列选中的值的索引，使用 selectedLabels 数组来存储每列选中的值的文本。在初始化和选择变化时，通过 updateSelectedLabels 方法来更新 selectedLabels 数组。在点击确定按钮时，通过 emit 方法将选中的值传递给父组件。

这是一个简单的示例，你可以根据自己的业务需求进行修改和扩展。希望对你有所帮助！