更新记录

1.0.0.1（2025-12-25） 下载此版本

提供市场导入

1.0.0（2025-12-25） 下载此版本

master

平台兼容性

uni-app(4.45)

安装

在市场导入xf-segmenteduni_modules版本的即可，无需import

组件关联说明

在市场导入**xf-scss辅助样式，无xf-ui-package关联组件。

代码演示

插件使用

• 位于 uni_modules/xf-segmented/components/xf-segmented
• 导入插件后直接使用

<xf-segmented />

基本用法

• 使用组件代码如下：

  <template>
  <view class="xf-full xf-col" style="background-color: #FFF; padding: 20px;">
      <view>
          <xf-segmented :titleArray="dataArray" v-model:activeIndex="selectedIndex" @change="change"></xf-segmented>
      </view>
      <view class="b-mt10">
          <xf-segmented  :titleArray="dataArray" :size="24" v-model:activeIndex="selectedIndex"></xf-segmented>
      </view>
      <view class="b-mt10">
          <xf-segmented  :titleArray="dataArray" v-model:activeIndex="selectedIndex" :borderRadius="false"></xf-segmented>
      </view>
  </view>
  </template>

• ts 基础用法：另外json对象必须{id,text,noAble}

  <script lang="ts" setup>
  import { ref } from 'vue';
  let dataArray = [
      {id : 1, text:"昨天"},
      {id : 2, text:"今天"},
      {id : 3, text:"明天",noAble : true},
  ]
  
  const selectedIndex = ref(0)
  
  const change = (e)=>{
      console.log(e)
      console.log(selectedIndex.value)
  }
  </script>

API

Props

XFSegmentModel对象如下：

interface XFSegmentModel {
    id : number
    text : string
    noAble : boolean
}

事件 Emits