1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- import baseComponent from '../helpers/baseComponent'
- import classNames from '../helpers/libs/classNames'
- baseComponent({
- properties: {
- prefixCls: {
- type: String,
- value: 'wux-segment',
- },
- theme: {
- type: String,
- value: 'balanced',
- },
- defaultCurrent: {
- type: Number,
- value: 0,
- },
- current: {
- type: Number,
- value: 0,
- observer(newVal) {
- if (this.data.controlled) {
- this.setData({
- activeKey: newVal,
- })
- }
- },
- },
- values: {
- type: Array,
- value: [],
- },
- disabled: {
- type: Boolean,
- value: false,
- },
- controlled: {
- type: Boolean,
- value: false,
- },
- },
- data: {
- activeKey: 0,
- },
- computed: {
- classes: ['prefixCls, theme, disabled', function(prefixCls, theme, disabled) {
- const wrap = classNames(prefixCls, {
- [`${prefixCls}--${theme}`]: theme,
- [`${prefixCls}--disabled`]: disabled,
- })
- const item = `${prefixCls}__item`
- return {
- wrap,
- item,
- }
- }],
- },
- methods: {
- onTap(e) {
- if (this.data.disabled) return
- this.setActiveKey(e.currentTarget.dataset.index)
- },
- emitEvent(key) {
- this.triggerEvent('change', {
- key,
- values: this.data.values,
- })
- },
- setActiveKey(activeKey) {
- if (this.data.activeKey !== activeKey) {
- if (!this.data.controlled) {
- this.setData({
- activeKey,
- })
- }
- }
- this.emitEvent(activeKey)
- },
- },
- attached() {
- const { defaultCurrent, current, controlled } = this.data
- const activeKey = controlled ? current : defaultCurrent
- if (this.data.activeKey !== activeKey) {
- this.setData({
- activeKey,
- })
- }
- },
- })
|