使用muse-ui制作省市选择器(ts)

最新推荐文章于 2024-06-06 17:12:02 发布

juvialoxer

最新推荐文章于 2024-06-06 17:12:02 发布

阅读量1.1k

点赞数

文章标签： typescript

本文链接：https://blog.csdn.net/juvialoxer/article/details/108347105

版权

本文介绍了如何在基于Vue的移动端H5页面中，结合muse-ui和TypeScript来制作省市选择器。通过修改muse-ui的样式，利用ts+pug进行编写，并处理了px转rem导致的滑动问题，同时提到了需要在vue.config.js中配置以避免第三方组件库的px转换问题。

摘要由CSDN通过智能技术生成

一,安装请参考官网
muse-ui官网
二,使用场景vue构建的移动端h5页面,并将px转换为rem
传送门
三,对muse-ui提供的省市选择器样式的修改(ts+pug的写法)
效果图:
在这里插入图片描述

templat

//template pug
.modalDialog(v-if="visible")
    div.modalAddress
    div.modalPicker
      div.header
        div.cancel(@click="address_cancel") 取消
        div.address 地址
        div.modalok(@click="address_ok") 确认
      mu-slide-picker(
        :slots="addressSlots",
        :visible-item-count="7",
        @change="addressChange",
        :values="address"
      )

script

//script
import address from "@/service/leapAddress";

private visible: boolean = false;
  private select_address() {
   
    this.visible = true;
  }
  private addressSlots = [
    {
   
      width: "100%",
      textAlign: "right",
      values: Object.keys(address),
    },
    {
   
      width: "100%",
      textAlign: "left",
      values: ["北京市"],
    },
  ];
  private address = ["北京市", "北京市"];
  private addressProvince = "北京市";
  private addressCity = "北京市";
  private addressChange(value, index) {
   
    switch (index) {
   
      case 0:
        this.addressProvince = value;
        const arr = address[value];
        this.addressSlots[1].values = arr;
        this.addressCity = arr[0];
        break;
      case 1:
        this.addressCity = value;
        break;
    }
    this.address = [this.addressProvince, this.addressCity];
  }
  private address_cancel() {
   
    this.visible = false;
  }
  private address_select: string = "";
  private address_ok() {
   
    this.visible = false;
    if (this.address[0] && this.address[1]) {
   
      if (this.address[0] === this.address[1]) {
   
        this.address_select = this.address[0];
      } else if (this.address[0] !== this.address[1]) {
   
        this.address_select = this.address[0] + "" + this.address[1];
      }
    }