uni-app 使用uviewui 的 ActionSheet 操作菜单分隔符样式问题

操作步骤：

<u-action-sheet  
      title="看"  
:show="show"  
      :actions="[{id: 1, name: '1'}, {id: 2, name: '2}]"  
    >  
    </u-action-sheet>

预期结果：

uviewui ActionSheet 操作菜单弹出层的分隔符样式
```css
border-color: #d6d7d9;

实际结果：

uviewui ActionSheet 操作菜单弹出层的分隔符样式 
```css
border-color: #d6d7d9null;

bug描述：

使用uviewui的u-line组件, borderColor样式多出null

uline组件输出的样式正确, H5中是正常的

信息类别	详细信息
产品分类	uniapp/小程序/微信
PC开发环境操作系统	Windows
PC开发环境操作系统版本号	windows 10
HBuilderX类型	正式
HBuilderX版本号	3.96
第三方开发者工具版本号	1.06.2310080
基础库版本号	3.1.0
项目创建方式	HBuilderX

songsunli 1楼•8 天前

在使用 uView UI 的 ActionSheet 组件时，如果你希望自定义分隔符的样式，可以通过以下方式来实现。

1. 使用 `uView UI` 的默认样式

uView UI 的 ActionSheet 组件默认会为每个操作项之间添加分隔符。如果你对默认的分隔符样式满意，可以直接使用。

<template>
  <view>
    <u-button @click="showActionSheet">显示操作菜单</u-button>
    <u-action-sheet
      :list="actionList"
      v-model="show"
      @click="actionSheetClick"
    ></u-action-sheet>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      actionList: [
        { text: '选项1' },
        { text: '选项2' },
        { text: '选项3' }
      ]
    };
  },
  methods: {
    showActionSheet() {
      this.show = true;
    },
    actionSheetClick(index) {
      console.log('点击了第' + (index + 1) + '个选项');
    }
  }
};
</script>

2. 自定义分隔符样式

如果你希望自定义分隔符的样式，可以通过以下步骤实现：

2.1 使用 `uView UI` 的 `customStyle` 属性

uView UI 的 ActionSheet 组件提供了 customStyle 属性，允许你自定义样式。

<template>
  <view>
    <u-button @click="showActionSheet">显示操作菜单</u-button>
    <u-action-sheet
      :list="actionList"
      v-model="show"
      @click="actionSheetClick"
      :customStyle="customStyle"
    ></u-action-sheet>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      actionList: [
        { text: '选项1' },
        { text: '选项2' },
        { text: '选项3' }
      ],
      customStyle: {
        'border-top': '1px solid #eee', // 自定义分隔符样式
        'margin-top': '10px' // 自定义分隔符间距
      }
    };
  },
  methods: {
    showActionSheet() {
      this.show = true;
    },
    actionSheetClick(index) {
      console.log('点击了第' + (index + 1) + '个选项');
    }
  }
};
</script>

2.2 使用 `scoped` 样式

你也可以在 scoped 样式中直接覆盖 uView UI 的默认样式。

<template>
  <view>
    <u-button @click="showActionSheet">显示操作菜单</u-button>
    <u-action-sheet
      :list="actionList"
      v-model="show"
      @click="actionSheetClick"
    ></u-action-sheet>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      actionList: [
        { text: '选项1' },
        { text: '选项2' },
        { text: '选项3' }
      ]
    };
  },
  methods: {
    showActionSheet() {
      this.show = true;
    },
    actionSheetClick(index) {
      console.log('点击了第' + (index + 1) + '个选项');
    }
  }
};
</script>

<style scoped>
/* 自定义分隔符样式 */
.u-action-sheet-item {
  border-top: 1px solid #eee;
  margin-top: 10px;
}
</style>

3. 使用 `slot` 自定义内容

如果你需要更复杂的自定义，可以使用 slot 来完全自定义 ActionSheet 的内容。

<template>
  <view>
    <u-button @click="showActionSheet">显示操作菜单</u-button>
    <u-action-sheet v-model="show">
      <view class="custom-action-sheet">
        <view class="custom-item">自定义选项1</view>
        <view class="custom-divider"></view>
        <view class="custom-item">自定义选项2</view>
        <view class="custom-divider"></view>
        <view class="custom-item">自定义选项3</view>
      </view>
    </u-action-sheet>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    showActionSheet() {
      this.show = true;
    }
  }
};
</script>

<style scoped>
.custom-action-sheet {
  padding: 20px;
}

.custom-item {
  padding: 15px 0;
  text-align: center;
}

.custom-divider {
  height: 1px;
  background-color: #eee;
  margin: 10px 0;
}
</style>

uni-app 使用uviewui 的 ActionSheet 操作菜单 分隔符样式问题