<template>
  <view>
    <u-toast ref="uToast"></u-toast>
    <u-cell-group title-bg-color="rgb(243, 244, 246)">
      <u-cell
        :titleStyle="{fontWeight: 500}"
        :title="item.title"
        v-for="(item, index) in list"
        :key="index"
        isLink
        :icon="item.iconUrl"
        @click="showToast(item)"
      >
      </u-cell>
    </u-cell-group>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
        list: [
          {
            type: "default",
            title: "默认主题",
            message: "锦瑟无端五十弦",
            iconUrl: "https://xxx.com/demo/toast/default.png",
          },
          {
            type: "error",
            icon: false,
            title: "失败主题",
            message: "一弦一柱思华年",
            iconUrl: "https://xxx.com/demo/toast/error.png",
          },
          {
            type: "success",
            title: "成功主题(带图标)",
            message: "庄生晓梦迷蝴蝶",
            iconUrl: "https://xxx.com/demo/toast/success.png",
          },
          {
            type: "loading",
            title: "正在加载",
            message: "正在加载",
            iconUrl: "https://xxx.com/demo/toast/loading.png",
          },
          {
            type: "default",
            title: "结束后跳转标签页",
            message: "此情可待成追忆",
            url: "/pages/componentsB/tag/tag",
            iconUrl: "https://xxx.com/demo/toast/jump.png",
          },
        ],
      };
    },
    computed: {
      getIcon() {
        return (path) => {
          return "https://xxx.com/example/" + path + ".png";
        };
      },
    },
    methods: {
      showToast(params) {
        this.$refs.uToast.show({
          ...params,
          complete() {
            params.url &&
              uni.navigateTo({
                url: params.url,
              });
          },
        });
      },
    },
  };
</script>
<style lang="scss">
  .u-page {
    padding: 0;
  }

  .u-cell-icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 8rpx;
  }

  .u-cell-group__title__text {
    font-weight: bold;
  }
</style>
✅ Copy success!
copy