使用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 滑动选择器封装

你可以通过封装自定义组件来实现 Uniapp 中的滑动选择器。以下是一个简单的封装示例：

1. 创建一个新的组件文件，比如 `CustomPicker.vue`。
2. 在 `CustomPicker.vue` 中，编写你的滑动选择器组件的模板代码，可以使用 `picker` 组件或者其他适合你需求的组件。
3. 在 `CustomPicker.vue` 中，为你的组件定义一个 `value` 属性和一个 `options` 属性，用于接收外部传入的值和选项。
4. 使用 `v-model` 来绑定 `value` 属性，以便可以双向绑定数据。
5. 在 `CustomPicker.vue` 中，监听滑动选择器的变化事件，并将选择的值通过自定义事件 `change` 发送出去。
6. 在外部使用滑动选择器组件时，导入并注册 `CustomPicker.vue` 组件。
7. 在外部使用滑动选择器组件时，通过 `v-model` 绑定选中的值，并通过 `@change` 监听值的变化。

下面是一个简单的示例代码：

<!-- CustomPicker.vue -->
<template>
  <picker :value="value" @change="handleChange">
    <picker-column v-for="option in options" :key="option">{{ option }}</picker-column>
  </picker>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    options: {
      type: Array,
      default: []
    }
  },
  methods: {
    handleChange(e) {
      const { value } = e.detail;
      this.$emit('change', value);
    }
  }
}
</script>

使用示例：

<template>
  <view>
    <custom-picker v-model="selectedValue" :options="pickerOptions" @change="handlePickerChange"></custom-picker>
  </view>
</template>

<script>
import CustomPicker from './CustomPicker.vue';

export default {
  components: {
    CustomPicker
  },
  data() {
    return {
      selectedValue: '',
      pickerOptions: ['Option 1', 'Option 2', 'Option 3']
    }
  },
  methods: {
    handlePickerChange(value) {
      console.log('Selected value:', value);
    }
  }
}
</script>

以上示例中，`CustomPicker.vue` 组件封装了滑动选择器，并通过 `value` 属性接收选中的值，通过 `options` 属性接收选项列表。外部使用时，可以使用 `v-model` 来双向绑定选中的值，并通过 `@change` 监听值的变化。