u-dropdown样式修改

  <u-dropdown class="dropdown">
        <u-dropdown-item v-model="value1" title="距离" :options="options1"></u-dropdown-item>
        <u-dropdown-item v-model="value2" title="温度" :options="options2"></u-dropdown-item>
  </u-dropdown>

  <script>
    export default {
      data() {
         return {
            value1: 1,
            value2: 2,
            options1: [{
                label: '默认排序',
                value: 1,
              },
              {
               label: '距离优先',
               value: 2,
              },
              {
               label: '价格优先',
               value: 3,
              }
              ],
            options2: [{
                label: '去冰',
                value: 1,
              },
              {
                 label: '加冰',
                  value: 2,
                    },
                ],
            }
       }


CSS布局:

 <style scoped lang="scss">
    .dropdown {
        background: paleturquoise;
        width: 200rpx;   // 定义显示的宽度
     }
    // 改变菜单 item 的文字和箭头的左右布局
    .dropdown /deep/ .u-flex {
        display: flex;
    }
    // 改变下拉菜单的内容
    .dropdown /deep/ .u-dropdown__content {
        width: 100vw;    //  将下拉菜单的内容宽度等效于屏宽
        left: -10px;         //   调整cell,使得文字显示偏左

        // display: none;   //  可以单独使用来隐藏下拉菜单的内容
    }
    // 可修修改菜单 ItemCell 的行高
    .dropdown /deep/ .u-cell {
        line-height: 20px;
    }
  </style>