tudouUi —— UI组件库

# Toast 消息提示

# 引入

import { Toast } from 'tudou-ui'

# 基础用法

<tudou-button @click='showToast'>点我提示消息</tudou-button>

export default {
  ...
  methods: {
    showToast() {
      this.$toast({
        msg: `提示消息，默认时长2.5秒`
      })
    }
  }
}

# 类型

<tudou-button @click='toastSuccess'>点我提示成功</tudou-button>
<tudou-button @click='toastError'>点我提示错误</tudou-button>

export default {
  ...
  methods: {
    toastSuccess() {
      this.$toast({
        msg: `提示成功`,
        type: 'success'
      })
    },
    toastError() {
      this.$toast({
        msg: `提示错误`,
        type: 'error'
      })
    }
  }
}

# 自定义时长

<tudou-button @click='toastFast'>点我快速提示</tudou-button>

export default {
  ...
  methods: {
    toastFast() {
      this.$toast({
        msg: `快速提示，自定义时长为0.7秒`,
        duration: 700
      })
    }
  }
}

# API

属性 类型 默认值 说明
msg String '' 必传，设置Toast的消息内容
type String '' 设置Toast的类型，可选值success、error或不设
duration number 2500 设置Toast的时长，单位为毫秒

# 引入

import { Modal } from 'tudou-ui'

# 基础用法（JS）

<tudou-button @click='showModal'>点我展示对话框</tudou-button>

export default {
  methods: {
    showModal() {
      this.$modal({
        title: "默认对话框",
        content: "这是内容"
      })
    }
  }
}

# 基础用法（Vue 指令）

<tudou-button v-modal='modalConfig'>点我展示对话框</tudou-button>

export default {
  data() {
    return {
      modalConfig: {
        title: "Vue 指令对话框",
        content: "这是内容"
      }
    }
  }
}

# 显示次按钮

<tudou-button @click='showModal'>点我展示对话框</tudou-button>

export default {
  methods: {
    showModal() {
      this.$modal({
        title: "多按钮对话框",
        content: "这是内容",
        multiple: true
      })
    }
  }
}

# 自定义按钮文本

<tudou-button @click='showModal'>点我展示对话框</tudou-button>

export default {
  methods: {
    showModal() {
      this.$modal({
        title: "自定义按钮文本",
        content: "这是内容",
        multiple: true,
        mainVal: "自定义主按钮",
        subVal: "自定义次按钮"
      })
    }
  }
}

# 给按钮绑定事件

<tudou-button @click='showModal'>点我展示对话框</tudou-button>

export default {
  methods: {
    showModal() {
      this.$modal({
        title: "给按钮绑定事件",
        content: "这是内容",
        multiple: true,
        clickMain: () => {console.log("点击主按钮触发事件")},
        clickSub: () => {console.log("点击次按钮触发事件")}
      })
    }
  }
}

# API

属性 类型 默认值 说明
title String '' 设置Modal的标题，必传
content String '' 设置Modal的内容，必传
multiple Boolean false 设置Modal是否同时显示主按钮与次按钮，默认只显示主按钮
mainVal String '确定' 设置主按钮的文本
subVal String '取消' 设置次按钮的文本
clickMain Function 无 设置点击主按钮的触发事件
clickSub Function 无 设置点击次按钮的触发事件

# Popover 召唤浮框

# 引入

import { Popover } from 'tudou-ui'

# 基础用法（JS）

<tudou-popover text="苏打绿乐团">
  <div class="testttttt">你最美丽</div>
</tudou-popover>

TO BE CONTINUED...