uniapp select选择器

missxiang629

已于 2023-09-24 23:52:55 修改

阅读量2.5k

点赞数 1

文章标签： uni-app 前端 javascript

于 2023-09-24 23:07:04 首次发布

本文链接：https://blog.youkuaiyun.com/missxiang629/article/details/133255568

版权

<template>
  <view class="aaa">
    <u-form-item required label="性别" labelWidth="150rpx">
      <text @click="show = true" :class="value == '请选择' ? 'hui' : ''">
        {{ value }}</text
      >
      <u-select
        v-model="show"
        mode="single-column"
        :list="list"
        @confirm="confirm"
        label-name="label"
      ></u-select>
    </u-form-item>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          value: "1",
          label: "江",
        },
        {
          value: "2",
          label: "湖",
        },
      ],
      show: false,
      value: "请选择",
    };
  },
  onShow() {},
  methods: {
    confirm(e) {
      console.log(e);
      this.value = e[0].value;
    },
  },
};
</script>

<style lang="scss" scoped>
.aaa {
}
.hui {
  color: rgb(192, 196, 204);
}
</style>
<style>
page {
  /* background-color: #f7f7f7; */
}
.biaodan .u-border {
  border: 1px solid transparent !important;
}
.biaodan .u-form-item {
  border-bottom: 1px solid #f7f7f7;
  padding: 5px 15px !important;
}

.biaodan .u-input {
  padding: 0 !important;
  font-size: 14px !important;
}
.u-input__content__field-wrapper__field {
}
</style>

fengzhuang

     <xyselect :form="form" @confirm2="confirm2"></xyselect>
     
     relationship: "",
        relationship_text: "",

    confirm2(name, id) {
      console.log("asdfasdf", 11111);

      this.form.relationship = id;
      this.form.relationship_text = name;
    },

<template>
  <view class="aaa">
    <u-form-item required label="成员关系" labelWidth="150rpx">
      <text @click="show = true" :class="form.relationship_text ? '' : 'hui'">
        {{ form.relationship_text ? form.relationship_text : "请选择" }}</text
      >
      <u-select
        v-model="show"
        mode="single-column"
        :list="list"
        @confirm="confirm"
        label-name="label"
      ></u-select>
    </u-form-item>
  </view>
</template>

<script>
export default {
  props: ["form"],
  data() {
    return {
      list: [
        {
          value: 0,
          label: "朋友",
        },
        {
          value: 1,
          label: "父亲",
        },
        {
          value: 2,
          label: "母亲",
        },
        {
          value: 3,
          label: "儿子",
        },
        {
          value: 14,
          label: "女儿",
        },
        {
          value: 15,
          label: "妻子",
        },
        {
          value: 16,
          label: "丈夫",
        },
        {
          value: 17,
          label: "其他",
        },
      ],
      show: false,
      value: "请选择",
      value2: "",
    };
  },
  onShow() {},
  methods: {
    confirm(e) {
      console.log(e);
      this.$emit("confirm2", e[0].label, e[0].value);
    },
  },
};
</script>

<style lang="scss" scoped>
.aaa {
}
.hui {
  color: rgb(192, 196, 204);
}
</style>
<style>
page {
  /* background-color: #f7f7f7; */
}
.biaodan .u-border {
  border: 1px solid transparent !important;
}
.biaodan .u-form-item {
  border-bottom: 1px solid #f7f7f7;
  padding: 5px 15px !important;
}

.biaodan .u-input {
  padding: 0 !important;
  font-size: 14px !important;
}
.u-input__content__field-wrapper__field {
}
</style>