嘟嘟云A sass ui框架

# 基础用例

默认的 警告的 错误 成功
<db-tag>默认的</db-tag>
<db-tag type="warn">警告的</db-tag>
<db-tag type="error">错误</db-tag>
<db-tag type="success">成功</db-tag>
Expand Copy

# 带关闭按钮

默认的 警告的 错误 成功
<db-tag show-close>默认的</db-tag>
<db-tag type="warn" show-close>警告的</db-tag>
<db-tag type="error" show-close>错误</db-tag>
<db-tag type="success" show-close>成功</db-tag>
Expand Copy

# 标识模式下的tag

默认 警告的 错误 成功 信息
<template>
  <db-tag mode="sign" type="primary">默认</db-tag>
  <db-tag mode="sign" type="warn">警告的</db-tag>
  <db-tag mode="sign" type="error">错误</db-tag>
  <db-tag mode="sign" type="success">成功</db-tag>
  <db-tag mode="sign" type="info">信息</db-tag>
</template>
Expand Copy

# 用于切换路由的tag

添加
<template>
  <db-tag-router :routeList="routeList" v-model="currentKey" ></db-tag-router>
  <db-button style="margin-top:16px;" @click="add">添加</db-button>
</template>

<script>
export default {
  data () { // 数据
    return {
      currentKey: '1',
      i: 1,
      routeList: [{
        meta: {
          title: '链接1'
        },
        id: 1
      }]
    }
  },
  methods: {
    add() {
      this.i += 1
      this.routeList.unshift({
        meta: {
          title: `链接${this.i}`
        },
        id: this.i
      })
    }
  }
}
</script>
Expand Copy

# 用于切换路由的tag 第二种样式

添加
<template>
  <div style="background:#F0F0F2; padding:12px;">
    <db-tag-router mode="delicate" :routeList="routeList" v-model="currentKey" ></db-tag-router>
    <db-button style="margin-top:16px;" @click="add">添加</db-button>
  </div>
  
</template>

<script>
export default {
  data () { // 数据
    return {
      currentKey: '1',
      i: 1,
      routeList: [{
        meta: {
          title: '链接1'
        },
        id: 1
      }]
    }
  },
  methods: {
    add() {
      this.i += 1
      this.routeList.unshift({
        meta: {
          title: `链接${this.i}`
        },
        id: this.i
      })
    }
  }
}
</script>
Expand Copy

# tag props

参数 说明 类型 可选值 默认值 版本
type 类型 string primary success warn error info primary -
mode 模式 string default sign default -
show-close 是否带关闭按钮 boolean - false -

# tag-router Events

事件名称 说明 回调参数
close 点击关闭按钮 -

# tag-router props

参数 说明 类型 可选值 默认值 版本
value / v-model 绑定值 string / number — — -
maxPadding 最大内边框 number — — -
beforeDelete 在删除前，返回false就不删除 function — — 1.1.8

# tag-router Events

事件名称 说明 回调参数
input 双向绑定 (id)
change 改变当前选中 { id, item, index }
close 关闭某个选项 { id, item, index }
afterEnter 动画完成后 event

← 抽屉 drawer →