QinUi

# Tabs 选项卡

统一封装

# 基础用法

<template>
  <div>
    <qinui-text :content="`当前选中: ${theNow}`" />
    <qinui-tabs
      :data="data1"
      v-model="theNow"
    />
  </div>
</template>
<script>
  export default {
    data() {
      return {
        theNow: 'eq',
        data1: [
          {
            label: '关注',
            value: 'ey',
          },
          {
            label: '推荐',
            value: 'et',
          },
          {
            label: '电影',
            value: 'er',
          },
          {
            label: '科技科技',
            value: 'ee',
          },
          {
            label: '音乐',
            value: 'ew',
          },
          {
            label: '美食',
            value: 'eq',
          },
          {
            label: '文化',
            value: 'ed',
          },
          {
            label: '财经',
            value: 'es',
          },
          {
            label: '手工',
            value: 'ea',
          },
        ],
      };
    },
  };
</script>

# 粘性布局

<template>
  <qinui-affix>
    <qinui-tabs
      :data="data1"
      v-model="theNow"
    />
  </qinui-affix>
</template>
<script>
  export default {
    data() {
      return {
        theNow: 'er',
        data1: [
          {
            label: '关注',
            value: 'ey',
          },
          {
            label: '推荐',
            value: 'et',
          },
          {
            label: '电影',
            value: 'er',
          },
          {
            label: '科技科技',
            value: 'ee',
          },
          {
            label: '音乐',
            value: 'ew',
          },
          {
            label: '美食',
            value: 'eq',
          },
          {
            label: '文化',
            value: 'ed',
          },
          {
            label: '财经',
            value: 'es',
          },
          {
            label: '手工',
            value: 'ea',
          },
        ],
      };
    },
  };
</script>

# 滑块宽度不跟随文字多少

设置 :auto-line-width="false"

<template>
  <qinui-tabs
    :data="data1"
    :auto-line-width="false"
    v-model="theNow"
  />
</template>
<script>
  export default {
    data() {
      return {
        theNow: 'ey',
        data1: [
          {
            label: '关注',
            value: 'ey',
          },
          {
            label: '推荐',
            value: 'et',
          },
          {
            label: '电影',
            value: 'er',
          },
          {
            label: '科技科技',
            value: 'ee',
          },
          {
            label: '音乐',
            value: 'ew',
          },
          {
            label: '美食',
            value: 'eq',
          },
          {
            label: '文化',
            value: 'ed',
          },
          {
            label: '财经',
            value: 'es',
          },
          {
            label: '手工',
            value: 'ea',
          },
        ],
      };
    },
  };
</script>

# 禁止滚动

设置 :scrollable="false"

<template>
  <qinui-tabs
    :data="data1"
    :scrollable="false"
    v-model="theNow"
  />
</template>
<script>
  export default {
    data() {
      return {
        theNow: 'ey',
        data1: [
          {
            label: '关注',
            value: 'ey',
          },
          {
            label: '推荐',
            value: 'et',
          },
          {
            label: '电影',
            value: 'er',
          },
          {
            label: '科技科技',
            value: 'ee',
          },
          {
            label: '音乐',
            value: 'ew',
          },
          {
            label: '美食',
            value: 'eq',
          },
          {
            label: '文化',
            value: 'ed',
          },
          {
            label: '财经',
            value: 'es',
          },
          {
            label: '手工',
            value: 'ea',
          },
        ],
      };
    },
  };
</script>

# 自定义滑块和选项内边距样式

设置 lineWidth="30rpx" :autoLineWidth="false" lineBg="#0f0" itemStyle="height: 100px;"

<template>
  <qinui-tabs
    :data="data1"
    v-model="theNow"
    lineWidth="30rpx"
    :autoLineWidth="false"
    lineBg="#0f0"
    itemStyle="height: 100px;"
  />
</template>
<script>
  export default {
    data() {
      return {
        theNow: 'ey',
        data1: [
          {
            label: '关注',
            value: 'ey',
          },
          {
            label: '推荐',
            value: 'et',
          },
        ],
      };
    },
  };
</script>

# 微笑的 iconfont

设置 type="iconfont"

<template>
  <qinui-tabs
    :data="data4"
    type="iconfont"
    v-model="theNow"
  />
</template>
<script>
  export default {
    data() {
      return {
        theNow: 'ey',
        data1: [
          {
            label: '关注',
            value: 'ey',
          },
          {
            label: '推荐',
            value: 'et',
          },
        ],
      };
    },
  };
</script>

# 滑块设置背景图

设置 lineWidth="20px" lineHeight="7px" :lineBg="\url(${lineBg}) 100% 100%`"`

<template>
  <qinui-tabs
    :data="data1"
    v-model="theNow"
    lineWidth="20px"
    lineHeight="7px"
    :lineBg="`url(${theLineBg}) 100% 100%`"
  />
</template>
<script>
  const theLineBg =
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAOCAYAAABdC15GAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFxSURBVHgBzZNRTsJAEIb/WTW+lpiY+FZPIDew3ABP4GJ8hxsI9zBpOYHeQDwBPQI+mRiRvpLojtPdYhCorQqF/6GdbGd2vvwzBXZcNAt4oj1ANeUoAT5iqkUjbEFLHNmhD1YPEvpZ3ghkGlVDCkc94/BmHMq998I5ONiY1ZBfpKAyuOtgAc5yOEDmYEWNh32BHF91sGHZHmwW4azciN9aQwnz3SJEgOmte+R2tdLprTYoa50mvuomlLpD4Y3oQZnov6D2RzCqI93bWOHaEmAGqQUyRBlZR1WfarcD/EJ2z8DtzDGvsMCwpm8XOCfDUsVOCYhiqRxI/CTQo4UOvjzO7Pow18vfywneuUHHUUxLn55lLw5JFpZ8bEUcY8oXdOLWiHLTxvoGpLqoUmy6dBT15o/ox3znpoycAmxUsiJTbs1cmxeVKp+0zmFIS7bGWiVghC7Vwse8jFKAX9eljh4ggKLLv7uaQvG9/F59Oo2SouxPu7OTCxN/s8wAAAAASUVORK5CYII=';
  export default {
    data() {
      return {
        theLineBg,
        theNow: 'ey',
        data1: [
          {
            label: '关注',
            value: 'ey',
          },
          {
            label: '推荐',
            value: 'et',
          },
        ],
      };
    },
  };
</script>

# 右侧自定义插槽

设置 :autoLineWidth="false"

<template>
  <qinui-tabs :data="data1" v-model="theNow">
    <template v-slot:right>
      <view style="padding: 6rpx 12rpx 0">
        <qinui-iconfont iconName="icon-yuyue" />
      </view>
    </template>
  </qinui-tabs>
</template>
<script>
  export default {
    data() {
      return {
        theNow: 'ey',
        data1: [
          {
            label: '关注',
            value: 'ey',
          },
          {
            label: '推荐',
            value: 'et',
          },
          {
            label: '电影',
            value: 'er',
          },
          {
            label: '科技科技',
            value: 'ee',
          },
          {
            label: '音乐',
            value: 'ew',
          },
          {
            label: '美食',
            value: 'eq',
          },
          {
            label: '文化',
            value: 'ed',
          },
          {
            label: '财经',
            value: 'es',
          },
          {
            label: '手工',
            value: 'ea',
          },
        ],
      };
    },
  };
</script>

# 右侧自定义插槽

设置 :autoLineWidth="false"

<template>
  <qinui-tabs
    v-model="theNow"
    :data="data1"
    yesTextStyle="color: blue;font-size:60rpx;"
    noTextStyle="font-size:36rpx;"
  />
</template>
<script>
  export default {
    data() {
      return {
        theNow: 'ey',
        data1: [
          {
            label: '关注',
            value: 'ey',
          },
          {
            label: '推荐',
            value: 'et',
          },
          {
            label: '电影',
            value: 'er',
          },
          {
            label: '科技科技',
            value: 'ee',
          },
          {
            label: '音乐',
            value: 'ew',
          },
          {
            label: '美食',
            value: 'eq',
          },
          {
            label: '文化',
            value: 'ed',
          },
          {
            label: '财经',
            value: 'es',
          },
          {
            label: '手工',
            value: 'ea',
          },
        ],
      };
    },
  };
</script>

# 下面的描述

数据中有 desc 属性

<template>
  <qinui-tabs v-model="theNow" :data="data1" />
</template>
<script>
  export default {
    data() {
      return {
        theNow: 'a4',
        data1: [
          {
            label: '关注',
            value: 'a1',
            desc: '06月07日',
          },
          {
            label: '推荐',
            value: 'a2',
            desc: '06月02日',
          },
          {
            label: '电影',
            value: 'a3',
            desc: '06月27日',
          },
          {
            label: '科技',
            value: 'a4',
            desc: '06月17日',
          },
          {
            label: '文化',
            value: 'b7',
            desc: '06月1日',
          },
          {
            label: '财经',
            value: 'b8',
            desc: '06月4日',
          },
        ],
      };
    },
  };
</script>

# API

# Props

参数 说明 类型 默认值 可选值 版本
modelValue (v-model) 选中的值 String | NUmber 0 - -
scroll 是否横向滚动 Boolean true - -
data 数据，字段参考 Array - - -
fieldNames 字段映射，参考 Object {
disabled: 'disabled',
value: 'value',
label: 'label',
}		 - -
autoLineWidth 是否自动算滑块宽度 Boolean true - -
lineWidth 滑块宽度 String 40rpx - -
lineHeight 滑块高度 String - - -
lineBg 滑块颜色 String - - -
lineBgSize 滑块背景显示大小，当滑块背景设置为图片时使用 String cover - -
itemStyle 菜单样式 String height:110rpx - -
diyStyle 自定义外部样式，如：设置边框等样式 String - - -
diyLineStyle 因为 tabs 的爷爷节点有边距可能定位便宜，新增自定义线样式，如：设置往左挪点样式 String - - 1.17.0+
yesTextStyle 高亮样式 String - - -
noTextStyle 普通样式 String - - -
type 选中样式， line 线条 | iconfont 字体图标 String line line 线条 | iconfont 字体图标 -
iconfontName 字体名字 String qin-ui-a-smilesmall - -
iconfontSize 字体大小 String 40rpx - -
iconfontColor 字体颜色 String var(--qinuiPrimaryColor, #ff361f) - -
iconFontFamily 字体颜色 String qin-ui-iconfont - -

# Data Props

参数 说明 类型 默认值 可选值 版本
value 选中的值 String - - -
label 中文 String - - -
desc 描述 String - - 1.16.0+

# FieldNames Props

参数 说明 类型 默认值 可选值 版本
value 选中的值 String value - -
label 中文 String label - -
desc 中文 String desc - 1.16.0+
disabled 禁用 String disabled - -
count 徽章显示的书 String | Number count - -

# Events

事件名 说明 回调参数
@change 改变状态触发 -
@inited 初始化之后触发 -

← Upload 上传 →