uview中Popup 的customStyle自定义样式试例

以下是一个uview中Popup的customStyle自定义样式的示例：

<template>
  <view>
    <button @click="showPopup">展示Popup</button>
    <popup v-model="show" :custom-style="customStyle">
      <view>这是Popup的内容</view>
    </popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      customStyle: {
        // 自定义样式
        width: "80%",
        height: "200rpx",
        backgroundColor: "#fff",
        borderRadius: "10rpx",
        boxShadow: "0 3rpx 5rpx rgba(0,0,0,0.2)",
        padding: "20rpx",
        color: "#333",
        fontSize: "28rpx",
        lineHeight: "40rpx",
      },
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
  },
};
</script>

在上面的代码中，我们定义了一个customStyle对象，它包含了一些自定义的样式属性。我们将这个对象传递给Popup组件的custom-style属性，以覆盖默认的样式。

在这个示例中，我们将Popup的宽度设置为80%，高度为200rpx，背景颜色为白色，边框圆角为10rpx，阴影为0 3rpx 5rpx rgba(0,0,0,0.2)，内边距为20rpx，字体颜色为#333，字体大小为28rpx，行高为40rpx。

注意，customStyle中的样式属性名需要使用驼峰式命名法，如borderRadius而不是border-radius。如果你不确定某个属性应该如何命名，可以查看官方文档或在样式中尝试使用该属性名，如果IDE没有报错，则说明该属性名可用。

通过自定义样式，我们可以将Popup的样式与我们的项目风格相匹配。